Index: third_party/polymer/components-chromium/paper-dropdown-menu/demo.html |
diff --git a/third_party/polymer/components-chromium/core-dropdown-menu/demo.html b/third_party/polymer/components-chromium/paper-dropdown-menu/demo.html |
similarity index 57% |
copy from third_party/polymer/components-chromium/core-dropdown-menu/demo.html |
copy to third_party/polymer/components-chromium/paper-dropdown-menu/demo.html |
index f2646e5bf809fdc6950153f27055786884b0c3d7..e2b07e8508e6f222cd52d5b136ec6081de6e57b9 100644 |
--- a/third_party/polymer/components-chromium/core-dropdown-menu/demo.html |
+++ b/third_party/polymer/components-chromium/paper-dropdown-menu/demo.html |
@@ -15,18 +15,16 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN |
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> |
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes"> |
- <title>core-dropdown-menu</title> |
+ <title>paper-dropdown-menu</title> |
<script src="../webcomponentsjs/webcomponents.js"></script> |
<link href="../core-collapse/core-collapse.html" rel="import"> |
- <link href="../core-dropdown/core-dropdown.html" rel="import"> |
- <link href="../core-icons/core-icons.html" rel="import"> |
- <link href="../core-icon-button/core-icon-button.html" rel="import"> |
- <link href="../core-item/core-item.html" rel="import"> |
<link href="../core-menu/core-menu.html" rel="import"> |
+ <link href="../paper-dropdown/paper-dropdown.html" rel="import"> |
+ <link href="../paper-item/paper-item.html" rel="import"> |
- <link href="core-dropdown-menu.html" rel="import"> |
+ <link href="paper-dropdown-menu.html" rel="import"> |
<style shim-shadowdom> |
body { |
@@ -47,21 +45,17 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN |
font-size: 16px; |
} |
- html /deep/ core-dropdown-menu { |
+ html /deep/ paper-dropdown-menu { |
box-sizing: border-box; |
width: 170px; |
} |
- html /deep/ core-dropdown { |
+ html /deep/ core-menu { |
box-sizing: border-box; |
- min-width: 170px; |
- background-color: #eee; |
- color: #000; |
- border: 1px solid #ccc; |
- border-radius: 3px; |
+ width: 170px; |
} |
- core-item { |
+ paper-item { |
overflow: hidden; |
white-space: nowrap; |
text-overflow: ellipsis; |
@@ -72,14 +66,24 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN |
padding: 8px; |
} |
+ html /deep/ core-overlay { |
+ border: 1px solid #ccc; |
+ padding: 8px; |
+ background: #fff; |
+ } |
+ |
.constrained-height { |
height: 150px; |
} |
.colored { |
+ color: #0f9d58; |
+ } |
+ |
+ .dropdown.colored::shadow #ripple, |
+ .dropdown.colored::shadow #background { |
border: 1px solid #0f9d58; |
background-color: #b7e1cd; |
- color: #0f9d58; |
} |
</style> |
@@ -93,25 +97,25 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN |
<div>Absolutely positioned dropdowns</div> |
- <core-dropdown-menu label="Your favorite pastry"> |
- <core-dropdown class="dropdown"> |
- <core-menu> |
+ <paper-dropdown-menu label="Your favorite pastry"> |
+ <paper-dropdown class="dropdown"> |
+ <core-menu class="menu"> |
<template repeat="{{pastries}}"> |
- <core-item>{{}}</core-item> |
+ <paper-item>{{}}</paper-item> |
</template> |
</core-menu> |
- </core-dropdown> |
- </core-dropdown-menu> |
+ </paper-dropdown> |
+ </paper-dropdown-menu> |
<br><br> |
- <core-dropdown-menu label="Disabled" disabled> |
- <core-dropdown class="dropdown"> |
- <core-menu> |
- <core-item>Should not see this</core-item> |
+ <paper-dropdown-menu label="Disabled" disabled> |
+ <paper-dropdown class="dropdown"> |
+ <core-menu class="menu"> |
+ <paper-item>Should not see this</paper-item> |
</core-menu> |
- </core-dropdown> |
- </core-dropdown-menu> |
+ </paper-dropdown> |
+ </paper-dropdown-menu> |
</section> |
@@ -119,21 +123,37 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN |
<div>Layered dropdowns</div> |
+ <button onclick="document.getElementById('overlay').toggle()">toggle core-overlay</button> |
+ |
+ <core-overlay id="overlay"> |
+ |
+ <paper-dropdown-menu label="Your favorite pastry"> |
+ <paper-dropdown layered class="dropdown"> |
+ <core-menu class="menu"> |
+ <template repeat="{{pastries}}"> |
+ <paper-item>{{}}</paper-item> |
+ </template> |
+ </core-menu> |
+ </paper-dropdown> |
+ </paper-dropdown-menu> |
+ |
+ </core-overlay> |
+ |
<button onclick="document.getElementById('collapse').toggle()">toggle core-collapse</button> |
<br> |
<core-collapse id="collapse"> |
- <core-dropdown-menu label="Your favorite pastry"> |
- <core-dropdown layered class="dropdown"> |
- <core-menu> |
+ <paper-dropdown-menu label="Your favorite pastry"> |
+ <paper-dropdown layered class="dropdown"> |
+ <core-menu class="menu"> |
<template repeat="{{pastries}}"> |
- <core-item>{{}}</core-item> |
+ <paper-item>{{}}</paper-item> |
</template> |
</core-menu> |
- </core-dropdown> |
- </core-dropdown-menu> |
+ </paper-dropdown> |
+ </paper-dropdown-menu> |
</core-collapse> |
@@ -143,27 +163,27 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN |
<div>Custom styling</div> |
- <core-dropdown-menu label="Constrained height"> |
- <core-dropdown class="dropdown constrained-height"> |
- <core-menu> |
+ <paper-dropdown-menu label="Constrained height"> |
+ <paper-dropdown class="dropdown constrained-height"> |
+ <core-menu class="menu"> |
<template repeat="{{pastries}}"> |
- <core-item>{{}}</core-item> |
+ <paper-item>{{}}</paper-item> |
</template> |
</core-menu> |
- </core-dropdown> |
- </core-dropdown-menu> |
+ </paper-dropdown> |
+ </paper-dropdown-menu> |
<br><br> |
- <core-dropdown-menu label="Colored"> |
- <core-dropdown class="dropdown colored"> |
- <core-menu> |
+ <paper-dropdown-menu label="Colored"> |
+ <paper-dropdown class="dropdown colored"> |
+ <core-menu class="menu"> |
<template repeat="{{pastries}}"> |
- <core-item>{{}}</core-item> |
+ <paper-item>{{}}</paper-item> |
</template> |
</core-menu> |
- </core-dropdown> |
- </core-dropdown-menu> |
+ </paper-dropdown> |
+ </paper-dropdown-menu> |
</section> |