components/paper-shadow/demo.html

<!doctype html>
<!--
Copyright 2013 The Polymer Authors. All rights reserved.
Use of this source code is governed by a BSD-style
license that can be found in the LICENSE file.
-->
<html>
<head>
  <title>paper-shadow</title>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
  <script src="../platform/platform.js"></script>
  <link href="paper-shadow.html" rel="import">
  <style>
    body {
      font-family: RobotoDraft, 'Helvetica Neue', Helvetica, Arial;
      transform: translateZ(0);
      -webkit-transform: translateZ(0);
      transform: translateZ(0);
      padding: 16px;
      user-select: none;
      -webkit-user-select: none;
    }

    section {
      display: flex;
      display: -webkit-flex;
      width: 80%;
      margin: 16px;
    }

    aside {
      flex: 1 1 auto;
      -webkit-flex: 1 1 auto;
      padding: 48px 16px;
      user-select: text;
      -webkit-user-select: text;
    }

    .card {
      background: white;
      width: 300px;
      height: 300px;
      position: relative;
      margin: 16px;
      border-radius: 2px;
    }

    .card-inner {
      position: absolute;
      left: 0;
      top: 0;
      right: 0;
      bottom: 0;
      border-radius: 2px;
    }

  </style>
</head>
<body unresolved>

  <paper-shadow></paper-shadow>

  <section>
    <div>
      <div class="card">
      </div>
    </div>
    <aside>
      z-depth = 0
    </aside>
  </section>

  <section>
    <!-- Example of using paper-shadow to add a shadow to an element -->
    <div>
      <div class="card">
        <paper-shadow z="1"></paper-shadow>
      </div>
    </div>
    <aside>
      z-depth = 1
    </aside>
  </section>

  <section>
    <!-- Example of using paper-shadow as part of a Polymer element -->
    <polymer-element name="x-card" attributes="z">
      <template>
        <style>
          :host {
            display: block;
          }
        </style>
        <paper-shadow z="{{z}}"></paper-shadow>
      </template>
      <script>
        Polymer('x-card', {
          publish: {
            z: {value: 1, reflect: true}
          }
        });
      </script>
    </polymer-element>
    <div>
      <x-card class="card" z="2"></x-card>
    </div>
    <aside>
      z-depth = 2
    </aside>
  </section>

  <section>
    <!-- Example of using paper-shadow by adding a class directly -->
    <div>
      <div class="card paper-shadow-top-z-3">
        <div class="card-inner paper-shadow-bottom-z-3">
        </div>
      </div>
    </div>
    <aside>
      z-depth = 3
    </aside>
  </section>

  <section>
    <div>
      <div class="card paper-shadow-top-z-4">
        <div class="card-inner paper-shadow-bottom-z-4">
        </div>
      </div>
    </div>
    <aside>
      z-depth = 4
    </aside>
  </section>

  <section>
    <div>
      <div class="card paper-shadow-top-z-5">
        <div class="card-inner paper-shadow-bottom-z-5">
        </div>
      </div>
    </div>
    <aside>
      z-depth = 5
    </aside>
  </section>

  <br>
  <br>
  <br>
  <br>

  <polymer-element name="x-shadow" attributes="z" on-tap="{{tapAction}}">
    <template>
      <style>
        :host,
        .paper-shadow-bottom {
          display: block;
          background: white;
          color: #ccc;
        }

        :host(.fab),
        :host(.fab) .paper-shadow-bottom {
          width: 48px;
          height: 48px;
          border-radius: 24px;
        }
      </style>
      <paper-shadow z="{{z}}" animated></paper-shadow>
    </template>
    <script>
      Polymer('x-shadow', {
        publish: {
          z: {value: 0, reflect: true}
        },
        up: true,
        zChanged: function() {
          this.fire('shadow-z-changed');
        },
        tapAction: function() {
          if (this.up) {
            if (this.z < 5) {
              this.z += 1;
            } else {
              this.z -= 1;
              this.up = false;
            }
          } else {
            if (this.z > 0) {
              this.z -= 1;
            } else {
              this.z += 1;
              this.up = true;
            }
          }
        }
      });
    </script>
  </polymer-element>

  <section>
    <div>
      <x-shadow id="card" z="0" class="card"></x-shadow>
    </div>
    <aside>
      Tap to lift/drop the card.
      <br>
      Current z-index = <span id="card-z">0</span>
    </aside>
    <script>
      document.addEventListener('polymer-ready', function() {
        var fab = document.getElementById('card');
        fab.addEventListener('shadow-z-changed', function() {
          document.getElementById('card-z').textContent = fab.z;
        });
      });
    </script>
  </section>

  <section>
    <div>
      <style>
        x-shadow.fab {
          margin: 48px 142px;
        }
      </style>
      <x-shadow id="fab" z="0" class="fab"></x-shadow>
    </div>
    <aside>
      Tap to lift/drop the button.
      <br>
      Current z-index = <span id="fab-z">0</span>
    </aside>
    <script>
      document.addEventListener('polymer-ready', function() {
        var fab = document.getElementById('fab');
        fab.addEventListener('shadow-z-changed', function() {
          document.getElementById('fab-z').textContent = fab.z;
        });
      });
    </script>
  </section>

</body>
</html>