jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-21 08:16:36 +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;
transition: all 0.3s ease-out;
}
.header:not(:empty) {
font-size: 24px;
.header:not(:empty),
.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;
line-height: 32px;
opacity: 0.87;
padding: 24px 16px 16px;
display: block;
}
`;
}
protected render(): TemplateResult {
return html`
<div class="header">${this.header}</div>
<slot class="header" name="header">${this.header}</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
? html``
: html`
<div class="header">
<div class="header" slot="header">
<div class="name">${title}</div>
${show_header_toggle === false
? html``
@ -114,12 +114,8 @@ class HuiEntitiesCard extends LitElement implements LovelaceCard {
static get styles(): CSSResult {
return css`
ha-card {
padding: 16px;
}
#states {
margin: -4px 0;
padding: 12px 16px;
}
#states > * {
@ -131,28 +127,16 @@ class HuiEntitiesCard extends LitElement implements LovelaceCard {
}
.header {
/* start paper-font-headline style */
font-family: "Roboto", "Noto", sans-serif;
-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;
margin-bottom: -8px;
padding-bottom: 0px;
display: flex;
justify-content: space-between;
}
.header .name {
/* start paper-font-common-nowrap style */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
/* end paper-font-common-nowrap */
}
.state-card-dialog {