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 bottom: 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 bottom: 0; 299 left: 0; 300 } 301 302 </style> 303
