jeans/frontend
jeans/frontend
1
0
Fork 0
mirror of https://github.com/home-assistant/frontend.git synced 2025-07-28 19:56:42 +00:00
Code Issues Packages Projects Releases Wiki Activity

Use official card shadow style

Browse Source
This commit is contained in:
Paulus Schoutsen 2015-11-10 00:55:57 -08:00
parent a387a597b2
commit 8e33f925e1
2 changed files with 14 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
src/components/ha-card.html
View File

@ -1,15 +1,11 @@
<link rel='import' href='../../bower_components/polymer/polymer.html'> <link rel='import' href='../../bower_components/polymer/polymer.html'>
<link rel="import" href="../../bower_components/paper-material/paper-material.html">
<dom-module id='ha-card'> <dom-module id='ha-card'>
<style> <style include="paper-material">
.title { :host {
padding: 8px 0;
text-transform: uppercase;
}
.card {
display: block; display: block;
border-radius: 2px; border-radius: 2px;
box-shadow: rgba(0, 0, 0, 0.098) 0px 2px 4px, rgba(0, 0, 0, 0.098) 0px 0px 3px;
transition: all 0.30s ease-out; transition: all 0.30s ease-out;
background-color: white; background-color: white;
@ -21,14 +17,9 @@
} }
</style> </style>
<template> <template>
<template is='dom-if' if='[[title]]'> <template is='dom-if' if='[[header]]'>
<div class='title'>[[title]]</div> <div class='header'>[[header]]</div>
</template> </template>
<div class='card'> <content></content>
<template is='dom-if' if='[[header]]'>
<div class='header'>[[header]]</div>
</template>
<content></content>
</div>
</template> </template>
</dom-module> </dom-module>

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

@ -4,11 +4,16 @@ export default new Polymer({
is: 'ha-card', is: 'ha-card',
properties: { properties: {
title: {
type: String,
},
header: { header: {
type: String, type: String,
}, },
/**
* The z-depth of the card, from 0-5.
*/
elevation: {
type: Number,
value: 1,
reflectToAttribute: true,
},
}, },
}); });