UNPKG

16.6 kBCSSView Raw
1/* for debugging */
2@keyframes react-widgets-autofill-start {
3 from {
4 /**/
5 }
6 to {
7 /**/
8 }
9}
10@keyframes react-widgets-autofill-cancel {
11 from {
12 /**/
13 }
14 to {
15 /**/
16 }
17}
18.rw-btn {
19 padding: 0;
20 margin: 0;
21 border: none;
22 color: inherit;
23 box-shadow: none;
24 background: none;
25 font: inherit;
26 line-height: inherit;
27 -ms-touch-action: manipulation;
28 touch-action: manipulation;
29 outline: 0;
30 display: inline-flex;
31 align-items: center;
32 justify-content: center;
33 background-clip: padding-box;
34 cursor: pointer;
35}
36.rw-btn:focus {
37 outline: none;
38}
39.rw-btn:disabled, fieldset[disabled] .rw-btn, .rw-state-disabled .rw-btn, .rw-state-readonly .rw-btn {
40 cursor: inherit;
41}
42fieldset[disabled] .rw-btn {
43 pointer-events: none;
44}
45
46.rw-picker-caret,
47.rw-picker-btn {
48 color: #212529;
49}
50
51.rw-picker-btn:hover {
52 background-color: #e9ecef;
53}
54.rw-picker-btn:active {
55 background-color: #dee2e6;
56}
57.rw-picker-btn:disabled, fieldset[disabled] .rw-picker-btn {
58 background-color: #e9ecef;
59}
60
61.rw-input-addon, .rw-input-addon.rw-picker-btn {
62 border-left: #ccc 1px solid;
63}
64[dir=rtl] .rw-input-addon, [dir=rtl] .rw-input-addon.rw-picker-btn {
65 border-right: #ccc 1px solid;
66 border-left: none;
67}
68
69.rw-sr {
70 position: absolute;
71 width: 1px;
72 height: 1px;
73 margin: -1px;
74 padding: 0;
75 overflow: hidden;
76 clip: rect(0, 0, 0, 0);
77 border: 0;
78}
79
80.rw-widget {
81 border: none;
82 color: #212529;
83 font-size: 1em;
84 font-family: inherit;
85 outline: none;
86 position: relative;
87}
88.rw-widget, .rw-widget *, .rw-widget:after, .rw-widget:before, .rw-widget *:after, .rw-widget *:before {
89 box-sizing: border-box;
90}
91
92.rw-state-readonly,
93.rw-state-disabled,
94fieldset[disabled] .rw-widget {
95 cursor: not-allowed;
96}
97
98.rw-widget-picker {
99 display: grid;
100 overflow: hidden;
101 min-height: 38px;
102 background-color: #fff;
103 border: #ccc 1px solid;
104 border-radius: 4px;
105 outline: none;
106 grid-template: 1fr/1fr 1.9em;
107 width: 100%;
108}
109.rw-widget-picker.rw-hide-caret {
110 grid-template-columns: 1fr;
111}
112.rw-state-focus .rw-widget-picker {
113 border-color: #80bdff;
114 box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
115 transition: box-shadow 0.15s ease-in-out;
116}
117.rw-state-focus .rw-widget-picker.rw-widget-input {
118 box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25), inset 0 1px 1px rgba(0, 0, 0, 0.075);
119}
120
121.rw-input {
122 padding: 0;
123 margin: 0;
124 border: none;
125 color: inherit;
126 box-shadow: none;
127 background: none;
128 font: inherit;
129 line-height: inherit;
130 -ms-touch-action: manipulation;
131 touch-action: manipulation;
132 outline: 0;
133 padding: 0 0.857em;
134}
135.rw-input:disabled {
136 opacity: 1;
137}
138.rw-input[type=text]::-ms-clear {
139 display: none;
140}
141.rw-input:disabled, .rw-input:read-only {
142 cursor: inherit;
143}
144
145.rw-widget-input {
146 color: #495057;
147 background-color: #fff;
148 box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
149 background-clip: padding-box;
150}
151.rw-widget-input.rw-state-disabled, .rw-state-disabled .rw-widget-input, fieldset[disabled] .rw-widget-input {
152 background-color: #e9ecef;
153}
154
155.rw-placeholder,
156.rw-input::placeholder {
157 color: #999;
158}
159.rw-state-disabled .rw-placeholder,
160.rw-state-disabled .rw-input::placeholder {
161 color: #999;
162}
163
164.rw-detect-autofill {
165 padding: 0;
166 margin: 0;
167 border: none;
168 color: inherit;
169 box-shadow: none;
170 background: none;
171 font: inherit;
172 line-height: inherit;
173 -ms-touch-action: manipulation;
174 touch-action: manipulation;
175 outline: 0;
176}
177.rw-detect-autofill:disabled {
178 opacity: 1;
179}
180
181.rw-detect-autofill:-webkit-autofill {
182 animation-name: react-widgets-autofill-start;
183 animation-duration: 0.01ms;
184}
185
186.rw-detect-autofill:not(:-webkit-autofill) {
187 animation-name: react-widgets-autofill-cancel;
188 animation-duration: 0.01ms;
189}
190
191.rw-webkit-autofill .rw-widget-container,
192.rw-input:-webkit-autofill {
193 background-color: #e8f0fe !important;
194 background-image: none !important;
195 color: black !important;
196}
197
198.rw-list {
199 font-size: 1em;
200 overflow-x: visible;
201 overflow-y: auto;
202 padding-top: 0.5em;
203 padding-bottom: 0.5em;
204}
205.rw-list:focus {
206 outline: none;
207}
208
209.rw-list-option, .rw-list-option-create {
210 user-select: none;
211 color: #212529;
212 cursor: pointer;
213 border: 1px solid transparent;
214 background-clip: padding-box;
215}
216.rw-list-option:hover, .rw-list-option-create:hover, [data-intent=keyboard] .rw-list-option.rw-state-focus:not(.rw-state-selected), [data-intent=keyboard] .rw-state-focus.rw-list-option-create:not(.rw-state-selected) {
217 background-color: #e9ecef;
218 border-color: #e9ecef;
219}
220.rw-list-option.rw-state-selected, .rw-state-selected.rw-list-option-create {
221 background-color: #007bff;
222 border-color: #007bff;
223 color: #fff;
224}
225.rw-list-option.rw-state-disabled, .rw-state-disabled.rw-list-option-create {
226 cursor: not-allowed;
227 background-color: transparent;
228 border-color: transparent;
229 color: #dee2e6;
230}
231
232.rw-list-empty,
233.rw-list-option,
234.rw-list-option-create,
235.rw-list-optgroup {
236 padding: 0.25em 1.5em;
237 outline: none;
238}
239
240.rw-list-empty {
241 text-align: center;
242 color: #ced4da;
243}
244
245.rw-list-optgroup {
246 font-weight: bold;
247 padding-top: 7px;
248}
249
250.rw-list-option-create {
251 display: block;
252 font-size: 1em;
253 padding: 0.25em 1.5em;
254}
255
256.rw-listbox {
257 border-radius: 4px;
258 background-color: #fff;
259 border: #ccc 1px solid;
260}
261.rw-listbox.rw-state-focus {
262 border-color: #80bdff;
263 box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25), inset 0 1px 1px rgba(0, 0, 0, 0.075);
264 transition: box-shadow 0.15s ease-in-out;
265}
266.rw-listbox.rw-state-disabled > *, fieldset[disabled] .rw-listbox > * {
267 pointer-events: none;
268}
269.rw-listbox.rw-state-readonly > * {
270 cursor: inherit;
271}
272
273.rw-popup-container {
274 position: absolute;
275 z-index: 1005;
276 top: 100%;
277 left: -1em;
278 right: -1em;
279 padding: 0 1em;
280}
281.rw-popup-container.rw-dropup {
282 top: auto;
283 bottom: 100%;
284}
285.rw-state-focus .rw-popup-container {
286 z-index: 1006;
287}
288
289.rw-slide-transition {
290 margin-bottom: 1em;
291}
292.rw-dropup > .rw-slide-transition {
293 margin-bottom: 0;
294 margin-top: 1em;
295}
296
297.rw-popup {
298 overflow: auto;
299 -webkit-overflow-scrolling: touch;
300 margin-top: 2px;
301 border-radius: 4px;
302 box-shadow: 0 0.5em 1em rgba(0, 0, 0, 0.175);
303 border: #ccc 1px solid;
304 background-clip: padding-box;
305 background: #fff;
306}
307.rw-popup .rw-list {
308 max-height: 250px;
309}
310.rw-dropup .rw-popup {
311 margin-top: 0;
312 margin-bottom: 2px;
313 box-shadow: 0 0.5em 1em rgba(0, 0, 0, 0.175);
314}
315
316.rw-slide-transition {
317 transition: transform 130ms, opacity 100ms;
318}
319
320.rw-slide-transition-entering {
321 overflow: hidden;
322}
323.rw-slide-transition-entering .rw-slide-transition {
324 transform: translateY(0);
325 opacity: 1;
326 transition-timing-function: ease-out;
327}
328
329.rw-slide-transition-exiting .rw-slide-transition {
330 transition-timing-function: ease-in;
331}
332
333.rw-slide-transition-exiting,
334.rw-slide-transition-exited {
335 overflow: hidden;
336}
337.rw-slide-transition-exiting .rw-slide-transition,
338.rw-slide-transition-exited .rw-slide-transition {
339 opacity: 0;
340 transform: translateY(-10%);
341}
342.rw-slide-transition-exiting.rw-dropup .rw-slide-transition,
343.rw-slide-transition-exited.rw-dropup .rw-slide-transition {
344 opacity: 0;
345 transform: translateY(10%);
346}
347
348.rw-slide-transition-exited {
349 display: none;
350}
351
352.rw-dropdown-list {
353 width: 100%;
354}
355
356.rw-dropdownlist-search {
357 padding: 0;
358 margin: 0;
359 border: none;
360 color: inherit;
361 box-shadow: none;
362 background: none;
363 font: inherit;
364 line-height: inherit;
365 -ms-touch-action: manipulation;
366 touch-action: manipulation;
367 outline: 0;
368}
369.rw-dropdownlist-search:disabled {
370 opacity: 1;
371}
372
373.rw-dropdown-list-input {
374 padding: 0 0.857em;
375 align-self: center;
376 display: grid;
377 min-width: 0;
378 grid-template: 1fr/1fr;
379}
380.rw-dropdown-list-input > * {
381 grid-area: 1/1;
382 text-overflow: ellipsis;
383 white-space: nowrap;
384 overflow: hidden;
385}
386[dir=rtl] .rw-dropdown-list-input {
387 padding-right: 0.857em;
388 padding-left: 0;
389}
390
391.rw-combobox-input {
392 background-color: transparent;
393 z-index: 1;
394}
395
396.rw-multiselect-input {
397 padding: 0;
398 margin: 0;
399 border: none;
400 color: inherit;
401 box-shadow: none;
402 background: none;
403 font: inherit;
404 line-height: inherit;
405 -ms-touch-action: manipulation;
406 touch-action: manipulation;
407 outline: 0;
408 height: calc(38px - 1px * 2);
409 padding: 0 0.857em;
410 max-width: 100%;
411}
412.rw-multiselect-input:disabled {
413 opacity: 1;
414}
415.rw-multiselect-input:disabled, .rw-multiselect-input:read-only {
416 cursor: inherit;
417}
418
419.rw-multiselect-taglist {
420 display: flex;
421 flex-wrap: wrap;
422 align-items: flex-start;
423 width: 100%;
424 outline: none;
425 cursor: text;
426}
427.rw-state-disabled .rw-multiselect-taglist {
428 cursor: unset;
429}
430
431.rw-multiselect-tag {
432 display: inline-flex;
433 margin-left: calc( 38px * 0.115 - 1px );
434 margin-top: calc( 38px * 0.115 - 1px );
435 min-height: calc(38px * 0.77);
436 border-radius: 3px;
437 background-color: #dee2e6;
438 border: 1px solid #dee2e6;
439 cursor: default;
440 max-width: 100%;
441 align-items: center;
442 overflow: hidden;
443}
444.rw-multiselect-tag:focus {
445 outline: none;
446}
447[dir=rtl] .rw-multiselect-tag {
448 margin-left: 0;
449 margin-right: calc( 38px * 0.115 - 1px );
450 padding: 0 0.35em 0 0.35em;
451}
452.rw-multiselect-tag.rw-state-focus {
453 z-index: 1;
454 box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
455 transition: box-shadow 0.15s ease-in-out;
456}
457.rw-multiselect-tag.rw-state-disabled, fieldset[disabled] .rw-multiselect-tag {
458 opacity: 0.65;
459}
460
461.rw-multiselect-tag-label {
462 padding: 0 0.35em 0 0.35em;
463}
464
465.rw-multiselect-tag-btn {
466 padding: 0;
467 margin: 0;
468 border: none;
469 color: inherit;
470 box-shadow: none;
471 background: none;
472 font: inherit;
473 line-height: inherit;
474 -ms-touch-action: manipulation;
475 touch-action: manipulation;
476 outline: 0;
477 cursor: pointer;
478 align-self: stretch;
479 padding: 0 0.35em;
480}
481.rw-multiselect-tag-btn:focus {
482 outline: none;
483}
484.rw-multiselect-tag-btn:disabled {
485 cursor: inherit;
486}
487
488.rw-calendar-popup {
489 right: auto;
490 min-width: 0;
491 width: 22em;
492}
493
494.rw-calendar {
495 overflow: hidden;
496}
497
498.rw-calendar-contained {
499 border-radius: 4px;
500 background-color: #fff;
501 border: #ccc 1px solid;
502}
503
504.rw-calendar-now {
505 font-weight: bold;
506}
507
508.rw-calendar-header {
509 display: flex;
510 padding: 0.8em;
511}
512
513.rw-cell,
514.rw-calendar-btn {
515 background-clip: padding-box;
516}
517.rw-cell:focus,
518.rw-calendar-btn:focus {
519 z-index: 1;
520 box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25);
521 transition: box-shadow 0.15s ease-in-out;
522}
523[data-intent=mouse] .rw-cell:focus,
524[data-intent=mouse] .rw-calendar-btn:focus {
525 z-index: auto;
526 box-shadow: none;
527}
528.rw-cell:disabled, .rw-cell.rw-state-disabled,
529.rw-calendar-btn:disabled,
530.rw-calendar-btn.rw-state-disabled {
531 pointer-events: none;
532 opacity: 0.35;
533}
534
535.rw-calendar-btn {
536 line-height: 2em;
537 border-radius: 4px;
538}
539.rw-calendar-btn:hover {
540 background-color: #e9ecef;
541}
542.rw-calendar-btn:active {
543 background-color: #dee2e6;
544}
545
546.rw-calendar-btn-left,
547.rw-calendar-btn-today,
548.rw-calendar-btn-right,
549.rw-calendar-btn-view {
550 padding: 0.3em 0.6em;
551}
552
553[dir=rtl] .rw-calendar-btn-left,
554[dir=rtl] .rw-calendar-btn-right {
555 transform: scale(-1, 1);
556}
557
558.rw-calendar-btn-view {
559 font-weight: bold;
560}
561.rw-calendar-btn-view > :last-child {
562 margin: 0 0.5em;
563}
564.rw-calendar-btn-view + * {
565 margin-left: auto;
566}
567[dir=rtl] .rw-calendar-btn-view + * {
568 margin-left: 0;
569 margin-right: auto;
570}
571
572.rw-calendar-grid {
573 display: table;
574 outline: none;
575 height: 14em;
576 padding: 3px;
577 table-layout: fixed;
578 border-collapse: separate;
579 border-spacing: 0;
580 width: 100%;
581 background-color: #fff;
582}
583
584.rw-calendar-head {
585 display: table-header-group;
586}
587
588.rw-calendar-body {
589 display: table-row-group;
590}
591
592.rw-calendar-row {
593 display: table-row;
594}
595
596.rw-head-cell {
597 display: table-cell;
598 text-align: center;
599 border-bottom: 1px solid #ccc;
600 padding: 0.25em;
601}
602
603.rw-cell {
604 display: table-cell;
605 color: #212529;
606 vertical-align: middle;
607 border-radius: 4px;
608 cursor: pointer;
609 line-height: normal;
610 text-align: center;
611 border: 1px solid transparent;
612 padding: 0.25em;
613 outline: none;
614}
615.rw-cell:hover {
616 background-color: #e9ecef;
617}
618.rw-cell:active {
619 background-color: #dee2e6;
620}
621.rw-cell.rw-state-selected {
622 background-color: #007bff;
623 border-color: #007bff;
624 color: #fff;
625}
626.rw-calendar-month .rw-cell {
627 text-align: center;
628}
629
630.rw-cell-off-range {
631 color: #ced4da;
632}
633
634.rw-calendar-transition-group {
635 position: relative;
636 overflow: hidden;
637}
638
639.rw-calendar-transition {
640 width: 100%;
641 overflow: hidden;
642 transition: transform 0.2s ease-in-out 0ms;
643 transform: translate(0, 0);
644}
645@supports (transform-style: preserve-3d) {
646 .rw-calendar-transition {
647 transform: translate3d(0, 0, 0);
648 }
649}
650
651.rw-calendar-transition-next {
652 -webkit-backface-visibility: hidden;
653 backface-visibility: hidden;
654}
655.rw-calendar-transition-top .rw-calendar-transition-next {
656 transform: translate(0, -100%);
657}
658@supports (transform-style: preserve-3d) {
659 .rw-calendar-transition-top .rw-calendar-transition-next {
660 transform: translate3d(0, -100%, 0);
661 }
662}
663.rw-calendar-transition-bottom .rw-calendar-transition-next {
664 transform: translate(0, 100%);
665}
666@supports (transform-style: preserve-3d) {
667 .rw-calendar-transition-bottom .rw-calendar-transition-next {
668 transform: translate3d(0, 100%, 0);
669 }
670}
671.rw-calendar-transition-right .rw-calendar-transition-next {
672 transform: translate(-100%, 0);
673}
674@supports (transform-style: preserve-3d) {
675 .rw-calendar-transition-right .rw-calendar-transition-next {
676 transform: translate3d(-100%, 0, 0);
677 }
678}
679.rw-calendar-transition-left .rw-calendar-transition-next {
680 transform: translate(100%, 0);
681}
682@supports (transform-style: preserve-3d) {
683 .rw-calendar-transition-left .rw-calendar-transition-next {
684 transform: translate3d(100%, 0, 0);
685 }
686}
687.rw-calendar-transition-next.rw-calendar-transition-active {
688 transform: translate(0, 0);
689}
690@supports (transform-style: preserve-3d) {
691 .rw-calendar-transition-next.rw-calendar-transition-active {
692 transform: translate3d(0, 0, 0);
693 }
694}
695
696.rw-calendar-transition-prev {
697 -webkit-backface-visibility: hidden;
698 backface-visibility: hidden;
699 position: absolute;
700 left: 0;
701 top: 0;
702}
703.rw-calendar-transition-top .rw-calendar-transition-prev {
704 transform: translate(0, 100%);
705}
706@supports (transform-style: preserve-3d) {
707 .rw-calendar-transition-top .rw-calendar-transition-prev {
708 transform: translate3d(0, 100%, 0);
709 }
710}
711.rw-calendar-transition-bottom .rw-calendar-transition-prev {
712 transform: translate(0, -100%);
713}
714@supports (transform-style: preserve-3d) {
715 .rw-calendar-transition-bottom .rw-calendar-transition-prev {
716 transform: translate3d(0, -100%, 0);
717 }
718}
719.rw-calendar-transition-right .rw-calendar-transition-prev {
720 transform: translate(100%, 0);
721}
722@supports (transform-style: preserve-3d) {
723 .rw-calendar-transition-right .rw-calendar-transition-prev {
724 transform: translate3d(100%, 0, 0);
725 }
726}
727.rw-calendar-transition-left .rw-calendar-transition-prev {
728 transform: translate(-100%, 0);
729}
730@supports (transform-style: preserve-3d) {
731 .rw-calendar-transition-left .rw-calendar-transition-prev {
732 transform: translate3d(-100%, 0, 0);
733 }
734}
735
736.rw-popup {
737 display: flex;
738 flex-direction: column;
739}
740.rw-popup > .rw-time-input {
741 align-self: center;
742 margin: 1em 0;
743}
744
745.rw-time-input {
746 display: inline-flex;
747 min-height: 38px;
748 align-items: center;
749 background-color: #fff;
750 border: #ccc 1px solid;
751 border-radius: 4px;
752 outline: none;
753 cursor: text;
754}
755
756.rw-time-part-input {
757 padding: 0;
758 margin: 0;
759 border: none;
760 color: inherit;
761 box-shadow: none;
762 background: none;
763 font: inherit;
764 line-height: inherit;
765 -ms-touch-action: manipulation;
766 touch-action: manipulation;
767 outline: 0;
768 padding: 0 0.5em;
769}
770.rw-time-part-input:disabled {
771 opacity: 1;
772}
773.rw-time-part-input, .rw-time-part-input::placeholder {
774 text-align: center;
775}
776
777.rw-time-part-meridiem {
778 padding: 0;
779 margin: 0;
780 border: none;
781 color: inherit;
782 box-shadow: none;
783 background: none;
784 font: inherit;
785 line-height: inherit;
786 -ms-touch-action: manipulation;
787 touch-action: manipulation;
788 outline: 0;
789 padding: 0 0.5em;
790 text-transform: lowercase;
791 font-variant: small-caps;
792}
793.rw-time-part-meridiem :focus {
794 outline: none;
795}
796
797.rw-time-input-clear {
798 padding: 0 0.4em;
799 outline: none;
800 opacity: 0;
801 margin-left: auto;
802}
803[dir=rtl] .rw-time-input-clear {
804 margin-left: revert;
805 margin-right: auto;
806}
807.rw-time-input:hover .rw-time-input-clear.rw-show, .rw-time-input.rw-state-focus .rw-time-input-clear.rw-show {
808 opacity: 1;
809}
810
811.rw-number-picker-spinners {
812 display: flex;
813 flex-direction: column;
814}
815.rw-number-picker-spinners .rw-btn {
816 flex: 1 1 0;
817}
818
819/*# sourceMappingURL=styles.css.map */