jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-08-02 14:07:55 +00:00
Code Issues Packages Projects Releases Wiki Activity

Checked button colors (#4203)

Browse Source 
* split switch-checked-color into 2 vars like the unchecked variant

* Apply new css vars

* revert accidental delete

* revert demo changes

* revert property change
This commit is contained in:
Joakim Sørensen 2019-11-10 18:40:36 +01:00 committed by Bram Kragten
parent f1980d6bcf
commit eaedb2e5ae
2 changed files with 10 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/ha-switch.ts
View File

@ -32,6 +32,14 @@ export class HaSwitch extends MwcSwitch {
flex-direction: row; flex-direction: row;
align-items: center; align-items: center;
} }
.mdc-switch.mdc-switch--checked .mdc-switch__thumb {
background-color: var(--switch-checked-button-color);
border-color: var(--switch-checked-button-color);
}
.mdc-switch.mdc-switch--checked .mdc-switch__track {
background-color: var(--switch-checked-track-color);
border-color: var(--switch-checked-track-color);
}
.mdc-switch:not(.mdc-switch--checked) .mdc-switch__thumb { .mdc-switch:not(.mdc-switch--checked) .mdc-switch__thumb {
background-color: var(--switch-unchecked-button-color); background-color: var(--switch-unchecked-button-color);
border-color: var(--switch-unchecked-button-color); border-color: var(--switch-unchecked-button-color);

2
src/resources/ha-style.ts
View File

@ -57,6 +57,8 @@ documentContainer.innerHTML = `<custom-style>
/* controls */ /* controls */
--switch-checked-color: var(--primary-color); --switch-checked-color: var(--primary-color);
/* --switch-unchecked-color: var(--accent-color); */ /* --switch-unchecked-color: var(--accent-color); */
--switch-checked-button-color: var(--switch-checked-color, var(--paper-grey-50));
--switch-checked-track-color: var(--switch-checked-color, #000000);
--switch-unchecked-button-color: var(--switch-unchecked-color, var(--paper-grey-50)); --switch-unchecked-button-color: var(--switch-unchecked-color, var(--paper-grey-50));
--switch-unchecked-track-color: var(--switch-unchecked-color, #000000); --switch-unchecked-track-color: var(--switch-unchecked-color, #000000);
--slider-color: var(--primary-color); --slider-color: var(--primary-color);