Index: third_party/polymer/components-chromium/paper-shadow/paper-shadow.html |
diff --git a/third_party/polymer/components-chromium/paper-shadow/paper-shadow.html b/third_party/polymer/components-chromium/paper-shadow/paper-shadow.html |
new file mode 100644 |
index 0000000000000000000000000000000000000000..81fcfac04885a353f11950fc02956d5b14a904ae |
--- /dev/null |
+++ b/third_party/polymer/components-chromium/paper-shadow/paper-shadow.html |
@@ -0,0 +1,66 @@ |
+<!-- |
+Copyright (c) 2014 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 |
+--> |
+ |
+<!-- |
+The `paper-shadow` element is a helper to add shadows to elements. |
+Paper shadows are composed of two shadows on top of each other. We |
+mimic this effect by using two elements on top of each other, each with a |
+different drop shadow. You can apply the shadow to an element by assigning |
+it as the target. If you do not specify a target, the shadow is applied to |
+the `paper-shadow` element's parent element or shadow host element if its |
+parent is a shadow root. Alternatively, you can use the CSS classes included |
+by this element directly. |
+ |
+Example: |
+ |
+ <div id="myCard" class="card"></div> |
+ <paper-shadow id="myShadow" z="1"></div> |
+ |
+ // Assign a target explicitly |
+ myShadow.target = document.getElementById('myCard'); |
+ |
+ // Auto-assign the target. |
+ <div class="card"> |
+ <paper-shadow z="1"></paper-shadow> |
+ </div> |
+ |
+ // Use the classes directly |
+ <div class="card paper-shadow-top paper-shadow-top-z-1"> |
+ <div class="card-inner paper-shadow-bottom paper-shadow-bottom-z-1"></div> |
+ </div> |
+ |
+If you assign a target to a `paper-shadow` element, it creates two nodes and inserts |
+them as the first children of the target, or the first children of the target's shadow |
+root if there is one. This implies: |
+ |
+ 1. If the primary node that drops the shadow has styling that affects its shape, |
+ the same styling must be applied to elements with class `paper-shadow`. |
+ `border-radius` is a very common property and is inherited automatically. |
+ |
+ 2. The target's overflow property will be set to `overflow: visible` because the |
+ shadow is rendered beyond the bounds of its container. Position the shadow as a |
+ separate layer and use a different child element for clipping if needed. |
+ |
+@group Paper Elements |
+@class paper-shadow |
+--> |
+ |
+<link href="../polymer/polymer.html" rel="import"> |
+ |
+<polymer-element name="paper-shadow" assetpath=""> |
+ |
+ <template> |
+ |
+ <link no-shim="" href="paper-shadow.css" rel="stylesheet"> |
+ |
+ </template> |
+ |
+ |
+</polymer-element> |
+<script src="paper-shadow-extracted.js"></script> |