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

Update button focus style to match tile focus style (#19608)

Browse Source
This commit is contained in:
Bram Kragten 2024-02-02 12:02:54 +01:00 committed by GitHub
parent 3970fdd070
commit b08d1ae7e9
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 12 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
src/panels/lovelace/cards/hui-button-card.ts
View File

@ -187,8 +187,6 @@ export class HuiButtonCard extends LitElement implements LovelaceCard {
return html` return html`
<ha-card <ha-card
@action=${this._handleAction} @action=${this._handleAction}
@focus=${this.handleRippleFocus}
@blur=${this.handleRippleBlur}
@mousedown=${this.handleRippleActivate} @mousedown=${this.handleRippleActivate}
@mouseup=${this.handleRippleDeactivate} @mouseup=${this.handleRippleDeactivate}
@mouseenter=${this.handleRippleMouseEnter} @mouseenter=${this.handleRippleMouseEnter}
@ -289,16 +287,6 @@ export class HuiButtonCard extends LitElement implements LovelaceCard {
this._rippleHandlers.endPress(); this._rippleHandlers.endPress();
} }
@eventOptions({ passive: true })
private handleRippleFocus() {
this._rippleHandlers.startFocus();
}
@eventOptions({ passive: true })
private handleRippleBlur() {
this._rippleHandlers.endFocus();
}
@eventOptions({ passive: true }) @eventOptions({ passive: true })
private handleRippleMouseEnter() { private handleRippleMouseEnter() {
this._rippleHandlers.startHover(); this._rippleHandlers.startHover();
@ -352,7 +340,18 @@ export class HuiButtonCard extends LitElement implements LovelaceCard {
outline: none; outline: none;
} }
:host(:focus-visible) ha-state-icon, ha-card:focus-visible {
--shadow-default: var(--ha-card-box-shadow, 0 0 0 0 transparent);
--shadow-focus: 0 0 0 1px
var(--state-color, var(--paper-item-icon-color, #44739e));
border-color: var(
--state-color,
var(--paper-item-icon-color, #44739e)
);
box-shadow: var(--shadow-default), var(--shadow-focus);
}
ha-card:focus-visible ha-state-icon,
:host(:active) ha-state-icon { :host(:active) ha-state-icon {
transform: scale(1.2); transform: scale(1.2);
} }