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
.popup-separator-menu-item {
137
// -margin-horizontal: 24px;
138
height: 1px; // not really the whole box
139
margin: 8px 64px - 24px;
140
background-color: $divider;
141
border-color: transparent;
143
border-bottom-width: 0;
144
border-bottom-style: none;
145
}
146
// desktop background menu
148
.background-menu {
149
-boxpointer-gap: 4px;
150
-arrow-rise: 0; // hide the beak on the menu
151
}
152
// system status menu
154
.aggregate-menu {
155
min-width: 21em;
156
// lock screen, shutdown, etc. buttons
158
.popup-menu-icon {
159
padding: 0;
160
margin: 0 4px;
161
-st-icon-style: symbolic; // >= 3.36
162
}
163
.popup-sub-menu .popup-menu-item > :first-child {
165
// account for icons in submenus with padding
166
&:ltr {
167
padding-left: 16px;
168
margin-left: 16px;
169
}
170
&:rtl {
172
padding-right: 16px;
173
margin-right: 16px;
174
}
175
}
176
}
177
@if $version == 3.32 {
179
.system-switch-user-submenu-icon {
180
icon-size: 16px;
181
padding: 0 4px;
182
}
183
} @else if $version <= 3.30 {
184
.system-switch-user-submenu-icon.user-icon {
185
icon-size: 20px;
186
padding: 0 2px;
187
}
188
.system-switch-user-submenu-icon.default-icon {
190
icon-size: 16px;
191
padding: 0 4px;
192
}
193
}
194
@if $version <= 3.34 {
196
.system-menu-action {
197
-st-icon-style: symbolic; // >= 3.30
198
padding: ($large-size - 16px) / 2;
199
border: 0;
200
border-radius: $large-size / 2; // wish we could do 50%
201
color: $text2;
202
transition-duration: $duration;
203
&:hover,
205
&:focus {
206
padding: ($large-size - 16px) / 2;
207
border: 0;
208
color: $text2;
209
}
210
&:focus {
212
background-color: $overlay-focus;
213
}
214
&:hover {
216
background-color: $overlay-hover;
217
}
218
&:active {
220
background-color: $overlay-active;
221
color: $text2;
222
transition-duration: $duration-ripple;
223
}
224
> StIcon {
226
icon-size: 16px;
227
}
228
}
229
}
230