Update OOUI to v0.25.3
[lhc/web/wiklou.git] / resources / lib / oojs-ui / oojs-ui-widgets-wikimediaui.css
1 /*!
2 * OOUI v0.25.3
3 * https://www.mediawiki.org/wiki/OOUI
4 *
5 * Copyright 2011–2018 OOUI Team and other contributors.
6 * Released under the MIT license
7 * http://oojs.mit-license.org
8 *
9 * Date: 2018-03-07T06:52:40Z
10 */
11 /**
12 * WikimediaUI Base v0.10.0
13 * Wikimedia Foundation user interface base variables
14 */
15 .oo-ui-draggableElement-handle:not( .oo-ui-draggableElement-undraggable ).oo-ui-widget {
16 cursor: move;
17 cursor: url(images/grab.cur );
18 cursor: -webkit-grab;
19 cursor: -moz-grab;
20 cursor: grab;
21 }
22 .oo-ui-draggableElement-handle:not( .oo-ui-draggableElement-undraggable ):active {
23 cursor: url(images/grabbing.cur );
24 cursor: -webkit-grabbing;
25 cursor: -moz-grabbing;
26 cursor: grabbing;
27 }
28 .oo-ui-draggableElement-handle.oo-ui-widget-disabled,
29 .oo-ui-widget-disabled .oo-ui-draggableElement-handle {
30 cursor: default;
31 }
32 .oo-ui-draggableElement-placeholder {
33 opacity: 0.2;
34 }
35 .oo-ui-draggableGroupElement-horizontal .oo-ui-draggableElement {
36 display: inline-block;
37 }
38 .oo-ui-bookletLayout-stackLayout.oo-ui-stackLayout-continuous > .oo-ui-panelLayout-scrollable {
39 overflow: hidden;
40 }
41 .oo-ui-bookletLayout-stackLayout > .oo-ui-panelLayout {
42 width: 100%;
43 -webkit-box-sizing: border-box;
44 -moz-box-sizing: border-box;
45 box-sizing: border-box;
46 }
47 .oo-ui-bookletLayout-outlinePanel-editable > .oo-ui-outlineSelectWidget {
48 height: auto;
49 position: absolute;
50 top: 0;
51 left: 0;
52 right: 0;
53 bottom: 2.5em;
54 overflow: auto;
55 }
56 .oo-ui-bookletLayout-outlinePanel > .oo-ui-outlineControlsWidget {
57 position: absolute;
58 bottom: 0;
59 left: 0;
60 right: 0;
61 height: 2.5em;
62 }
63 .oo-ui-bookletLayout-stackLayout > .oo-ui-panelLayout {
64 padding: 1.5em;
65 }
66 .oo-ui-bookletLayout-outlinePanel > .oo-ui-outlineControlsWidget {
67 border-top: 1px solid #c8ccd1;
68 }
69 .oo-ui-bookletLayout > .oo-ui-menuLayout-menu {
70 border-right: 1px solid #c8ccd1;
71 }
72 .oo-ui-indexLayout {
73 /* Use two classes to ensure increased specificity over menuLayout */
74 }
75 .oo-ui-indexLayout.oo-ui-menuLayout > .oo-ui-menuLayout-menu {
76 height: auto;
77 }
78 .oo-ui-indexLayout.oo-ui-menuLayout-expanded.oo-ui-menuLayout > .oo-ui-menuLayout-menu {
79 height: 3em;
80 white-space: nowrap;
81 }
82 .oo-ui-indexLayout.oo-ui-menuLayout-expanded.oo-ui-menuLayout > .oo-ui-menuLayout-content {
83 top: 3em;
84 }
85 .oo-ui-indexLayout-stackLayout > .oo-ui-panelLayout {
86 padding: 1.5em;
87 }
88 .oo-ui-indexLayout.oo-ui-menuLayout-expanded > .oo-ui-menuLayout-menu {
89 height: 2.75em;
90 }
91 .oo-ui-indexLayout.oo-ui-menuLayout-expanded > .oo-ui-menuLayout-content {
92 top: 2.75em;
93 }
94 .oo-ui-menuLayout {
95 top: 0;
96 left: 0;
97 right: 0;
98 bottom: 0;
99 }
100 .oo-ui-menuLayout-expanded,
101 .oo-ui-menuLayout-expanded > .oo-ui-menuLayout-menu,
102 .oo-ui-menuLayout-expanded > .oo-ui-menuLayout-content {
103 position: absolute;
104 }
105 .oo-ui-menuLayout-expanded > .oo-ui-menuLayout-menu {
106 z-index: 1;
107 }
108 .oo-ui-menuLayout-static.oo-ui-menuLayout-after,
109 .oo-ui-menuLayout-static.oo-ui-menuLayout-before {
110 display: table;
111 width: 100%;
112 }
113 .oo-ui-menuLayout-static.oo-ui-menuLayout-after > .oo-ui-menuLayout-menu,
114 .oo-ui-menuLayout-static.oo-ui-menuLayout-before > .oo-ui-menuLayout-menu,
115 .oo-ui-menuLayout-static.oo-ui-menuLayout-after > .oo-ui-menuLayout-content,
116 .oo-ui-menuLayout-static.oo-ui-menuLayout-before > .oo-ui-menuLayout-content {
117 display: table-cell;
118 vertical-align: top;
119 }
120 .oo-ui-menuLayout > .oo-ui-menuLayout-menu,
121 .oo-ui-menuLayout > .oo-ui-menuLayout-content {
122 -webkit-transition: all 200ms ease;
123 -moz-transition: all 200ms ease;
124 transition: all 200ms ease;
125 }
126 .oo-ui-menuLayout > .oo-ui-menuLayout-menu {
127 height: 18em;
128 width: 18em;
129 }
130 .oo-ui-menuLayout > .oo-ui-menuLayout-content {
131 top: 18em;
132 left: 18em;
133 right: 18em;
134 bottom: 18em;
135 }
136 .oo-ui-menuLayout.oo-ui-menuLayout-hideMenu > .oo-ui-menuLayout-menu {
137 width: 0 !important;
138 height: 0 !important;
139 overflow: hidden;
140 }
141 .oo-ui-menuLayout.oo-ui-menuLayout-hideMenu > .oo-ui-menuLayout-content {
142 top: 0 !important;
143 left: 0 !important;
144 right: 0 !important;
145 bottom: 0 !important;
146 }
147 .oo-ui-menuLayout.oo-ui-menuLayout-showMenu.oo-ui-menuLayout-top > .oo-ui-menuLayout-menu {
148 width: auto !important;
149 left: 0;
150 top: 0;
151 right: 0;
152 }
153 .oo-ui-menuLayout.oo-ui-menuLayout-showMenu.oo-ui-menuLayout-top > .oo-ui-menuLayout-content {
154 right: 0 !important;
155 bottom: 0 !important;
156 left: 0 !important;
157 }
158 .oo-ui-menuLayout.oo-ui-menuLayout-showMenu.oo-ui-menuLayout-after > .oo-ui-menuLayout-menu {
159 height: auto !important;
160 top: 0;
161 right: 0;
162 bottom: 0;
163 }
164 .oo-ui-menuLayout.oo-ui-menuLayout-showMenu.oo-ui-menuLayout-after > .oo-ui-menuLayout-content {
165 bottom: 0 !important;
166 left: 0 !important;
167 top: 0 !important;
168 }
169 .oo-ui-menuLayout.oo-ui-menuLayout-showMenu.oo-ui-menuLayout-bottom > .oo-ui-menuLayout-menu {
170 width: auto !important;
171 right: 0;
172 bottom: 0;
173 left: 0;
174 }
175 .oo-ui-menuLayout.oo-ui-menuLayout-showMenu.oo-ui-menuLayout-bottom > .oo-ui-menuLayout-content {
176 left: 0 !important;
177 top: 0 !important;
178 right: 0 !important;
179 }
180 .oo-ui-menuLayout.oo-ui-menuLayout-showMenu.oo-ui-menuLayout-before > .oo-ui-menuLayout-menu {
181 height: auto !important;
182 bottom: 0;
183 left: 0;
184 top: 0;
185 }
186 .oo-ui-menuLayout.oo-ui-menuLayout-showMenu.oo-ui-menuLayout-before > .oo-ui-menuLayout-content {
187 top: 0 !important;
188 right: 0 !important;
189 bottom: 0 !important;
190 }
191 .oo-ui-stackLayout-continuous > .oo-ui-panelLayout {
192 display: block;
193 position: relative;
194 }
195 .oo-ui-buttonSelectWidget {
196 display: inline-block;
197 white-space: nowrap;
198 border-radius: 2px;
199 margin-right: 0.5em;
200 z-index: 0;
201 position: relative;
202 }
203 .oo-ui-buttonSelectWidget:last-child {
204 margin-right: 0;
205 }
206 .oo-ui-buttonSelectWidget:focus {
207 outline: 0;
208 }
209 .oo-ui-buttonSelectWidget .oo-ui-buttonOptionWidget .oo-ui-buttonElement-button {
210 margin-left: -1px;
211 border-radius: 0;
212 }
213 .oo-ui-buttonSelectWidget .oo-ui-buttonOptionWidget:first-child .oo-ui-buttonElement-button {
214 margin-left: 0;
215 border-bottom-left-radius: 2px;
216 border-top-left-radius: 2px;
217 }
218 .oo-ui-buttonSelectWidget .oo-ui-buttonOptionWidget:last-child .oo-ui-buttonElement-button {
219 border-bottom-right-radius: 2px;
220 border-top-right-radius: 2px;
221 }
222 .oo-ui-buttonSelectWidget .oo-ui-buttonOptionWidget.oo-ui-widget-disabled + .oo-ui-widget-disabled > .oo-ui-buttonElement-button {
223 border-left-color: #fff;
224 }
225 .oo-ui-buttonSelectWidget.oo-ui-widget-enabled:focus .oo-ui-buttonOptionWidget.oo-ui-optionWidget-selected .oo-ui-buttonElement-button {
226 border-color: #36c;
227 box-shadow: inset 0 0 0 1px #36c, inset 0 0 0 2px #fff;
228 }
229 .oo-ui-buttonSelectWidget.oo-ui-widget-enabled .oo-ui-buttonElement.oo-ui-widget-enabled > .oo-ui-buttonElement-button:hover,
230 .oo-ui-buttonSelectWidget.oo-ui-widget-enabled .oo-ui-buttonElement.oo-ui-widget-enabled > .oo-ui-buttonElement-button:active {
231 z-index: 1;
232 }
233 .oo-ui-buttonSelectWidget.oo-ui-widget-enabled .oo-ui-buttonElement.oo-ui-buttonElement-active > .oo-ui-buttonElement-button {
234 z-index: 3;
235 }
236 .oo-ui-buttonSelectWidget.oo-ui-widget-enabled .oo-ui-buttonElement.oo-ui-widget-disabled > .oo-ui-buttonElement-button {
237 z-index: -1;
238 }
239 .oo-ui-buttonOptionWidget {
240 display: inline-block;
241 }
242 .oo-ui-buttonOptionWidget.oo-ui-buttonElement-active .oo-ui-buttonElement-button {
243 cursor: default;
244 }
245 .oo-ui-toggleButtonWidget {
246 margin-right: 0.5em;
247 }
248 .oo-ui-toggleButtonWidget:last-child {
249 margin-right: 0;
250 }
251 .oo-ui-toggleSwitchWidget {
252 position: relative;
253 display: inline-block;
254 vertical-align: middle;
255 overflow: hidden;
256 -webkit-box-sizing: border-box;
257 -moz-box-sizing: border-box;
258 box-sizing: border-box;
259 -webkit-transform: translateZ(0);
260 transform: translateZ(0);
261 background-color: #f8f9fa;
262 width: 3.5em;
263 min-height: 26px;
264 height: 2em;
265 border: 1px solid #72777d;
266 border-radius: 1em;
267 margin-right: 0.5em;
268 -webkit-transition: background-color 250ms, border-color 250ms;
269 -moz-transition: background-color 250ms, border-color 250ms;
270 transition: background-color 250ms, border-color 250ms;
271 }
272 .oo-ui-toggleSwitchWidget.oo-ui-widget-enabled {
273 cursor: pointer;
274 }
275 .oo-ui-toggleSwitchWidget-grip {
276 position: absolute;
277 display: block;
278 -webkit-box-sizing: border-box;
279 -moz-box-sizing: border-box;
280 box-sizing: border-box;
281 }
282 .oo-ui-toggleSwitchWidget:last-child {
283 margin-right: 0;
284 }
285 .oo-ui-toggleSwitchWidget:before {
286 content: '';
287 display: block;
288 position: absolute;
289 top: 1px;
290 left: 1px;
291 bottom: 1px;
292 right: 1px;
293 border: 1px solid transparent;
294 border-radius: 1em;
295 z-index: 1;
296 -webkit-transition: border-color 250ms;
297 -moz-transition: border-color 250ms;
298 transition: border-color 250ms;
299 }
300 .oo-ui-toggleSwitchWidget-grip {
301 top: 0.3125em;
302 min-width: 16px;
303 width: 1.25em;
304 min-height: 16px;
305 height: 1.25em;
306 border-radius: 1.25em;
307 -webkit-transition: background-color 250ms, left 100ms, margin-left 100ms;
308 -moz-transition: background-color 250ms, left 100ms, margin-left 100ms;
309 transition: background-color 250ms, left 100ms, margin-left 100ms;
310 }
311 .oo-ui-toggleSwitchWidget-glow {
312 display: none;
313 }
314 .oo-ui-toggleSwitchWidget.oo-ui-toggleWidget-off .oo-ui-toggleSwitchWidget-grip {
315 left: 0.4em;
316 margin-left: 0;
317 }
318 .oo-ui-toggleSwitchWidget.oo-ui-toggleWidget-on .oo-ui-toggleSwitchWidget-grip {
319 left: 1.9em;
320 margin-left: -2px;
321 }
322 .oo-ui-toggleSwitchWidget.oo-ui-widget-enabled .oo-ui-toggleSwitchWidget-grip {
323 background-color: #f8f9fa;
324 border: 1px solid #72777d;
325 }
326 .oo-ui-toggleSwitchWidget.oo-ui-widget-enabled:hover {
327 background-color: #fff;
328 border-color: #447ff5;
329 }
330 .oo-ui-toggleSwitchWidget.oo-ui-widget-enabled:hover .oo-ui-toggleSwitchWidget-grip {
331 background-color: #fff;
332 border-color: #447ff5;
333 }
334 .oo-ui-toggleSwitchWidget.oo-ui-widget-enabled:active,
335 .oo-ui-toggleSwitchWidget.oo-ui-widget-enabled:active:hover,
336 .oo-ui-toggleSwitchWidget.oo-ui-widget-enabled:active:focus {
337 background-color: #2a4b8d;
338 border-color: #2a4b8d;
339 box-shadow: inset 0 0 0 1px #2a4b8d;
340 }
341 .oo-ui-toggleSwitchWidget.oo-ui-widget-enabled:active .oo-ui-toggleSwitchWidget-grip,
342 .oo-ui-toggleSwitchWidget.oo-ui-widget-enabled:active:hover .oo-ui-toggleSwitchWidget-grip,
343 .oo-ui-toggleSwitchWidget.oo-ui-widget-enabled:active:focus .oo-ui-toggleSwitchWidget-grip {
344 background-color: #fff;
345 border-color: #fff;
346 box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
347 }
348 .oo-ui-toggleSwitchWidget.oo-ui-widget-enabled:focus {
349 border-color: #36c;
350 box-shadow: inset 0 0 0 1px #36c;
351 outline: 0;
352 }
353 .oo-ui-toggleSwitchWidget.oo-ui-widget-enabled:focus .oo-ui-toggleSwitchWidget-grip {
354 border-color: #36c;
355 }
356 .oo-ui-toggleSwitchWidget.oo-ui-widget-enabled.oo-ui-toggleWidget-on {
357 background-color: #36c;
358 border-color: #36c;
359 }
360 .oo-ui-toggleSwitchWidget.oo-ui-widget-enabled.oo-ui-toggleWidget-on .oo-ui-toggleSwitchWidget-grip {
361 background-color: #fff;
362 border-color: #fff;
363 box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1);
364 }
365 .oo-ui-toggleSwitchWidget.oo-ui-widget-enabled.oo-ui-toggleWidget-on:hover {
366 background-color: #447ff5;
367 border-color: #447ff5;
368 }
369 .oo-ui-toggleSwitchWidget.oo-ui-widget-enabled.oo-ui-toggleWidget-on:active,
370 .oo-ui-toggleSwitchWidget.oo-ui-widget-enabled.oo-ui-toggleWidget-on:active:hover {
371 background-color: #2a4b8d;
372 border-color: #2a4b8d;
373 }
374 .oo-ui-toggleSwitchWidget.oo-ui-widget-enabled.oo-ui-toggleWidget-on:focus {
375 border-color: #36c;
376 }
377 .oo-ui-toggleSwitchWidget.oo-ui-widget-enabled.oo-ui-toggleWidget-on:focus:before {
378 border-color: #fff;
379 }
380 .oo-ui-toggleSwitchWidget.oo-ui-widget-disabled {
381 background-color: #c8ccd1;
382 border-color: #c8ccd1;
383 outline: 0;
384 }
385 .oo-ui-toggleSwitchWidget.oo-ui-widget-disabled.oo-ui-toggleWidget-off .oo-ui-toggleSwitchWidget-grip {
386 border: 1px solid #fff;
387 box-shadow: inset 0 0 0 1px #fff;
388 }
389 .oo-ui-toggleSwitchWidget.oo-ui-widget-disabled.oo-ui-toggleWidget-on .oo-ui-toggleSwitchWidget-grip {
390 background-color: #fff;
391 }
392 .oo-ui-selectFileWidget {
393 display: inline-block;
394 vertical-align: middle;
395 width: 100%;
396 max-width: 50em;
397 margin-right: 0.5em;
398 }
399 .oo-ui-selectFileWidget-selectButton {
400 display: table-cell;
401 }
402 .oo-ui-selectFileWidget-selectButton > .oo-ui-buttonElement-button {
403 position: relative;
404 overflow: hidden;
405 }
406 .oo-ui-selectFileWidget-selectButton > .oo-ui-buttonElement-button > [type='file'] {
407 position: absolute;
408 top: 0;
409 bottom: 0;
410 left: 0;
411 right: 0;
412 width: 100%;
413 height: 100%;
414 opacity: 0;
415 z-index: 1;
416 cursor: pointer;
417 padding-top: 100px;
418 }
419 .oo-ui-selectFileWidget-selectButton.oo-ui-widget-disabled > .oo-ui-buttonElement-button > [type='file'] {
420 display: none;
421 }
422 .oo-ui-selectFileWidget-info {
423 width: 100%;
424 display: table-cell;
425 vertical-align: middle;
426 position: relative;
427 overflow: hidden;
428 -webkit-box-sizing: border-box;
429 -moz-box-sizing: border-box;
430 box-sizing: border-box;
431 }
432 .oo-ui-widget-disabled .oo-ui-selectFileWidget-info {
433 cursor: default;
434 -webkit-touch-callout: none;
435 -webkit-user-select: none;
436 -moz-user-select: none;
437 -ms-user-select: none;
438 user-select: none;
439 }
440 .oo-ui-selectFileWidget-label {
441 position: absolute;
442 top: 0;
443 bottom: 0;
444 left: 0;
445 right: 0;
446 text-overflow: ellipsis;
447 }
448 .oo-ui-selectFileWidget-clearButton {
449 position: absolute;
450 z-index: 2;
451 }
452 .oo-ui-selectFileWidget-dropTarget {
453 position: relative;
454 cursor: default;
455 height: 8.815em;
456 }
457 .oo-ui-selectFileWidget-dropTarget .oo-ui-selectFileWidget-dropLabel,
458 .oo-ui-selectFileWidget-dropTarget .oo-ui-selectFileWidget-selectButton {
459 display: none;
460 }
461 .oo-ui-selectFileWidget-dropTarget .oo-ui-selectFileWidget-thumbnail {
462 width: 7.815em;
463 position: absolute;
464 top: 0.5em;
465 bottom: 0.5em;
466 left: 0.5em;
467 background-position: center center;
468 background-repeat: no-repeat;
469 background-size: contain;
470 }
471 .oo-ui-selectFileWidget-dropTarget .oo-ui-selectFileWidget-thumbnail.oo-ui-pendingElement-pending {
472 background-repeat: repeat;
473 background-size: auto;
474 }
475 .oo-ui-selectFileWidget-dropTarget .oo-ui-selectFileWidget-thumbnail > .oo-ui-selectFileWidget-noThumbnail-icon {
476 opacity: 0.4;
477 height: 7.815em;
478 width: 7.815em;
479 }
480 .oo-ui-selectFileWidget-dropTarget .oo-ui-selectFileWidget-info {
481 display: block;
482 height: 100%;
483 width: auto;
484 margin-left: 8.815em;
485 border: 0;
486 }
487 .oo-ui-selectFileWidget-dropTarget .oo-ui-selectFileWidget-label {
488 display: block;
489 position: relative;
490 top: inherit;
491 }
492 .oo-ui-selectFileWidget-dropTarget .oo-ui-selectFileWidget-fileName {
493 display: block;
494 }
495 .oo-ui-selectFileWidget-empty.oo-ui-selectFileWidget-dropTarget .oo-ui-selectFileWidget-thumbnail,
496 .oo-ui-selectFileWidget-empty.oo-ui-selectFileWidget-dropTarget .oo-ui-selectFileWidget-info {
497 display: none;
498 }
499 .oo-ui-selectFileWidget-empty.oo-ui-selectFileWidget-dropTarget .oo-ui-selectFileWidget-selectButton {
500 display: block;
501 margin: 2.2em 1em 1em;
502 }
503 .oo-ui-selectFileWidget-empty.oo-ui-selectFileWidget-dropTarget,
504 .oo-ui-selectFileWidget-notsupported.oo-ui-selectFileWidget-dropTarget {
505 text-align: center;
506 }
507 .oo-ui-selectFileWidget-empty.oo-ui-selectFileWidget-dropTarget .oo-ui-selectFileWidget-info,
508 .oo-ui-selectFileWidget-notsupported.oo-ui-selectFileWidget-dropTarget .oo-ui-selectFileWidget-info {
509 margin: 0;
510 }
511 .oo-ui-selectFileWidget-empty .oo-ui-selectFileWidget-clearButton,
512 .oo-ui-selectFileWidget-notsupported .oo-ui-selectFileWidget-clearButton {
513 display: none;
514 }
515 .oo-ui-selectFileWidget-empty.oo-ui-widget-enabled .oo-ui-selectFileWidget-label {
516 cursor: default;
517 }
518 .oo-ui-selectFileWidget-empty.oo-ui-widget-enabled .oo-ui-selectFileWidget-dropLabel {
519 display: block;
520 }
521 .oo-ui-selectFileWidget-empty.oo-ui-widget-disabled.oo-ui-selectFileWidget-dropTarget,
522 .oo-ui-selectFileWidget-notsupported.oo-ui-selectFileWidget-dropTarget {
523 -webkit-touch-callout: none;
524 -webkit-user-select: none;
525 -moz-user-select: none;
526 -ms-user-select: none;
527 user-select: none;
528 }
529 .oo-ui-selectFileWidget-empty.oo-ui-widget-disabled.oo-ui-selectFileWidget-dropTarget,
530 .oo-ui-selectFileWidget-notsupported.oo-ui-selectFileWidget-dropTarget,
531 .oo-ui-selectFileWidget-empty.oo-ui-widget-disabled.oo-ui-selectFileWidget-dropTarget .oo-ui-buttonElement-button,
532 .oo-ui-selectFileWidget-notsupported.oo-ui-selectFileWidget-dropTarget .oo-ui-buttonElement-button {
533 cursor: no-drop;
534 }
535 .oo-ui-selectFileWidget-notsupported.oo-ui-selectFileWidget-dropTarget {
536 height: auto;
537 }
538 .oo-ui-selectFileWidget:last-child {
539 margin-right: 0;
540 }
541 .oo-ui-selectFileWidget-selectButton > .oo-ui-buttonElement-button {
542 border-radius: 0 2px 2px 0;
543 }
544 .oo-ui-selectFileWidget-info {
545 background-color: #fff;
546 border: 1px solid #a2a9b1;
547 border-radius: 2px 0 0 2px;
548 border-right-width: 0;
549 }
550 .oo-ui-selectFileWidget-info > .oo-ui-iconElement-icon {
551 display: none;
552 top: -1px;
553 left: 0.46875em;
554 min-height: 2.5em;
555 margin-left: -1px;
556 }
557 .oo-ui-selectFileWidget-info > .oo-ui-indicatorElement-indicator {
558 display: none;
559 top: -1px;
560 right: 0.9375em;
561 min-height: 2.5em;
562 }
563 .oo-ui-selectFileWidget-label {
564 -webkit-box-sizing: border-box;
565 -moz-box-sizing: border-box;
566 box-sizing: border-box;
567 display: block;
568 right: 2.375em;
569 padding-top: 0.625em;
570 padding-left: 0.625em;
571 padding-bottom: 0.546875em;
572 line-height: 1.172em;
573 white-space: nowrap;
574 }
575 .oo-ui-selectFileWidget-fileName {
576 display: block;
577 overflow: hidden;
578 text-overflow: ellipsis;
579 }
580 .oo-ui-selectFileWidget-clearButton {
581 top: -1px;
582 right: 0.46875em;
583 min-width: 24px;
584 width: 1.875em;
585 margin-right: 0;
586 }
587 .oo-ui-selectFileWidget-clearButton .oo-ui-buttonElement-button > .oo-ui-iconElement-icon {
588 height: 2.5em;
589 }
590 .oo-ui-selectFileWidget-empty .oo-ui-selectFileWidget-label {
591 color: #72777d;
592 }
593 .oo-ui-selectFileWidget.oo-ui-iconElement .oo-ui-selectFileWidget-label {
594 left: 2.5em;
595 }
596 .oo-ui-selectFileWidget.oo-ui-indicatorElement .oo-ui-selectFileWidget-label {
597 right: 3.75em;
598 padding-left: 0;
599 }
600 .oo-ui-selectFileWidget.oo-ui-indicatorElement .oo-ui-selectFileWidget-clearButton {
601 right: 2.0875em;
602 }
603 .oo-ui-selectFileWidget-empty.oo-ui-indicatorElement .oo-ui-selectFileWidget-label,
604 .oo-ui-selectFileWidget-notsupported.oo-ui-indicatorElement .oo-ui-selectFileWidget-label {
605 right: 2em;
606 }
607 .oo-ui-selectFileWidget-dropTarget {
608 background-color: #fff;
609 border: 1px solid #a2a9b1;
610 border-radius: 2px;
611 vertical-align: middle;
612 overflow: hidden;
613 }
614 .oo-ui-selectFileWidget-dropTarget .oo-ui-selectFileWidget-selectButton > .oo-ui-buttonElement-button {
615 border-radius: 2px;
616 }
617 .oo-ui-selectFileWidget-dropTarget .oo-ui-selectFileWidget-label {
618 line-height: 1.4;
619 overflow: inherit;
620 white-space: normal;
621 }
622 .oo-ui-selectFileWidget-dropTarget .oo-ui-selectFileWidget-fileName {
623 padding-right: 2.5em;
624 }
625 .oo-ui-selectFileWidget-dropTarget .oo-ui-selectFileWidget-clearButton {
626 top: 0;
627 }
628 .oo-ui-selectFileWidget-empty.oo-ui-widget-enabled.oo-ui-selectFileWidget-dropTarget {
629 background-color: #fff;
630 border-style: dashed;
631 -webkit-transition: background-color 200ms cubic-bezier(0.4, 0.55, 0.55, 1), color 200ms cubic-bezier(0.4, 0.55, 0.55, 1), border-color 200ms cubic-bezier(0.4, 0.55, 0.55, 1);
632 -moz-transition: background-color 200ms cubic-bezier(0.4, 0.55, 0.55, 1), color 200ms cubic-bezier(0.4, 0.55, 0.55, 1), border-color 200ms cubic-bezier(0.4, 0.55, 0.55, 1);
633 transition: background-color 200ms cubic-bezier(0.4, 0.55, 0.55, 1), color 200ms cubic-bezier(0.4, 0.55, 0.55, 1), border-color 200ms cubic-bezier(0.4, 0.55, 0.55, 1);
634 }
635 .oo-ui-selectFileWidget-empty.oo-ui-widget-enabled.oo-ui-selectFileWidget-dropTarget:hover {
636 border-color: #72777d;
637 }
638 .oo-ui-selectFileWidget-supported.oo-ui-widget-enabled.oo-ui-selectFileWidget-canDrop.oo-ui-selectFileWidget-dropTarget {
639 background-color: #eaf3ff;
640 color: #36c;
641 }
642 .oo-ui-selectFileWidget.oo-ui-widget-disabled .oo-ui-selectFileWidget-info,
643 .oo-ui-selectFileWidget-empty.oo-ui-widget-disabled .oo-ui-selectFileWidget-info {
644 background-color: #eaecf0;
645 color: #72777d;
646 border-color: #c8ccd1;
647 text-shadow: 0 1px 1px #fff;
648 }
649 .oo-ui-selectFileWidget.oo-ui-widget-disabled .oo-ui-selectFileWidget-info > .oo-ui-iconElement-icon,
650 .oo-ui-selectFileWidget-empty.oo-ui-widget-disabled .oo-ui-selectFileWidget-info > .oo-ui-iconElement-icon {
651 opacity: 0.51;
652 }
653 .oo-ui-selectFileWidget.oo-ui-widget-disabled .oo-ui-selectFileWidget-info > .oo-ui-indicatorElement-indicator,
654 .oo-ui-selectFileWidget-empty.oo-ui-widget-disabled .oo-ui-selectFileWidget-info > .oo-ui-indicatorElement-indicator {
655 opacity: 0.15;
656 }
657 .oo-ui-selectFileWidget.oo-ui-widget-disabled.oo-ui-selectFileWidget-dropTarget,
658 .oo-ui-selectFileWidget-empty.oo-ui-widget-disabled.oo-ui-selectFileWidget-dropTarget {
659 background-color: #eaecf0;
660 border-color: #c8ccd1;
661 }
662 .oo-ui-selectFileWidget-notsupported .oo-ui-selectFileWidget-info {
663 background-color: #eaecf0;
664 color: #222;
665 border-color: #c8ccd1;
666 }
667 .oo-ui-selectFileWidget-notsupported.oo-ui-selectFileWidget-dropTarget {
668 background-color: #eaecf0;
669 border-color: #c8ccd1;
670 }
671 .oo-ui-selectFileWidget-notsupported.oo-ui-selectFileWidget-dropTarget .oo-ui-selectFileWidget-label {
672 padding: 1em 0.9375em;
673 }
674 .oo-ui-widget-disabled .oo-ui-selectFileWidget-dropLabel {
675 display: none;
676 }
677 .oo-ui-outlineSelectWidget {
678 height: 100%;
679 }
680 .oo-ui-outlineSelectWidget:focus {
681 box-shadow: inset 0 0 0 2px #36c;
682 }
683 .oo-ui-outlineOptionWidget {
684 -webkit-touch-callout: none;
685 -webkit-user-select: none;
686 -moz-user-select: none;
687 -ms-user-select: none;
688 user-select: none;
689 padding: 1.0546875em 0.9375em 0.9375em;
690 -webkit-transition: background-color 100ms, color 100ms;
691 -moz-transition: background-color 100ms, color 100ms;
692 transition: background-color 100ms, color 100ms;
693 }
694 .oo-ui-outlineOptionWidget.oo-ui-optionWidget-highlighted {
695 background-color: #eaecf0;
696 color: #000;
697 }
698 .oo-ui-outlineOptionWidget.oo-ui-optionWidget-selected {
699 background-color: #eaf3ff;
700 color: #36c;
701 }
702 .oo-ui-outlineOptionWidget.oo-ui-optionWidget-pressed {
703 background-color: rgba(41, 98, 204, 0.1);
704 color: #36c;
705 }
706 .oo-ui-outlineOptionWidget.oo-ui-indicatorElement .oo-ui-labelElement-label {
707 padding-right: 1.5em;
708 }
709 .oo-ui-outlineOptionWidget.oo-ui-indicatorElement .oo-ui-indicatorElement-indicator {
710 opacity: 0.5;
711 }
712 .oo-ui-outlineOptionWidget .oo-ui-labelElement-label {
713 font-size: 1.1em;
714 }
715 .oo-ui-outlineOptionWidget-level-1 {
716 padding-left: 2.571em;
717 }
718 .oo-ui-outlineOptionWidget-level-1.oo-ui-iconElement {
719 padding-left: 4.429em;
720 }
721 .oo-ui-outlineOptionWidget-level-1.oo-ui-iconElement .oo-ui-iconElement-icon {
722 left: 2.571em;
723 }
724 .oo-ui-outlineOptionWidget-level-2 {
725 padding-left: 5.142em;
726 }
727 .oo-ui-outlineOptionWidget-level-2.oo-ui-iconElement {
728 padding-left: 6.857em;
729 }
730 .oo-ui-outlineOptionWidget-level-2.oo-ui-iconElement .oo-ui-iconElement-icon {
731 left: 4.429em;
732 }
733 .oo-ui-outlineControlsWidget {
734 overflow: hidden;
735 background-color: #fff;
736 }
737 .oo-ui-outlineControlsWidget-items,
738 .oo-ui-outlineControlsWidget-movers {
739 float: left;
740 -webkit-box-sizing: border-box;
741 -moz-box-sizing: border-box;
742 box-sizing: border-box;
743 }
744 .oo-ui-outlineControlsWidget > .oo-ui-iconElement-icon {
745 float: left;
746 background-position: right center;
747 }
748 .oo-ui-outlineControlsWidget-items {
749 float: left;
750 }
751 .oo-ui-outlineControlsWidget-items .oo-ui-buttonWidget {
752 float: left;
753 }
754 .oo-ui-outlineControlsWidget-movers {
755 float: right;
756 }
757 .oo-ui-outlineControlsWidget-movers .oo-ui-buttonWidget {
758 float: right;
759 }
760 .oo-ui-outlineControlsWidget-items > .oo-ui-buttonWidget,
761 .oo-ui-outlineControlsWidget-movers > .oo-ui-buttonWidget {
762 height: 2.5em;
763 width: 2.5em;
764 margin: 0 !important;
765 /* stylelint-disable-line declaration-no-important */
766 }
767 .oo-ui-outlineControlsWidget > .oo-ui-iconElement-icon {
768 height: 2.5em;
769 opacity: 0.2;
770 }
771 .oo-ui-tabSelectWidget {
772 text-align: left;
773 overflow-x: auto;
774 overflow-y: hidden;
775 background-color: #eaecf0;
776 }
777 .oo-ui-tabOptionWidget {
778 display: inline-block;
779 -webkit-box-sizing: border-box;
780 -moz-box-sizing: border-box;
781 box-sizing: border-box;
782 vertical-align: bottom;
783 color: #222;
784 margin: 0.46875em 0 0 0.46875em;
785 border-color: transparent;
786 border-style: solid;
787 border-width: 1px 1px 0 1px;
788 border-top-left-radius: 2px;
789 border-top-right-radius: 2px;
790 padding: 0.625em 1.015625em 0.546875em;
791 font-weight: bold;
792 line-height: 1;
793 -webkit-transition: background-color 100ms, color 100ms;
794 -moz-transition: background-color 100ms, color 100ms;
795 transition: background-color 100ms, color 100ms;
796 }
797 .oo-ui-tabOptionWidget.oo-ui-optionWidget-selected {
798 background-color: #fff;
799 color: #000;
800 }
801 .oo-ui-tabOptionWidget .oo-ui-labelElement-label {
802 line-height: 1.172em;
803 }
804 .oo-ui-tabOptionWidget.oo-ui-widget-enabled:hover {
805 background-color: rgba(255, 255, 255, 0.3);
806 }
807 .oo-ui-tabOptionWidget.oo-ui-widget-enabled:active {
808 background-color: rgba(255, 255, 255, 0.8);
809 }
810 .oo-ui-tabOptionWidget.oo-ui-widget-enabled.oo-ui-optionWidget-selected:hover {
811 background-color: #fff;
812 }
813 .oo-ui-tagMultiselectWidget {
814 display: inline-block;
815 position: relative;
816 width: 100%;
817 max-width: 50em;
818 }
819 .oo-ui-tagMultiselectWidget-handle {
820 width: 100%;
821 display: block;
822 position: relative;
823 }
824 .oo-ui-tagMultiselectWidget-handle > .oo-ui-iconElement-icon,
825 .oo-ui-tagMultiselectWidget-handle > .oo-ui-indicatorElement-indicator {
826 position: absolute;
827 top: 0;
828 height: 100%;
829 }
830 .oo-ui-tagMultiselectWidget-content {
831 position: relative;
832 }
833 .oo-ui-tagMultiselectWidget-group {
834 display: inline;
835 }
836 .oo-ui-tagMultiselectWidget-outlined {
837 width: 100%;
838 }
839 .oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-inlined .oo-ui-tagMultiselectWidget-handle {
840 cursor: text;
841 }
842 .oo-ui-tagMultiselectWidget.oo-ui-widget-disabled .oo-ui-tagMultiselectWidget-content > input {
843 display: none;
844 }
845 .oo-ui-tagMultiselectWidget-focusTrap {
846 display: inline-block;
847 height: 1px;
848 width: 1px;
849 }
850 .oo-ui-tagMultiselectWidget-focusTrap:focus {
851 outline: 0;
852 }
853 .oo-ui-tagMultiselectWidget-handle {
854 -webkit-box-sizing: border-box;
855 -moz-box-sizing: border-box;
856 box-sizing: border-box;
857 min-height: 2.5em;
858 margin-right: 0.5em;
859 border: 1px solid #a2a9b1;
860 border-radius: 2px;
861 padding: 0 0.625em 0.3125em;
862 line-height: 1;
863 }
864 .oo-ui-tagMultiselectWidget-handle:last-child {
865 margin-right: 0;
866 }
867 .oo-ui-tagMultiselectWidget-handle > .oo-ui-tagMultiselectWidget-content > input {
868 background-color: transparent;
869 color: #000;
870 margin: 0.46875em 0 0 0.390625em;
871 border: 0;
872 padding: 0;
873 font-family: inherit;
874 font-size: inherit;
875 line-height: 1.563em;
876 vertical-align: middle;
877 }
878 .oo-ui-tagMultiselectWidget-handle > .oo-ui-tagMultiselectWidget-content > input::-webkit-input-placeholder {
879 color: #72777d;
880 opacity: 1;
881 }
882 .oo-ui-tagMultiselectWidget-handle > .oo-ui-tagMultiselectWidget-content > input:-ms-input-placeholder {
883 color: #72777d;
884 opacity: 1;
885 }
886 .oo-ui-tagMultiselectWidget-handle > .oo-ui-tagMultiselectWidget-content > input::-moz-placeholder {
887 color: #72777d;
888 opacity: 1;
889 }
890 .oo-ui-tagMultiselectWidget-handle > .oo-ui-tagMultiselectWidget-content > input:-moz-placeholder {
891 color: #72777d;
892 opacity: 1;
893 }
894 .oo-ui-tagMultiselectWidget-handle > .oo-ui-tagMultiselectWidget-content > input::placeholder {
895 color: #72777d;
896 opacity: 1;
897 }
898 .oo-ui-tagMultiselectWidget-handle > .oo-ui-tagMultiselectWidget-content > input:focus {
899 outline: 0;
900 }
901 .oo-ui-tagMultiselectWidget-handle > .oo-ui-tagMultiselectWidget-content .oo-ui-tagMultiselectWidget-group:empty + input {
902 margin-left: 0;
903 }
904 .oo-ui-tagMultiselectWidget.oo-ui-iconElement .oo-ui-tagMultiselectWidget-handle {
905 padding-left: 2.475em;
906 }
907 .oo-ui-tagMultiselectWidget.oo-ui-iconElement .oo-ui-tagMultiselectWidget-handle > .oo-ui-iconElement-icon {
908 left: 0;
909 margin: 0 0.3em;
910 }
911 .oo-ui-tagMultiselectWidget.oo-ui-indicatorElement .oo-ui-tagMultiselectWidget-handle {
912 padding-right: 2.4875em;
913 }
914 .oo-ui-tagMultiselectWidget.oo-ui-indicatorElement .oo-ui-tagMultiselectWidget-handle > .oo-ui-indicatorElement-indicator {
915 right: 0;
916 margin: 0 0.775em;
917 }
918 .oo-ui-tagMultiselectWidget.oo-ui-widget-enabled .oo-ui-tagMultiselectWidget-handle {
919 background-color: #fff;
920 -webkit-transition: border-color 200ms cubic-bezier(0.4, 0.55, 0.55, 1), box-shadow 200ms cubic-bezier(0.4, 0.55, 0.55, 1);
921 -moz-transition: border-color 200ms cubic-bezier(0.4, 0.55, 0.55, 1), box-shadow 200ms cubic-bezier(0.4, 0.55, 0.55, 1);
922 transition: border-color 200ms cubic-bezier(0.4, 0.55, 0.55, 1), box-shadow 200ms cubic-bezier(0.4, 0.55, 0.55, 1);
923 }
924 .oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-inlined:hover .oo-ui-tagMultiselectWidget-handle {
925 border-color: #72777d;
926 }
927 .oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-inlined.oo-ui-tagMultiselectWidget-focus .oo-ui-tagMultiselectWidget-handle {
928 border-color: #36c;
929 outline: 0;
930 box-shadow: inset 0 0 0 1px #36c;
931 }
932 .oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-outlined .oo-ui-tagMultiselectWidget-handle {
933 background-color: #f8f9fa;
934 border-bottom: 0;
935 border-bottom-left-radius: 0;
936 border-bottom-right-radius: 0;
937 }
938 .oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-outlined .oo-ui-tagItemWidget.oo-ui-widget-enabled {
939 background-color: #fff;
940 }
941 .oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-outlined .oo-ui-inputWidget-input {
942 border-top-left-radius: 0;
943 border-top-right-radius: 0;
944 }
945 .oo-ui-tagMultiselectWidget.oo-ui-widget-disabled .oo-ui-tagMultiselectWidget-handle {
946 color: #72777d;
947 text-shadow: 0 1px 1px #fff;
948 border-color: #c8ccd1;
949 background-color: #eaecf0;
950 }
951 .oo-ui-tagMultiselectWidget.oo-ui-widget-disabled .oo-ui-tagMultiselectWidget-handle > .oo-ui-iconElement-icon {
952 opacity: 0.51;
953 }
954 .oo-ui-tagMultiselectWidget.oo-ui-widget-disabled .oo-ui-tagMultiselectWidget-handle > .oo-ui-indicatorElement-indicator {
955 opacity: 0.15;
956 }
957 .oo-ui-tagItemWidget {
958 position: relative;
959 display: inline-block;
960 cursor: default;
961 white-space: nowrap;
962 -webkit-box-sizing: border-box;
963 -moz-box-sizing: border-box;
964 box-sizing: border-box;
965 width: auto;
966 max-width: 100%;
967 height: 1.71875em;
968 margin: 0.3125em 0.3125em 0 0;
969 border: 1px solid #a2a9b1;
970 border-radius: 2px;
971 padding: 0 0.3125em;
972 line-height: 1.71875em;
973 vertical-align: middle;
974 }
975 .oo-ui-tagItemWidget.oo-ui-labelElement .oo-ui-labelElement-label {
976 display: inline-block;
977 text-overflow: ellipsis;
978 overflow: hidden;
979 cursor: text;
980 }
981 .oo-ui-tagItemWidget.oo-ui-widget-enabled {
982 background-color: #f8f9fa;
983 color: #222;
984 padding-right: 1.640625em;
985 -webkit-transition: background-color 100ms, color 100ms, border-color 100ms, box-shadow 100ms;
986 -moz-transition: background-color 100ms, color 100ms, border-color 100ms, box-shadow 100ms;
987 transition: background-color 100ms, color 100ms, border-color 100ms, box-shadow 100ms;
988 }
989 .oo-ui-tagItemWidget.oo-ui-widget-enabled:hover {
990 background-color: #fff;
991 color: #444;
992 border-color: #a2a9b1;
993 }
994 .oo-ui-tagItemWidget.oo-ui-widget-enabled:focus {
995 border-color: #36c;
996 box-shadow: inset 0 0 0 1px #36c;
997 outline: 0;
998 }
999 .oo-ui-tagItemWidget.oo-ui-widget-enabled.oo-ui-flaggedElement-invalid {
1000 border-color: #d33;
1001 }
1002 .oo-ui-tagItemWidget.oo-ui-widget-enabled.oo-ui-flaggedElement-invalid:hover {
1003 border-color: #d33;
1004 }
1005 .oo-ui-tagItemWidget.oo-ui-widget-enabled.oo-ui-flaggedElement-invalid:focus {
1006 border-color: #d33;
1007 box-shadow: inset 0 0 0 1px #d33;
1008 }
1009 .oo-ui-tagItemWidget.oo-ui-widget-enabled > .oo-ui-buttonElement {
1010 display: block;
1011 position: absolute;
1012 top: 0;
1013 right: 0;
1014 }
1015 .oo-ui-tagItemWidget.oo-ui-widget-enabled .oo-ui-buttonElement-button {
1016 min-width: 0;
1017 min-height: 0;
1018 border: 0;
1019 padding-top: 1.5625em;
1020 padding-left: 1.5625em;
1021 }
1022 .oo-ui-tagItemWidget.oo-ui-widget-enabled .oo-ui-buttonElement-button .oo-ui-icon-close {
1023 left: 0;
1024 min-width: 20px;
1025 min-height: 20px;
1026 width: 1.5625em;
1027 }
1028 .oo-ui-tagItemWidget.oo-ui-widget-enabled .oo-ui-buttonElement-button .oo-ui-labelElement-label,
1029 .oo-ui-tagItemWidget.oo-ui-widget-enabled .oo-ui-buttonElement-button .oo-ui-indicatorElement-indicator {
1030 display: none;
1031 }
1032 .oo-ui-tagItemWidget.oo-ui-widget-disabled {
1033 background-color: #eaecf0;
1034 color: #72777d;
1035 border-color: #c8ccd1;
1036 text-shadow: 0 1px 1px #fff;
1037 }
1038 .oo-ui-tagItemWidget.oo-ui-widget-disabled:focus {
1039 outline: 0;
1040 }
1041 .oo-ui-tagItemWidget.oo-ui-widget-disabled > .oo-ui-buttonElement {
1042 display: none;
1043 }
1044 .oo-ui-capsuleMultiselectWidget {
1045 display: inline-block;
1046 position: relative;
1047 width: 100%;
1048 max-width: 50em;
1049 }
1050 .oo-ui-capsuleMultiselectWidget-handle {
1051 width: 100%;
1052 display: block;
1053 position: relative;
1054 }
1055 .oo-ui-capsuleMultiselectWidget-content {
1056 position: relative;
1057 }
1058 .oo-ui-capsuleMultiselectWidget.oo-ui-widget-disabled .oo-ui-capsuleMultiselectWidget-content > input {
1059 display: none;
1060 }
1061 .oo-ui-capsuleMultiselectWidget-group {
1062 display: inline;
1063 }
1064 .oo-ui-capsuleMultiselectWidget-popup > .oo-ui-popupWidget-popup > .oo-ui-popupWidget-body > * {
1065 display: block;
1066 }
1067 .oo-ui-capsuleMultiselectWidget-focusTrap {
1068 display: inline-block;
1069 height: 1px;
1070 width: 1px;
1071 }
1072 .oo-ui-capsuleMultiselectWidget-focusTrap:focus {
1073 outline: 0;
1074 }
1075 .oo-ui-capsuleMultiselectWidget-handle {
1076 -webkit-box-sizing: border-box;
1077 -moz-box-sizing: border-box;
1078 box-sizing: border-box;
1079 min-height: 2.5em;
1080 margin-right: 0.5em;
1081 border: 1px solid #a2a9b1;
1082 border-radius: 2px;
1083 padding: 0 0.625em 0.3125em;
1084 line-height: 1;
1085 }
1086 .oo-ui-capsuleMultiselectWidget-handle:last-child {
1087 margin-right: 0;
1088 }
1089 .oo-ui-capsuleMultiselectWidget-handle > .oo-ui-capsuleMultiselectWidget-content > input {
1090 background-color: transparent;
1091 color: #000;
1092 border: 0;
1093 margin: 0.46875em 0 0 0.390625em;
1094 padding: 0;
1095 font-family: inherit;
1096 font-size: inherit;
1097 line-height: 1.563em;
1098 vertical-align: middle;
1099 }
1100 .oo-ui-capsuleMultiselectWidget-handle > .oo-ui-capsuleMultiselectWidget-content > input::-webkit-input-placeholder {
1101 color: #72777d;
1102 opacity: 1;
1103 }
1104 .oo-ui-capsuleMultiselectWidget-handle > .oo-ui-capsuleMultiselectWidget-content > input:-ms-input-placeholder {
1105 color: #72777d;
1106 opacity: 1;
1107 }
1108 .oo-ui-capsuleMultiselectWidget-handle > .oo-ui-capsuleMultiselectWidget-content > input::-moz-placeholder {
1109 color: #72777d;
1110 opacity: 1;
1111 }
1112 .oo-ui-capsuleMultiselectWidget-handle > .oo-ui-capsuleMultiselectWidget-content > input:-moz-placeholder {
1113 color: #72777d;
1114 opacity: 1;
1115 }
1116 .oo-ui-capsuleMultiselectWidget-handle > .oo-ui-capsuleMultiselectWidget-content > input::placeholder {
1117 color: #72777d;
1118 opacity: 1;
1119 }
1120 .oo-ui-capsuleMultiselectWidget-handle > .oo-ui-capsuleMultiselectWidget-content > input:focus {
1121 outline: 0;
1122 }
1123 .oo-ui-capsuleMultiselectWidget-handle > .oo-ui-capsuleMultiselectWidget-content .oo-ui-capsuleMultiselectWidget-group:empty + input {
1124 margin-left: 0;
1125 }
1126 .oo-ui-capsuleMultiselectWidget.oo-ui-iconElement .oo-ui-capsuleMultiselectWidget-handle {
1127 padding-left: 2.5em;
1128 }
1129 .oo-ui-capsuleMultiselectWidget.oo-ui-iconElement .oo-ui-capsuleMultiselectWidget-handle > .oo-ui-iconElement-icon {
1130 left: 0.46875em;
1131 }
1132 .oo-ui-capsuleMultiselectWidget.oo-ui-indicatorElement .oo-ui-capsuleMultiselectWidget-handle {
1133 padding-right: 2.8125em;
1134 }
1135 .oo-ui-capsuleMultiselectWidget.oo-ui-indicatorElement .oo-ui-capsuleMultiselectWidget-handle > .oo-ui-indicatorElement-indicator {
1136 right: 0.9375em;
1137 }
1138 .oo-ui-capsuleMultiselectWidget-popup {
1139 margin-top: -1px;
1140 margin-bottom: -1px;
1141 }
1142 .oo-ui-capsuleMultiselectWidget-popup > .oo-ui-popupWidget-popup {
1143 border: 0;
1144 }
1145 .oo-ui-capsuleMultiselectWidget.oo-ui-widget-enabled .oo-ui-capsuleMultiselectWidget-handle {
1146 background-color: #fff;
1147 cursor: text;
1148 -webkit-transition: border-color 200ms cubic-bezier(0.4, 0.55, 0.55, 1), box-shadow 200ms cubic-bezier(0.4, 0.55, 0.55, 1);
1149 -moz-transition: border-color 200ms cubic-bezier(0.4, 0.55, 0.55, 1), box-shadow 200ms cubic-bezier(0.4, 0.55, 0.55, 1);
1150 transition: border-color 200ms cubic-bezier(0.4, 0.55, 0.55, 1), box-shadow 200ms cubic-bezier(0.4, 0.55, 0.55, 1);
1151 }
1152 .oo-ui-capsuleMultiselectWidget.oo-ui-widget-enabled:hover .oo-ui-capsuleMultiselectWidget-handle {
1153 border-color: #72777d;
1154 }
1155 .oo-ui-capsuleMultiselectWidget.oo-ui-widget-enabled.oo-ui-capsuleMultiselectWidget-open .oo-ui-capsuleMultiselectWidget-handle {
1156 border-color: #36c;
1157 outline: 0;
1158 box-shadow: inset 0 0 0 1px #36c;
1159 }
1160 .oo-ui-capsuleMultiselectWidget.oo-ui-widget-disabled .oo-ui-capsuleMultiselectWidget-handle {
1161 color: #72777d;
1162 text-shadow: 0 1px 1px #fff;
1163 border-color: #c8ccd1;
1164 background-color: #eaecf0;
1165 }
1166 .oo-ui-capsuleMultiselectWidget.oo-ui-widget-disabled .oo-ui-capsuleMultiselectWidget-handle > .oo-ui-iconElement-icon {
1167 opacity: 0.51;
1168 }
1169 .oo-ui-capsuleMultiselectWidget.oo-ui-widget-disabled .oo-ui-capsuleMultiselectWidget-handle > .oo-ui-indicatorElement-indicator {
1170 opacity: 0.15;
1171 }
1172 .oo-ui-capsuleItemWidget {
1173 position: relative;
1174 display: inline-block;
1175 cursor: default;
1176 white-space: nowrap;
1177 -webkit-box-sizing: border-box;
1178 -moz-box-sizing: border-box;
1179 box-sizing: border-box;
1180 width: auto;
1181 max-width: 100%;
1182 height: 1.71875em;
1183 margin: 0.3125em 0.3125em 0 0;
1184 border: 1px solid #a2a9b1;
1185 border-radius: 2px;
1186 padding: 0 0.3125em;
1187 line-height: 1.71875em;
1188 vertical-align: middle;
1189 }
1190 .oo-ui-capsuleItemWidget.oo-ui-labelElement .oo-ui-labelElement-label {
1191 display: inline-block;
1192 text-overflow: ellipsis;
1193 overflow: hidden;
1194 cursor: text;
1195 }
1196 .oo-ui-capsuleItemWidget.oo-ui-widget-enabled {
1197 background-color: #f8f9fa;
1198 color: #222;
1199 padding-right: 1.640625em;
1200 -webkit-transition: background-color 100ms, color 100ms, border-color 100ms, box-shadow 100ms;
1201 -moz-transition: background-color 100ms, color 100ms, border-color 100ms, box-shadow 100ms;
1202 transition: background-color 100ms, color 100ms, border-color 100ms, box-shadow 100ms;
1203 }
1204 .oo-ui-capsuleItemWidget.oo-ui-widget-enabled:hover {
1205 background-color: #fff;
1206 color: #444;
1207 border-color: #a2a9b1;
1208 }
1209 .oo-ui-capsuleItemWidget.oo-ui-widget-enabled:focus {
1210 border-color: #36c;
1211 box-shadow: inset 0 0 0 1px #36c;
1212 outline: 0;
1213 }
1214 .oo-ui-capsuleItemWidget.oo-ui-widget-enabled > .oo-ui-buttonElement {
1215 display: block;
1216 position: absolute;
1217 top: 0;
1218 right: 0;
1219 }
1220 .oo-ui-capsuleItemWidget.oo-ui-widget-enabled .oo-ui-buttonElement-button {
1221 min-width: 0;
1222 min-height: 0;
1223 border: 0;
1224 padding-top: 1.5625em;
1225 padding-left: 1.5625em;
1226 }
1227 .oo-ui-capsuleItemWidget.oo-ui-widget-enabled .oo-ui-buttonElement-button .oo-ui-icon-close {
1228 left: 0;
1229 min-width: 20px;
1230 min-height: 20px;
1231 width: 1.5625em;
1232 }
1233 .oo-ui-capsuleItemWidget.oo-ui-widget-enabled .oo-ui-buttonElement-button .oo-ui-labelElement-label,
1234 .oo-ui-capsuleItemWidget.oo-ui-widget-enabled .oo-ui-buttonElement-button .oo-ui-indicatorElement-indicator {
1235 display: none;
1236 }
1237 .oo-ui-capsuleItemWidget.oo-ui-widget-disabled {
1238 background-color: #eaecf0;
1239 color: #72777d;
1240 border-color: #c8ccd1;
1241 text-shadow: 0 1px 1px #fff;
1242 }
1243 .oo-ui-capsuleItemWidget.oo-ui-widget-disabled > .oo-ui-buttonElement {
1244 display: none;
1245 }
1246 .oo-ui-searchWidget-query {
1247 position: absolute;
1248 top: 0;
1249 left: 0;
1250 right: 0;
1251 }
1252 .oo-ui-searchWidget-query .oo-ui-textInputWidget {
1253 width: 100%;
1254 }
1255 .oo-ui-searchWidget-results {
1256 position: absolute;
1257 bottom: 0;
1258 left: 0;
1259 right: 0;
1260 overflow-x: hidden;
1261 overflow-y: auto;
1262 }
1263 .oo-ui-searchWidget-query {
1264 height: 4.375em;
1265 padding: 0 1.25em;
1266 border-bottom: 1px solid #c8ccd1;
1267 box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.1);
1268 }
1269 .oo-ui-searchWidget-query .oo-ui-textInputWidget {
1270 margin: 0.9375em 0;
1271 }
1272 .oo-ui-searchWidget-results {
1273 top: 4.375em;
1274 padding: 1.25em;
1275 line-height: 0;
1276 }
1277 .oo-ui-numberInputWidget {
1278 display: inline-block;
1279 position: relative;
1280 max-width: 50em;
1281 }
1282 .oo-ui-numberInputWidget-buttoned .oo-ui-buttonWidget,
1283 .oo-ui-numberInputWidget-buttoned .oo-ui-inputWidget-input {
1284 display: table-cell;
1285 height: 100%;
1286 }
1287 .oo-ui-numberInputWidget-field {
1288 display: table;
1289 table-layout: fixed;
1290 width: 100%;
1291 }
1292 .oo-ui-numberInputWidget-buttoned .oo-ui-buttonWidget {
1293 width: 2.5em;
1294 }
1295 .oo-ui-numberInputWidget-buttoned .oo-ui-buttonWidget .oo-ui-buttonElement-button {
1296 display: block;
1297 min-width: 2.5em;
1298 min-height: 2.5em;
1299 padding-left: 0;
1300 padding-right: 0;
1301 }
1302 .oo-ui-numberInputWidget-buttoned .oo-ui-buttonWidget .oo-ui-buttonElement-button .oo-ui-iconElement-icon {
1303 left: 0.46875em;
1304 min-width: 20px;
1305 width: 1.5625em;
1306 }
1307 .oo-ui-numberInputWidget-buttoned .oo-ui-inputWidget-input {
1308 border-radius: 0;
1309 }
1310 .oo-ui-numberInputWidget-minusButton > .oo-ui-buttonElement-button {
1311 border-top-right-radius: 0;
1312 border-bottom-right-radius: 0;
1313 border-right-width: 0;
1314 }
1315 .oo-ui-numberInputWidget-plusButton > .oo-ui-buttonElement-button {
1316 border-top-left-radius: 0;
1317 border-bottom-left-radius: 0;
1318 border-left-width: 0;
1319 }
1320 .oo-ui-numberInputWidget.oo-ui-widget-disabled.oo-ui-numberInputWidget-buttoned .oo-ui-iconElement-icon {
1321 opacity: 1;
1322 }