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