Migrate away from deprecated layout classes

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;

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;

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;

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: {

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>

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;

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;

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">
 

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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>

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;

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;

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;

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;

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'>

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'>

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%;

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;

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;

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;

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;

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;

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;

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;

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;

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;

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;