1<!--
2Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
3This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
4The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
5The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
6Code distributed by Google as part of the polymer project is also
7subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
8-->
9
10<!--
11
12`paper-shadow` is a container that renders two shadows on top of each other to
13create the effect of a lifted piece of paper.
14
15Example:
16
17    <paper-shadow z="1">
18      ... card content ...
19    </paper-shadow>
20
21@group Paper Elements
22@class paper-shadow
23-->
24
25<link href="../polymer/polymer.html" rel="import">
26
27<link href="paper-shadow.css" rel="stylesheet" shim-shadowdom>
28
29<polymer-element name="paper-shadow">
30
31<template>
32
33  <div id="shadow-bottom" fit animated?="[[animated]]" class="paper-shadow-bottom-z-[[z]]"></div>
34  <div id="shadow-top" fit animated?="[[animated]]" class="paper-shadow-top-z-[[z]]"></div>
35
36  <content></content>
37
38</template>
39
40<script>
41  Polymer({
42
43    publish: {
44
45      /**
46       * The z-depth of this shadow, from 0-5. Setting this property
47       * after element creation has no effect. Use `setZ()` instead.
48       *
49       * @attribute z
50       * @type number
51       * @default 1
52       */
53      z: 1,
54
55      /**
56       * Set this to true to animate the shadow when setting a new
57       * `z` value.
58       *
59       * @attribute animated
60       * @type boolean
61       * @default false
62       */
63      animated: false
64
65    },
66
67    /**
68     * Set the z-depth of the shadow. This should be used after element
69     * creation instead of setting the z property directly.
70     *
71     * @method setZ
72     * @param {Number} newZ
73     */
74    setZ: function(newZ) {
75      if (this.z !== newZ) {
76        this.$['shadow-bottom'].classList.remove('paper-shadow-bottom-z-' + this.z);
77        this.$['shadow-bottom'].classList.add('paper-shadow-bottom-z-' + newZ);
78        this.$['shadow-top'].classList.remove('paper-shadow-top-z-' + this.z);
79        this.$['shadow-top'].classList.add('paper-shadow-top-z-' + newZ);
80        this.z = newZ;
81      }
82    }
83
84  });
85</script>
86</polymer-element>
87