Move style into templates

2025-07-21 16:26:43 +00:00 · 2016-07-19 01:19:44 -07:00 · 2016-07-19 01:19:44 -07:00 · 406c382a3f
commit 406c382a3f
parent 43940d067a
53 changed files with 1068 additions and 1043 deletions
--- a/src/cards/ha-badges-card.html
+++ b/src/cards/ha-badges-card.html
@ -3,8 +3,6 @@
 <link rel='import' href='../components/entity/ha-state-label-badge.html'>

 <dom-module id='ha-badges-card'>
-  <style>
-  </style>
  <template>
    <template is='dom-repeat' items='[[states]]'>
      <ha-state-label-badge hass='[[hass]]' state='[[item]]'></ha-state-label-badge>
--- a/src/cards/ha-camera-card.html
+++ b/src/cards/ha-camera-card.html
@ -2,6 +2,7 @@
 <link rel="import" href="../../bower_components/paper-material/paper-material.html">

 <dom-module id='ha-camera-card'>
+  <template>
    <style include="paper-material">
      :host {
        display: block;
@ -35,7 +36,7 @@
        color: white;
      }
    </style>
-  <template>
+
    <img src='[[cameraFeedSrc]]' class='camera-feed' hidden='[[!imageLoaded]]'
      on-load='imageLoadSuccess' on-error='imageLoadFail' alt='[[stateObj.entityDisplay]]'>
    <div class='caption'>
--- a/src/cards/ha-entities-card.html
+++ b/src/cards/ha-entities-card.html
@ -5,6 +5,7 @@
 <link rel='import' href='../state-summary/state-card-content.html'>

 <dom-module id='ha-entities-card'>
+  <template>
    <style is="custom-style" include="iron-flex"></style>
    <style>
      .states {
@ -33,7 +34,7 @@
        cursor: pointer;
      }
    </style>
-  <template>
+
    <ha-card>
      <div class$='[[computeTitleClass(groupEntity)]]' on-tap='entityTapped'>
        <div class='flex name'>[[computeTitle(states, groupEntity)]]</div>
--- a/src/cards/ha-introduction-card.html
+++ b/src/cards/ha-introduction-card.html
@ -3,6 +3,7 @@
 <link rel='import' href='../components/ha-card.html'>

 <dom-module id='ha-introduction-card'>
+  <template>
    <style>
      :host {
        @apply(--paper-font-body1)
@ -27,7 +28,7 @@
        margin-bottom: 16px;
      }
    </style>
-  <template>
+
    <ha-card header="Welcome Home!">
      <div class='content'>
        <template is='dom-if' if='[[hass.demo]]'>
--- a/src/cards/ha-media_player-card.html
+++ b/src/cards/ha-media_player-card.html
@ -3,6 +3,7 @@
 <link rel='import' href='../../bower_components/paper-icon-button/paper-icon-button.html'>

 <dom-module id='ha-media_player-card'>
+  <template>
    <style include="paper-material iron-flex iron-flex-alignment iron-positioning">
      :host {
        display: block;
@ -128,7 +129,7 @@
        visibility: hidden !important;
      }
    </style>
-  <template>
+
    <div class$='[[computeBannerClasses(playerObj)]]'>
      <div class='cover' id='cover'></div>

--- a/src/cards/ha-persistent_notification-card.html
+++ b/src/cards/ha-persistent_notification-card.html
@ -4,6 +4,7 @@
 <link rel='import' href='../components/ha-card.html'>

 <dom-module id='ha-persistent_notification-card'>
+  <template>
    <style>
      :host {
        @apply(--paper-font-body1);
@ -16,7 +17,7 @@
        font-weight: 500;
      }
    </style>
-  <template>
+
    <ha-card header="[[computeTitle(stateObj)]]">
      <div class='content'>[[stateObj.state]]</div>
      <paper-button on-tap='dismissTap'>DISMISS</paper-button>
--- a/src/components/entity/ha-entity-toggle.html
+++ b/src/components/entity/ha-entity-toggle.html
@ -3,6 +3,7 @@
 <link rel="import" href="../../../bower_components/paper-icon-button/paper-icon-button.html">

 <dom-module id="ha-entity-toggle">
+  <template>
    <style>
      :host {
        white-space: nowrap;
@ -20,7 +21,7 @@
        padding: 9px 0;
      }
    </style>
-  <template>
+
    <template is='dom-if' if='[[stateObj.attributes.assumed_state]]'>
      <paper-icon-button icon="mdi:flash-off" on-tap="turnOff" state-active$='[[!isOn]]'></paper-icon-button>
      <paper-icon-button icon="mdi:flash" on-tap="turnOn" state-active$='[[isOn]]'></paper-icon-button>
--- a/src/components/entity/ha-state-label-badge.html
+++ b/src/components/entity/ha-state-label-badge.html
@ -3,6 +3,7 @@
 <link rel='import' href='../ha-label-badge.html'>

 <dom-module id='ha-state-label-badge'>
+  <template>
    <style>
      :host {
        cursor: pointer;
@ -24,7 +25,7 @@
        --ha-label-badge-color: var(--paper-grey-500);
      }
    </style>
-  <template>
+
    <ha-label-badge class$='[[computeClasses(state)]]'
      value='[[computeValue(state)]]'
      icon='[[computeIcon(state)]]'
--- a/src/components/entity/state-badge.html
+++ b/src/components/entity/state-badge.html
@ -3,6 +3,7 @@
 <link rel='import' href='./ha-state-icon.html'>

 <dom-module id='state-badge'>
+  <template>
    <style>
    :host {
      position: relative;
@ -34,10 +35,12 @@
    }
    </style>

-  <template>
-    <ha-state-icon id='icon' state-obj='[[stateObj]]'
-      data-domain$='[[stateObj.domain]]' data-state$='[[stateObj.state]]'>
-    </ha-state-icon>
+    <ha-state-icon
+      id='icon'
+      state-obj='[[stateObj]]'
+      data-domain$='[[stateObj.domain]]'
+      data-state$='[[stateObj.state]]'
+    ></ha-state-icon>
  </template>
 </dom-module>

--- a/src/components/ha-card.html
+++ b/src/components/ha-card.html
@ -2,6 +2,7 @@
 <link rel="import" href="../../bower_components/paper-material/paper-material.html">

 <dom-module id='ha-card'>
+  <template>
    <style include="paper-material">
      :host {
        display: block;
@ -18,7 +19,7 @@
        text-transform: capitalize;
      }
    </style>
-  <template>
+
    <template is='dom-if' if='[[header]]'>
      <div class='header'>[[header]]</div>
    </template>
--- a/src/components/ha-cards.html
+++ b/src/components/ha-cards.html
@ -5,6 +5,7 @@
 <link rel="import" href="../cards/ha-card-chooser.html">

 <dom-module id="ha-cards">
+  <template>
    <style is="custom-style" include="iron-flex iron-flex-factors"></style>
    <style>
      :host {
@ -50,7 +51,6 @@

    </style>

-  <template>
    <div class='main'>
      <template is='dom-if' if='[[cards.badges]]'>
        <div class='badges'>
--- a/src/components/ha-color-picker.html
+++ b/src/components/ha-color-picker.html
@ -1,12 +1,13 @@
 <link rel='import' href='../../bower_components/polymer/polymer.html'>

 <dom-module id='ha-color-picker'>
+  <template>
    <style>
      canvas {
        cursor: crosshair;
      }
    </style>
-  <template>
+
    <canvas width='[[width]]' height='[[height]]'></canvas>
  </template>
 </dom-module>
--- a/src/components/ha-demo-badge.html
+++ b/src/components/ha-demo-badge.html
@ -3,12 +3,13 @@
 <link rel='import' href='./ha-label-badge.html'>

 <dom-module id='ha-demo-badge'>
+  <template>
    <style>
      :host {
        --ha-label-badge-color: #dac90d;
      }
    </style>
-  <template>
+
    <ha-label-badge
      icon='mdi:emoticon'
      label='Demo'
--- a/src/components/ha-label-badge.html
+++ b/src/components/ha-label-badge.html
@ -2,6 +2,7 @@
 <link rel='import' href='../../bower_components/iron-icon/iron-icon.html'>

 <dom-module id='ha-label-badge'>
+  <template>
    <style>
    .badge-container {
      display: inline-block;
@ -70,7 +71,7 @@
      border-radius: 50%;
    }
    </style>
-  <template>
+
    <div class='badge-container'>
      <div class='label-badge' id='badge'>
        <div class$='[[computeClasses(value)]]'>
--- a/src/components/ha-labeled-slider.html
+++ b/src/components/ha-labeled-slider.html
@ -3,6 +3,7 @@
 <link rel='import' href='../../bower_components/paper-slider/paper-slider.html'>

 <dom-module id='ha-labeled-slider'>
+  <template>
    <style>
      :host {
        display: block;
@ -24,7 +25,7 @@
        margin-left: 24px;
      }
    </style>
-  <template>
+
    <div class='title'>[[caption]]</div>
    <iron-icon icon='[[icon]]'></iron-icon>
    <div class='slider-container'>
--- a/src/components/ha-sidebar.html
+++ b/src/components/ha-sidebar.html
@ -10,6 +10,7 @@
 <link rel='import' href='../components/stream-status.html'>

 <dom-module id='ha-sidebar'>
+  <template>
    <style is="custom-style" include="iron-flex iron-flex-alignment iron-positioning"></style>
    <style>
      :host {
@ -98,7 +99,6 @@
      }
    </style>

-  <template>
    <paper-header-panel mode='scroll' class='sidenav fit'>
      <paper-toolbar>
        <div class="title">Home Assistant</div>
--- a/src/components/ha-view-tabs.html
+++ b/src/components/ha-view-tabs.html
@ -1,6 +1,7 @@
 <link rel="import" href="../../bower_components/paper-tabs/paper-tabs.html">

 <dom-module id="ha-view-tabs">
+  <template>
    <style>
      :host {
        --paper-tabs-selection-bar-color: #FFF;
@ -9,9 +10,13 @@
        text-transform: uppercase;
      }
    </style>
-  <template>
-    <paper-tabs selected='[[currentView]]' attr-for-selected='data-entity'
-      on-iron-select='viewSelected' scrollable=''>
+
+    <paper-tabs
+      selected='[[currentView]]'
+      attr-for-selected='data-entity'
+      on-iron-select='viewSelected'
+      scrollable=''
+    >
        <paper-tab data-entity='' on-tap='viewTapped'>[[locationName]]</paper-tab>
        <template is='dom-repeat' items='[[views]]'>
          <paper-tab data-entity$='[[item.entityId]]' on-tap='viewTapped'>
--- a/src/components/loading-box.html
+++ b/src/components/loading-box.html
@ -2,6 +2,7 @@
 <link rel="import" href="../../bower_components/paper-spinner/paper-spinner.html">

 <dom-module id="loading-box">
+  <template>
    <style is="custom-style" include="iron-flex"></style>
    <style>
      .text {
@ -11,7 +12,7 @@
        margin-left: 8px;
      }
    </style>
-  <template>
+
    <div class='layout horizontal'>
      <paper-spinner active="true"></paper-spinner>
      <div class='text'><content></content>…</div>
--- a/src/components/relative-ha-datetime.html
+++ b/src/components/relative-ha-datetime.html
@ -1,11 +1,5 @@
 <link rel="import" href="../../bower_components/polymer/polymer.html">

-<dom-module id="relative-ha-datetime">
-  <template>
-    <span>[[relativeTime]]</span>
-  </template>
-</dom-module>
-
 <script>
 Polymer({
  is: 'relative-ha-datetime',
@ -24,11 +18,6 @@ Polymer({
    parsedDateTime: {
      type: Object,
    },
-
-    relativeTime: {
-      type: String,
-      value: 'not set',
-    },
  },

  created: function () {
@ -57,7 +46,8 @@ Polymer({
  },

  updateRelative: function () {
-    this.relativeTime = this.parsedDateTime ?
+    var root = Polymer.dom(this);
+    root.innerHTML = this.parsedDateTime ?
      window.moment(this.parsedDateTime).fromNow() : '';
  },
 });
--- a/src/components/state-history-charts.html
+++ b/src/components/state-history-charts.html
@ -7,6 +7,7 @@
 <link rel="import" href="./state-history-chart-line.html">

 <dom-module id="state-history-charts">
+  <template>
    <style>
    :host {
      display: block;
@ -22,7 +23,7 @@
      overflow: hidden;
    }
    </style>
-  <template>
+
    <google-legacy-loader on-api-load="googleApiLoaded"></google-legacy-loader>

    <div hidden$="[[!isLoading]]" class='loading-container'>
--- a/src/components/state-info.html
+++ b/src/components/state-info.html
@ -4,6 +4,7 @@
 <link rel="import" href="relative-ha-datetime.html">

 <dom-module id="state-info">
+  <template>
    <style>
    :host {
      @apply(--paper-font-body1);
@ -35,7 +36,6 @@
    }
    </style>

-  <template>
    <div>
      <state-badge state-obj='[[stateObj]]'></state-badge>

--- a/src/components/stream-status.html
+++ b/src/components/stream-status.html
@ -4,6 +4,7 @@
 <link rel="import" href="../../bower_components/paper-toggle-button/paper-toggle-button.html">

 <dom-module id="stream-status">
+  <template>
    <style>
    :host {
      display: inline-block;
@ -18,9 +19,14 @@
      opacity: var(--dark-primary-opacity);
    }
    </style>
-  <template>
+
    <iron-icon icon="mdi:alert" hidden$="[[!hasError]]"></iron-icon>
-    <paper-toggle-button id="toggle" on-change='toggleChanged' checked$='[[isStreaming]]' hidden$="[[hasError]]"></paper-toggle-button>
+    <paper-toggle-button
+      id="toggle"
+      on-change='toggleChanged'
+      checked$='[[isStreaming]]'
+      hidden$="[[hasError]]"
+    ></paper-toggle-button>
  </template>
 </dom-module>

--- a/src/dialogs/ha-voice-command-dialog.html
+++ b/src/dialogs/ha-voice-command-dialog.html
@ -6,6 +6,7 @@
 <link rel="import" href="../../bower_components/paper-spinner/paper-spinner.html">

 <dom-module id="ha-voice-command-dialog">
+  <template>
    <style>
      iron-icon {
        margin-right: 8px;
@ -45,7 +46,6 @@
      }
    </style>

-  <template>
    <paper-dialog id="dialog" with-backdrop opened='{{dialogOpen}}'>
      <div class='content'>
        <div class='icon'>
--- a/src/dialogs/more-info-dialog.html
+++ b/src/dialogs/more-info-dialog.html
@ -10,6 +10,7 @@
 <link rel="import" href="../more-infos/more-info-content.html">

 <dom-module id="more-info-dialog">
+  <template>
    <style>
      paper-dialog {
        font-size: 14px;
@ -39,7 +40,7 @@
        }
      }
    </style>
-  <template>
+
    <!-- entry-animation='slide-up-animation' exit-animation='slide-down-animation' -->
    <paper-dialog id="dialog" with-backdrop opened='{{dialogOpen}}'>
      <h2>
--- a/src/home-assistant.html
+++ b/src/home-assistant.html
@ -15,15 +15,6 @@
 <link rel='import' href='./resources/panel-imports.html'>

 <dom-module id='home-assistant'>
-  <style>
-    :host {
-      font-family: 'Roboto', 'Noto', sans-serif;
-      font-weight: 300;
-      -webkit-font-smoothing: antialiased;
-      text-rendering: optimizeLegibility;
-    }
-  </style>
-
  <template>
    <home-assistant-main hass='[[hass]]' hidden$='[[!loaded]]'></home-assistant-main>

--- a/src/layouts/login-form.html
+++ b/src/layouts/login-form.html
@ -8,6 +8,7 @@
 <link rel="import" href="../../bower_components/paper-spinner/paper-spinner.html">

 <dom-module id="login-form">
+  <template>
    <style is="custom-style" include="iron-flex iron-positioning"></style>
    <style>
      :host {
@ -41,7 +42,6 @@
      }
    </style>

-  <template>
    <div class="layout vertical center center-center fit">
      <img src="/static/icons/favicon-192x192.png" height="192" />
      <a href="#" id="hideKeyboardOnFocus"></a>
--- a/src/layouts/partial-base.html
+++ b/src/layouts/partial-base.html
@ -6,6 +6,7 @@
 <link rel='import' href='../../bower_components/paper-icon-button/paper-icon-button.html'>

 <dom-module id='partial-base'>
+  <template>
    <style is="custom-style" include="iron-positioning"></style>
    <style>
      :host {
@ -18,7 +19,7 @@
        margin-right: 24px;
      }
    </style>
-  <template>
+
    <paper-scroll-header-panel class='fit'>
      <paper-toolbar>
        <paper-icon-button icon='mdi:menu' class$='[[computeMenuButtonClass(narrow, showMenu)]]' on-tap='toggleMenu'></paper-icon-button>
--- a/src/managers/notification-manager.html
+++ b/src/managers/notification-manager.html
@ -3,12 +3,13 @@
 <link rel="import" href="../../bower_components/paper-toast/paper-toast.html">

 <dom-module id="notification-manager">
+  <template>
    <style>
      paper-toast {
        z-index: 1;
      }
    </style>
-  <template>
+
    <paper-toast id="toast" text='{{text}}' no-cancel-on-outside-click='[[neg]]'></paper-toast>
  </template>
 </dom-module>
--- a/src/more-infos/more-info-alarm_control_panel.html
+++ b/src/more-infos/more-info-alarm_control_panel.html
@ -4,8 +4,9 @@
 <link rel='import' href='../../bower_components/paper-input/paper-input.html'>

 <dom-module id='more-info-alarm_control_panel'>
-  <style is="custom-style" include="iron-flex"></style>
  <template>
+    <style is="custom-style" include="iron-flex"></style>
+
    <div class='layout horizontal'>
      <paper-input label='code' value='{{enteredCode}}' pattern='[[codeFormat]]' type='password' hidden='[[!codeInputVisible]]' disabled='[[!codeInputEnabled]]'></paper-input>
    </div>
--- a/src/more-infos/more-info-camera.html
+++ b/src/more-infos/more-info-camera.html
@ -1,6 +1,7 @@
 <link rel="import" href="../../bower_components/polymer/polymer.html">

 <dom-module id='more-info-camera'>
+  <template>
    <style>
      :host {
        max-width:640px;
@ -11,7 +12,6 @@
      }
    </style>

-  <template>
    <img class='camera-image' src="[[computeCameraImageUrl(hass, stateObj)]]"
         on-load='imageLoaded' alt='[[stateObj.entityDisplay]]' />
  </template>
--- a/src/more-infos/more-info-content.html
+++ b/src/more-infos/more-info-content.html
@ -14,14 +14,6 @@
 <link rel='import' href='more-info-lock.html'>
 <link rel='import' href='more-info-hvac.html'>

-<dom-module id='more-info-content'>
-  <style>
-    :host {
-      display: block;
-    }
-  </style>
-</dom-module>
-
 <script>
 Polymer({
  is: 'more-info-content',
@ -37,6 +29,10 @@ Polymer({
    },
  },

+  created: function () {
+    this.style.display = 'block';
+  },
+
  stateObjChanged: function (stateObj) {
    if (!stateObj) return;

--- a/src/more-infos/more-info-default.html
+++ b/src/more-infos/more-info-default.html
@ -1,13 +1,14 @@
 <link rel="import" href="../../bower_components/polymer/polymer.html">

 <dom-module id="more-info-default">
+  <template>
    <style is="custom-style" include="iron-flex iron-flex-alignment"></style>
    <style>
      .data-entry .value {
        max-width: 200px;
      }
    </style>
-  <template>
+
    <div class='layout vertical'>
      <template is='dom-repeat' items="[[computeDisplayAttributes(stateObj)]]" as="attribute">
        <div class='data-entry layout justified horizontal'>
--- a/src/more-infos/more-info-group.html
+++ b/src/more-infos/more-info-group.html
@ -2,8 +2,8 @@

 <link rel="import" href="../state-summary/state-card-content.html">

-
 <dom-module id="more-info-group">
+  <template>
    <style>
      .child-card {
        margin-bottom: 8px;
@ -13,7 +13,7 @@
        margin-bottom: 0;
      }
    </style>
-  <template>
+
    <div id="groupedControlDetails"></div>
    <template is='dom-repeat' items="[[states]]" as='state'>
      <div class='child-card'>
--- a/src/more-infos/more-info-light.html
+++ b/src/more-infos/more-info-light.html
@ -5,6 +5,7 @@
 <link rel='import' href='../components/ha-color-picker.html'>

 <dom-module id='more-info-light'>
+  <template>
    <style is="custom-style" include="iron-flex"></style>
    <style>
      .brightness, .color_temp {
@ -31,7 +32,7 @@
        max-height: 200px;
      }
    </style>
-  <template>
+
    <div class$='[[computeClassNames(stateObj)]]'>

      <div class='brightness'>
--- a/src/more-infos/more-info-lock.html
+++ b/src/more-infos/more-info-lock.html
@ -4,12 +4,13 @@
 <link rel='import' href='../../bower_components/paper-input/paper-input.html'>

 <dom-module id='more-info-lock'>
+  <template>
    <style>
      paper-input {
        display: inline-block;
      }
    </style>
-  <template>
+
    <div hidden='[[!stateObj.attributes.code_format]]'>
      <paper-input label='code' value='{{enteredCode}}' pattern='[[stateObj.attributes.code_format]]' type='password'></paper-input>
      <paper-button on-tap='handleUnlockTap' hidden$='[[!isLocked]]'>Unlock</paper-button>
--- a/src/more-infos/more-info-media_player.html
+++ b/src/more-infos/more-info-media_player.html
@ -3,6 +3,7 @@
 <link rel='import' href='../../bower_components/paper-icon-button/paper-icon-button.html'>

 <dom-module id='more-info-media_player'>
+  <template>
    <style is="custom-style" include="iron-flex"></style>
    <style>
      .media-state {
@ -34,7 +35,7 @@
        margin-left: 10px;
      }
    </style>
-  <template>
+
    <div class$='[[computeClassNames(stateObj)]]'>
      <div class='layout horizontal'>
        <div class='flex'>
--- a/src/more-infos/more-info-script.html
+++ b/src/more-infos/more-info-script.html
@ -1,8 +1,9 @@
 <link rel='import' href='../../bower_components/polymer/polymer.html'>

 <dom-module id='more-info-script'>
-  <style is="custom-style" include="iron-flex iron-flex-alignment"></style>
  <template>
+    <style is="custom-style" include="iron-flex iron-flex-alignment"></style>
+
    <div class='layout vertical'>
      <div class='data-entry layout justified horizontal'>
        <div class='key'>Last Action</div>
--- a/src/more-infos/more-info-sun.html
+++ b/src/more-infos/more-info-sun.html
@ -3,8 +3,9 @@
 <link rel="import" href="../components/relative-ha-datetime.html">

 <dom-module id="more-info-sun">
-  <style is="custom-style" include="iron-flex iron-flex-alignment"></style>
  <template>
+    <style is="custom-style" include="iron-flex iron-flex-alignment"></style>
+
    <template is='dom-repeat' items='[[computeOrder(risingDate, settingDate)]]'>
      <div class='data-entry layout justified horizontal'>
        <div class='key'>
--- a/src/more-infos/more-info-thermostat.html
+++ b/src/more-infos/more-info-thermostat.html
@ -3,6 +3,7 @@
 <link rel='import' href='../../bower_components/paper-toggle-button/paper-toggle-button.html'>

 <dom-module id='more-info-thermostat'>
+  <template>
    <style is="custom-style" include="iron-flex"></style>
    <style>
      paper-slider {
@ -18,7 +19,7 @@
        display: block;
      }
    </style>
-  <template>
+
    <div class$='[[computeClassNames(stateObj)]]'>
      <div>
        <div>Target Temperature</div>
--- a/src/more-infos/more-info-updater.html
+++ b/src/more-infos/more-info-updater.html
@ -1,13 +1,14 @@
 <link rel="import" href="../../bower_components/polymer/polymer.html">

 <dom-module id="more-info-updater">
+  <template>
    <style is="custom-style" include="iron-flex"></style>
    <style>
      .link {
        color: #03A9F4;
      }
    </style>
-  <template>
+
    <div class='layout vertical'>

      <a class='link' href='https://home-assistant.io/getting-started/#updating' target='_blank'>Update Instructions</a>
--- a/src/resources/home-assistant-style.html
+++ b/src/resources/home-assistant-style.html
@ -1,6 +1,13 @@
 <link rel="import" href="../../bower_components/polymer/polymer.html">

 <style is="custom-style">
+  body {
+    font-family: 'Roboto', 'Noto', sans-serif;
+    font-weight: 300;
+    -webkit-font-smoothing: antialiased;
+    text-rendering: optimizeLegibility;
+  }
+
  :root {
    --dark-primary-color: #0288D1;
    --default-primary-color: #03A9F4;
--- a/src/state-summary/state-card-configurator.html
+++ b/src/state-summary/state-card-configurator.html
@ -4,6 +4,7 @@
 <link rel="import" href="../components/state-info.html">

 <dom-module id='state-card-configurator'>
+  <template>
    <style is="custom-style" include="iron-flex iron-flex-alignment"></style>
    <style>
      paper-button {
@ -14,7 +15,6 @@
      }
    </style>

-  <template>
    <div class='horizontal justified layout'>
      <state-info state-obj="[[stateObj]]" in-dialog='[[inDialog]]'></state-info>
      <paper-button hidden$='[[inDialog]]'>[[stateObj.state]]</paper-button>
--- a/src/state-summary/state-card-display.html
+++ b/src/state-summary/state-card-display.html
@ -3,6 +3,7 @@
 <link rel="import" href="../components/state-info.html">

 <dom-module id="state-card-display">
+  <template>
    <style is="custom-style" include="iron-flex iron-flex-alignment"></style>
    <style>
      .state {
@ -15,7 +16,6 @@
      }
    </style>

-  <template>
    <div class='horizontal justified layout'>
      <state-info state-obj="[[stateObj]]" in-dialog='[[inDialog]]'></state-info>
      <div class='state'>[[stateObj.stateDisplay]]</div>
--- a/src/state-summary/state-card-hvac.html
+++ b/src/state-summary/state-card-hvac.html
@ -3,6 +3,7 @@
 <link rel="import" href="../components/state-info.html">

 <dom-module id="state-card-hvac">
+  <template>
    <style is="custom-style" include="iron-flex iron-flex-alignment"></style>
    <style>
      .state {
@ -16,7 +17,6 @@
      }
    </style>

-  <template>
    <div class='horizontal justified layout'>
      <state-info state-obj="[[stateObj]]" in-dialog='[[inDialog]]'></state-info>
      <div class='state'>[[stateObj.state]]</div>
--- a/src/state-summary/state-card-input_select.html
+++ b/src/state-summary/state-card-input_select.html
@ -4,6 +4,7 @@
 <link rel="import" href="../components/entity/state-badge.html">

 <dom-module id="state-card-input_select">
+  <template>
    <style>
      :host {
        display: block;
@ -20,7 +21,6 @@
      }
    </style>

-  <template>
    <state-badge state-obj='[[stateObj]]'></state-badge>
    <paper-dropdown-menu
      on-tap='stopPropagation'
--- a/src/state-summary/state-card-input_slider.html
+++ b/src/state-summary/state-card-input_slider.html
@ -4,6 +4,7 @@
 <link rel="import" href="../components/state-info.html">

 <dom-module id="state-card-input_slider">
+  <template>
    <style is="custom-style" include="iron-flex iron-flex-alignment"></style>
    <style>
      paper-slider {
@ -11,7 +12,6 @@
      }
    </style>

-  <template>
    <div class='horizontal justified layout'>
      <state-info state-obj="[[stateObj]]" in-dialog='[[inDialog]]'></state-info>
      <paper-slider
--- a/src/state-summary/state-card-media_player.html
+++ b/src/state-summary/state-card-media_player.html
@ -3,6 +3,7 @@
 <link rel="import" href="../components/state-info.html">

 <dom-module id="state-card-media_player">
+  <template>
    <style is="custom-style" include="iron-flex iron-flex-alignment"></style>
    <style>
      :host {
@ -31,7 +32,7 @@
        color: var(--secondary-text-color);
      }
    </style>
-  <template>
+
    <div class='horizontal justified layout'>
      <state-info state-obj="[[stateObj]]" in-dialog='[[inDialog]]'></state-info>
      <div class='state'>
--- a/src/state-summary/state-card-rollershutter.html
+++ b/src/state-summary/state-card-rollershutter.html
@ -4,6 +4,7 @@
 <link rel="import" href="../components/state-info.html">

 <dom-module id="state-card-rollershutter">
+  <template>
    <style is="custom-style" include="iron-flex iron-flex-alignment"></style>
    <style>
      :host {
@ -15,9 +16,8 @@
        white-space: nowrap;
        width: 127px;
      }
-
    </style>
-  <template>
+
    <div class='horizontal justified layout'>
      <state-info state-obj="[[stateObj]]" in-dialog='[[inDialog]]'></state-info>
      <div class='state'>
--- a/src/state-summary/state-card-scene.html
+++ b/src/state-summary/state-card-scene.html
@ -4,6 +4,7 @@
 <link rel="import" href="../components/state-info.html">

 <dom-module id="state-card-scene">
+  <template>
    <style is="custom-style" include="iron-flex iron-flex-alignment"></style>
    <style>
      paper-button {
@ -14,7 +15,6 @@
      }
    </style>

-  <template>
    <div class='horizontal justified layout'>
      <state-info state-obj="[[stateObj]]" in-dialog='[[inDialog]]'></state-info>
      <paper-button on-tap='activateScene'>ACTIVATE</paper-button>
--- a/src/state-summary/state-card-script.html
+++ b/src/state-summary/state-card-script.html
@ -5,6 +5,7 @@
 <link rel="import" href="../components/entity/ha-entity-toggle.html">

 <dom-module id="state-card-script">
+  <template>
    <style is="custom-style" include="iron-flex iron-flex-alignment"></style>
    <style>
      paper-button {
@ -15,7 +16,6 @@
      }
    </style>

-  <template>
    <div class='horizontal justified layout'>
      <state-info state-obj="[[stateObj]]" in-dialog='[[inDialog]]'></state-info>
      <template is='dom-if' if='[[stateObj.attributes.can_cancel]]'>
--- a/src/state-summary/state-card-thermostat.html
+++ b/src/state-summary/state-card-thermostat.html
@ -3,6 +3,7 @@
 <link rel="import" href="../components/state-info.html">

 <dom-module id="state-card-thermostat">
+  <template>
    <style is="custom-style" include="iron-flex iron-flex-alignment"></style>
    <style>
      :host {
@ -23,7 +24,7 @@
        color: var(--secondary-text-color);
      }
    </style>
-  <template>
+
    <div class='horizontal justified layout'>
      <state-info state-obj="[[stateObj]]" in-dialog='[[inDialog]]'></state-info>
      <div class='state'>
--- a/src/state-summary/state-card-toggle.html
+++ b/src/state-summary/state-card-toggle.html
@ -4,13 +4,14 @@
 <link rel="import" href="../components/entity/ha-entity-toggle.html">

 <dom-module id="state-card-toggle">
+  <template>
    <style is="custom-style" include="iron-flex iron-flex-alignment"></style>
    <style>
      ha-entity-toggle {
        margin-left: 16px;
      }
    </style>
-  <template>
+
    <div class='horizontal justified layout'>
      <state-info state-obj="[[stateObj]]" in-dialog='[[inDialog]]'></state-info>
      <ha-entity-toggle state-obj="[[stateObj]]" hass='[[hass]]'></ha-entity-toggle>
--- a/src/state-summary/state-card-weblink.html
+++ b/src/state-summary/state-card-weblink.html
@ -3,6 +3,7 @@
 <link rel="import" href="../components/entity/state-badge.html">

 <dom-module id="state-card-weblink">
+  <template>
    <style>
      :host {
        display: block;
@ -18,7 +19,6 @@
      }
    </style>

-  <template>
    <state-badge state-obj='[[stateObj]]' in-dialog='[[inDialog]]'></state-badge>
    <a href$='[[stateObj.state]]' target='_blank' class='name' id='link'>[[stateObj.entityDisplay]]</a>
  </template>