third_party/polymer/components-chromium/paper-shadow/paper-shadow.html

   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.github.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/CONTRIBUTORS.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/PATENTS.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 inserts
  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 shape,
  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 the
  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>