Improve slider/switch bar focus style (#15009)

Improve bar input focus style
This commit is contained in:
Paul Bottein 2023-01-18 11:34:57 +01:00 committed by GitHub
parent c7da1a95da
commit 789a69fea5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 13 additions and 0 deletions

View File

@ -278,6 +278,11 @@ export class HaBarSlider extends LitElement {
--slider-bar-border-radius: 10px;
height: var(--slider-bar-thickness);
width: 100%;
border-radius: var(--slider-bar-border-radius);
outline: none;
}
:host(:focus-visible) {
box-shadow: 0 0 0 2px var(--slider-bar-color);
}
:host([vertical]) {
width: var(--slider-bar-thickness);

View File

@ -104,6 +104,14 @@ export class HaBarSwitch extends LitElement {
box-sizing: border-box;
user-select: none;
cursor: pointer;
border-radius: var(--switch-bar-border-radius);
outline: none;
}
:host(:focus-visible) {
box-shadow: 0 0 0 2px var(--switch-bar-off-color);
}
:host([checked]:focus-visible) {
box-shadow: 0 0 0 2px var(--switch-bar-on-color);
}
.switch {
box-sizing: border-box;