summaryrefslogtreecommitdiff
path: root/systrace/catapult/third_party/polymer/components/iron-flex-layout/iron-flex-layout.html
diff options
context:
space:
mode:
Diffstat (limited to 'systrace/catapult/third_party/polymer/components/iron-flex-layout/iron-flex-layout.html')
-rw-r--r--systrace/catapult/third_party/polymer/components/iron-flex-layout/iron-flex-layout.html418
1 files changed, 0 insertions, 418 deletions
diff --git a/systrace/catapult/third_party/polymer/components/iron-flex-layout/iron-flex-layout.html b/systrace/catapult/third_party/polymer/components/iron-flex-layout/iron-flex-layout.html
deleted file mode 100644
index a69f46a..0000000
--- a/systrace/catapult/third_party/polymer/components/iron-flex-layout/iron-flex-layout.html
+++ /dev/null
@@ -1,418 +0,0 @@
-<!--
-@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-06-11 08:40:54 +0000