mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-23 17:26:42 +00:00
Fix button with images (#10872)
This commit is contained in:
parent
cd00f7f874
commit
deb65e7108
@ -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;
|
||||||
}
|
}
|
||||||
`;
|
`;
|
||||||
|
@ -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;
|
||||||
|
Loading…
x
Reference in New Issue
Block a user