| <!-- |
| @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 |
| --> |
| |
| <!-- |
| A set of layout classes that let you specify layout properties directly in markup. |
| You must include this file in every element that needs to use them. |
| |
| Sample use: |
| |
| <link rel="import" href="../iron-flex-layout/iron-flex-layout-classes.html"> |
| <style is="custom-style" include="iron-flex iron-flex-alignment"> |
| |
| <div class="layout horizontal layout-start"> |
| <div>cross axis start alignment</div> |
| </div> |
| |
| The following imports are available: |
| - iron-flex |
| - iron-flex-reverse |
| - iron-flex-alignment |
| - iron-flex-factors |
| - iron-positioning |
| --> |
| |
| <link rel="import" href="../polymer/polymer.html"> |
| |
| <!-- Most common used flex styles--> |
| <dom-module id="iron-flex"> |
| <template> |
| <style> |
| .layout.horizontal, |
| .layout.vertical { |
| display: -ms-flexbox; |
| display: -webkit-flex; |
| display: flex; |
| } |
| |
| .layout.inline { |
| display: -ms-inline-flexbox; |
| display: -webkit-inline-flex; |
| display: inline-flex; |
| } |
| |
| .layout.horizontal { |
| -ms-flex-direction: row; |
| -webkit-flex-direction: row; |
| flex-direction: row; |
| } |
| |
| .layout.vertical { |
| -ms-flex-direction: column; |
| -webkit-flex-direction: column; |
| flex-direction: column; |
| } |
| |
| .layout.wrap { |
| -ms-flex-wrap: wrap; |
| -webkit-flex-wrap: wrap; |
| flex-wrap: wrap; |
| } |
| |
| .layout.center, |
| .layout.center-center { |
| -ms-flex-align: center; |
| -webkit-align-items: center; |
| align-items: center; |
| } |
| |
| .layout.center-justified, |
| .layout.center-center { |
| -ms-flex-pack: center; |
| -webkit-justify-content: center; |
| justify-content: center; |
| } |
| |
| .flex { |
| -ms-flex: 1 1 0.000000001px; |
| -webkit-flex: 1; |
| flex: 1; |
| -webkit-flex-basis: 0.000000001px; |
| flex-basis: 0.000000001px; |
| } |
| |
| .flex-auto { |
| -ms-flex: 1 1 auto; |
| -webkit-flex: 1 1 auto; |
| flex: 1 1 auto; |
| } |
| |
| .flex-none { |
| -ms-flex: none; |
| -webkit-flex: none; |
| flex: none; |
| } |
| </style> |
| </template> |
| </dom-module> |
| |
| <!-- Basic flexbox reverse styles --> |
| <dom-module id="iron-flex-reverse"> |
| <template> |
| <style> |
| .layout.horizontal-reverse, |
| .layout.vertical-reverse { |
| display: -ms-flexbox; |
| display: -webkit-flex; |
| display: flex; |
| } |
| |
| .layout.horizontal-reverse { |
| -ms-flex-direction: row-reverse; |
| -webkit-flex-direction: row-reverse; |
| flex-direction: row-reverse; |
| } |
| |
| .layout.vertical-reverse { |
| -ms-flex-direction: column-reverse; |
| -webkit-flex-direction: column-reverse; |
| flex-direction: column-reverse; |
| } |
| |
| .layout.wrap-reverse { |
| -ms-flex-wrap: wrap-reverse; |
| -webkit-flex-wrap: wrap-reverse; |
| flex-wrap: wrap-reverse; |
| } |
| </style> |
| </template> |
| </dom-module> |
| |
| <!-- Flexbox alignment --> |
| <dom-module id="iron-flex-alignment"> |
| <template> |
| <style> |
| /** |
| * Alignment in cross axis. |
| */ |
| .layout.start { |
| -ms-flex-align: start; |
| -webkit-align-items: flex-start; |
| align-items: flex-start; |
| } |
| |
| .layout.center, |
| .layout.center-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; |
| } |
| |
| /** |
| * Alignment in main axis. |
| */ |
| .layout.start-justified { |
| -ms-flex-pack: start; |
| -webkit-justify-content: flex-start; |
| justify-content: flex-start; |
| } |
| |
| .layout.center-justified, |
| .layout.center-center { |
| -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; |
| } |
| |
| /** |
| * Self alignment. |
| */ |
| .self-start { |
| -ms-align-self: flex-start; |
| -webkit-align-self: flex-start; |
| align-self: flex-start; |
| } |
| |
| .self-center { |
| -ms-align-self: center; |
| -webkit-align-self: center; |
| align-self: center; |
| } |
| |
| .self-end { |
| -ms-align-self: flex-end; |
| -webkit-align-self: flex-end; |
| align-self: flex-end; |
| } |
| |
| .self-stretch { |
| -ms-align-self: stretch; |
| -webkit-align-self: stretch; |
| align-self: stretch; |
| } |
| </style> |
| </template> |
| </dom-module> |
| |
| <dom-module id="iron-flex-factors"> |
| <template> |
| <style> |
| .flex, |
| .flex-1 { |
| -ms-flex: 1 1 0.000000001px; |
| -webkit-flex: 1; |
| flex: 1; |
| -webkit-flex-basis: 0.000000001px; |
| flex-basis: 0.000000001px; |
| } |
| |
| .flex-2 { |
| -ms-flex: 2; |
| -webkit-flex: 2; |
| flex: 2; |
| } |
| |
| .flex-3 { |
| -ms-flex: 3; |
| -webkit-flex: 3; |
| flex: 3; |
| } |
| |
| .flex-4 { |
| -ms-flex: 4; |
| -webkit-flex: 4; |
| flex: 4; |
| } |
| |
| .flex-5 { |
| -ms-flex: 5; |
| -webkit-flex: 5; |
| flex: 5; |
| } |
| |
| .flex-6 { |
| -ms-flex: 6; |
| -webkit-flex: 6; |
| flex: 6; |
| } |
| |
| .flex-7 { |
| -ms-flex: 7; |
| -webkit-flex: 7; |
| flex: 7; |
| } |
| |
| .flex-8 { |
| -ms-flex: 8; |
| -webkit-flex: 8; |
| flex: 8; |
| } |
| |
| .flex-9 { |
| -ms-flex: 9; |
| -webkit-flex: 9; |
| flex: 9; |
| } |
| |
| .flex-10 { |
| -ms-flex: 10; |
| -webkit-flex: 10; |
| flex: 10; |
| } |
| |
| .flex-11 { |
| -ms-flex: 11; |
| -webkit-flex: 11; |
| flex: 11; |
| } |
| |
| .flex-12 { |
| -ms-flex: 12; |
| -webkit-flex: 12; |
| flex: 12; |
| } |
| </style> |
| </template> |
| </dom-module> |
| |
| <!-- Non-flexbox positioning helper styles --> |
| <dom-module id="iron-positioning"> |
| <template> |
| <style> |
| .block { |
| display: block; |
| } |
| |
| /* IE 10 support for HTML5 hidden attr */ |
| [hidden] { |
| display: none !important; |
| } |
| |
| .invisible { |
| visibility: hidden !important; |
| } |
| |
| .relative { |
| position: relative; |
| } |
| |
| .fit { |
| position: absolute; |
| top: 0; |
| right: 0; |
| bottom: 0; |
| left: 0; |
| } |
| |
| body.fullbleed { |
| margin: 0; |
| height: 100vh; |
| } |
| |
| .scroll { |
| -webkit-overflow-scrolling: touch; |
| overflow: auto; |
| } |
| |
| /* fixed position */ |
| .fixed-bottom, |
| .fixed-left, |
| .fixed-right, |
| .fixed-top { |
| position: fixed; |
| } |
| |
| .fixed-top { |
| top: 0; |
| left: 0; |
| right: 0; |
| } |
| |
| .fixed-right { |
| top: 0; |
| right: 0; |
| bottom: 0; |
| } |
| |
| .fixed-bottom { |
| right: 0; |
| bottom: 0; |
| left: 0; |
| } |
| |
| .fixed-left { |
| top: 0; |
| bottom: 0; |
| left: 0; |
| } |
| </style> |
| </template> |
| </dom-module> |