jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-25 18:26:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

Improve slider/switch bar focus style (#15009)

Browse Source 
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/ha-bar-slider.ts
View File

@ -278,6 +278,11 @@ export class HaBarSlider extends LitElement {
--slider-bar-border-radius: 10px; --slider-bar-border-radius: 10px;
height: var(--slider-bar-thickness); height: var(--slider-bar-thickness);
width: 100%; 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]) { :host([vertical]) {
width: var(--slider-bar-thickness); width: var(--slider-bar-thickness);

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

@ -104,6 +104,14 @@ export class HaBarSwitch extends LitElement {
box-sizing: border-box; box-sizing: border-box;
user-select: none; user-select: none;
cursor: pointer; 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 { .switch {
box-sizing: border-box; box-sizing: border-box;