| Index: third_party/polymer/v1_0/components-chromium/iron-flex-layout/iron-flex-layout-classes.html
|
| diff --git a/third_party/polymer/v1_0/components-chromium/iron-flex-layout/iron-flex-layout-classes.html b/third_party/polymer/v1_0/components-chromium/iron-flex-layout/iron-flex-layout-classes.html
|
| new file mode 100644
|
| index 0000000000000000000000000000000000000000..2b8cd1a9b949878e27b2b74a08c48c9dc8f1760f
|
| --- /dev/null
|
| +++ b/third_party/polymer/v1_0/components-chromium/iron-flex-layout/iron-flex-layout-classes.html
|
| @@ -0,0 +1,381 @@
|
| +<!--
|
| +@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>
|
|
|