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       @apply(--shadow-transition);
  34     }
  35
  36     :host([elevation="1"]) {
  37       @apply(--shadow-elevation-2dp);
  38     }
  39
  40     :host([elevation="2"]) {
  41       @apply(--shadow-elevation-4dp);
  42     }
  43
  44     :host([elevation="3"]) {
  45       @apply(--shadow-elevation-6dp);
  46     }
  47
  48     :host([elevation="4"]) {
  49       @apply(--shadow-elevation-8dp);
  50     }
  51
  52     :host([elevation="5"]) {
  53       @apply(--shadow-elevation-16dp);
  54     }
  55   </style>
  56   <template>
  57     <content></content>
  58   </template>
  59 </dom-module>
  60 <script src="paper-material-extracted.js"></script></body></html>