OLD | NEW |
| (Empty) |
1 <!doctype html> | |
2 <!-- | |
3 Copyright 2013 The Polymer Authors. All rights reserved. | |
4 Use of this source code is governed by a BSD-style | |
5 license that can be found in the LICENSE file. | |
6 --> | |
7 <html> | |
8 <head> | |
9 <title>paper-menu-button</title> | |
10 <script src="../platform/platform.js"></script> | |
11 <link href="../core-icons/core-icons.html" rel="import"> | |
12 <link href="../paper-icon-button/paper-icon-button.html" rel="import"> | |
13 <link href="../paper-item/paper-item.html" rel="import"> | |
14 <link href="../paper-shadow/paper-shadow.html" rel="import"> | |
15 <link href="paper-menu-button.html" rel="import"> | |
16 <style> | |
17 body { | |
18 margin: 0; | |
19 font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; | |
20 font-size: 14px; | |
21 background: #f7f7f7; | |
22 } | |
23 | |
24 .card { | |
25 background: #fff; | |
26 width: 320px; | |
27 height: 480px; | |
28 margin: 128px 96px; | |
29 border-radius: 3px; | |
30 } | |
31 | |
32 .toolbar { | |
33 background: #91a7ff; | |
34 position: relative; | |
35 padding: 0.5em; | |
36 border-radius: 3px 3px 0 0; | |
37 } | |
38 | |
39 .inner { | |
40 position: absolute; | |
41 top: 0; | |
42 left: 0; | |
43 bottom: 0; | |
44 right: 0; | |
45 z-index: -1; | |
46 } | |
47 | |
48 body /deep/ core-icon { | |
49 fill: #fff; | |
50 } | |
51 | |
52 body /deep/ paper-item::shadow core-icon { | |
53 fill: #000; | |
54 } | |
55 | |
56 core-icon { | |
57 fill: #fff; | |
58 } | |
59 | |
60 paper-item core-icon { | |
61 fill: #000; | |
62 } | |
63 | |
64 </style> | |
65 </head> | |
66 <body unresolved> | |
67 | |
68 <paper-shadow></paper-shadow> | |
69 | |
70 <div class="card paper-shadow-top-z-1"> | |
71 <div class="inner paper-shadow-bottom-z-1"></div> | |
72 <div layout horizontal class="toolbar paper-shadow-top-z-1"> | |
73 <div class="inner paper-shadow-bottom-z-1"></div> | |
74 <paper-menu-button icon="menu" halign="left"> | |
75 <paper-item label="Menu Item 1"></paper-item> | |
76 <paper-item label="Menu Item 2"></paper-item> | |
77 <paper-item label="Menu Item 3"></paper-item> | |
78 </paper-menu-button> | |
79 <div flex></div> | |
80 <paper-icon-button icon="search"></paper-icon-button> | |
81 <paper-menu-button icon="more-vert" halign="right" slow> | |
82 <paper-item label="Refresh"></paper-item> | |
83 <paper-item label="Send Feedback"></paper-item> | |
84 <paper-item label="Settings"></paper-item> | |
85 <paper-item label="Help"></paper-item> | |
86 <paper-item label="Sign Out"></paper-item> | |
87 </paper-menu-button> | |
88 </div> | |
89 </div> | |
90 | |
91 </body> | |
92 </html> | |
OLD | NEW |