ASCII text
1
/* Popovers/Menus */
2
// the popover itself
4
.popup-menu-boxpointer {
5
-arrow-base: 0;
6
-arrow-rise: 0;
7
-arrow-border-width: 0;
8
-arrow-border-color: transparent;
9
-arrow-border-radius: 20px; // This is necessary for the weird bug: materia-theme#296
10
-arrow-box-shadow: none; // dreaming bugzilla #689995
11
-arrow-background-color: transparent;
12
}
13
// container of the popover menu
15
.popup-menu {
16
min-width: 15em;
17
border-color: transparent;
18
color: inherit;
19
// dunno what that is
21
.popup-status-menu-item {
22
// font-weight: normal;
23
// color: pink;
24
}
25
&.panel-menu {
27
-boxpointer-gap: 0; // distance from the panel
28
margin-bottom: 1.75em;
29
}
30
}
31
.popup-menu-content {
33
margin: 8px;
34
padding: 8px 0;
35
border-radius: $corner-radius;
36
box-shadow: $shadow-z4;
37
background-color: $surface-z8;
38
color: $on-surface;
39
}
40
// menu items
42
.popup-menu-item {
43
// min-height: $menuitem-size - 4px * 2;
44
spacing: 8px;
45
padding: 0;
46
transition-duration: $duration;
47
&:ltr {
49
padding: 0.4em;
50
padding-right: 24px;
51
padding-left: 0;
52
}
53
&:rtl {
55
padding: 0.4em;
56
padding-right: 0;
57
padding-left: 24px;
58
}
59
&.selected {
61
background-color: hover-overlay($on-surface);
62
transition-duration: 0ms;
63
&,
65
&:active {
66
color: $on-surface;
67
}
68
}
69
&:active {
71
background-color: pressed-overlay($on-surface);
72
color: $on-surface;
73
transition-duration: $duration-ripple;
74
}
75
&:checked {
77
box-shadow: none;
78
background-color: $selected-overlay;
79
font-weight: normal;
80
&.selected {
82
background-color: hover-overlay($primary, $on: $selected-overlay);
83
}
84
&:active {
86
background-color: pressed-overlay($primary, $on: $selected-overlay);
87
}
88
}
89
&:insensitive {
91
color: disabled($on-surface);
92
}
93
.toggle-switch {
95
width: 20px;
96
height: 20px;
97
background-image: url("assets/menu-item-toggle-off.svg");
98
&:checked {
100
background-image: url("assets/menu-item-toggle-on.svg");
101
}
102
}
103
}
104
// all icons and other graphical elements
106
.popup-inactive-menu-item {
107
color: $on-surface;
108
&:insensitive {
110
color: disabled($on-surface);
111
}
112
}
113
// symbolic icons in popover
115
.popup-menu-arrow {
117
@if $version >= 3.32 {
118
icon-size: 16px;
119
} @else {
120
width: 16px;
121
height: 16px;
122
}
123
.popup-menu-content & {
125
color: hint($on-surface);
126
}
127
}
128
.popup-menu-icon {
130
icon-size: 16px;
131
color: hint($on-surface);
132
}
133
// popover submenus
135
.popup-sub-menu {
136
border-top: 0;
137
border-bottom: 0;
138
padding-bottom: 0;
139
box-shadow: none;
140
background-color: entry-fill($on-surface);
141
}
142
// container for radio and check boxes
144
.popup-menu-ornament {
145
text-align: right;
146
width: 16px;
147
height: 16px;
148
&:ltr {
150
text-align: right;
151
}
152
&:rtl {
154
text-align: left;
155
}
156
}
157
// separator
159
@if $version >= 3.36 {
160
.popup-separator-menu-item {
161
padding: 0;
162
.popup-separator-menu-item-separator {
164
// -margin-horizontal: 24px;
165
height: 1px; // not really the whole box
166
margin: 8px 0;
167
background-color: divider($on-surface);
168
// submenu separators
170
.popup-sub-menu & {
171
margin: 8px 0;
172
background-color: divider($on-surface);
173
&:ltr {
175
margin-right: 32px;
176
}
177
&:rtl {
179
margin-left: 32px;
180
}
181
}
182
}
183
}
184
} @else {
185
.popup-separator-menu-item {
186
// -margin-horizontal: 24px;
187
height: 1px; // not really the whole box
188
margin: 8px 64px - 24px;
189
border: 0;
190
background-color: divider($on-surface);
191
}
192
}
193
// desktop background menu
195
.background-menu {
196
-boxpointer-gap: 4px;
197
-arrow-rise: 0; // hide the beak on the menu
198
}
199
// system status menu
201
.aggregate-menu {
202
min-width: 21em;
203
// lock screen, shutdown, etc. buttons
205
.popup-menu-icon {
206
padding: 0;
207
margin: 0 4px;
208
-st-icon-style: symbolic; // >= 3.36
209
}
210
.popup-sub-menu .popup-menu-item > :first-child {
212
// account for icons in submenus with padding
213
&:ltr {
214
padding-left: 16px;
215
margin-left: 16px;
216
}
217
&:rtl {
219
padding-right: 16px;
220
margin-right: 16px;
221
}
222
}
223
}
224
@if $version == 3.32 {
226
.system-switch-user-submenu-icon {
227
icon-size: 16px;
228
padding: 0 4px;
229
}
230
} @else if $version < 3.32 {
231
.system-switch-user-submenu-icon.user-icon {
232
icon-size: 20px;
233
padding: 0 2px;
234
}
235
.system-switch-user-submenu-icon.default-icon {
237
icon-size: 16px;
238
padding: 0 4px;
239
}
240
}
241
@if $version < 3.36 {
243
.system-menu-action {
244
-st-icon-style: symbolic; // >= 3.30
245
padding: ($large-size - 16px) / 2;
246
border: 0;
247
border-radius: $large-size / 2; // wish we could do 50%
248
color: hint($on-surface);
249
transition-duration: $duration;
250
&:hover,
252
&:focus {
253
padding: ($large-size - 16px) / 2;
254
border: 0;
255
color: hint($on-surface);
256
}
257
&:focus {
259
background-color: focus-overlay($on-surface);
260
}
261
&:hover {
263
background-color: hover-overlay($on-surface);
264
}
265
&:active {
267
background-color: pressed-overlay($on-surface);
268
color: hint($on-surface);
269
transition-duration: $duration-ripple;
270
}
271
> StIcon {
273
icon-size: 16px;
274
}
275
}
276
}
277