| OLD | NEW | 
 | (Empty) | 
|    1 <!-- |  | 
|    2 @license |  | 
|    3 Copyright (c) 2015 The Polymer Project Authors. All rights reserved. |  | 
|    4 This code may only be used under the BSD style license found at http://polymer.g
     ithub.io/LICENSE.txt |  | 
|    5 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt |  | 
|    6 The complete set of contributors may be found at http://polymer.github.io/CONTRI
     BUTORS.txt |  | 
|    7 Code distributed by Google as part of the polymer project is also |  | 
|    8 subject to an additional IP rights grant found at http://polymer.github.io/PATEN
     TS.txt |  | 
|    9 --> |  | 
|   10 <style> |  | 
|   11  |  | 
|   12   /******************************* |  | 
|   13             Flex Layout |  | 
|   14   *******************************/ |  | 
|   15  |  | 
|   16   html /deep/ .layout.horizontal, |  | 
|   17   html /deep/ .layout.horizontal-reverse, |  | 
|   18   html /deep/ .layout.vertical, |  | 
|   19   html /deep/ .layout.vertical-reverse { |  | 
|   20     display: -ms-flexbox; |  | 
|   21     display: -webkit-flex; |  | 
|   22     display: flex; |  | 
|   23   } |  | 
|   24  |  | 
|   25   html /deep/ .layout.inline { |  | 
|   26     display: -ms-inline-flexbox; |  | 
|   27     display: -webkit-inline-flex; |  | 
|   28     display: inline-flex; |  | 
|   29   } |  | 
|   30  |  | 
|   31   html /deep/ .layout.horizontal { |  | 
|   32     -ms-flex-direction: row; |  | 
|   33     -webkit-flex-direction: row; |  | 
|   34     flex-direction: row; |  | 
|   35   } |  | 
|   36  |  | 
|   37   html /deep/ .layout.horizontal-reverse { |  | 
|   38     -ms-flex-direction: row-reverse; |  | 
|   39     -webkit-flex-direction: row-reverse; |  | 
|   40     flex-direction: row-reverse; |  | 
|   41   } |  | 
|   42  |  | 
|   43   html /deep/ .layout.vertical { |  | 
|   44     -ms-flex-direction: column; |  | 
|   45     -webkit-flex-direction: column; |  | 
|   46     flex-direction: column; |  | 
|   47   } |  | 
|   48  |  | 
|   49   html /deep/ .layout.vertical-reverse { |  | 
|   50     -ms-flex-direction: column-reverse; |  | 
|   51     -webkit-flex-direction: column-reverse; |  | 
|   52     flex-direction: column-reverse; |  | 
|   53   } |  | 
|   54  |  | 
|   55   html /deep/ .layout.wrap { |  | 
|   56     -ms-flex-wrap: wrap; |  | 
|   57     -webkit-flex-wrap: wrap; |  | 
|   58     flex-wrap: wrap; |  | 
|   59   } |  | 
|   60  |  | 
|   61   html /deep/ .layout.wrap-reverse { |  | 
|   62     -ms-flex-wrap: wrap-reverse; |  | 
|   63     -webkit-flex-wrap: wrap-reverse; |  | 
|   64     flex-wrap: wrap-reverse; |  | 
|   65   } |  | 
|   66  |  | 
|   67   html /deep/ .flex-auto { |  | 
|   68     -ms-flex: 1 1 auto; |  | 
|   69     -webkit-flex: 1 1 auto; |  | 
|   70     flex: 1 1 auto; |  | 
|   71   } |  | 
|   72  |  | 
|   73   html /deep/ .flex-none { |  | 
|   74     -ms-flex: none; |  | 
|   75     -webkit-flex: none; |  | 
|   76     flex: none; |  | 
|   77   } |  | 
|   78  |  | 
|   79   html /deep/ .flex, |  | 
|   80   html /deep/ .flex-1 { |  | 
|   81     -ms-flex: 1; |  | 
|   82     -webkit-flex: 1; |  | 
|   83     flex: 1; |  | 
|   84   } |  | 
|   85  |  | 
|   86   html /deep/ .flex-2 { |  | 
|   87     -ms-flex: 2; |  | 
|   88     -webkit-flex: 2; |  | 
|   89     flex: 2; |  | 
|   90   } |  | 
|   91  |  | 
|   92   html /deep/ .flex-3 { |  | 
|   93     -ms-flex: 3; |  | 
|   94     -webkit-flex: 3; |  | 
|   95     flex: 3; |  | 
|   96   } |  | 
|   97  |  | 
|   98   html /deep/ .flex-4 { |  | 
|   99     -ms-flex: 4; |  | 
|  100     -webkit-flex: 4; |  | 
|  101     flex: 4; |  | 
|  102   } |  | 
|  103  |  | 
|  104   html /deep/ .flex-5 { |  | 
|  105     -ms-flex: 5; |  | 
|  106     -webkit-flex: 5; |  | 
|  107     flex: 5; |  | 
|  108   } |  | 
|  109  |  | 
|  110   html /deep/ .flex-6 { |  | 
|  111     -ms-flex: 6; |  | 
|  112     -webkit-flex: 6; |  | 
|  113     flex: 6; |  | 
|  114   } |  | 
|  115  |  | 
|  116   html /deep/ .flex-7 { |  | 
|  117     -ms-flex: 7; |  | 
|  118     -webkit-flex: 7; |  | 
|  119     flex: 7; |  | 
|  120   } |  | 
|  121  |  | 
|  122   html /deep/ .flex-8 { |  | 
|  123     -ms-flex: 8; |  | 
|  124     -webkit-flex: 8; |  | 
|  125     flex: 8; |  | 
|  126   } |  | 
|  127  |  | 
|  128   html /deep/ .flex-9 { |  | 
|  129     -ms-flex: 9; |  | 
|  130     -webkit-flex: 9; |  | 
|  131     flex: 9; |  | 
|  132   } |  | 
|  133  |  | 
|  134   html /deep/ .flex-10 { |  | 
|  135     -ms-flex: 10; |  | 
|  136     -webkit-flex: 10; |  | 
|  137     flex: 10; |  | 
|  138   } |  | 
|  139  |  | 
|  140   html /deep/ .flex-11 { |  | 
|  141     -ms-flex: 11; |  | 
|  142     -webkit-flex: 11; |  | 
|  143     flex: 11; |  | 
|  144   } |  | 
|  145  |  | 
|  146   html /deep/ .flex-12 { |  | 
|  147     -ms-flex: 12; |  | 
|  148     -webkit-flex: 12; |  | 
|  149     flex: 12; |  | 
|  150   } |  | 
|  151  |  | 
|  152   /* alignment in cross axis */ |  | 
|  153  |  | 
|  154   html /deep/ .layout.start { |  | 
|  155     -ms-flex-align: start; |  | 
|  156     -webkit-align-items: flex-start; |  | 
|  157     align-items: flex-start; |  | 
|  158   } |  | 
|  159  |  | 
|  160   html /deep/ .layout.center, |  | 
|  161   html /deep/ .layout.center-center { |  | 
|  162     -ms-flex-align: center; |  | 
|  163     -webkit-align-items: center; |  | 
|  164     align-items: center; |  | 
|  165   } |  | 
|  166  |  | 
|  167   html /deep/ .layout.end { |  | 
|  168     -ms-flex-align: end; |  | 
|  169     -webkit-align-items: flex-end; |  | 
|  170     align-items: flex-end; |  | 
|  171   } |  | 
|  172  |  | 
|  173   /* alignment in main axis */ |  | 
|  174  |  | 
|  175   html /deep/ .layout.start-justified { |  | 
|  176     -ms-flex-pack: start; |  | 
|  177     -webkit-justify-content: flex-start; |  | 
|  178     justify-content: flex-start; |  | 
|  179   } |  | 
|  180  |  | 
|  181   html /deep/ .layout.center-justified, |  | 
|  182   html /deep/ .layout.center-center { |  | 
|  183     -ms-flex-pack: center; |  | 
|  184     -webkit-justify-content: center; |  | 
|  185     justify-content: center; |  | 
|  186   } |  | 
|  187  |  | 
|  188   html /deep/ .layout.end-justified { |  | 
|  189     -ms-flex-pack: end; |  | 
|  190     -webkit-justify-content: flex-end; |  | 
|  191     justify-content: flex-end; |  | 
|  192   } |  | 
|  193  |  | 
|  194   html /deep/ .layout.around-justified { |  | 
|  195     -ms-flex-pack: around; |  | 
|  196     -webkit-justify-content: space-around; |  | 
|  197     justify-content: space-around; |  | 
|  198   } |  | 
|  199  |  | 
|  200   html /deep/ .layout.justified { |  | 
|  201     -ms-flex-pack: justify; |  | 
|  202     -webkit-justify-content: space-between; |  | 
|  203     justify-content: space-between; |  | 
|  204   } |  | 
|  205  |  | 
|  206   /* self alignment */ |  | 
|  207  |  | 
|  208   html /deep/ .self-start { |  | 
|  209     -ms-align-self: flex-start; |  | 
|  210     -webkit-align-self: flex-start; |  | 
|  211     align-self: flex-start; |  | 
|  212   } |  | 
|  213  |  | 
|  214   html /deep/ .self-center { |  | 
|  215     -ms-align-self: center; |  | 
|  216     -webkit-align-self: center; |  | 
|  217     align-self: center; |  | 
|  218   } |  | 
|  219  |  | 
|  220   html /deep/ .self-end { |  | 
|  221     -ms-align-self: flex-end; |  | 
|  222     -webkit-align-self: flex-end; |  | 
|  223     align-self: flex-end; |  | 
|  224   } |  | 
|  225  |  | 
|  226   html /deep/ .self-stretch { |  | 
|  227     -ms-align-self: stretch; |  | 
|  228     -webkit-align-self: stretch; |  | 
|  229     align-self: stretch; |  | 
|  230   } |  | 
|  231  |  | 
|  232   /******************************* |  | 
|  233             Other Layout |  | 
|  234   *******************************/ |  | 
|  235  |  | 
|  236   html /deep/ .block { |  | 
|  237     display: block; |  | 
|  238   } |  | 
|  239  |  | 
|  240   /* IE 10 support for HTML5 hidden attr */ |  | 
|  241   html /deep/ [hidden] { |  | 
|  242     display: none !important; |  | 
|  243   } |  | 
|  244  |  | 
|  245   html /deep/ .invisible { |  | 
|  246     visibility: hidden !important; |  | 
|  247   } |  | 
|  248  |  | 
|  249   html /deep/ .relative { |  | 
|  250     position: relative; |  | 
|  251   } |  | 
|  252  |  | 
|  253   html /deep/ .fit { |  | 
|  254     position: absolute; |  | 
|  255     top: 0; |  | 
|  256     right: 0; |  | 
|  257     bottom: 0; |  | 
|  258     left: 0; |  | 
|  259   } |  | 
|  260  |  | 
|  261   body.fullbleed { |  | 
|  262     margin: 0; |  | 
|  263     height: 100vh; |  | 
|  264   } |  | 
|  265  |  | 
|  266   html /deep/ .scroll { |  | 
|  267     -webkit-overflow-scrolling: touch; |  | 
|  268     overflow: auto; |  | 
|  269   } |  | 
|  270  |  | 
|  271   .fixed-bottom, |  | 
|  272   .fixed-left, |  | 
|  273   .fixed-right, |  | 
|  274   .fixed-top { |  | 
|  275     position: fixed; |  | 
|  276   } |  | 
|  277  |  | 
|  278   html /deep/ .fixed-top { |  | 
|  279     top: 0; |  | 
|  280     left: 0; |  | 
|  281     right: 0; |  | 
|  282   } |  | 
|  283  |  | 
|  284   html /deep/ .fixed-right { |  | 
|  285     top: 0; |  | 
|  286     right: 0; |  | 
|  287     botttom: 0; |  | 
|  288   } |  | 
|  289  |  | 
|  290   html /deep/ .fixed-bottom { |  | 
|  291     right: 0; |  | 
|  292     bottom: 0; |  | 
|  293     left: 0; |  | 
|  294   } |  | 
|  295  |  | 
|  296   html /deep/ .fixed-left { |  | 
|  297     top: 0; |  | 
|  298     botttom: 0; |  | 
|  299     left: 0; |  | 
|  300   } |  | 
|  301  |  | 
|  302 </style> |  | 
| OLD | NEW |