mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-24 09:46:36 +00:00
Fix color over slotted image in ha-alert (#10652)
This commit is contained in:
parent
91dbfca899
commit
1a5c43d72a
@ -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);
|
||||
|
@ -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);
|
||||
}
|
||||
`;
|
||||
|
@ -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);
|
||||
}
|
||||
`;
|
||||
|
Loading…
x
Reference in New Issue
Block a user