Home | History | Annotate | Download | only in polymer 
      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.github.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/CONTRIBUTORS.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/PATENTS.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][layout]::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>
    287