1<!--
2@license
3Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
4This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
5The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
6The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
7Code distributed by Google as part of the polymer project is also
8subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
9-->
10
11<link rel="import" href="../polymer/polymer.html">
12<link rel="import" href="../paper-styles/shadow.html">
13<link rel="import" href="paper-material-shared-styles.html">
14
15<!--
16Material design: [Cards](https://www.google.com/design/spec/components/cards.html)
17
18`paper-material` is a container that renders two shadows on top of each other to
19create the effect of a lifted piece of paper.
20
21Example:
22
23    <paper-material elevation="1">
24      ... content ...
25    </paper-material>
26
27@group Paper Elements
28@demo demo/index.html
29-->
30
31<dom-module id="paper-material">
32  <template>
33    <style include="paper-material-shared-styles"></style>
34    <style>
35      :host([animated]) {
36        @apply(--shadow-transition);
37      }
38      :host {
39        @apply(--paper-material);
40      }
41    </style>
42
43    <content></content>
44  </template>
45</dom-module>
46<script>
47  Polymer({
48    is: 'paper-material',
49
50    properties: {
51      /**
52       * The z-depth of this element, from 0-5. Setting to 0 will remove the
53       * shadow, and each increasing number greater than 0 will be "deeper"
54       * than the last.
55       *
56       * @attribute elevation
57       * @type number
58       * @default 1
59       */
60      elevation: {
61        type: Number,
62        reflectToAttribute: true,
63        value: 1
64      },
65
66      /**
67       * Set this to true to animate the shadow when setting a new
68       * `elevation` value.
69       *
70       * @attribute animated
71       * @type boolean
72       * @default false
73       */
74      animated: {
75        type: Boolean,
76        reflectToAttribute: true,
77        value: false
78      }
79    }
80  });
81</script>
82