jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-19 15:26:36 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

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

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

@ -107,6 +107,7 @@ export class DemoHaAlert extends LitElement {
protected render(): TemplateResult { protected render(): TemplateResult {
return html` return html`
<ha-card header="ha-alert demo"> <ha-card header="ha-alert demo">
<div class="card-content">
${alerts.map( ${alerts.map(
(alert) => html` (alert) => html`
<ha-alert <ha-alert
@ -120,6 +121,7 @@ export class DemoHaAlert extends LitElement {
</ha-alert> </ha-alert>
` `
)} )}
</div>
</ha-card> </ha-card>
`; `;
} }
@ -130,6 +132,10 @@ export class DemoHaAlert extends LitElement {
max-width: 600px; max-width: 600px;
margin: 24px auto; margin: 24px auto;
} }
ha-alert {
display: block;
margin: 24px 0;
}
.condition { .condition {
padding: 16px; padding: 16px;
display: flex; display: flex;

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

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