third_party/polymer/v1_0/components-chromium/paper-styles/shadow.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 -->
  10
  11 <link rel="import" href="../polymer/polymer.html">
  12
  13 <style is="custom-style">
  14
  15   :root {
  16
  17     --shadow-transition: {
  18       transition: box-shadow 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  19     };
  20
  21     --shadow-none: {
  22       box-shadow: none;
  23     };
  24
  25     /* from http://codepen.io/shyndman/pen/c5394ddf2e8b2a5c9185904b57421cdb */
  26
  27     --shadow-elevation-2dp: {
  28       box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14),
  29                   0 1px 5px 0 rgba(0, 0, 0, 0.12),
  30                   0 3px 1px -2px rgba(0, 0, 0, 0.2);
  31     };
  32
  33     --shadow-elevation-3dp: {
  34       box-shadow: 0 3px 4px 0 rgba(0, 0, 0, 0.14),
  35                   0 1px 8px 0 rgba(0, 0, 0, 0.12),
  36                   0 3px 3px -2px rgba(0, 0, 0, 0.4);
  37     };
  38
  39     --shadow-elevation-4dp: {
  40       box-shadow: 0 4px 5px 0 rgba(0, 0, 0, 0.14),
  41                   0 1px 10px 0 rgba(0, 0, 0, 0.12),
  42                   0 2px 4px -1px rgba(0, 0, 0, 0.4);
  43     };
  44
  45     --shadow-elevation-6dp: {
  46       box-shadow: 0 6px 10px 0 rgba(0, 0, 0, 0.14),
  47                   0 1px 18px 0 rgba(0, 0, 0, 0.12),
  48                   0 3px 5px -1px rgba(0, 0, 0, 0.4);
  49     };
  50
  51     --shadow-elevation-8dp: {
  52       box-shadow: 0 8px 10px 1px rgba(0, 0, 0, 0.14),
  53                   0 3px 14px 2px rgba(0, 0, 0, 0.12),
  54                   0 5px 5px -3px rgba(0, 0, 0, 0.4);
  55     };
  56
  57     --shadow-elevation-16dp: {
  58       box-shadow: 0 16px 24px 2px rgba(0, 0, 0, 0.14),
  59                   0  6px 30px 5px rgba(0, 0, 0, 0.12),
  60                   0  8px 10px -5px rgba(0, 0, 0, 0.4);
  61     };
  62
  63   }
  64
  65 </style>