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
|
<style include="settings-shared">
:host {
/* The tap target extends slightly above each visible menu item. */
--tap-target-padding: 3px;
align-items: center;
background: transparent;
/* Always apply border so item doesn't shift when focused. */
border-color: transparent;
border-radius: 16px;
border-style: solid;
border-width: var(--settings-menu-item-border-width);
box-sizing: border-box;
color: var(--cros-text-color-primary);
display: flex;
flex-direction: row;
font: var(--cros-button-1-font);
height: 60px;
/* Consider border width for padding */
padding-inline-start: calc(12px - var(--settings-menu-item-border-width));
padding-inline-end: calc(12px - var(--settings-menu-item-border-width));
text-decoration: none;
width: var(--settings-menu-item-width);
}
/* Label & sublabel styles */
#labelWrapper {
/* Expand to fill remaining space */
flex-grow: 1;
max-width: 200px;
}
#label,
#sublabel {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
#sublabel {
color: var(--cros-sys-on_surface_variant);
font: var(--cros-body-2-font);
}
paper-tooltip {
--paper-tooltip-min-width: max-content;
}
/* Default icon styles */
iron-icon {
margin-inline-end: 12px;
pointer-events: none;
}
:host(:not(.iron-selected)) iron-icon {
--iron-icon-fill-color: var(--cros-sys-primary);
}
/* Hover state */
:host(:not(.iron-selected):hover) {
background-color: var(--cros-sys-hover_on_subtle) !important;
}
/* Focused state */
:host-context(.focus-outline-visible):host(:focus) {
border-color: var(--cros-focus-ring-color);
}
/* Selected state */
:host(.iron-selected) {
background-color: var(--cros-sys-primary) !important;
color: var(--cros-sys-on_primary);
}
:host(.iron-selected) > iron-icon {
--iron-icon-fill-color: var(--cros-sys-on_primary);
}
:host(.iron-selected) #sublabel {
color: var(--cros-sys-surface_variant);
}
</style>
<iron-icon icon="[[icon]]" hidden="[[!icon]]"></iron-icon>
<div id="labelWrapper">
<div id="label">[[label]]</div>
<div id="sublabel">[[sublabel]]</div>
</div>
<paper-tooltip
position="[[tooltipPosition]]"
offset="4"
fit-to-visible-bounds
animation-delay="1000"
aria-hidden="true">
[[label]]
</paper-tooltip>
|
