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