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
|
<style include="settings-shared">
:host {
box-sizing: border-box;
display: block;
padding-bottom: 2px;
padding-inline-end: var(--settings-menu-padding-inline-end);
padding-inline-start: var(--settings-menu-padding-inline-start);
padding-top: var(--settings-menu-padding-top);
width: var(--settings-menu-width);
}
:host * {
-webkit-tap-highlight-color: transparent;
}
/* Override iron-selector focus CSS for selectable items. */
[selectable] > :focus {
background-color: transparent;
}
#menuSeparator {
border-bottom: var(--cr-separator-line);
margin-bottom: 8px;
margin-top: 8px;
}
#topMenu > os-settings-menu-item {
margin-bottom: 8px;
}
#topMenu > os-settings-menu-item:last-of-type {
/* Reserve space so the last menu item isn't too close to the window
* bottom edge, 48px under the text baseline. */
margin-bottom: calc(48px - calc(
var(--tap-target-padding) + var(--settings-menu-item-border-width)));
}
</style>
<iron-selector id="topMenu"
role="navigation"
selectable="os-settings-menu-item"
attr-for-selected="path"
selected="[[selectedItemPath_]]"
on-iron-activate="onItemActivated_"
on-iron-select="onItemSelected_"
on-iron-deselect="onItemDeselected_">
<template id="topMenuRepeat" is="dom-repeat" items="[[menuItems_]]">
<os-settings-menu-item path="[[item.path]]"
icon="[[item.icon]]"
label="[[item.label]]"
sublabel="[[item.sublabel]]"
tooltip-position="[[getMenuItemTooltipPosition_(isRtl_)]]">
</os-settings-menu-item>
</template>
</iron-selector>
|
