dara-components 1.8.5__py3-none-any.whl → 1.22.1__py3-none-any.whl

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 (92) hide show
  1. dara/components/__init__.py +18 -0
  2. dara/components/_assets/__init__.py +30 -0
  3. dara/components/_assets/auto_js/.gitkeep +0 -0
  4. dara/components/_assets/auto_js/dara.components.css +1494 -0
  5. dara/components/_assets/auto_js/dara.components.umd.js +182837 -0
  6. dara/components/_assets/common/bokeh-3.1.1.min.js +690 -0
  7. dara/components/_assets/common/bokeh-api-3.1.1.min.js +60 -0
  8. dara/components/_assets/common/bokeh-gl-3.1.1.min.js +67 -0
  9. dara/components/_assets/common/bokeh-mathjax-3.1.1.min.js +329 -0
  10. dara/components/_assets/common/bokeh-tables-3.1.1.min.js +132 -0
  11. dara/components/_assets/common/bokeh-widgets-3.1.1.min.js +129 -0
  12. dara/components/_assets/common/pixi-filters.min.js +17 -0
  13. dara/components/_assets/common/pixi.min.js +2214 -0
  14. dara/components/_assets/common/pixi_viewport.js +1 -0
  15. dara/components/_assets/common/plotly.min.js +8 -0
  16. dara/components/common/__init__.py +11 -2
  17. dara/components/common/accordion.py +20 -26
  18. dara/components/common/anchor.py +9 -10
  19. dara/components/common/base_component.py +23 -36
  20. dara/components/common/bullet_list.py +1 -3
  21. dara/components/common/button.py +35 -26
  22. dara/components/common/button_bar.py +25 -20
  23. dara/components/common/card.py +4 -5
  24. dara/components/common/carousel.py +9 -9
  25. dara/components/common/checkbox_group.py +26 -19
  26. dara/components/common/code.py +8 -5
  27. dara/components/common/component_select_list.py +9 -13
  28. dara/components/common/datepicker.py +16 -16
  29. dara/components/common/dropdown_menu.py +161 -0
  30. dara/components/common/dropzone.py +42 -33
  31. dara/components/common/form.py +5 -7
  32. dara/components/common/form_page.py +4 -6
  33. dara/components/common/grid.py +21 -18
  34. dara/components/common/heading.py +5 -4
  35. dara/components/common/icon.py +1 -3
  36. dara/components/common/if_cmp.py +23 -17
  37. dara/components/common/image.py +2 -2
  38. dara/components/common/input.py +9 -11
  39. dara/components/common/label.py +13 -14
  40. dara/components/common/markdown.py +3 -5
  41. dara/components/common/modal.py +2 -2
  42. dara/components/common/overlay.py +8 -14
  43. dara/components/common/paragraph.py +2 -2
  44. dara/components/common/progress_bar.py +6 -8
  45. dara/components/common/radio_group.py +38 -21
  46. dara/components/common/select.py +33 -30
  47. dara/components/common/slider.py +74 -29
  48. dara/components/common/spacer.py +4 -6
  49. dara/components/common/stack.py +7 -4
  50. dara/components/common/switch.py +6 -8
  51. dara/components/common/tabbed_card.py +8 -11
  52. dara/components/common/table.py +224 -73
  53. dara/components/common/text.py +7 -9
  54. dara/components/common/textarea.py +7 -7
  55. dara/components/common/time_utils.py +2 -5
  56. dara/components/common/tooltip.py +4 -6
  57. dara/components/common/utils.py +29 -35
  58. dara/components/graphs/__init__.py +1 -0
  59. dara/components/graphs/components/base_graph_component.py +34 -22
  60. dara/components/graphs/components/causal_graph_viewer.py +13 -15
  61. dara/components/graphs/components/edge_encoder.py +49 -26
  62. dara/components/graphs/components/node_hierarchy_builder.py +17 -16
  63. dara/components/graphs/definitions.py +27 -20
  64. dara/components/graphs/graph_layout.py +90 -53
  65. dara/components/plotting/__init__.py +2 -1
  66. dara/components/plotting/bokeh/bokeh.py +7 -10
  67. dara/components/plotting/bokeh/utils.py +5 -3
  68. dara/components/plotting/plotly/plotly.py +24 -19
  69. dara/components/plotting/plotly/themes.py +7 -5
  70. dara/components/smart/__init__.py +7 -1
  71. dara/components/smart/chat/chat.py +7 -8
  72. dara/components/smart/chat/config.py +1 -1
  73. dara/components/smart/chat/types.py +4 -6
  74. dara/components/smart/code_editor/code_editor.py +18 -4
  75. dara/components/smart/code_editor/util.py +11 -11
  76. dara/components/smart/data_slicer/__init__.py +4 -0
  77. dara/components/smart/data_slicer/data_slicer.py +14 -18
  78. dara/components/smart/data_slicer/data_slicer_modal.py +4 -6
  79. dara/components/smart/data_slicer/extension/data_slicer_filter.py +3 -4
  80. dara/components/smart/data_slicer/extension/filter_status_button.py +1 -3
  81. dara/components/smart/data_slicer/utils/core.py +23 -23
  82. dara/components/smart/data_slicer/utils/data_preview.py +1 -3
  83. dara/components/smart/data_slicer/utils/plotting.py +8 -6
  84. dara/components/smart/hierarchy.py +9 -10
  85. {dara_components-1.8.5.dist-info → dara_components-1.22.1.dist-info}/METADATA +7 -7
  86. dara_components-1.22.1.dist-info/RECORD +100 -0
  87. {dara_components-1.8.5.dist-info → dara_components-1.22.1.dist-info}/WHEEL +1 -1
  88. dara_components-1.22.1.dist-info/entry_points.txt +3 -0
  89. dara/components/umd/dara.components.umd.js +0 -396288
  90. dara/components/umd/style.css +0 -745
  91. dara_components-1.8.5.dist-info/RECORD +0 -86
  92. {dara_components-1.8.5.dist-info → dara_components-1.22.1.dist-info}/LICENSE +0 -0
@@ -1,745 +0,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: #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-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
- border-width: 8px;
29
- left: -8px;
30
- }
31
- .react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::before, .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::before {
32
- border-bottom-color: #aeaeae;
33
- }
34
-
35
- .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle {
36
- top: 0;
37
- margin-top: -8px;
38
- }
39
- .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::before, .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::after {
40
- border-top: none;
41
- border-bottom-color: #f0f0f0;
42
- }
43
- .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::after {
44
- top: 0;
45
- }
46
- .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle::before {
47
- top: -1px;
48
- border-bottom-color: #aeaeae;
49
- }
50
-
51
- .react-datepicker-popper[data-placement^=top] .react-datepicker__triangle {
52
- bottom: 0;
53
- margin-bottom: -8px;
54
- }
55
- .react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::before, .react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::after {
56
- border-bottom: none;
57
- border-top-color: #fff;
58
- }
59
- .react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::after {
60
- bottom: 0;
61
- }
62
- .react-datepicker-popper[data-placement^=top] .react-datepicker__triangle::before {
63
- bottom: -1px;
64
- border-top-color: #aeaeae;
65
- }
66
-
67
- .react-datepicker-wrapper {
68
- display: inline-block;
69
- padding: 0;
70
- border: 0;
71
- width: 100%;
72
- }
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: 1px solid #aeaeae;
80
- border-radius: 0.3rem;
81
- display: inline-block;
82
- position: relative;
83
- }
84
-
85
- .react-datepicker--time-only .react-datepicker__triangle {
86
- left: 35px;
87
- }
88
- .react-datepicker--time-only .react-datepicker__time-container {
89
- border-left: 0;
90
- }
91
- .react-datepicker--time-only .react-datepicker__time,
92
- .react-datepicker--time-only .react-datepicker__time-box {
93
- border-bottom-left-radius: 0.3rem;
94
- border-bottom-right-radius: 0.3rem;
95
- }
96
-
97
- .react-datepicker__triangle {
98
- position: absolute;
99
- left: 50px;
100
- }
101
-
102
- .react-datepicker-popper {
103
- z-index: 1;
104
- }
105
- .react-datepicker-popper[data-placement^=bottom] {
106
- padding-top: 10px;
107
- }
108
- .react-datepicker-popper[data-placement=bottom-end] .react-datepicker__triangle, .react-datepicker-popper[data-placement=top-end] .react-datepicker__triangle {
109
- left: auto;
110
- right: 50px;
111
- }
112
- .react-datepicker-popper[data-placement^=top] {
113
- padding-bottom: 10px;
114
- }
115
- .react-datepicker-popper[data-placement^=right] {
116
- padding-left: 8px;
117
- }
118
- .react-datepicker-popper[data-placement^=right] .react-datepicker__triangle {
119
- left: auto;
120
- right: 42px;
121
- }
122
- .react-datepicker-popper[data-placement^=left] {
123
- padding-right: 8px;
124
- }
125
- .react-datepicker-popper[data-placement^=left] .react-datepicker__triangle {
126
- left: 42px;
127
- right: auto;
128
- }
129
-
130
- .react-datepicker__header {
131
- text-align: center;
132
- background-color: #f0f0f0;
133
- border-bottom: 1px solid #aeaeae;
134
- border-top-left-radius: 0.3rem;
135
- padding: 8px 0;
136
- position: relative;
137
- }
138
- .react-datepicker__header--time {
139
- padding-bottom: 8px;
140
- padding-left: 5px;
141
- padding-right: 5px;
142
- }
143
- .react-datepicker__header--time:not(.react-datepicker__header--time--only) {
144
- border-top-left-radius: 0;
145
- }
146
- .react-datepicker__header:not(.react-datepicker__header--has-time-select) {
147
- border-top-right-radius: 0.3rem;
148
- }
149
-
150
- .react-datepicker__year-dropdown-container--select,
151
- .react-datepicker__month-dropdown-container--select,
152
- .react-datepicker__month-year-dropdown-container--select,
153
- .react-datepicker__year-dropdown-container--scroll,
154
- .react-datepicker__month-dropdown-container--scroll,
155
- .react-datepicker__month-year-dropdown-container--scroll {
156
- display: inline-block;
157
- margin: 0 2px;
158
- }
159
-
160
- .react-datepicker__current-month,
161
- .react-datepicker-time__header,
162
- .react-datepicker-year-header {
163
- margin-top: 0;
164
- color: #000;
165
- font-weight: bold;
166
- font-size: 0.944rem;
167
- }
168
-
169
- .react-datepicker-time__header {
170
- text-overflow: ellipsis;
171
- white-space: nowrap;
172
- overflow: hidden;
173
- }
174
-
175
- .react-datepicker__navigation {
176
- align-items: center;
177
- background: none;
178
- display: flex;
179
- justify-content: center;
180
- text-align: center;
181
- cursor: pointer;
182
- position: absolute;
183
- top: 2px;
184
- padding: 0;
185
- border: none;
186
- z-index: 1;
187
- height: 32px;
188
- width: 32px;
189
- text-indent: -999em;
190
- overflow: hidden;
191
- }
192
- .react-datepicker__navigation--previous {
193
- left: 2px;
194
- }
195
- .react-datepicker__navigation--next {
196
- right: 2px;
197
- }
198
- .react-datepicker__navigation--next--with-time:not(.react-datepicker__navigation--next--with-today-button) {
199
- right: 85px;
200
- }
201
- .react-datepicker__navigation--years {
202
- position: relative;
203
- top: 0;
204
- display: block;
205
- margin-left: auto;
206
- margin-right: auto;
207
- }
208
- .react-datepicker__navigation--years-previous {
209
- top: 4px;
210
- }
211
- .react-datepicker__navigation--years-upcoming {
212
- top: -4px;
213
- }
214
- .react-datepicker__navigation:hover *::before {
215
- border-color: #a6a6a6;
216
- }
217
-
218
- .react-datepicker__navigation-icon {
219
- position: relative;
220
- top: -1px;
221
- font-size: 20px;
222
- width: 0;
223
- }
224
- .react-datepicker__navigation-icon--next {
225
- left: -2px;
226
- }
227
- .react-datepicker__navigation-icon--next::before {
228
- transform: rotate(45deg);
229
- left: -7px;
230
- }
231
- .react-datepicker__navigation-icon--previous {
232
- right: -2px;
233
- }
234
- .react-datepicker__navigation-icon--previous::before {
235
- transform: rotate(225deg);
236
- right: -7px;
237
- }
238
-
239
- .react-datepicker__month-container {
240
- float: left;
241
- }
242
-
243
- .react-datepicker__year {
244
- margin: 0.4rem;
245
- text-align: center;
246
- }
247
- .react-datepicker__year-wrapper {
248
- display: flex;
249
- flex-wrap: wrap;
250
- max-width: 180px;
251
- }
252
- .react-datepicker__year .react-datepicker__year-text {
253
- display: inline-block;
254
- width: 4rem;
255
- margin: 2px;
256
- }
257
-
258
- .react-datepicker__month {
259
- margin: 0.4rem;
260
- text-align: center;
261
- }
262
- .react-datepicker__month .react-datepicker__month-text,
263
- .react-datepicker__month .react-datepicker__quarter-text {
264
- display: inline-block;
265
- width: 4rem;
266
- margin: 2px;
267
- }
268
-
269
- .react-datepicker__input-time-container {
270
- clear: both;
271
- width: 100%;
272
- float: left;
273
- margin: 5px 0 10px 15px;
274
- text-align: left;
275
- }
276
- .react-datepicker__input-time-container .react-datepicker-time__caption {
277
- display: inline-block;
278
- }
279
- .react-datepicker__input-time-container .react-datepicker-time__input-container {
280
- display: inline-block;
281
- }
282
- .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input {
283
- display: inline-block;
284
- margin-left: 10px;
285
- }
286
- .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input {
287
- width: auto;
288
- }
289
- .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time]::-webkit-inner-spin-button,
290
- .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time]::-webkit-outer-spin-button {
291
- -webkit-appearance: none;
292
- margin: 0;
293
- }
294
- .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time] {
295
- -moz-appearance: textfield;
296
- }
297
- .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__delimiter {
298
- margin-left: 5px;
299
- display: inline-block;
300
- }
301
-
302
- .react-datepicker__time-container {
303
- float: right;
304
- border-left: 1px solid #aeaeae;
305
- width: 85px;
306
- }
307
- .react-datepicker__time-container--with-today-button {
308
- display: inline;
309
- border: 1px solid #aeaeae;
310
- border-radius: 0.3rem;
311
- position: absolute;
312
- right: -72px;
313
- top: 0;
314
- }
315
- .react-datepicker__time-container .react-datepicker__time {
316
- position: relative;
317
- background: white;
318
- border-bottom-right-radius: 0.3rem;
319
- }
320
- .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box {
321
- width: 85px;
322
- overflow-x: hidden;
323
- margin: 0 auto;
324
- text-align: center;
325
- border-bottom-right-radius: 0.3rem;
326
- }
327
- .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list {
328
- list-style: none;
329
- margin: 0;
330
- height: calc(195px + (1.7rem / 2));
331
- overflow-y: scroll;
332
- padding-right: 0;
333
- padding-left: 0;
334
- width: 100%;
335
- box-sizing: content-box;
336
- }
337
- .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item {
338
- height: 30px;
339
- padding: 5px 10px;
340
- white-space: nowrap;
341
- }
342
- .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item:hover {
343
- cursor: pointer;
344
- background-color: #f0f0f0;
345
- }
346
- .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected {
347
- background-color: #216ba5;
348
- color: white;
349
- font-weight: bold;
350
- }
351
- .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected:hover {
352
- background-color: #216ba5;
353
- }
354
- .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled {
355
- color: #ccc;
356
- }
357
- .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled:hover {
358
- cursor: default;
359
- background-color: transparent;
360
- }
361
-
362
- .react-datepicker__week-number {
363
- color: #ccc;
364
- display: inline-block;
365
- width: 1.7rem;
366
- line-height: 1.7rem;
367
- text-align: center;
368
- margin: 0.166rem;
369
- }
370
- .react-datepicker__week-number.react-datepicker__week-number--clickable {
371
- cursor: pointer;
372
- }
373
- .react-datepicker__week-number.react-datepicker__week-number--clickable:hover {
374
- border-radius: 0.3rem;
375
- background-color: #f0f0f0;
376
- }
377
-
378
- .react-datepicker__day-names,
379
- .react-datepicker__week {
380
- white-space: nowrap;
381
- }
382
-
383
- .react-datepicker__day-names {
384
- margin-bottom: -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: 1.7rem;
393
- line-height: 1.7rem;
394
- text-align: center;
395
- margin: 0.166rem;
396
- }
397
-
398
- .react-datepicker__month--selected, .react-datepicker__month--in-selecting-range, .react-datepicker__month--in-range,
399
- .react-datepicker__quarter--selected,
400
- .react-datepicker__quarter--in-selecting-range,
401
- .react-datepicker__quarter--in-range {
402
- border-radius: 0.3rem;
403
- background-color: #216ba5;
404
- color: #fff;
405
- }
406
- .react-datepicker__month--selected:hover, .react-datepicker__month--in-selecting-range:hover, .react-datepicker__month--in-range:hover,
407
- .react-datepicker__quarter--selected:hover,
408
- .react-datepicker__quarter--in-selecting-range:hover,
409
- .react-datepicker__quarter--in-range:hover {
410
- background-color: #1d5d90;
411
- }
412
- .react-datepicker__month--disabled,
413
- .react-datepicker__quarter--disabled {
414
- color: #ccc;
415
- pointer-events: none;
416
- }
417
- .react-datepicker__month--disabled:hover,
418
- .react-datepicker__quarter--disabled:hover {
419
- cursor: default;
420
- background-color: transparent;
421
- }
422
-
423
- .react-datepicker__day,
424
- .react-datepicker__month-text,
425
- .react-datepicker__quarter-text,
426
- .react-datepicker__year-text {
427
- cursor: pointer;
428
- }
429
- .react-datepicker__day:hover,
430
- .react-datepicker__month-text:hover,
431
- .react-datepicker__quarter-text:hover,
432
- .react-datepicker__year-text:hover {
433
- border-radius: 0.3rem;
434
- background-color: #f0f0f0;
435
- }
436
- .react-datepicker__day--today,
437
- .react-datepicker__month-text--today,
438
- .react-datepicker__quarter-text--today,
439
- .react-datepicker__year-text--today {
440
- font-weight: bold;
441
- }
442
- .react-datepicker__day--highlighted,
443
- .react-datepicker__month-text--highlighted,
444
- .react-datepicker__quarter-text--highlighted,
445
- .react-datepicker__year-text--highlighted {
446
- border-radius: 0.3rem;
447
- background-color: #3dcc4a;
448
- color: #fff;
449
- }
450
- .react-datepicker__day--highlighted:hover,
451
- .react-datepicker__month-text--highlighted:hover,
452
- .react-datepicker__quarter-text--highlighted:hover,
453
- .react-datepicker__year-text--highlighted:hover {
454
- background-color: #32be3f;
455
- }
456
- .react-datepicker__day--highlighted-custom-1,
457
- .react-datepicker__month-text--highlighted-custom-1,
458
- .react-datepicker__quarter-text--highlighted-custom-1,
459
- .react-datepicker__year-text--highlighted-custom-1 {
460
- color: magenta;
461
- }
462
- .react-datepicker__day--highlighted-custom-2,
463
- .react-datepicker__month-text--highlighted-custom-2,
464
- .react-datepicker__quarter-text--highlighted-custom-2,
465
- .react-datepicker__year-text--highlighted-custom-2 {
466
- color: green;
467
- }
468
- .react-datepicker__day--selected, .react-datepicker__day--in-selecting-range, .react-datepicker__day--in-range,
469
- .react-datepicker__month-text--selected,
470
- .react-datepicker__month-text--in-selecting-range,
471
- .react-datepicker__month-text--in-range,
472
- .react-datepicker__quarter-text--selected,
473
- .react-datepicker__quarter-text--in-selecting-range,
474
- .react-datepicker__quarter-text--in-range,
475
- .react-datepicker__year-text--selected,
476
- .react-datepicker__year-text--in-selecting-range,
477
- .react-datepicker__year-text--in-range {
478
- border-radius: 0.3rem;
479
- background-color: #216ba5;
480
- color: #fff;
481
- }
482
- .react-datepicker__day--selected:hover, .react-datepicker__day--in-selecting-range:hover, .react-datepicker__day--in-range:hover,
483
- .react-datepicker__month-text--selected:hover,
484
- .react-datepicker__month-text--in-selecting-range:hover,
485
- .react-datepicker__month-text--in-range:hover,
486
- .react-datepicker__quarter-text--selected:hover,
487
- .react-datepicker__quarter-text--in-selecting-range:hover,
488
- .react-datepicker__quarter-text--in-range:hover,
489
- .react-datepicker__year-text--selected:hover,
490
- .react-datepicker__year-text--in-selecting-range:hover,
491
- .react-datepicker__year-text--in-range:hover {
492
- background-color: #1d5d90;
493
- }
494
- .react-datepicker__day--keyboard-selected,
495
- .react-datepicker__month-text--keyboard-selected,
496
- .react-datepicker__quarter-text--keyboard-selected,
497
- .react-datepicker__year-text--keyboard-selected {
498
- border-radius: 0.3rem;
499
- background-color: #2579ba;
500
- color: #fff;
501
- }
502
- .react-datepicker__day--keyboard-selected:hover,
503
- .react-datepicker__month-text--keyboard-selected:hover,
504
- .react-datepicker__quarter-text--keyboard-selected:hover,
505
- .react-datepicker__year-text--keyboard-selected:hover {
506
- background-color: #1d5d90;
507
- }
508
- .react-datepicker__day--in-selecting-range:not(.react-datepicker__day--in-range,
509
- .react-datepicker__month-text--in-range,
510
- .react-datepicker__quarter-text--in-range,
511
- .react-datepicker__year-text--in-range),
512
- .react-datepicker__month-text--in-selecting-range:not(.react-datepicker__day--in-range,
513
- .react-datepicker__month-text--in-range,
514
- .react-datepicker__quarter-text--in-range,
515
- .react-datepicker__year-text--in-range),
516
- .react-datepicker__quarter-text--in-selecting-range:not(.react-datepicker__day--in-range,
517
- .react-datepicker__month-text--in-range,
518
- .react-datepicker__quarter-text--in-range,
519
- .react-datepicker__year-text--in-range),
520
- .react-datepicker__year-text--in-selecting-range:not(.react-datepicker__day--in-range,
521
- .react-datepicker__month-text--in-range,
522
- .react-datepicker__quarter-text--in-range,
523
- .react-datepicker__year-text--in-range) {
524
- background-color: rgba(33, 107, 165, 0.5);
525
- }
526
- .react-datepicker__month--selecting-range .react-datepicker__day--in-range:not(.react-datepicker__day--in-selecting-range,
527
- .react-datepicker__month-text--in-selecting-range,
528
- .react-datepicker__quarter-text--in-selecting-range,
529
- .react-datepicker__year-text--in-selecting-range),
530
- .react-datepicker__month--selecting-range .react-datepicker__month-text--in-range:not(.react-datepicker__day--in-selecting-range,
531
- .react-datepicker__month-text--in-selecting-range,
532
- .react-datepicker__quarter-text--in-selecting-range,
533
- .react-datepicker__year-text--in-selecting-range),
534
- .react-datepicker__month--selecting-range .react-datepicker__quarter-text--in-range:not(.react-datepicker__day--in-selecting-range,
535
- .react-datepicker__month-text--in-selecting-range,
536
- .react-datepicker__quarter-text--in-selecting-range,
537
- .react-datepicker__year-text--in-selecting-range),
538
- .react-datepicker__month--selecting-range .react-datepicker__year-text--in-range:not(.react-datepicker__day--in-selecting-range,
539
- .react-datepicker__month-text--in-selecting-range,
540
- .react-datepicker__quarter-text--in-selecting-range,
541
- .react-datepicker__year-text--in-selecting-range) {
542
- background-color: #f0f0f0;
543
- color: #000;
544
- }
545
- .react-datepicker__day--disabled,
546
- .react-datepicker__month-text--disabled,
547
- .react-datepicker__quarter-text--disabled,
548
- .react-datepicker__year-text--disabled {
549
- cursor: default;
550
- color: #ccc;
551
- }
552
- .react-datepicker__day--disabled:hover,
553
- .react-datepicker__month-text--disabled:hover,
554
- .react-datepicker__quarter-text--disabled:hover,
555
- .react-datepicker__year-text--disabled:hover {
556
- background-color: transparent;
557
- }
558
-
559
- .react-datepicker__month-text.react-datepicker__month--selected:hover, .react-datepicker__month-text.react-datepicker__month--in-range:hover, .react-datepicker__month-text.react-datepicker__quarter--selected:hover, .react-datepicker__month-text.react-datepicker__quarter--in-range:hover,
560
- .react-datepicker__quarter-text.react-datepicker__month--selected:hover,
561
- .react-datepicker__quarter-text.react-datepicker__month--in-range:hover,
562
- .react-datepicker__quarter-text.react-datepicker__quarter--selected:hover,
563
- .react-datepicker__quarter-text.react-datepicker__quarter--in-range:hover {
564
- background-color: #216ba5;
565
- }
566
- .react-datepicker__month-text:hover,
567
- .react-datepicker__quarter-text:hover {
568
- background-color: #f0f0f0;
569
- }
570
-
571
- .react-datepicker__input-container {
572
- position: relative;
573
- display: inline-block;
574
- width: 100%;
575
- }
576
-
577
- .react-datepicker__year-read-view,
578
- .react-datepicker__month-read-view,
579
- .react-datepicker__month-year-read-view {
580
- border: 1px solid transparent;
581
- border-radius: 0.3rem;
582
- position: relative;
583
- }
584
- .react-datepicker__year-read-view:hover,
585
- .react-datepicker__month-read-view:hover,
586
- .react-datepicker__month-year-read-view:hover {
587
- cursor: pointer;
588
- }
589
- .react-datepicker__year-read-view:hover .react-datepicker__year-read-view--down-arrow,
590
- .react-datepicker__year-read-view:hover .react-datepicker__month-read-view--down-arrow,
591
- .react-datepicker__month-read-view:hover .react-datepicker__year-read-view--down-arrow,
592
- .react-datepicker__month-read-view:hover .react-datepicker__month-read-view--down-arrow,
593
- .react-datepicker__month-year-read-view:hover .react-datepicker__year-read-view--down-arrow,
594
- .react-datepicker__month-year-read-view:hover .react-datepicker__month-read-view--down-arrow {
595
- border-top-color: #b3b3b3;
596
- }
597
- .react-datepicker__year-read-view--down-arrow,
598
- .react-datepicker__month-read-view--down-arrow,
599
- .react-datepicker__month-year-read-view--down-arrow {
600
- transform: rotate(135deg);
601
- right: -16px;
602
- top: 0;
603
- }
604
-
605
- .react-datepicker__year-dropdown,
606
- .react-datepicker__month-dropdown,
607
- .react-datepicker__month-year-dropdown {
608
- background-color: #f0f0f0;
609
- position: absolute;
610
- width: 50%;
611
- left: 25%;
612
- top: 30px;
613
- z-index: 1;
614
- text-align: center;
615
- border-radius: 0.3rem;
616
- border: 1px solid #aeaeae;
617
- }
618
- .react-datepicker__year-dropdown:hover,
619
- .react-datepicker__month-dropdown:hover,
620
- .react-datepicker__month-year-dropdown:hover {
621
- cursor: pointer;
622
- }
623
- .react-datepicker__year-dropdown--scrollable,
624
- .react-datepicker__month-dropdown--scrollable,
625
- .react-datepicker__month-year-dropdown--scrollable {
626
- height: 150px;
627
- overflow-y: scroll;
628
- }
629
-
630
- .react-datepicker__year-option,
631
- .react-datepicker__month-option,
632
- .react-datepicker__month-year-option {
633
- line-height: 20px;
634
- width: 100%;
635
- display: block;
636
- margin-left: auto;
637
- margin-right: auto;
638
- }
639
- .react-datepicker__year-option:first-of-type,
640
- .react-datepicker__month-option:first-of-type,
641
- .react-datepicker__month-year-option:first-of-type {
642
- border-top-left-radius: 0.3rem;
643
- border-top-right-radius: 0.3rem;
644
- }
645
- .react-datepicker__year-option:last-of-type,
646
- .react-datepicker__month-option:last-of-type,
647
- .react-datepicker__month-year-option:last-of-type {
648
- -webkit-user-select: none;
649
- -moz-user-select: none;
650
- -ms-user-select: none;
651
- user-select: none;
652
- border-bottom-left-radius: 0.3rem;
653
- border-bottom-right-radius: 0.3rem;
654
- }
655
- .react-datepicker__year-option:hover,
656
- .react-datepicker__month-option:hover,
657
- .react-datepicker__month-year-option:hover {
658
- background-color: #ccc;
659
- }
660
- .react-datepicker__year-option:hover .react-datepicker__navigation--years-upcoming,
661
- .react-datepicker__month-option:hover .react-datepicker__navigation--years-upcoming,
662
- .react-datepicker__month-year-option:hover .react-datepicker__navigation--years-upcoming {
663
- border-bottom-color: #b3b3b3;
664
- }
665
- .react-datepicker__year-option:hover .react-datepicker__navigation--years-previous,
666
- .react-datepicker__month-option:hover .react-datepicker__navigation--years-previous,
667
- .react-datepicker__month-year-option:hover .react-datepicker__navigation--years-previous {
668
- border-top-color: #b3b3b3;
669
- }
670
- .react-datepicker__year-option--selected,
671
- .react-datepicker__month-option--selected,
672
- .react-datepicker__month-year-option--selected {
673
- position: absolute;
674
- left: 15px;
675
- }
676
-
677
- .react-datepicker__close-icon {
678
- cursor: pointer;
679
- background-color: transparent;
680
- border: 0;
681
- outline: 0;
682
- padding: 0 6px 0 0;
683
- position: absolute;
684
- top: 0;
685
- right: 0;
686
- height: 100%;
687
- display: table-cell;
688
- vertical-align: middle;
689
- }
690
- .react-datepicker__close-icon::after {
691
- cursor: pointer;
692
- background-color: #216ba5;
693
- color: #fff;
694
- border-radius: 50%;
695
- height: 16px;
696
- width: 16px;
697
- padding: 2px;
698
- font-size: 12px;
699
- line-height: 1;
700
- text-align: center;
701
- display: table-cell;
702
- vertical-align: middle;
703
- content: "×";
704
- }
705
-
706
- .react-datepicker__today-button {
707
- background: #f0f0f0;
708
- border-top: 1px solid #aeaeae;
709
- cursor: pointer;
710
- text-align: center;
711
- font-weight: bold;
712
- padding: 5px 0;
713
- clear: left;
714
- }
715
-
716
- .react-datepicker__portal {
717
- position: fixed;
718
- width: 100vw;
719
- height: 100vh;
720
- background-color: rgba(0, 0, 0, 0.8);
721
- left: 0;
722
- top: 0;
723
- justify-content: center;
724
- align-items: center;
725
- display: flex;
726
- z-index: 2147483647;
727
- }
728
- .react-datepicker__portal .react-datepicker__day-name,
729
- .react-datepicker__portal .react-datepicker__day,
730
- .react-datepicker__portal .react-datepicker__time-name {
731
- width: 3rem;
732
- line-height: 3rem;
733
- }
734
- @media (max-width: 400px), (max-height: 550px) {
735
- .react-datepicker__portal .react-datepicker__day-name,
736
- .react-datepicker__portal .react-datepicker__day,
737
- .react-datepicker__portal .react-datepicker__time-name {
738
- width: 2rem;
739
- line-height: 2rem;
740
- }
741
- }
742
- .react-datepicker__portal .react-datepicker__current-month,
743
- .react-datepicker__portal .react-datepicker-time__header {
744
- font-size: 1.44rem;
745
- }