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

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

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
gallery/src/demos/demo-ha-alert.ts
View File

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

46
src/components/ha-alert.ts
View File

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

13
src/panels/config/dashboard/ha-config-updates.ts
View File

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