aboutsummaryrefslogtreecommitdiff
path: root/catapult/third_party/polymer/components/iron-flex-layout/iron-flex-layout.html
diff options
context:
space:
mode:
Diffstat (limited to 'catapult/third_party/polymer/components/iron-flex-layout/iron-flex-layout.html')
-rw-r--r--catapult/third_party/polymer/components/iron-flex-layout/iron-flex-layout.html418
1 files changed, 418 insertions, 0 deletions
diff --git a/catapult/third_party/polymer/components/iron-flex-layout/iron-flex-layout.html b/catapult/third_party/polymer/components/iron-flex-layout/iron-flex-layout.html
new file mode 100644
index 00000000..a69f46a3
--- /dev/null
+++ b/catapult/third_party/polymer/components/iron-flex-layout/iron-flex-layout.html
@@ -0,0 +1,418 @@
+<!--
+@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
+-->
+
+<link rel="import" href="../polymer/polymer.html">
+
+<!--
+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 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>
+ ```
+
+ ```html
+ <link rel="import" href="iron-flex-layout-classes.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>
+ ```
+
+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.
+
+A complete [guide](https://elements.polymer-project.org/guides/flex-layout) to `<iron-flex-layout>` is available.
+
+@group Iron Elements
+@pseudoElement iron-flex-layout
+@demo demo/index.html
+-->
+
+<style>
+ /* IE 10 support for HTML5 hidden attr */
+ [hidden] {
+ display: none !important;
+ }
+</style>
+
+<style is="custom-style">
+ :root {
+
+ --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-no-wrap: {
+ -ms-flex-wrap: nowrap;
+ -webkit-flex-wrap: nowrap;
+ flex-wrap: nowrap;
+ };
+
+ --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>
generated by cgit v1.2.3 (git 2.25.1) at 2024-05-24 04:05:20 +0000