OLD | NEW |
(Empty) | |
| 1 <!-- |
| 2 Copyright (c) 2014 The Polymer Project Authors. All rights reserved. |
| 3 This code may only be used under the BSD style license found at http://polymer.g
ithub.io/LICENSE.txt |
| 4 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt |
| 5 The complete set of contributors may be found at http://polymer.github.io/CONTRI
BUTORS.txt |
| 6 Code distributed by Google as part of the polymer project is also |
| 7 subject to an additional IP rights grant found at http://polymer.github.io/PATEN
TS.txt |
| 8 --> |
| 9 |
| 10 <!-- |
| 11 The `paper-shadow` element is a helper to add shadows to elements. |
| 12 Paper shadows are composed of two shadows on top of each other. We |
| 13 mimic this effect by using two elements on top of each other, each with a |
| 14 different drop shadow. You can apply the shadow to an element by assigning |
| 15 it as the target. If you do not specify a target, the shadow is applied to |
| 16 the `paper-shadow` element's parent element or shadow host element if its |
| 17 parent is a shadow root. Alternatively, you can use the CSS classes included |
| 18 by this element directly. |
| 19 |
| 20 Example: |
| 21 |
| 22 <div id="myCard" class="card"></div> |
| 23 <paper-shadow id="myShadow" z="1"></div> |
| 24 |
| 25 // Assign a target explicitly |
| 26 myShadow.target = document.getElementById('myCard'); |
| 27 |
| 28 // Auto-assign the target. |
| 29 <div class="card"> |
| 30 <paper-shadow z="1"></paper-shadow> |
| 31 </div> |
| 32 |
| 33 // Use the classes directly |
| 34 <div class="card paper-shadow-top paper-shadow-top-z-1"> |
| 35 <div class="card-inner paper-shadow-bottom paper-shadow-bottom-z-1"></div> |
| 36 </div> |
| 37 |
| 38 If you assign a target to a `paper-shadow` element, it creates two nodes and ins
erts |
| 39 them as the first children of the target, or the first children of the target's
shadow |
| 40 root if there is one. This implies: |
| 41 |
| 42 1. If the primary node that drops the shadow has styling that affects its shap
e, |
| 43 the same styling must be applied to elements with class `paper-shadow`. |
| 44 `border-radius` is a very common property and is inherited automatically. |
| 45 |
| 46 2. The target's overflow property will be set to `overflow: visible` because t
he |
| 47 shadow is rendered beyond the bounds of its container. Position the shadow
as a |
| 48 separate layer and use a different child element for clipping if needed. |
| 49 |
| 50 @group Paper Elements |
| 51 @class paper-shadow |
| 52 --> |
| 53 |
| 54 <link href="../polymer/polymer.html" rel="import"> |
| 55 |
| 56 <polymer-element name="paper-shadow" assetpath=""> |
| 57 |
| 58 <template> |
| 59 |
| 60 <link no-shim="" href="paper-shadow.css" rel="stylesheet"> |
| 61 |
| 62 </template> |
| 63 |
| 64 |
| 65 </polymer-element> |
| 66 <script src="paper-shadow-extracted.js"></script> |
OLD | NEW |