bower_components/paper-material/paper-material.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">
<link rel="import" href="../paper-styles/shadow.html">
<!--
Material design: [Cards](https://www.google.com/design/spec/components/cards.html)
`paper-material` is a container that renders two shadows on top of each other to
create the effect of a lifted piece of paper.
Example:
    <paper-material elevation="1">
      ... content ...
    </paper-material>
@group Paper Elements
@demo demo/index.html
-->
<dom-module id="paper-material">
  <template>
    <style>
      :host {
        display: block;
        position: relative;
      }
      :host([animated]) {
        @apply(--shadow-transition);
      }
      :host([elevation="1"]) {
        @apply(--shadow-elevation-2dp);
      }
      :host([elevation="2"]) {
        @apply(--shadow-elevation-4dp);
      }
      :host([elevation="3"]) {
        @apply(--shadow-elevation-6dp);
      }
      :host([elevation="4"]) {
        @apply(--shadow-elevation-8dp);
      }
      :host([elevation="5"]) {
        @apply(--shadow-elevation-16dp);
      }
    </style>
    <content></content>
  </template>
</dom-module>
<script>
  Polymer({
    is: 'paper-material',
    properties: {
      /**
       * The z-depth of this element, from 0-5. Setting to 0 will remove the
       * shadow, and each increasing number greater than 0 will be "deeper"
       * than the last.
       *
       * @attribute elevation
       * @type number
       * @default 1
       */
      elevation: {
        type: Number,
        reflectToAttribute: true,
        value: 1
      },
      /**
       * Set this to true to animate the shadow when setting a new
       * `elevation` value.
       *
       * @attribute animated
       * @type boolean
       * @default false
       */
      animated: {
        type: Boolean,
        reflectToAttribute: true,
        value: false
      }
    }
  });
</script>