Update control slider color (#20124)
* Increase control slider thickness and border radius * Increase control switch, select thickness and border radius * Update assumed state toggle buttons
This commit is contained in:
parent
10cc3bdd3f
commit
447932eedb
|
@ -162,7 +162,7 @@ export class DemoHaBarButton extends LitElement {
|
|||
}
|
||||
.custom-group {
|
||||
--control-button-group-thickness: 100px;
|
||||
--control-button-group-border-radius: 18px;
|
||||
--control-button-group-border-radius: 36px;
|
||||
--control-button-group-spacing: 20px;
|
||||
}
|
||||
.custom-group ha-control-button {
|
||||
|
|
|
@ -94,7 +94,7 @@ export class DemoHarControlNumberButtons extends LitElement {
|
|||
--control-number-buttons-background-color: #2196f3;
|
||||
--control-number-buttons-background-opacity: 0.1;
|
||||
--control-number-buttons-thickness: 100px;
|
||||
--control-number-buttons-border-radius: 24px;
|
||||
--control-number-buttons-border-radius: 36px;
|
||||
}
|
||||
`;
|
||||
}
|
||||
|
|
|
@ -186,8 +186,8 @@ export class DemoHaControlSelect extends LitElement {
|
|||
.custom {
|
||||
--mdc-icon-size: 24px;
|
||||
--control-select-color: var(--state-fan-active-color);
|
||||
--control-select-thickness: 100px;
|
||||
--control-select-border-radius: 24px;
|
||||
--control-select-thickness: 130px;
|
||||
--control-select-border-radius: 48px;
|
||||
}
|
||||
.vertical-selects {
|
||||
height: 300px;
|
||||
|
|
|
@ -150,8 +150,8 @@ export class DemoHaBarSlider extends LitElement {
|
|||
--control-slider-color: #ffcf4c;
|
||||
--control-slider-background: #ffcf4c;
|
||||
--control-slider-background-opacity: 0.2;
|
||||
--control-slider-thickness: 100px;
|
||||
--control-slider-border-radius: 24px;
|
||||
--control-slider-thickness: 130px;
|
||||
--control-slider-border-radius: 48px;
|
||||
}
|
||||
.vertical-sliders {
|
||||
height: 300px;
|
||||
|
|
|
@ -117,8 +117,8 @@ export class DemoHaControlSwitch extends LitElement {
|
|||
.custom {
|
||||
--control-switch-on-color: var(--green-color);
|
||||
--control-switch-off-color: var(--red-color);
|
||||
--control-switch-thickness: 100px;
|
||||
--control-switch-border-radius: 24px;
|
||||
--control-switch-thickness: 130px;
|
||||
--control-switch-border-radius: 48px;
|
||||
--control-switch-padding: 6px;
|
||||
--mdc-icon-size: 24px;
|
||||
}
|
||||
|
|
|
@ -529,7 +529,7 @@ export class HaControlSlider extends LitElement {
|
|||
0,
|
||||
0
|
||||
);
|
||||
border-radius: 0 var(--border-radius) var(--border-radius) 0;
|
||||
border-radius: 0 8px 8px 0;
|
||||
}
|
||||
.slider .slider-track-bar:after {
|
||||
top: 0;
|
||||
|
@ -546,7 +546,7 @@ export class HaControlSlider extends LitElement {
|
|||
0,
|
||||
0
|
||||
);
|
||||
border-radius: var(--border-radius) 0 0 var(--border-radius);
|
||||
border-radius: 8px 0 0 8px;
|
||||
}
|
||||
.slider .slider-track-bar.end::after {
|
||||
right: initial;
|
||||
|
@ -561,7 +561,7 @@ export class HaControlSlider extends LitElement {
|
|||
calc((1 - var(--value, 0)) * var(--slider-size)),
|
||||
0
|
||||
);
|
||||
border-radius: var(--border-radius) var(--border-radius) 0 0;
|
||||
border-radius: 8px 8px 0 0;
|
||||
}
|
||||
:host([vertical]) .slider .slider-track-bar:after {
|
||||
top: var(--handle-margin);
|
||||
|
@ -579,7 +579,7 @@ export class HaControlSlider extends LitElement {
|
|||
calc((0 - var(--value, 0)) * var(--slider-size)),
|
||||
0
|
||||
);
|
||||
border-radius: 0 0 var(--border-radius) var(--border-radius);
|
||||
border-radius: 0 0 8px 8px;
|
||||
}
|
||||
:host([vertical]) .slider .slider-track-bar.end::after {
|
||||
top: initial;
|
||||
|
|
|
@ -189,8 +189,8 @@ class LightColorTempPicker extends LitElement {
|
|||
height: 45vh;
|
||||
max-height: 320px;
|
||||
min-height: 200px;
|
||||
--control-slider-thickness: 100px;
|
||||
--control-slider-border-radius: 24px;
|
||||
--control-slider-thickness: 130px;
|
||||
--control-slider-border-radius: 48px;
|
||||
--control-slider-color: var(--primary-color);
|
||||
--control-slider-background: -webkit-linear-gradient(
|
||||
top,
|
||||
|
|
|
@ -128,8 +128,8 @@ export class HaStateControlAlarmControlPanelModes extends LitElement {
|
|||
height: 45vh;
|
||||
max-height: max(320px, var(--modes-count, 1) * 80px);
|
||||
min-height: max(200px, var(--modes-count, 1) * 80px);
|
||||
--control-select-thickness: 100px;
|
||||
--control-select-border-radius: 24px;
|
||||
--control-select-thickness: 130px;
|
||||
--control-select-border-radius: 48px;
|
||||
--control-select-color: var(--primary-color);
|
||||
--control-select-background: var(--disabled-color);
|
||||
--control-select-background-opacity: 0.2;
|
||||
|
|
|
@ -254,7 +254,7 @@ export class HaStateControlCoverButtons extends LitElement {
|
|||
height: 45vh;
|
||||
max-height: 320px;
|
||||
min-height: 200px;
|
||||
--control-button-group-spacing: 6px;
|
||||
--control-button-group-spacing: 10px;
|
||||
--control-button-group-thickness: 100px;
|
||||
}
|
||||
.cross-container {
|
||||
|
@ -262,7 +262,7 @@ export class HaStateControlCoverButtons extends LitElement {
|
|||
max-height: 320px;
|
||||
min-height: 200px;
|
||||
display: grid;
|
||||
grid-gap: 10px;
|
||||
gap: 10px;
|
||||
grid-template-columns: repeat(3, min(100px, 25vw, 15vh));
|
||||
grid-template-rows: repeat(3, min(100px, 25vw, 15vh));
|
||||
grid-template-areas: ". open ." "close-tilt stop open-tilt" ". close .";
|
||||
|
@ -287,7 +287,7 @@ export class HaStateControlCoverButtons extends LitElement {
|
|||
grid-area: stop;
|
||||
}
|
||||
ha-control-button {
|
||||
--control-button-border-radius: 18px;
|
||||
--control-button-border-radius: 36px;
|
||||
--mdc-icon-size: 24px;
|
||||
}
|
||||
`;
|
||||
|
|
|
@ -74,8 +74,8 @@ export class HaStateControlCoverPosition extends LitElement {
|
|||
height: 45vh;
|
||||
max-height: 320px;
|
||||
min-height: 200px;
|
||||
--control-slider-thickness: 100px;
|
||||
--control-slider-border-radius: 24px;
|
||||
--control-slider-thickness: 130px;
|
||||
--control-slider-border-radius: 48px;
|
||||
--control-slider-color: var(--primary-color);
|
||||
--control-slider-background: var(--disabled-color);
|
||||
--control-slider-background-opacity: 0.2;
|
||||
|
|
|
@ -111,8 +111,8 @@ export class HaStateControlInfoCoverTiltPosition extends LitElement {
|
|||
height: 45vh;
|
||||
max-height: 320px;
|
||||
min-height: 200px;
|
||||
--control-slider-thickness: 100px;
|
||||
--control-slider-border-radius: 24px;
|
||||
--control-slider-thickness: 130px;
|
||||
--control-slider-border-radius: 48px;
|
||||
--control-slider-color: var(--primary-color);
|
||||
--control-slider-background: var(--disabled-color);
|
||||
--control-slider-background-opacity: 0.2;
|
||||
|
|
|
@ -141,15 +141,15 @@ export class HaStateControlCoverToggle extends LitElement {
|
|||
height: 45vh;
|
||||
max-height: 320px;
|
||||
min-height: 200px;
|
||||
--control-switch-thickness: 100px;
|
||||
--control-switch-border-radius: 24px;
|
||||
--control-switch-thickness: 130px;
|
||||
--control-switch-border-radius: 48px;
|
||||
--control-switch-padding: 6px;
|
||||
--mdc-icon-size: 24px;
|
||||
}
|
||||
.buttons {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100px;
|
||||
width: 130px;
|
||||
height: 45vh;
|
||||
max-height: 320px;
|
||||
min-height: 200px;
|
||||
|
@ -159,7 +159,7 @@ export class HaStateControlCoverToggle extends LitElement {
|
|||
ha-control-button {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
--control-button-border-radius: 18px;
|
||||
--control-button-border-radius: 48px;
|
||||
--mdc-icon-size: 24px;
|
||||
}
|
||||
ha-control-button.active {
|
||||
|
|
|
@ -141,8 +141,8 @@ export class HaStateControlFanSpeed extends LitElement {
|
|||
height: 45vh;
|
||||
max-height: 320px;
|
||||
min-height: 200px;
|
||||
--control-slider-thickness: 100px;
|
||||
--control-slider-border-radius: 24px;
|
||||
--control-slider-thickness: 130px;
|
||||
--control-slider-border-radius: 48px;
|
||||
--control-slider-color: var(--primary-color);
|
||||
--control-slider-background: var(--disabled-color);
|
||||
--control-slider-background-opacity: 0.2;
|
||||
|
@ -152,8 +152,8 @@ export class HaStateControlFanSpeed extends LitElement {
|
|||
height: 45vh;
|
||||
max-height: 320px;
|
||||
min-height: 200px;
|
||||
--control-select-thickness: 100px;
|
||||
--control-select-border-radius: 24px;
|
||||
--control-select-thickness: 130px;
|
||||
--control-select-border-radius: 48px;
|
||||
--control-select-color: var(--primary-color);
|
||||
--control-select-background: var(--disabled-color);
|
||||
--control-select-background-opacity: 0.2;
|
||||
|
|
|
@ -132,15 +132,15 @@ export class HaStateControlToggle extends LitElement {
|
|||
height: 45vh;
|
||||
max-height: 320px;
|
||||
min-height: 200px;
|
||||
--control-switch-thickness: 100px;
|
||||
--control-switch-border-radius: 24px;
|
||||
--control-switch-thickness: 130px;
|
||||
--control-switch-border-radius: 48px;
|
||||
--control-switch-padding: 6px;
|
||||
--mdc-icon-size: 24px;
|
||||
}
|
||||
.buttons {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100px;
|
||||
width: 130px;
|
||||
height: 45vh;
|
||||
max-height: 320px;
|
||||
min-height: 200px;
|
||||
|
@ -150,7 +150,7 @@ export class HaStateControlToggle extends LitElement {
|
|||
ha-control-button {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
--control-button-border-radius: 18px;
|
||||
--control-button-border-radius: 48px;
|
||||
--mdc-icon-size: 24px;
|
||||
}
|
||||
ha-control-button.active {
|
||||
|
|
|
@ -84,11 +84,12 @@ export class HaStateControlLightBrightness extends LitElement {
|
|||
static get styles(): CSSResultGroup {
|
||||
return css`
|
||||
ha-control-slider {
|
||||
position: relative;
|
||||
height: 45vh;
|
||||
max-height: 320px;
|
||||
min-height: 200px;
|
||||
--control-slider-thickness: 100px;
|
||||
--control-slider-border-radius: 24px;
|
||||
--control-slider-thickness: 130px;
|
||||
--control-slider-border-radius: 48px;
|
||||
--control-slider-color: var(--primary-color);
|
||||
--control-slider-background: var(--disabled-color);
|
||||
--control-slider-background-opacity: 0.2;
|
||||
|
|
|
@ -158,8 +158,8 @@ export class HaStateControlLockToggle extends LitElement {
|
|||
height: 45vh;
|
||||
max-height: 320px;
|
||||
min-height: 200px;
|
||||
--control-switch-thickness: 100px;
|
||||
--control-switch-border-radius: 24px;
|
||||
--control-switch-thickness: 130px;
|
||||
--control-switch-border-radius: 48px;
|
||||
--control-switch-padding: 6px;
|
||||
--mdc-icon-size: 24px;
|
||||
}
|
||||
|
@ -169,7 +169,7 @@ export class HaStateControlLockToggle extends LitElement {
|
|||
.buttons {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100px;
|
||||
width: 130px;
|
||||
height: 45vh;
|
||||
max-height: 320px;
|
||||
min-height: 200px;
|
||||
|
@ -179,7 +179,7 @@ export class HaStateControlLockToggle extends LitElement {
|
|||
ha-control-button {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
--control-button-border-radius: 18px;
|
||||
--control-button-border-radius: 48px;
|
||||
--mdc-icon-size: 24px;
|
||||
}
|
||||
ha-control-button.active {
|
||||
|
|
|
@ -127,11 +127,11 @@ export class HaStateControlValveButtons extends LitElement {
|
|||
height: 45vh;
|
||||
max-height: 320px;
|
||||
min-height: 200px;
|
||||
--control-button-group-spacing: 6px;
|
||||
--control-button-group-spacing: 10px;
|
||||
--control-button-group-thickness: 100px;
|
||||
}
|
||||
ha-control-button {
|
||||
--control-button-border-radius: 18px;
|
||||
--control-button-border-radius: 36px;
|
||||
--mdc-icon-size: 24px;
|
||||
}
|
||||
`;
|
||||
|
|
|
@ -70,8 +70,8 @@ export class HaStateControlValvePosition extends LitElement {
|
|||
height: 45vh;
|
||||
max-height: 320px;
|
||||
min-height: 200px;
|
||||
--control-slider-thickness: 100px;
|
||||
--control-slider-border-radius: 24px;
|
||||
--control-slider-thickness: 130px;
|
||||
--control-slider-border-radius: 48px;
|
||||
--control-slider-color: var(--primary-color);
|
||||
--control-slider-background: var(--disabled-color);
|
||||
--control-slider-background-opacity: 0.2;
|
||||
|
|
|
@ -141,15 +141,15 @@ export class HaStateControlValveToggle extends LitElement {
|
|||
height: 45vh;
|
||||
max-height: 320px;
|
||||
min-height: 200px;
|
||||
--control-switch-thickness: 100px;
|
||||
--control-switch-border-radius: 24px;
|
||||
--control-switch-thickness: 130px;
|
||||
--control-switch-border-radius: 48px;
|
||||
--control-switch-padding: 6px;
|
||||
--mdc-icon-size: 24px;
|
||||
}
|
||||
.buttons {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100px;
|
||||
width: 130px;
|
||||
height: 45vh;
|
||||
max-height: 320px;
|
||||
min-height: 200px;
|
||||
|
@ -159,7 +159,7 @@ export class HaStateControlValveToggle extends LitElement {
|
|||
ha-control-button {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
--control-button-border-radius: 18px;
|
||||
--control-button-border-radius: 48px;
|
||||
--mdc-icon-size: 24px;
|
||||
}
|
||||
ha-control-button.active {
|
||||
|
|
Loading…
Reference in New Issue