src/third_party/polymer/components/polymer/layout.html

   1 <!--
   2 Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
   3 This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
   4 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
   5 The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
   6 Code distributed by Google as part of the polymer project is also
   7 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
   8 -->
   9 <style shim-shadowdom>
  10 /*******************************
  11           Flex Layout
  12 *******************************/
  13
  14 html /deep/ [layout][horizontal], html /deep/ [layout][vertical] {
  15   display: -ms-flexbox;
  16   display: -webkit-flex;
  17   display: flex;
  18 }
  19
  20 html /deep/ [layout][horizontal][inline], html /deep/ [layout][vertical][inline] {
  21   display: -ms-inline-flexbox;
  22   display: -webkit-inline-flex;
  23   display: inline-flex;
  24 }
  25
  26 html /deep/ [layout][horizontal] {
  27   -ms-flex-direction: row;
  28   -webkit-flex-direction: row;
  29   flex-direction: row;
  30 }
  31
  32 html /deep/ [layout][horizontal][reverse] {
  33   -ms-flex-direction: row-reverse;
  34   -webkit-flex-direction: row-reverse;
  35   flex-direction: row-reverse;
  36 }
  37
  38 html /deep/ [layout][vertical] {
  39   -ms-flex-direction: column;
  40   -webkit-flex-direction: column;
  41   flex-direction: column;
  42 }
  43
  44 html /deep/ [layout][vertical][reverse] {
  45   -ms-flex-direction: column-reverse;
  46   -webkit-flex-direction: column-reverse;
  47   flex-direction: column-reverse;
  48 }
  49
  50 html /deep/ [layout][wrap] {
  51   -ms-flex-wrap: wrap;
  52   -webkit-flex-wrap: wrap;
  53   flex-wrap: wrap;
  54 }
  55
  56 html /deep/ [layout][wrap-reverse] {
  57   -ms-flex-wrap: wrap-reverse;
  58   -webkit-flex-wrap: wrap-reverse;
  59   flex-wrap: wrap-reverse;
  60 }
  61
  62 html /deep/ [flex] {
  63   -ms-flex: 1;
  64   -webkit-flex: 1;
  65   flex: 1;
  66 }
  67
  68 html /deep/ [flex][auto] {
  69   -ms-flex: 1 1 auto;
  70   -webkit-flex: 1 1 auto;
  71   flex: 1 1 auto;
  72 }
  73
  74 html /deep/ [flex][none] {
  75   -ms-flex: none;
  76   -webkit-flex: none;
  77   flex: none;
  78 }
  79
  80 html /deep/ [flex][one] {
  81   -ms-flex: 1;
  82   -webkit-flex: 1;
  83   flex: 1;
  84 }
  85
  86 html /deep/ [flex][two] {
  87   -ms-flex: 2;
  88   -webkit-flex: 2;
  89   flex: 2;
  90 }
  91
  92 html /deep/ [flex][three] {
  93   -ms-flex: 3;
  94   -webkit-flex: 3;
  95   flex: 3;
  96 }
  97
  98 html /deep/ [flex][four] {
  99   -ms-flex: 4;
 100   -webkit-flex: 4;
 101   flex: 4;
 102 }
 103
 104 html /deep/ [flex][five] {
 105   -ms-flex: 5;
 106   -webkit-flex: 5;
 107   flex: 5;
 108 }
 109
 110 html /deep/ [flex][six] {
 111   -ms-flex: 6;
 112   -webkit-flex: 6;
 113   flex: 6;
 114 }
 115
 116 html /deep/ [flex][seven] {
 117   -ms-flex: 7;
 118   -webkit-flex: 7;
 119   flex: 7;
 120 }
 121
 122 html /deep/ [flex][eight] {
 123   -ms-flex: 8;
 124   -webkit-flex: 8;
 125   flex: 8;
 126 }
 127
 128 html /deep/ [flex][nine] {
 129   -ms-flex: 9;
 130   -webkit-flex: 9;
 131   flex: 9;
 132 }
 133
 134 html /deep/ [flex][ten] {
 135   -ms-flex: 10;
 136   -webkit-flex: 10;
 137   flex: 10;
 138 }
 139
 140 html /deep/ [flex][eleven] {
 141   -ms-flex: 11;
 142   -webkit-flex: 11;
 143   flex: 11;
 144 }
 145
 146 html /deep/ [flex][twelve] {
 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], html /deep/ [layout][center-center] {
 161   -ms-flex-align: center;
 162   -webkit-align-items: center;
 163   align-items: center;
 164 }
 165
 166 html /deep/ [layout][end] {
 167   -ms-flex-align: end;
 168   -webkit-align-items: flex-end;
 169   align-items: flex-end;
 170 }
 171
 172 /* alignment in main axis */
 173
 174 html /deep/ [layout][start-justified] {
 175   -ms-flex-pack: start;
 176   -webkit-justify-content: flex-start;
 177   justify-content: flex-start;
 178 }
 179
 180 html /deep/ [layout][center-justified], html /deep/ [layout][center-center] {
 181   -ms-flex-pack: center;
 182   -webkit-justify-content: center;
 183   justify-content: center;
 184 }
 185
 186 html /deep/ [layout][end-justified] {
 187   -ms-flex-pack: end;
 188   -webkit-justify-content: flex-end;
 189   justify-content: flex-end;
 190 }
 191
 192 html /deep/ [layout][around-justified] {
 193   -ms-flex-pack: around;
 194   -webkit-justify-content: space-around;
 195   justify-content: space-around;
 196 }
 197
 198 html /deep/ [layout][justified] {
 199   -ms-flex-pack: justify;
 200   -webkit-justify-content: space-between;
 201   justify-content: space-between;
 202 }
 203
 204 /* self alignment */
 205
 206 html /deep/ [self-start] {
 207   -ms-align-self: flex-start;
 208   -webkit-align-self: flex-start;
 209   align-self: flex-start;
 210 }
 211
 212 html /deep/ [self-center] {
 213   -ms-align-self: center;
 214   -webkit-align-self: center;
 215   align-self: center;
 216 }
 217
 218 html /deep/ [self-end] {
 219   -ms-align-self: flex-end;
 220   -webkit-align-self: flex-end;
 221   align-self: flex-end;
 222 }
 223
 224 html /deep/ [self-stretch] {
 225   -ms-align-self: stretch;
 226   -webkit-align-self: stretch;
 227   align-self: stretch;
 228 }
 229
 230 /*******************************
 231           Other Layout
 232 *******************************/
 233
 234 html /deep/ [block] {
 235   display: block;
 236 }
 237
 238 /* ie support for hidden */
 239 html /deep/ [hidden] {
 240   display: none !important;
 241 }
 242
 243 html /deep/ [relative] {
 244   position: relative;
 245 }
 246
 247 html /deep/ [fit] {
 248   position: absolute;
 249   top: 0;
 250   right: 0;
 251   bottom: 0;
 252   left: 0;
 253 }
 254
 255 body[fullbleed] {
 256   margin: 0;
 257   height: 100vh;
 258 }
 259
 260 /*******************************
 261             Other
 262 *******************************/
 263
 264 html /deep/ [segment], html /deep/ segment {
 265   display: block;
 266   position: relative;
 267   -webkit-box-sizing: border-box;
 268   -ms-box-sizing: border-box;
 269   box-sizing: border-box;
 270   margin: 1em 0.5em;
 271   padding: 1em;
 272   background-color: white;
 273   -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
 274   box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1);
 275   border-radius: 5px 5px 5px 5px;
 276 }
 277
 278 </style>