Home | History | Annotate | Download | only in paper-dropdown 
      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 
     12 `paper-dropdown` is a `core-dropdown` with a `paper-shadow`. By default, it
     13 is animated on open with `paper-dropdown-transition`. Use this element with
     14 `paper-dropdown-menu` or `paper-menu-button` to implement UI controls that
     15 open a drop-down.
     16 
     17 Example:
     18 
     19     <paper-dropdown>
     20       Hi!
     21     </paper-dropdown>
     22 
     23 Theming
     24 -------
     25 
     26 Style the background color of the dropdown with these selectors:
     27 
     28     paper-dropdown::shadow #ripple,
     29     paper-dropdown::shadow #background {
     30         background-color: green;
     31     }
     32 
     33 @group Paper Elements
     34 @element paper-dropdown
     35 @extends core-dropdown
     36 @status unstable
     37 -->
     38 
     39 <link href="../polymer/polymer.html" rel="import">
     40 <link href="../core-dropdown/core-dropdown.html" rel="import">
     41 <link href="../paper-shadow/paper-shadow.html" rel="import">
     42 
     43 <link href="paper-dropdown-transition.html" rel="import">
     44 
     45 <style shim-shadowdom>
     46   html /deep/ paper-dropdown {
     47     position: absolute;
     48     overflow: visible;
     49     min-height: 40px;
     50   }
     51 </style>
     52 
     53 <polymer-element name="paper-dropdown" extends="core-dropdown">
     54 <template>
     55 
     56   <style>
     57     #ripple {
     58       background-color: #fff;
     59       position: absolute;
     60       left: 0;
     61       top: 0;
     62       width: 40px;
     63       height: 40px;
     64       border-radius: 50%;
     65       box-shadow: 0 2px 3px 0 rgba(0, 0, 0, 0.26);
     66       opacity: 0;
     67     }
     68 
     69     :host([halign=right]) #ripple {
     70       left: auto;
     71       right: 0;
     72     }
     73 
     74     :host([valign=bottom]) #ripple {
     75       top: auto;
     76       bottom: 0;
     77     }
     78 
     79     #background {
     80       background-color: #fff;
     81       border-radius: inherit;
     82     }
     83 
     84     #scroller {
     85       overflow: auto;
     86       box-sizing: border-box;
     87     }
     88   </style>
     89 
     90   <div id="ripple"></div>
     91 
     92   <div id="background" fit>
     93     <paper-shadow fit></paper-shadow>
     94   </div>
     95 
     96   <div id="scroller" relative>
     97     <content></content>
     98   </div>
     99 
    100 </template>
    101 <script>
    102 
    103   Polymer({
    104 
    105     publish: {
    106       transition: 'paper-dropdown-transition'
    107     },
    108 
    109     ready: function() {
    110       this.super();
    111       this.sizingTarget = this.$.scroller;
    112     }
    113 
    114   });
    115 
    116 </script>
    117 </polymer-element>