| /** |
| @license |
| Copyright (c) 2015 The Polymer Project Authors. All rights reserved. |
| This code may only be used under the BSD style license found at |
| http://polymer.github.io/LICENSE.txt The complete set of authors may be found at |
| http://polymer.github.io/AUTHORS.txt The complete set of contributors may be |
| found at http://polymer.github.io/CONTRIBUTORS.txt Code distributed by Google as |
| part of the polymer project is also subject to an additional IP rights grant |
| found at http://polymer.github.io/PATENTS.txt |
| */ |
| import '../polymer/polymer-legacy.js'; |
| import {html} from '../polymer/lib/utils/html-tag.js'; |
| |
| /** |
| 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. Note that this is an old element, that was written |
| before all modern browsers had non-prefixed flex styles. As such, nowadays you |
| don't really need to use this element anymore, and can use CSS flex styles |
| directly in your code. |
| |
| This component provides two different ways to use flexbox: |
| |
| 1. [Layout |
| classes](https://github.com/PolymerElements/iron-flex-layout/tree/master/iron-flex-layout-classes.html). |
| The layout class stylesheet provides a simple set of class-based flexbox rules, |
| that let you specify layout properties directly in markup. You must include this |
| file in every element that needs to use them. |
| |
| Sample use: |
| |
| ``` |
| <custom-element-demo> |
| <template> |
| <script src="../webcomponentsjs/webcomponents-lite.js"></script> |
| <next-code-block></next-code-block> |
| </template> |
| </custom-element-demo> |
| ``` |
| |
| ```js |
| import {html} from '../polymer/lib/utils/html-tag.js'; |
| import '../iron-flex-layout/iron-flex-layout-classes.js'; |
| |
| const template = html` |
| <style is="custom-style" include="iron-flex iron-flex-alignment"></style> |
| <style> |
| .test { width: 100px; } |
| </style> |
| <div class="layout horizontal center-center"> |
| <div class="test">horizontal layout center alignment</div> |
| </div> |
| `; |
| document.body.appendChild(template.content); |
| ``` |
| |
| 2. [Custom CSS |
| mixins](https://github.com/PolymerElements/iron-flex-layout/blob/master/iron-flex-layout.html). |
| The mixin stylesheet includes custom CSS mixins that can be applied inside a CSS |
| rule using the `@apply` function. |
| |
| Please note that the old [/deep/ layout |
| classes](https://github.com/PolymerElements/iron-flex-layout/tree/master/classes) |
| are deprecated, and should not be used. To continue using layout properties |
| directly in markup, please switch to using the new `dom-module`-based |
| [layout |
| classes](https://github.com/PolymerElements/iron-flex-layout/tree/master/iron-flex-layout-classes.html). |
| Please note that the new version does not use `/deep/`, and therefore requires |
| you to import the `dom-modules` in every element that needs to use them. |
| |
| @group Iron Elements |
| @pseudoElement iron-flex-layout |
| @demo demo/index.html |
| */ |
| const template = html` |
| <custom-style> |
| <style is="custom-style"> |
| [hidden] { |
| display: none !important; |
| } |
| </style> |
| </custom-style> |
| <custom-style> |
| <style is="custom-style"> |
| html { |
| |
| --layout: { |
| display: -ms-flexbox; |
| display: -webkit-flex; |
| display: flex; |
| }; |
| |
| --layout-inline: { |
| display: -ms-inline-flexbox; |
| display: -webkit-inline-flex; |
| display: inline-flex; |
| }; |
| |
| --layout-horizontal: { |
| @apply --layout; |
| |
| -ms-flex-direction: row; |
| -webkit-flex-direction: row; |
| flex-direction: row; |
| }; |
| |
| --layout-horizontal-reverse: { |
| @apply --layout; |
| |
| -ms-flex-direction: row-reverse; |
| -webkit-flex-direction: row-reverse; |
| flex-direction: row-reverse; |
| }; |
| |
| --layout-vertical: { |
| @apply --layout; |
| |
| -ms-flex-direction: column; |
| -webkit-flex-direction: column; |
| flex-direction: column; |
| }; |
| |
| --layout-vertical-reverse: { |
| @apply --layout; |
| |
| -ms-flex-direction: column-reverse; |
| -webkit-flex-direction: column-reverse; |
| flex-direction: column-reverse; |
| }; |
| |
| --layout-wrap: { |
| -ms-flex-wrap: wrap; |
| -webkit-flex-wrap: wrap; |
| flex-wrap: wrap; |
| }; |
| |
| --layout-wrap-reverse: { |
| -ms-flex-wrap: wrap-reverse; |
| -webkit-flex-wrap: wrap-reverse; |
| flex-wrap: wrap-reverse; |
| }; |
| |
| --layout-flex-auto: { |
| -ms-flex: 1 1 auto; |
| -webkit-flex: 1 1 auto; |
| flex: 1 1 auto; |
| }; |
| |
| --layout-flex-none: { |
| -ms-flex: none; |
| -webkit-flex: none; |
| flex: none; |
| }; |
| |
| --layout-flex: { |
| -ms-flex: 1 1 0.000000001px; |
| -webkit-flex: 1; |
| flex: 1; |
| -webkit-flex-basis: 0.000000001px; |
| flex-basis: 0.000000001px; |
| }; |
| |
| --layout-flex-2: { |
| -ms-flex: 2; |
| -webkit-flex: 2; |
| flex: 2; |
| }; |
| |
| --layout-flex-3: { |
| -ms-flex: 3; |
| -webkit-flex: 3; |
| flex: 3; |
| }; |
| |
| --layout-flex-4: { |
| -ms-flex: 4; |
| -webkit-flex: 4; |
| flex: 4; |
| }; |
| |
| --layout-flex-5: { |
| -ms-flex: 5; |
| -webkit-flex: 5; |
| flex: 5; |
| }; |
| |
| --layout-flex-6: { |
| -ms-flex: 6; |
| -webkit-flex: 6; |
| flex: 6; |
| }; |
| |
| --layout-flex-7: { |
| -ms-flex: 7; |
| -webkit-flex: 7; |
| flex: 7; |
| }; |
| |
| --layout-flex-8: { |
| -ms-flex: 8; |
| -webkit-flex: 8; |
| flex: 8; |
| }; |
| |
| --layout-flex-9: { |
| -ms-flex: 9; |
| -webkit-flex: 9; |
| flex: 9; |
| }; |
| |
| --layout-flex-10: { |
| -ms-flex: 10; |
| -webkit-flex: 10; |
| flex: 10; |
| }; |
| |
| --layout-flex-11: { |
| -ms-flex: 11; |
| -webkit-flex: 11; |
| flex: 11; |
| }; |
| |
| --layout-flex-12: { |
| -ms-flex: 12; |
| -webkit-flex: 12; |
| flex: 12; |
| }; |
| |
| /* alignment in cross axis */ |
| |
| --layout-start: { |
| -ms-flex-align: start; |
| -webkit-align-items: flex-start; |
| align-items: flex-start; |
| }; |
| |
| --layout-center: { |
| -ms-flex-align: center; |
| -webkit-align-items: center; |
| align-items: center; |
| }; |
| |
| --layout-end: { |
| -ms-flex-align: end; |
| -webkit-align-items: flex-end; |
| align-items: flex-end; |
| }; |
| |
| --layout-baseline: { |
| -ms-flex-align: baseline; |
| -webkit-align-items: baseline; |
| align-items: baseline; |
| }; |
| |
| /* alignment in main axis */ |
| |
| --layout-start-justified: { |
| -ms-flex-pack: start; |
| -webkit-justify-content: flex-start; |
| justify-content: flex-start; |
| }; |
| |
| --layout-center-justified: { |
| -ms-flex-pack: center; |
| -webkit-justify-content: center; |
| justify-content: center; |
| }; |
| |
| --layout-end-justified: { |
| -ms-flex-pack: end; |
| -webkit-justify-content: flex-end; |
| justify-content: flex-end; |
| }; |
| |
| --layout-around-justified: { |
| -ms-flex-pack: distribute; |
| -webkit-justify-content: space-around; |
| justify-content: space-around; |
| }; |
| |
| --layout-justified: { |
| -ms-flex-pack: justify; |
| -webkit-justify-content: space-between; |
| justify-content: space-between; |
| }; |
| |
| --layout-center-center: { |
| @apply --layout-center; |
| @apply --layout-center-justified; |
| }; |
| |
| /* self alignment */ |
| |
| --layout-self-start: { |
| -ms-align-self: flex-start; |
| -webkit-align-self: flex-start; |
| align-self: flex-start; |
| }; |
| |
| --layout-self-center: { |
| -ms-align-self: center; |
| -webkit-align-self: center; |
| align-self: center; |
| }; |
| |
| --layout-self-end: { |
| -ms-align-self: flex-end; |
| -webkit-align-self: flex-end; |
| align-self: flex-end; |
| }; |
| |
| --layout-self-stretch: { |
| -ms-align-self: stretch; |
| -webkit-align-self: stretch; |
| align-self: stretch; |
| }; |
| |
| --layout-self-baseline: { |
| -ms-align-self: baseline; |
| -webkit-align-self: baseline; |
| align-self: baseline; |
| }; |
| |
| /* multi-line alignment in main axis */ |
| |
| --layout-start-aligned: { |
| -ms-flex-line-pack: start; /* IE10 */ |
| -ms-align-content: flex-start; |
| -webkit-align-content: flex-start; |
| align-content: flex-start; |
| }; |
| |
| --layout-end-aligned: { |
| -ms-flex-line-pack: end; /* IE10 */ |
| -ms-align-content: flex-end; |
| -webkit-align-content: flex-end; |
| align-content: flex-end; |
| }; |
| |
| --layout-center-aligned: { |
| -ms-flex-line-pack: center; /* IE10 */ |
| -ms-align-content: center; |
| -webkit-align-content: center; |
| align-content: center; |
| }; |
| |
| --layout-between-aligned: { |
| -ms-flex-line-pack: justify; /* IE10 */ |
| -ms-align-content: space-between; |
| -webkit-align-content: space-between; |
| align-content: space-between; |
| }; |
| |
| --layout-around-aligned: { |
| -ms-flex-line-pack: distribute; /* IE10 */ |
| -ms-align-content: space-around; |
| -webkit-align-content: space-around; |
| align-content: space-around; |
| }; |
| |
| /******************************* |
| Other Layout |
| *******************************/ |
| |
| --layout-block: { |
| display: block; |
| }; |
| |
| --layout-invisible: { |
| visibility: hidden !important; |
| }; |
| |
| --layout-relative: { |
| position: relative; |
| }; |
| |
| --layout-fit: { |
| position: absolute; |
| top: 0; |
| right: 0; |
| bottom: 0; |
| left: 0; |
| }; |
| |
| --layout-scroll: { |
| -webkit-overflow-scrolling: touch; |
| overflow: auto; |
| }; |
| |
| --layout-fullbleed: { |
| margin: 0; |
| height: 100vh; |
| }; |
| |
| /* fixed position */ |
| |
| --layout-fixed-top: { |
| position: fixed; |
| top: 0; |
| left: 0; |
| right: 0; |
| }; |
| |
| --layout-fixed-right: { |
| position: fixed; |
| top: 0; |
| right: 0; |
| bottom: 0; |
| }; |
| |
| --layout-fixed-bottom: { |
| position: fixed; |
| right: 0; |
| bottom: 0; |
| left: 0; |
| }; |
| |
| --layout-fixed-left: { |
| position: fixed; |
| top: 0; |
| bottom: 0; |
| left: 0; |
| }; |
| |
| } |
| </style> |
| </custom-style>`; |
| |
| template.setAttribute('style', 'display: none;'); |
| document.head.appendChild(template.content); |
| |
| var style = document.createElement('style'); |
| style.textContent = '[hidden] { display: none !important; }'; |
| document.head.appendChild(style); |