forstok-ui-lib 5.9.2 → 5.10.0

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 (65) hide show
  1. package/dist/index.js +313 -317
  2. package/dist/index.js.map +1 -1
  3. package/dist/index.mjs +313 -317
  4. package/dist/index.mjs.map +1 -1
  5. package/package.json +1 -1
  6. package/src/assets/images/icons/cart.svg +2 -15
  7. package/src/assets/images/icons/person.svg +1 -1
  8. package/src/assets/stylesheets/shares.styles.ts +13 -8
  9. package/src/components/button/styles.ts +7 -14
  10. package/src/components/date/index.tsx +0 -1
  11. package/src/components/icon/styles.ts +33 -66
  12. package/src/components/link/styles.ts +1 -2
  13. package/src/components/masterTable/styles.tsx +2 -4
  14. package/src/components/message/styles.ts +4 -7
  15. package/src/components/radio/styles.ts +1 -3
  16. package/src/components/upload/styles.tsx +2 -3
  17. package/dist/c5e22b0918e5a7ef.svg +0 -9
  18. package/dist/index.css +0 -2
  19. package/dist/index.css.map +0 -1
  20. package/src/assets/images/icons/alert.svg +0 -10
  21. package/src/assets/images/icons/arrow-download.svg +0 -40
  22. package/src/assets/images/icons/arrow-left-blue.svg +0 -10
  23. package/src/assets/images/icons/arrow-left-double.svg +0 -40
  24. package/src/assets/images/icons/arrow-left.svg +0 -39
  25. package/src/assets/images/icons/arrow-red-upload.svg +0 -48
  26. package/src/assets/images/icons/arrow-right-double.svg +0 -40
  27. package/src/assets/images/icons/arrow-right.svg +0 -39
  28. package/src/assets/images/icons/arrow-upload.svg +0 -47
  29. package/src/assets/images/icons/arrow-white-upload.svg +0 -10
  30. package/src/assets/images/icons/arrow.svg +0 -3
  31. package/src/assets/images/icons/bank.svg +0 -9
  32. package/src/assets/images/icons/barcode.svg +0 -34
  33. package/src/assets/images/icons/calendar.svg +0 -4
  34. package/src/assets/images/icons/cash.svg +0 -9
  35. package/src/assets/images/icons/check-white.svg +0 -10
  36. package/src/assets/images/icons/checkmark-tick-grey.svg +0 -10
  37. package/src/assets/images/icons/checkmark-tick.svg +0 -10
  38. package/src/assets/images/icons/close copy.svg +0 -9
  39. package/src/assets/images/icons/close-white.svg +0 -9
  40. package/src/assets/images/icons/close.svg +0 -9
  41. package/src/assets/images/icons/credit.svg +0 -9
  42. package/src/assets/images/icons/debit.svg +0 -9
  43. package/src/assets/images/icons/delivery.svg +0 -12
  44. package/src/assets/images/icons/discount.svg +0 -12
  45. package/src/assets/images/icons/dotted.svg +0 -5
  46. package/src/assets/images/icons/edit-white.svg +0 -5
  47. package/src/assets/images/icons/edit.svg +0 -3
  48. package/src/assets/images/icons/email.svg +0 -9
  49. package/src/assets/images/icons/filter.svg +0 -34
  50. package/src/assets/images/icons/humberbars.svg +0 -1
  51. package/src/assets/images/icons/loading-red.svg +0 -27
  52. package/src/assets/images/icons/notif-download-white.svg +0 -6
  53. package/src/assets/images/icons/notif-upload-white.svg +0 -6
  54. package/src/assets/images/icons/print.svg +0 -9
  55. package/src/assets/images/icons/qris.svg +0 -9
  56. package/src/assets/images/icons/question.svg +0 -2
  57. package/src/assets/images/icons/search.svg +0 -4
  58. package/src/assets/images/icons/sortby.svg +0 -11
  59. package/src/assets/images/icons/success.svg +0 -5
  60. package/src/assets/images/icons/trash.svg +0 -2
  61. package/src/assets/images/icons/wallet.svg +0 -9
  62. package/src/assets/images/icons/warning-white.svg +0 -4
  63. package/src/assets/images/icons/warning.svg +0 -9
  64. package/src/assets/images/icons/xls.svg +0 -9
  65. package/src/components/date/react.datepicker.css +0 -729
@@ -1,729 +0,0 @@
1
- @charset "UTF-8";
2
- .react-datepicker__navigation-icon::before, .react-datepicker__year-read-view--down-arrow,
3
- .react-datepicker__month-read-view--down-arrow,
4
- .react-datepicker__month-year-read-view--down-arrow {
5
- border-color: #ccc;
6
- border-style: solid;
7
- border-width: 3px 3px 0 0;
8
- content: "";
9
- display: block;
10
- height: 9px;
11
- position: absolute;
12
- top: 6px;
13
- width: 9px;
14
- }
15
- .react-datepicker-wrapper {
16
- display: inline-block;
17
- padding: 0;
18
- border: 0;
19
- }
20
- .react-datepicker {
21
- font-family: "Helvetica Neue", helvetica, arial, sans-serif;
22
- font-size: 0.8rem;
23
- background-color: #fff;
24
- color: #000;
25
- border: 1px solid #aeaeae;
26
- border-radius: 0.3rem;
27
- display: inline-block;
28
- position: relative;
29
- line-height: initial;
30
- }
31
- .react-datepicker--time-only .react-datepicker__time-container {
32
- border-left: 0;
33
- }
34
- .react-datepicker--time-only .react-datepicker__time,
35
- .react-datepicker--time-only .react-datepicker__time-box {
36
- border-bottom-left-radius: 0.3rem;
37
- border-bottom-right-radius: 0.3rem;
38
- }
39
- .react-datepicker-popper {
40
- z-index: 1;
41
- line-height: 0;
42
- }
43
- .react-datepicker-popper .react-datepicker__triangle {
44
- stroke: #aeaeae;
45
- }
46
- .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle {
47
- fill: #f0f0f0;
48
- color: #f0f0f0;
49
- }
50
- .react-datepicker-popper[data-placement^=top] .react-datepicker__triangle {
51
- fill: #fff;
52
- color: #fff;
53
- }
54
- .react-datepicker__header {
55
- text-align: center;
56
- background-color: #f0f0f0;
57
- border-bottom: 1px solid #aeaeae;
58
- border-top-left-radius: 0.3rem;
59
- padding: 8px 0;
60
- position: relative;
61
- }
62
- .react-datepicker__header--time {
63
- padding-bottom: 8px;
64
- padding-left: 5px;
65
- padding-right: 5px;
66
- }
67
- .react-datepicker__header--time:not(.react-datepicker__header--time--only) {
68
- border-top-left-radius: 0;
69
- }
70
- .react-datepicker__header:not(.react-datepicker__header--has-time-select) {
71
- border-top-right-radius: 0.3rem;
72
- }
73
- .react-datepicker__year-dropdown-container--select,
74
- .react-datepicker__month-dropdown-container--select,
75
- .react-datepicker__month-year-dropdown-container--select,
76
- .react-datepicker__year-dropdown-container--scroll,
77
- .react-datepicker__month-dropdown-container--scroll,
78
- .react-datepicker__month-year-dropdown-container--scroll {
79
- display: inline-block;
80
- margin: 0 15px;
81
- }
82
- .react-datepicker__current-month,
83
- .react-datepicker-time__header,
84
- .react-datepicker-year-header {
85
- margin-top: 0;
86
- color: #000;
87
- font-weight: bold;
88
- font-size: 0.944rem;
89
- }
90
- h2.react-datepicker__current-month {
91
- padding: 0;
92
- margin: 0;
93
- }
94
- .react-datepicker-time__header {
95
- text-overflow: ellipsis;
96
- white-space: nowrap;
97
- overflow: hidden;
98
- }
99
- .react-datepicker__navigation {
100
- align-items: center;
101
- background: none;
102
- display: flex;
103
- justify-content: center;
104
- text-align: center;
105
- cursor: pointer;
106
- position: absolute;
107
- top: 2px;
108
- padding: 0;
109
- border: none;
110
- z-index: 1;
111
- height: 32px;
112
- width: 32px;
113
- text-indent: -999em;
114
- overflow: hidden;
115
- }
116
- .react-datepicker__navigation--previous {
117
- left: 2px;
118
- }
119
- .react-datepicker__navigation--next {
120
- right: 2px;
121
- }
122
- .react-datepicker__navigation--next--with-time:not(.react-datepicker__navigation--next--with-today-button) {
123
- right: 85px;
124
- }
125
- .react-datepicker__navigation--years {
126
- position: relative;
127
- top: 0;
128
- display: block;
129
- margin-left: auto;
130
- margin-right: auto;
131
- }
132
- .react-datepicker__navigation--years-previous {
133
- top: 4px;
134
- }
135
- .react-datepicker__navigation--years-upcoming {
136
- top: -4px;
137
- }
138
- .react-datepicker__navigation:hover *::before {
139
- border-color: rgb(165.75, 165.75, 165.75);
140
- }
141
- .react-datepicker__navigation-icon {
142
- position: relative;
143
- top: -1px;
144
- font-size: 20px;
145
- width: 0;
146
- }
147
- .react-datepicker__navigation-icon--next {
148
- left: -2px;
149
- }
150
- .react-datepicker__navigation-icon--next::before {
151
- transform: rotate(45deg);
152
- left: -7px;
153
- }
154
- .react-datepicker__navigation-icon--previous {
155
- right: -2px;
156
- }
157
- .react-datepicker__navigation-icon--previous::before {
158
- transform: rotate(225deg);
159
- right: -7px;
160
- }
161
- .react-datepicker__month-container {
162
- float: left;
163
- }
164
- .react-datepicker__year {
165
- margin: 0.4rem;
166
- text-align: center;
167
- }
168
- .react-datepicker__year-wrapper {
169
- display: flex;
170
- flex-wrap: wrap;
171
- max-width: 180px;
172
- }
173
- .react-datepicker__year .react-datepicker__year-text {
174
- display: inline-block;
175
- width: 4rem;
176
- margin: 2px;
177
- }
178
- .react-datepicker__month {
179
- margin: 0.4rem;
180
- text-align: center;
181
- }
182
- .react-datepicker__month .react-datepicker__month-text,
183
- .react-datepicker__month .react-datepicker__quarter-text {
184
- display: inline-block;
185
- width: 4rem;
186
- margin: 2px;
187
- }
188
- .react-datepicker__input-time-container {
189
- clear: both;
190
- width: 100%;
191
- float: left;
192
- margin: 5px 0 10px 15px;
193
- text-align: left;
194
- }
195
- .react-datepicker__input-time-container .react-datepicker-time__caption {
196
- display: inline-block;
197
- }
198
- .react-datepicker__input-time-container .react-datepicker-time__input-container {
199
- display: inline-block;
200
- }
201
- .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input {
202
- display: inline-block;
203
- margin-left: 10px;
204
- }
205
- .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input {
206
- width: auto;
207
- }
208
- .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time]::-webkit-inner-spin-button,
209
- .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time]::-webkit-outer-spin-button {
210
- -webkit-appearance: none;
211
- margin: 0;
212
- }
213
- .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time] {
214
- appearance: textfield;
215
- -moz-appearance: textfield;
216
- }
217
- .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__delimiter {
218
- margin-left: 5px;
219
- display: inline-block;
220
- }
221
- .react-datepicker__time-container {
222
- float: right;
223
- border-left: 1px solid #aeaeae;
224
- width: 85px;
225
- }
226
- .react-datepicker__time-container--with-today-button {
227
- display: inline;
228
- border: 1px solid #aeaeae;
229
- border-radius: 0.3rem;
230
- position: absolute;
231
- right: -87px;
232
- top: 0;
233
- }
234
- .react-datepicker__time-container .react-datepicker__time {
235
- position: relative;
236
- background: white;
237
- border-bottom-right-radius: 0.3rem;
238
- }
239
- .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box {
240
- width: 85px;
241
- overflow-x: hidden;
242
- margin: 0 auto;
243
- text-align: center;
244
- border-bottom-right-radius: 0.3rem;
245
- }
246
- .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list {
247
- list-style: none;
248
- margin: 0;
249
- height: calc(195px + 1.7rem / 2);
250
- overflow-y: scroll;
251
- padding-right: 0;
252
- padding-left: 0;
253
- width: 100%;
254
- box-sizing: content-box;
255
- }
256
- .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item {
257
- height: 30px;
258
- padding: 5px 10px;
259
- white-space: nowrap;
260
- }
261
- .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item:hover {
262
- cursor: pointer;
263
- background-color: #f0f0f0;
264
- }
265
- .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected {
266
- background-color: #216ba5;
267
- color: white;
268
- font-weight: bold;
269
- }
270
- .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected:hover {
271
- background-color: #216ba5;
272
- }
273
- .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled {
274
- color: #ccc;
275
- }
276
- .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled:hover {
277
- cursor: default;
278
- background-color: transparent;
279
- }
280
- .react-datepicker__week-number {
281
- color: #ccc;
282
- display: inline-block;
283
- width: 1.7rem;
284
- line-height: 1.7rem;
285
- text-align: center;
286
- margin: 0.166rem;
287
- }
288
- .react-datepicker__week-number.react-datepicker__week-number--clickable {
289
- cursor: pointer;
290
- }
291
- .react-datepicker__week-number.react-datepicker__week-number--clickable:not(.react-datepicker__week-number--selected):hover {
292
- border-radius: 0.3rem;
293
- background-color: #f0f0f0;
294
- }
295
- .react-datepicker__week-number--selected {
296
- border-radius: 0.3rem;
297
- background-color: #216ba5;
298
- color: #fff;
299
- }
300
- .react-datepicker__week-number--selected:hover {
301
- background-color: rgb(28.75, 93.2196969697, 143.75);
302
- }
303
- .react-datepicker__day-names {
304
- white-space: nowrap;
305
- margin-bottom: -8px;
306
- }
307
- .react-datepicker__week {
308
- white-space: nowrap;
309
- }
310
- .react-datepicker__day-name,
311
- .react-datepicker__day,
312
- .react-datepicker__time-name {
313
- color: #000;
314
- display: inline-block;
315
- width: 1.7rem;
316
- line-height: 1.7rem;
317
- text-align: center;
318
- margin: 0.166rem;
319
- }
320
- .react-datepicker__day,
321
- .react-datepicker__month-text,
322
- .react-datepicker__quarter-text,
323
- .react-datepicker__year-text {
324
- cursor: pointer;
325
- }
326
- .react-datepicker__day:not([aria-disabled=true]):hover,
327
- .react-datepicker__month-text:not([aria-disabled=true]):hover,
328
- .react-datepicker__quarter-text:not([aria-disabled=true]):hover,
329
- .react-datepicker__year-text:not([aria-disabled=true]):hover {
330
- border-radius: 0.3rem;
331
- background-color: #f0f0f0;
332
- }
333
- .react-datepicker__day--today,
334
- .react-datepicker__month-text--today,
335
- .react-datepicker__quarter-text--today,
336
- .react-datepicker__year-text--today {
337
- font-weight: bold;
338
- }
339
- .react-datepicker__day--highlighted,
340
- .react-datepicker__month-text--highlighted,
341
- .react-datepicker__quarter-text--highlighted,
342
- .react-datepicker__year-text--highlighted {
343
- border-radius: 0.3rem;
344
- background-color: #3dcc4a;
345
- color: #fff;
346
- }
347
- .react-datepicker__day--highlighted:not([aria-disabled=true]):hover,
348
- .react-datepicker__month-text--highlighted:not([aria-disabled=true]):hover,
349
- .react-datepicker__quarter-text--highlighted:not([aria-disabled=true]):hover,
350
- .react-datepicker__year-text--highlighted:not([aria-disabled=true]):hover {
351
- background-color: rgb(49.8551020408, 189.6448979592, 62.5632653061);
352
- }
353
- .react-datepicker__day--highlighted-custom-1,
354
- .react-datepicker__month-text--highlighted-custom-1,
355
- .react-datepicker__quarter-text--highlighted-custom-1,
356
- .react-datepicker__year-text--highlighted-custom-1 {
357
- color: magenta;
358
- }
359
- .react-datepicker__day--highlighted-custom-2,
360
- .react-datepicker__month-text--highlighted-custom-2,
361
- .react-datepicker__quarter-text--highlighted-custom-2,
362
- .react-datepicker__year-text--highlighted-custom-2 {
363
- color: green;
364
- }
365
- .react-datepicker__day--holidays,
366
- .react-datepicker__month-text--holidays,
367
- .react-datepicker__quarter-text--holidays,
368
- .react-datepicker__year-text--holidays {
369
- position: relative;
370
- border-radius: 0.3rem;
371
- background-color: #ff6803;
372
- color: #fff;
373
- }
374
- .react-datepicker__day--holidays .overlay,
375
- .react-datepicker__month-text--holidays .overlay,
376
- .react-datepicker__quarter-text--holidays .overlay,
377
- .react-datepicker__year-text--holidays .overlay {
378
- position: absolute;
379
- bottom: 100%;
380
- left: 50%;
381
- transform: translateX(-50%);
382
- background-color: #333;
383
- color: #fff;
384
- padding: 4px;
385
- border-radius: 4px;
386
- white-space: nowrap;
387
- visibility: hidden;
388
- opacity: 0;
389
- transition: visibility 0s, opacity 0.3s ease-in-out;
390
- }
391
- .react-datepicker__day--holidays:not([aria-disabled=true]):hover,
392
- .react-datepicker__month-text--holidays:not([aria-disabled=true]):hover,
393
- .react-datepicker__quarter-text--holidays:not([aria-disabled=true]):hover,
394
- .react-datepicker__year-text--holidays:not([aria-disabled=true]):hover {
395
- background-color: rgb(207, 82.9642857143, 0);
396
- }
397
- .react-datepicker__day--holidays:hover .overlay,
398
- .react-datepicker__month-text--holidays:hover .overlay,
399
- .react-datepicker__quarter-text--holidays:hover .overlay,
400
- .react-datepicker__year-text--holidays:hover .overlay {
401
- visibility: visible;
402
- opacity: 1;
403
- }
404
- .react-datepicker__day--selected, .react-datepicker__day--in-selecting-range, .react-datepicker__day--in-range,
405
- .react-datepicker__month-text--selected,
406
- .react-datepicker__month-text--in-selecting-range,
407
- .react-datepicker__month-text--in-range,
408
- .react-datepicker__quarter-text--selected,
409
- .react-datepicker__quarter-text--in-selecting-range,
410
- .react-datepicker__quarter-text--in-range,
411
- .react-datepicker__year-text--selected,
412
- .react-datepicker__year-text--in-selecting-range,
413
- .react-datepicker__year-text--in-range {
414
- border-radius: 0.3rem;
415
- background-color: #216ba5;
416
- color: #fff;
417
- }
418
- .react-datepicker__day--selected:not([aria-disabled=true]):hover, .react-datepicker__day--in-selecting-range:not([aria-disabled=true]):hover, .react-datepicker__day--in-range:not([aria-disabled=true]):hover,
419
- .react-datepicker__month-text--selected:not([aria-disabled=true]):hover,
420
- .react-datepicker__month-text--in-selecting-range:not([aria-disabled=true]):hover,
421
- .react-datepicker__month-text--in-range:not([aria-disabled=true]):hover,
422
- .react-datepicker__quarter-text--selected:not([aria-disabled=true]):hover,
423
- .react-datepicker__quarter-text--in-selecting-range:not([aria-disabled=true]):hover,
424
- .react-datepicker__quarter-text--in-range:not([aria-disabled=true]):hover,
425
- .react-datepicker__year-text--selected:not([aria-disabled=true]):hover,
426
- .react-datepicker__year-text--in-selecting-range:not([aria-disabled=true]):hover,
427
- .react-datepicker__year-text--in-range:not([aria-disabled=true]):hover {
428
- background-color: rgb(28.75, 93.2196969697, 143.75);
429
- }
430
- .react-datepicker__day--keyboard-selected,
431
- .react-datepicker__month-text--keyboard-selected,
432
- .react-datepicker__quarter-text--keyboard-selected,
433
- .react-datepicker__year-text--keyboard-selected {
434
- border-radius: 0.3rem;
435
- background-color: rgb(186.25, 217.0833333333, 241.25);
436
- color: rgb(0, 0, 0);
437
- }
438
- .react-datepicker__day--keyboard-selected:not([aria-disabled=true]):hover,
439
- .react-datepicker__month-text--keyboard-selected:not([aria-disabled=true]):hover,
440
- .react-datepicker__quarter-text--keyboard-selected:not([aria-disabled=true]):hover,
441
- .react-datepicker__year-text--keyboard-selected:not([aria-disabled=true]):hover {
442
- background-color: rgb(28.75, 93.2196969697, 143.75);
443
- }
444
- .react-datepicker__day--in-selecting-range:not(.react-datepicker__day--in-range,
445
- .react-datepicker__month-text--in-range,
446
- .react-datepicker__quarter-text--in-range,
447
- .react-datepicker__year-text--in-range),
448
- .react-datepicker__month-text--in-selecting-range:not(.react-datepicker__day--in-range,
449
- .react-datepicker__month-text--in-range,
450
- .react-datepicker__quarter-text--in-range,
451
- .react-datepicker__year-text--in-range),
452
- .react-datepicker__quarter-text--in-selecting-range:not(.react-datepicker__day--in-range,
453
- .react-datepicker__month-text--in-range,
454
- .react-datepicker__quarter-text--in-range,
455
- .react-datepicker__year-text--in-range),
456
- .react-datepicker__year-text--in-selecting-range:not(.react-datepicker__day--in-range,
457
- .react-datepicker__month-text--in-range,
458
- .react-datepicker__quarter-text--in-range,
459
- .react-datepicker__year-text--in-range) {
460
- background-color: rgba(33, 107, 165, 0.5);
461
- }
462
- .react-datepicker__month--selecting-range .react-datepicker__day--in-range:not(.react-datepicker__day--in-selecting-range,
463
- .react-datepicker__month-text--in-selecting-range,
464
- .react-datepicker__quarter-text--in-selecting-range,
465
- .react-datepicker__year-text--in-selecting-range), .react-datepicker__year--selecting-range .react-datepicker__day--in-range:not(.react-datepicker__day--in-selecting-range,
466
- .react-datepicker__month-text--in-selecting-range,
467
- .react-datepicker__quarter-text--in-selecting-range,
468
- .react-datepicker__year-text--in-selecting-range),
469
- .react-datepicker__month--selecting-range .react-datepicker__month-text--in-range:not(.react-datepicker__day--in-selecting-range,
470
- .react-datepicker__month-text--in-selecting-range,
471
- .react-datepicker__quarter-text--in-selecting-range,
472
- .react-datepicker__year-text--in-selecting-range),
473
- .react-datepicker__year--selecting-range .react-datepicker__month-text--in-range:not(.react-datepicker__day--in-selecting-range,
474
- .react-datepicker__month-text--in-selecting-range,
475
- .react-datepicker__quarter-text--in-selecting-range,
476
- .react-datepicker__year-text--in-selecting-range),
477
- .react-datepicker__month--selecting-range .react-datepicker__quarter-text--in-range:not(.react-datepicker__day--in-selecting-range,
478
- .react-datepicker__month-text--in-selecting-range,
479
- .react-datepicker__quarter-text--in-selecting-range,
480
- .react-datepicker__year-text--in-selecting-range),
481
- .react-datepicker__year--selecting-range .react-datepicker__quarter-text--in-range:not(.react-datepicker__day--in-selecting-range,
482
- .react-datepicker__month-text--in-selecting-range,
483
- .react-datepicker__quarter-text--in-selecting-range,
484
- .react-datepicker__year-text--in-selecting-range),
485
- .react-datepicker__month--selecting-range .react-datepicker__year-text--in-range:not(.react-datepicker__day--in-selecting-range,
486
- .react-datepicker__month-text--in-selecting-range,
487
- .react-datepicker__quarter-text--in-selecting-range,
488
- .react-datepicker__year-text--in-selecting-range),
489
- .react-datepicker__year--selecting-range .react-datepicker__year-text--in-range:not(.react-datepicker__day--in-selecting-range,
490
- .react-datepicker__month-text--in-selecting-range,
491
- .react-datepicker__quarter-text--in-selecting-range,
492
- .react-datepicker__year-text--in-selecting-range) {
493
- background-color: #f0f0f0;
494
- color: #000;
495
- }
496
- .react-datepicker__day--disabled,
497
- .react-datepicker__month-text--disabled,
498
- .react-datepicker__quarter-text--disabled,
499
- .react-datepicker__year-text--disabled {
500
- cursor: default;
501
- color: #ccc;
502
- }
503
- .react-datepicker__day--disabled .overlay,
504
- .react-datepicker__month-text--disabled .overlay,
505
- .react-datepicker__quarter-text--disabled .overlay,
506
- .react-datepicker__year-text--disabled .overlay {
507
- position: absolute;
508
- bottom: 70%;
509
- left: 50%;
510
- transform: translateX(-50%);
511
- background-color: #333;
512
- color: #fff;
513
- padding: 4px;
514
- border-radius: 4px;
515
- white-space: nowrap;
516
- visibility: hidden;
517
- opacity: 0;
518
- transition: visibility 0s, opacity 0.3s ease-in-out;
519
- }
520
- .react-datepicker__input-container {
521
- position: relative;
522
- display: inline-block;
523
- width: 100%;
524
- }
525
- .react-datepicker__input-container .react-datepicker__calendar-icon {
526
- position: absolute;
527
- padding: 0.5rem;
528
- box-sizing: content-box;
529
- }
530
- .react-datepicker__view-calendar-icon input {
531
- padding: 6px 10px 5px 25px;
532
- }
533
- .react-datepicker__year-read-view,
534
- .react-datepicker__month-read-view,
535
- .react-datepicker__month-year-read-view {
536
- border: 1px solid transparent;
537
- border-radius: 0.3rem;
538
- position: relative;
539
- }
540
- .react-datepicker__year-read-view:hover,
541
- .react-datepicker__month-read-view:hover,
542
- .react-datepicker__month-year-read-view:hover {
543
- cursor: pointer;
544
- }
545
- .react-datepicker__year-read-view:hover .react-datepicker__year-read-view--down-arrow,
546
- .react-datepicker__year-read-view:hover .react-datepicker__month-read-view--down-arrow,
547
- .react-datepicker__month-read-view:hover .react-datepicker__year-read-view--down-arrow,
548
- .react-datepicker__month-read-view:hover .react-datepicker__month-read-view--down-arrow,
549
- .react-datepicker__month-year-read-view:hover .react-datepicker__year-read-view--down-arrow,
550
- .react-datepicker__month-year-read-view:hover .react-datepicker__month-read-view--down-arrow {
551
- border-top-color: rgb(178.5, 178.5, 178.5);
552
- }
553
- .react-datepicker__year-read-view--down-arrow,
554
- .react-datepicker__month-read-view--down-arrow,
555
- .react-datepicker__month-year-read-view--down-arrow {
556
- transform: rotate(135deg);
557
- right: -16px;
558
- top: 0;
559
- }
560
- .react-datepicker__year-dropdown,
561
- .react-datepicker__month-dropdown,
562
- .react-datepicker__month-year-dropdown {
563
- background-color: #f0f0f0;
564
- position: absolute;
565
- width: 50%;
566
- left: 25%;
567
- top: 30px;
568
- z-index: 1;
569
- text-align: center;
570
- border-radius: 0.3rem;
571
- border: 1px solid #aeaeae;
572
- }
573
- .react-datepicker__year-dropdown:hover,
574
- .react-datepicker__month-dropdown:hover,
575
- .react-datepicker__month-year-dropdown:hover {
576
- cursor: pointer;
577
- }
578
- .react-datepicker__year-dropdown--scrollable,
579
- .react-datepicker__month-dropdown--scrollable,
580
- .react-datepicker__month-year-dropdown--scrollable {
581
- height: 150px;
582
- overflow-y: scroll;
583
- }
584
- .react-datepicker__year-option,
585
- .react-datepicker__month-option,
586
- .react-datepicker__month-year-option {
587
- line-height: 20px;
588
- width: 100%;
589
- display: block;
590
- margin-left: auto;
591
- margin-right: auto;
592
- }
593
- .react-datepicker__year-option:first-of-type,
594
- .react-datepicker__month-option:first-of-type,
595
- .react-datepicker__month-year-option:first-of-type {
596
- border-top-left-radius: 0.3rem;
597
- border-top-right-radius: 0.3rem;
598
- }
599
- .react-datepicker__year-option:last-of-type,
600
- .react-datepicker__month-option:last-of-type,
601
- .react-datepicker__month-year-option:last-of-type {
602
- -webkit-user-select: none;
603
- -moz-user-select: none;
604
- -ms-user-select: none;
605
- user-select: none;
606
- border-bottom-left-radius: 0.3rem;
607
- border-bottom-right-radius: 0.3rem;
608
- }
609
- .react-datepicker__year-option:hover,
610
- .react-datepicker__month-option:hover,
611
- .react-datepicker__month-year-option:hover {
612
- background-color: #ccc;
613
- }
614
- .react-datepicker__year-option:hover .react-datepicker__navigation--years-upcoming,
615
- .react-datepicker__month-option:hover .react-datepicker__navigation--years-upcoming,
616
- .react-datepicker__month-year-option:hover .react-datepicker__navigation--years-upcoming {
617
- border-bottom-color: rgb(178.5, 178.5, 178.5);
618
- }
619
- .react-datepicker__year-option:hover .react-datepicker__navigation--years-previous,
620
- .react-datepicker__month-option:hover .react-datepicker__navigation--years-previous,
621
- .react-datepicker__month-year-option:hover .react-datepicker__navigation--years-previous {
622
- border-top-color: rgb(178.5, 178.5, 178.5);
623
- }
624
- .react-datepicker__year-option--selected,
625
- .react-datepicker__month-option--selected,
626
- .react-datepicker__month-year-option--selected {
627
- position: absolute;
628
- left: 15px;
629
- }
630
- .react-datepicker__close-icon {
631
- cursor: pointer;
632
- background-color: transparent;
633
- border: 0;
634
- outline: 0;
635
- padding: 0 6px 0 0;
636
- position: absolute;
637
- top: 0;
638
- right: 0;
639
- height: 100%;
640
- display: table-cell;
641
- vertical-align: middle;
642
- }
643
- .react-datepicker__close-icon::after {
644
- cursor: pointer;
645
- background-color: #216ba5;
646
- color: #fff;
647
- border-radius: 50%;
648
- height: 16px;
649
- width: 16px;
650
- padding: 2px;
651
- font-size: 12px;
652
- line-height: 1;
653
- text-align: center;
654
- display: table-cell;
655
- vertical-align: middle;
656
- content: "×";
657
- }
658
- .react-datepicker__close-icon--disabled {
659
- cursor: default;
660
- }
661
- .react-datepicker__close-icon--disabled::after {
662
- cursor: default;
663
- background-color: #ccc;
664
- }
665
- .react-datepicker__today-button {
666
- background: #f0f0f0;
667
- border-top: 1px solid #aeaeae;
668
- cursor: pointer;
669
- text-align: center;
670
- font-weight: bold;
671
- padding: 5px 0;
672
- clear: left;
673
- }
674
- .react-datepicker__portal {
675
- position: fixed;
676
- width: 100vw;
677
- height: 100vh;
678
- background-color: rgba(0, 0, 0, 0.8);
679
- left: 0;
680
- top: 0;
681
- justify-content: center;
682
- align-items: center;
683
- display: flex;
684
- z-index: 2147483647;
685
- }
686
- .react-datepicker__portal .react-datepicker__day-name,
687
- .react-datepicker__portal .react-datepicker__day,
688
- .react-datepicker__portal .react-datepicker__time-name {
689
- width: 3rem;
690
- line-height: 3rem;
691
- }
692
- @media (max-width: 400px), (max-height: 550px) {
693
- .react-datepicker__portal .react-datepicker__day-name,
694
- .react-datepicker__portal .react-datepicker__day,
695
- .react-datepicker__portal .react-datepicker__time-name {
696
- width: 2rem;
697
- line-height: 2rem;
698
- }
699
- }
700
- .react-datepicker__portal .react-datepicker__current-month,
701
- .react-datepicker__portal .react-datepicker-time__header {
702
- font-size: 1.44rem;
703
- }
704
- .react-datepicker__children-container {
705
- width: 13.8rem;
706
- margin: 0.4rem;
707
- padding-right: 0.2rem;
708
- padding-left: 0.2rem;
709
- height: auto;
710
- }
711
- .react-datepicker__aria-live {
712
- position: absolute;
713
- clip-path: circle(0);
714
- border: 0;
715
- height: 1px;
716
- margin: -1px;
717
- overflow: hidden;
718
- padding: 0;
719
- width: 1px;
720
- white-space: nowrap;
721
- }
722
- .react-datepicker__calendar-icon {
723
- width: 1em;
724
- height: 1em;
725
- vertical-align: -0.125em;
726
- }
727
- #popup-portal .react-datepicker-popper {
728
- z-index: 1000;
729
- }