Improve padding/positioning of ha-alert (#10145)

Co-authored-by: Paulus Schoutsen <balloob@gmail.com>
This commit is contained in:
Bram Kragten 2021-10-04 18:27:03 +02:00 committed by GitHub
parent 784e5e6e39
commit dc3bad56f2
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 34 additions and 29 deletions

View File

@ -107,19 +107,21 @@ export class DemoHaAlert extends LitElement {
protected render(): TemplateResult {
return html`
<ha-card header="ha-alert demo">
${alerts.map(
(alert) => html`
<ha-alert
.title=${alert.title || ""}
.alertType=${alert.type}
.dismissable=${alert.dismissable || false}
.actionText=${alert.action || ""}
.rtl=${alert.rtl || false}
>
${alert.description}
</ha-alert>
`
)}
<div class="card-content">
${alerts.map(
(alert) => html`
<ha-alert
.title=${alert.title || ""}
.alertType=${alert.type}
.dismissable=${alert.dismissable || false}
.actionText=${alert.action || ""}
.rtl=${alert.rtl || false}
>
${alert.description}
</ha-alert>
`
)}
</div>
</ha-card>
`;
}
@ -130,6 +132,10 @@ export class DemoHaAlert extends LitElement {
max-width: 600px;
margin: 24px auto;
}
ha-alert {
display: block;
margin: 24px 0;
}
.condition {
padding: 16px;
display: flex;

View File

@ -51,15 +51,11 @@ class HaAlert extends LitElement {
[this.alertType]: true,
})}"
>
<div class="icon">
<div class="icon ${this.title ? "" : "no-title"}">
<ha-svg-icon .path=${ALERT_ICONS[this.alertType]}></ha-svg-icon>
</div>
<div class="content">
<div
class="main-content ${classMap({
"no-title": !this.title,
})}"
>
<div class="main-content">
${this.title ? html`<div class="title">${this.title}</div>` : ""}
<slot></slot>
</div>
@ -94,7 +90,7 @@ class HaAlert extends LitElement {
static styles = css`
.issue-type {
position: relative;
padding: 4px;
padding: 8px;
display: flex;
margin: 4px 0;
}
@ -113,11 +109,16 @@ class HaAlert extends LitElement {
border-radius: 4px;
}
.icon {
margin: 4px 8px;
margin-right: 8px;
width: 24px;
}
.main-content.no-title {
margin-top: 6px;
.icon.no-title {
align-self: center;
}
.issue-type.rtl > .icon {
margin-right: 0px;
margin-left: 8px;
width: 24px;
}
.issue-type.rtl > .content {
flex-direction: row-reverse;
@ -126,24 +127,22 @@ class HaAlert extends LitElement {
.content {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
}
.main-content {
overflow-wrap: anywhere;
}
.title {
margin-top: 2px;
font-weight: bold;
margin-top: 6px;
}
mwc-button {
--mdc-theme-primary: var(--primary-text-color);
}
.action {
align-self: center;
mwc-icon-button {
--mdc-icon-button-size: 36px;
}
.issue-type.info > .icon {
color: var(--info-color);
}