jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-22 16:56: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 {
return html`
<div class="mdc-chip">
<div class="mdc-chip ${this.noText ? "no-text" : ""}">
${this.hasIcon
? html`<div
class="mdc-chip__icon mdc-chip__icon--leading ${this.noText
? "no-text"
: ""}"
>
? html`<div class="mdc-chip__icon mdc-chip__icon--leading">
<slot name="icon"></slot>
</div>`
: null}
@ -49,6 +45,10 @@ export class HaChip extends LitElement {
color: var(--ha-chip-text-color, var(--primary-text-color));
}
.mdc-chip.no-text {
padding: 0 10px;
}
.mdc-chip:hover {
color: var(--ha-chip-text-color, var(--primary-text-color));
}
@ -57,8 +57,8 @@ export class HaChip extends LitElement {
--mdc-icon-size: 20px;
color: var(--ha-chip-icon-color, var(--ha-chip-text-color));
}
.mdc-chip
.mdc-chip__icon--leading:not(.mdc-chip__icon--leading-hidden).no-text {
.mdc-chip.no-text
.mdc-chip__icon--leading:not(.mdc-chip__icon--leading-hidden) {
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}
.overrideIcon=${entityConf.icon}
.overrideImage=${entityConf.image}
class=${name ? "" : "no-text"}
stateColor
slot="icon"
></state-badge>
@ -85,9 +86,21 @@ export class HuiButtonsBase extends LitElement {
flex-wrap: wrap;
}
state-badge {
display: inline-flex;
line-height: inherit;
text-align: start;
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 {
padding: 4px;