forked from Polymer/old-docs-site
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathdropdown-panel.html
102 lines (90 loc) · 2.96 KB
/
dropdown-panel.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
93
94
95
96
97
98
99
100
101
102
<link rel="import" href="../components/polymer/polymer.html">
<link rel="import" href="../components/core-menu/core-menu.html">
<link rel="import" href="../components/core-item/core-item.html">
<polymer-element name="dropdown-panel" attributes="open ajaxify">
<template>
<style>
:host {
background: white;
opacity: 0;
visibility: hidden;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
-webkit-transform: translate3d(0, -6px, 0);
-webkit-transition: .04s .08s -webkit-transform, 0.025s .1s opacity;
-moz-transform: translate3d(0, -6px, 0);
-moz-transition: .04s .08s -moz-transform, 0.025s .1s opacity;
transform: translate3d(0, -6px, 0);
transition: .04s .08s transform, 0.025s .1s opacity;
}
:host([open]) {
opacity: 1;
visibility: visible;
-webkit-transform: translate3d(0, 0, 0);
-webkit-transition: .04s -webkit-transform, 0.025s opacity;
-moz-transform: translate3d(0, -6px, 0);
-moz-transition: .04s .08s -moz-transform, 0.025s .1s opacity;
transform: translate3d(0, 0, 0);
transition: .04s transform, 0.025s opacity;
}
polyfill-next-selector { content: ':host core-item #label'; }
::content core-item /deep/ #label {
font-weight: 300;
}
polyfill-next-selector { content: ':host core-item core-icon'; }
::content core-item::shadow core-icon {
background-size: 48px !important;
}
polyfill-next-selector { content: ':host core-item[active]'; }
::content core-item[active] {
background: rgba(0, 0, 0, 0.04);
border: 1px solid #d9d9d9;
}
:host /deep/ core-icon {
margin-right: 6px;
background-size: 48px !important;
}
polyfill-next-selector { content: ':host core-item'; }
::content core-item {
font-size: 14px !important;
font-weight: 500;
line-height: 32px !important;
// letter-spacing: 0.01em;
padding: 0;
color: initial;
opacity: 0.5;
}
polyfill-next-selector { content: ':host core-item:hover'; }
::content core-item:hover {
opacity: 0.9;
}
polyfill-next-selector { content: ':host core-item.core-selected'; }
::content core-item.core-selected {
opacity: 1;
}
</style>
<core-menu id="mainmenu" on-click="{{onClick}}">
<content></content>
</core-menu>
</template>
<script>
Polymer('dropdown-panel', {
publish: {
open: {value: false, reflect: true}
},
ajaxify: false,
attached: function() {
var active = this.querySelector('core-item[active]');
var index = Array.prototype.indexOf.call(this.children, active);
this.$.mainmenu.selected = index;
},
openPanel: function() {
this.open = true;
var close = function() {
this.open = false;
document.body.removeEventListener('click', close, true);
}.bind(this);
document.body.addEventListener('click', close, true);
}
});
</script>
</polymer-element>