Home | History | Annotate | Download | only in iron-flex-layout 
      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 <!--
     12 A set of layout classes that let you specify layout properties directly in markup.
     13 You must include this file in every element that needs to use them.
     14 
     15 Sample use:
     16 
     17     <link rel="import" href="../iron-flex-layout/iron-flex-layout-classes.html">
     18     <style is="custom-style" include="iron-flex iron-flex-alignment"></style>
     19 
     20     <div class="layout horizontal layout-start">
     21       <div>cross axis start alignment</div>
     22     </div>
     23 
     24 The following imports are available:
     25  - iron-flex
     26  - iron-flex-reverse
     27  - iron-flex-alignment
     28  - iron-flex-factors
     29  - iron-positioning
     30 -->
     31 
     32 <link rel="import" href="../polymer/polymer.html">
     33 
     34 <!-- Most common used flex styles-->
     35 <dom-module id="iron-flex">
     36   <template>
     37     <style>
     38       .layout.horizontal,
     39       .layout.vertical {
     40         display: -ms-flexbox;
     41         display: -webkit-flex;
     42         display: flex;
     43       }
     44 
     45       .layout.inline {
     46         display: -ms-inline-flexbox;
     47         display: -webkit-inline-flex;
     48         display: inline-flex;
     49       }
     50 
     51       .layout.horizontal {
     52         -ms-flex-direction: row;
     53         -webkit-flex-direction: row;
     54         flex-direction: row;
     55       }
     56 
     57       .layout.vertical {
     58         -ms-flex-direction: column;
     59         -webkit-flex-direction: column;
     60         flex-direction: column;
     61       }
     62 
     63       .layout.wrap {
     64         -ms-flex-wrap: wrap;
     65         -webkit-flex-wrap: wrap;
     66         flex-wrap: wrap;
     67       }
     68 
     69       .layout.center,
     70       .layout.center-center {
     71         -ms-flex-align: center;
     72         -webkit-align-items: center;
     73         align-items: center;
     74       }
     75 
     76       .layout.center-justified,
     77       .layout.center-center {
     78         -ms-flex-pack: center;
     79         -webkit-justify-content: center;
     80         justify-content: center;
     81       }
     82 
     83       .flex {
     84         -ms-flex: 1 1 0.000000001px;
     85         -webkit-flex: 1;
     86         flex: 1;
     87         -webkit-flex-basis: 0.000000001px;
     88         flex-basis: 0.000000001px;
     89       }
     90 
     91       .flex-auto {
     92         -ms-flex: 1 1 auto;
     93         -webkit-flex: 1 1 auto;
     94         flex: 1 1 auto;
     95       }
     96 
     97       .flex-none {
     98         -ms-flex: none;
     99         -webkit-flex: none;
    100         flex: none;
    101       }
    102     </style>
    103   </template>
    104 </dom-module>
    105 
    106 <!-- Basic flexbox reverse styles -->
    107 <dom-module id="iron-flex-reverse">
    108   <template>
    109     <style>
    110       .layout.horizontal-reverse,
    111       .layout.vertical-reverse {
    112         display: -ms-flexbox;
    113         display: -webkit-flex;
    114         display: flex;
    115       }
    116 
    117       .layout.horizontal-reverse {
    118         -ms-flex-direction: row-reverse;
    119         -webkit-flex-direction: row-reverse;
    120         flex-direction: row-reverse;
    121       }
    122 
    123       .layout.vertical-reverse {
    124         -ms-flex-direction: column-reverse;
    125         -webkit-flex-direction: column-reverse;
    126         flex-direction: column-reverse;
    127       }
    128 
    129       .layout.wrap-reverse {
    130         -ms-flex-wrap: wrap-reverse;
    131         -webkit-flex-wrap: wrap-reverse;
    132         flex-wrap: wrap-reverse;
    133       }
    134     </style>
    135   </template>
    136 </dom-module>
    137 
    138 <!-- Flexbox alignment -->
    139 <dom-module id="iron-flex-alignment">
    140   <template>
    141     <style>
    142       /**
    143        * Alignment in cross axis.
    144        */
    145       .layout.start {
    146         -ms-flex-align: start;
    147         -webkit-align-items: flex-start;
    148         align-items: flex-start;
    149       }
    150 
    151       .layout.center,
    152       .layout.center-center {
    153         -ms-flex-align: center;
    154         -webkit-align-items: center;
    155         align-items: center;
    156       }
    157 
    158       .layout.end {
    159         -ms-flex-align: end;
    160         -webkit-align-items: flex-end;
    161         align-items: flex-end;
    162       }
    163 
    164       .layout.baseline {
    165         -ms-flex-align: baseline;
    166         -webkit-align-items: baseline;
    167         align-items: baseline;
    168       }
    169 
    170       /**
    171        * Alignment in main axis.
    172        */
    173       .layout.start-justified {
    174         -ms-flex-pack: start;
    175         -webkit-justify-content: flex-start;
    176         justify-content: flex-start;
    177       }
    178 
    179       .layout.center-justified,
    180       .layout.center-center {
    181         -ms-flex-pack: center;
    182         -webkit-justify-content: center;
    183         justify-content: center;
    184       }
    185 
    186       .layout.end-justified {
    187         -ms-flex-pack: end;
    188         -webkit-justify-content: flex-end;
    189         justify-content: flex-end;
    190       }
    191 
    192       .layout.around-justified {
    193         -ms-flex-pack: distribute;
    194         -webkit-justify-content: space-around;
    195         justify-content: space-around;
    196       }
    197 
    198       .layout.justified {
    199         -ms-flex-pack: justify;
    200         -webkit-justify-content: space-between;
    201         justify-content: space-between;
    202       }
    203 
    204       /**
    205        * Self alignment.
    206        */
    207       .self-start {
    208         -ms-align-self: flex-start;
    209         -webkit-align-self: flex-start;
    210         align-self: flex-start;
    211       }
    212 
    213       .self-center {
    214         -ms-align-self: center;
    215         -webkit-align-self: center;
    216         align-self: center;
    217       }
    218 
    219       .self-end {
    220         -ms-align-self: flex-end;
    221         -webkit-align-self: flex-end;
    222         align-self: flex-end;
    223       }
    224 
    225       .self-stretch {
    226         -ms-align-self: stretch;
    227         -webkit-align-self: stretch;
    228         align-self: stretch;
    229       }
    230 
    231       .self-baseline {
    232         -ms-align-self: baseline;
    233         -webkit-align-self: baseline;
    234         align-self: baseline;
    235       };
    236 
    237       /**
    238        * multi-line alignment in main axis.
    239        */
    240       .layout.start-aligned {
    241         -ms-flex-line-pack: start;  /* IE10 */
    242         -ms-align-content: flex-start;
    243         -webkit-align-content: flex-start;
    244         align-content: flex-start;
    245       }
    246 
    247       .layout.end-aligned {
    248         -ms-flex-line-pack: end;  /* IE10 */
    249         -ms-align-content: flex-end;
    250         -webkit-align-content: flex-end;
    251         align-content: flex-end;
    252       }
    253 
    254       .layout.center-aligned {
    255         -ms-flex-line-pack: center;  /* IE10 */
    256         -ms-align-content: center;
    257         -webkit-align-content: center;
    258         align-content: center;
    259       }
    260 
    261       .layout.between-aligned {
    262         -ms-flex-line-pack: justify;  /* IE10 */
    263         -ms-align-content: space-between;
    264         -webkit-align-content: space-between;
    265         align-content: space-between;
    266       }
    267 
    268       .layout.around-aligned {
    269         -ms-flex-line-pack: distribute;  /* IE10 */
    270         -ms-align-content: space-around;
    271         -webkit-align-content: space-around;
    272         align-content: space-around;
    273       }
    274     </style>
    275   </template>
    276 </dom-module>
    277 
    278 <dom-module id="iron-flex-factors">
    279   <template>
    280     <style>
    281       .flex,
    282       .flex-1 {
    283         -ms-flex: 1 1 0.000000001px;
    284         -webkit-flex: 1;
    285         flex: 1;
    286         -webkit-flex-basis: 0.000000001px;
    287         flex-basis: 0.000000001px;
    288       }
    289 
    290       .flex-2 {
    291         -ms-flex: 2;
    292         -webkit-flex: 2;
    293         flex: 2;
    294       }
    295 
    296       .flex-3 {
    297         -ms-flex: 3;
    298         -webkit-flex: 3;
    299         flex: 3;
    300       }
    301 
    302       .flex-4 {
    303         -ms-flex: 4;
    304         -webkit-flex: 4;
    305         flex: 4;
    306       }
    307 
    308       .flex-5 {
    309         -ms-flex: 5;
    310         -webkit-flex: 5;
    311         flex: 5;
    312       }
    313 
    314       .flex-6 {
    315         -ms-flex: 6;
    316         -webkit-flex: 6;
    317         flex: 6;
    318       }
    319 
    320       .flex-7 {
    321         -ms-flex: 7;
    322         -webkit-flex: 7;
    323         flex: 7;
    324       }
    325 
    326       .flex-8 {
    327         -ms-flex: 8;
    328         -webkit-flex: 8;
    329         flex: 8;
    330       }
    331 
    332       .flex-9 {
    333         -ms-flex: 9;
    334         -webkit-flex: 9;
    335         flex: 9;
    336       }
    337 
    338       .flex-10 {
    339         -ms-flex: 10;
    340         -webkit-flex: 10;
    341         flex: 10;
    342       }
    343 
    344       .flex-11 {
    345         -ms-flex: 11;
    346         -webkit-flex: 11;
    347         flex: 11;
    348       }
    349 
    350       .flex-12 {
    351         -ms-flex: 12;
    352         -webkit-flex: 12;
    353         flex: 12;
    354       }
    355     </style>
    356   </template>
    357 </dom-module>
    358 
    359 <!-- Non-flexbox positioning helper styles -->
    360 <dom-module id="iron-positioning">
    361   <template>
    362     <style>
    363       .block {
    364         display: block;
    365       }
    366 
    367       /* IE 10 support for HTML5 hidden attr */
    368       [hidden] {
    369         display: none !important;
    370       }
    371 
    372       .invisible {
    373         visibility: hidden !important;
    374       }
    375 
    376       .relative {
    377         position: relative;
    378       }
    379 
    380       .fit {
    381         position: absolute;
    382         top: 0;
    383         right: 0;
    384         bottom: 0;
    385         left: 0;
    386       }
    387 
    388       body.fullbleed {
    389         margin: 0;
    390         height: 100vh;
    391       }
    392 
    393       .scroll {
    394         -webkit-overflow-scrolling: touch;
    395         overflow: auto;
    396       }
    397 
    398       /* fixed position */
    399       .fixed-bottom,
    400       .fixed-left,
    401       .fixed-right,
    402       .fixed-top {
    403         position: fixed;
    404       }
    405 
    406       .fixed-top {
    407         top: 0;
    408         left: 0;
    409         right: 0;
    410       }
    411 
    412       .fixed-right {
    413         top: 0;
    414         right: 0;
    415         bottom: 0;
    416       }
    417 
    418       .fixed-bottom {
    419         right: 0;
    420         bottom: 0;
    421         left: 0;
    422       }
    423 
    424       .fixed-left {
    425         top: 0;
    426         bottom: 0;
    427         left: 0;
    428       }
    429     </style>
    430   </template>
    431 </dom-module>
    432