87 lines
2.3 KiB
HTML
87 lines
2.3 KiB
HTML
<!--
|
|
Copyright (c) 2014 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
|
|
-->
|
|
|
|
<!--
|
|
|
|
`paper-shadow` is a container that renders two shadows on top of each other to
|
|
create the effect of a lifted piece of paper.
|
|
|
|
Example:
|
|
|
|
<paper-shadow z="1">
|
|
... card content ...
|
|
</paper-shadow>
|
|
|
|
@group Paper Elements
|
|
@class paper-shadow
|
|
-->
|
|
|
|
<link href="../polymer/polymer.html" rel="import">
|
|
|
|
<link href="paper-shadow.css" rel="stylesheet" shim-shadowdom>
|
|
|
|
<polymer-element name="paper-shadow">
|
|
|
|
<template>
|
|
|
|
<div id="shadow-bottom" fit animated?="[[animated]]" class="paper-shadow-bottom-z-[[z]]"></div>
|
|
<div id="shadow-top" fit animated?="[[animated]]" class="paper-shadow-top-z-[[z]]"></div>
|
|
|
|
<content></content>
|
|
|
|
</template>
|
|
|
|
<script>
|
|
Polymer({
|
|
|
|
publish: {
|
|
|
|
/**
|
|
* The z-depth of this shadow, from 0-5. Setting this property
|
|
* after element creation has no effect. Use `setZ()` instead.
|
|
*
|
|
* @attribute z
|
|
* @type number
|
|
* @default 1
|
|
*/
|
|
z: 1,
|
|
|
|
/**
|
|
* Set this to true to animate the shadow when setting a new
|
|
* `z` value.
|
|
*
|
|
* @attribute animated
|
|
* @type boolean
|
|
* @default false
|
|
*/
|
|
animated: false
|
|
|
|
},
|
|
|
|
/**
|
|
* Set the z-depth of the shadow. This should be used after element
|
|
* creation instead of setting the z property directly.
|
|
*
|
|
* @method setZ
|
|
* @param {Number} newZ
|
|
*/
|
|
setZ: function(newZ) {
|
|
if (this.z !== newZ) {
|
|
this.$['shadow-bottom'].classList.remove('paper-shadow-bottom-z-' + this.z);
|
|
this.$['shadow-bottom'].classList.add('paper-shadow-bottom-z-' + newZ);
|
|
this.$['shadow-top'].classList.remove('paper-shadow-top-z-' + this.z);
|
|
this.$['shadow-top'].classList.add('paper-shadow-top-z-' + newZ);
|
|
this.z = newZ;
|
|
}
|
|
}
|
|
|
|
});
|
|
</script>
|
|
</polymer-element>
|