third_party/polymer/v1_0/components-chromium/iron-flex-layout/classes/iron-shadow-flex-layout.html

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