UNPKG

15.7 kBCSSView Raw
1
2.next-sr-only {
3 position: absolute;
4 width: 1px;
5 height: 1px;
6 padding: 0;
7 overflow: hidden;
8 clip: rect(0, 0, 0, 0);
9 white-space: nowrap;
10 border: 0;
11 top: 0;
12 margin: -1px; }
13
14.next-menu[dir="rtl"] .next-menu-item-helper {
15 float: left; }
16
17.next-menu[dir="rtl"] .next-menu-item .next-checkbox,
18.next-menu[dir="rtl"] .next-menu-item .next-radio {
19 margin-left: 4px;
20 margin-left: var(--menu-icon-margin, 4px);
21 margin-right: 0; }
22
23.next-menu[dir="rtl"] .next-menu-hoz-right {
24 float: left; }
25
26.next-menu[dir="rtl"] .next-menu-icon-arrow.next-icon {
27 left: 10px;
28 right: auto; }
29
30.next-menu[dir="rtl"] .next-menu-hoz-icon-arrow.next-icon {
31 left: 6px;
32 right: auto; }
33
34.next-menu[dir="rtl"] .next-menu-icon-selected.next-icon {
35 margin-left: 0;
36 margin-right: -16px;
37 margin-right: calc(0px - var(--menu-padding-horizontal, 20px)/2 - var(--menu-icon-selected-size, 12px)/2); }
38 .next-menu[dir="rtl"] .next-menu-icon-selected.next-icon:before,
39 .next-menu[dir="rtl"] .next-menu-icon-selected.next-icon .next-icon-remote {
40 width: 12px;
41 width: var(--menu-icon-selected-size, 12px);
42 font-size: 12px;
43 font-size: var(--menu-icon-selected-size, 12px);
44 line-height: inherit; }
45 .next-menu[dir="rtl"] .next-menu-icon-selected.next-icon.next-menu-icon-right {
46 right: auto;
47 left: 4px;
48 left: var(--menu-icon-selected-right, 4px); }
49
50.next-menu[dir="rtl"] .next-menu-icon-arrow.next-icon {
51 left: 10px;
52 right: auto; }
53
54.next-menu {
55 box-sizing: border-box;
56 position: relative;
57 min-width: 100px;
58 min-width: var(--s-25, 100px);
59 margin: 0;
60 list-style: none;
61 border: 1px solid #DCDEE3;
62 border: var(--popup-local-border-width, 1px) var(--popup-local-border-style, solid) var(--popup-local-border-color, #DCDEE3);
63 border-radius: 3px;
64 border-radius: var(--popup-local-corner, 3px);
65 box-shadow: none;
66 box-shadow: var(--popup-local-shadow, none);
67 background: #FFFFFF;
68 background: var(--menu-background, #FFFFFF);
69 line-height: 32px;
70 line-height: var(--menu-line-height, 32px);
71 font-size: 12px;
72 font-size: var(--menu-font-size, 12px);
73 animation-duration: 300ms;
74 animation-duration: var(--motion-duration-standard, 300ms);
75 animation-timing-function: ease;
76 animation-timing-function: var(--motion-ease, ease);
77 /* &-popup-content.next-hide { */
78 /* display: none; */
79 /* } */ }
80 .next-menu *,
81 .next-menu *:before,
82 .next-menu *:after {
83 box-sizing: border-box; }
84 .next-menu:focus,
85 .next-menu *:focus {
86 outline: 0; }
87 .next-menu-spacing-lr {
88 padding: 0 0px;
89 padding: 0 var(--popup-spacing-lr, 0px); }
90 .next-menu-spacing-lr.next-menu-outside > .next-menu {
91 height: 100%;
92 overflow-y: auto; }
93 .next-menu-spacing-tb {
94 padding: 0px 0;
95 padding: var(--popup-spacing-tb, 0px) 0; }
96 .next-menu.next-ver {
97 padding: 8px 0px;
98 padding: var(--menu-padding-ver-padding-tb, 8px) var(--menu-padding-ver-padding-lr, 0px); }
99 .next-menu.next-ver .next-menu-item {
100 padding: 0 20px 0 20px;
101 padding: 0 var(--menu-item-padding-ver-padding-r, 20px) 0 var(--menu-item-padding-ver-padding-l, 20px); }
102 .next-menu.next-hoz {
103 padding: 8px 0px;
104 padding: var(--menu-padding-hoz-padding-tb, 8px) var(--menu-padding-hoz-padding-lr, 0px); }
105 .next-menu.next-hoz .next-menu-item {
106 padding: 0 20px;
107 padding: 0 var(--menu-item-padding-hoz-padding-lr, 20px); }
108 .next-menu-embeddable,
109 .next-menu-embeddable .next-menu-item.next-disabled,
110 .next-menu-embeddable .next-menu-item.next-disabled .next-menu-item-text > a {
111 background: transparent;
112 border: none; }
113 .next-menu-embeddable {
114 box-shadow: none; }
115 .next-menu-embeddable .next-menu-item-inner {
116 height: 100%; }
117 .next-menu-content {
118 position: relative;
119 padding: 0;
120 margin: 0;
121 list-style: none; }
122 .next-menu-sub-menu {
123 padding: 0;
124 margin: 0;
125 list-style: none; }
126 .next-menu-sub-menu.next-expand-enter {
127 overflow: hidden; }
128 .next-menu-sub-menu.next-expand-enter-active {
129 transition: height 300ms ease;
130 transition: height var(--motion-duration-standard, 300ms) var(--motion-ease, ease); }
131 .next-menu-sub-menu.next-expand-leave {
132 overflow: hidden; }
133 .next-menu-sub-menu.next-expand-leave-active {
134 transition: height 300ms ease;
135 transition: height var(--motion-duration-standard, 300ms) var(--motion-ease, ease); }
136 .next-menu-item {
137 position: relative;
138 transition: background 100ms linear;
139 transition: background var(--motion-duration-immediately, 100ms) var(--motion-linear, linear);
140 color: #333333;
141 color: var(--menu-color, #333333);
142 cursor: pointer; }
143 .next-menu-item-helper {
144 float: right;
145 color: #999999;
146 color: var(--color-text1-2, #999999);
147 font-style: normal;
148 font-size: 12px;
149 font-size: var(--menu-font-size, 12px); }
150 .next-menu-item .next-checkbox,
151 .next-menu-item .next-radio {
152 margin-right: 4px;
153 margin-right: var(--menu-icon-margin, 4px); }
154 .next-menu-item.next-selected {
155 color: #333333;
156 color: var(--menu-color-selected, #333333);
157 background-color: #FFFFFF;
158 background-color: var(--menu-background-selected, #FFFFFF); }
159 .next-menu-item.next-selected .next-menu-icon-arrow {
160 color: #666666;
161 color: var(--menu-arrow-color, #666666); }
162 .next-menu-item.next-selected .next-menu-icon-selected {
163 color: #5584FF;
164 color: var(--menu-icon-selected-color, #5584FF); }
165 .next-menu-item.next-disabled,
166 .next-menu-item.next-disabled .next-menu-item-text > a {
167 color: #CCCCCC;
168 color: var(--menu-color-disabled, #CCCCCC);
169 background-color: #FFFFFF;
170 background-color: var(--menu-background, #FFFFFF);
171 cursor: not-allowed; }
172 .next-menu-item.next-disabled .next-menu-icon-arrow,
173 .next-menu-item.next-disabled .next-menu-item-text > a .next-menu-icon-arrow {
174 color: #CCCCCC;
175 color: var(--menu-color-disabled, #CCCCCC); }
176 .next-menu-item.next-disabled .next-menu-icon-selected,
177 .next-menu-item.next-disabled .next-menu-item-text > a .next-menu-icon-selected {
178 color: #CCCCCC;
179 color: var(--menu-color-disabled, #CCCCCC); }
180 .next-menu-item:not(.next-disabled):hover, .next-menu-item:not(.next-disabled).next-selected:hover, .next-menu-item:not(.next-disabled).next-selected.next-focused:hover, .next-menu-item:not(.next-disabled).next-selected:focus:hover, .next-menu-item:not(.next-disabled).next-focused, .next-menu-item:not(.next-disabled).next-selected.next-focused, .next-menu-item:not(.next-disabled).next-selected:focus {
181 color: #333333;
182 color: var(--menu-color-hover, #333333);
183 background-color: #F2F3F7;
184 background-color: var(--menu-background-hover, #F2F3F7); }
185 .next-menu-item:not(.next-disabled):hover .next-menu-icon-arrow, .next-menu-item:not(.next-disabled).next-selected:hover .next-menu-icon-arrow, .next-menu-item:not(.next-disabled).next-selected.next-focused:hover .next-menu-icon-arrow, .next-menu-item:not(.next-disabled).next-selected:focus:hover .next-menu-icon-arrow, .next-menu-item:not(.next-disabled).next-focused .next-menu-icon-arrow, .next-menu-item:not(.next-disabled).next-selected.next-focused .next-menu-icon-arrow, .next-menu-item:not(.next-disabled).next-selected:focus .next-menu-icon-arrow {
186 color: #333333;
187 color: var(--menu-arrow-color-hover, #333333); }
188 .next-menu-item:not(.next-disabled):hover .next-menu-icon-selected, .next-menu-item:not(.next-disabled).next-selected:hover .next-menu-icon-selected, .next-menu-item:not(.next-disabled).next-selected.next-focused:hover .next-menu-icon-selected, .next-menu-item:not(.next-disabled).next-selected:focus:hover .next-menu-icon-selected, .next-menu-item:not(.next-disabled).next-focused .next-menu-icon-selected, .next-menu-item:not(.next-disabled).next-selected.next-focused .next-menu-icon-selected, .next-menu-item:not(.next-disabled).next-selected:focus .next-menu-icon-selected {
189 color: #5584FF;
190 color: var(--menu-icon-selected-hover-color, #5584FF); }
191 .next-menu-item-inner {
192 height: 32px;
193 height: var(--menu-line-height, 32px);
194 font-size: 12px;
195 font-size: var(--menu-font-size, 12px);
196 overflow: hidden;
197 text-overflow: ellipsis;
198 white-space: nowrap;
199 word-wrap: normal; }
200 .next-menu-item .next-menu-item-text {
201 vertical-align: middle; }
202 .next-menu-item .next-menu-item-text > a {
203 display: inline-block;
204 text-decoration: none;
205 color: #333333;
206 color: var(--menu-color, #333333); }
207 .next-menu-item .next-menu-item-text > a::before {
208 position: absolute;
209 background-color: transparent;
210 top: 0;
211 left: 0;
212 bottom: 0;
213 right: 0;
214 content: ''; }
215 .next-menu.next-hoz {
216 padding: 0; }
217 .next-menu.next-hoz.next-menu-nowrap {
218 overflow: hidden;
219 white-space: nowrap; }
220 .next-menu.next-hoz.next-menu-nowrap .next-menu-more {
221 text-align: center; }
222 .next-menu.next-hoz > .next-menu-item,
223 .next-menu.next-hoz > .next-menu-sub-menu-wrapper,
224 .next-menu.next-hoz .next-menu-content > .next-menu-item {
225 display: inline-block;
226 vertical-align: top; }
227 .next-menu.next-hoz .next-menu-header,
228 .next-menu.next-hoz .next-menu-content,
229 .next-menu.next-hoz .next-menu-footer {
230 display: inline-block; }
231 .next-menu-hoz-right {
232 float: right; }
233 .next-menu-group-label {
234 padding: 0 12px;
235 padding: 0 var(--menu-padding-title-horizontal, 12px);
236 color: #999999;
237 color: var(--color-text1-2, #999999); }
238 .next-menu-divider {
239 margin: 8px 12px;
240 margin: var(--menu-divider-margin-ver, 8px) var(--menu-divider-margin-hoz, 12px);
241 border-bottom: 1px solid #E6E7EB;
242 border-bottom: var(--menu-divider-width, 1px) var(--menu-divider-style, solid) var(--menu-divider-color, #E6E7EB); }
243 .next-menu .next-menu-icon-selected.next-icon {
244 position: absolute;
245 top: 0;
246 margin-left: -16px;
247 margin-left: calc(0px - var(--menu-item-padding-ver-padding-l, 20px) + var(--menu-icon-selected-right, 4px)); }
248 .next-menu .next-menu-icon-selected.next-icon:before,
249 .next-menu .next-menu-icon-selected.next-icon .next-icon-remote {
250 width: 12px;
251 width: var(--menu-icon-selected-size, 12px);
252 font-size: 12px;
253 font-size: var(--menu-icon-selected-size, 12px);
254 line-height: inherit; }
255 .next-menu .next-menu-icon-selected.next-icon.next-menu-icon-right {
256 right: 4px;
257 right: var(--menu-icon-selected-right, 4px); }
258 .next-menu .next-menu-symbol-icon-selected.next-menu-icon-selected::before {
259 content: "";
260 content: var(--menu-select-icon-content, ""); }
261 .next-menu .next-menu-icon-arrow.next-icon {
262 position: absolute;
263 top: 0;
264 right: 10px;
265 right: var(--menu-arrow-right, 10px);
266 color: #666666;
267 color: var(--menu-arrow-color, #666666);
268 transition: all 100ms linear;
269 transition: all var(--motion-duration-immediately, 100ms) var(--motion-linear, linear); }
270 .next-menu .next-menu-icon-arrow.next-icon:before,
271 .next-menu .next-menu-icon-arrow.next-icon .next-icon-remote {
272 width: 8px;
273 width: var(--menu-icon-size, 8px);
274 font-size: 8px;
275 font-size: var(--menu-icon-size, 8px);
276 line-height: inherit; }
277 @media all and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: 0.001dpcm) {
278 .next-menu .next-menu-icon-arrow.next-icon {
279 transform: scale(0.5);
280 margin-left: -4px;
281 margin-left: calc(0px - var(--icon-s, 16px)/2 + var(--menu-icon-size, 8px)/2);
282 margin-right: -4px;
283 margin-right: calc(0px - var(--icon-s, 16px)/2 + var(--menu-icon-size, 8px)/2); }
284 .next-menu .next-menu-icon-arrow.next-icon:before {
285 width: 16px;
286 width: var(--icon-s, 16px);
287 font-size: 16px;
288 font-size: var(--icon-s, 16px); } }
289 .next-menu .next-menu-icon-arrow-down::before {
290 content: "";
291 content: var(--menu-fold-icon-content, ""); }
292 .next-menu .next-menu-icon-arrow-down.next-open {
293 transform: rotate(180deg); }
294 .next-menu .next-menu-icon-arrow-down.next-open:before,
295 .next-menu .next-menu-icon-arrow-down.next-open .next-icon-remote {
296 width: 8px;
297 width: var(--menu-icon-size, 8px);
298 font-size: 8px;
299 font-size: var(--menu-icon-size, 8px);
300 line-height: inherit; }
301 @media all and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: 0.001dpcm) {
302 .next-menu .next-menu-icon-arrow-down.next-open {
303 transform: scale(0.5) rotate(180deg);
304 margin-left: -4px;
305 margin-left: calc(0px - var(--icon-s, 16px)/2 + var(--menu-icon-size, 8px)/2);
306 margin-right: -4px;
307 margin-right: calc(0px - var(--icon-s, 16px)/2 + var(--menu-icon-size, 8px)/2); }
308 .next-menu .next-menu-icon-arrow-down.next-open:before {
309 width: 16px;
310 width: var(--icon-s, 16px);
311 font-size: 16px;
312 font-size: var(--icon-s, 16px); } }
313 .next-menu .next-menu-symbol-popupfold::before {
314 content: "";
315 content: var(--menu-popupfold-icon-content, ""); }
316 .next-menu .next-menu-icon-arrow-right.next-open {
317 transform: rotate(-90deg); }
318 .next-menu .next-menu-icon-arrow-right.next-open:before,
319 .next-menu .next-menu-icon-arrow-right.next-open .next-icon-remote {
320 width: 8px;
321 width: var(--menu-icon-size, 8px);
322 font-size: 8px;
323 font-size: var(--menu-icon-size, 8px);
324 line-height: inherit; }
325 @media all and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: 0.001dpcm) {
326 .next-menu .next-menu-icon-arrow-right.next-open {
327 transform: scale(0.5) rotate(-90deg);
328 margin-left: -4px;
329 margin-left: calc(0px - var(--icon-s, 16px)/2 + var(--menu-icon-size, 8px)/2);
330 margin-right: -4px;
331 margin-right: calc(0px - var(--icon-s, 16px)/2 + var(--menu-icon-size, 8px)/2); }
332 .next-menu .next-menu-icon-arrow-right.next-open:before {
333 width: 16px;
334 width: var(--icon-s, 16px);
335 font-size: 16px;
336 font-size: var(--icon-s, 16px); } }
337 .next-menu .next-menu-hoz-icon-arrow.next-icon {
338 position: absolute;
339 top: 0;
340 right: 6px;
341 color: #666666;
342 color: var(--menu-arrow-color, #666666);
343 transition: all 100ms linear;
344 transition: all var(--motion-duration-immediately, 100ms) var(--motion-linear, linear); }
345 .next-menu .next-menu-hoz-icon-arrow.next-icon:before,
346 .next-menu .next-menu-hoz-icon-arrow.next-icon .next-icon-remote {
347 width: 12px;
348 width: var(--menu-hoz-icon-size, 12px);
349 font-size: 12px;
350 font-size: var(--menu-hoz-icon-size, 12px);
351 line-height: inherit; }
352 .next-menu .next-menu-hoz-icon-arrow.next-icon::before {
353 content: "";
354 content: var(--menu-fold-icon-content, ""); }
355 .next-menu-unfold-icon::before {
356 content: "";
357 content: var(--menu-unfold-icon-content, ""); }
358 .next-menu .next-menu-hoz-icon-arrow.next-open {
359 transform: rotate(180deg); }
360 .next-menu .next-menu-hoz-icon-arrow.next-open:before,
361 .next-menu .next-menu-hoz-icon-arrow.next-open .next-icon-remote {
362 width: 12px;
363 width: var(--menu-hoz-icon-size, 12px);
364 font-size: 12px;
365 font-size: var(--menu-hoz-icon-size, 12px);
366 line-height: inherit; }
367 .next-menu.next-context {
368 line-height: 24px;
369 line-height: var(--s-6, 24px); }
370 .next-menu.next-context .next-menu-item-inner {
371 height: 24px;
372 height: var(--s-6, 24px); }