@true-engineering/true-react-common-ui-kit 4.0.0-alpha54 → 4.0.0-alpha61

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 (151) hide show
  1. package/README.md +1 -0
  2. package/dist/components/AddButton/AddButton.d.ts +1 -0
  3. package/dist/components/AddButton/AddButton.styles.d.ts +1 -1
  4. package/dist/components/Button/Button.styles.d.ts +1 -1
  5. package/dist/components/Checkbox/Checkbox.styles.d.ts +1 -1
  6. package/dist/components/ControlWrapper/ControlWrapper.d.ts +1 -1
  7. package/dist/components/ControlWrapper/ControlWrapper.styles.d.ts +1 -1
  8. package/dist/components/CssBaseline/CssBaseline.styles.d.ts +1 -1
  9. package/dist/components/DatePicker/components/DatePickerHeader/DatePickerHeader.styles.d.ts +1 -1
  10. package/dist/components/Description/Description.styles.d.ts +1 -1
  11. package/dist/components/FileInput/FileInput.styles.d.ts +1 -1
  12. package/dist/components/FileItem/FileItem.styles.d.ts +1 -1
  13. package/dist/components/FiltersPane/components/FilterInterval/FilterInterval.styles.d.ts +1 -1
  14. package/dist/components/FiltersPane/components/FilterSelect/FilterSelect.styles.d.ts +2 -2
  15. package/dist/components/FiltersPane/components/FilterWithDates/FilterWithDates.styles.d.ts +2 -2
  16. package/dist/components/FiltersPane/components/FilterWrapper/FilterWrapper.d.ts +1 -1
  17. package/dist/components/FiltersPane/components/FilterWrapper/FilterWrapper.styles.d.ts +1 -1
  18. package/dist/components/FiltersPane/components/FiltersPaneSearch/FiltersPaneSearch.styles.d.ts +1 -1
  19. package/dist/components/FiltersPane/types.d.ts +2 -1
  20. package/dist/components/FlexibleTable/FlexibleTable.styles.d.ts +1 -1
  21. package/dist/components/FlexibleTable/components/FlexibleTableCell/FlexibleTableCell.styles.d.ts +1 -1
  22. package/dist/components/FlexibleTable/components/FlexibleTableRow/FlexibleTableRow.d.ts +1 -3
  23. package/dist/components/FlexibleTable/components/FlexibleTableRow/FlexibleTableRow.styles.d.ts +1 -1
  24. package/dist/components/FloatDocActions/components/DocActions/DocActions.styles.d.ts +1 -1
  25. package/dist/components/IconButton/IconButton.styles.d.ts +1 -1
  26. package/dist/components/List/components/ListItem/ListItem.styles.d.ts +1 -1
  27. package/dist/components/Modal/Modal.styles.d.ts +1 -1
  28. package/dist/components/MoreMenu/MoreMenu.styles.d.ts +1 -1
  29. package/dist/components/MultiSelect/MultiSelect.styles.d.ts +1 -1
  30. package/dist/components/MultiSelect/components/MultiSelectInput/MultiSelectInput.styles.d.ts +1 -1
  31. package/dist/components/MultiSelectList/MultiSelectList.styles.d.ts +1 -1
  32. package/dist/components/NewMoreMenu/NewMoreMenu.styles.d.ts +1 -1
  33. package/dist/components/Notification/Notification.styles.d.ts +1 -1
  34. package/dist/components/PhoneInput/PhoneInput.styles.d.ts +1 -1
  35. package/dist/components/PhoneInput/components/PhoneInputCountryList/PhoneInputCountryList.styles.d.ts +1 -1
  36. package/dist/components/RadioButton/RadioButton.styles.d.ts +1 -1
  37. package/dist/components/SearchInput/SearchInput.d.ts +1 -1
  38. package/dist/components/Select/Select.styles.d.ts +3 -3
  39. package/dist/components/Select/components/SelectList/SelectList.styles.d.ts +1 -1
  40. package/dist/components/Selector/Selector.styles.d.ts +1 -1
  41. package/dist/components/Status/Status.styles.d.ts +1 -1
  42. package/dist/components/Switch/Switch.d.ts +3 -2
  43. package/dist/components/Switch/Switch.styles.d.ts +3 -2
  44. package/dist/components/Switch/types.d.ts +3 -0
  45. package/dist/components/TextArea/TextArea.styles.d.ts +1 -1
  46. package/dist/components/TextButton/TextButton.styles.d.ts +1 -1
  47. package/dist/components/TextWithInfo/TextWithInfo.styles.d.ts +1 -1
  48. package/dist/components/TextWithTooltip/TextWithTooltip.d.ts +2 -0
  49. package/dist/components/TextWithTooltip/TextWithTooltip.styles.d.ts +1 -1
  50. package/dist/components/ThemedPreloader/ThemedPreloader.styles.d.ts +1 -1
  51. package/dist/components/ThemedPreloader/components/DotsPreloader/DotsPreloader.styles.d.ts +1 -1
  52. package/dist/components/Toaster/Toaster.styles.d.ts +1 -1
  53. package/dist/components/Tooltip/Tooltip.d.ts +3 -0
  54. package/dist/components/Tooltip/Tooltip.styles.d.ts +2 -1
  55. package/dist/components/Tooltip/types.d.ts +3 -0
  56. package/dist/components/WithMessages/WithMessages.styles.d.ts +1 -1
  57. package/dist/components/WithPopup/WithPopup.styles.d.ts +1 -1
  58. package/dist/components/WithTooltip/WithTooltip.d.ts +2 -0
  59. package/dist/helpers/misc.d.ts +2 -0
  60. package/dist/hooks/index.d.ts +1 -0
  61. package/dist/hooks/use-intersection-ref.d.ts +2 -1
  62. package/dist/hooks/use-resize-ref.d.ts +7 -0
  63. package/dist/hooks/use-tweak-styles.d.ts +3 -2
  64. package/dist/theme/Provider.d.ts +2 -12
  65. package/dist/theme/common.d.ts +34 -4
  66. package/dist/theme/helpers.d.ts +3 -16
  67. package/dist/theme/index.d.ts +0 -2
  68. package/dist/theme/types.d.ts +9 -8
  69. package/dist/true-react-common-ui-kit.js +12132 -10
  70. package/dist/true-react-common-ui-kit.js.map +1 -1
  71. package/dist/true-react-common-ui-kit.umd.cjs +2 -10
  72. package/dist/true-react-common-ui-kit.umd.cjs.map +1 -1
  73. package/dist/types.d.ts +3 -3
  74. package/package.json +1 -3
  75. package/src/components/AccountInfo/AccountInfo.tsx +2 -3
  76. package/src/components/AddButton/AddButton.tsx +3 -5
  77. package/src/components/Button/Button.tsx +76 -77
  78. package/src/components/CloseButton/CloseButton.tsx +2 -4
  79. package/src/components/Colors/Colors.stories.tsx +3 -2
  80. package/src/components/ControlWrapper/ControlWrapper.tsx +2 -2
  81. package/src/components/CssBaseline/CssBaseline.styles.ts +2 -0
  82. package/src/components/CssBaseline/CssBaseline.tsx +2 -3
  83. package/src/components/DateInput/DateInput.tsx +59 -61
  84. package/src/components/DatePicker/DatePicker.tsx +259 -262
  85. package/src/components/Description/Description.tsx +2 -3
  86. package/src/components/FileInput/FileInput.tsx +87 -95
  87. package/src/components/FileItem/FileItem.tsx +2 -4
  88. package/src/components/FiltersPane/FiltersPane.stories.tsx +3 -0
  89. package/src/components/FiltersPane/components/FilterInterval/FilterInterval.tsx +2 -3
  90. package/src/components/FiltersPane/components/FilterWithDates/FilterWithDates.tsx +6 -3
  91. package/src/components/FiltersPane/components/FilterWrapper/FilterWrapper.tsx +3 -2
  92. package/src/components/FiltersPane/types.ts +2 -0
  93. package/src/components/FlexibleTable/FlexibleTable.styles.ts +1 -0
  94. package/src/components/FlexibleTable/components/FlexibleTableCell/FlexibleTableCell.styles.ts +1 -0
  95. package/src/components/FlexibleTable/components/FlexibleTableCell/FlexibleTableCell.tsx +5 -2
  96. package/src/components/FlexibleTable/components/FlexibleTableRow/FlexibleTableRow.tsx +9 -7
  97. package/src/components/IconButton/IconButton.tsx +44 -48
  98. package/src/components/Input/Input.tsx +26 -24
  99. package/src/components/Input/InputBase.tsx +183 -187
  100. package/src/components/List/List.tsx +2 -3
  101. package/src/components/List/components/ListItem/ListItem.tsx +2 -4
  102. package/src/components/Modal/Modal.tsx +2 -4
  103. package/src/components/MoreMenu/MoreMenu.tsx +2 -4
  104. package/src/components/MultiSelect/MultiSelect.tsx +2 -4
  105. package/src/components/NewMoreMenu/NewMoreMenu.tsx +2 -4
  106. package/src/components/Notification/Notification.tsx +2 -3
  107. package/src/components/NumberInput/NumberInput.tsx +91 -93
  108. package/src/components/PhoneInput/PhoneInput.tsx +2 -3
  109. package/src/components/SearchInput/SearchInput.tsx +20 -19
  110. package/src/components/Select/Select.tsx +1 -1
  111. package/src/components/Selector/Selector.tsx +4 -6
  112. package/src/components/SmartInput/SmartInput.tsx +85 -87
  113. package/src/components/Status/Status.tsx +5 -4
  114. package/src/components/Switch/Switch.styles.ts +21 -13
  115. package/src/components/Switch/Switch.tsx +11 -6
  116. package/src/components/Switch/types.ts +5 -0
  117. package/src/components/TextArea/TextArea.tsx +128 -130
  118. package/src/components/TextButton/TextButton.tsx +68 -69
  119. package/src/components/TextWithInfo/TextWithInfo.tsx +2 -4
  120. package/src/components/TextWithTooltip/TextWithTooltip.tsx +6 -4
  121. package/src/components/ThemedPreloader/ThemedPreloader.tsx +2 -4
  122. package/src/components/Toaster/Toaster.tsx +2 -4
  123. package/src/components/Tooltip/Tooltip.stories.tsx +10 -0
  124. package/src/components/Tooltip/Tooltip.styles.ts +2 -1
  125. package/src/components/Tooltip/Tooltip.tsx +12 -5
  126. package/src/components/Tooltip/types.ts +5 -0
  127. package/src/components/WithMessages/WithMessages.tsx +41 -40
  128. package/src/components/WithTooltip/WithTooltip.tsx +4 -0
  129. package/src/helpers/misc.ts +6 -0
  130. package/src/hooks/index.ts +1 -0
  131. package/src/hooks/use-intersection-ref.ts +24 -6
  132. package/src/hooks/use-latest-ref.ts +6 -2
  133. package/src/hooks/use-resize-ref.ts +35 -0
  134. package/src/hooks/use-tweak-styles.ts +14 -51
  135. package/src/theme/Provider.tsx +4 -21
  136. package/src/theme/common.ts +33 -36
  137. package/src/theme/helpers.ts +50 -42
  138. package/src/theme/index.ts +0 -2
  139. package/src/theme/types.ts +13 -10
  140. package/src/types.ts +3 -3
  141. package/dist/theme/create-themed-styles.d.ts +0 -2
  142. package/dist/theme/true-jss/ThemedStylesManager.d.ts +0 -18
  143. package/dist/theme/true-jss/TweakStylesManager.d.ts +0 -34
  144. package/dist/theme/true-jss/index.d.ts +0 -2
  145. package/dist/theme/true-jss/jss-context.d.ts +0 -9
  146. package/dist/true-react-common-ui-kit.css +0 -756
  147. package/src/theme/create-themed-styles.ts +0 -78
  148. package/src/theme/true-jss/ThemedStylesManager.ts +0 -93
  149. package/src/theme/true-jss/TweakStylesManager.ts +0 -156
  150. package/src/theme/true-jss/index.ts +0 -2
  151. package/src/theme/true-jss/jss-context.tsx +0 -34
@@ -1,756 +0,0 @@
1
- @charset "UTF-8";
2
- .react-datepicker__navigation-icon::before, .react-datepicker__year-read-view--down-arrow,
3
- .react-datepicker__month-read-view--down-arrow,
4
- .react-datepicker__month-year-read-view--down-arrow {
5
- border-color: #ccc;
6
- border-style: solid;
7
- border-width: 3px 3px 0 0;
8
- content: "";
9
- display: block;
10
- height: 9px;
11
- position: absolute;
12
- top: 6px;
13
- width: 9px;
14
- }
15
- .react-datepicker-wrapper {
16
- display: inline-block;
17
- padding: 0;
18
- border: 0;
19
- }
20
-
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
- }