Home | History | Annotate | Download | only in classes 
      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.github.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/CONTRIBUTORS.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/PATENTS.txt
      9 -->
     10 
     11 <link rel="import" href="iron-shadow-flex-layout.html">
     12 
     13 <script>
     14   console.warn('This file is deprecated. Please use `iron-flex-layout/iron-flex-layout-classes.html`, and one of the specific dom-modules instead');
     15 </script>
     16 
     17 <style>
     18 
     19   /*******************************
     20             Flex Layout
     21   *******************************/
     22 
     23   .layout.horizontal,
     24   .layout.horizontal-reverse,
     25   .layout.vertical,
     26   .layout.vertical-reverse {
     27     display: -ms-flexbox;
     28     display: -webkit-flex;
     29     display: flex;
     30   }
     31 
     32   .layout.inline {
     33     display: -ms-inline-flexbox;
     34     display: -webkit-inline-flex;
     35     display: inline-flex;
     36   }
     37 
     38   .layout.horizontal {
     39     -ms-flex-direction: row;
     40     -webkit-flex-direction: row;
     41     flex-direction: row;
     42   }
     43 
     44   .layout.horizontal-reverse {
     45     -ms-flex-direction: row-reverse;
     46     -webkit-flex-direction: row-reverse;
     47     flex-direction: row-reverse;
     48   }
     49 
     50   .layout.vertical {
     51     -ms-flex-direction: column;
     52     -webkit-flex-direction: column;
     53     flex-direction: column;
     54   }
     55 
     56   .layout.vertical-reverse {
     57     -ms-flex-direction: column-reverse;
     58     -webkit-flex-direction: column-reverse;
     59     flex-direction: column-reverse;
     60   }
     61 
     62   .layout.wrap {
     63     -ms-flex-wrap: wrap;
     64     -webkit-flex-wrap: wrap;
     65     flex-wrap: wrap;
     66   }
     67 
     68   .layout.wrap-reverse {
     69     -ms-flex-wrap: wrap-reverse;
     70     -webkit-flex-wrap: wrap-reverse;
     71     flex-wrap: wrap-reverse;
     72   }
     73 
     74   .flex-auto {
     75     -ms-flex: 1 1 auto;
     76     -webkit-flex: 1 1 auto;
     77     flex: 1 1 auto;
     78   }
     79 
     80   .flex-none {
     81     -ms-flex: none;
     82     -webkit-flex: none;
     83     flex: none;
     84   }
     85 
     86   .flex,
     87   .flex-1 {
     88     -ms-flex: 1;
     89     -webkit-flex: 1;
     90     flex: 1;
     91   }
     92 
     93   .flex-2 {
     94     -ms-flex: 2;
     95     -webkit-flex: 2;
     96     flex: 2;
     97   }
     98 
     99   .flex-3 {
    100     -ms-flex: 3;
    101     -webkit-flex: 3;
    102     flex: 3;
    103   }
    104 
    105   .flex-4 {
    106     -ms-flex: 4;
    107     -webkit-flex: 4;
    108     flex: 4;
    109   }
    110 
    111   .flex-5 {
    112     -ms-flex: 5;
    113     -webkit-flex: 5;
    114     flex: 5;
    115   }
    116 
    117   .flex-6 {
    118     -ms-flex: 6;
    119     -webkit-flex: 6;
    120     flex: 6;
    121   }
    122 
    123   .flex-7 {
    124     -ms-flex: 7;
    125     -webkit-flex: 7;
    126     flex: 7;
    127   }
    128 
    129   .flex-8 {
    130     -ms-flex: 8;
    131     -webkit-flex: 8;
    132     flex: 8;
    133   }
    134 
    135   .flex-9 {
    136     -ms-flex: 9;
    137     -webkit-flex: 9;
    138     flex: 9;
    139   }
    140 
    141   .flex-10 {
    142     -ms-flex: 10;
    143     -webkit-flex: 10;
    144     flex: 10;
    145   }
    146 
    147   .flex-11 {
    148     -ms-flex: 11;
    149     -webkit-flex: 11;
    150     flex: 11;
    151   }
    152 
    153   .flex-12 {
    154     -ms-flex: 12;
    155     -webkit-flex: 12;
    156     flex: 12;
    157   }
    158 
    159   /* alignment in cross axis */
    160 
    161   .layout.start {
    162     -ms-flex-align: start;
    163     -webkit-align-items: flex-start;
    164     align-items: flex-start;
    165   }
    166 
    167   .layout.center,
    168   .layout.center-center {
    169     -ms-flex-align: center;
    170     -webkit-align-items: center;
    171     align-items: center;
    172   }
    173 
    174   .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   .layout.start-justified {
    183     -ms-flex-pack: start;
    184     -webkit-justify-content: flex-start;
    185     justify-content: flex-start;
    186   }
    187 
    188   .layout.center-justified,
    189   .layout.center-center {
    190     -ms-flex-pack: center;
    191     -webkit-justify-content: center;
    192     justify-content: center;
    193   }
    194 
    195   .layout.end-justified {
    196     -ms-flex-pack: end;
    197     -webkit-justify-content: flex-end;
    198     justify-content: flex-end;
    199   }
    200 
    201   .layout.around-justified {
    202     -ms-flex-pack: around;
    203     -webkit-justify-content: space-around;
    204     justify-content: space-around;
    205   }
    206 
    207   .layout.justified {
    208     -ms-flex-pack: justify;
    209     -webkit-justify-content: space-between;
    210     justify-content: space-between;
    211   }
    212 
    213   /* self alignment */
    214 
    215   .self-start {
    216     -ms-align-self: flex-start;
    217     -webkit-align-self: flex-start;
    218     align-self: flex-start;
    219   }
    220 
    221   .self-center {
    222     -ms-align-self: center;
    223     -webkit-align-self: center;
    224     align-self: center;
    225   }
    226 
    227   .self-end {
    228     -ms-align-self: flex-end;
    229     -webkit-align-self: flex-end;
    230     align-self: flex-end;
    231   }
    232 
    233   .self-stretch {
    234     -ms-align-self: stretch;
    235     -webkit-align-self: stretch;
    236     align-self: stretch;
    237   }
    238 
    239   /*******************************
    240             Other Layout
    241   *******************************/
    242 
    243   .block {
    244     display: block;
    245   }
    246 
    247   /* IE 10 support for HTML5 hidden attr */
    248   [hidden] {
    249     display: none !important;
    250   }
    251 
    252   .invisible {
    253     visibility: hidden !important;
    254   }
    255 
    256   .relative {
    257     position: relative;
    258   }
    259 
    260   .fit {
    261     position: absolute;
    262     top: 0;
    263     right: 0;
    264     bottom: 0;
    265     left: 0;
    266   }
    267 
    268   body.fullbleed {
    269     margin: 0;
    270     height: 100vh;
    271   }
    272 
    273   .scroll {
    274     -webkit-overflow-scrolling: touch;
    275     overflow: auto;
    276   }
    277 
    278   /* fixed position */
    279 
    280   .fixed-bottom,
    281   .fixed-left,
    282   .fixed-right,
    283   .fixed-top {
    284     position: fixed;
    285   }
    286 
    287   .fixed-top {
    288     top: 0;
    289     left: 0;
    290     right: 0;
    291   }
    292 
    293   .fixed-right {
    294     top: 0;
    295     right: 0;
    296     bottom: 0;
    297   }
    298 
    299   .fixed-bottom {
    300     right: 0;
    301     bottom: 0;
    302     left: 0;
    303   }
    304 
    305   .fixed-left {
    306     top: 0;
    307     bottom: 0;
    308     left: 0;
    309   }
    310 
    311 </style>
    312