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: 4px; // distance from the panel
28
margin-bottom: 1.75em;
29
}
30
}
31
.popup-menu-content {
33
margin: 5px 8px 8px;
34
padding: 8px 0;
35
border-radius: $corner-radius;
36
box-shadow: $shadow-2;
37
background-color: $surface;
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, $background: $overlay-selected);
83
}
84
&:active {
86
background-color: overlay("pressed", $primary, $background: $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
}
139
// separator
141
@if $version >= 3.36 {
142
.popup-separator-menu-item {
143
padding: 0;
144
.popup-separator-menu-item-separator {
146
// -margin-horizontal: 24px;
147
height: 1px; // not really the whole box
148
margin: 8px 0;
149
background-color: divider($on-surface);
150
// submenu separators
152
.popup-sub-menu & {
153
margin: 8px 0;
154
background-color: divider($on-surface);
155
&:ltr {
157
margin-right: 32px;
158
}
159
&:rtl {
161
margin-left: 32px;
162
}
163
}
164
}
165
}
166
} @else {
167
.popup-separator-menu-item {
168
// -margin-horizontal: 24px;
169
height: 1px; // not really the whole box
170
margin: 8px 64px - 24px;
171
border: 0;
172
background-color: divider($on-surface);
173
}
174
}
175
// desktop background menu
177
.background-menu {
178
-boxpointer-gap: 4px;
179
-arrow-rise: 0; // hide the beak on the menu
180
}
181
// system status menu
183
.aggregate-menu {
184
min-width: 21em;
185
// lock screen, shutdown, etc. buttons
187
.popup-menu-icon {
188
padding: 0;
189
margin: 0 4px;
190
-st-icon-style: symbolic; // >= 3.36
191
}
192
.popup-sub-menu .popup-menu-item > :first-child {
194
// account for icons in submenus with padding
195
&:ltr {
196
padding-left: 16px;
197
margin-left: 16px;
198
}
199
&:rtl {
201
padding-right: 16px;
202
margin-right: 16px;
203
}
204
}
205
}
206
@if $version == 3.32 {
208
.system-switch-user-submenu-icon {
209
icon-size: 16px;
210
padding: 0 4px;
211
}
212
} @else if $version <= 3.30 {
213
.system-switch-user-submenu-icon.user-icon {
214
icon-size: 20px;
215
padding: 0 2px;
216
}
217
.system-switch-user-submenu-icon.default-icon {
219
icon-size: 16px;
220
padding: 0 4px;
221
}
222
}
223
@if $version <= 3.34 {
225
.system-menu-action {
226
-st-icon-style: symbolic; // >= 3.30
227
padding: ($large-size - 16px) / 2;
228
border: 0;
229
border-radius: $large-size / 2; // wish we could do 50%
230
color: hint($on-surface);
231
transition-duration: $duration;
232
&:hover,
234
&:focus {
235
padding: ($large-size - 16px) / 2;
236
border: 0;
237
color: hint($on-surface);
238
}
239
&:focus {
241
background-color: overlay("focus", $on-surface);
242
}
243
&:hover {
245
background-color: overlay("hover", $on-surface);
246
}
247
&:active {
249
background-color: overlay("pressed", $on-surface);
250
color: hint($on-surface);
251
transition-duration: $duration-ripple;
252
}
253
> StIcon {
255
icon-size: 16px;
256
}
257
}
258
}
259