Fix color over slotted image in ha-alert (#10652)

This commit is contained in:
Joakim Sørensen 2021-11-21 18:13:48 +01:00 committed by GitHub
parent 91dbfca899
commit 1a5c43d72a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 50 additions and 35 deletions

View File

@ -87,7 +87,17 @@ const alerts: {
title: "Slotted icon",
description: "Alert with slotted icon",
type: "warning",
iconSlot: html`<ha-logo-svg slot="icon"></ha-logo-svg>`,
iconSlot: html`<span slot="icon" class="image">
<ha-logo-svg></ha-logo-svg>
</span>`,
},
{
title: "Slotted image",
description: "Alert with slotted image",
type: "warning",
iconSlot: html`<span slot="icon" class="image"
><img src="https://www.home-assistant.io/images/home-assistant-logo.svg"
/></span>`,
},
{
title: "Slotted action",
@ -155,14 +165,14 @@ export class DemoHaAlert extends LitElement {
align-items: center;
justify-content: space-between;
}
span {
margin-right: 16px;
.image {
display: inline-flex;
height: 100%;
align-items: center;
}
ha-logo-svg {
width: 28px;
height: 28px;
padding-right: 8px;
place-self: center;
img {
max-height: 24px;
width: 24px;
}
mwc-button {
--mdc-theme-primary: var(--primary-text-color);

View File

@ -47,11 +47,11 @@ class HaAlert extends LitElement {
[this.alertType]: true,
})}"
>
<slot name="icon">
<div class="icon ${this.title ? "" : "no-title"}">
<div class="icon ${this.title ? "" : "no-title"}">
<slot name="icon">
<ha-svg-icon .path=${ALERT_ICONS[this.alertType]}></ha-svg-icon>
</div>
</slot>
</slot>
</div>
<div class="content">
<div class="main-content">
${this.title ? html`<div class="title">${this.title}</div>` : ""}
@ -87,7 +87,7 @@ class HaAlert extends LitElement {
.issue-type.rtl {
flex-direction: row-reverse;
}
.issue-type::before {
.issue-type::after {
position: absolute;
top: 0;
right: 0;
@ -98,18 +98,12 @@ class HaAlert extends LitElement {
content: "";
border-radius: 4px;
}
slot > .icon {
margin-right: 8px;
width: 24px;
.icon {
z-index: 1;
}
.icon.no-title {
align-self: center;
}
.issue-type.rtl > slot > .icon {
margin-right: 0px;
margin-left: 8px;
width: 24px;
}
.issue-type.rtl > .content {
flex-direction: row-reverse;
text-align: right;
@ -126,39 +120,47 @@ class HaAlert extends LitElement {
}
.main-content {
overflow-wrap: anywhere;
margin-left: 8px;
margin-right: 0;
}
.issue-type.rtl > .content > .main-content {
margin-left: 0;
margin-right: 8px;
}
.title {
margin-top: 2px;
font-weight: bold;
}
ha-icon-button {
.action mwc-button,
.action ha-icon-button {
--mdc-theme-primary: var(--primary-text-color);
--mdc-icon-button-size: 36px;
}
.issue-type.info > slot > .icon {
.issue-type.info > .icon {
color: var(--info-color);
}
.issue-type.info::before {
.issue-type.info::after {
background-color: var(--info-color);
}
.issue-type.warning > slot > .icon {
.issue-type.warning > .icon {
color: var(--warning-color);
}
.issue-type.warning::before {
.issue-type.warning::after {
background-color: var(--warning-color);
}
.issue-type.error > slot > .icon {
.issue-type.error > .icon {
color: var(--error-color);
}
.issue-type.error::before {
.issue-type.error::after {
background-color: var(--error-color);
}
.issue-type.success > slot > .icon {
.issue-type.success > .icon {
color: var(--success-color);
}
.issue-type.success::before {
.issue-type.success::after {
background-color: var(--success-color);
}
`;

View File

@ -98,15 +98,18 @@ class HaConfigUpdates extends LitElement {
color: var(--primary-text-color);
}
.icon {
place-self: center;
display: inline-flex;
height: 100%;
align-items: center;
}
img,
ha-svg-icon,
ha-logo-svg {
width: var(--mdc-icon-size, 32px);
height: var(--mdc-icon-size, 32px);
padding-right: 12px;
display: block;
--mdc-icon-size: 32px;
max-height: 32px;
width: 32px;
}
ha-logo-svg {
color: var(--secondary-text-color);
}
`;