Home | History | Annotate | Download | only in core-layout 
      1 /*
      2 Copyright 2013 The Polymer Authors. All rights reserved.
      3 Use of this source code is governed by a BSD-style
      4 license that can be found in the LICENSE file.
      5 */
      6 
      7 .core-h, .core-v {
      8   display: -webkit-box !important;
      9   display: -ms-flexbox !important;
     10   display: -moz-flex !important;
     11   display: -webkit-flex !important;
     12   display: flex !important;
     13 }
     14 
     15 .core-h {
     16   -webkit-box-orient: horizontal;
     17   -ms-flex-direction: row;
     18   -moz-flex-direction: row;
     19   -webkit-flex-direction: row;
     20   flex-direction: row;
     21 }
     22 
     23 .core-h.core-reverse {
     24   -webkit-box-direction: reverse;
     25   -ms-flex-direction: row-reverse;
     26   -moz-flex-direction: row-reverse;
     27   -webkit-flex-direction: row-reverse;
     28   flex-direction: row-reverse;
     29 }
     30 
     31 .core-v {
     32   -webkit-box-orient: vertical;
     33   -ms-flex-direction: column;
     34   -moz-flex-direction: column;
     35   -webkit-flex-direction: column;
     36   flex-direction: column;
     37 }
     38 
     39 .core-v.core-reverse {
     40   -webkit-box-direction: reverse;
     41   -ms-flex-direction: column-reverse;
     42   -moz-flex-direction: column-reverse;
     43   -webkit-flex-direction: column-reverse;
     44   flex-direction: column-reverse;
     45 }
     46 
     47 .core-relative {
     48   position: relative;
     49 }
     50 
     51 .core-fit {
     52   position: absolute;
     53   top: 0;
     54   left: 0;
     55   height: 100%;
     56   width: 100%;
     57 }
     58 
     59 body.core-fit {
     60   margin: 0;
     61 }
     62 
     63 .core-flex, [core-flex] {
     64   -webkit-box-flex: 1;
     65   -ms-flex: 1;
     66   -moz-flex: 1;
     67   -webkit-flex: 1;
     68   flex: 1;
     69 }
     70 
     71 .core-flex-auto, [core-flex-auto] {
     72   -webkit-box-flex: 1;
     73   -ms-flex: 1 1 auto;
     74   -moz-flex: 1 1 auto;
     75   -webkit-flex: 1 1 auto;
     76   flex: 1 1 auto;
     77 }
     78 
     79 .core-flex-none, [core-flex-none] {
     80   -webkit-box-flex: none;
     81   -ms-flex: none;
     82   -moz-flex: none;
     83   -webkit-flex: none;
     84   flex: none;
     85 }
     86 
     87 .core-flex1, [core-flex=1] {
     88   -webkit-box-flex: 1;
     89   -ms-flex: 1;
     90   -moz-flex: 1;
     91   -webkit-flex: 1;
     92   flex: 1;
     93 }
     94 
     95 .core-flex2, [core-flex=2] {
     96   -webkit-box-flex: 2;
     97   -ms-flex: 2;
     98   -moz-flex: 2;
     99   -webkit-flex: 2;
    100   flex: 2;
    101 }
    102 
    103 .core-flex3, [core-flex=3] {
    104   -webkit-box-flex: 3;
    105   -ms-flex: 3;
    106   -moz-flex: 3;
    107   -webkit-flex: 3;
    108   flex: 3;
    109 }
    110 
    111 /* distributed elements */
    112 ::content > .core-flex, ::content > [core-flex] {
    113   -webkit-box-flex: 1;
    114   -ms-flex: 1;
    115   -moz-flex: 1;
    116   -webkit-flex: 1;
    117   flex: 1;
    118 }
    119 
    120 ::content > .core-flex-auto, ::content > [core-flex-auto] {
    121   -webkit-box-flex: 1;
    122   -ms-flex: 1 1 auto;
    123   -moz-flex: 1 1 auto;
    124   -webkit-flex: 1 1 auto;
    125   flex: 1 1 auto;
    126 }
    127 
    128 ::content > .core-flex-none, ::content > [core-flex-none] {
    129   -webkit-box-flex: none;
    130   -ms-flex: none;
    131   -moz-flex: none;
    132   -webkit-flex: none;
    133   flex: none;
    134 }
    135 
    136 ::content > .core-flex1, ::content > [core-flex=1] {
    137   -webkit-box-flex: 1;
    138   -ms-flex: 1;
    139   -moz-flex: 1;
    140   -webkit-flex: 1;
    141   flex: 1;
    142 }
    143 
    144 ::content > .core-flex2, ::content > [core-flex=2] {
    145   -webkit-box-flex: 2;
    146   -ms-flex: 2;
    147   -moz-flex: 2;
    148   -webkit-flex: 2;
    149   flex: 2;
    150 }
    151 
    152 ::content > .core-flex3, ::content > [core-flex=3] {
    153   -webkit-box-flex: 3;
    154   -ms-flex: 3;
    155   -moz-flex: 3;
    156   -webkit-flex: 3;
    157   flex: 3;
    158 }
    159 
    160 /* alignment in main axis */
    161 .core-justify-start {
    162   -webkit-box-pack: start;
    163   -ms-flex-pack: start;
    164   -moz-justify-content: flex-start;
    165   -webkit-justify-content: flex-start;
    166   justify-content: flex-start;
    167 }
    168 
    169 .core-justify-center {
    170   -webkit-box-pack: center;
    171   -ms-flex-pack: center;
    172   -moz-justify-content: center;
    173   -webkit-justify-content: center;
    174   justify-content: center;
    175 }
    176 
    177 .core-justify-end {
    178   -webkit-box-pack: end;
    179   -ms-flex-pack: end;
    180   -moz-justify-content: flex-end;
    181   -webkit-justify-content: flex-end;
    182   justify-content: flex-end;
    183 }
    184 
    185 .core-justify-between {
    186   -webkit-box-pack: justify;
    187   -ms-flex-pack: justify;
    188   -moz-justify-content: space-between;
    189   -webkit-justify-content: space-between;
    190   justify-content: space-between;
    191 }
    192 
    193 /* alignment in cross axis */
    194 .core-align-start {
    195   -webkit-box-align: start;
    196   -ms-flex-align: start;
    197   -moz-align-items: flex-start;
    198   -webkit-align-items: flex-start;
    199   align-items: flex-start;
    200 }
    201 
    202 .core-align-center {
    203   -webkit-box-align: center;
    204   -ms-flex-align: center;
    205   -moz-align-items: center;
    206   -webkit-align-items: center;
    207   align-items: center;
    208 }
    209 
    210 .core-align-end {
    211   -webkit-box-align: end;
    212   -ms-flex-align: end;
    213   -moz-align-items: flex-end;
    214   -webkit-align-items: flex-end;
    215   align-items: flex-end;
    216 }
    217