| OLD | NEW |
| 1 <!-- | 1 <!-- |
| 2 @license | 2 @license |
| 3 Copyright (c) 2015 The Polymer Project Authors. All rights reserved. | 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.g
ithub.io/LICENSE.txt | 4 This code may only be used under the BSD style license found at http://polymer.g
ithub.io/LICENSE.txt |
| 5 The complete set of authors may be found at http://polymer.github.io/AUTHORS.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/CONTRI
BUTORS.txt | 6 The complete set of contributors may be found at http://polymer.github.io/CONTRI
BUTORS.txt |
| 7 Code distributed by Google as part of the polymer project is also | 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/PATEN
TS.txt | 8 subject to an additional IP rights grant found at http://polymer.github.io/PATEN
TS.txt |
| 9 --> | 9 --> |
| 10 | 10 |
| 11 <link rel="import" href="../polymer/polymer.html"> | 11 <link rel="import" href="../polymer/polymer.html"> |
| 12 | 12 |
| 13 <!-- |
| 14 The `<iron-flex-layout>` component provides simple ways to use [CSS flexible box
layout](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes),
also known as flexbox. This component provides two different ways to use flexbo
x: |
| 15 |
| 16 1. [Layout classes](https://github.com/PolymerElements/iron-flex-layout/tree/mas
ter/classes). The layout class stylesheet provides a simple set of class-based f
lexbox rules. Layout classes let you specify layout properties directly in marku
p. |
| 17 |
| 18 2. [Custom CSS mixins](https://github.com/PolymerElements/iron-flex-layout/blob/
master/iron-flex-layout.html). The mixin stylesheet includes custom CSS mixins t
hat can be applied inside a CSS rule using the `@apply` function. |
| 19 |
| 20 A complete [guide](https://elements.polymer-project.org/guides/flex-layout) to `
<iron-flex-layout>` is available. |
| 21 |
| 22 @group Iron Elements |
| 23 @pseudoElement iron-flex-layout |
| 24 @demo demo/index.html |
| 25 --> |
| 26 |
| 27 <style> |
| 28 /* IE 10 support for HTML5 hidden attr */ |
| 29 [hidden] { |
| 30 display: none !important; |
| 31 } |
| 32 </style> |
| 33 |
| 13 <style is="custom-style"> | 34 <style is="custom-style"> |
| 14 | |
| 15 :root { | 35 :root { |
| 16 | 36 |
| 17 --layout: { | 37 --layout: { |
| 18 display: -ms-flexbox; | 38 display: -ms-flexbox; |
| 19 display: -webkit-flex; | 39 display: -webkit-flex; |
| 20 display: flex; | 40 display: flex; |
| 21 }; | 41 }; |
| 22 | 42 |
| 23 --layout-inline: { | 43 --layout-inline: { |
| 24 display: -ms-inline-flexbox; | 44 display: -ms-inline-flexbox; |
| 25 display: -webkit-inline-flex; | 45 display: -webkit-inline-flex; |
| 26 display: inline-flex; | 46 display: inline-flex; |
| 27 }; | 47 }; |
| 28 | 48 |
| 29 --layout-horizontal: { | 49 --layout-horizontal: { |
| 30 /* @apply(--layout); */ | 50 @apply(--layout); |
| 31 display: -ms-flexbox; | |
| 32 display: -webkit-flex; | |
| 33 display: flex; | |
| 34 | 51 |
| 35 -ms-flex-direction: row; | 52 -ms-flex-direction: row; |
| 36 -webkit-flex-direction: row; | 53 -webkit-flex-direction: row; |
| 37 flex-direction: row; | 54 flex-direction: row; |
| 38 }; | 55 }; |
| 39 | 56 |
| 40 --layout-horizontal-reverse: { | 57 --layout-horizontal-reverse: { |
| 58 @apply(--layout); |
| 59 |
| 41 -ms-flex-direction: row-reverse; | 60 -ms-flex-direction: row-reverse; |
| 42 -webkit-flex-direction: row-reverse; | 61 -webkit-flex-direction: row-reverse; |
| 43 flex-direction: row-reverse; | 62 flex-direction: row-reverse; |
| 44 }; | 63 }; |
| 45 | 64 |
| 46 --layout-vertical: { | 65 --layout-vertical: { |
| 47 /* @apply(--layout); */ | 66 @apply(--layout); |
| 48 display: -ms-flexbox; | |
| 49 display: -webkit-flex; | |
| 50 display: flex; | |
| 51 | 67 |
| 52 -ms-flex-direction: column; | 68 -ms-flex-direction: column; |
| 53 -webkit-flex-direction: column; | 69 -webkit-flex-direction: column; |
| 54 flex-direction: column; | 70 flex-direction: column; |
| 55 }; | 71 }; |
| 56 | 72 |
| 57 --layout-vertical-reverse: { | 73 --layout-vertical-reverse: { |
| 74 @apply(--layout); |
| 75 |
| 58 -ms-flex-direction: column-reverse; | 76 -ms-flex-direction: column-reverse; |
| 59 -webkit-flex-direction: column-reverse; | 77 -webkit-flex-direction: column-reverse; |
| 60 flex-direction: column-reverse; | 78 flex-direction: column-reverse; |
| 61 }; | 79 }; |
| 62 | 80 |
| 63 --layout-wrap: { | 81 --layout-wrap: { |
| 64 -ms-flex-wrap: wrap; | 82 -ms-flex-wrap: wrap; |
| 65 -webkit-flex-wrap: wrap; | 83 -webkit-flex-wrap: wrap; |
| 66 flex-wrap: wrap; | 84 flex-wrap: wrap; |
| 67 }; | 85 }; |
| (...skipping 136 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 204 justify-content: space-around; | 222 justify-content: space-around; |
| 205 }; | 223 }; |
| 206 | 224 |
| 207 --layout-justified: { | 225 --layout-justified: { |
| 208 -ms-flex-pack: justify; | 226 -ms-flex-pack: justify; |
| 209 -webkit-justify-content: space-between; | 227 -webkit-justify-content: space-between; |
| 210 justify-content: space-between; | 228 justify-content: space-between; |
| 211 }; | 229 }; |
| 212 | 230 |
| 213 --layout-center-center: { | 231 --layout-center-center: { |
| 214 /* @apply(--layout-center --layout-center-justified); */ | 232 @apply(--layout-center); |
| 215 -ms-flex-align: center; | 233 @apply(--layout-center-justified); |
| 216 -webkit-align-items: center; | |
| 217 align-items: center; | |
| 218 -ms-flex-pack: center; | |
| 219 -webkit-justify-content: center; | |
| 220 justify-content: center; | |
| 221 }; | 234 }; |
| 222 | 235 |
| 223 /* self alignment */ | 236 /* self alignment */ |
| 224 | 237 |
| 225 --layout-self-start: { | 238 --layout-self-start: { |
| 226 -ms-align-self: flex-start; | 239 -ms-align-self: flex-start; |
| 227 -webkit-align-self: flex-start; | 240 -webkit-align-self: flex-start; |
| 228 align-self: flex-start; | 241 align-self: flex-start; |
| 229 }; | 242 }; |
| 230 | 243 |
| (...skipping 37 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 268 right: 0; | 281 right: 0; |
| 269 bottom: 0; | 282 bottom: 0; |
| 270 left: 0; | 283 left: 0; |
| 271 }; | 284 }; |
| 272 | 285 |
| 273 --layout-scroll: { | 286 --layout-scroll: { |
| 274 -webkit-overflow-scrolling: touch; | 287 -webkit-overflow-scrolling: touch; |
| 275 overflow: auto; | 288 overflow: auto; |
| 276 }; | 289 }; |
| 277 | 290 |
| 291 --layout-fullbleed: { |
| 292 margin: 0; |
| 293 height: 100vh; |
| 294 }; |
| 295 |
| 278 /* fixed position */ | 296 /* fixed position */ |
| 279 | 297 |
| 280 --layout-fixed-bottom:, | |
| 281 --layout-fixed-left:, | |
| 282 --layout-fixed-right:, | |
| 283 --layout-fixed-top: { | 298 --layout-fixed-top: { |
| 284 position: fixed; | 299 position: fixed; |
| 285 }; | |
| 286 | |
| 287 --layout-fixed-top: { | |
| 288 top: 0; | 300 top: 0; |
| 289 left: 0; | 301 left: 0; |
| 290 right: 0; | 302 right: 0; |
| 291 }; | 303 }; |
| 292 | 304 |
| 293 --layout-fixed-right: { | 305 --layout-fixed-right: { |
| 306 position: fixed; |
| 294 top: 0; | 307 top: 0; |
| 295 right: 0; | 308 right: 0; |
| 296 bottom: 0; | 309 bottom: 0; |
| 297 }; | 310 }; |
| 298 | 311 |
| 299 --layout-fixed-bottom: { | 312 --layout-fixed-bottom: { |
| 313 position: fixed; |
| 300 right: 0; | 314 right: 0; |
| 301 bottom: 0; | 315 bottom: 0; |
| 302 left: 0; | 316 left: 0; |
| 303 }; | 317 }; |
| 304 | 318 |
| 305 --layout-fixed-left: { | 319 --layout-fixed-left: { |
| 320 position: fixed; |
| 306 top: 0; | 321 top: 0; |
| 307 bottom: 0; | 322 bottom: 0; |
| 308 left: 0; | 323 left: 0; |
| 309 }; | 324 }; |
| 310 | 325 |
| 311 } | 326 } |
| 312 | 327 |
| 313 </style> | 328 </style> |
| OLD | NEW |