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: $text;
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;
62
transition-duration: 0ms;
63
&,
65
&:active {
66
color: $text;
67
}
68
}
69
&:active {
71
background-color: $overlay-active;
72
color: $text;
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: rgba($primary, .4);
83
}
84
&:active {
86
background-color: rgba($primary, .6);
87
}
88
}
89
&:insensitive {
91
color: $text-disabled;
92
}
93
}
94
// all icons and other graphical elements
96
.popup-inactive-menu-item {
97
color: $text;
98
&:insensitive {
100
color: $text-disabled;
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
}
114
.popup-menu-icon {
116
icon-size: 16px;
117
}
118
// popover submenus
120
.popup-sub-menu {
121
border-top: 0;
122
border-bottom: 0;
123
padding-bottom: 0;
124
box-shadow: none;
125
background-color: $entry-fill;
126
}
127
// container for radio and check boxes
129
.popup-menu-ornament {
130
text-align: right;
131
width: 16px;
132
height: 16px;
133
}
134
// separator
136
@if $version >= 3.36 {
137
.popup-separator-menu-item {
138
padding: 0;
139
.popup-separator-menu-item-separator {
141
// -margin-horizontal: 24px;
142
height: 1px; // not really the whole box
143
margin: 8px 0;
144
background-color: $divider;
145
// submenu separators
147
.popup-sub-menu & {
148
margin: 8px 0;
149
background-color: $divider;
150
&:ltr {
152
margin-right: 32px;
153
}
154
&:rtl {
156
margin-left: 32px;
157
}
158
}
159
}
160
}
161
} @else {
162
.popup-separator-menu-item {
163
// -margin-horizontal: 24px;
164
height: 1px; // not really the whole box
165
margin: 8px 64px - 24px;
166
border: 0;
167
background-color: $divider;
168
}
169
}
170
// desktop background menu
172
.background-menu {
173
-boxpointer-gap: 4px;
174
-arrow-rise: 0; // hide the beak on the menu
175
}
176
// system status menu
178
.aggregate-menu {
179
min-width: 21em;
180
// lock screen, shutdown, etc. buttons
182
.popup-menu-icon {
183
padding: 0;
184
margin: 0 4px;
185
-st-icon-style: symbolic; // >= 3.36
186
}
187
.popup-sub-menu .popup-menu-item > :first-child {
189
// account for icons in submenus with padding
190
&:ltr {
191
padding-left: 16px;
192
margin-left: 16px;
193
}
194
&:rtl {
196
padding-right: 16px;
197
margin-right: 16px;
198
}
199
}
200
}
201
@if $version == 3.32 {
203
.system-switch-user-submenu-icon {
204
icon-size: 16px;
205
padding: 0 4px;
206
}
207
} @else if $version <= 3.30 {
208
.system-switch-user-submenu-icon.user-icon {
209
icon-size: 20px;
210
padding: 0 2px;
211
}
212
.system-switch-user-submenu-icon.default-icon {
214
icon-size: 16px;
215
padding: 0 4px;
216
}
217
}
218
@if $version <= 3.34 {
220
.system-menu-action {
221
-st-icon-style: symbolic; // >= 3.30
222
padding: ($large-size - 16px) / 2;
223
border: 0;
224
border-radius: $large-size / 2; // wish we could do 50%
225
color: $text2;
226
transition-duration: $duration;
227
&:hover,
229
&:focus {
230
padding: ($large-size - 16px) / 2;
231
border: 0;
232
color: $text2;
233
}
234
&:focus {
236
background-color: $overlay-focus;
237
}
238
&:hover {
240
background-color: $overlay-hover;
241
}
242
&:active {
244
background-color: $overlay-active;
245
color: $text2;
246
transition-duration: $duration-ripple;
247
}
248
> StIcon {
250
icon-size: 16px;
251
}
252
}
253
}
254