Adhere to material design spec

This commit is contained in:
Paulus Schoutsen 2015-08-27 00:37:19 -07:00
parent 6c0bb8a47d
commit ee8492df46
11 changed files with 29 additions and 37 deletions

View File

@ -5,24 +5,18 @@
<dom-module id='ha-domain-card'>
<style>
.domain-title {
font-size: 24px;
padding: 24px 16px 16px;
border-bottom: 2px solid #E8E8E8;
text-transform: capitalize;
}
.states {
padding: 8px 0;
padding-bottom: 16px;
}
.state {
padding: 8px 16px;
}
state-card-content {
cursor: pointer;
cursor: pointer;
}
</style>
<template>
<ha-card title='[[computeDomainTitle(domain)]]'>
<ha-card header='[[computeDomainTitle(domain)]]'>
<div class='states'>
<template is='dom-repeat' items="[[states]]">
<div class='state'>

View File

@ -8,14 +8,14 @@
:host {
position: relative;
display: inline-block;
width: 45px;
background-color: #4fc3f7;
color: white;
width: 40px;
/*background-color: #4fc3f7;*/
color: #44739E;
border-radius: 50%;
}
div {
height: 45px;
height: 40px;
text-align: center;
}
@ -32,7 +32,7 @@
domain-icon[data-domain=light][data-state=on],
domain-icon[data-domain=switch][data-state=on],
domain-icon[data-domain=sun][data-state=above_horizon] {
color: #fff176;
color: #DCC91F;
}
</style>

View File

@ -17,7 +17,6 @@
.header {
font-size: 24px;
padding: 24px 16px 16px;
border-bottom: 2px solid #E8E8E8;
text-transform: capitalize;
}
</style>

View File

@ -13,7 +13,7 @@
.badges {
margin-top: 16px;
margin-left: 8px;
font-size: 80%;
font-size: 85%;
text-align: center;
}

View File

@ -1,8 +1,8 @@
import Polymer from '../polymer';
import { util } from '../util/home-assistant-js-instance';
require('../cards/ha-domain-card');
require('../cards/ha-badges-card');
require('../cards/ha-domain-card');
const PRIORITY = {
a: -1,

View File

@ -6,7 +6,7 @@
<dom-module id="state-info">
<style>
:host {
line-height: normal;
line-height: 1.5;
min-width: 150px;
white-space: nowrap;
}
@ -16,21 +16,19 @@
}
.info {
margin-left: 60px;
margin-left: 56px;
}
.name {
text-transform: capitalize;
font-weight: 300;
font-size: 1.3rem;
font-weight: 400;
text-overflow: ellipsis;
overflow-x: hidden;
}
.time-ago {
color: darkgrey;
color: var(--secondary-text-color);
margin-top: -2px;
font-size: 1rem;
text-overflow: ellipsis;
overflow-x: hidden;
}

View File

@ -11,8 +11,13 @@
<dom-module id="more-info-dialog">
<style>
paper-dialog {
font-size: 14px;
}
state-card-content {
margin-bottom: 24px;
font-size: 14px;
}
@media all and (max-width: 450px) {

View File

@ -18,6 +18,8 @@
--paper-toggle-button-checked-bar-color: #039be5;
--paper-toolbar-background: #03A9F4;
font-size: 14px;
}
@-webkit-keyframes ha-spin {

View File

@ -7,9 +7,9 @@
.state {
margin-left: 16px;
text-transform: capitalize;
font-weight: 300;
font-size: 1.3rem;
font-weight: 400;
text-align: right;
line-height: 1.5;
}
</style>

View File

@ -5,7 +5,7 @@
<dom-module id="state-card-media_player">
<style>
:host {
line-height: normal;
line-height: 1.5;
}
.state {
@ -19,14 +19,11 @@
overflow-x: hidden;
text-overflow: ellipsis;
text-transform: capitalize;
font-weight: 300;
font-size: 1.3rem;
font-weight: 400;
}
.secondary-text {
color: darkgrey;
margin-top: -2px;
font-size: 1rem;
color: var(--secondary-text-color);
}
</style>
<template>

View File

@ -5,7 +5,7 @@
<dom-module id="state-card-thermostat">
<style>
:host {
line-height: normal;
line-height: 1.5;
}
.state {
@ -15,14 +15,11 @@
.target {
text-transform: capitalize;
font-weight: 300;
font-size: 1.3rem;
font-weight: 400;
}
.current {
color: darkgrey;
margin-top: -2px;
font-size: 1rem;
color: var(--secondary-text-color);
}
</style>
<template>