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