1<!--
2Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
3This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
4The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
5The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
6Code distributed by Google as part of the polymer project is also
7subject 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
13is animated on open with `paper-dropdown-transition`. Use this element with
14`paper-dropdown-menu` or `paper-menu-button` to implement UI controls that
15open a drop-down.
16
17Example:
18
19    <paper-dropdown>
20      Hi!
21    </paper-dropdown>
22
23Theming
24-------
25
26Style 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>