Index: third_party/polymer/components/paper-dropdown-menu/paper-dropdown-menu.html |
diff --git a/third_party/polymer/components/core-dropdown-menu/core-dropdown-menu.html b/third_party/polymer/components/paper-dropdown-menu/paper-dropdown-menu.html |
similarity index 60% |
copy from third_party/polymer/components/core-dropdown-menu/core-dropdown-menu.html |
copy to third_party/polymer/components/paper-dropdown-menu/paper-dropdown-menu.html |
index c06f4c0fcbd953fd816fd33d3c2f839ade4b7f7b..adcca1b53bc02eb19529f52a4510a89b7c4cf135 100644 |
--- a/third_party/polymer/components/core-dropdown-menu/core-dropdown-menu.html |
+++ b/third_party/polymer/components/paper-dropdown-menu/paper-dropdown-menu.html |
@@ -9,52 +9,92 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN |
<!-- |
-`core-dropdown-menu` works together with `core-dropdown` and `core-selector` to |
+`paper-dropdown-menu` works together with `paper-dropdown` and `core-menu` to |
implement a drop-down menu. The currently selected item is displayed in the |
control. If no item is selected, the `label` is displayed instead. |
The child element with the class `dropdown` will be used as the drop-down |
-menu. It should be a `core-dropdown` or other overlay element. You should |
+menu. It should be a `paper-dropdown` or other overlay element. You should |
also provide a `core-selector` or other selector element, such as `core-menu`, |
-in the drop-down. |
+in the drop-down. You should apply the class `menu` to the selector element. |
Example: |
- <core-dropdown-menu label="Choose a pastry"> |
- <core-dropdown class="dropdown"> |
- <core-selector> |
- <core-item label="Croissant"></core-item> |
- <core-item label="Donut"></core-item> |
- <core-item label="Financier"></core-item> |
- <core-item label="Madeleine"></core-item> |
- </core-selector> |
- </core-dropdown> |
- </core-dropdown-menu> |
- |
-@group Polymer Core Elements |
-@element core-dropdown-menu |
+ <paper-dropdown-menu label="Your favorite pastry"> |
+ <paper-dropdown class="dropdown"> |
+ <core-menu class="menu"> |
+ <paper-item>Croissant</paper-item> |
+ <paper-item>Donut</paper-item> |
+ <paper-item>Financier</paper-item> |
+ <paper-item>Madeleine</paper-item> |
+ </core-menu> |
+ </paper-dropdown> |
+ </paper-dropdown-menu> |
+ |
+This example renders a drop-down menu with 4 options. |
+ |
+@group Paper Elements |
+@element paper-dropdown-menu |
@extends core-dropdown-base |
@status unstable |
@homepage github.io |
--> |
+<!-- |
+Fired when an item's selection state is changed. This event is fired both |
+when an item is selected or deselected. The `isSelected` detail property |
+contains the selection state. |
+ |
+@event core-select |
+@param {Object} detail |
+ @param {boolean} detail.isSelected true for selection and false for deselection |
+ @param {Object} detail.item the item element |
+--> |
<link href="../polymer/polymer.html" rel="import"> |
+ |
<link href="../core-a11y-keys/core-a11y-keys.html" rel="import"> |
<link href="../core-dropdown/core-dropdown-base.html" rel="import"> |
<link href="../core-focusable/core-focusable.html" rel="import"> |
<link href="../core-icon/core-icon.html" rel="import"> |
<link href="../core-icons/core-icons.html" rel="import"> |
- |
-<polymer-element name="core-dropdown-menu" extends="core-dropdown-base" relative layout inline horizontal center tabindex="0"> |
+<link href="../paper-shadow/paper-shadow.html" rel="import"> |
+ |
+<style shim-shadowdom> |
+ html /deep/ #paper-dropdown-menu-dropdown { |
+ margin: 12px; |
+ overflow: visible; |
+ } |
+ |
+ html /deep/ #paper-dropdown-menu-dropdown #menu { |
+ padding: 8px 0; |
+ margin: 0; |
+ } |
+ |
+ html /deep/ #paper-dropdown-menu-dropdown .menu-container { |
+ overflow: auto; |
+ max-height: 100%; |
+ max-width: 100%; |
+ } |
+</style> |
+ |
+<polymer-element name="paper-dropdown-menu" extends="core-dropdown-base" relative layout inline horizontal center tabindex="0"> |
<template> |
<style> |
:host { |
- background-color: #fff; |
+ -moz-user-select: none; |
+ -ms-user-select: none; |
+ -webkit-user-select: none; |
+ user-select: none; |
+ cursor: pointer; |
+ padding: 0.5em 0 0.25em; |
+ margin: 0.75em 0; |
+ border-bottom: 1px solid #757575; |
+ outline: none; |
} |
- :host([disabled]) { |
- color: #a8a8a8; |
+ #label, #arrow { |
+ color: #757575; |
} |
#label { |