jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-27 03:06:41 +00:00
Code Issues Packages Projects Releases Wiki Activity

Convert ha-card to LitElement and TypeScript (#2701)

Browse Source 
* Convert ha-card to LitElement and TypeScript

* CSS away the header instead

* Travis fixes

* Remove duplicate styles
This commit is contained in:
Thomas Lovén 2019-02-13 20:16:01 +01:00 committed by Paulus Schoutsen
parent e36dada843
commit 3ca842187a
2 changed files with 45 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
src/components/ha-card.js
View File

@ -1,42 +0,0 @@
import "@polymer/paper-styles/element-styles/paper-material-styles";
import { html } from "@polymer/polymer/lib/utils/html-tag";
import { PolymerElement } from "@polymer/polymer/polymer-element";
class HaCard extends PolymerElement {
static get template() {
return html`
<style include="paper-material-styles">
:host {
@apply --paper-material-elevation-1;
display: block;
border-radius: var(--ha-card-border-radius, 2px);
transition: all 0.3s ease-out;
background: var(
--ha-card-background,
var(--paper-card-background-color, white)
);
color: var(--primary-text-color);
}
.header {
@apply --paper-font-headline;
@apply --paper-font-common-expensive-kerning;
opacity: var(--dark-primary-opacity);
padding: 24px 16px 16px;
}
</style>
<template is="dom-if" if="[[header]]">
<div class="header">[[header]]</div>
</template>
<slot></slot>
`;
}
static get properties() {
return {
header: String,
};
}
}
customElements.define("ha-card", HaCard);

45
src/components/ha-card.ts Normal file
View File

@ -0,0 +1,45 @@
import {
css,
CSSResult,
html,
LitElement,
property,
TemplateResult,
} from "lit-element";
class HaCard extends LitElement {
@property() public header?: string;
static get styles(): CSSResult {
return css`
:host {
background: var(
--ha-card-background,
var(--paper-card-background-color, white)
);
border-radius: var(--ha-card-border-radius, 2px);
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14),
0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
color: var(--primary-text-color);
display: block;
transition: all 0.3s ease-out;
}
.header:not(:empty) {
font-size: 24px;
letter-spacing: -0.012em;
line-height: 32px;
opacity: 0.87;
padding: 24px 16px 16px;
}
`;
}
protected render(): TemplateResult {
return html`
<div class="header">${this.header}</div>
<slot></slot>
`;
}
}
customElements.define("ha-card", HaCard);