flan/advanced-camera-card
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: Use HA style and coloring for all icons (#1790)

Browse Source
This commit is contained in:
Dermot Duffy
2024-12-23 15:22:27 -08:00
committed by GitHub
parent a9e5889ca7
commit 9d812af9f4
68 changed files with 557 additions and 1366 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/scss/button.scss
+1 -86
View File
@@ -5,93 +5,8 @@ ha-icon-button.button {
padding: 0px;
margin: 3px;
--ha-icon-display: block;
/* Buttons can always be clicked */
pointer-events: auto;
opacity: 0.9;
}
// =====================================================================================
// From: https://github.com/home-assistant/frontend/blob/dev/src/common/style/icon_color_css.ts
// Modified version for ha-icon and ha-icon-button.
// =====================================================================================
@keyframes pulse {
0% {
opacity: 1;
}
50% {
opacity: 0.6;
}
100% {
opacity: 1;
}
}
@mixin state-icon($element) {
#{$element}[data-domain='alert'][data-state='on'],
#{$element}[data-domain='automation'][data-state='on'],
#{$element}[data-domain='binary_sensor'][data-state='on'],
#{$element}[data-domain='calendar'][data-state='on'],
#{$element}[data-domain='camera'][data-state='streaming'],
#{$element}[data-domain='cover'][data-state='open'],
#{$element}[data-domain='fan'][data-state='on'],
#{$element}[data-domain='humidifier'][data-state='on'],
#{$element}[data-domain='light'][data-state='on'],
#{$element}[data-domain='input_boolean'][data-state='on'],
#{$element}[data-domain='lock'][data-state='unlocked'],
#{$element}[data-domain='media_player'][data-state='on'],
#{$element}[data-domain='media_player'][data-state='paused'],
#{$element}[data-domain='media_player'][data-state='playing'],
#{$element}[data-domain='script'][data-state='on'],
#{$element}[data-domain='sun'][data-state='above_horizon'],
#{$element}[data-domain='switch'][data-state='on'],
#{$element}[data-domain='timer'][data-state='active'],
#{$element}[data-domain='vacuum'][data-state='cleaning'],
#{$element}[data-domain='group'][data-state='on'],
#{$element}[data-domain='group'][data-state='home'],
#{$element}[data-domain='group'][data-state='open'],
#{$element}[data-domain='group'][data-state='locked'],
#{$element}[data-domain='group'][data-state='problem'] {
color: var(--paper-item-icon-active-color, #fdd835);
}
#{$element}[data-domain='climate'][data-state='cooling'] {
color: var(--cool-color, var(--state-climate-cool-color));
}
#{$element}[data-domain='climate'][data-state='heating'] {
color: var(--heat-color, var(--state-climate-heat-color));
}
#{$element}[data-domain='climate'][data-state='drying'] {
color: var(--dry-color, var(--state-climate-dry-color));
}
#{$element}[data-domain='alarm_control_panel'] {
color: var(--alarm-color-armed, var(--label-badge-red));
}
#{$element}[data-domain='alarm_control_panel'][data-state='disarmed'] {
color: var(--alarm-color-disarmed, var(--label-badge-green));
}
#{$element}[data-domain='alarm_control_panel'][data-state='pending'],
#{$element}[data-domain='alarm_control_panel'][data-state='arming'] {
color: var(--alarm-color-pending, var(--label-badge-yellow));
animation: pulse 1s infinite;
}
#{$element}[data-domain='alarm_control_panel'][data-state='triggered'] {
color: var(--alarm-color-triggered, var(--label-badge-red));
animation: pulse 1s infinite;
}
#{$element}[data-domain='plant'][data-state='problem'],
#{$element}[data-domain='zwave'][data-state='dead'] {
color: var(--state-icon-error-color);
}
/* Color the icon if unavailable */
#{$element}[data-state='unavailable'] {
color: var(--state-unavailable-color);
}
}
@include state-icon('ha-icon');
@include state-icon('ha-icon-button');