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

Fix button with images (#10872)

Browse Source
This commit is contained in:
Bram Kragten 2021-12-12 13:19:32 +01:00 committed by GitHub
parent cd00f7f874
commit deb65e7108
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 22 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/components/ha-chip.ts
View File

@ -18,13 +18,9 @@ export class HaChip extends LitElement {
protected render(): TemplateResult { protected render(): TemplateResult {
return html` return html`
<div class="mdc-chip"> <div class="mdc-chip ${this.noText ? "no-text" : ""}">
${this.hasIcon ${this.hasIcon
? html`<div ? html`<div class="mdc-chip__icon mdc-chip__icon--leading">
class="mdc-chip__icon mdc-chip__icon--leading ${this.noText
? "no-text"
: ""}"
>
<slot name="icon"></slot> <slot name="icon"></slot>
</div>` </div>`
: null} : null}
@ -49,6 +45,10 @@ export class HaChip extends LitElement {
color: var(--ha-chip-text-color, var(--primary-text-color)); color: var(--ha-chip-text-color, var(--primary-text-color));
} }
.mdc-chip.no-text {
padding: 0 10px;
}
.mdc-chip:hover { .mdc-chip:hover {
color: var(--ha-chip-text-color, var(--primary-text-color)); color: var(--ha-chip-text-color, var(--primary-text-color));
} }
@ -57,8 +57,8 @@ export class HaChip extends LitElement {
--mdc-icon-size: 20px; --mdc-icon-size: 20px;
color: var(--ha-chip-icon-color, var(--ha-chip-text-color)); color: var(--ha-chip-icon-color, var(--ha-chip-text-color));
} }
.mdc-chip .mdc-chip.no-text
.mdc-chip__icon--leading:not(.mdc-chip__icon--leading-hidden).no-text { .mdc-chip__icon--leading:not(.mdc-chip__icon--leading-hidden) {
margin-right: -4px; margin-right: -4px;
} }
`; `;

15
src/panels/lovelace/components/hui-buttons-base.ts
View File

@ -50,6 +50,7 @@ export class HuiButtonsBase extends LitElement {
.stateObj=${stateObj} .stateObj=${stateObj}
.overrideIcon=${entityConf.icon} .overrideIcon=${entityConf.icon}
.overrideImage=${entityConf.image} .overrideImage=${entityConf.image}
class=${name ? "" : "no-text"}
stateColor stateColor
slot="icon" slot="icon"
></state-badge> ></state-badge>
@ -85,9 +86,21 @@ export class HuiButtonsBase extends LitElement {
flex-wrap: wrap; flex-wrap: wrap;
} }
state-badge { state-badge {
display: inline-flex;
line-height: inherit; line-height: inherit;
text-align: start;
color: var(--secondary-text-color); color: var(--secondary-text-color);
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
margin-left: -4px;
margin-top: -2px;
}
state-badge.no-text {
width: 26px;
height: 26px;
margin-left: -3px;
margin-top: -3px;
} }
ha-chip { ha-chip {
padding: 4px; padding: 4px;