blob: 8f5f63704f9f2040632b5a5b7c4cb741778e5179 [file] [log] [blame]
Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
This code may only be used under the BSD style license found at
The complete set of authors may be found at
The complete set of contributors may be found at
Code distributed by Google as part of the polymer project is also
subject to an additional IP rights grant found at
<link rel="import" href="../../polymer/polymer.html">
<link rel="import" href="../shadow.html">
Material design: [Cards](
Shared styles that you can apply to an element to renders two shadows on top
of each other,that create the effect of a lifted piece of paper.
<style is="custom-style" include="paper-material-styles"></style>
<div class="paper-material" elevation="1">
... content ...
@group Paper Elements
@demo demo/index.html
<dom-module id="paper-material-styles">
:host, html {
--paper-material: {
display: block;
position: relative;
--paper-material-elevation-1: {
@apply --shadow-elevation-2dp;
--paper-material-elevation-2: {
@apply --shadow-elevation-4dp;
--paper-material-elevation-3: {
@apply --shadow-elevation-6dp;
--paper-material-elevation-4: {
@apply --shadow-elevation-8dp;
--paper-material-elevation-5: {
@apply --shadow-elevation-16dp;
:host(.paper-material), .paper-material {
@apply --paper-material;
:host(.paper-material[elevation="1"]), .paper-material[elevation="1"] {
@apply --paper-material-elevation-1;
:host(.paper-material[elevation="2"]), .paper-material[elevation="2"] {
@apply --paper-material-elevation-2;
:host(.paper-material[elevation="3"]), .paper-material[elevation="3"] {
@apply --paper-material-elevation-3;
:host(.paper-material[elevation="4"]), .paper-material[elevation="4"] {
@apply --paper-material-elevation-4;
:host(.paper-material[elevation="5"]), .paper-material[elevation="5"] {
@apply --paper-material-elevation-5;