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 <link rel="import" href="../polymer/polymer.html">
     12 
     13 <!--
     14 The `<iron-flex-layout>` component provides simple ways to use
     15 [CSS flexible box layout](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes),
     16 also known as flexbox. This component provides two different ways to use flexbox:
     17 
     18 1. [Layout classes](https://github.com/PolymerElements/iron-flex-layout/tree/master/iron-flex-layout-classes.html).
     19 The layout class stylesheet provides a simple set of class-based flexbox rules, that
     20 let you specify layout properties directly in markup. You must include this file
     21 in every element that needs to use them.
     22 
     23   Sample use:
     24 
     25       <link rel="import" href="../iron-flex-layout/iron-flex-layout-classes.html">
     26       <style is="custom-style" include="iron-flex iron-flex-alignment"></style>
     27 
     28       <div class="layout horizontal layout-start">
     29         <div>cross axis start alignment</div>
     30       </div>
     31 
     32 2. [Custom CSS mixins](https://github.com/PolymerElements/iron-flex-layout/blob/master/iron-flex-layout.html).
     33 The mixin stylesheet includes custom CSS mixins that can be applied inside a CSS rule using the `@apply` function.
     34 
     35 Please note that the old [/deep/ layout classes](https://github.com/PolymerElements/iron-flex-layout/tree/master/classes)
     36 are deprecated, and should not be used. To continue using layout properties
     37 directly in markup, please switch to using the new `dom-module`-based
     38 [layout classes](https://github.com/PolymerElements/iron-flex-layout/tree/master/iron-flex-layout-classes.html).
     39 Please note that the new version does not use `/deep/`, and therefore requires you
     40 to import the `dom-modules` in every element that needs to use them.
     41 
     42 A complete [guide](https://elements.polymer-project.org/guides/flex-layout) to `<iron-flex-layout>` is available.
     43 
     44 @group Iron Elements
     45 @pseudoElement iron-flex-layout
     46 @demo demo/index.html
     47 -->
     48 
     49 <style>
     50   /* IE 10 support for HTML5 hidden attr */
     51   [hidden] {
     52     display: none !important;
     53   }
     54 </style>
     55 
     56 <style is="custom-style">
     57   :root {
     58 
     59     --layout: {
     60       display: -ms-flexbox;
     61       display: -webkit-flex;
     62       display: flex;
     63     };
     64 
     65     --layout-inline: {
     66       display: -ms-inline-flexbox;
     67       display: -webkit-inline-flex;
     68       display: inline-flex;
     69     };
     70 
     71     --layout-horizontal: {
     72       @apply(--layout);
     73 
     74       -ms-flex-direction: row;
     75       -webkit-flex-direction: row;
     76       flex-direction: row;
     77     };
     78 
     79     --layout-horizontal-reverse: {
     80       @apply(--layout);
     81 
     82       -ms-flex-direction: row-reverse;
     83       -webkit-flex-direction: row-reverse;
     84       flex-direction: row-reverse;
     85     };
     86 
     87     --layout-vertical: {
     88       @apply(--layout);
     89 
     90       -ms-flex-direction: column;
     91       -webkit-flex-direction: column;
     92       flex-direction: column;
     93     };
     94 
     95     --layout-vertical-reverse: {
     96       @apply(--layout);
     97 
     98       -ms-flex-direction: column-reverse;
     99       -webkit-flex-direction: column-reverse;
    100       flex-direction: column-reverse;
    101     };
    102 
    103     --layout-wrap: {
    104       -ms-flex-wrap: wrap;
    105       -webkit-flex-wrap: wrap;
    106       flex-wrap: wrap;
    107     };
    108 
    109     --layout-wrap-reverse: {
    110       -ms-flex-wrap: wrap-reverse;
    111       -webkit-flex-wrap: wrap-reverse;
    112       flex-wrap: wrap-reverse;
    113     };
    114 
    115     --layout-flex-auto: {
    116       -ms-flex: 1 1 auto;
    117       -webkit-flex: 1 1 auto;
    118       flex: 1 1 auto;
    119     };
    120 
    121     --layout-flex-none: {
    122       -ms-flex: none;
    123       -webkit-flex: none;
    124       flex: none;
    125     };
    126 
    127     --layout-flex: {
    128       -ms-flex: 1 1 0.000000001px;
    129       -webkit-flex: 1;
    130       flex: 1;
    131       -webkit-flex-basis: 0.000000001px;
    132       flex-basis: 0.000000001px;
    133     };
    134 
    135     --layout-flex-2: {
    136       -ms-flex: 2;
    137       -webkit-flex: 2;
    138       flex: 2;
    139     };
    140 
    141     --layout-flex-3: {
    142       -ms-flex: 3;
    143       -webkit-flex: 3;
    144       flex: 3;
    145     };
    146 
    147     --layout-flex-4: {
    148       -ms-flex: 4;
    149       -webkit-flex: 4;
    150       flex: 4;
    151     };
    152 
    153     --layout-flex-5: {
    154       -ms-flex: 5;
    155       -webkit-flex: 5;
    156       flex: 5;
    157     };
    158 
    159     --layout-flex-6: {
    160       -ms-flex: 6;
    161       -webkit-flex: 6;
    162       flex: 6;
    163     };
    164 
    165     --layout-flex-7: {
    166       -ms-flex: 7;
    167       -webkit-flex: 7;
    168       flex: 7;
    169     };
    170 
    171     --layout-flex-8: {
    172       -ms-flex: 8;
    173       -webkit-flex: 8;
    174       flex: 8;
    175     };
    176 
    177     --layout-flex-9: {
    178       -ms-flex: 9;
    179       -webkit-flex: 9;
    180       flex: 9;
    181     };
    182 
    183     --layout-flex-10: {
    184       -ms-flex: 10;
    185       -webkit-flex: 10;
    186       flex: 10;
    187     };
    188 
    189     --layout-flex-11: {
    190       -ms-flex: 11;
    191       -webkit-flex: 11;
    192       flex: 11;
    193     };
    194 
    195     --layout-flex-12: {
    196       -ms-flex: 12;
    197       -webkit-flex: 12;
    198       flex: 12;
    199     };
    200 
    201     /* alignment in cross axis */
    202 
    203     --layout-start: {
    204       -ms-flex-align: start;
    205       -webkit-align-items: flex-start;
    206       align-items: flex-start;
    207     };
    208 
    209     --layout-center: {
    210       -ms-flex-align: center;
    211       -webkit-align-items: center;
    212       align-items: center;
    213     };
    214 
    215     --layout-end: {
    216       -ms-flex-align: end;
    217       -webkit-align-items: flex-end;
    218       align-items: flex-end;
    219     };
    220 
    221     --layout-baseline: {
    222       -ms-flex-align: baseline;
    223       -webkit-align-items: baseline;
    224       align-items: baseline;
    225     };
    226 
    227     /* alignment in main axis */
    228 
    229     --layout-start-justified: {
    230       -ms-flex-pack: start;
    231       -webkit-justify-content: flex-start;
    232       justify-content: flex-start;
    233     };
    234 
    235     --layout-center-justified: {
    236       -ms-flex-pack: center;
    237       -webkit-justify-content: center;
    238       justify-content: center;
    239     };
    240 
    241     --layout-end-justified: {
    242       -ms-flex-pack: end;
    243       -webkit-justify-content: flex-end;
    244       justify-content: flex-end;
    245     };
    246 
    247     --layout-around-justified: {
    248       -ms-flex-pack: distribute;
    249       -webkit-justify-content: space-around;
    250       justify-content: space-around;
    251     };
    252 
    253     --layout-justified: {
    254       -ms-flex-pack: justify;
    255       -webkit-justify-content: space-between;
    256       justify-content: space-between;
    257     };
    258 
    259     --layout-center-center: {
    260       @apply(--layout-center);
    261       @apply(--layout-center-justified);
    262     };
    263 
    264     /* self alignment */
    265 
    266     --layout-self-start: {
    267       -ms-align-self: flex-start;
    268       -webkit-align-self: flex-start;
    269       align-self: flex-start;
    270     };
    271 
    272     --layout-self-center: {
    273       -ms-align-self: center;
    274       -webkit-align-self: center;
    275       align-self: center;
    276     };
    277 
    278     --layout-self-end: {
    279       -ms-align-self: flex-end;
    280       -webkit-align-self: flex-end;
    281       align-self: flex-end;
    282     };
    283 
    284     --layout-self-stretch: {
    285       -ms-align-self: stretch;
    286       -webkit-align-self: stretch;
    287       align-self: stretch;
    288     };
    289 
    290     --layout-self-baseline: {
    291       -ms-align-self: baseline;
    292       -webkit-align-self: baseline;
    293       align-self: baseline;
    294     };
    295 
    296     /* multi-line alignment in main axis */
    297 
    298     --layout-start-aligned: {
    299       -ms-flex-line-pack: start;  /* IE10 */
    300       -ms-align-content: flex-start;
    301       -webkit-align-content: flex-start;
    302       align-content: flex-start;
    303     };
    304 
    305     --layout-end-aligned: {
    306       -ms-flex-line-pack: end;  /* IE10 */
    307       -ms-align-content: flex-end;
    308       -webkit-align-content: flex-end;
    309       align-content: flex-end;
    310     };
    311 
    312     --layout-center-aligned: {
    313       -ms-flex-line-pack: center;  /* IE10 */
    314       -ms-align-content: center;
    315       -webkit-align-content: center;
    316       align-content: center;
    317     };
    318 
    319     --layout-between-aligned: {
    320       -ms-flex-line-pack: justify;  /* IE10 */
    321       -ms-align-content: space-between;
    322       -webkit-align-content: space-between;
    323       align-content: space-between;
    324     };
    325 
    326     --layout-around-aligned: {
    327       -ms-flex-line-pack: distribute;  /* IE10 */
    328       -ms-align-content: space-around;
    329       -webkit-align-content: space-around;
    330       align-content: space-around;
    331     };
    332 
    333     /*******************************
    334               Other Layout
    335     *******************************/
    336 
    337     --layout-block: {
    338       display: block;
    339     };
    340 
    341     --layout-invisible: {
    342       visibility: hidden !important;
    343     };
    344 
    345     --layout-relative: {
    346       position: relative;
    347     };
    348 
    349     --layout-fit: {
    350       position: absolute;
    351       top: 0;
    352       right: 0;
    353       bottom: 0;
    354       left: 0;
    355     };
    356 
    357     --layout-scroll: {
    358       -webkit-overflow-scrolling: touch;
    359       overflow: auto;
    360     };
    361 
    362     --layout-fullbleed: {
    363       margin: 0;
    364       height: 100vh;
    365     };
    366 
    367     /* fixed position */
    368 
    369     --layout-fixed-top: {
    370       position: fixed;
    371       top: 0;
    372       left: 0;
    373       right: 0;
    374     };
    375 
    376     --layout-fixed-right: {
    377       position: fixed;
    378       top: 0;
    379       right: 0;
    380       bottom: 0;
    381     };
    382 
    383     --layout-fixed-bottom: {
    384       position: fixed;
    385       right: 0;
    386       bottom: 0;
    387       left: 0;
    388     };
    389 
    390     --layout-fixed-left: {
    391       position: fixed;
    392       top: 0;
    393       bottom: 0;
    394       left: 0;
    395     };
    396 
    397   }
    398 
    399 </style>
    400