jellyfin-web/dashboard-ui/bower_components/iron-flex-layout/demo/x-app.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
The complete set of authors may be found at http://polymer.github.io/AUTHORS
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS
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
-->

<link rel="import" href="../iron-flex-layout.html">

<dom-module id="x-app">

  <style>

    :host {
      @apply(--layout-horizontal);
      @apply(--paper-font-body2);
    }

    [nav] {
      @apply(--layout-vertical);

      width: 200px;
      background-color: var(--paper-grey-300);
    }

    [item] {
      @apply(--layout-horizontal);
      @apply(--layout-center);

      height: 60px;
      padding-left: 16px;
      border-bottom: 1px solid var(--paper-grey-400);
    }

    [main] {
      @apply(--layout-flex);
      @apply(--layout-vertical);
    }

    [header] {
      @apply(--layout-horizontal);
      @apply(--layout-center);

      @apply(--paper-font-subhead);

      height: 60px;
      background-color: var(--google-blue-700);
      padding: 0 16px;
      color: white;
    }

    [tool] {
      @apply(--layout-inline);
    }

    [content] {
      @apply(--layout-flex);

      overflow: auto;
      padding: 0 10px;
    }

    [card] {
      @apply(--layout-vertical);
      @apply(--layout-center-center);

      @apply(--shadow-elevation-2dp);

      height: 300px;
      max-width: 800px;
      margin: 16px auto;
      font-weight: bold;
      background-color: var(--paper-grey-200);
    }

  </style>

  <template>

    <div nav>
      <div content>
        <div item>ITEM 1</div>
        <div item>ITEM 2</div>
        <div item>ITEM 3</div>
        <div item>ITEM 4</div>
        <div item>ITEM 5</div>
      </div>
    </div>

    <div main>
      <div header>
        <div tool>Foo</div>
        <div class="flex"></div>
        <div tool>Bar</div>
      </div>
      <div content>
        <div card>CARD 1</div>
        <div card>CARD 2</div>
        <div card>CARD 3</div>
        <div card>CARD 4</div>
        <div card>CARD 5</div>
      </div>
    </div>

  </template>

</dom-module>
<script>

  Polymer({
    is: 'x-app'
  });

</script>