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: overlay("hover", $on-surface);
62
transition-duration: 0ms;
63
&,
65
&:active {
66
color: $on-surface;
67
}
68
}
69
&:active {
71
background-color: overlay("pressed", $on-surface);
72
color: $on-surface;
73
transition-duration: $duration-ripple;
74
}
75
&:checked {
77
box-shadow: none;
78
background-color: $overlay-selected;
79
font-weight: normal;
80
&.selected {
82
background-color: overlay("hover", $primary, $on: $overlay-selected);
83
}
84
&:active {
86
background-color: overlay("pressed", $primary, $on: $overlay-selected);
87
}
88
}
89
&:insensitive {
91
color: disabled($on-surface);
92
}
93
}
94
// all icons and other graphical elements
96
.popup-inactive-menu-item {
97
color: $on-surface;
98
&:insensitive {
100
color: disabled($on-surface);
101
}
102
}
103
// symbolic icons in popover
105
.popup-menu-arrow {
107
@if $version >= 3.32 {
108
icon-size: 16px;
109
} @else {
110
width: 16px;
111
height: 16px;
112
}
113
.popup-menu-content & {
115
color: hint($on-surface);
116
}
117
}
118
.popup-menu-icon {
120
icon-size: 16px;
121
color: hint($on-surface);
122
}
123
// popover submenus
125
.popup-sub-menu {
126
border-top: 0;
127
border-bottom: 0;
128
padding-bottom: 0;
129
box-shadow: none;
130
background-color: entry-fill($on-surface);
131
}
132
// container for radio and check boxes
134
.popup-menu-ornament {
135
text-align: right;
136
width: 16px;
137
height: 16px;
138
&:ltr {
140
text-align: right;
141
}
142
&:rtl {
144
text-align: left;
145
}
146
}
147
// separator
149
@if $version >= 3.36 {
150
.popup-separator-menu-item {
151
padding: 0;
152
.popup-separator-menu-item-separator {
154
// -margin-horizontal: 24px;
155
height: 1px; // not really the whole box
156
margin: 8px 0;
157
background-color: divider($on-surface);
158
// submenu separators
160
.popup-sub-menu & {
161
margin: 8px 0;
162
background-color: divider($on-surface);
163
&:ltr {
165
margin-right: 32px;
166
}
167
&:rtl {
169
margin-left: 32px;
170
}
171
}
172
}
173
}
174
} @else {
175
.popup-separator-menu-item {
176
// -margin-horizontal: 24px;
177
height: 1px; // not really the whole box
178
margin: 8px 64px - 24px;
179
border: 0;
180
background-color: divider($on-surface);
181
}
182
}
183
// desktop background menu
185
.background-menu {
186
-boxpointer-gap: 4px;
187
-arrow-rise: 0; // hide the beak on the menu
188
}
189
// system status menu
191
.aggregate-menu {
192
min-width: 21em;
193
// lock screen, shutdown, etc. buttons
195
.popup-menu-icon {
196
padding: 0;
197
margin: 0 4px;
198
-st-icon-style: symbolic; // >= 3.36
199
}
200
.popup-sub-menu .popup-menu-item > :first-child {
202
// account for icons in submenus with padding
203
&:ltr {
204
padding-left: 16px;
205
margin-left: 16px;
206
}
207
&:rtl {
209
padding-right: 16px;
210
margin-right: 16px;
211
}
212
}
213
}
214
@if $version == 3.32 {
216
.system-switch-user-submenu-icon {
217
icon-size: 16px;
218
padding: 0 4px;
219
}
220
} @else if $version < 3.32 {
221
.system-switch-user-submenu-icon.user-icon {
222
icon-size: 20px;
223
padding: 0 2px;
224
}
225
.system-switch-user-submenu-icon.default-icon {
227
icon-size: 16px;
228
padding: 0 4px;
229
}
230
}
231
@if $version < 3.36 {
233
.system-menu-action {
234
-st-icon-style: symbolic; // >= 3.30
235
padding: ($large-size - 16px) / 2;
236
border: 0;
237
border-radius: $large-size / 2; // wish we could do 50%
238
color: hint($on-surface);
239
transition-duration: $duration;
240
&:hover,
242
&:focus {
243
padding: ($large-size - 16px) / 2;
244
border: 0;
245
color: hint($on-surface);
246
}
247
&:focus {
249
background-color: overlay("focus", $on-surface);
250
}
251
&:hover {
253
background-color: overlay("hover", $on-surface);
254
}
255
&:active {
257
background-color: overlay("pressed", $on-surface);
258
color: hint($on-surface);
259
transition-duration: $duration-ripple;
260
}
261
> StIcon {
263
icon-size: 16px;
264
}
265
}
266
}
267