Index: polymer_0.5.0/bower_components/core-menu-button/demo.html |
diff --git a/polymer_0.5.0/bower_components/core-menu-button/demo.html b/polymer_0.5.0/bower_components/core-menu-button/demo.html |
new file mode 100644 |
index 0000000000000000000000000000000000000000..5abda7a96bc3ddfd776f776b2bb15866d73ef846 |
--- /dev/null |
+++ b/polymer_0.5.0/bower_components/core-menu-button/demo.html |
@@ -0,0 +1,200 @@ |
+<!doctype html> |
+<!-- |
+Copyright (c) 2014 The Polymer Project Authors. All rights reserved. |
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt |
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt |
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt |
+Code distributed by Google as part of the polymer project is also |
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt |
+--> |
+ |
+<html> |
+<head> |
+ |
+ <meta charset="utf-8"> |
+ <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-menu-button</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="core-menu-button.html" rel="import"> |
+ |
+ <style shim-shadowdom> |
+ body { |
+ font-family: RobotoDraft, 'Helvetica Neue', Helvetica, Arial; |
+ font-size: 14px; |
+ margin: 0; |
+ padding: 24px; |
+ -webkit-tap-highlight-color: rgba(0,0,0,0); |
+ -webkit-touch-callout: none; |
+ } |
+ |
+ section { |
+ padding: 20px 0; |
+ } |
+ |
+ section > div { |
+ padding: 14px; |
+ font-size: 16px; |
+ } |
+ |
+ html /deep/ core-dropdown { |
+ background-color: #eee; |
+ color: #000; |
+ border: 1px solid #ccc; |
+ border-radius: 3px; |
+ } |
+ |
+ core-item { |
+ overflow: hidden; |
+ white-space: nowrap; |
+ text-overflow: ellipsis; |
+ } |
+ |
+ html /deep/ core-collapse { |
+ border: 1px solid #ccc; |
+ padding: 8px; |
+ } |
+ |
+ .constrained-height { |
+ height: 150px; |
+ } |
+ |
+ .colored { |
+ color: #0f9d58; |
+ } |
+ |
+ .colored:active, |
+ .dropdown.colored { |
+ border: 1px solid #0f9d58; |
+ background-color: #b7e1cd; |
+ } |
+ |
+ </style> |
+ |
+</head> |
+<body> |
+ |
+ <template is="auto-binding"> |
+ |
+ <section> |
+ |
+ <div>Absolutely positioned menu buttons</div> |
+ |
+ <core-menu-button> |
+ <core-icon-button icon="menu"></core-icon-button> |
+ <core-dropdown class="dropdown"> |
+ <core-menu> |
+ <template repeat="{{pastries}}"> |
+ <core-item>{{}}</core-item> |
+ </template> |
+ </core-menu> |
+ </core-dropdown> |
+ </core-menu-button> |
+ |
+ <core-menu-button disabled> |
+ <core-icon-button icon="menu"></core-icon-button> |
+ <core-dropdown class="dropdown"> |
+ <core-menu> |
+ <core-item>Should not see this</core-item> |
+ </core-menu> |
+ </core-dropdown> |
+ </core-menu-button> |
+ |
+ <core-menu-button> |
+ <core-icon-button icon="add"><span style="vertical-align:middle;">add</span></core-icon-button> |
+ <core-dropdown class="dropdown"> |
+ <core-menu> |
+ <template repeat="{{pastries}}"> |
+ <core-item>{{}}</core-item> |
+ </template> |
+ </core-menu> |
+ </core-dropdown> |
+ </core-menu-button> |
+ |
+ </section> |
+ |
+ <section> |
+ |
+ <div>Layered menu buttons</div> |
+ |
+ <button onclick="document.getElementById('collapse').toggle()">toggle core-collapse</button> |
+ |
+ <br> |
+ |
+ <core-collapse id="collapse"> |
+ |
+ <core-menu-button> |
+ <core-icon-button icon="menu"></core-icon-button> |
+ <core-dropdown layered class="dropdown"> |
+ <core-menu> |
+ <template repeat="{{pastries}}"> |
+ <core-item>{{}}</core-item> |
+ </template> |
+ </core-menu> |
+ </core-dropdown> |
+ </core-menu-button> |
+ |
+ </core-collapse> |
+ |
+ </section> |
+ |
+ <section> |
+ |
+ <div>Custom styling</div> |
+ |
+ <core-menu-button label="Constrained height"> |
+ <core-icon-button icon="menu"></core-icon-button> |
+ <core-dropdown class="dropdown constrained-height"> |
+ <core-menu> |
+ <template repeat="{{pastries}}"> |
+ <core-item>{{}}</core-item> |
+ </template> |
+ </core-menu> |
+ </core-dropdown> |
+ </core-menu-button> |
+ |
+ <core-menu-button label="Colored"> |
+ <core-icon-button icon="menu" class="colored"></core-icon-button> |
+ <core-dropdown class="dropdown colored"> |
+ <core-menu> |
+ <template repeat="{{pastries}}"> |
+ <core-item>{{}}</core-item> |
+ </template> |
+ </core-menu> |
+ </core-dropdown> |
+ </core-menu-button> |
+ |
+ </section> |
+ |
+ </template> |
+ |
+ <script> |
+ |
+ scope = document.querySelector('template[is=auto-binding]'); |
+ |
+ scope.pastries = [ |
+ 'Apple fritter', |
+ 'Croissant', |
+ 'Donut', |
+ 'Financier', |
+ 'Jello', |
+ 'Madeleine', |
+ 'Pound cake', |
+ 'Pretzel', |
+ 'Sfogliatelle' |
+ ]; |
+ |
+ </script> |
+ |
+</body> |
+</html> |