third_party/polymer/v1_0/components-chromium/paper-material/paper-material.html

   1 <!--
   2 @license
   3 Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
   4 This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
   5 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
   6 The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
   7 Code distributed by Google as part of the polymer project is also
   8 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
   9 --><html><head><link rel="import" href="../polymer/polymer.html">
  10 <link rel="import" href="../paper-styles/shadow.html">
  11
  12 <!--
  13
  14 `paper-material` is a container that renders two shadows on top of each other to
  15 create the effect of a lifted piece of paper.
  16
  17 Example:
  18
  19     <paper-material elevation="1">
  20       ... content ...
  21     </paper-material>
  22
  23 @group Paper Elements
  24 @class paper-material
  25 @demo demo/index.html
  26 -->
  27
  28 </head><body><dom-module id="paper-material">
  29   <style>
  30     :host {
  31       display: block;
  32       position: relative;
  33     }
  34
  35     :host([animated]) {
  36       @apply(--shadow-transition);
  37     }
  38
  39     :host([elevation="1"]) {
  40       @apply(--shadow-elevation-2dp);
  41     }
  42
  43     :host([elevation="2"]) {
  44       @apply(--shadow-elevation-4dp);
  45     }
  46
  47     :host([elevation="3"]) {
  48       @apply(--shadow-elevation-6dp);
  49     }
  50
  51     :host([elevation="4"]) {
  52       @apply(--shadow-elevation-8dp);
  53     }
  54
  55     :host([elevation="5"]) {
  56       @apply(--shadow-elevation-16dp);
  57     }
  58   </style>
  59   <template>
  60     <content></content>
  61   </template>
  62 </dom-module>
  63 <script src="paper-material-extracted.js"></script></body></html>