• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1<!--
2@license
3Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
4This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
5The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
6The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
7Code distributed by Google as part of the polymer project is also
8subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
9-->
10
11<link rel="import" href="../../polymer/polymer.html">
12<link rel="import" href="../shadow.html">
13
14<!--
15Material design: [Cards](https://www.google.com/design/spec/components/cards.html)
16
17Shared styles that you can apply to an element to renders two shadows on top
18of each other,that create the effect of a lifted piece of paper.
19
20Example:
21
22    <custom-style>
23      <style is="custom-style" include="paper-material-styles"></style>
24    </custom-style>
25
26    <div class="paper-material elevation-1">
27      ... content ...
28    </div>
29
30@group Paper Elements
31@demo demo/index.html
32-->
33
34<dom-module id="paper-material-styles">
35  <template>
36    <style>
37      :host, html {
38        --paper-material: {
39          display: block;
40          position: relative;
41        };
42        --paper-material-elevation-1: {
43          @apply --shadow-elevation-2dp;
44        };
45        --paper-material-elevation-2: {
46          @apply --shadow-elevation-4dp;
47        };
48        --paper-material-elevation-3: {
49          @apply --shadow-elevation-6dp;
50        };
51        --paper-material-elevation-4: {
52          @apply --shadow-elevation-8dp;
53        };
54        --paper-material-elevation-5: {
55          @apply --shadow-elevation-16dp;
56        };
57      }
58      :host(.paper-material), .paper-material {
59        @apply --paper-material;
60      }
61      :host(.paper-material[elevation="1"]), .paper-material[elevation="1"] {
62        @apply --paper-material-elevation-1;
63      }
64      :host(.paper-material[elevation="2"]), .paper-material[elevation="2"] {
65        @apply --paper-material-elevation-2;
66      }
67      :host(.paper-material[elevation="3"]), .paper-material[elevation="3"] {
68        @apply --paper-material-elevation-3;
69      }
70      :host(.paper-material[elevation="4"]), .paper-material[elevation="4"] {
71        @apply --paper-material-elevation-4;
72      }
73      :host(.paper-material[elevation="5"]), .paper-material[elevation="5"] {
74        @apply --paper-material-elevation-5;
75      }
76    </style>
77  </template>
78</dom-module>
79