diff options
Diffstat (limited to 'catapult/third_party/polymer/components/paper-material/paper-material.html')
-rw-r--r-- | catapult/third_party/polymer/components/paper-material/paper-material.html | 81 |
1 files changed, 81 insertions, 0 deletions
diff --git a/catapult/third_party/polymer/components/paper-material/paper-material.html b/catapult/third_party/polymer/components/paper-material/paper-material.html new file mode 100644 index 00000000..29b34370 --- /dev/null +++ b/catapult/third_party/polymer/components/paper-material/paper-material.html @@ -0,0 +1,81 @@ +<!-- +@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"> +<link rel="import" href="paper-material-shared-styles.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 include="paper-material-shared-styles"></style> + <style> + :host([animated]) { + @apply(--shadow-transition); + } + :host { + @apply(--paper-material); + } + </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> |