diff options
Diffstat (limited to 'catapult/third_party/polymer/components/paper-styles/element-styles/paper-material-styles.html')
-rw-r--r-- | catapult/third_party/polymer/components/paper-styles/element-styles/paper-material-styles.html | 78 |
1 files changed, 78 insertions, 0 deletions
diff --git a/catapult/third_party/polymer/components/paper-styles/element-styles/paper-material-styles.html b/catapult/third_party/polymer/components/paper-styles/element-styles/paper-material-styles.html new file mode 100644 index 00000000..83aee8d5 --- /dev/null +++ b/catapult/third_party/polymer/components/paper-styles/element-styles/paper-material-styles.html @@ -0,0 +1,78 @@ +<!-- +@license +Copyright (c) 2017 The Polymer Project Authors. All rights reserved. +This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt +The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt +The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt +Code distributed by Google as part of the polymer project is also +subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt +--> + +<link rel="import" href="../../polymer/polymer.html"> +<link rel="import" href="../shadow.html"> + +<!-- +Material design: [Cards](https://www.google.com/design/spec/components/cards.html) + +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. + +Example: + + <custom-style> + <style is="custom-style" include="paper-material-styles"></style> + </custom-style> + + <div class="paper-material elevation-1"> + ... content ... + </div> + +@group Paper Elements +@demo demo/index.html +--> + +<dom-module id="paper-material-styles"> + <template> + <style> + :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; + } + </style> + </template> +</dom-module> |