<!-- @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>