Update git submodules
[mediawiki.git] / resources / lib / ooui / oojs-ui-widgets-apex.css
blobae6e47949c113f0d031b486ffaa0296b5cc4df7b
1 /*!
2 * OOUI v0.48.1
3 * https://www.mediawiki.org/wiki/OOUI
5 * Copyright 2011–2023 OOUI Team and other contributors.
6 * Released under the MIT license
7 * http://oojs.mit-license.org
9 * Date: 2023-09-12T23:28:07Z
11 .oo-ui-draggableElement-handle:not( .oo-ui-draggableElement-undraggable ),
12 .oo-ui-draggableElement-handle:not( .oo-ui-draggableElement-undraggable ).oo-ui-widget {
13 cursor: move;
14 /* stylelint-disable plugin/no-unsupported-browser-features */
15 cursor: grab;
16 /* stylelint-enable plugin/no-unsupported-browser-features */
18 .oo-ui-draggableElement-handle:not( .oo-ui-draggableElement-undraggable ):active {
19 /* stylelint-disable plugin/no-unsupported-browser-features */
20 cursor: grabbing;
21 /* stylelint-enable plugin/no-unsupported-browser-features */
23 .oo-ui-draggableElement-handle.oo-ui-widget-disabled,
24 .oo-ui-widget-disabled .oo-ui-draggableElement-handle {
25 cursor: default;
27 .oo-ui-draggableElement-placeholder {
28 opacity: 0.2;
30 .oo-ui-draggableGroupElement-horizontal .oo-ui-draggableElement {
31 display: inline-block;
36 .oo-ui-bookletLayout-stackLayout.oo-ui-stackLayout-continuous > .oo-ui-panelLayout-scrollable {
37 overflow: hidden;
39 .oo-ui-bookletLayout-stackLayout > .oo-ui-panelLayout {
40 width: 100%;
41 box-sizing: border-box;
43 .oo-ui-bookletLayout-outlinePanel-editable > .oo-ui-outlineSelectWidget {
44 height: auto;
45 position: absolute;
46 top: 0;
47 left: 0;
48 right: 0;
49 bottom: 2.5em;
50 overflow: auto;
51 -webkit-overflow-scrolling: touch;
53 .oo-ui-bookletLayout-outlinePanel > .oo-ui-outlineControlsWidget {
54 position: absolute;
55 bottom: 0;
56 left: 0;
57 right: 0;
58 height: 2.5em;
60 .oo-ui-bookletLayout-stackLayout > .oo-ui-panelLayout {
61 padding: 1.5em;
63 .oo-ui-bookletLayout-outlinePanel > .oo-ui-outlineControlsWidget {
64 box-shadow: 0 0 0.25em rgba(0, 0, 0, 0.25);
66 .oo-ui-bookletLayout > .oo-ui-menuLayout-menu {
67 border-right: 1px solid #ddd;
70 .oo-ui-indexLayout {
71 /* Use two classes to ensure increased specificity over menuLayout */
73 .oo-ui-indexLayout.oo-ui-menuLayout > .oo-ui-menuLayout-menu {
74 height: auto;
76 .oo-ui-indexLayout.oo-ui-menuLayout.oo-ui-menuLayout-expanded > .oo-ui-menuLayout-menu {
77 height: 3em;
78 white-space: nowrap;
80 .oo-ui-indexLayout.oo-ui-menuLayout.oo-ui-menuLayout-expanded > .oo-ui-menuLayout-content {
81 top: 3em;
83 .oo-ui-indexLayout-stackLayout > .oo-ui-panelLayout[hidden] {
84 width: 0;
85 height: 0;
86 padding: 0;
87 overflow: hidden;
89 .oo-ui-indexLayout-stackLayout > .oo-ui-panelLayout {
90 padding: 1.5em;
93 .oo-ui-copyTextLayout > .oo-ui-fieldLayout-body > .oo-ui-fieldLayout-field {
94 max-width: 50em;
96 .oo-ui-copyTextLayout-multiline-button {
97 display: block;
98 max-width: 50em;
99 margin-top: 0.5em;
100 /* Float to right of inline help */
101 float: right;
104 .oo-ui-menuLayout {
105 top: 0;
106 left: 0;
107 right: 0;
108 bottom: 0;
110 .oo-ui-menuLayout-expanded,
111 .oo-ui-menuLayout-expanded > .oo-ui-menuLayout-menu,
112 .oo-ui-menuLayout-expanded > .oo-ui-menuLayout-content {
113 position: absolute;
115 .oo-ui-menuLayout-expanded > .oo-ui-menuLayout-menu {
116 z-index: 1;
118 .oo-ui-menuLayout-static.oo-ui-menuLayout-after,
119 .oo-ui-menuLayout-static.oo-ui-menuLayout-before {
120 display: table;
121 width: 100%;
123 .oo-ui-menuLayout-static.oo-ui-menuLayout-after > .oo-ui-menuLayout-menu,
124 .oo-ui-menuLayout-static.oo-ui-menuLayout-before > .oo-ui-menuLayout-menu,
125 .oo-ui-menuLayout-static.oo-ui-menuLayout-after > .oo-ui-menuLayout-content,
126 .oo-ui-menuLayout-static.oo-ui-menuLayout-before > .oo-ui-menuLayout-content {
127 display: table-cell;
128 vertical-align: top;
130 .oo-ui-menuLayout > .oo-ui-menuLayout-menu,
131 .oo-ui-menuLayout > .oo-ui-menuLayout-content {
132 transition-property: height, width, top, left, right, bottom;
133 transition-duration: 250ms;
135 .oo-ui-menuLayout > .oo-ui-menuLayout-menu {
136 height: 15.625em;
137 width: 15.625em;
139 .oo-ui-menuLayout > .oo-ui-menuLayout-content {
140 top: 15.625em;
141 left: 15.625em;
142 right: 15.625em;
143 bottom: 15.625em;
145 .oo-ui-menuLayout.oo-ui-menuLayout-hideMenu > .oo-ui-menuLayout-menu {
146 width: 0 !important;
147 height: 0 !important;
148 overflow: hidden;
150 .oo-ui-menuLayout.oo-ui-menuLayout-hideMenu > .oo-ui-menuLayout-content {
151 top: 0 !important;
152 left: 0 !important;
153 right: 0 !important;
154 bottom: 0 !important;
156 .oo-ui-menuLayout.oo-ui-menuLayout-showMenu.oo-ui-menuLayout-top > .oo-ui-menuLayout-menu {
157 width: auto !important;
158 left: 0;
159 top: 0;
160 right: 0;
162 .oo-ui-menuLayout.oo-ui-menuLayout-showMenu.oo-ui-menuLayout-top > .oo-ui-menuLayout-content {
163 right: 0 !important;
164 bottom: 0 !important;
165 left: 0 !important;
167 .oo-ui-menuLayout.oo-ui-menuLayout-showMenu.oo-ui-menuLayout-after > .oo-ui-menuLayout-menu {
168 height: auto !important;
169 top: 0;
170 right: 0;
171 bottom: 0;
173 .oo-ui-menuLayout.oo-ui-menuLayout-showMenu.oo-ui-menuLayout-after > .oo-ui-menuLayout-content {
174 bottom: 0 !important;
175 left: 0 !important;
176 top: 0 !important;
178 .oo-ui-menuLayout.oo-ui-menuLayout-showMenu.oo-ui-menuLayout-bottom > .oo-ui-menuLayout-menu {
179 width: auto !important;
180 right: 0;
181 bottom: 0;
182 left: 0;
184 .oo-ui-menuLayout.oo-ui-menuLayout-showMenu.oo-ui-menuLayout-bottom > .oo-ui-menuLayout-content {
185 left: 0 !important;
186 top: 0 !important;
187 right: 0 !important;
189 .oo-ui-menuLayout.oo-ui-menuLayout-showMenu.oo-ui-menuLayout-before > .oo-ui-menuLayout-menu {
190 height: auto !important;
191 bottom: 0;
192 left: 0;
193 top: 0;
195 .oo-ui-menuLayout.oo-ui-menuLayout-showMenu.oo-ui-menuLayout-before > .oo-ui-menuLayout-content {
196 top: 0 !important;
197 right: 0 !important;
198 bottom: 0 !important;
203 .oo-ui-stackLayout-continuous > .oo-ui-panelLayout {
204 display: block;
205 position: relative;
208 .oo-ui-buttonSelectWidget {
209 display: inline-block;
210 border-radius: 3px;
211 margin-right: 0.5em;
212 z-index: 0;
213 position: relative;
214 padding-bottom: 1px;
216 .oo-ui-buttonSelectWidget:last-child {
217 margin-right: 0;
219 .oo-ui-buttonSelectWidget:focus {
220 outline: 0;
222 .oo-ui-buttonSelectWidget .oo-ui-buttonOptionWidget .oo-ui-buttonElement-button {
223 border-radius: 0;
224 margin-right: -1px;
225 margin-bottom: -1px;
227 .oo-ui-buttonSelectWidget .oo-ui-buttonOptionWidget:first-child .oo-ui-buttonElement-button {
228 border-bottom-left-radius: 3px;
229 border-top-left-radius: 3px;
231 .oo-ui-buttonSelectWidget .oo-ui-buttonOptionWidget:last-child .oo-ui-buttonElement-button {
232 border-bottom-right-radius: 3px;
233 border-top-right-radius: 3px;
234 margin-right: 0;
236 .oo-ui-buttonSelectWidget.oo-ui-widget-enabled:focus .oo-ui-buttonOptionWidget.oo-ui-optionWidget-selected .oo-ui-buttonElement-button {
237 border-color: #ace;
238 box-shadow: 0 0 2px 2px #ace;
240 .oo-ui-buttonSelectWidget.oo-ui-widget-enabled .oo-ui-buttonElement.oo-ui-widget-enabled > .oo-ui-buttonElement-button:hover,
241 .oo-ui-buttonSelectWidget.oo-ui-widget-enabled .oo-ui-buttonElement.oo-ui-widget-enabled > .oo-ui-buttonElement-button:active {
242 z-index: 1;
244 .oo-ui-buttonSelectWidget.oo-ui-widget-enabled .oo-ui-buttonElement.oo-ui-buttonElement-active > .oo-ui-buttonElement-button {
245 z-index: 3;
247 .oo-ui-buttonSelectWidget.oo-ui-widget-enabled .oo-ui-buttonElement.oo-ui-widget-disabled > .oo-ui-buttonElement-button {
248 z-index: -1;
251 .oo-ui-buttonOptionWidget {
252 display: inline-block;
253 padding: 0;
254 background-color: transparent;
256 .oo-ui-buttonOptionWidget.oo-ui-buttonElement-active .oo-ui-buttonElement-button {
257 cursor: default;
259 .oo-ui-buttonOptionWidget.oo-ui-optionWidget-selected,
260 .oo-ui-buttonOptionWidget.oo-ui-optionWidget-pressed,
261 .oo-ui-buttonOptionWidget.oo-ui-optionWidget-highlighted {
262 background-color: transparent;
264 .oo-ui-buttonOptionWidget.oo-ui-iconElement .oo-ui-iconElement-icon,
265 .oo-ui-buttonOptionWidget.oo-ui-indicatorElement .oo-ui-indicatorElement-indicator {
266 position: static;
267 display: inline-block;
268 vertical-align: middle;
271 .oo-ui-toggleButtonWidget {
272 margin-right: 0.5em;
274 .oo-ui-toggleButtonWidget:last-child {
275 margin-right: 0;
277 .oo-ui-toggleButtonWidget.oo-ui-widget-enabled.oo-ui-buttonElement-frameless.oo-ui-toggleWidget-on .oo-ui-buttonElement-button {
278 background-color: rgba(0, 0, 0, 34/255);
280 .oo-ui-toggleButtonWidget.oo-ui-widget-enabled.oo-ui-buttonElement-frameless.oo-ui-toggleWidget-on .oo-ui-buttonElement-button > .oo-ui-labelElement-label {
281 color: #000;
284 .oo-ui-selectFileWidget-dropTarget {
285 position: relative;
286 cursor: default;
287 height: 8.815em;
289 .oo-ui-selectFileWidget-dropTarget .oo-ui-selectFileWidget-dropLabel,
290 .oo-ui-selectFileWidget-dropTarget .oo-ui-selectFileInputWidget-selectButton {
291 display: none;
293 .oo-ui-selectFileWidget-dropTarget .oo-ui-selectFileWidget-thumbnail {
294 width: 7.815em;
295 position: absolute;
296 top: 0.5em;
297 bottom: 0.5em;
298 left: 0.5em;
299 background-position: center center;
300 background-repeat: no-repeat;
301 background-size: contain;
303 .oo-ui-selectFileWidget-dropTarget .oo-ui-selectFileWidget-thumbnail > .oo-ui-selectFileWidget-noThumbnail-icon {
304 opacity: 0.4;
305 height: 7.815em;
306 width: 7.815em;
308 .oo-ui-selectFileWidget-dropTarget .oo-ui-pendingElement-pending {
309 background-repeat: repeat;
311 .oo-ui-selectFileWidget-dropTarget .oo-ui-selectFileInputWidget-info {
312 display: block;
313 height: 100%;
314 width: auto;
315 margin-right: 0;
317 .oo-ui-selectFileWidget-dropTarget .oo-ui-selectFileInputWidget-info > .oo-ui-inputWidget-input {
318 border: 0;
319 box-shadow: none;
320 background: transparent;
322 .oo-ui-selectFileWidget-dropTarget.oo-ui-selectFileWidget-withThumbnail .oo-ui-selectFileInputWidget-info {
323 margin-left: 8.815em;
325 .oo-ui-selectFileWidget-dropTarget .oo-ui-selectFileInputWidget-label {
326 display: block;
327 position: relative;
328 top: inherit;
330 .oo-ui-selectFileWidget-dropTarget .oo-ui-selectFileInputWidget-fileName {
331 display: block;
333 .oo-ui-selectFileWidget.oo-ui-selectFileInputWidget-empty.oo-ui-selectFileWidget-dropTarget {
334 text-align: center;
336 .oo-ui-selectFileWidget.oo-ui-selectFileInputWidget-empty.oo-ui-selectFileWidget-dropTarget .oo-ui-selectFileWidget-thumbnail,
337 .oo-ui-selectFileWidget.oo-ui-selectFileInputWidget-empty.oo-ui-selectFileWidget-dropTarget .oo-ui-selectFileInputWidget-info {
338 display: none;
340 .oo-ui-selectFileWidget.oo-ui-selectFileInputWidget-empty.oo-ui-selectFileWidget-dropTarget .oo-ui-selectFileInputWidget-selectButton {
341 display: block;
342 margin: 2.2em 1em 1em;
344 .oo-ui-selectFileWidget.oo-ui-selectFileInputWidget-empty.oo-ui-widget-enabled .oo-ui-selectFileWidget-dropLabel {
345 display: block;
347 .oo-ui-selectFileWidget.oo-ui-selectFileInputWidget-empty.oo-ui-widget-disabled.oo-ui-selectFileWidget-dropTarget {
348 -webkit-touch-callout: none;
349 -webkit-user-select: none;
350 -moz-user-select: none;
351 -ms-user-select: none;
352 user-select: none;
354 .oo-ui-selectFileWidget.oo-ui-selectFileInputWidget-empty.oo-ui-widget-disabled.oo-ui-selectFileWidget-dropTarget,
355 .oo-ui-selectFileWidget.oo-ui-selectFileInputWidget-empty.oo-ui-widget-disabled.oo-ui-selectFileWidget-dropTarget .oo-ui-buttonElement-button {
356 /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
357 cursor: no-drop;
359 .oo-ui-selectFileWidget-dropTarget {
360 background-color: #fff;
361 border: 1px solid #aaa;
362 border-radius: 3px;
363 vertical-align: middle;
365 .oo-ui-selectFileWidget-dropTarget.oo-ui-selectFileInputWidget-empty {
366 border-style: dashed;
368 .oo-ui-selectFileWidget-dropTarget .oo-ui-pendingElement-pending {
369 background-size: 1.5625em 1.5625em;
371 .oo-ui-selectFileWidget-buttonOnly {
372 width: auto;
373 max-width: none;
375 .oo-ui-selectFileWidget.oo-ui-widget-enabled.oo-ui-selectFileWidget-canDrop.oo-ui-selectFileWidget-dropTarget,
376 .oo-ui-selectFileWidget.oo-ui-widget-enabled.oo-ui-selectFileWidget-canDrop .oo-ui-selectFileInputWidget-info > .oo-ui-inputWidget-input {
377 background-color: #e1f3ff;
379 .oo-ui-selectFileWidget.oo-ui-widget-disabled.oo-ui-selectFileWidget-dropTarget,
380 .oo-ui-selectFileWidget.oo-ui-selectFileInputWidget-empty.oo-ui-widget-disabled.oo-ui-selectFileWidget-dropTarget {
381 background-color: #f3f3f3;
382 color: #ccc;
383 border-color: #ddd;
384 text-shadow: 0 1px 1px #fff;
388 .oo-ui-outlineOptionWidget {
389 -webkit-touch-callout: none;
390 -webkit-user-select: none;
391 -moz-user-select: none;
392 -ms-user-select: none;
393 user-select: none;
394 font-size: 1.1em;
395 padding: 0.75em;
397 .oo-ui-outlineOptionWidget .oo-ui-iconElement-icon {
398 font-size: 90.90909%;
400 .oo-ui-outlineOptionWidget.oo-ui-indicatorElement .oo-ui-labelElement-label {
401 padding-right: 1.5em;
403 .oo-ui-outlineOptionWidget.oo-ui-indicatorElement .oo-ui-indicatorElement-indicator {
404 opacity: 0.5;
406 .oo-ui-outlineOptionWidget-level-0.oo-ui-iconElement {
407 padding-left: 2.5em;
409 .oo-ui-outlineOptionWidget-level-1 {
410 padding-left: 2.5em;
412 .oo-ui-outlineOptionWidget-level-1.oo-ui-iconElement {
413 padding-left: 4.5em;
415 .oo-ui-outlineOptionWidget-level-1.oo-ui-iconElement .oo-ui-iconElement-icon {
416 left: 2.5em;
418 .oo-ui-outlineOptionWidget-level-2 {
419 padding-left: 5em;
421 .oo-ui-outlineOptionWidget-level-2.oo-ui-iconElement {
422 padding-left: 7em;
424 .oo-ui-outlineOptionWidget-level-2.oo-ui-iconElement .oo-ui-iconElement-icon {
425 left: 5em;
427 .oo-ui-selectWidget-unpressed .oo-ui-outlineOptionWidget.oo-ui-optionWidget-selected {
428 background-color: #a7dcff;
429 text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5);
432 .oo-ui-outlineControlsWidget {
433 background-color: #fff;
435 .oo-ui-outlineControlsWidget-items,
436 .oo-ui-outlineControlsWidget-movers {
437 float: left;
438 box-sizing: border-box;
440 .oo-ui-outlineControlsWidget-items {
441 float: left;
443 .oo-ui-outlineControlsWidget-items .oo-ui-buttonWidget {
444 float: left;
446 .oo-ui-outlineControlsWidget-movers {
447 float: right;
449 .oo-ui-outlineControlsWidget-items > .oo-ui-buttonWidget,
450 .oo-ui-outlineControlsWidget-movers > .oo-ui-buttonWidget {
451 height: 2.5em;
452 width: 2.5em;
453 /* There's a lot of weird specific margins with weird specific selectors */
454 margin: 0 !important;
455 /* stylelint-disable-line declaration-no-important */
458 .oo-ui-tabSelectWidget {
459 text-align: left;
460 overflow-x: auto;
461 overflow-y: hidden;
462 -webkit-overflow-scrolling: auto;
464 .oo-ui-tabSelectWidget-mobile {
465 white-space: nowrap;
467 .oo-ui-tabSelectWidget-framed {
468 background-color: #eee;
469 box-shadow: inset 0 -0.015em 0.1em rgba(0, 0, 0, 0.1);
471 .oo-ui-tabSelectWidget-frameless {
472 box-shadow: inset 0 -1px 0 0 #ccc;
474 .oo-ui-tabSelectWidget-mobile::after {
475 content: '';
476 position: absolute;
477 bottom: 0;
478 right: 0;
479 height: 2.5em;
480 width: 2em;
481 pointer-events: none;
483 .oo-ui-tabSelectWidget-mobile.oo-ui-tabSelectWidget-framed::after {
484 background-color: #eeeeee;
485 background-image: linear-gradient(to right, rgba(238, 238, 238, 0) 0, #eee 100%);
486 background-color: transparent;
488 .oo-ui-tabSelectWidget-mobile.oo-ui-tabSelectWidget-frameless::after {
489 background-color: #ffffff;
490 background-image: linear-gradient(to right, rgba(255, 255, 255, 0) 0, #fff 100%);
491 background-color: transparent;
492 bottom: 2px;
494 .oo-ui-tabSelectWidget.oo-ui-widget-enabled:focus {
495 outline: 0;
498 .oo-ui-tabOptionWidget {
499 display: inline-block;
500 box-sizing: border-box;
501 vertical-align: bottom;
502 color: #333;
503 margin: 0.5em 0 0 0.75em;
504 border-color: transparent;
505 border-style: solid;
506 padding: 0.5em 1em;
508 .oo-ui-tabOptionWidget > .oo-ui-labelElement-label {
509 color: inherit;
510 text-decoration: inherit;
512 .oo-ui-tabOptionWidget.oo-ui-optionWidget-selected {
513 cursor: default;
515 .oo-ui-tabSelectWidget-mobile .oo-ui-tabOptionWidget:last-child {
516 margin-right: 2em;
518 .oo-ui-tabSelectWidget-framed .oo-ui-tabOptionWidget {
519 border-width: 1px 1px 0 1px;
520 border-top-left-radius: 3px;
521 border-top-right-radius: 3px;
523 .oo-ui-tabSelectWidget-framed .oo-ui-tabOptionWidget.oo-ui-optionWidget-selected {
524 background-color: #fff;
525 color: #000;
526 border-color: #ddd;
528 .oo-ui-tabSelectWidget-framed .oo-ui-tabOptionWidget.oo-ui-widget-enabled:hover {
529 background-color: rgba(255, 255, 255, 0.2);
530 color: #000;
531 border-color: #ddd;
533 .oo-ui-tabSelectWidget-framed .oo-ui-tabOptionWidget.oo-ui-widget-enabled:active {
534 background-color: #fff;
535 color: #000;
536 border-color: #ddd;
538 .oo-ui-tabSelectWidget-framed .oo-ui-tabOptionWidget.oo-ui-widget-enabled.oo-ui-optionWidget-selected:hover {
539 background-color: #fff;
540 color: #000;
542 .oo-ui-tabSelectWidget-framed.oo-ui-widget-enabled:focus .oo-ui-tabOptionWidget.oo-ui-optionWidget-selected {
543 box-shadow: 0 0 2px 2px #ace, inset 0 -2px 0 0 #087ecc;
545 .oo-ui-tabSelectWidget-frameless .oo-ui-tabOptionWidget {
546 margin: 0.5em 0.75em 0 0;
547 border-width: 0;
548 background-color: transparent;
549 box-shadow: inset 0 0 0 0 #087ecc;
550 transition-property: color, box-shadow;
551 transition-duration: 100ms;
553 .oo-ui-tabSelectWidget-frameless .oo-ui-tabOptionWidget.oo-ui-optionWidget-selected {
554 color: #087ecc;
555 box-shadow: inset 0 -2px 0 0 #087ecc;
557 .oo-ui-tabSelectWidget-frameless .oo-ui-tabOptionWidget.oo-ui-widget-enabled:hover,
558 .oo-ui-tabSelectWidget-frameless .oo-ui-tabOptionWidget.oo-ui-widget-enabled:active {
559 color: #087ecc;
560 box-shadow: inset 0 -2px 0 0 #087ecc;
562 .oo-ui-tabSelectWidget-frameless.oo-ui-widget-enabled:focus .oo-ui-tabOptionWidget.oo-ui-optionWidget-selected {
563 background-color: #e1f3ff;
566 .oo-ui-tagMultiselectWidget {
567 display: inline-block;
568 position: relative;
569 width: 100%;
570 max-width: 50em;
572 .oo-ui-tagMultiselectWidget-handle {
573 width: 100%;
574 display: block;
575 position: relative;
577 .oo-ui-tagMultiselectWidget-handle > .oo-ui-iconElement-icon,
578 .oo-ui-tagMultiselectWidget-handle > .oo-ui-indicatorElement-indicator {
579 position: absolute;
580 top: 0;
581 height: 100%;
583 .oo-ui-tagMultiselectWidget-content {
584 position: relative;
586 .oo-ui-tagMultiselectWidget-group {
587 display: inline;
589 .oo-ui-tagMultiselectWidget-outlined {
590 width: 100%;
592 .oo-ui-tagMultiselectWidget.oo-ui-widget-disabled .oo-ui-tagMultiselectWidget-group > input {
593 display: none;
595 .oo-ui-tagMultiselectWidget-focusTrap {
596 display: inline-block;
597 height: 1px;
598 width: 1px;
600 .oo-ui-tagMultiselectWidget-focusTrap:focus {
601 outline: 0;
603 .oo-ui-tagMultiselectWidget-handle {
604 cursor: text;
605 min-height: 2.4em;
606 margin-right: 0.5em;
607 padding: 0.15em 0.25em;
608 border: 1px solid rgba(0, 0, 0, 0.1);
609 border-radius: 3px;
610 box-sizing: border-box;
612 .oo-ui-tagMultiselectWidget-handle:last-child {
613 margin-right: 0;
615 .oo-ui-tagMultiselectWidget-handle .oo-ui-tagMultiselectWidget-group > input {
616 border: 0;
617 line-height: 1.675em;
618 margin: 0;
619 margin-left: 0.2em;
620 padding: 0;
621 font-size: inherit;
622 font-family: inherit;
623 background-color: transparent;
624 color: #000;
625 vertical-align: middle;
626 /* stylelint-disable selector-no-vendor-prefix */
627 /* stylelint-enable selector-no-vendor-prefix */
629 .oo-ui-tagMultiselectWidget-handle .oo-ui-tagMultiselectWidget-group > input::-webkit-input-placeholder {
630 color: #767676;
631 opacity: 1;
633 .oo-ui-tagMultiselectWidget-handle .oo-ui-tagMultiselectWidget-group > input:-ms-input-placeholder {
634 color: #767676;
635 opacity: 1;
637 .oo-ui-tagMultiselectWidget-handle .oo-ui-tagMultiselectWidget-group > input::-moz-placeholder {
638 color: #767676;
639 opacity: 1;
641 .oo-ui-tagMultiselectWidget-handle .oo-ui-tagMultiselectWidget-group > input::placeholder {
642 color: #767676;
643 opacity: 1;
645 .oo-ui-tagMultiselectWidget-handle .oo-ui-tagMultiselectWidget-group > input:focus {
646 outline: 0;
648 .oo-ui-tagMultiselectWidget.oo-ui-iconElement .oo-ui-tagMultiselectWidget-handle {
649 padding-left: 2.475em;
651 .oo-ui-tagMultiselectWidget.oo-ui-iconElement .oo-ui-tagMultiselectWidget-handle > .oo-ui-iconElement-icon {
652 left: 0;
653 margin: 0 0.3em;
655 .oo-ui-tagMultiselectWidget.oo-ui-indicatorElement .oo-ui-tagMultiselectWidget-handle {
656 padding-right: 2.4875em;
658 .oo-ui-tagMultiselectWidget.oo-ui-indicatorElement .oo-ui-tagMultiselectWidget-handle > .oo-ui-indicatorElement-indicator {
659 right: 0;
660 margin: 0 0.775em;
662 .oo-ui-tagMultiselectWidget.oo-ui-tagMultiselectWidget-outlined .oo-ui-tagMultiselectWidget-handle {
663 border-bottom: 0;
664 border-bottom-left-radius: 0;
665 border-bottom-right-radius: 0;
667 .oo-ui-tagMultiselectWidget.oo-ui-tagMultiselectWidget-outlined .oo-ui-inputWidget-input {
668 border-top-left-radius: 0;
669 border-top-right-radius: 0;
671 .oo-ui-tagMultiselectWidget.oo-ui-widget-enabled {
672 background-color: #fff;
674 .oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-inlined:hover .oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-inlined-handle {
675 border-color: rgba(0, 0, 0, 0.2);
677 .oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-inlined.oo-ui-tagMultiselectWidget-focus .oo-ui-tagMultiselectWidget-handle {
678 border-color: #ace;
679 outline: 0;
680 box-shadow: 0 0 2px 2px #ace;
682 .oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-inlined.oo-ui-flaggedElement-invalid .oo-ui-tagMultiselectWidget-handle,
683 .oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-inlined.oo-ui-flaggedElement-invalid:hover .oo-ui-tagMultiselectWidget-handle {
684 border-color: #d45353;
686 .oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-outlined .oo-ui-tagItemWidget.oo-ui-widget-enabled {
687 background-color: #fff;
689 .oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-tagMultiselectWidget-outlined.oo-ui-flaggedElement-invalid .oo-ui-inputWidget-input {
690 border-color: #d45353;
692 .oo-ui-tagMultiselectWidget.oo-ui-widget-enabled.oo-ui-flaggedElement-invalid .oo-ui-inputWidget-input {
693 color: #d45353;
695 .oo-ui-tagMultiselectWidget.oo-ui-widget-disabled {
696 background-color: #f3f3f3;
698 .oo-ui-tagMultiselectWidget.oo-ui-widget-disabled-handle {
699 color: #ccc;
700 border-color: #ddd;
701 text-shadow: 0 1px 1px #fff;
702 cursor: default;
704 .oo-ui-tagMultiselectWidget.oo-ui-widget-disabled-handle > .oo-ui-iconElement-icon,
705 .oo-ui-tagMultiselectWidget.oo-ui-widget-disabled-handle > .oo-ui-indicatorElement-indicator {
706 opacity: 0.2;
708 .oo-ui-tagMultiselectWidget-popup > .oo-ui-popupWidget-popup {
709 border: 0;
713 .oo-ui-tagItemWidget {
714 position: relative;
715 display: inline-block;
716 cursor: default;
717 white-space: nowrap;
718 background-color: #ebebeb;
719 background-image: linear-gradient(to bottom, #fafafa 0, #ddd 100%);
720 color: #333;
721 box-sizing: border-box;
722 width: auto;
723 max-width: 100%;
724 height: 1.71875em;
725 margin: 0.1em;
726 border: 1px solid #ccc;
727 border-radius: 3px;
728 padding: 0 0.4em;
729 line-height: 1.640625em;
730 vertical-align: middle;
732 .oo-ui-tagItemWidget.oo-ui-labelElement .oo-ui-labelElement-label {
733 display: inline-block;
734 max-width: 100%;
735 text-overflow: ellipsis;
736 overflow: hidden;
738 .oo-ui-tagItemWidget.oo-ui-labelElement:not( .oo-ui-tagItemWidget-fixed ) .oo-ui-labelElement-label {
739 cursor: text;
741 .oo-ui-tagItemWidget:focus {
742 border-color: #ace;
743 outline: 0;
744 box-shadow: 0 0 2px 2px #ace;
746 .oo-ui-tagItemWidget.oo-ui-labelElement .oo-ui-labelElement-label {
747 text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5);
749 .oo-ui-tagItemWidget > .oo-ui-buttonElement > .oo-ui-buttonElement-button {
750 padding: 0;
752 .oo-ui-tagItemWidget > .oo-ui-buttonElement > .oo-ui-buttonElement-button .oo-ui-labelElement-label,
753 .oo-ui-tagItemWidget > .oo-ui-buttonElement > .oo-ui-buttonElement-button .oo-ui-indicatorElement-indicator {
754 display: none;
756 .oo-ui-tagItemWidget.oo-ui-widget-enabled:not( .oo-ui-tagItemWidget-fixed ) {
757 padding-right: 1.796875em;
759 .oo-ui-tagItemWidget.oo-ui-widget-enabled > .oo-ui-buttonElement {
760 display: block;
761 width: 1.5625em;
762 position: absolute;
763 top: 0;
764 right: 0;
766 .oo-ui-tagItemWidget.oo-ui-widget-enabled .oo-ui-buttonElement-button {
767 display: block;
768 transition-property: background-color;
769 transition-duration: 100ms;
771 .oo-ui-tagItemWidget.oo-ui-widget-enabled .oo-ui-buttonElement-button .oo-ui-iconElement-icon {
772 min-width: 14px;
773 width: 1.09375em;
774 margin: 0 0 0 0.234375em;
776 .oo-ui-tagItemWidget.oo-ui-widget-disabled {
777 opacity: 0.5;
778 transform: translateZ(0);
779 box-shadow: none;
780 color: #333;
781 background: #eee;
782 border-color: #ccc;
784 .oo-ui-tagItemWidget.oo-ui-widget-disabled > .oo-ui-buttonElement {
785 display: none;
788 .oo-ui-searchWidget-query {
789 position: absolute;
790 top: 0;
791 left: 0;
792 right: 0;
794 .oo-ui-searchWidget-query .oo-ui-textInputWidget {
795 width: 100%;
797 .oo-ui-searchWidget-results {
798 position: absolute;
799 bottom: 0;
800 left: 0;
801 right: 0;
802 overflow-x: hidden;
803 overflow-y: auto;
804 -webkit-overflow-scrolling: touch;
806 .oo-ui-searchWidget-query {
807 height: 4em;
808 padding: 0 1em;
809 box-shadow: 0 0 0.5em rgba(0, 0, 0, 0.2);
811 .oo-ui-searchWidget-query .oo-ui-textInputWidget {
812 margin: 0.75em 0;
814 .oo-ui-searchWidget-results {
815 top: 4em;
816 padding: 1em;
817 line-height: 0;