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

Update button card styles (#19591)

Browse Source
This commit is contained in:
Bram Kragten 2024-01-31 18:48:58 +01:00 committed by GitHub
parent 95920ba710
commit 939b3a8092
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 27 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -191,6 +191,8 @@ export class HuiButtonCard extends LitElement implements LovelaceCard {
@blur=${this.handleRippleBlur}
@mousedown=${this.handleRippleActivate}
@mouseup=${this.handleRippleDeactivate}
@mouseenter=${this.handleRippleMouseEnter}
@mouseleave=${this.handleRippleMouseLeave}
@touchstart=${this.handleRippleActivate}
@touchend=${this.handleRippleDeactivate}
@touchcancel=${this.handleRippleDeactivate}
@ -204,6 +206,9 @@ export class HuiButtonCard extends LitElement implements LovelaceCard {
tabindex=${ifDefined(
hasAction(this._config.tap_action) ? "0" : undefined
)}
style=${styleMap({
"--state-color": colored ? this._computeColor(stateObj) : undefined,
})}
>
${this._config.show_icon
? html`
@ -217,7 +222,6 @@ export class HuiButtonCard extends LitElement implements LovelaceCard {
.hass=${this.hass}
.stateObj=${stateObj}
style=${styleMap({
color: colored ? this._computeColor(stateObj) : undefined,
filter: colored ? stateColorBrightness(stateObj) : undefined,
height: this._config.icon_height
? this._config.icon_height
@ -280,23 +284,37 @@ export class HuiButtonCard extends LitElement implements LovelaceCard {
this._rippleHandlers.startPress(evt);
}
@eventOptions({ passive: true })
private handleRippleDeactivate() {
this._rippleHandlers.endPress();
}
@eventOptions({ passive: true })
private handleRippleFocus() {
this._rippleHandlers.startFocus();
}
@eventOptions({ passive: true })
private handleRippleBlur() {
this._rippleHandlers.endFocus();
}
@eventOptions({ passive: true })
private handleRippleMouseEnter() {
this._rippleHandlers.startHover();
}
@eventOptions({ passive: true })
private handleRippleMouseLeave() {
this._rippleHandlers.endHover();
}
static get styles(): CSSResultGroup {
return [
iconColorCSS,
css`
ha-card {
--mdc-ripple-color: var(--state-color);
cursor: pointer;
display: flex;
flex-direction: column;
@ -318,9 +336,11 @@ export class HuiButtonCard extends LitElement implements LovelaceCard {
ha-state-icon {
width: 40%;
height: auto;
color: var(--paper-item-icon-color, #44739e);
max-height: 80%;
color: var(--state-color, var(--paper-item-icon-color, #44739e));
--mdc-icon-size: 100%;
--state-inactive-color: var(--paper-item-icon-color, #44739e);
transition: transform 180ms ease-in-out;
}
ha-state-icon + span {
@ -332,6 +352,11 @@ export class HuiButtonCard extends LitElement implements LovelaceCard {
outline: none;
}
:host(:focus-visible) ha-state-icon,
:host(:active) ha-state-icon {
transform: scale(1.2);
}
.state {
font-size: 0.9rem;
color: var(--secondary-text-color);