stay_commerce-frontend 0.1.0 → 0.1.1

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 (72) hide show
  1. checksums.yaml +4 -4
  2. data/app/assets/builds/bundle.css +8665 -6069
  3. data/app/assets/builds/bundle.css.map +3 -3
  4. data/app/assets/builds/bundle.js +37877 -27557
  5. data/app/assets/builds/bundle.js.map +4 -4
  6. data/app/assets/builds/styles.css +6328 -5031
  7. data/app/assets/builds/styles.css.map +3 -3
  8. data/app/javascript/react/components/Accountpage/AccountInfo.jsx +2 -1
  9. data/app/javascript/react/components/AddNewProperty/CommonLayout.jsx +0 -2
  10. data/app/javascript/react/components/AddNewProperty/Description.jsx +51 -52
  11. data/app/javascript/react/components/AddNewProperty/Details.jsx +212 -129
  12. data/app/javascript/react/components/AddNewProperty/Images.jsx +122 -45
  13. data/app/javascript/react/components/AddNewProperty/Location.jsx +21 -14
  14. data/app/javascript/react/components/AddNewProperty/Room.jsx +639 -548
  15. data/app/javascript/react/components/AvatarDropdown/AvatarDropDown.jsx +9 -1
  16. data/app/javascript/react/components/FacilitiesSection/Facilities.jsx +18 -0
  17. data/app/javascript/react/components/FixedNavbar/FixedNav.jsx +20 -14
  18. data/app/javascript/react/components/HeroSectionDesign/BookingForm.jsx +136 -88
  19. data/app/javascript/react/components/HeroSectionDesign/MyPropertiesListing.jsx +79 -69
  20. data/app/javascript/react/components/Layout/Layout.js +8 -1
  21. data/app/javascript/react/components/Listing-stay-Detail/ApartmentCard.jsx +3 -3
  22. data/app/javascript/react/components/Listing-stay-Detail/BookingModal.jsx +167 -122
  23. data/app/javascript/react/components/Listing-stay-Detail/CardManager.jsx +285 -0
  24. data/app/javascript/react/components/Listing-stay-Detail/CheckoutForm.jsx +147 -84
  25. data/app/javascript/react/components/Listing-stay-Detail/ListingStayDetailPage.jsx +1 -7
  26. data/app/javascript/react/components/Listing-stay-Detail/PropertiesPage.jsx +464 -0
  27. data/app/javascript/react/components/MobileNav/MobileMenu.jsx +1 -4
  28. data/app/javascript/react/components/PropertyListing/MyProperties.jsx +45 -44
  29. data/app/javascript/react/components/PropertyListing/StayBooking/BookingDetails.jsx +4 -4
  30. data/app/javascript/react/components/PropertyListing/StayBooking/MyBooking.jsx +41 -29
  31. data/app/javascript/react/components/StayCard/StayCard.jsx +5 -3
  32. data/app/javascript/react/packs/index.jsx +1 -0
  33. data/app/javascript/react/packs/routes/Route.jsx +18 -1
  34. data/app/javascript/react/pages/Home.jsx +6 -4
  35. data/app/javascript/react/redux/slices/PropertySlice/PropertySlice.jsx +21 -21
  36. data/app/javascript/react/redux/slices/PropertySlice/Searchslice.jsx +53 -6
  37. data/app/javascript/react/redux/slices/UserSlice/UserSlice.jsx +1 -0
  38. data/app/javascript/react/shared/Avatar/Avatar.jsx +5 -8
  39. data/app/javascript/react/shared/Button/SecondryButton.jsx +9 -0
  40. data/app/javascript/react/shared/Loader.jsx +13 -0
  41. data/app/javascript/react/shared/Pagination.jsx +53 -0
  42. data/app/javascript/react/shared/Schema/FormSchema +143 -0
  43. data/app/javascript/react/styles/BookingDetails.scss +1 -0
  44. data/app/javascript/react/styles/CardManager.scss +608 -0
  45. data/app/javascript/react/styles/Loader.scss +30 -0
  46. data/app/javascript/react/styles/Pagination.scss +33 -0
  47. data/app/javascript/react/styles/PropertiesPage.scss +0 -4
  48. data/app/javascript/react/styles/RenderSection.scss +1 -0
  49. data/app/javascript/react/styles/accountpage.scss +3 -0
  50. data/app/javascript/react/styles/application.scss +13 -1
  51. data/app/javascript/react/styles/bookingform.scss +56 -28
  52. data/app/javascript/react/styles/buttonSecondry.scss +24 -0
  53. data/app/javascript/react/styles/checkbox.scss +34 -35
  54. data/app/javascript/react/styles/commonlayout.scss +7 -2
  55. data/app/javascript/react/styles/commonpage.scss +5 -1
  56. data/app/javascript/react/styles/description.scss +3 -0
  57. data/app/javascript/react/styles/facilities.scss +2 -1
  58. data/app/javascript/react/styles/fixednavbar.scss +8 -0
  59. data/app/javascript/react/styles/listingstaydetailpage.scss +5 -0
  60. data/app/javascript/react/styles/mobilemenu.scss +0 -1
  61. data/app/javascript/react/styles/mybooking.scss +20 -0
  62. data/app/javascript/react/styles/myproperty.scss +26 -0
  63. data/app/javascript/react/styles/propertydetailscard.scss +265 -267
  64. data/app/javascript/react/styles/react-datepicker/react-datepicker.css +869 -0
  65. data/app/javascript/react/styles/room.scss +13 -8
  66. data/app/javascript/react/utils/helpers/ToastErros.js +12 -0
  67. data/db/migrate/20250627101451_add_role_to_stay_users.rb +5 -0
  68. data/lib/stay_commerce/frontend/version.rb +1 -1
  69. metadata +15 -5
  70. data/app/javascript/react/components/HeroSectionDesign/PropertiesPage.jsx +0 -122
  71. data/app/javascript/react/shared/DateField/CustomDatePicker.jsx +0 -69
  72. data/app/javascript/react/styles/customdatepicker.scss +0 -120
@@ -0,0 +1,869 @@
1
+ @charset "UTF-8";
2
+ .react-datepicker__navigation-icon::before,
3
+ .react-datepicker__year-read-view--down-arrow,
4
+ .react-datepicker__month-read-view--down-arrow,
5
+ .react-datepicker__month-year-read-view--down-arrow {
6
+ border-color: #ccc;
7
+ border-style: solid;
8
+ border-width: 3px 3px 0 0;
9
+ content: "";
10
+ display: block;
11
+ height: 9px;
12
+ position: absolute;
13
+ top: 6px;
14
+ width: 9px;
15
+ }
16
+ .react-datepicker-wrapper {
17
+ display: inline-block;
18
+ padding: 0;
19
+ border: 0;
20
+ width: 100%;
21
+ }
22
+
23
+ .react-datepicker {
24
+ font-family: "Helvetica Neue", helvetica, arial, sans-serif;
25
+ font-size: 0.8rem;
26
+ background-color: #fff;
27
+ color: #000;
28
+ border: 1px solid #aeaeae;
29
+ border-radius: 0.3rem;
30
+ display: inline-block;
31
+ position: relative;
32
+ line-height: initial;
33
+ }
34
+
35
+ .react-datepicker--time-only .react-datepicker__time-container {
36
+ border-left: 0;
37
+ }
38
+ .react-datepicker--time-only .react-datepicker__time,
39
+ .react-datepicker--time-only .react-datepicker__time-box {
40
+ border-bottom-left-radius: 0.3rem;
41
+ border-bottom-right-radius: 0.3rem;
42
+ }
43
+
44
+ .react-datepicker-popper {
45
+ z-index: 1;
46
+ line-height: 0;
47
+ }
48
+ .react-datepicker-popper .react-datepicker__triangle {
49
+ stroke: #aeaeae;
50
+ }
51
+ .react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle {
52
+ fill: #f0f0f0;
53
+ color: #f0f0f0;
54
+ }
55
+ .react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle {
56
+ fill: #fff;
57
+ color: #fff;
58
+ }
59
+
60
+ .react-datepicker__header {
61
+ text-align: center;
62
+ background-color: #f0f0f0;
63
+ border-bottom: 1px solid #aeaeae;
64
+ border-top-left-radius: 0.3rem;
65
+ padding: 8px 0;
66
+ position: relative;
67
+ }
68
+ .react-datepicker__header--time {
69
+ padding-bottom: 8px;
70
+ padding-left: 5px;
71
+ padding-right: 5px;
72
+ }
73
+ .react-datepicker__header--time:not(.react-datepicker__header--time--only) {
74
+ border-top-left-radius: 0;
75
+ }
76
+ .react-datepicker__header:not(.react-datepicker__header--has-time-select) {
77
+ border-top-right-radius: 0.3rem;
78
+ }
79
+
80
+ .react-datepicker__year-dropdown-container--select,
81
+ .react-datepicker__month-dropdown-container--select,
82
+ .react-datepicker__month-year-dropdown-container--select,
83
+ .react-datepicker__year-dropdown-container--scroll,
84
+ .react-datepicker__month-dropdown-container--scroll,
85
+ .react-datepicker__month-year-dropdown-container--scroll {
86
+ display: inline-block;
87
+ margin: 0 15px;
88
+ }
89
+
90
+ .react-datepicker__current-month,
91
+ .react-datepicker-time__header,
92
+ .react-datepicker-year-header {
93
+ margin-top: 0;
94
+ color: #000;
95
+ font-weight: bold;
96
+ font-size: 0.944rem;
97
+ }
98
+
99
+ h2.react-datepicker__current-month {
100
+ padding: 0;
101
+ margin: 0;
102
+ }
103
+
104
+ .react-datepicker-time__header {
105
+ text-overflow: ellipsis;
106
+ white-space: nowrap;
107
+ overflow: hidden;
108
+ }
109
+
110
+ .react-datepicker__navigation {
111
+ align-items: center;
112
+ background: none;
113
+ display: flex;
114
+ justify-content: center;
115
+ text-align: center;
116
+ cursor: pointer;
117
+ position: absolute;
118
+ top: 2px;
119
+ padding: 0;
120
+ border: none;
121
+ z-index: 1;
122
+ height: 32px;
123
+ width: 32px;
124
+ text-indent: -999em;
125
+ overflow: hidden;
126
+ }
127
+ .react-datepicker__navigation--previous {
128
+ left: 2px;
129
+ }
130
+ .react-datepicker__navigation--next {
131
+ right: 2px;
132
+ }
133
+ .react-datepicker__navigation--next--with-time:not(
134
+ .react-datepicker__navigation--next--with-today-button
135
+ ) {
136
+ right: 85px;
137
+ }
138
+ .react-datepicker__navigation--years {
139
+ position: relative;
140
+ top: 0;
141
+ display: block;
142
+ margin-left: auto;
143
+ margin-right: auto;
144
+ }
145
+ .react-datepicker__navigation--years-previous {
146
+ top: 4px;
147
+ }
148
+ .react-datepicker__navigation--years-upcoming {
149
+ top: -4px;
150
+ }
151
+ .react-datepicker__navigation:hover *::before {
152
+ border-color: rgb(165.75, 165.75, 165.75);
153
+ }
154
+
155
+ .react-datepicker__navigation-icon {
156
+ position: relative;
157
+ top: -1px;
158
+ font-size: 20px;
159
+ width: 0;
160
+ }
161
+ .react-datepicker__navigation-icon--next {
162
+ left: -2px;
163
+ }
164
+ .react-datepicker__navigation-icon--next::before {
165
+ transform: rotate(45deg);
166
+ left: -7px;
167
+ }
168
+ .react-datepicker__navigation-icon--previous {
169
+ right: -2px;
170
+ }
171
+ .react-datepicker__navigation-icon--previous::before {
172
+ transform: rotate(225deg);
173
+ right: -7px;
174
+ }
175
+
176
+ .react-datepicker__month-container {
177
+ float: left;
178
+ }
179
+
180
+ .react-datepicker__year {
181
+ margin: 0.4rem;
182
+ text-align: center;
183
+ }
184
+ .react-datepicker__year-wrapper {
185
+ display: flex;
186
+ flex-wrap: wrap;
187
+ max-width: 180px;
188
+ }
189
+ .react-datepicker__year .react-datepicker__year-text {
190
+ display: inline-block;
191
+ width: 4rem;
192
+ margin: 2px;
193
+ }
194
+
195
+ .react-datepicker__month {
196
+ margin: 0.4rem;
197
+ text-align: center;
198
+ }
199
+ .react-datepicker__month .react-datepicker__month-text,
200
+ .react-datepicker__month .react-datepicker__quarter-text {
201
+ display: inline-block;
202
+ width: 4rem;
203
+ margin: 2px;
204
+ }
205
+
206
+ .react-datepicker__input-time-container {
207
+ clear: both;
208
+ width: 100%;
209
+ float: left;
210
+ margin: 5px 0 10px 15px;
211
+ text-align: left;
212
+ }
213
+ .react-datepicker__input-time-container .react-datepicker-time__caption {
214
+ display: inline-block;
215
+ }
216
+ .react-datepicker__input-time-container
217
+ .react-datepicker-time__input-container {
218
+ display: inline-block;
219
+ }
220
+ .react-datepicker__input-time-container
221
+ .react-datepicker-time__input-container
222
+ .react-datepicker-time__input {
223
+ display: inline-block;
224
+ margin-left: 10px;
225
+ }
226
+ .react-datepicker__input-time-container
227
+ .react-datepicker-time__input-container
228
+ .react-datepicker-time__input
229
+ input {
230
+ width: auto;
231
+ }
232
+ .react-datepicker__input-time-container
233
+ .react-datepicker-time__input-container
234
+ .react-datepicker-time__input
235
+ input[type="time"]::-webkit-inner-spin-button,
236
+ .react-datepicker__input-time-container
237
+ .react-datepicker-time__input-container
238
+ .react-datepicker-time__input
239
+ input[type="time"]::-webkit-outer-spin-button {
240
+ -webkit-appearance: none;
241
+ margin: 0;
242
+ }
243
+ .react-datepicker__input-time-container
244
+ .react-datepicker-time__input-container
245
+ .react-datepicker-time__input
246
+ input[type="time"] {
247
+ -moz-appearance: textfield;
248
+ }
249
+ .react-datepicker__input-time-container
250
+ .react-datepicker-time__input-container
251
+ .react-datepicker-time__delimiter {
252
+ margin-left: 5px;
253
+ display: inline-block;
254
+ }
255
+
256
+ .react-datepicker__time-container {
257
+ float: right;
258
+ border-left: 1px solid #aeaeae;
259
+ width: 85px;
260
+ }
261
+ .react-datepicker__time-container--with-today-button {
262
+ display: inline;
263
+ border: 1px solid #aeaeae;
264
+ border-radius: 0.3rem;
265
+ position: absolute;
266
+ right: -87px;
267
+ top: 0;
268
+ }
269
+ .react-datepicker__time-container .react-datepicker__time {
270
+ position: relative;
271
+ background: white;
272
+ border-bottom-right-radius: 0.3rem;
273
+ }
274
+ .react-datepicker__time-container
275
+ .react-datepicker__time
276
+ .react-datepicker__time-box {
277
+ width: 85px;
278
+ overflow-x: hidden;
279
+ margin: 0 auto;
280
+ text-align: center;
281
+ border-bottom-right-radius: 0.3rem;
282
+ }
283
+ .react-datepicker__time-container
284
+ .react-datepicker__time
285
+ .react-datepicker__time-box
286
+ ul.react-datepicker__time-list {
287
+ list-style: none;
288
+ margin: 0;
289
+ height: calc(195px + 1.7rem / 2);
290
+ overflow-y: scroll;
291
+ padding-right: 0;
292
+ padding-left: 0;
293
+ width: 100%;
294
+ box-sizing: content-box;
295
+ }
296
+ .react-datepicker__time-container
297
+ .react-datepicker__time
298
+ .react-datepicker__time-box
299
+ ul.react-datepicker__time-list
300
+ li.react-datepicker__time-list-item {
301
+ height: 30px;
302
+ padding: 5px 10px;
303
+ white-space: nowrap;
304
+ }
305
+ .react-datepicker__time-container
306
+ .react-datepicker__time
307
+ .react-datepicker__time-box
308
+ ul.react-datepicker__time-list
309
+ li.react-datepicker__time-list-item:hover {
310
+ cursor: pointer;
311
+ background-color: #f0f0f0;
312
+ }
313
+ .react-datepicker__time-container
314
+ .react-datepicker__time
315
+ .react-datepicker__time-box
316
+ ul.react-datepicker__time-list
317
+ li.react-datepicker__time-list-item--selected {
318
+ background-color: #216ba5;
319
+ color: white;
320
+ font-weight: bold;
321
+ }
322
+ .react-datepicker__time-container
323
+ .react-datepicker__time
324
+ .react-datepicker__time-box
325
+ ul.react-datepicker__time-list
326
+ li.react-datepicker__time-list-item--selected:hover {
327
+ background-color: #216ba5;
328
+ }
329
+ .react-datepicker__time-container
330
+ .react-datepicker__time
331
+ .react-datepicker__time-box
332
+ ul.react-datepicker__time-list
333
+ li.react-datepicker__time-list-item--disabled {
334
+ color: #ccc;
335
+ }
336
+ .react-datepicker__time-container
337
+ .react-datepicker__time
338
+ .react-datepicker__time-box
339
+ ul.react-datepicker__time-list
340
+ li.react-datepicker__time-list-item--disabled:hover {
341
+ cursor: default;
342
+ background-color: transparent;
343
+ }
344
+
345
+ .react-datepicker__week-number {
346
+ color: #ccc;
347
+ display: inline-block;
348
+ width: 1.7rem;
349
+ line-height: 1.7rem;
350
+ text-align: center;
351
+ margin: 0.166rem;
352
+ }
353
+ .react-datepicker__week-number.react-datepicker__week-number--clickable {
354
+ cursor: pointer;
355
+ }
356
+ .react-datepicker__week-number.react-datepicker__week-number--clickable:not(
357
+ .react-datepicker__week-number--selected
358
+ ):hover {
359
+ border-radius: 0.3rem;
360
+ background-color: #f0f0f0;
361
+ }
362
+ .react-datepicker__week-number--selected {
363
+ border-radius: 0.3rem;
364
+ background-color: #216ba5;
365
+ color: #fff;
366
+ }
367
+ .react-datepicker__week-number--selected:hover {
368
+ background-color: rgb(28.75, 93.2196969697, 143.75);
369
+ }
370
+
371
+ .react-datepicker__day-names {
372
+ white-space: nowrap;
373
+ margin-bottom: -8px;
374
+ }
375
+
376
+ .react-datepicker__week {
377
+ white-space: nowrap;
378
+ }
379
+
380
+ .react-datepicker__day-name,
381
+ .react-datepicker__day,
382
+ .react-datepicker__time-name {
383
+ color: #000;
384
+ display: inline-block;
385
+ width: 1.7rem;
386
+ line-height: 1.7rem;
387
+ text-align: center;
388
+ margin: 0.166rem;
389
+ }
390
+
391
+ .react-datepicker__day,
392
+ .react-datepicker__month-text,
393
+ .react-datepicker__quarter-text,
394
+ .react-datepicker__year-text {
395
+ cursor: pointer;
396
+ }
397
+ .react-datepicker__day:not([aria-disabled="true"]):hover,
398
+ .react-datepicker__month-text:not([aria-disabled="true"]):hover,
399
+ .react-datepicker__quarter-text:not([aria-disabled="true"]):hover,
400
+ .react-datepicker__year-text:not([aria-disabled="true"]):hover {
401
+ border-radius: 0.3rem;
402
+ background-color: #f0f0f0;
403
+ }
404
+ .react-datepicker__day--today,
405
+ .react-datepicker__month-text--today,
406
+ .react-datepicker__quarter-text--today,
407
+ .react-datepicker__year-text--today {
408
+ font-weight: bold;
409
+ }
410
+ .react-datepicker__day--highlighted,
411
+ .react-datepicker__month-text--highlighted,
412
+ .react-datepicker__quarter-text--highlighted,
413
+ .react-datepicker__year-text--highlighted {
414
+ border-radius: 0.3rem;
415
+ background-color: #3dcc4a;
416
+ color: #fff;
417
+ }
418
+ .react-datepicker__day--highlighted:not([aria-disabled="true"]):hover,
419
+ .react-datepicker__month-text--highlighted:not([aria-disabled="true"]):hover,
420
+ .react-datepicker__quarter-text--highlighted:not([aria-disabled="true"]):hover,
421
+ .react-datepicker__year-text--highlighted:not([aria-disabled="true"]):hover {
422
+ background-color: rgb(49.8551020408, 189.6448979592, 62.5632653061);
423
+ }
424
+ .react-datepicker__day--highlighted-custom-1,
425
+ .react-datepicker__month-text--highlighted-custom-1,
426
+ .react-datepicker__quarter-text--highlighted-custom-1,
427
+ .react-datepicker__year-text--highlighted-custom-1 {
428
+ color: magenta;
429
+ }
430
+ .react-datepicker__day--highlighted-custom-2,
431
+ .react-datepicker__month-text--highlighted-custom-2,
432
+ .react-datepicker__quarter-text--highlighted-custom-2,
433
+ .react-datepicker__year-text--highlighted-custom-2 {
434
+ color: green;
435
+ }
436
+ .react-datepicker__day--holidays,
437
+ .react-datepicker__month-text--holidays,
438
+ .react-datepicker__quarter-text--holidays,
439
+ .react-datepicker__year-text--holidays {
440
+ position: relative;
441
+ border-radius: 0.3rem;
442
+ background-color: #ff6803;
443
+ color: #fff;
444
+ }
445
+ .react-datepicker__day--holidays .overlay,
446
+ .react-datepicker__month-text--holidays .overlay,
447
+ .react-datepicker__quarter-text--holidays .overlay,
448
+ .react-datepicker__year-text--holidays .overlay {
449
+ position: absolute;
450
+ bottom: 100%;
451
+ left: 50%;
452
+ transform: translateX(-50%);
453
+ background-color: #333;
454
+ color: #fff;
455
+ padding: 4px;
456
+ border-radius: 4px;
457
+ white-space: nowrap;
458
+ visibility: hidden;
459
+ opacity: 0;
460
+ transition: visibility 0s, opacity 0.3s ease-in-out;
461
+ }
462
+ .react-datepicker__day--holidays:not([aria-disabled="true"]):hover,
463
+ .react-datepicker__month-text--holidays:not([aria-disabled="true"]):hover,
464
+ .react-datepicker__quarter-text--holidays:not([aria-disabled="true"]):hover,
465
+ .react-datepicker__year-text--holidays:not([aria-disabled="true"]):hover {
466
+ background-color: rgb(207, 82.9642857143, 0);
467
+ }
468
+ .react-datepicker__day--holidays:hover .overlay,
469
+ .react-datepicker__month-text--holidays:hover .overlay,
470
+ .react-datepicker__quarter-text--holidays:hover .overlay,
471
+ .react-datepicker__year-text--holidays:hover .overlay {
472
+ visibility: visible;
473
+ opacity: 1;
474
+ }
475
+ .react-datepicker__day--selected,
476
+ .react-datepicker__day--in-selecting-range,
477
+ .react-datepicker__day--in-range,
478
+ .react-datepicker__month-text--selected,
479
+ .react-datepicker__month-text--in-selecting-range,
480
+ .react-datepicker__month-text--in-range,
481
+ .react-datepicker__quarter-text--selected,
482
+ .react-datepicker__quarter-text--in-selecting-range,
483
+ .react-datepicker__quarter-text--in-range,
484
+ .react-datepicker__year-text--selected,
485
+ .react-datepicker__year-text--in-selecting-range,
486
+ .react-datepicker__year-text--in-range {
487
+ border-radius: 0.3rem;
488
+ background-color: #216ba5;
489
+ color: #fff;
490
+ }
491
+ .react-datepicker__day--selected:not([aria-disabled="true"]):hover,
492
+ .react-datepicker__day--in-selecting-range:not([aria-disabled="true"]):hover,
493
+ .react-datepicker__day--in-range:not([aria-disabled="true"]):hover,
494
+ .react-datepicker__month-text--selected:not([aria-disabled="true"]):hover,
495
+ .react-datepicker__month-text--in-selecting-range:not(
496
+ [aria-disabled="true"]
497
+ ):hover,
498
+ .react-datepicker__month-text--in-range:not([aria-disabled="true"]):hover,
499
+ .react-datepicker__quarter-text--selected:not([aria-disabled="true"]):hover,
500
+ .react-datepicker__quarter-text--in-selecting-range:not(
501
+ [aria-disabled="true"]
502
+ ):hover,
503
+ .react-datepicker__quarter-text--in-range:not([aria-disabled="true"]):hover,
504
+ .react-datepicker__year-text--selected:not([aria-disabled="true"]):hover,
505
+ .react-datepicker__year-text--in-selecting-range:not(
506
+ [aria-disabled="true"]
507
+ ):hover,
508
+ .react-datepicker__year-text--in-range:not([aria-disabled="true"]):hover {
509
+ background-color: rgb(28.75, 93.2196969697, 143.75);
510
+ }
511
+ .react-datepicker__day--keyboard-selected,
512
+ .react-datepicker__month-text--keyboard-selected,
513
+ .react-datepicker__quarter-text--keyboard-selected,
514
+ .react-datepicker__year-text--keyboard-selected {
515
+ border-radius: 0.3rem;
516
+ background-color: rgb(186.25, 217.0833333333, 241.25);
517
+ color: rgb(0, 0, 0);
518
+ }
519
+ .react-datepicker__day--keyboard-selected:not([aria-disabled="true"]):hover,
520
+ .react-datepicker__month-text--keyboard-selected:not(
521
+ [aria-disabled="true"]
522
+ ):hover,
523
+ .react-datepicker__quarter-text--keyboard-selected:not(
524
+ [aria-disabled="true"]
525
+ ):hover,
526
+ .react-datepicker__year-text--keyboard-selected:not(
527
+ [aria-disabled="true"]
528
+ ):hover {
529
+ background-color: rgb(28.75, 93.2196969697, 143.75);
530
+ }
531
+ .react-datepicker__day--in-selecting-range:not(
532
+ .react-datepicker__day--in-range,
533
+ .react-datepicker__month-text--in-range,
534
+ .react-datepicker__quarter-text--in-range,
535
+ .react-datepicker__year-text--in-range
536
+ ),
537
+ .react-datepicker__month-text--in-selecting-range:not(
538
+ .react-datepicker__day--in-range,
539
+ .react-datepicker__month-text--in-range,
540
+ .react-datepicker__quarter-text--in-range,
541
+ .react-datepicker__year-text--in-range
542
+ ),
543
+ .react-datepicker__quarter-text--in-selecting-range:not(
544
+ .react-datepicker__day--in-range,
545
+ .react-datepicker__month-text--in-range,
546
+ .react-datepicker__quarter-text--in-range,
547
+ .react-datepicker__year-text--in-range
548
+ ),
549
+ .react-datepicker__year-text--in-selecting-range:not(
550
+ .react-datepicker__day--in-range,
551
+ .react-datepicker__month-text--in-range,
552
+ .react-datepicker__quarter-text--in-range,
553
+ .react-datepicker__year-text--in-range
554
+ ) {
555
+ background-color: rgba(33, 107, 165, 0.5);
556
+ }
557
+ .react-datepicker__month--selecting-range
558
+ .react-datepicker__day--in-range:not(
559
+ .react-datepicker__day--in-selecting-range,
560
+ .react-datepicker__month-text--in-selecting-range,
561
+ .react-datepicker__quarter-text--in-selecting-range,
562
+ .react-datepicker__year-text--in-selecting-range
563
+ ),
564
+ .react-datepicker__year--selecting-range
565
+ .react-datepicker__day--in-range:not(
566
+ .react-datepicker__day--in-selecting-range,
567
+ .react-datepicker__month-text--in-selecting-range,
568
+ .react-datepicker__quarter-text--in-selecting-range,
569
+ .react-datepicker__year-text--in-selecting-range
570
+ ),
571
+ .react-datepicker__month--selecting-range
572
+ .react-datepicker__month-text--in-range:not(
573
+ .react-datepicker__day--in-selecting-range,
574
+ .react-datepicker__month-text--in-selecting-range,
575
+ .react-datepicker__quarter-text--in-selecting-range,
576
+ .react-datepicker__year-text--in-selecting-range
577
+ ),
578
+ .react-datepicker__year--selecting-range
579
+ .react-datepicker__month-text--in-range:not(
580
+ .react-datepicker__day--in-selecting-range,
581
+ .react-datepicker__month-text--in-selecting-range,
582
+ .react-datepicker__quarter-text--in-selecting-range,
583
+ .react-datepicker__year-text--in-selecting-range
584
+ ),
585
+ .react-datepicker__month--selecting-range
586
+ .react-datepicker__quarter-text--in-range:not(
587
+ .react-datepicker__day--in-selecting-range,
588
+ .react-datepicker__month-text--in-selecting-range,
589
+ .react-datepicker__quarter-text--in-selecting-range,
590
+ .react-datepicker__year-text--in-selecting-range
591
+ ),
592
+ .react-datepicker__year--selecting-range
593
+ .react-datepicker__quarter-text--in-range:not(
594
+ .react-datepicker__day--in-selecting-range,
595
+ .react-datepicker__month-text--in-selecting-range,
596
+ .react-datepicker__quarter-text--in-selecting-range,
597
+ .react-datepicker__year-text--in-selecting-range
598
+ ),
599
+ .react-datepicker__month--selecting-range
600
+ .react-datepicker__year-text--in-range:not(
601
+ .react-datepicker__day--in-selecting-range,
602
+ .react-datepicker__month-text--in-selecting-range,
603
+ .react-datepicker__quarter-text--in-selecting-range,
604
+ .react-datepicker__year-text--in-selecting-range
605
+ ),
606
+ .react-datepicker__year--selecting-range
607
+ .react-datepicker__year-text--in-range:not(
608
+ .react-datepicker__day--in-selecting-range,
609
+ .react-datepicker__month-text--in-selecting-range,
610
+ .react-datepicker__quarter-text--in-selecting-range,
611
+ .react-datepicker__year-text--in-selecting-range
612
+ ) {
613
+ background-color: #f0f0f0;
614
+ color: #000;
615
+ }
616
+ .react-datepicker__day--disabled,
617
+ .react-datepicker__month-text--disabled,
618
+ .react-datepicker__quarter-text--disabled,
619
+ .react-datepicker__year-text--disabled {
620
+ cursor: default;
621
+ color: #ccc;
622
+ }
623
+ .react-datepicker__day--disabled .overlay,
624
+ .react-datepicker__month-text--disabled .overlay,
625
+ .react-datepicker__quarter-text--disabled .overlay,
626
+ .react-datepicker__year-text--disabled .overlay {
627
+ position: absolute;
628
+ bottom: 70%;
629
+ left: 50%;
630
+ transform: translateX(-50%);
631
+ background-color: #333;
632
+ color: #fff;
633
+ padding: 4px;
634
+ border-radius: 4px;
635
+ white-space: nowrap;
636
+ visibility: hidden;
637
+ opacity: 0;
638
+ transition: visibility 0s, opacity 0.3s ease-in-out;
639
+ }
640
+
641
+ .react-datepicker__input-container {
642
+ position: relative;
643
+ display: inline-block;
644
+ width: 100%;
645
+ }
646
+ .react-datepicker__input-container .react-datepicker__calendar-icon {
647
+ position: absolute;
648
+ padding: 0.5rem;
649
+ box-sizing: content-box;
650
+ }
651
+
652
+ .react-datepicker__view-calendar-icon input {
653
+ padding: 6px 10px 5px 25px;
654
+ }
655
+
656
+ .react-datepicker__year-read-view,
657
+ .react-datepicker__month-read-view,
658
+ .react-datepicker__month-year-read-view {
659
+ border: 1px solid transparent;
660
+ border-radius: 0.3rem;
661
+ position: relative;
662
+ }
663
+ .react-datepicker__year-read-view:hover,
664
+ .react-datepicker__month-read-view:hover,
665
+ .react-datepicker__month-year-read-view:hover {
666
+ cursor: pointer;
667
+ }
668
+ .react-datepicker__year-read-view:hover
669
+ .react-datepicker__year-read-view--down-arrow,
670
+ .react-datepicker__year-read-view:hover
671
+ .react-datepicker__month-read-view--down-arrow,
672
+ .react-datepicker__month-read-view:hover
673
+ .react-datepicker__year-read-view--down-arrow,
674
+ .react-datepicker__month-read-view:hover
675
+ .react-datepicker__month-read-view--down-arrow,
676
+ .react-datepicker__month-year-read-view:hover
677
+ .react-datepicker__year-read-view--down-arrow,
678
+ .react-datepicker__month-year-read-view:hover
679
+ .react-datepicker__month-read-view--down-arrow {
680
+ border-top-color: rgb(178.5, 178.5, 178.5);
681
+ }
682
+ .react-datepicker__year-read-view--down-arrow,
683
+ .react-datepicker__month-read-view--down-arrow,
684
+ .react-datepicker__month-year-read-view--down-arrow {
685
+ transform: rotate(135deg);
686
+ right: -16px;
687
+ top: 0;
688
+ }
689
+
690
+ .react-datepicker__year-dropdown,
691
+ .react-datepicker__month-dropdown,
692
+ .react-datepicker__month-year-dropdown {
693
+ background-color: #f0f0f0;
694
+ position: absolute;
695
+ width: 50%;
696
+ left: 25%;
697
+ top: 30px;
698
+ z-index: 1;
699
+ text-align: center;
700
+ border-radius: 0.3rem;
701
+ border: 1px solid #aeaeae;
702
+ }
703
+ .react-datepicker__year-dropdown:hover,
704
+ .react-datepicker__month-dropdown:hover,
705
+ .react-datepicker__month-year-dropdown:hover {
706
+ cursor: pointer;
707
+ }
708
+ .react-datepicker__year-dropdown--scrollable,
709
+ .react-datepicker__month-dropdown--scrollable,
710
+ .react-datepicker__month-year-dropdown--scrollable {
711
+ height: 150px;
712
+ overflow-y: scroll;
713
+ }
714
+
715
+ .react-datepicker__year-option,
716
+ .react-datepicker__month-option,
717
+ .react-datepicker__month-year-option {
718
+ line-height: 20px;
719
+ width: 100%;
720
+ display: block;
721
+ margin-left: auto;
722
+ margin-right: auto;
723
+ }
724
+ .react-datepicker__year-option:first-of-type,
725
+ .react-datepicker__month-option:first-of-type,
726
+ .react-datepicker__month-year-option:first-of-type {
727
+ border-top-left-radius: 0.3rem;
728
+ border-top-right-radius: 0.3rem;
729
+ }
730
+ .react-datepicker__year-option:last-of-type,
731
+ .react-datepicker__month-option:last-of-type,
732
+ .react-datepicker__month-year-option:last-of-type {
733
+ -webkit-user-select: none;
734
+ -moz-user-select: none;
735
+ -ms-user-select: none;
736
+ user-select: none;
737
+ border-bottom-left-radius: 0.3rem;
738
+ border-bottom-right-radius: 0.3rem;
739
+ }
740
+ .react-datepicker__year-option:hover,
741
+ .react-datepicker__month-option:hover,
742
+ .react-datepicker__month-year-option:hover {
743
+ background-color: #ccc;
744
+ }
745
+ .react-datepicker__year-option:hover
746
+ .react-datepicker__navigation--years-upcoming,
747
+ .react-datepicker__month-option:hover
748
+ .react-datepicker__navigation--years-upcoming,
749
+ .react-datepicker__month-year-option:hover
750
+ .react-datepicker__navigation--years-upcoming {
751
+ border-bottom-color: rgb(178.5, 178.5, 178.5);
752
+ }
753
+ .react-datepicker__year-option:hover
754
+ .react-datepicker__navigation--years-previous,
755
+ .react-datepicker__month-option:hover
756
+ .react-datepicker__navigation--years-previous,
757
+ .react-datepicker__month-year-option:hover
758
+ .react-datepicker__navigation--years-previous {
759
+ border-top-color: rgb(178.5, 178.5, 178.5);
760
+ }
761
+ .react-datepicker__year-option--selected,
762
+ .react-datepicker__month-option--selected,
763
+ .react-datepicker__month-year-option--selected {
764
+ position: absolute;
765
+ left: 15px;
766
+ }
767
+
768
+ .react-datepicker__close-icon {
769
+ cursor: pointer;
770
+ background-color: transparent;
771
+ border: 0;
772
+ outline: 0;
773
+ padding: 0 6px 0 0;
774
+ position: absolute;
775
+ top: 0;
776
+ right: 0;
777
+ height: 100%;
778
+ display: table-cell;
779
+ vertical-align: middle;
780
+ }
781
+ .react-datepicker__close-icon::after {
782
+ cursor: pointer;
783
+ background-color: #216ba5;
784
+ color: #fff;
785
+ border-radius: 50%;
786
+ height: 16px;
787
+ width: 16px;
788
+ padding: 2px;
789
+ font-size: 12px;
790
+ line-height: 1;
791
+ text-align: center;
792
+ display: table-cell;
793
+ vertical-align: middle;
794
+ content: "×";
795
+ }
796
+ .react-datepicker__close-icon--disabled {
797
+ cursor: default;
798
+ }
799
+ .react-datepicker__close-icon--disabled::after {
800
+ cursor: default;
801
+ background-color: #ccc;
802
+ }
803
+
804
+ .react-datepicker__today-button {
805
+ background: #f0f0f0;
806
+ border-top: 1px solid #aeaeae;
807
+ cursor: pointer;
808
+ text-align: center;
809
+ font-weight: bold;
810
+ padding: 5px 0;
811
+ clear: left;
812
+ }
813
+
814
+ .react-datepicker__portal {
815
+ position: fixed;
816
+ width: 100vw;
817
+ height: 100vh;
818
+ background-color: rgba(0, 0, 0, 0.8);
819
+ left: 0;
820
+ top: 0;
821
+ justify-content: center;
822
+ align-items: center;
823
+ display: flex;
824
+ z-index: 2147483647;
825
+ }
826
+ .react-datepicker__portal .react-datepicker__day-name,
827
+ .react-datepicker__portal .react-datepicker__day,
828
+ .react-datepicker__portal .react-datepicker__time-name {
829
+ width: 3rem;
830
+ line-height: 3rem;
831
+ }
832
+ @media (max-width: 400px), (max-height: 550px) {
833
+ .react-datepicker__portal .react-datepicker__day-name,
834
+ .react-datepicker__portal .react-datepicker__day,
835
+ .react-datepicker__portal .react-datepicker__time-name {
836
+ width: 2rem;
837
+ line-height: 2rem;
838
+ }
839
+ }
840
+ .react-datepicker__portal .react-datepicker__current-month,
841
+ .react-datepicker__portal .react-datepicker-time__header {
842
+ font-size: 1.44rem;
843
+ }
844
+
845
+ .react-datepicker__children-container {
846
+ width: 13.8rem;
847
+ margin: 0.4rem;
848
+ padding-right: 0.2rem;
849
+ padding-left: 0.2rem;
850
+ height: auto;
851
+ }
852
+
853
+ .react-datepicker__aria-live {
854
+ position: absolute;
855
+ clip-path: circle(0);
856
+ border: 0;
857
+ height: 1px;
858
+ margin: -1px;
859
+ overflow: hidden;
860
+ padding: 0;
861
+ width: 1px;
862
+ white-space: nowrap;
863
+ }
864
+
865
+ .react-datepicker__calendar-icon {
866
+ width: 1em;
867
+ height: 1em;
868
+ vertical-align: -0.125em;
869
+ }