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

Use named slots to have advanced ha-card headers (#3127)

Browse Source 
* Use named slots to have advanced ha-card headers

* Fix header text color
This commit is contained in:
Thomas Lovén 2019-04-29 20:31:27 +02:00 committed by Paulus Schoutsen
parent 73ef03e33f
commit d8f21d99af
2 changed files with 11 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/components/ha-card.ts
View File

@ -28,19 +28,22 @@ class HaCard extends LitElement {
display: block; display: block;
transition: all 0.3s ease-out; transition: all 0.3s ease-out;
} }
.header:not(:empty) { .header:not(:empty),
font-size: 24px; .header::slotted(*) {
color: var(--ha-card-header-color, --primary-text-color);
font-family: var(--ha-card-header-font-family, inherit);
font-size: var(--ha-card-header-font-size, 24px);
letter-spacing: -0.012em; letter-spacing: -0.012em;
line-height: 32px; line-height: 32px;
opacity: 0.87;
padding: 24px 16px 16px; padding: 24px 16px 16px;
display: block;
} }
`; `;
} }
protected render(): TemplateResult { protected render(): TemplateResult {
return html` return html`
<div class="header">${this.header}</div> <slot class="header" name="header">${this.header}</slot>
<slot></slot> <slot></slot>
`; `;
} }

24
src/panels/lovelace/cards/hui-entities-card.ts
View File

@ -89,7 +89,7 @@ class HuiEntitiesCard extends LitElement implements LovelaceCard {
${!title && !show_header_toggle ${!title && !show_header_toggle
? html`` ? html``
: html` : html`
<div class="header"> <div class="header" slot="header">
<div class="name">${title}</div> <div class="name">${title}</div>
${show_header_toggle === false ${show_header_toggle === false
? html`` ? html``
@ -114,12 +114,8 @@ class HuiEntitiesCard extends LitElement implements LovelaceCard {
static get styles(): CSSResult { static get styles(): CSSResult {
return css` return css`
ha-card {
padding: 16px;
}
#states { #states {
margin: -4px 0; padding: 12px 16px;
} }
#states > * { #states > * {
@ -131,28 +127,16 @@ class HuiEntitiesCard extends LitElement implements LovelaceCard {
} }
.header { .header {
/* start paper-font-headline style */ margin-bottom: -8px;
font-family: "Roboto", "Noto", sans-serif; padding-bottom: 0px;
-webkit-font-smoothing: antialiased; /* OS X subpixel AA bleed bug */
text-rendering: optimizeLegibility;
font-size: 24px;
font-weight: 400;
letter-spacing: -0.012em;
/* end paper-font-headline style */
line-height: 40px;
color: var(--primary-text-color);
padding: 4px 0 12px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
} }
.header .name { .header .name {
/* start paper-font-common-nowrap style */
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
/* end paper-font-common-nowrap */
} }
.state-card-dialog { .state-card-dialog {