armtek-uikit-react 1.0.242 → 1.0.244

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (61) hide show
  1. package/assets/Accordion.scss +113 -113
  2. package/assets/Adornment.scss +22 -22
  3. package/assets/Alert.scss +56 -56
  4. package/assets/Avatar.scss +104 -104
  5. package/assets/AvatarGroup.scss +47 -47
  6. package/assets/BackDrop.scss +27 -27
  7. package/assets/Badge.scss +96 -96
  8. package/assets/Button.scss +750 -750
  9. package/assets/ButtonGroup.scss +37 -37
  10. package/assets/ButtonIcon.scss +32 -32
  11. package/assets/Card.scss +13 -13
  12. package/assets/Checkbox.scss +313 -313
  13. package/assets/Chip.scss +279 -279
  14. package/assets/DateField.scss +2 -2
  15. package/assets/DatePicker.scss +72 -72
  16. package/assets/Dropdown.scss +42 -42
  17. package/assets/FormControls.scss +14 -14
  18. package/assets/HelperText.scss +11 -11
  19. package/assets/Icon.scss +30 -30
  20. package/assets/Interval.scss +34 -34
  21. package/assets/Link.scss +96 -96
  22. package/assets/ListItem.scss +72 -72
  23. package/assets/Loader.scss +56 -56
  24. package/assets/Logo.scss +28 -28
  25. package/assets/Modal.scss +97 -97
  26. package/assets/Pagination.scss +3 -3
  27. package/assets/Paper.scss +19 -19
  28. package/assets/Period.scss +8 -8
  29. package/assets/Popper.scss +2 -2
  30. package/assets/Rating.scss +26 -26
  31. package/assets/Select.scss +85 -85
  32. package/assets/Skeleton.scss +25 -25
  33. package/assets/Slider.scss +5 -5
  34. package/assets/Stack.scss +27 -27
  35. package/assets/Status.scss +50 -50
  36. package/assets/StepItem.scss +89 -89
  37. package/assets/StepItemIcon.scss +47 -47
  38. package/assets/Stepper.scss +30 -30
  39. package/assets/Switch.scss +67 -67
  40. package/assets/Table.scss +52 -37
  41. package/assets/TextArea.scss +17 -17
  42. package/assets/TextField.scss +197 -197
  43. package/assets/Tooltip.scss +17 -17
  44. package/assets/classes.scss +422 -422
  45. package/assets/fonts.scss +24 -24
  46. package/assets/global.scss +221 -221
  47. package/assets/styles.min.css +1 -1
  48. package/assets/styles.min.css.map +1 -1
  49. package/assets/styles.scss +46 -46
  50. package/assets/variables.scss +13 -13
  51. package/lib/hooks/useEnhancedEffect.js +6 -6
  52. package/lib/hooks/useTimeout.js +2 -2
  53. package/package.json +1 -1
  54. package/ui/Form/DateField/DateField.js +4 -0
  55. package/ui/Form/DatePicker/styles.css +802 -802
  56. package/ui/Form/FormControls/FormControls.js +1 -1
  57. package/ui/Form/FormControls/const.d.ts +1 -0
  58. package/ui/Form/FormControls/const.js +3 -2
  59. package/ui/Modal/Modal.js +1 -0
  60. package/ui/Slider/style.scss +346 -346
  61. package/ui/Table/Table.js +4 -1
@@ -1,803 +1,803 @@
1
- @charset "UTF-8";
2
- .react-datepicker__year-read-view--down-arrow,
3
- .react-datepicker__month-read-view--down-arrow,
4
- .react-datepicker__month-year-read-view--down-arrow, .react-datepicker__navigation-icon::before {
5
- border-color: #40454A;
6
- border-style: solid;
7
- border-width: 2px 2px 0 0;
8
- content: "";
9
- display: block;
10
- height: 9px;
11
- position: absolute;
12
- top: 6px;
13
- width: 9px;
14
- }
15
- .react-datepicker-popper[data-placement^=top] .react-datepicker__triangle, .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle {
16
- margin-left: -4px;
17
- position: absolute;
18
- width: 0;
19
- }
20
- .react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::before, .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::before, .react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::after, .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::after {
21
- box-sizing: content-box;
22
- position: absolute;
23
- border: 8px solid transparent;
24
- height: 0;
25
- width: 1px;
26
- content: "";
27
- z-index: -1;
28
- left: -8px;
29
- }
30
- .react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::before, .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::before {
31
- border-bottom-color: #aeaeae;
32
- }
33
-
34
- .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle {
35
- top: 0;
36
- margin-top: -8px;
37
- }
38
- .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::before, .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::after {
39
- border-top: none;
40
- border-bottom-color: #f0f0f0;
41
- }
42
- .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::after {
43
- top: 0;
44
- }
45
- .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::before {
46
- top: -1px;
47
- border-bottom-color: #aeaeae;
48
- }
49
-
50
- .react-datepicker-popper[data-placement^=top] .react-datepicker__triangle {
51
- bottom: 0;
52
- margin-bottom: -8px;
53
- }
54
- .react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::before, .react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::after {
55
- border-bottom: none;
56
- border-top-color: #fff;
57
- }
58
- .react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::after {
59
- bottom: 0;
60
- }
61
- .react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::before {
62
- bottom: -1px;
63
- border-top-color: #aeaeae;
64
- }
65
-
66
- .react-datepicker-wrapper {
67
- display: inline-block;
68
- padding: 0;
69
- border: 0;
70
- }
71
- .ui-datepicker .react-datepicker-wrapper{
72
- display: block;
73
- }
74
- .react-datepicker {
75
- font-family: "Helvetica Neue", helvetica, arial, sans-serif;
76
- font-size: 0.8rem;
77
- background-color: #fff;
78
- color: #000;
79
- border-radius: 0.3rem;
80
- display: inline-block;
81
- position: relative;
82
- }
83
-
84
- .react-datepicker--time-only .react-datepicker__triangle {
85
- left: 35px;
86
- }
87
- .react-datepicker--time-only .react-datepicker__time-container {
88
- border-left: 0;
89
- }
90
- .react-datepicker--time-only .react-datepicker__time,
91
- .react-datepicker--time-only .react-datepicker__time-box {
92
- border-bottom-left-radius: 0.3rem;
93
- border-bottom-right-radius: 0.3rem;
94
- }
95
-
96
- .react-datepicker__triangle {
97
- position: absolute;
98
- left: 50px;
99
- }
100
-
101
- .react-datepicker-popper {
102
- z-index: 1;
103
- }
104
- .react-datepicker-popper[data-placement^=bottom] {
105
- padding-top: 10px;
106
- }
107
- .react-datepicker-popper[data-placement=bottom-end] .react-datepicker__triangle, .react-datepicker-popper[data-placement=top-end] .react-datepicker__triangle {
108
- left: auto;
109
- right: 50px;
110
- }
111
- .react-datepicker-popper[data-placement^=top] {
112
- padding-bottom: 10px;
113
- }
114
- .react-datepicker-popper[data-placement^=right] {
115
- padding-left: 8px;
116
- }
117
- .react-datepicker-popper[data-placement^=right] .react-datepicker__triangle {
118
- left: auto;
119
- right: 42px;
120
- }
121
- .react-datepicker-popper[data-placement^=left] {
122
- padding-right: 8px;
123
- }
124
- .react-datepicker-popper[data-placement^=left] .react-datepicker__triangle {
125
- left: 42px;
126
- right: auto;
127
- }
128
-
129
- .react-datepicker__header {
130
- text-align: center;
131
- padding: 8px 0;
132
- position: relative;
133
- }
134
- .react-datepicker__header--time {
135
- padding-bottom: 8px;
136
- padding-left: 5px;
137
- padding-right: 5px;
138
- }
139
- .react-datepicker__header--time:not(.react-datepicker__header--time--only) {
140
- border-top-left-radius: 0;
141
- }
142
- .react-datepicker__header:not(.react-datepicker__header--has-time-select) {
143
- border-top-right-radius: 0.3rem;
144
- }
145
-
146
- .react-datepicker__year-dropdown-container--select,
147
- .react-datepicker__month-dropdown-container--select,
148
- .react-datepicker__month-year-dropdown-container--select,
149
- .react-datepicker__year-dropdown-container--scroll,
150
- .react-datepicker__month-dropdown-container--scroll,
151
- .react-datepicker__month-year-dropdown-container--scroll {
152
- display: inline-block;
153
- margin: 0 15px;
154
- }
155
-
156
- .react-datepicker__current-month,
157
- .react-datepicker-time__header,
158
- .react-datepicker-year-header {
159
- margin-top: 0;
160
- color: #000;
161
- font-weight: bold;
162
- font-size: 16px;
163
- text-transform: capitalize;
164
- }
165
-
166
- .react-datepicker-time__header {
167
- text-overflow: ellipsis;
168
- white-space: nowrap;
169
- overflow: hidden;
170
- }
171
- .react-datepicker__header--time--only{
172
- display: none;
173
- }
174
- .react-datepicker__navigation {
175
- align-items: center;
176
- background: none;
177
- display: flex;
178
- justify-content: center;
179
- text-align: center;
180
- cursor: pointer;
181
- position: absolute;
182
- top: 2px;
183
- padding: 0;
184
- border: none;
185
- z-index: 1;
186
- height: 32px;
187
- width: 32px;
188
- text-indent: -999em;
189
- overflow: hidden;
190
- }
191
- .react-datepicker__navigation--previous {
192
- left: 2px;
193
- }
194
- .react-datepicker__navigation--next {
195
- right: 2px;
196
- }
197
- .react-datepicker__navigation--next--with-time:not(.react-datepicker__navigation--next--with-today-button) {
198
- right: 85px;
199
- }
200
- .react-datepicker__navigation--years {
201
- position: relative;
202
- top: 0;
203
- display: block;
204
- margin-left: auto;
205
- margin-right: auto;
206
- }
207
- .react-datepicker__navigation--years-previous {
208
- top: 4px;
209
- }
210
- .react-datepicker__navigation--years-upcoming {
211
- top: -4px;
212
- }
213
- .react-datepicker__navigation:hover *::before {
214
- border-color: #a6a6a6;
215
- }
216
-
217
- .react-datepicker__navigation-icon {
218
- position: relative;
219
- top: -1px;
220
- font-size: 20px;
221
- width: 0;
222
- }
223
- .react-datepicker__navigation-icon--next {
224
- left: -2px;
225
- }
226
- .react-datepicker__navigation-icon--next::before {
227
- transform: rotate(45deg);
228
- left: -7px;
229
- }
230
- .react-datepicker__navigation-icon--previous {
231
- right: -2px;
232
- }
233
- .react-datepicker__navigation-icon--previous::before {
234
- transform: rotate(225deg);
235
- right: -7px;
236
- }
237
-
238
- .react-datepicker__month-container {
239
- float: left;
240
- }
241
-
242
- .react-datepicker__year {
243
- margin: 0.4rem;
244
- text-align: center;
245
- }
246
- .react-datepicker__year-wrapper {
247
- display: flex;
248
- flex-wrap: wrap;
249
- max-width: 180px;
250
- }
251
- .react-datepicker__year .react-datepicker__year-text {
252
- display: inline-block;
253
- width: 4rem;
254
- margin: 2px;
255
- }
256
-
257
- .react-datepicker__month {
258
- margin: 0.4rem;
259
- text-align: center;
260
- }
261
- .react-datepicker__month .react-datepicker__month-text,
262
- .react-datepicker__month .react-datepicker__quarter-text {
263
- display: inline-block;
264
- width: 4rem;
265
- margin: 2px;
266
- }
267
-
268
- .react-datepicker__input-time-container {
269
- clear: both;
270
- width: 100%;
271
- float: left;
272
- margin: 5px 0 10px 15px;
273
- text-align: left;
274
- }
275
- .react-datepicker__input-time-container .react-datepicker-time__caption {
276
- display: inline-block;
277
- }
278
- .react-datepicker__input-time-container .react-datepicker-time__input-container {
279
- display: inline-block;
280
- }
281
- .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input {
282
- display: inline-block;
283
- margin-left: 10px;
284
- }
285
- .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input {
286
- width: auto;
287
- }
288
- .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time]::-webkit-inner-spin-button,
289
- .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time]::-webkit-outer-spin-button {
290
- -webkit-appearance: none;
291
- margin: 0;
292
- }
293
- .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time] {
294
- -moz-appearance: textfield;
295
- }
296
- .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__delimiter {
297
- margin-left: 5px;
298
- display: inline-block;
299
- }
300
-
301
- .react-datepicker__time-container {
302
- float: right;
303
- border-left: 1px solid #aeaeae;
304
- width: 85px;
305
- }
306
- .react-datepicker__time-container--with-today-button {
307
- display: inline;
308
- border: 1px solid #aeaeae;
309
- border-radius: 0.3rem;
310
- position: absolute;
311
- right: -87px;
312
- top: 0;
313
- }
314
- .react-datepicker__time-container .react-datepicker__time {
315
- position: relative;
316
- background: white;
317
- border-bottom-right-radius: 0.3rem;
318
- }
319
- .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box {
320
- width: 85px;
321
- overflow-x: hidden;
322
- margin: 0 auto;
323
- text-align: center;
324
- border-bottom-right-radius: 0.3rem;
325
- }
326
- .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list {
327
- list-style: none;
328
- margin: 0;
329
- height: calc(195px + (1.7rem / 2));
330
- overflow-y: scroll;
331
- padding-right: 0;
332
- padding-left: 0;
333
- width: 100%;
334
- box-sizing: content-box;
335
- }
336
- .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item {
337
- height: 30px;
338
- padding: 5px 10px;
339
- white-space: nowrap;
340
- }
341
- .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item:hover {
342
- cursor: pointer;
343
- background-color: #f0f0f0;
344
- }
345
- .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected {
346
- background-color: #216ba5;
347
- color: white;
348
- font-weight: bold;
349
- }
350
- .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected:hover {
351
- background-color: #216ba5;
352
- }
353
- .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled {
354
- color: #ccc;
355
- }
356
- .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled:hover {
357
- cursor: default;
358
- background-color: transparent;
359
- }
360
-
361
- .react-datepicker__week-number {
362
- color: #ccc;
363
- display: inline-block;
364
- width: 1.7rem;
365
- line-height: 1.7rem;
366
- text-align: center;
367
- margin: 0.166rem;
368
- }
369
- .react-datepicker__week-number.react-datepicker__week-number--clickable {
370
- cursor: pointer;
371
- }
372
- .react-datepicker__week-number.react-datepicker__week-number--clickable:hover {
373
- border-radius: 0.3rem;
374
- background-color: #f0f0f0;
375
- }
376
-
377
- .react-datepicker__day-names,
378
- .react-datepicker__week {
379
- white-space: nowrap;
380
- }
381
-
382
- .react-datepicker__day-names {
383
- margin-bottom: -8px;
384
- margin-top: 8px;
385
- }
386
-
387
- .react-datepicker__day-name,
388
- .react-datepicker__day,
389
- .react-datepicker__time-name {
390
- color: #000;
391
- display: inline-block;
392
- width: 35px;
393
- line-height: 35px;
394
- height: 35px;
395
- text-align: center;
396
- margin: 2px;
397
- font-size: 16px;
398
- }
399
-
400
- .react-datepicker__day-name{
401
- color: #6C757D
402
- }
403
-
404
- .react-datepicker__day,
405
- .react-datepicker__month-text,
406
- .react-datepicker__quarter-text,
407
- .react-datepicker__year-text {
408
- cursor: pointer;
409
- }
410
- .react-datepicker__day:hover,
411
- .react-datepicker__month-text:hover,
412
- .react-datepicker__quarter-text:hover,
413
- .react-datepicker__year-text:hover {
414
- border-radius: 50%;
415
- background-color: #f0f0f0;
416
- }
417
- .react-datepicker__day--today,
418
- .react-datepicker__month-text--today,
419
- .react-datepicker__quarter-text--today,
420
- .react-datepicker__year-text--today {
421
- font-weight: bold;
422
- }
423
- .react-datepicker__day--highlighted,
424
- .react-datepicker__month-text--highlighted,
425
- .react-datepicker__quarter-text--highlighted,
426
- .react-datepicker__year-text--highlighted {
427
- border-radius: 0.3rem;
428
- background-color: #3dcc4a;
429
- color: #fff;
430
- }
431
- .react-datepicker__day--highlighted:hover,
432
- .react-datepicker__month-text--highlighted:hover,
433
- .react-datepicker__quarter-text--highlighted:hover,
434
- .react-datepicker__year-text--highlighted:hover {
435
- background-color: #32be3f;
436
- }
437
- .react-datepicker__day--highlighted-custom-1,
438
- .react-datepicker__month-text--highlighted-custom-1,
439
- .react-datepicker__quarter-text--highlighted-custom-1,
440
- .react-datepicker__year-text--highlighted-custom-1 {
441
- color: magenta;
442
- }
443
- .react-datepicker__day--highlighted-custom-2,
444
- .react-datepicker__month-text--highlighted-custom-2,
445
- .react-datepicker__quarter-text--highlighted-custom-2,
446
- .react-datepicker__year-text--highlighted-custom-2 {
447
- color: green;
448
- }
449
- .react-datepicker__day--selected, .react-datepicker__day--in-selecting-range, .react-datepicker__day--in-range,
450
- .react-datepicker__month-text--selected,
451
- .react-datepicker__month-text--in-selecting-range,
452
- .react-datepicker__month-text--in-range,
453
- .react-datepicker__quarter-text--selected,
454
- .react-datepicker__quarter-text--in-selecting-range,
455
- .react-datepicker__quarter-text--in-range,
456
- .react-datepicker__year-text--selected,
457
- .react-datepicker__year-text--in-selecting-range,
458
- .react-datepicker__year-text--in-range {
459
- border-radius: 50%;
460
- background-color: #0D46FF;
461
- color: #fff;
462
- }
463
- .react-datepicker__day--selected:hover, .react-datepicker__day--in-selecting-range:hover, .react-datepicker__day--in-range:hover,
464
- .react-datepicker__month-text--selected:hover,
465
- .react-datepicker__month-text--in-selecting-range:hover,
466
- .react-datepicker__month-text--in-range:hover,
467
- .react-datepicker__quarter-text--selected:hover,
468
- .react-datepicker__quarter-text--in-selecting-range:hover,
469
- .react-datepicker__quarter-text--in-range:hover,
470
- .react-datepicker__year-text--selected:hover,
471
- .react-datepicker__year-text--in-selecting-range:hover,
472
- .react-datepicker__year-text--in-range:hover {
473
- background-color: #1d5d90;
474
- }
475
- .react-datepicker__day--keyboard-selected,
476
- .react-datepicker__month-text--keyboard-selected,
477
- .react-datepicker__quarter-text--keyboard-selected,
478
- .react-datepicker__year-text--keyboard-selected {
479
- border-radius: 50%;
480
- background: #fff;
481
- border: 1px solid #0D46FF;
482
- /*color: rgb(0, 0, 0);*/
483
- color: #0D46FF;
484
- }
485
- .react-datepicker__day--keyboard-selected:hover,
486
- .react-datepicker__month-text--keyboard-selected:hover,
487
- .react-datepicker__quarter-text--keyboard-selected:hover,
488
- .react-datepicker__year-text--keyboard-selected:hover {
489
- /*background-color: #1d5d90;*/
490
- }
491
- .react-datepicker__day--in-selecting-range:not(.react-datepicker__day--in-range,
492
- .react-datepicker__month-text--in-range,
493
- .react-datepicker__quarter-text--in-range,
494
- .react-datepicker__year-text--in-range),
495
- .react-datepicker__month-text--in-selecting-range:not(.react-datepicker__day--in-range,
496
- .react-datepicker__month-text--in-range,
497
- .react-datepicker__quarter-text--in-range,
498
- .react-datepicker__year-text--in-range),
499
- .react-datepicker__quarter-text--in-selecting-range:not(.react-datepicker__day--in-range,
500
- .react-datepicker__month-text--in-range,
501
- .react-datepicker__quarter-text--in-range,
502
- .react-datepicker__year-text--in-range),
503
- .react-datepicker__year-text--in-selecting-range:not(.react-datepicker__day--in-range,
504
- .react-datepicker__month-text--in-range,
505
- .react-datepicker__quarter-text--in-range,
506
- .react-datepicker__year-text--in-range) {
507
- background-color: rgba(33, 107, 165, 0.5);
508
- }
509
- .react-datepicker__month--selecting-range .react-datepicker__day--in-range:not(.react-datepicker__day--in-selecting-range,
510
- .react-datepicker__month-text--in-selecting-range,
511
- .react-datepicker__quarter-text--in-selecting-range,
512
- .react-datepicker__year-text--in-selecting-range), .react-datepicker__year--selecting-range .react-datepicker__day--in-range:not(.react-datepicker__day--in-selecting-range,
513
- .react-datepicker__month-text--in-selecting-range,
514
- .react-datepicker__quarter-text--in-selecting-range,
515
- .react-datepicker__year-text--in-selecting-range),
516
- .react-datepicker__month--selecting-range .react-datepicker__month-text--in-range:not(.react-datepicker__day--in-selecting-range,
517
- .react-datepicker__month-text--in-selecting-range,
518
- .react-datepicker__quarter-text--in-selecting-range,
519
- .react-datepicker__year-text--in-selecting-range),
520
- .react-datepicker__year--selecting-range .react-datepicker__month-text--in-range:not(.react-datepicker__day--in-selecting-range,
521
- .react-datepicker__month-text--in-selecting-range,
522
- .react-datepicker__quarter-text--in-selecting-range,
523
- .react-datepicker__year-text--in-selecting-range),
524
- .react-datepicker__month--selecting-range .react-datepicker__quarter-text--in-range:not(.react-datepicker__day--in-selecting-range,
525
- .react-datepicker__month-text--in-selecting-range,
526
- .react-datepicker__quarter-text--in-selecting-range,
527
- .react-datepicker__year-text--in-selecting-range),
528
- .react-datepicker__year--selecting-range .react-datepicker__quarter-text--in-range:not(.react-datepicker__day--in-selecting-range,
529
- .react-datepicker__month-text--in-selecting-range,
530
- .react-datepicker__quarter-text--in-selecting-range,
531
- .react-datepicker__year-text--in-selecting-range),
532
- .react-datepicker__month--selecting-range .react-datepicker__year-text--in-range:not(.react-datepicker__day--in-selecting-range,
533
- .react-datepicker__month-text--in-selecting-range,
534
- .react-datepicker__quarter-text--in-selecting-range,
535
- .react-datepicker__year-text--in-selecting-range),
536
- .react-datepicker__year--selecting-range .react-datepicker__year-text--in-range:not(.react-datepicker__day--in-selecting-range,
537
- .react-datepicker__month-text--in-selecting-range,
538
- .react-datepicker__quarter-text--in-selecting-range,
539
- .react-datepicker__year-text--in-selecting-range) {
540
- background-color: #f0f0f0;
541
- color: #000;
542
- }
543
- .react-datepicker__day--disabled,
544
- .react-datepicker__month-text--disabled,
545
- .react-datepicker__quarter-text--disabled,
546
- .react-datepicker__year-text--disabled {
547
- cursor: default;
548
- color: #ccc;
549
- }
550
- .react-datepicker__day--disabled:hover,
551
- .react-datepicker__month-text--disabled:hover,
552
- .react-datepicker__quarter-text--disabled:hover,
553
- .react-datepicker__year-text--disabled:hover {
554
- background-color: transparent;
555
- }
556
-
557
- .react-datepicker__input-container {
558
- position: relative;
559
- display: inline-block;
560
- width: 100%;
561
- }
562
- .react-datepicker__input-container .react-datepicker__calendar-icon {
563
- position: absolute;
564
- padding: 0.5rem;
565
- }
566
-
567
- .react-datepicker__view-calendar-icon input {
568
- padding: 6px 10px 5px 25px;
569
- }
570
-
571
- .react-datepicker__year-read-view,
572
- .react-datepicker__month-read-view,
573
- .react-datepicker__month-year-read-view {
574
- border: 1px solid transparent;
575
- border-radius: 0.3rem;
576
- position: relative;
577
- }
578
- .react-datepicker__year-read-view:hover,
579
- .react-datepicker__month-read-view:hover,
580
- .react-datepicker__month-year-read-view:hover {
581
- cursor: pointer;
582
- }
583
- .react-datepicker__year-read-view:hover .react-datepicker__year-read-view--down-arrow,
584
- .react-datepicker__year-read-view:hover .react-datepicker__month-read-view--down-arrow,
585
- .react-datepicker__month-read-view:hover .react-datepicker__year-read-view--down-arrow,
586
- .react-datepicker__month-read-view:hover .react-datepicker__month-read-view--down-arrow,
587
- .react-datepicker__month-year-read-view:hover .react-datepicker__year-read-view--down-arrow,
588
- .react-datepicker__month-year-read-view:hover .react-datepicker__month-read-view--down-arrow {
589
- border-top-color: #b3b3b3;
590
- }
591
- .react-datepicker__year-read-view--down-arrow,
592
- .react-datepicker__month-read-view--down-arrow,
593
- .react-datepicker__month-year-read-view--down-arrow {
594
- transform: rotate(135deg);
595
- right: -16px;
596
- top: 0;
597
- }
598
-
599
- .react-datepicker__year-dropdown,
600
- .react-datepicker__month-dropdown,
601
- .react-datepicker__month-year-dropdown {
602
- background-color: #f0f0f0;
603
- position: absolute;
604
- width: 50%;
605
- left: 25%;
606
- top: 30px;
607
- z-index: 1;
608
- text-align: center;
609
- border-radius: 0.3rem;
610
- border: 1px solid #aeaeae;
611
- }
612
- .react-datepicker__year-dropdown:hover,
613
- .react-datepicker__month-dropdown:hover,
614
- .react-datepicker__month-year-dropdown:hover {
615
- cursor: pointer;
616
- }
617
- .react-datepicker__year-dropdown--scrollable,
618
- .react-datepicker__month-dropdown--scrollable,
619
- .react-datepicker__month-year-dropdown--scrollable {
620
- height: 150px;
621
- overflow-y: scroll;
622
- }
623
-
624
- .react-datepicker__year-option,
625
- .react-datepicker__month-option,
626
- .react-datepicker__month-year-option {
627
- line-height: 20px;
628
- width: 100%;
629
- display: block;
630
- margin-left: auto;
631
- margin-right: auto;
632
- }
633
- .react-datepicker__year-option:first-of-type,
634
- .react-datepicker__month-option:first-of-type,
635
- .react-datepicker__month-year-option:first-of-type {
636
- border-top-left-radius: 0.3rem;
637
- border-top-right-radius: 0.3rem;
638
- }
639
- .react-datepicker__year-option:last-of-type,
640
- .react-datepicker__month-option:last-of-type,
641
- .react-datepicker__month-year-option:last-of-type {
642
- -webkit-user-select: none;
643
- -moz-user-select: none;
644
- -ms-user-select: none;
645
- user-select: none;
646
- border-bottom-left-radius: 0.3rem;
647
- border-bottom-right-radius: 0.3rem;
648
- }
649
- .react-datepicker__year-option:hover,
650
- .react-datepicker__month-option:hover,
651
- .react-datepicker__month-year-option:hover {
652
- background-color: #ccc;
653
- }
654
- .react-datepicker__year-option:hover .react-datepicker__navigation--years-upcoming,
655
- .react-datepicker__month-option:hover .react-datepicker__navigation--years-upcoming,
656
- .react-datepicker__month-year-option:hover .react-datepicker__navigation--years-upcoming {
657
- border-bottom-color: #b3b3b3;
658
- }
659
- .react-datepicker__year-option:hover .react-datepicker__navigation--years-previous,
660
- .react-datepicker__month-option:hover .react-datepicker__navigation--years-previous,
661
- .react-datepicker__month-year-option:hover .react-datepicker__navigation--years-previous {
662
- border-top-color: #b3b3b3;
663
- }
664
- .react-datepicker__year-option--selected,
665
- .react-datepicker__month-option--selected,
666
- .react-datepicker__month-year-option--selected {
667
- position: absolute;
668
- left: 15px;
669
- }
670
-
671
- .react-datepicker__close-icon {
672
- cursor: pointer;
673
- background-color: transparent;
674
- border: 0;
675
- outline: 0;
676
- padding: 0 6px 0 0;
677
- position: absolute;
678
- top: 0;
679
- right: 0;
680
- height: 100%;
681
- display: table-cell;
682
- vertical-align: middle;
683
- }
684
- .react-datepicker__close-icon::after {
685
- cursor: pointer;
686
- background-color: #216ba5;
687
- color: #fff;
688
- border-radius: 50%;
689
- height: 16px;
690
- width: 16px;
691
- padding: 2px;
692
- font-size: 12px;
693
- line-height: 1;
694
- text-align: center;
695
- display: table-cell;
696
- vertical-align: middle;
697
- content: "×";
698
- }
699
-
700
- .react-datepicker__today-button {
701
- background: #f0f0f0;
702
- border-top: 1px solid #aeaeae;
703
- cursor: pointer;
704
- text-align: center;
705
- font-weight: bold;
706
- padding: 5px 0;
707
- clear: left;
708
- }
709
-
710
- .react-datepicker__portal {
711
- position: fixed;
712
- width: 100vw;
713
- height: 100vh;
714
- background-color: rgba(0, 0, 0, 0.8);
715
- left: 0;
716
- top: 0;
717
- justify-content: center;
718
- align-items: center;
719
- display: flex;
720
- z-index: 2147483647;
721
- }
722
- .react-datepicker__portal .react-datepicker__day-name,
723
- .react-datepicker__portal .react-datepicker__day,
724
- .react-datepicker__portal .react-datepicker__time-name {
725
- width: 3rem;
726
- line-height: 3rem;
727
- }
728
- @media (max-width: 400px), (max-height: 550px) {
729
- .react-datepicker__portal .react-datepicker__day-name,
730
- .react-datepicker__portal .react-datepicker__day,
731
- .react-datepicker__portal .react-datepicker__time-name {
732
- width: 2rem;
733
- line-height: 2rem;
734
- }
735
- }
736
- .react-datepicker__portal .react-datepicker__current-month,
737
- .react-datepicker__portal .react-datepicker-time__header {
738
- font-size: 1.44rem;
739
- }
740
-
741
- .react-datepicker__children-container {
742
- width: 13.8rem;
743
- margin: 0.4rem;
744
- padding-right: 0.2rem;
745
- padding-left: 0.2rem;
746
- height: auto;
747
- }
748
-
749
- .react-datepicker__aria-live {
750
- position: absolute;
751
- clip-path: circle(0);
752
- border: 0;
753
- height: 1px;
754
- margin: -1px;
755
- overflow: hidden;
756
- padding: 0;
757
- width: 1px;
758
- white-space: nowrap;
759
- }
760
-
761
- .react-datepicker__calendar-icon {
762
- width: 1em;
763
- height: 1em;
764
- vertical-align: -0.125em;
765
- }
766
-
767
- .react-datepicker__header__dropdown {
768
- margin-top: 10px;
769
- font-size: 14px;
770
- }
771
-
772
- .react-datepicker__header__dropdown {
773
- margin-top: 10px;
774
- font-size: 14px;
775
- }
776
- .react-datepicker__navigation--years-upcoming:after,
777
- .react-datepicker__navigation--years-previous:after {
778
- content: '';
779
- position: absolute;
780
- width: 10px;
781
- height: 10px;
782
- transform: rotate(-135deg);
783
- border-left: 2px solid #000;
784
- border-top: 2px solid #000;
785
- z-index: 123123;
786
- left: 10px;
787
- top: 2px;
788
- }
789
- .react-datepicker__navigation--years-upcoming:after{
790
- transform: rotate(45deg);
791
- top: 15px;
792
- }
793
- .react-datepicker__sr-only{
794
- position: absolute;
795
- width: 1px;
796
- height: 1px;
797
- padding: 0;
798
- margin: -1px;
799
- overflow: hidden;
800
- clip: rect(0, 0, 0, 0);
801
- white-space: nowrap;
802
- border: 0;
1
+ @charset "UTF-8";
2
+ .react-datepicker__year-read-view--down-arrow,
3
+ .react-datepicker__month-read-view--down-arrow,
4
+ .react-datepicker__month-year-read-view--down-arrow, .react-datepicker__navigation-icon::before {
5
+ border-color: #40454A;
6
+ border-style: solid;
7
+ border-width: 2px 2px 0 0;
8
+ content: "";
9
+ display: block;
10
+ height: 9px;
11
+ position: absolute;
12
+ top: 6px;
13
+ width: 9px;
14
+ }
15
+ .react-datepicker-popper[data-placement^=top] .react-datepicker__triangle, .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle {
16
+ margin-left: -4px;
17
+ position: absolute;
18
+ width: 0;
19
+ }
20
+ .react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::before, .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::before, .react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::after, .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::after {
21
+ box-sizing: content-box;
22
+ position: absolute;
23
+ border: 8px solid transparent;
24
+ height: 0;
25
+ width: 1px;
26
+ content: "";
27
+ z-index: -1;
28
+ left: -8px;
29
+ }
30
+ .react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::before, .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::before {
31
+ border-bottom-color: #aeaeae;
32
+ }
33
+
34
+ .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle {
35
+ top: 0;
36
+ margin-top: -8px;
37
+ }
38
+ .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::before, .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::after {
39
+ border-top: none;
40
+ border-bottom-color: #f0f0f0;
41
+ }
42
+ .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::after {
43
+ top: 0;
44
+ }
45
+ .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::before {
46
+ top: -1px;
47
+ border-bottom-color: #aeaeae;
48
+ }
49
+
50
+ .react-datepicker-popper[data-placement^=top] .react-datepicker__triangle {
51
+ bottom: 0;
52
+ margin-bottom: -8px;
53
+ }
54
+ .react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::before, .react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::after {
55
+ border-bottom: none;
56
+ border-top-color: #fff;
57
+ }
58
+ .react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::after {
59
+ bottom: 0;
60
+ }
61
+ .react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::before {
62
+ bottom: -1px;
63
+ border-top-color: #aeaeae;
64
+ }
65
+
66
+ .react-datepicker-wrapper {
67
+ display: inline-block;
68
+ padding: 0;
69
+ border: 0;
70
+ }
71
+ .ui-datepicker .react-datepicker-wrapper{
72
+ display: block;
73
+ }
74
+ .react-datepicker {
75
+ font-family: "Helvetica Neue", helvetica, arial, sans-serif;
76
+ font-size: 0.8rem;
77
+ background-color: #fff;
78
+ color: #000;
79
+ border-radius: 0.3rem;
80
+ display: inline-block;
81
+ position: relative;
82
+ }
83
+
84
+ .react-datepicker--time-only .react-datepicker__triangle {
85
+ left: 35px;
86
+ }
87
+ .react-datepicker--time-only .react-datepicker__time-container {
88
+ border-left: 0;
89
+ }
90
+ .react-datepicker--time-only .react-datepicker__time,
91
+ .react-datepicker--time-only .react-datepicker__time-box {
92
+ border-bottom-left-radius: 0.3rem;
93
+ border-bottom-right-radius: 0.3rem;
94
+ }
95
+
96
+ .react-datepicker__triangle {
97
+ position: absolute;
98
+ left: 50px;
99
+ }
100
+
101
+ .react-datepicker-popper {
102
+ z-index: 1;
103
+ }
104
+ .react-datepicker-popper[data-placement^=bottom] {
105
+ padding-top: 10px;
106
+ }
107
+ .react-datepicker-popper[data-placement=bottom-end] .react-datepicker__triangle, .react-datepicker-popper[data-placement=top-end] .react-datepicker__triangle {
108
+ left: auto;
109
+ right: 50px;
110
+ }
111
+ .react-datepicker-popper[data-placement^=top] {
112
+ padding-bottom: 10px;
113
+ }
114
+ .react-datepicker-popper[data-placement^=right] {
115
+ padding-left: 8px;
116
+ }
117
+ .react-datepicker-popper[data-placement^=right] .react-datepicker__triangle {
118
+ left: auto;
119
+ right: 42px;
120
+ }
121
+ .react-datepicker-popper[data-placement^=left] {
122
+ padding-right: 8px;
123
+ }
124
+ .react-datepicker-popper[data-placement^=left] .react-datepicker__triangle {
125
+ left: 42px;
126
+ right: auto;
127
+ }
128
+
129
+ .react-datepicker__header {
130
+ text-align: center;
131
+ padding: 8px 0;
132
+ position: relative;
133
+ }
134
+ .react-datepicker__header--time {
135
+ padding-bottom: 8px;
136
+ padding-left: 5px;
137
+ padding-right: 5px;
138
+ }
139
+ .react-datepicker__header--time:not(.react-datepicker__header--time--only) {
140
+ border-top-left-radius: 0;
141
+ }
142
+ .react-datepicker__header:not(.react-datepicker__header--has-time-select) {
143
+ border-top-right-radius: 0.3rem;
144
+ }
145
+
146
+ .react-datepicker__year-dropdown-container--select,
147
+ .react-datepicker__month-dropdown-container--select,
148
+ .react-datepicker__month-year-dropdown-container--select,
149
+ .react-datepicker__year-dropdown-container--scroll,
150
+ .react-datepicker__month-dropdown-container--scroll,
151
+ .react-datepicker__month-year-dropdown-container--scroll {
152
+ display: inline-block;
153
+ margin: 0 15px;
154
+ }
155
+
156
+ .react-datepicker__current-month,
157
+ .react-datepicker-time__header,
158
+ .react-datepicker-year-header {
159
+ margin-top: 0;
160
+ color: #000;
161
+ font-weight: bold;
162
+ font-size: 16px;
163
+ text-transform: capitalize;
164
+ }
165
+
166
+ .react-datepicker-time__header {
167
+ text-overflow: ellipsis;
168
+ white-space: nowrap;
169
+ overflow: hidden;
170
+ }
171
+ .react-datepicker__header--time--only{
172
+ display: none;
173
+ }
174
+ .react-datepicker__navigation {
175
+ align-items: center;
176
+ background: none;
177
+ display: flex;
178
+ justify-content: center;
179
+ text-align: center;
180
+ cursor: pointer;
181
+ position: absolute;
182
+ top: 2px;
183
+ padding: 0;
184
+ border: none;
185
+ z-index: 1;
186
+ height: 32px;
187
+ width: 32px;
188
+ text-indent: -999em;
189
+ overflow: hidden;
190
+ }
191
+ .react-datepicker__navigation--previous {
192
+ left: 2px;
193
+ }
194
+ .react-datepicker__navigation--next {
195
+ right: 2px;
196
+ }
197
+ .react-datepicker__navigation--next--with-time:not(.react-datepicker__navigation--next--with-today-button) {
198
+ right: 85px;
199
+ }
200
+ .react-datepicker__navigation--years {
201
+ position: relative;
202
+ top: 0;
203
+ display: block;
204
+ margin-left: auto;
205
+ margin-right: auto;
206
+ }
207
+ .react-datepicker__navigation--years-previous {
208
+ top: 4px;
209
+ }
210
+ .react-datepicker__navigation--years-upcoming {
211
+ top: -4px;
212
+ }
213
+ .react-datepicker__navigation:hover *::before {
214
+ border-color: #a6a6a6;
215
+ }
216
+
217
+ .react-datepicker__navigation-icon {
218
+ position: relative;
219
+ top: -1px;
220
+ font-size: 20px;
221
+ width: 0;
222
+ }
223
+ .react-datepicker__navigation-icon--next {
224
+ left: -2px;
225
+ }
226
+ .react-datepicker__navigation-icon--next::before {
227
+ transform: rotate(45deg);
228
+ left: -7px;
229
+ }
230
+ .react-datepicker__navigation-icon--previous {
231
+ right: -2px;
232
+ }
233
+ .react-datepicker__navigation-icon--previous::before {
234
+ transform: rotate(225deg);
235
+ right: -7px;
236
+ }
237
+
238
+ .react-datepicker__month-container {
239
+ float: left;
240
+ }
241
+
242
+ .react-datepicker__year {
243
+ margin: 0.4rem;
244
+ text-align: center;
245
+ }
246
+ .react-datepicker__year-wrapper {
247
+ display: flex;
248
+ flex-wrap: wrap;
249
+ max-width: 180px;
250
+ }
251
+ .react-datepicker__year .react-datepicker__year-text {
252
+ display: inline-block;
253
+ width: 4rem;
254
+ margin: 2px;
255
+ }
256
+
257
+ .react-datepicker__month {
258
+ margin: 0.4rem;
259
+ text-align: center;
260
+ }
261
+ .react-datepicker__month .react-datepicker__month-text,
262
+ .react-datepicker__month .react-datepicker__quarter-text {
263
+ display: inline-block;
264
+ width: 4rem;
265
+ margin: 2px;
266
+ }
267
+
268
+ .react-datepicker__input-time-container {
269
+ clear: both;
270
+ width: 100%;
271
+ float: left;
272
+ margin: 5px 0 10px 15px;
273
+ text-align: left;
274
+ }
275
+ .react-datepicker__input-time-container .react-datepicker-time__caption {
276
+ display: inline-block;
277
+ }
278
+ .react-datepicker__input-time-container .react-datepicker-time__input-container {
279
+ display: inline-block;
280
+ }
281
+ .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input {
282
+ display: inline-block;
283
+ margin-left: 10px;
284
+ }
285
+ .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input {
286
+ width: auto;
287
+ }
288
+ .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time]::-webkit-inner-spin-button,
289
+ .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time]::-webkit-outer-spin-button {
290
+ -webkit-appearance: none;
291
+ margin: 0;
292
+ }
293
+ .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time] {
294
+ -moz-appearance: textfield;
295
+ }
296
+ .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__delimiter {
297
+ margin-left: 5px;
298
+ display: inline-block;
299
+ }
300
+
301
+ .react-datepicker__time-container {
302
+ float: right;
303
+ border-left: 1px solid #aeaeae;
304
+ width: 85px;
305
+ }
306
+ .react-datepicker__time-container--with-today-button {
307
+ display: inline;
308
+ border: 1px solid #aeaeae;
309
+ border-radius: 0.3rem;
310
+ position: absolute;
311
+ right: -87px;
312
+ top: 0;
313
+ }
314
+ .react-datepicker__time-container .react-datepicker__time {
315
+ position: relative;
316
+ background: white;
317
+ border-bottom-right-radius: 0.3rem;
318
+ }
319
+ .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box {
320
+ width: 85px;
321
+ overflow-x: hidden;
322
+ margin: 0 auto;
323
+ text-align: center;
324
+ border-bottom-right-radius: 0.3rem;
325
+ }
326
+ .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list {
327
+ list-style: none;
328
+ margin: 0;
329
+ height: calc(195px + (1.7rem / 2));
330
+ overflow-y: scroll;
331
+ padding-right: 0;
332
+ padding-left: 0;
333
+ width: 100%;
334
+ box-sizing: content-box;
335
+ }
336
+ .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item {
337
+ height: 30px;
338
+ padding: 5px 10px;
339
+ white-space: nowrap;
340
+ }
341
+ .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item:hover {
342
+ cursor: pointer;
343
+ background-color: #f0f0f0;
344
+ }
345
+ .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected {
346
+ background-color: #216ba5;
347
+ color: white;
348
+ font-weight: bold;
349
+ }
350
+ .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected:hover {
351
+ background-color: #216ba5;
352
+ }
353
+ .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled {
354
+ color: #ccc;
355
+ }
356
+ .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled:hover {
357
+ cursor: default;
358
+ background-color: transparent;
359
+ }
360
+
361
+ .react-datepicker__week-number {
362
+ color: #ccc;
363
+ display: inline-block;
364
+ width: 1.7rem;
365
+ line-height: 1.7rem;
366
+ text-align: center;
367
+ margin: 0.166rem;
368
+ }
369
+ .react-datepicker__week-number.react-datepicker__week-number--clickable {
370
+ cursor: pointer;
371
+ }
372
+ .react-datepicker__week-number.react-datepicker__week-number--clickable:hover {
373
+ border-radius: 0.3rem;
374
+ background-color: #f0f0f0;
375
+ }
376
+
377
+ .react-datepicker__day-names,
378
+ .react-datepicker__week {
379
+ white-space: nowrap;
380
+ }
381
+
382
+ .react-datepicker__day-names {
383
+ margin-bottom: -8px;
384
+ margin-top: 8px;
385
+ }
386
+
387
+ .react-datepicker__day-name,
388
+ .react-datepicker__day,
389
+ .react-datepicker__time-name {
390
+ color: #000;
391
+ display: inline-block;
392
+ width: 35px;
393
+ line-height: 35px;
394
+ height: 35px;
395
+ text-align: center;
396
+ margin: 2px;
397
+ font-size: 16px;
398
+ }
399
+
400
+ .react-datepicker__day-name{
401
+ color: #6C757D
402
+ }
403
+
404
+ .react-datepicker__day,
405
+ .react-datepicker__month-text,
406
+ .react-datepicker__quarter-text,
407
+ .react-datepicker__year-text {
408
+ cursor: pointer;
409
+ }
410
+ .react-datepicker__day:hover,
411
+ .react-datepicker__month-text:hover,
412
+ .react-datepicker__quarter-text:hover,
413
+ .react-datepicker__year-text:hover {
414
+ border-radius: 50%;
415
+ background-color: #f0f0f0;
416
+ }
417
+ .react-datepicker__day--today,
418
+ .react-datepicker__month-text--today,
419
+ .react-datepicker__quarter-text--today,
420
+ .react-datepicker__year-text--today {
421
+ font-weight: bold;
422
+ }
423
+ .react-datepicker__day--highlighted,
424
+ .react-datepicker__month-text--highlighted,
425
+ .react-datepicker__quarter-text--highlighted,
426
+ .react-datepicker__year-text--highlighted {
427
+ border-radius: 0.3rem;
428
+ background-color: #3dcc4a;
429
+ color: #fff;
430
+ }
431
+ .react-datepicker__day--highlighted:hover,
432
+ .react-datepicker__month-text--highlighted:hover,
433
+ .react-datepicker__quarter-text--highlighted:hover,
434
+ .react-datepicker__year-text--highlighted:hover {
435
+ background-color: #32be3f;
436
+ }
437
+ .react-datepicker__day--highlighted-custom-1,
438
+ .react-datepicker__month-text--highlighted-custom-1,
439
+ .react-datepicker__quarter-text--highlighted-custom-1,
440
+ .react-datepicker__year-text--highlighted-custom-1 {
441
+ color: magenta;
442
+ }
443
+ .react-datepicker__day--highlighted-custom-2,
444
+ .react-datepicker__month-text--highlighted-custom-2,
445
+ .react-datepicker__quarter-text--highlighted-custom-2,
446
+ .react-datepicker__year-text--highlighted-custom-2 {
447
+ color: green;
448
+ }
449
+ .react-datepicker__day--selected, .react-datepicker__day--in-selecting-range, .react-datepicker__day--in-range,
450
+ .react-datepicker__month-text--selected,
451
+ .react-datepicker__month-text--in-selecting-range,
452
+ .react-datepicker__month-text--in-range,
453
+ .react-datepicker__quarter-text--selected,
454
+ .react-datepicker__quarter-text--in-selecting-range,
455
+ .react-datepicker__quarter-text--in-range,
456
+ .react-datepicker__year-text--selected,
457
+ .react-datepicker__year-text--in-selecting-range,
458
+ .react-datepicker__year-text--in-range {
459
+ border-radius: 50%;
460
+ background-color: #0D46FF;
461
+ color: #fff;
462
+ }
463
+ .react-datepicker__day--selected:hover, .react-datepicker__day--in-selecting-range:hover, .react-datepicker__day--in-range:hover,
464
+ .react-datepicker__month-text--selected:hover,
465
+ .react-datepicker__month-text--in-selecting-range:hover,
466
+ .react-datepicker__month-text--in-range:hover,
467
+ .react-datepicker__quarter-text--selected:hover,
468
+ .react-datepicker__quarter-text--in-selecting-range:hover,
469
+ .react-datepicker__quarter-text--in-range:hover,
470
+ .react-datepicker__year-text--selected:hover,
471
+ .react-datepicker__year-text--in-selecting-range:hover,
472
+ .react-datepicker__year-text--in-range:hover {
473
+ background-color: #1d5d90;
474
+ }
475
+ .react-datepicker__day--keyboard-selected,
476
+ .react-datepicker__month-text--keyboard-selected,
477
+ .react-datepicker__quarter-text--keyboard-selected,
478
+ .react-datepicker__year-text--keyboard-selected {
479
+ border-radius: 50%;
480
+ background: #fff;
481
+ border: 1px solid #0D46FF;
482
+ /*color: rgb(0, 0, 0);*/
483
+ color: #0D46FF;
484
+ }
485
+ .react-datepicker__day--keyboard-selected:hover,
486
+ .react-datepicker__month-text--keyboard-selected:hover,
487
+ .react-datepicker__quarter-text--keyboard-selected:hover,
488
+ .react-datepicker__year-text--keyboard-selected:hover {
489
+ /*background-color: #1d5d90;*/
490
+ }
491
+ .react-datepicker__day--in-selecting-range:not(.react-datepicker__day--in-range,
492
+ .react-datepicker__month-text--in-range,
493
+ .react-datepicker__quarter-text--in-range,
494
+ .react-datepicker__year-text--in-range),
495
+ .react-datepicker__month-text--in-selecting-range:not(.react-datepicker__day--in-range,
496
+ .react-datepicker__month-text--in-range,
497
+ .react-datepicker__quarter-text--in-range,
498
+ .react-datepicker__year-text--in-range),
499
+ .react-datepicker__quarter-text--in-selecting-range:not(.react-datepicker__day--in-range,
500
+ .react-datepicker__month-text--in-range,
501
+ .react-datepicker__quarter-text--in-range,
502
+ .react-datepicker__year-text--in-range),
503
+ .react-datepicker__year-text--in-selecting-range:not(.react-datepicker__day--in-range,
504
+ .react-datepicker__month-text--in-range,
505
+ .react-datepicker__quarter-text--in-range,
506
+ .react-datepicker__year-text--in-range) {
507
+ background-color: rgba(33, 107, 165, 0.5);
508
+ }
509
+ .react-datepicker__month--selecting-range .react-datepicker__day--in-range:not(.react-datepicker__day--in-selecting-range,
510
+ .react-datepicker__month-text--in-selecting-range,
511
+ .react-datepicker__quarter-text--in-selecting-range,
512
+ .react-datepicker__year-text--in-selecting-range), .react-datepicker__year--selecting-range .react-datepicker__day--in-range:not(.react-datepicker__day--in-selecting-range,
513
+ .react-datepicker__month-text--in-selecting-range,
514
+ .react-datepicker__quarter-text--in-selecting-range,
515
+ .react-datepicker__year-text--in-selecting-range),
516
+ .react-datepicker__month--selecting-range .react-datepicker__month-text--in-range:not(.react-datepicker__day--in-selecting-range,
517
+ .react-datepicker__month-text--in-selecting-range,
518
+ .react-datepicker__quarter-text--in-selecting-range,
519
+ .react-datepicker__year-text--in-selecting-range),
520
+ .react-datepicker__year--selecting-range .react-datepicker__month-text--in-range:not(.react-datepicker__day--in-selecting-range,
521
+ .react-datepicker__month-text--in-selecting-range,
522
+ .react-datepicker__quarter-text--in-selecting-range,
523
+ .react-datepicker__year-text--in-selecting-range),
524
+ .react-datepicker__month--selecting-range .react-datepicker__quarter-text--in-range:not(.react-datepicker__day--in-selecting-range,
525
+ .react-datepicker__month-text--in-selecting-range,
526
+ .react-datepicker__quarter-text--in-selecting-range,
527
+ .react-datepicker__year-text--in-selecting-range),
528
+ .react-datepicker__year--selecting-range .react-datepicker__quarter-text--in-range:not(.react-datepicker__day--in-selecting-range,
529
+ .react-datepicker__month-text--in-selecting-range,
530
+ .react-datepicker__quarter-text--in-selecting-range,
531
+ .react-datepicker__year-text--in-selecting-range),
532
+ .react-datepicker__month--selecting-range .react-datepicker__year-text--in-range:not(.react-datepicker__day--in-selecting-range,
533
+ .react-datepicker__month-text--in-selecting-range,
534
+ .react-datepicker__quarter-text--in-selecting-range,
535
+ .react-datepicker__year-text--in-selecting-range),
536
+ .react-datepicker__year--selecting-range .react-datepicker__year-text--in-range:not(.react-datepicker__day--in-selecting-range,
537
+ .react-datepicker__month-text--in-selecting-range,
538
+ .react-datepicker__quarter-text--in-selecting-range,
539
+ .react-datepicker__year-text--in-selecting-range) {
540
+ background-color: #f0f0f0;
541
+ color: #000;
542
+ }
543
+ .react-datepicker__day--disabled,
544
+ .react-datepicker__month-text--disabled,
545
+ .react-datepicker__quarter-text--disabled,
546
+ .react-datepicker__year-text--disabled {
547
+ cursor: default;
548
+ color: #ccc;
549
+ }
550
+ .react-datepicker__day--disabled:hover,
551
+ .react-datepicker__month-text--disabled:hover,
552
+ .react-datepicker__quarter-text--disabled:hover,
553
+ .react-datepicker__year-text--disabled:hover {
554
+ background-color: transparent;
555
+ }
556
+
557
+ .react-datepicker__input-container {
558
+ position: relative;
559
+ display: inline-block;
560
+ width: 100%;
561
+ }
562
+ .react-datepicker__input-container .react-datepicker__calendar-icon {
563
+ position: absolute;
564
+ padding: 0.5rem;
565
+ }
566
+
567
+ .react-datepicker__view-calendar-icon input {
568
+ padding: 6px 10px 5px 25px;
569
+ }
570
+
571
+ .react-datepicker__year-read-view,
572
+ .react-datepicker__month-read-view,
573
+ .react-datepicker__month-year-read-view {
574
+ border: 1px solid transparent;
575
+ border-radius: 0.3rem;
576
+ position: relative;
577
+ }
578
+ .react-datepicker__year-read-view:hover,
579
+ .react-datepicker__month-read-view:hover,
580
+ .react-datepicker__month-year-read-view:hover {
581
+ cursor: pointer;
582
+ }
583
+ .react-datepicker__year-read-view:hover .react-datepicker__year-read-view--down-arrow,
584
+ .react-datepicker__year-read-view:hover .react-datepicker__month-read-view--down-arrow,
585
+ .react-datepicker__month-read-view:hover .react-datepicker__year-read-view--down-arrow,
586
+ .react-datepicker__month-read-view:hover .react-datepicker__month-read-view--down-arrow,
587
+ .react-datepicker__month-year-read-view:hover .react-datepicker__year-read-view--down-arrow,
588
+ .react-datepicker__month-year-read-view:hover .react-datepicker__month-read-view--down-arrow {
589
+ border-top-color: #b3b3b3;
590
+ }
591
+ .react-datepicker__year-read-view--down-arrow,
592
+ .react-datepicker__month-read-view--down-arrow,
593
+ .react-datepicker__month-year-read-view--down-arrow {
594
+ transform: rotate(135deg);
595
+ right: -16px;
596
+ top: 0;
597
+ }
598
+
599
+ .react-datepicker__year-dropdown,
600
+ .react-datepicker__month-dropdown,
601
+ .react-datepicker__month-year-dropdown {
602
+ background-color: #f0f0f0;
603
+ position: absolute;
604
+ width: 50%;
605
+ left: 25%;
606
+ top: 30px;
607
+ z-index: 1;
608
+ text-align: center;
609
+ border-radius: 0.3rem;
610
+ border: 1px solid #aeaeae;
611
+ }
612
+ .react-datepicker__year-dropdown:hover,
613
+ .react-datepicker__month-dropdown:hover,
614
+ .react-datepicker__month-year-dropdown:hover {
615
+ cursor: pointer;
616
+ }
617
+ .react-datepicker__year-dropdown--scrollable,
618
+ .react-datepicker__month-dropdown--scrollable,
619
+ .react-datepicker__month-year-dropdown--scrollable {
620
+ height: 150px;
621
+ overflow-y: scroll;
622
+ }
623
+
624
+ .react-datepicker__year-option,
625
+ .react-datepicker__month-option,
626
+ .react-datepicker__month-year-option {
627
+ line-height: 20px;
628
+ width: 100%;
629
+ display: block;
630
+ margin-left: auto;
631
+ margin-right: auto;
632
+ }
633
+ .react-datepicker__year-option:first-of-type,
634
+ .react-datepicker__month-option:first-of-type,
635
+ .react-datepicker__month-year-option:first-of-type {
636
+ border-top-left-radius: 0.3rem;
637
+ border-top-right-radius: 0.3rem;
638
+ }
639
+ .react-datepicker__year-option:last-of-type,
640
+ .react-datepicker__month-option:last-of-type,
641
+ .react-datepicker__month-year-option:last-of-type {
642
+ -webkit-user-select: none;
643
+ -moz-user-select: none;
644
+ -ms-user-select: none;
645
+ user-select: none;
646
+ border-bottom-left-radius: 0.3rem;
647
+ border-bottom-right-radius: 0.3rem;
648
+ }
649
+ .react-datepicker__year-option:hover,
650
+ .react-datepicker__month-option:hover,
651
+ .react-datepicker__month-year-option:hover {
652
+ background-color: #ccc;
653
+ }
654
+ .react-datepicker__year-option:hover .react-datepicker__navigation--years-upcoming,
655
+ .react-datepicker__month-option:hover .react-datepicker__navigation--years-upcoming,
656
+ .react-datepicker__month-year-option:hover .react-datepicker__navigation--years-upcoming {
657
+ border-bottom-color: #b3b3b3;
658
+ }
659
+ .react-datepicker__year-option:hover .react-datepicker__navigation--years-previous,
660
+ .react-datepicker__month-option:hover .react-datepicker__navigation--years-previous,
661
+ .react-datepicker__month-year-option:hover .react-datepicker__navigation--years-previous {
662
+ border-top-color: #b3b3b3;
663
+ }
664
+ .react-datepicker__year-option--selected,
665
+ .react-datepicker__month-option--selected,
666
+ .react-datepicker__month-year-option--selected {
667
+ position: absolute;
668
+ left: 15px;
669
+ }
670
+
671
+ .react-datepicker__close-icon {
672
+ cursor: pointer;
673
+ background-color: transparent;
674
+ border: 0;
675
+ outline: 0;
676
+ padding: 0 6px 0 0;
677
+ position: absolute;
678
+ top: 0;
679
+ right: 0;
680
+ height: 100%;
681
+ display: table-cell;
682
+ vertical-align: middle;
683
+ }
684
+ .react-datepicker__close-icon::after {
685
+ cursor: pointer;
686
+ background-color: #216ba5;
687
+ color: #fff;
688
+ border-radius: 50%;
689
+ height: 16px;
690
+ width: 16px;
691
+ padding: 2px;
692
+ font-size: 12px;
693
+ line-height: 1;
694
+ text-align: center;
695
+ display: table-cell;
696
+ vertical-align: middle;
697
+ content: "×";
698
+ }
699
+
700
+ .react-datepicker__today-button {
701
+ background: #f0f0f0;
702
+ border-top: 1px solid #aeaeae;
703
+ cursor: pointer;
704
+ text-align: center;
705
+ font-weight: bold;
706
+ padding: 5px 0;
707
+ clear: left;
708
+ }
709
+
710
+ .react-datepicker__portal {
711
+ position: fixed;
712
+ width: 100vw;
713
+ height: 100vh;
714
+ background-color: rgba(0, 0, 0, 0.8);
715
+ left: 0;
716
+ top: 0;
717
+ justify-content: center;
718
+ align-items: center;
719
+ display: flex;
720
+ z-index: 2147483647;
721
+ }
722
+ .react-datepicker__portal .react-datepicker__day-name,
723
+ .react-datepicker__portal .react-datepicker__day,
724
+ .react-datepicker__portal .react-datepicker__time-name {
725
+ width: 3rem;
726
+ line-height: 3rem;
727
+ }
728
+ @media (max-width: 400px), (max-height: 550px) {
729
+ .react-datepicker__portal .react-datepicker__day-name,
730
+ .react-datepicker__portal .react-datepicker__day,
731
+ .react-datepicker__portal .react-datepicker__time-name {
732
+ width: 2rem;
733
+ line-height: 2rem;
734
+ }
735
+ }
736
+ .react-datepicker__portal .react-datepicker__current-month,
737
+ .react-datepicker__portal .react-datepicker-time__header {
738
+ font-size: 1.44rem;
739
+ }
740
+
741
+ .react-datepicker__children-container {
742
+ width: 13.8rem;
743
+ margin: 0.4rem;
744
+ padding-right: 0.2rem;
745
+ padding-left: 0.2rem;
746
+ height: auto;
747
+ }
748
+
749
+ .react-datepicker__aria-live {
750
+ position: absolute;
751
+ clip-path: circle(0);
752
+ border: 0;
753
+ height: 1px;
754
+ margin: -1px;
755
+ overflow: hidden;
756
+ padding: 0;
757
+ width: 1px;
758
+ white-space: nowrap;
759
+ }
760
+
761
+ .react-datepicker__calendar-icon {
762
+ width: 1em;
763
+ height: 1em;
764
+ vertical-align: -0.125em;
765
+ }
766
+
767
+ .react-datepicker__header__dropdown {
768
+ margin-top: 10px;
769
+ font-size: 14px;
770
+ }
771
+
772
+ .react-datepicker__header__dropdown {
773
+ margin-top: 10px;
774
+ font-size: 14px;
775
+ }
776
+ .react-datepicker__navigation--years-upcoming:after,
777
+ .react-datepicker__navigation--years-previous:after {
778
+ content: '';
779
+ position: absolute;
780
+ width: 10px;
781
+ height: 10px;
782
+ transform: rotate(-135deg);
783
+ border-left: 2px solid #000;
784
+ border-top: 2px solid #000;
785
+ z-index: 123123;
786
+ left: 10px;
787
+ top: 2px;
788
+ }
789
+ .react-datepicker__navigation--years-upcoming:after{
790
+ transform: rotate(45deg);
791
+ top: 15px;
792
+ }
793
+ .react-datepicker__sr-only{
794
+ position: absolute;
795
+ width: 1px;
796
+ height: 1px;
797
+ padding: 0;
798
+ margin: -1px;
799
+ overflow: hidden;
800
+ clip: rect(0, 0, 0, 0);
801
+ white-space: nowrap;
802
+ border: 0;
803
803
  }