https://wpt.fyi/node_modules/@polymer/paper-styles/element-styles/paper-material-styles.js

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
5http://polymer.github.io/LICENSE.txt The complete set of authors may be found at
6http://polymer.github.io/AUTHORS.txt The complete set of contributors may be
7found at http://polymer.github.io/CONTRIBUTORS.txt Code distributed by Google as
8part of the polymer project is also subject to an additional IP rights grant
9found at http://polymer.github.io/PATENTS.txt
10*/
11/**
12Material design:
13[Cards](https://www.google.com/design/spec/components/cards.html)
14
15Shared styles that you can apply to an element to renders two shadows on top
16of each other,that create the effect of a lifted piece of paper.
17
18Example:
19
20    <custom-style>
21      <style is="custom-style" include="paper-material-styles"></style>
22    </custom-style>
23
24    <div class="paper-material" elevation="1">
25      ... content ...
26    </div>
27
28@group Paper Elements
29@demo demo/index.html
30*/
31
32import '/node_modules/@polymer/polymer/polymer-legacy.js';
33import '../shadow.js';
34
35import {html} from '/node_modules/@polymer/polymer/lib/utils/html-tag.js';
36const template = html`
37<dom-module id="paper-material-styles">
38  <template>
39    <style>
40      html {
41        --paper-material: {
42          display: block;
43          position: relative;
44        };
45        --paper-material-elevation-1: {
46          @apply --shadow-elevation-2dp;
47        };
48        --paper-material-elevation-2: {
49          @apply --shadow-elevation-4dp;
50        };
51        --paper-material-elevation-3: {
52          @apply --shadow-elevation-6dp;
53        };
54        --paper-material-elevation-4: {
55          @apply --shadow-elevation-8dp;
56        };
57        --paper-material-elevation-5: {
58          @apply --shadow-elevation-16dp;
59        };
60      }
61      .paper-material {
62        @apply --paper-material;
63      }
64      .paper-material[elevation="1"] {
65        @apply --paper-material-elevation-1;
66      }
67      .paper-material[elevation="2"] {
68        @apply --paper-material-elevation-2;
69      }
70      .paper-material[elevation="3"] {
71        @apply --paper-material-elevation-3;
72      }
73      .paper-material[elevation="4"] {
74        @apply --paper-material-elevation-4;
75      }
76      .paper-material[elevation="5"] {
77        @apply --paper-material-elevation-5;
78      }
79
80      /* Duplicate the styles because of https://github.com/webcomponents/shadycss/issues/193 */
81      :host {
82        --paper-material: {
83          display: block;
84          position: relative;
85        };
86        --paper-material-elevation-1: {
87          @apply --shadow-elevation-2dp;
88        };
89        --paper-material-elevation-2: {
90          @apply --shadow-elevation-4dp;
91        };
92        --paper-material-elevation-3: {
93          @apply --shadow-elevation-6dp;
94        };
95        --paper-material-elevation-4: {
96          @apply --shadow-elevation-8dp;
97        };
98        --paper-material-elevation-5: {
99          @apply --shadow-elevation-16dp;
100        };
101      }
102      :host(.paper-material) {
103        @apply --paper-material;
104      }
105      :host(.paper-material[elevation="1"]) {
106        @apply --paper-material-elevation-1;
107      }
108      :host(.paper-material[elevation="2"]) {
109        @apply --paper-material-elevation-2;
110      }
111      :host(.paper-material[elevation="3"]) {
112        @apply --paper-material-elevation-3;
113      }
114      :host(.paper-material[elevation="4"]) {
115        @apply --paper-material-elevation-4;
116      }
117      :host(.paper-material[elevation="5"]) {
118        @apply --paper-material-elevation-5;
119      }
120    </style>
121  </template>
122</dom-module>`;
123template.setAttribute('style', 'display: none;');
124document.head.appendChild(template.content);