Mirror/betaflight-configurator
1
0
Fork 0
mirror of https://github.com/betaflight/betaflight-configurator.git synced 2025-07-25 17:25:16 +03:00
Code Issues Wiki Activity

Convert battery icon to vue component (#2726)

Browse source 
* feat: use vue battery icon
* Add battery icon stories
* feat: use battery state if available
This commit is contained in:
Tomas Chmelevskij 2023-01-07 00:04:21 +01:00 • committed by GitHub
parent 1301f97a4f
commit e0209c6b59
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
9 changed files with 213 additions and 87 deletions
Download patch file Download diff file Expand all files Collapse all files

75
src/css/main.less
View file

@ -1,37 +1,3 @@
@keyframes error-blinker {
0% {
background-color: transparent;
}
50% {
background-color: var(--error);
}
}
&:root {
--accent: #ffbb00;
--error: red;
--subtleAccent: silver;
--quietText: #ffffff;
--quietHeader: #828885;
--defaultText: #000000;
--subtleText: #c0c0c0;
--mutedText: #616161;
--linkText: #2e2ebb;
--boxBackground: #ffffff;
--alternativeBackground: #f9f9f9;
--sideBackground: #ffffff;
--ledAccent: #adadad;
--ledBackground: #e9e9e9;
--gimbalBackground: #eee;
--gimbalCrosshair: var(--subtleAccent);
--switcherysecond: #c4c4c4;
--pushedButton-background: #c4c4c4;
--pushedButton-fontColor: #000000;
--hoverButton-background: #ffcc3e;
--superSubtleAccent: #CCCCCC;
--accentBorder: #ffbb00;
}
* {
margin: 0;
padding: 0;
@ -621,46 +587,7 @@ input[type="number"] {
text-shadow: 0 1px rgba(0, 0, 0, 1.0);
white-space: nowrap;
}
.quad-status-contents {
display: none;
margin-top: 10px;
margin-left: 14px;
height: 10px;
width: 31px;
progress {
&::-webkit-progress-bar {
height: 12px;
background-color: #eee;
}
&::-webkit-progress-value {
background-color: #bcf;
}
}
}
.battery-status {
height: 11px;
}
.battery-status.state-ok {
background-color: #59AA29;
}
.battery-status.state-warning {
background-color: var(--error);
}
.battery-status.state-empty {
animation: error-blinker 1s linear infinite;
}
.battery-icon {
background-image: url(../images/icons/cf_icon_bat_grey.svg);
background-size: contain;
background-position: center;
display: inline-block;
height: 30px;
width: 60px;
transition: none;
margin-top: 4px;
margin-left: -4px;
background-repeat: no-repeat;
}
.armedicon {
margin-left: 8px;
margin-right: 8px;