| 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 <!-- | 13 <!-- |
| 14 The `<iron-flex-layout>` component provides simple ways to use | 14 The `<iron-flex-layout>` component provides simple ways to use |
| 15 [CSS flexible box layout](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS
/Flexible_boxes), | 15 [CSS flexible box layout](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS
/Flexible_boxes), |
| 16 also known as flexbox. This component provides two different ways to use flexbox
: | 16 also known as flexbox. This component provides two different ways to use flexbox
: |
| 17 | 17 |
| 18 1. [Layout classes](https://github.com/PolymerElements/iron-flex-layout/tree/mas
ter/iron-flex-layout-classes.html). | 18 1. [Layout classes](https://github.com/PolymerElements/iron-flex-layout/tree/mas
ter/iron-flex-layout-classes.html). |
| 19 The layout class stylesheet provides a simple set of class-based flexbox rules,
that | 19 The layout class stylesheet provides a simple set of class-based flexbox rules,
that |
| 20 let you specify layout properties directly in markup. You must include this file | 20 let you specify layout properties directly in markup. You must include this file |
| 21 in every element that needs to use them. | 21 in every element that needs to use them. |
| 22 | 22 |
| 23 Sample use: | 23 Sample use: |
| 24 | 24 |
| 25 <link rel="import" href="../iron-flex-layout/iron-flex-layout-classes.html"> | 25 <link rel="import" href="../iron-flex-layout/iron-flex-layout-classes.html
"> |
| 26 <style is="custom-style" include="iron-flex iron-flex-alignment"> | 26 <style is="custom-style" include="iron-flex iron-flex-alignment"></style> |
| 27 | 27 |
| 28 <div class="layout horizontal layout-start"> | 28 <div class="layout horizontal layout-start"> |
| 29 <div>cross axis start alignment</div> | 29 <div>cross axis start alignment</div> |
| 30 </div> | 30 </div> |
| 31 | 31 |
| 32 2. [Custom CSS mixins](https://github.com/PolymerElements/iron-flex-layout/blob/
master/iron-flex-layout.html). | 32 2. [Custom CSS mixins](https://github.com/PolymerElements/iron-flex-layout/blob/
master/iron-flex-layout.html). |
| 33 The mixin stylesheet includes custom CSS mixins that can be applied inside a CSS
rule using the `@apply` function. | 33 The mixin stylesheet includes custom CSS mixins that can be applied inside a CSS
rule using the `@apply` function. |
| 34 | 34 |
| 35 Please note that the old [/deep/ layout classes](https://github.com/PolymerEleme
nts/iron-flex-layout/tree/master/classes) | 35 Please note that the old [/deep/ layout classes](https://github.com/PolymerEleme
nts/iron-flex-layout/tree/master/classes) |
| 36 are deprecated, and should not be used. To continue using layout properties | 36 are deprecated, and should not be used. To continue using layout properties |
| 37 directly in markup, please switch to using the new `dom-module`-based | 37 directly in markup, please switch to using the new `dom-module`-based |
| 38 [layout classes](https://github.com/PolymerElements/iron-flex-layout/tree/master
/iron-flex-layout-classes.html). | 38 [layout classes](https://github.com/PolymerElements/iron-flex-layout/tree/master
/iron-flex-layout-classes.html). |
| 39 Please note that the new version does not use `/deep/`, and therefore requires y
ou | 39 Please note that the new version does not use `/deep/`, and therefore requires y
ou |
| 40 to import the `dom-modules` in every element that needs to use them. | 40 to import the `dom-modules` in every element that needs to use them. |
| (...skipping 170 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 211 -webkit-align-items: center; | 211 -webkit-align-items: center; |
| 212 align-items: center; | 212 align-items: center; |
| 213 }; | 213 }; |
| 214 | 214 |
| 215 --layout-end: { | 215 --layout-end: { |
| 216 -ms-flex-align: end; | 216 -ms-flex-align: end; |
| 217 -webkit-align-items: flex-end; | 217 -webkit-align-items: flex-end; |
| 218 align-items: flex-end; | 218 align-items: flex-end; |
| 219 }; | 219 }; |
| 220 | 220 |
| 221 --layout-baseline: { |
| 222 -ms-flex-align: baseline; |
| 223 -webkit-align-items: baseline; |
| 224 align-items: baseline; |
| 225 }; |
| 226 |
| 221 /* alignment in main axis */ | 227 /* alignment in main axis */ |
| 222 | 228 |
| 223 --layout-start-justified: { | 229 --layout-start-justified: { |
| 224 -ms-flex-pack: start; | 230 -ms-flex-pack: start; |
| 225 -webkit-justify-content: flex-start; | 231 -webkit-justify-content: flex-start; |
| 226 justify-content: flex-start; | 232 justify-content: flex-start; |
| 227 }; | 233 }; |
| 228 | 234 |
| 229 --layout-center-justified: { | 235 --layout-center-justified: { |
| 230 -ms-flex-pack: center; | 236 -ms-flex-pack: center; |
| (...skipping 43 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 274 -webkit-align-self: flex-end; | 280 -webkit-align-self: flex-end; |
| 275 align-self: flex-end; | 281 align-self: flex-end; |
| 276 }; | 282 }; |
| 277 | 283 |
| 278 --layout-self-stretch: { | 284 --layout-self-stretch: { |
| 279 -ms-align-self: stretch; | 285 -ms-align-self: stretch; |
| 280 -webkit-align-self: stretch; | 286 -webkit-align-self: stretch; |
| 281 align-self: stretch; | 287 align-self: stretch; |
| 282 }; | 288 }; |
| 283 | 289 |
| 290 --layout-self-baseline: { |
| 291 -ms-align-self: baseline; |
| 292 -webkit-align-self: baseline; |
| 293 align-self: baseline; |
| 294 }; |
| 295 |
| 296 /* multi-line alignment in main axis */ |
| 297 |
| 298 --layout-start-aligned: { |
| 299 -ms-flex-line-pack: start; /* IE10 */ |
| 300 -ms-align-content: flex-start; |
| 301 -webkit-align-content: flex-start; |
| 302 align-content: flex-start; |
| 303 }; |
| 304 |
| 305 --layout-end-aligned: { |
| 306 -ms-flex-line-pack: end; /* IE10 */ |
| 307 -ms-align-content: flex-end; |
| 308 -webkit-align-content: flex-end; |
| 309 align-content: flex-end; |
| 310 }; |
| 311 |
| 312 --layout-center-aligned: { |
| 313 -ms-flex-line-pack: center; /* IE10 */ |
| 314 -ms-align-content: center; |
| 315 -webkit-align-content: center; |
| 316 align-content: center; |
| 317 }; |
| 318 |
| 319 --layout-between-aligned: { |
| 320 -ms-flex-line-pack: justify; /* IE10 */ |
| 321 -ms-align-content: space-between; |
| 322 -webkit-align-content: space-between; |
| 323 align-content: space-between; |
| 324 }; |
| 325 |
| 326 --layout-around-aligned: { |
| 327 -ms-flex-line-pack: distribute; /* IE10 */ |
| 328 -ms-align-content: space-around; |
| 329 -webkit-align-content: space-around; |
| 330 align-content: space-around; |
| 331 }; |
| 332 |
| 284 /******************************* | 333 /******************************* |
| 285 Other Layout | 334 Other Layout |
| 286 *******************************/ | 335 *******************************/ |
| 287 | 336 |
| 288 --layout-block: { | 337 --layout-block: { |
| 289 display: block; | 338 display: block; |
| 290 }; | 339 }; |
| 291 | 340 |
| 292 --layout-invisible: { | 341 --layout-invisible: { |
| 293 visibility: hidden !important; | 342 visibility: hidden !important; |
| (...skipping 47 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
| 341 --layout-fixed-left: { | 390 --layout-fixed-left: { |
| 342 position: fixed; | 391 position: fixed; |
| 343 top: 0; | 392 top: 0; |
| 344 bottom: 0; | 393 bottom: 0; |
| 345 left: 0; | 394 left: 0; |
| 346 }; | 395 }; |
| 347 | 396 |
| 348 } | 397 } |
| 349 | 398 |
| 350 </style> | 399 </style> |
| OLD | NEW |