merge from dev

dashboard-ui/bower_components/neon-animation/demo/load/animated-grid.html

@@ -7,70 +7,68 @@ Code distributed by Google as part of the polymer project is also
 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
 -->
 <link rel="import" href="../../../polymer/polymer.html">
-<link rel="import" href="../../../paper-styles/paper-styles.html">
+<link rel="import" href="../../../iron-flex-layout/iron-flex-layout.html">
 <link rel="import" href="../../neon-shared-element-animatable-behavior.html">
+<link rel="import" href="../../../paper-styles/typography.html">
+<link rel="import" href="../../../paper-styles/color.html">
+<link rel="import" href="../shared-styles.html">
 
 <dom-module id="animated-grid">
-
-  <link rel="import" type="css" href="../shared.css">
-
-  <style>
-
-    :host {
-      display: block;
-      background: #000;
-    }
-
-    .tile {
-      display: inline-block;
-      float: left;
-      vertical-align: top;
-      width: calc(100% / 6);
-      height: calc(100% / 3);
-
-      @apply(--paper-font-title);
-      @apply(--layout-vertical);
-      @apply(--layout-center-center);
-    }
-
-    .tile:nth-of-type(1) {
-      width: calc(100% / 3);
-      height: calc(100% / 3 * 2);
-    }
-
-    .tile:nth-of-type(4) {
-      width: calc(100% / 3);
-    }
-
-    .tile:nth-of-type(5) {
-      width: calc(100% / 3);
-      height: calc(100% / 3 * 2);
-    }
-
-    .tile:nth-of-type(8) {
-      width: calc(100% / 3);
-      height: calc(100% / 3);
-    }
-
-    .tile:nth-of-type(9) {
-      position: absolute;
-      top: calc(100% / 3 * 2);
-      left: 0;
-      width: calc(100% / 6);
-      height: calc(100% / 3);
-    }
-
-    .tile:nth-of-type(10) {
-      position: absolute;
-      top: calc(100% / 3 * 2);
-      left: calc(100% / 6);;
-      width: calc(100% / 6);
-      height: calc(100% / 3);
-    }
-
-  </style>
-
   <template>
+    <style include="shared-styles"></style>
+    <style>
+      :host {
+        display: block;
+        background: #000;
+      }
+
+      .tile {
+        display: inline-block;
+        float: left;
+        vertical-align: top;
+        width: calc(100% / 6);
+        height: calc(100% / 3);
+
+        @apply(--paper-font-title);
+        @apply(--layout-vertical);
+        @apply(--layout-center-center);
+      }
+
+      .tile:nth-of-type(1) {
+        width: calc(100% / 3);
+        height: calc(100% / 3 * 2);
+      }
+
+      .tile:nth-of-type(4) {
+        width: calc(100% / 3);
+      }
+
+      .tile:nth-of-type(5) {
+        width: calc(100% / 3);
+        height: calc(100% / 3 * 2);
+      }
+
+      .tile:nth-of-type(8) {
+        width: calc(100% / 3);
+        height: calc(100% / 3);
+      }
+
+      .tile:nth-of-type(9) {
+        position: absolute;
+        top: calc(100% / 3 * 2);
+        left: 0;
+        width: calc(100% / 6);
+        height: calc(100% / 3);
+      }
+
+      .tile:nth-of-type(10) {
+        position: absolute;
+        top: calc(100% / 3 * 2);
+        left: calc(100% / 6);;
+        width: calc(100% / 6);
+        height: calc(100% / 3);
+      }
+    </style>
 
     <template is="dom-repeat" items="[[config]]">
       <div class$="[[_computeTileClass(item.color)]]">

dashboard-ui/bower_components/neon-animation/demo/load/full-page.html

@@ -7,43 +7,38 @@ Code distributed by Google as part of the polymer project is also
 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
 -->
 <link rel="import" href="../../../polymer/polymer.html">
-<link rel="import" href="../../../paper-styles/paper-styles.html">
+<link rel="import" href="../../../iron-flex-layout/iron-flex-layout.html">
 <link rel="import" href="../../neon-animatable-behavior.html">
 <link rel="import" href="../../neon-animation-runner-behavior.html">
+<link rel="import" href="../../../paper-styles/shadow.html">
 <link rel="import" href="animated-grid.html">
 
 <dom-module id="full-page">
-
-  <style>
-
-    :host {
-      background: black;
-      visibility: hidden;
-      @apply(--layout-vertical);
-    }
-
-    .toolbar {
-      background: #9c27b0;
-      height: 72px;
-      z-index: 1;
-      @apply(--shadow-elevation-2dp);
-    }
-
-    animated-grid {
-      height: calc(100% - 72px);
-      @apply(--layout-flex);
-    }
-
-  </style>
-
   <template>
+    <style>
+      :host {
+        background: black;
+        visibility: hidden;
+        @apply(--layout-vertical);
+      }
+
+      .toolbar {
+        background: #9c27b0;
+        height: 72px;
+        z-index: 1;
+        @apply(--shadow-elevation-2dp);
+      }
+
+      animated-grid {
+        height: calc(100% - 72px);
+        @apply(--layout-flex);
+      }
+    </style>
 
     <div id="toolbar" class="toolbar"></div>
-
     <animated-grid id="grid"></animated-grid>
 
   </template>
-
 </dom-module>
 
 <script>

dashboard-ui/bower_components/neon-animation/demo/load/index.html

@@ -16,22 +16,24 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
     <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
 
     <script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
-
-    <link rel="import" href="../../../paper-styles/paper-styles.html">
+    <link rel="import" href="../../../iron-flex-layout/iron-flex-layout.html">
     <link rel="import" href="../../neon-animated-pages.html">
     <link rel="import" href="../../neon-animations.html">
     <link rel="import" href="full-page.html">
 
-    <style>
+    <style is="custom-style">
       body {
         overflow: hidden;
+        @apply(--layout-fullbleed);
+      }
+      full-page {
+        @apply(--layout-fit);
       }
     </style>
-
   </head>
-  <body class="fullbleed relative">
+  <body>
 
-    <full-page class="fit"></full-page>
+    <full-page></full-page>
 
     <script>