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