components/iron-flex-layout/iron-flex-layout.html

<!--
@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>