Skip to content

Commit

Permalink
Moved CSS into seperate file
Browse files Browse the repository at this point in the history
  • Loading branch information
@kalkih
kalkih committed Jan 30, 2019
1 parent 5bb9ad0 commit 4825627
Show file tree
Hide file tree
Showing 2 changed files with 276 additions and 274 deletions.
277 changes: 3 additions & 274 deletions mini-graph-card.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { LitElement, html, svg } from '@polymer/lit-element';
import Graph from './mini-graph-lib.js';
import Graph from './mini-graph-lib';
import { style } from './style'

const FONT_SIZE = 14;
const ICON = {
Expand Down Expand Up @@ -184,7 +185,7 @@ class MiniGraphCard extends LitElement {

render({config, entity} = this) {
return html`
${this._style()}
${style()}
<ha-card
class='flex'
?group=${config.group}
Expand Down Expand Up @@ -445,278 +446,6 @@ class MiniGraphCard extends LitElement {
return await this._hass.callApi('GET', url);
}

_style() {
return html`
<style>
:host {
display: flex;
flex: 1;
flex-direction: column;
}
ha-card {
flex-direction: column;
flex: 1;
padding: 16px 0;
position: relative;
overflow: visible;
}
ha-card[points] .line--points {
opacity: 0;
transition: opacity .25s;
animation: none;
}
ha-card[points]:hover .line--points {
opacity: 1;
}
ha-card[fill] {
padding-bottom: 0;
}
ha-card[fill] .graph {
padding: 0 0 0 0;
order: 10;
}
ha-card[fill] path {
stroke-linecap: initial;
stroke-linejoin: initial;
}
ha-card[fill] .graph__legend {
order: -1;
padding: 0 16px 8px 16px;
}
ha-card[fill] .info {
padding-bottom: 16px;
}
ha-card[group] {
box-shadow: none;
padding: 0;
}
ha-card[group] > div {
padding: 0;
}
ha-card[group] .graph__legend {
padding-left: 0;
padding-right: 0;
}
ha-card[more-info] {
cursor: pointer;
}
ha-card > div {
padding: 0px 16px 16px 16px;
}
ha-card > div:last-child {
padding-bottom: 0;
}
.flex {
display: flex;
display: -webkit-flex;
min-width: 0;
}
.header {
justify-content: space-between;
}
.header[loc="center"] {
align-self: center;
}
.header[loc="left"] {
align-self: flex-start;
}
.header[loc="right"] {
align-self: flex-end;
}
.name {
align-items: center;
min-width: 0;
opacity: .8;
}
.name > span {
font-size: 1.2rem;
font-weight: 400;
max-height: 1.4rem;
opacity: .75;
}
.icon {
color: var(--paper-item-icon-color, #44739e);
display: inline-block;
flex: 0 0 24px;
text-align: center;
width: 24px;
margin-left: auto;
}
.icon[loc="left"] {
order: -1;
margin-right: 8px;
margin-left: 0;
}
.icon[loc="state"] {
align-self: center;
}
.state {
flex-wrap: wrap;
font-weight: 300;
}
.state > .flex {
position: relative;
}
.state[loc="center"] {
align-self: center;
}
.state[loc="right"] {
align-self: flex-end;
}
.state__value {
display: inline-block;
font-size: 2.4em;
line-height: 1em;
max-size: 100%;
margin-right: .25rem;
}
.state__uom {
align-self: flex-end;
display: inline-block;
font-size: 1.4em;
font-weight: 400;
line-height: 1.2em;
margin-top: .1em;
opacity: .6;
vertical-align: bottom;
}
.state__time {
white-space: nowrap;
font-weight: 500;
position: absolute;
bottom: -1.1rem;
left: 0;
opacity: .75;
font-size: 0.95rem;
}
.graph {
align-self: flex-end;
box-sizing: border-box;
display: flex;
flex-direction: column;
margin-top: auto;
width: 100%;
}
.graph__container {
display: flex;
flex-direction: row;
}
.graph__container__svg {
flex: 1;
}
svg {
overflow: hidden;
}
path {
stroke-linecap: round;
stroke-linejoin: round;
}
.line--fill[anim="false"] {
animation: reveal .25s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
}
.line--points[anim="false"],
.line[anim="false"] {
animation: pop .25s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
}
.line--point {
cursor: pointer;
fill: var(--paper-card-background-color, white);
transition: fill .15s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.line--point:hover {
fill: inherit;
}
path,
.line--points,
.line--fill {
opacity: 0;
}
.line--points[anim="true"][init] {
animation: pop .5s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
}
.line--fill[anim="true"][init] {
animation: reveal .5s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
}
.line[anim="true"][init] {
animation: dash 1s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
}
.graph__labels {
flex-direction: column;
font-size: .8em;
font-weight: 400;
justify-content: space-between;
margin-right: 10px;
opacity: .75;
}
.graph__labels > span {
align-self: flex-end;
position: relative;
width: 100%;
}
.graph__labels > span:after {
position: absolute;
right: -6px;
content: ' -';
opacity: .75;
}
.graph__legend {
display: flex;
flex-direction: row;
justify-content: space-evenly;
padding-top: 16px;
}
.graph__legend span {
opacity: .75;
}
.info {
justify-content: space-between;
align-items: middle;
}
.info__item {
display: flex;
flex-flow: column;
align-items: flex-end
}
.info__item:first-child {
align-items: flex-start;
}
.info__item__type {
text-transform: capitalize;
font-weight: 500;
opacity: .9;
}
.info__item__time,
.info__item__value {
opacity: .75;
}
.ellipsis {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
@keyframes reveal {
0% { opacity: 0; }
100% { opacity: .15; }
}
@keyframes pop {
0% { opacity: 0; }
100% { opacity: 1; }
}
@keyframes dash {
0% {
opacity: 0;
}
25% {
opacity: 1;
}
100% {
opacity: 1;
stroke-dashoffset: 0;
}
}
</style>`;
}

getCardSize() {
return 3;
}
Expand Down
Loading

0 comments on commit 4825627

Please sign in to comment.