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

Add better focus style for tile card when theme use box-shadow (#15476)

Browse Source
This commit is contained in:
Paul Bottein 2023-02-20 14:41:58 +01:00 committed by GitHub
parent 1ab1cf0fab
commit 9c42eb5130
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 6 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -280,6 +280,7 @@ export class HaBarSlider extends LitElement {
width: 100%; width: 100%;
border-radius: var(--slider-bar-border-radius); border-radius: var(--slider-bar-border-radius);
outline: none; outline: none;
transition: box-shadow 180ms ease-in-out;
} }
:host(:focus-visible) { :host(:focus-visible) {
box-shadow: 0 0 0 2px var(--slider-bar-color); box-shadow: 0 0 0 2px var(--slider-bar-color);

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

@ -106,6 +106,7 @@ export class HaBarSwitch extends LitElement {
cursor: pointer; cursor: pointer;
border-radius: var(--switch-bar-border-radius); border-radius: var(--switch-bar-border-radius);
outline: none; outline: none;
transition: box-shadow 180ms ease-in-out;
} }
:host(:focus-visible) { :host(:focus-visible) {
box-shadow: 0 0 0 2px var(--switch-bar-off-color); box-shadow: 0 0 0 2px var(--switch-bar-off-color);

5
src/panels/lovelace/cards/hui-tile-card.ts
View File

@ -422,14 +422,17 @@ export class HuiTileCard extends LitElement implements LovelaceCard {
-webkit-tap-highlight-color: transparent; -webkit-tap-highlight-color: transparent;
} }
ha-card:has(.background:focus-visible) { ha-card:has(.background:focus-visible) {
--shadow-default: var(--ha-card-box-shadow, 0 0 0 0 transparent);
--shadow-focus: 0 0 0 1px var(--tile-color);
border-color: var(--tile-color); border-color: var(--tile-color);
box-shadow: 0 0 0 1px var(--tile-color); box-shadow: var(--shadow-default), var(--shadow-focus);
} }
ha-card { ha-card {
--mdc-ripple-color: var(--tile-color); --mdc-ripple-color: var(--tile-color);
height: 100%; height: 100%;
z-index: 0; z-index: 0;
overflow: hidden; overflow: hidden;
transition: box-shadow 180ms ease-in-out, border-color 180ms ease-in-out;
} }
ha-card.active { ha-card.active {
--tile-color: var(--state-icon-color); --tile-color: var(--state-icon-color);