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