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