From ec03e157355ae66c5bdbd9cfb7bad28c4875e322 Mon Sep 17 00:00:00 2001
From: Paulus Schoutsen <paulus@paulusschoutsen.nl>
Date: Mon, 28 Mar 2016 00:11:52 -0700
Subject: [PATCH] Migrate away from deprecated layout classes

---
 src/cards/ha-entities-card.html                   | 1 +
 src/components/entity/ha-entity-marker.html       | 1 +
 src/components/ha-cards.html                      | 1 +
 src/components/ha-sidebar.html                    | 1 +
 src/components/loading-box.html                   | 3 ++-
 src/components/logbook-entry.html                 | 1 +
 src/components/state-cards.html                   | 1 +
 src/home-assistant.html                           | 2 +-
 src/layouts/login-form.html                       | 1 +
 src/layouts/partial-base.html                     | 1 +
 src/layouts/partial-cards.html                    | 1 +
 src/layouts/partial-dev-call-service.html         | 1 +
 src/layouts/partial-dev-fire-event.html           | 1 +
 src/layouts/partial-dev-info.html                 | 1 +
 src/layouts/partial-dev-set-state.html            | 1 +
 src/layouts/partial-dev-template.html             | 1 +
 src/layouts/partial-history.html                  | 1 +
 src/layouts/partial-map.html                      | 1 +
 src/more-infos/more-info-alarm_control_panel.html | 1 +
 src/more-infos/more-info-configurator.html        | 1 +
 src/more-infos/more-info-default.html             | 1 +
 src/more-infos/more-info-light.html               | 1 +
 src/more-infos/more-info-media_player.html        | 1 +
 src/more-infos/more-info-script.html              | 1 +
 src/more-infos/more-info-sun.html                 | 1 +
 src/more-infos/more-info-thermostat.html          | 1 +
 src/more-infos/more-info-updater.html             | 1 +
 src/state-summary/state-card-display.html         | 1 +
 src/state-summary/state-card-input_select.html    | 1 +
 src/state-summary/state-card-input_slider.html    | 1 +
 src/state-summary/state-card-media_player.html    | 1 +
 src/state-summary/state-card-rollershutter.html   | 1 +
 src/state-summary/state-card-scene.html           | 1 +
 src/state-summary/state-card-script.html          | 1 +
 src/state-summary/state-card-thermostat.html      | 1 +
 src/state-summary/state-card-toggle.html          | 1 +
 36 files changed, 37 insertions(+), 2 deletions(-)

diff --git a/src/cards/ha-entities-card.html b/src/cards/ha-entities-card.html
index 16de3e6f6b..e79e8d2a6a 100644
--- 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'>
+  <style is="custom-style" include="iron-flex"></style>
   <style>
     .states {
       padding-bottom: 16px;
diff --git a/src/components/entity/ha-entity-marker.html b/src/components/entity/ha-entity-marker.html
index b999fc4023..e9aa079e5c 100644
--- a/src/components/entity/ha-entity-marker.html
+++ b/src/components/entity/ha-entity-marker.html
@@ -3,6 +3,7 @@
 <link rel='import' href='../../../bower_components/iron-icon/iron-icon.html'>
 
 <dom-module id='ha-entity-marker'>
+  <style is="custom-style" include="iron-positioning"></style>
   <style>
   .marker {
     vertical-align: top;
diff --git a/src/components/ha-cards.html b/src/components/ha-cards.html
index 85af2af87e..c4df76677f 100644
--- 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">
+  <style is="custom-style" include="iron-flex"></style>
   <style>
     :host {
       display: block;
diff --git a/src/components/ha-sidebar.html b/src/components/ha-sidebar.html
index 2c019740cc..f7b9ddffcb 100644
--- 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'>
+  <style is="custom-style" include="iron-flex iron-flex-alignment iron-positioning"></style>
   <style>
     :host {
       --sidebar-text: {
diff --git a/src/components/loading-box.html b/src/components/loading-box.html
index acb36ded2a..2084f3a285 100644
--- 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">
+  <style is="custom-style" include="iron-flex"></style>
   <style>
     .text {
       display: inline-block;
@@ -11,7 +12,7 @@
     }
   </style>
   <template>
-    <div layout='horizontal'>
+    <div class='layout horizontal'>
       <paper-spinner active="true"></paper-spinner>
       <div class='text'><content></content>…</div>
     </div>
diff --git a/src/components/logbook-entry.html b/src/components/logbook-entry.html
index 7482db00be..d83174c1f1 100644
--- a/src/components/logbook-entry.html
+++ b/src/components/logbook-entry.html
@@ -5,6 +5,7 @@
 <link rel="import" href="relative-ha-datetime.html">
 
 <dom-module id="logbook-entry">
+  <style is="custom-style" include="iron-flex"></style>
   <style>
     :host {
       display: block;
diff --git a/src/components/state-cards.html b/src/components/state-cards.html
index f81512aaa8..41eca2d2db 100644
--- a/src/components/state-cards.html
+++ b/src/components/state-cards.html
@@ -3,6 +3,7 @@
 <link rel="import" href="../state-summary/state-card.html">
 
 <dom-module id="state-cards">
+  <style is="custom-style" include="iron-flex"></style>
   <style>
   :host {
     display: block;
diff --git a/src/home-assistant.html b/src/home-assistant.html
index 56b45cd768..b7f7e6f010 100644
--- a/src/home-assistant.html
+++ b/src/home-assistant.html
@@ -1,5 +1,5 @@
 <link rel='import' href='../bower_components/polymer/polymer.html'>
-<link rel='import' href='../bower_components/iron-flex-layout/classes/iron-flex-layout.html'>
+<link rel='import' href='../bower_components/iron-flex-layout/iron-flex-layout-classes.html'>
 <link rel='import' href='../bower_components/paper-styles/typography.html'>
 <link rel="import" href="../bower_components/iron-iconset-svg/iron-iconset-svg.html">
 
diff --git a/src/layouts/login-form.html b/src/layouts/login-form.html
index bc469665dc..cffb405b68 100644
--- 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">
+  <style is="custom-style" include="iron-flex iron-positioning"></style>
   <style>
     :host {
       white-space: nowrap;
diff --git a/src/layouts/partial-base.html b/src/layouts/partial-base.html
index a397426242..426a92b477 100644
--- 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'>
+  <style is="custom-style" include="iron-positioning"></style>
   <style>
     :host {
       -ms-user-select: none;
diff --git a/src/layouts/partial-cards.html b/src/layouts/partial-cards.html
index 1081ce9d74..6a9ae40abc 100644
--- a/src/layouts/partial-cards.html
+++ b/src/layouts/partial-cards.html
@@ -7,6 +7,7 @@
 <link rel="import" href="../components/ha-cards.html">
 
 <dom-module id="partial-cards">
+  <style is="custom-style" include="iron-flex iron-positioning"></style>
   <style>
     :host {
       display: block;
diff --git a/src/layouts/partial-dev-call-service.html b/src/layouts/partial-dev-call-service.html
index 155117b67d..455192d950 100644
--- a/src/layouts/partial-dev-call-service.html
+++ b/src/layouts/partial-dev-call-service.html
@@ -9,6 +9,7 @@
 <link rel="import" href="../components/services-list.html">
 
 <dom-module id="partial-dev-call-service">
+  <style is="custom-style" include="iron-flex iron-positioning"></style>
   <style>
     .form {
       padding: 24px;
diff --git a/src/layouts/partial-dev-fire-event.html b/src/layouts/partial-dev-fire-event.html
index bfab61ef37..2acf4e7eee 100644
--- a/src/layouts/partial-dev-fire-event.html
+++ b/src/layouts/partial-dev-fire-event.html
@@ -9,6 +9,7 @@
 <link rel="import" href="../components/events-list.html">
 
 <dom-module id="partial-dev-fire-event">
+  <style is="custom-style" include="iron-flex iron-positioning"></style>
   <style>
     .form {
       padding: 24px;
diff --git a/src/layouts/partial-dev-info.html b/src/layouts/partial-dev-info.html
index fc71d2ddac..beba8f6386 100644
--- a/src/layouts/partial-dev-info.html
+++ b/src/layouts/partial-dev-info.html
@@ -5,6 +5,7 @@
 <link rel="import" href="./partial-base.html">
 
 <dom-module id="partial-dev-info">
+  <style is="custom-style" include="iron-positioning"></style>
   <style>
     .content {
       margin-top: 64px;
diff --git a/src/layouts/partial-dev-set-state.html b/src/layouts/partial-dev-set-state.html
index 98124adc67..cb6df91276 100644
--- a/src/layouts/partial-dev-set-state.html
+++ b/src/layouts/partial-dev-set-state.html
@@ -9,6 +9,7 @@
 <link rel="import" href="../components/entity-list.html">
 
 <dom-module id="partial-dev-set-state">
+  <style is="custom-style" include="iron-flex iron-positioning"></style>
   <style>
     .form {
       padding: 24px;
diff --git a/src/layouts/partial-dev-template.html b/src/layouts/partial-dev-template.html
index deb368776d..2cd4b0ac3c 100644
--- a/src/layouts/partial-dev-template.html
+++ b/src/layouts/partial-dev-template.html
@@ -8,6 +8,7 @@
 <link rel="import" href="../components/services-list.html">
 
 <dom-module id="partial-dev-template">
+  <style is="custom-style" include="iron-flex iron-positioning"></style>
   <style>
     .content {
       margin-top: 64px;
diff --git a/src/layouts/partial-history.html b/src/layouts/partial-history.html
index c0ba48f32f..4a60a3e123 100644
--- a/src/layouts/partial-history.html
+++ b/src/layouts/partial-history.html
@@ -9,6 +9,7 @@
 <link rel="import" href="../resources/pikaday-js.html">
 
 <dom-module id="partial-history">
+  <style is="custom-style" include="iron-flex"></style>
   <style>
     .content {
       background-color: white;
diff --git a/src/layouts/partial-map.html b/src/layouts/partial-map.html
index 117b4329aa..ff4d71ec6d 100644
--- a/src/layouts/partial-map.html
+++ b/src/layouts/partial-map.html
@@ -18,6 +18,7 @@
 </style>
 
 <dom-module id="partial-map">
+  <style is="custom-style" include="iron-flex iron-positioning"></style>
   <style>
     .map {
       position: relative;
diff --git a/src/more-infos/more-info-alarm_control_panel.html b/src/more-infos/more-info-alarm_control_panel.html
index ad7ba7f0ea..c16e2c98a1 100644
--- a/src/more-infos/more-info-alarm_control_panel.html
+++ b/src/more-infos/more-info-alarm_control_panel.html
@@ -4,6 +4,7 @@
 <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>
       <div class='layout horizontal'>
         <paper-input label='code' value='{{enteredCode}}' pattern='[[codeFormat]]' type='password' hidden='[[!codeInputVisible]]' disabled='[[!codeInputEnabled]]'></paper-input>
diff --git a/src/more-infos/more-info-configurator.html b/src/more-infos/more-info-configurator.html
index 7635c83f5b..5ce6f6c790 100644
--- a/src/more-infos/more-info-configurator.html
+++ b/src/more-infos/more-info-configurator.html
@@ -4,6 +4,7 @@
 <link rel='import' href='../components/loading-box.html'>
 
 <dom-module id='more-info-configurator'>
+  <style is="custom-style" include="iron-flex"></style>
   <style>
     p {
       margin: 8px 0;
diff --git a/src/more-infos/more-info-default.html b/src/more-infos/more-info-default.html
index 54269409e8..1d61895276 100644
--- a/src/more-infos/more-info-default.html
+++ b/src/more-infos/more-info-default.html
@@ -1,6 +1,7 @@
 <link rel="import" href="../../bower_components/polymer/polymer.html">
 
 <dom-module id="more-info-default">
+  <style is="custom-style" include="iron-flex iron-flex-alignment"></style>
   <style>
     .data-entry .value {
       max-width: 200px;
diff --git a/src/more-infos/more-info-light.html b/src/more-infos/more-info-light.html
index f5b4b10dc4..ab30692f82 100644
--- a/src/more-infos/more-info-light.html
+++ b/src/more-infos/more-info-light.html
@@ -4,6 +4,7 @@
 <link rel='import' href='../components/ha-color-picker.html'>
 
 <dom-module id='more-info-light'>
+  <style is="custom-style" include="iron-flex"></style>
   <style>
     .brightness, .color_temp {
       max-height: 0px;
diff --git a/src/more-infos/more-info-media_player.html b/src/more-infos/more-info-media_player.html
index fd10034176..0453dac3d2 100644
--- 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'>
+  <style is="custom-style" include="iron-flex"></style>
   <style>
     .media-state {
       text-transform: capitalize;
diff --git a/src/more-infos/more-info-script.html b/src/more-infos/more-info-script.html
index 9310d4b2ae..69ce717551 100644
--- a/src/more-infos/more-info-script.html
+++ b/src/more-infos/more-info-script.html
@@ -1,6 +1,7 @@
 <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>
     <div class='layout vertical'>
       <div class='data-entry layout justified horizontal'>
diff --git a/src/more-infos/more-info-sun.html b/src/more-infos/more-info-sun.html
index 97024e9590..d77a229fa8 100644
--- a/src/more-infos/more-info-sun.html
+++ b/src/more-infos/more-info-sun.html
@@ -3,6 +3,7 @@
 <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>
     <template is='dom-repeat' items='[[computeOrder(risingDate, settingDate)]]'>
       <div class='data-entry layout justified horizontal'>
diff --git a/src/more-infos/more-info-thermostat.html b/src/more-infos/more-info-thermostat.html
index 199284b1ca..7a3b08517e 100644
--- 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'>
+  <style is="custom-style" include="iron-flex"></style>
   <style>
     paper-slider {
       width: 100%;
diff --git a/src/more-infos/more-info-updater.html b/src/more-infos/more-info-updater.html
index c708943e37..9b54a1aaec 100644
--- a/src/more-infos/more-info-updater.html
+++ b/src/more-infos/more-info-updater.html
@@ -1,6 +1,7 @@
 <link rel="import" href="../../bower_components/polymer/polymer.html">
 
 <dom-module id="more-info-updater">
+  <style is="custom-style" include="iron-flex"></style>
   <style>
     .link {
       color: #03A9F4;
diff --git a/src/state-summary/state-card-display.html b/src/state-summary/state-card-display.html
index 5cdd4eb7ed..401ed83675 100755
--- 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">
+  <style is="custom-style" include="iron-flex iron-flex-alignment"></style>
   <style>
   .state {
     margin-left: 16px;
diff --git a/src/state-summary/state-card-input_select.html b/src/state-summary/state-card-input_select.html
index 5a0a002de0..b149523f59 100644
--- 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/state-info.html">
 
 <dom-module id="state-card-input_select">
+  <style is="custom-style" include="iron-flex iron-flex-alignment"></style>
   <style>
   paper-dropdown-menu {
     margin-left: 16px;
diff --git a/src/state-summary/state-card-input_slider.html b/src/state-summary/state-card-input_slider.html
index 5f2a42ecc6..7e86242684 100644
--- 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">
+  <style is="custom-style" include="iron-flex iron-flex-alignment"></style>
   <style>
   paper-slider {
     margin-left: 16px;
diff --git a/src/state-summary/state-card-media_player.html b/src/state-summary/state-card-media_player.html
index 3e5dd277a2..c674ad706b 100644
--- 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">
+  <style is="custom-style" include="iron-flex iron-flex-alignment"></style>
   <style>
   :host {
     line-height: 1.5;
diff --git a/src/state-summary/state-card-rollershutter.html b/src/state-summary/state-card-rollershutter.html
index 426ad10ce9..e5b8b9c001 100644
--- 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">
+  <style is="custom-style" include="iron-flex iron-flex-alignment"></style>
   <style>
   :host {
     line-height: 1.5;
diff --git a/src/state-summary/state-card-scene.html b/src/state-summary/state-card-scene.html
index d9bd233c87..3a68333b58 100644
--- 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">
+  <style is="custom-style" include="iron-flex iron-flex-alignment"></style>
   <style>
     paper-icon-button {
       border: 1px solid;
diff --git a/src/state-summary/state-card-script.html b/src/state-summary/state-card-script.html
index bfccf87466..f4ee4f0549 100644
--- 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">
+  <style is="custom-style" include="iron-flex iron-flex-alignment"></style>
   <style>
     paper-icon-button {
       border: 1px solid;
diff --git a/src/state-summary/state-card-thermostat.html b/src/state-summary/state-card-thermostat.html
index 3797c63e16..5960f758cf 100644
--- 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">
+  <style is="custom-style" include="iron-flex iron-flex-alignment"></style>
   <style>
   :host {
     line-height: 1.5;
diff --git a/src/state-summary/state-card-toggle.html b/src/state-summary/state-card-toggle.html
index 15397f1107..3aee26d14f 100755
--- a/src/state-summary/state-card-toggle.html
+++ b/src/state-summary/state-card-toggle.html
@@ -4,6 +4,7 @@
 <link rel="import" href="../components/entity/ha-entity-toggle.html">
 
 <dom-module id="state-card-toggle">
+  <style is="custom-style" include="iron-flex iron-flex-alignment"></style>
   <style>
     ha-entity-toggle {
       margin-left: 16px;