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