@itcase/ui 1.8.179 → 1.9.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 (226) hide show
  1. package/dist/cjs/components/Chips.js +3 -3
  2. package/dist/cjs/components/DatePeriod.js +2 -2
  3. package/dist/cjs/components/Drawer.js +5 -5
  4. package/dist/cjs/components/Select.js +2 -2
  5. package/dist/components/Chips.js +3 -3
  6. package/dist/components/DatePeriod.js +2 -2
  7. package/dist/components/Drawer.js +5 -5
  8. package/dist/components/Select.js +2 -2
  9. package/dist/css/styles/bundles.css +13 -1
  10. package/dist/stories/useAppearanceConfig.mdx +1 -1
  11. package/dist/stories/useDevicePropsGenerator.mdx +2 -2
  12. package/dist/stories/useMediaQueries.mdx +1 -1
  13. package/dist/types/components/Accordion/Accordion.interface.d.ts +1 -1
  14. package/dist/types/components/Avatar/Avatar.interface.d.ts +1 -1
  15. package/dist/types/components/Badge/Badge.interface.d.ts +1 -1
  16. package/dist/types/components/Breadcrumbs/Breadcrumbs.interface.d.ts +1 -1
  17. package/dist/types/components/Button/Button.interface.d.ts +1 -1
  18. package/dist/types/components/Cell/Cell.interface.d.ts +1 -1
  19. package/dist/types/components/Checkbox/Checkbox.interface.d.ts +1 -1
  20. package/dist/types/components/Checkmark/Checkmark.interface.d.ts +1 -1
  21. package/dist/types/components/Chips/Chips.interface.d.ts +1 -1
  22. package/dist/types/components/Choice/Choice.interface.d.ts +1 -1
  23. package/dist/types/components/Code/Code.interface.d.ts +1 -1
  24. package/dist/types/components/CookiesWarning/CookiesWarning.d.ts +1 -1
  25. package/dist/types/components/Dadata/Dadata.interface.d.ts +1 -1
  26. package/dist/types/components/DatePeriod/DatePeriod.interface.d.ts +1 -1
  27. package/dist/types/components/Divider/Divider.interface.d.ts +1 -1
  28. package/dist/types/components/Dot/Dot.interface.d.ts +1 -1
  29. package/dist/types/components/Drawer/Drawer.interface.d.ts +1 -1
  30. package/dist/types/components/Dropdown/Dropdown.interface.d.ts +1 -1
  31. package/dist/types/components/Flex/Flex.interface.d.ts +1 -1
  32. package/dist/types/components/Grid/Grid.interface.d.ts +1 -1
  33. package/dist/types/components/Group/Group.interface.d.ts +1 -1
  34. package/dist/types/components/HTMLContent/HTMLContent.interface.d.ts +1 -1
  35. package/dist/types/components/HeroTitle/HeroTitle.interface.d.ts +1 -1
  36. package/dist/types/components/Icon/Icon.interface.d.ts +1 -1
  37. package/dist/types/components/Image/Image.interface.d.ts +1 -1
  38. package/dist/types/components/Input/Input.interface.d.ts +1 -1
  39. package/dist/types/components/InputPassword/InputPassword.interface.d.ts +1 -1
  40. package/dist/types/components/Label/Label.interface.d.ts +1 -1
  41. package/dist/types/components/Link/Link.interface.d.ts +1 -1
  42. package/dist/types/components/List/List.interface.d.ts +1 -1
  43. package/dist/types/components/Loader/Loader.interface.d.ts +1 -1
  44. package/dist/types/components/Logo/Logo.interface.d.ts +1 -1
  45. package/dist/types/components/MenuItem/MenuItem.interface.d.ts +1 -1
  46. package/dist/types/components/Modal/Modal.interface.d.ts +1 -1
  47. package/dist/types/components/Notification/Notification.interface.d.ts +1 -1
  48. package/dist/types/components/Overlay/Overlay.interface.d.ts +1 -1
  49. package/dist/types/components/Pagination/Pagination.interface.d.ts +1 -1
  50. package/dist/types/components/Radio/Radio.interface.d.ts +1 -1
  51. package/dist/types/components/RangeSlider/RangeSlider.interface.d.ts +1 -1
  52. package/dist/types/components/Response/Response.interface.d.ts +1 -1
  53. package/dist/types/components/SVGContent/SVGContent.interface.d.ts +1 -1
  54. package/dist/types/components/ScrollOnDrag/ScrollOnDrag.interface.d.ts +1 -1
  55. package/dist/types/components/Scrollbar/Scrollbar.interface.d.ts +1 -1
  56. package/dist/types/components/Search/Search.interface.d.ts +1 -1
  57. package/dist/types/components/Segmented/Segmented.interface.d.ts +1 -1
  58. package/dist/types/components/Segmented/stories/__mock__/index.d.ts +6 -21
  59. package/dist/types/components/Swiper/Swiper.interface.d.ts +1 -1
  60. package/dist/types/components/Switch/Switch.interface.d.ts +1 -1
  61. package/dist/types/components/Tab/Tab.interface.d.ts +1 -1
  62. package/dist/types/components/Text/Text.interface.d.ts +1 -1
  63. package/dist/types/components/Textarea/Textarea.interface.d.ts +1 -1
  64. package/dist/types/components/Tile/Tile.interface.d.ts +1 -1
  65. package/dist/types/components/Title/Title.interface.d.ts +1 -1
  66. package/dist/types/components/Tooltip/Tooltip.interface.d.ts +1 -1
  67. package/dist/types/components/Video/Video.interface.d.ts +1 -1
  68. package/dist/types/hoc/urlWithAssetPrefix.d.ts +1 -1
  69. package/dist/types/hooks/index.helpers.d.ts +2 -2
  70. package/dist/types/hooks/useDevicePropsGenerator/useDevicePropsGenerator.d.ts +1 -1
  71. package/package.json +4 -7
  72. package/dist/css/components/Accordion/Accordion.css +0 -197
  73. package/dist/css/components/Avatar/Avatar.css +0 -326
  74. package/dist/css/components/AvatarStack/AvatarStack.css +0 -135
  75. package/dist/css/components/Badge/Badge.css +0 -1235
  76. package/dist/css/components/Breadcrumbs/Breadcrumbs.css +0 -77
  77. package/dist/css/components/Button/Button.css +0 -630
  78. package/dist/css/components/Cell/Cell.css +0 -158
  79. package/dist/css/components/Checkbox/Checkbox.css +0 -11133
  80. package/dist/css/components/Checkmark/Checkmark.css +0 -103
  81. package/dist/css/components/Chips/Chips.css +0 -139
  82. package/dist/css/components/Choice/Choice.css +0 -288
  83. package/dist/css/components/Choice/css/__item/choice__item.css +0 -32
  84. package/dist/css/components/Choice/css/__item/choice__item_shape.css +0 -11
  85. package/dist/css/components/Choice/css/__item/choice__item_size.css +0 -88
  86. package/dist/css/components/Code/Code.css +0 -123
  87. package/dist/css/components/CookiesWarning/CookiesWarning.css +0 -40
  88. package/dist/css/components/CookiesWarning/CookiesWarning.token.css +0 -2
  89. package/dist/css/components/Dadata/Dadata.css +0 -21
  90. package/dist/css/components/DatePeriod/DatePeriod.css +0 -101
  91. package/dist/css/components/DatePicker/DatePicker.css +0 -1377
  92. package/dist/css/components/Divider/Divider.css +0 -105
  93. package/dist/css/components/Dot/Dot.css +0 -72
  94. package/dist/css/components/Drawer/Drawer.css +0 -80
  95. package/dist/css/components/Dropdown/Dropdown.css +0 -221
  96. package/dist/css/components/Flex/Flex.css +0 -379
  97. package/dist/css/components/Flex/css/__item/flex__item.css +0 -5
  98. package/dist/css/components/Flex/css/__item/flex__item_align.css +0 -58
  99. package/dist/css/components/Flex/css/__item/flex__item_direction.css +0 -24
  100. package/dist/css/components/Flex/css/__item/flex__item_grow.css +0 -10
  101. package/dist/css/components/Flex/css/__item/flex__item_justify-content.css +0 -22
  102. package/dist/css/components/Flex/css/__item/flex__item_shape.css +0 -12
  103. package/dist/css/components/Flex/css/__item/flex__item_wrap.css +0 -9
  104. package/dist/css/components/Grid/Grid.css +0 -2303
  105. package/dist/css/components/Grid/css/__item/grid__item.css +0 -5
  106. package/dist/css/components/Grid/css/__item/grid__item_align-self.css +0 -58
  107. package/dist/css/components/Grid/css/__item/grid__item_column.css +0 -279
  108. package/dist/css/components/Grid/css/__item/grid__item_justify-self.css +0 -70
  109. package/dist/css/components/Grid/css/__item/grid__item_row.css +0 -279
  110. package/dist/css/components/Grid/css/__row/grid__row.css +0 -6
  111. package/dist/css/components/Group/Group.css +0 -5317
  112. package/dist/css/components/HTMLContent/HTMLContent.css +0 -166
  113. package/dist/css/components/HeroTitle/HeroTitle.css +0 -87
  114. package/dist/css/components/Icon/Icon.css +0 -7774
  115. package/dist/css/components/Image/Image.css +0 -163
  116. package/dist/css/components/Input/Input.css +0 -135
  117. package/dist/css/components/InputPassword/InputPassword.css +0 -115
  118. package/dist/css/components/Label/Label.css +0 -118
  119. package/dist/css/components/Link/Link.css +0 -58
  120. package/dist/css/components/List/List.css +0 -515
  121. package/dist/css/components/Loader/Loader.css +0 -212
  122. package/dist/css/components/Logo/Logo.css +0 -96
  123. package/dist/css/components/MenuItem/MenuItem.css +0 -251
  124. package/dist/css/components/Modal/Modal.css +0 -232
  125. package/dist/css/components/ModalSheetBottom/ModalSheetBottom.css +0 -45
  126. package/dist/css/components/Notification/Notification.css +0 -182
  127. package/dist/css/components/Notification/css/__item/notification__item.css +0 -26
  128. package/dist/css/components/Notification/css/__item/notification__item_size.css +0 -44
  129. package/dist/css/components/Notification/css/__item/notification__item_skeleton.css +0 -25
  130. package/dist/css/components/Notification/css/__item/notification__item_type.css +0 -23
  131. package/dist/css/components/Overlay/Overlay.css +0 -42
  132. package/dist/css/components/Pagination/Pagination.css +0 -279
  133. package/dist/css/components/Pagination/css/__item/pagination__item.css +0 -44
  134. package/dist/css/components/Pagination/css/__item/pagination__item_size.css +0 -18
  135. package/dist/css/components/Pagination/css/__item/pagination__item_state_active.css +0 -16
  136. package/dist/css/components/Pagination/css/__item/pagination__item_state_disabled.css +0 -20
  137. package/dist/css/components/Radio/Radio.css +0 -11226
  138. package/dist/css/components/RangeSlider/RangeSlider.css +0 -2944
  139. package/dist/css/components/Response/Response.css +0 -69
  140. package/dist/css/components/SVGContent/SVGContent.css +0 -2
  141. package/dist/css/components/ScrollOnDrag/ScrollOnDrag.css +0 -257
  142. package/dist/css/components/ScrollToView/ScrollToView.css +0 -1998
  143. package/dist/css/components/Scrollbar/Scrollbar.css +0 -58
  144. package/dist/css/components/Search/Search.css +0 -162
  145. package/dist/css/components/Search/css/search-input/search-input.css +0 -61
  146. package/dist/css/components/Search/css/search-input/search-input_size.css +0 -39
  147. package/dist/css/components/Search/css/search-input/search-input_skeleton.css +0 -25
  148. package/dist/css/components/Search/css/search-result/search-result.css +0 -6
  149. package/dist/css/components/Segmented/Segmented.css +0 -244
  150. package/dist/css/components/Segmented/css/__item/segmaented__item.css +0 -92
  151. package/dist/css/components/Select/Select.css +0 -768
  152. package/dist/css/components/Select/css/__control/select__control.css +0 -16
  153. package/dist/css/components/Select/css/__indicators/select__indicators.css +0 -21
  154. package/dist/css/components/Select/css/__input-container/select__input-container.css +0 -383
  155. package/dist/css/components/Select/css/__menu/select__menu-list-item_size.css +0 -31
  156. package/dist/css/components/Select/css/__menu/select__menu-notice.css +0 -6
  157. package/dist/css/components/Select/css/__menu/select__menu.css +0 -56
  158. package/dist/css/components/Select/css/__multi-value/select__multi-value.css +0 -7
  159. package/dist/css/components/Select/css/__option/select__option.css +0 -6
  160. package/dist/css/components/Select/css/__placeholder/select__placeholder.css +0 -9
  161. package/dist/css/components/Select/css/__single-value/select__single-value.css +0 -10
  162. package/dist/css/components/Select/css/__value-container/select__value-container.css +0 -21
  163. package/dist/css/components/Swiper/Swiper.css +0 -997
  164. package/dist/css/components/Swiper/css/__item/swiper-block__item.css +0 -6
  165. package/dist/css/components/Switch/Switch.css +0 -154
  166. package/dist/css/components/Tab/Tab.css +0 -180
  167. package/dist/css/components/Text/Text.css +0 -103
  168. package/dist/css/components/Textarea/Textarea.css +0 -86
  169. package/dist/css/components/Tile/Tile.css +0 -141
  170. package/dist/css/components/Title/Title.css +0 -125
  171. package/dist/css/components/Tooltip/Tooltip.css +0 -236
  172. package/dist/css/components/Video/Video.css +0 -23
  173. package/dist/css/components/Warning/Warning.css +0 -50
  174. package/dist/css/styles/align/align.css +0 -25
  175. package/dist/css/styles/align/align_horizontal-reverse.css +0 -252
  176. package/dist/css/styles/align/align_horizontal.css +0 -252
  177. package/dist/css/styles/align/align_vertical-reverse.css +0 -236
  178. package/dist/css/styles/align/align_vertical.css +0 -236
  179. package/dist/css/styles/align-items/align-items.css +0 -20
  180. package/dist/css/styles/align-self/align-self.css +0 -20
  181. package/dist/css/styles/alignment/alignment.css +0 -51
  182. package/dist/css/styles/blur/blur.css +0 -82
  183. package/dist/css/styles/border/border.css +0 -244
  184. package/dist/css/styles/border-color/border-color.css +0 -24405
  185. package/dist/css/styles/border-type/border-type.css +0 -13
  186. package/dist/css/styles/border-width/border-width.css +0 -57
  187. package/dist/css/styles/caret-color/caret-color.css +0 -282
  188. package/dist/css/styles/centering/centering.css +0 -17
  189. package/dist/css/styles/constraints/constraints.css +0 -72
  190. package/dist/css/styles/cursor/cursor.css +0 -28
  191. package/dist/css/styles/direction/direction.css +0 -18
  192. package/dist/css/styles/easing/easing.css +0 -104
  193. package/dist/css/styles/elevation/elevation.css +0 -26
  194. package/dist/css/styles/elevation/elevation_hover.css +0 -44
  195. package/dist/css/styles/fill/fill.css +0 -7750
  196. package/dist/css/styles/fill/fill_gradient.css +0 -525
  197. package/dist/css/styles/flex/flex-grow.css +0 -8
  198. package/dist/css/styles/height/height.css +0 -11
  199. package/dist/css/styles/hover/hover-fill-color.css +0 -842
  200. package/dist/css/styles/hover/hover-item-color.css +0 -1082
  201. package/dist/css/styles/hover/hover-text-color.css +0 -1082
  202. package/dist/css/styles/justify-content/justify-content.css +0 -35
  203. package/dist/css/styles/opacity/opacity.css +0 -74
  204. package/dist/css/styles/placeholder-text-color/placeholder-text-color.css +0 -362
  205. package/dist/css/styles/position/position.css +0 -14
  206. package/dist/css/styles/print/print.css +0 -12
  207. package/dist/css/styles/resize-horizontal/resize-horizontal.css +0 -12
  208. package/dist/css/styles/resize-vertical/resize-vertical.css +0 -10
  209. package/dist/css/styles/shape/shape.css +0 -8
  210. package/dist/css/styles/shape-strength/shape-strength.css +0 -15
  211. package/dist/css/styles/svg-color/svg_fill.css +0 -1044
  212. package/dist/css/styles/svg-color/svg_fill_hover.css +0 -484
  213. package/dist/css/styles/svg-color/svg_path_fill.css +0 -364
  214. package/dist/css/styles/text-align/text-align.css +0 -11
  215. package/dist/css/styles/text-color/text-color.css +0 -3617
  216. package/dist/css/styles/text-decoration/text-decoration.css +0 -10
  217. package/dist/css/styles/text-gradient/text-gradient.css +0 -1195
  218. package/dist/css/styles/text-style/text-style.css +0 -10
  219. package/dist/css/styles/text-truncate/text-truncate.css +0 -7
  220. package/dist/css/styles/text-weight/text-weight.css +0 -181
  221. package/dist/css/styles/width/width.css +0 -11
  222. package/dist/css/styles/word-wrap/word-wrap.css +0 -8
  223. package/dist/{ChipsGroup_cjs_B182e4c8.js → ChipsGroup_cjs_C-CP64k4.js} +1 -1
  224. package/dist/{ChipsGroup_es_BflE-5Q3.js → ChipsGroup_es_BfN_kCqj.js} +1 -1
  225. package/dist/{SelectContainer_cjs_BOMkYSVf.js → SelectContainer_cjs_NkNDS17H.js} +2 -2
  226. package/dist/{SelectContainer_es_gcm20n4I.js → SelectContainer_es_BpYwQ-do.js} +2 -2
@@ -1,1377 +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
- /* sr-only utility class for accessibility */
16
- .react-datepicker__sr-only {
17
- position: absolute;
18
- width: 1px;
19
- height: 1px;
20
- padding: 0;
21
- margin: -1px;
22
- overflow: hidden;
23
- clip-path: inset(50%);
24
- white-space: nowrap;
25
- border: 0;
26
- }
27
- .react-datepicker-wrapper {
28
- display: inline-block;
29
- padding: 0;
30
- border: 0;
31
- }
32
- .react-datepicker {
33
- font-family: "Helvetica Neue", helvetica, arial, sans-serif;
34
- font-size: 0.8rem;
35
- background-color: #fff;
36
- color: #000;
37
- border: 1px solid #aeaeae;
38
- border-radius: 0.3rem;
39
- display: inline-block;
40
- position: relative;
41
- line-height: initial;
42
- }
43
- .react-datepicker--time-only .react-datepicker__time-container {
44
- border-left: 0;
45
- }
46
- .react-datepicker--time-only .react-datepicker__time,
47
- .react-datepicker--time-only .react-datepicker__time-box {
48
- border-bottom-left-radius: 0.3rem;
49
- border-bottom-right-radius: 0.3rem;
50
- }
51
- .react-datepicker-popper {
52
- z-index: 1;
53
- line-height: 0;
54
- }
55
- .react-datepicker-popper .react-datepicker__triangle {
56
- stroke: #aeaeae;
57
- }
58
- .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle {
59
- fill: #f0f0f0;
60
- color: #f0f0f0;
61
- }
62
- .react-datepicker-popper[data-placement^=top] .react-datepicker__triangle {
63
- fill: #fff;
64
- color: #fff;
65
- }
66
- .react-datepicker__header {
67
- text-align: center;
68
- background-color: #f0f0f0;
69
- border-bottom: 1px solid #aeaeae;
70
- border-top-left-radius: 0.3rem;
71
- padding: 8px 0;
72
- position: relative;
73
- }
74
- .react-datepicker__header--time {
75
- padding-bottom: 8px;
76
- padding-left: 5px;
77
- padding-right: 5px;
78
- }
79
- .react-datepicker__header--time:not(.react-datepicker__header--time--only) {
80
- border-top-left-radius: 0;
81
- }
82
- .react-datepicker__header:not(.react-datepicker__header--has-time-select) {
83
- border-top-right-radius: 0.3rem;
84
- }
85
- .react-datepicker__year-dropdown-container--select,
86
- .react-datepicker__month-dropdown-container--select,
87
- .react-datepicker__month-year-dropdown-container--select,
88
- .react-datepicker__year-dropdown-container--scroll,
89
- .react-datepicker__month-dropdown-container--scroll,
90
- .react-datepicker__month-year-dropdown-container--scroll {
91
- display: inline-block;
92
- margin: 0 15px;
93
- }
94
- .react-datepicker__current-month,
95
- .react-datepicker-time__header,
96
- .react-datepicker-year-header {
97
- margin-top: 0;
98
- color: #000;
99
- font-weight: bold;
100
- font-size: 0.944rem;
101
- }
102
- h2.react-datepicker__current-month {
103
- padding: 0;
104
- margin: 0;
105
- }
106
- .react-datepicker-time__header {
107
- text-overflow: ellipsis;
108
- white-space: nowrap;
109
- overflow: hidden;
110
- }
111
- .react-datepicker__navigation {
112
- align-items: center;
113
- background: none;
114
- display: flex;
115
- justify-content: center;
116
- text-align: center;
117
- cursor: pointer;
118
- position: absolute;
119
- top: 2px;
120
- padding: 0;
121
- border: none;
122
- z-index: 1;
123
- height: 32px;
124
- width: 32px;
125
- text-indent: -999em;
126
- overflow: hidden;
127
- }
128
- .react-datepicker__navigation--previous {
129
- left: 2px;
130
- }
131
- .react-datepicker__navigation--next {
132
- right: 2px;
133
- }
134
- .react-datepicker__navigation--next--with-time:not(.react-datepicker__navigation--next--with-today-button) {
135
- right: 85px;
136
- }
137
- .react-datepicker__navigation--years {
138
- position: relative;
139
- top: 0;
140
- display: block;
141
- margin-left: auto;
142
- margin-right: auto;
143
- }
144
- .react-datepicker__navigation--years-previous {
145
- top: 4px;
146
- }
147
- .react-datepicker__navigation--years-upcoming {
148
- top: -4px;
149
- }
150
- .react-datepicker__navigation:hover *::before {
151
- border-color: rgb(165.75, 165.75, 165.75);
152
- }
153
- .react-datepicker__navigation-icon {
154
- position: relative;
155
- top: -1px;
156
- font-size: 20px;
157
- width: 0;
158
- }
159
- .react-datepicker__navigation-icon--next {
160
- left: -2px;
161
- }
162
- .react-datepicker__navigation-icon--next::before {
163
- transform: rotate(45deg);
164
- left: -7px;
165
- }
166
- .react-datepicker__navigation-icon--previous {
167
- right: -2px;
168
- }
169
- .react-datepicker__navigation-icon--previous::before {
170
- transform: rotate(225deg);
171
- right: -7px;
172
- }
173
- .react-datepicker__month-container {
174
- float: left;
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
- .react-datepicker__month {
191
- margin: 0.4rem;
192
- text-align: center;
193
- }
194
- .react-datepicker__month .react-datepicker__month-text,
195
- .react-datepicker__month .react-datepicker__quarter-text {
196
- display: inline-block;
197
- width: 4rem;
198
- margin: 2px;
199
- }
200
- .react-datepicker__input-time-container {
201
- clear: both;
202
- width: 100%;
203
- float: left;
204
- margin: 5px 0 10px 15px;
205
- text-align: left;
206
- }
207
- .react-datepicker__input-time-container .react-datepicker-time__caption {
208
- display: inline-block;
209
- }
210
- .react-datepicker__input-time-container .react-datepicker-time__input-container {
211
- display: inline-block;
212
- }
213
- .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input {
214
- display: inline-block;
215
- margin-left: 10px;
216
- }
217
- .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input {
218
- width: auto;
219
- }
220
- .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time]::-webkit-inner-spin-button,
221
- .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time]::-webkit-outer-spin-button {
222
- -webkit-appearance: none;
223
- margin: 0;
224
- }
225
- .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time] {
226
- -moz-appearance: textfield;
227
- }
228
- .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__delimiter {
229
- margin-left: 5px;
230
- display: inline-block;
231
- }
232
- .react-datepicker__time-container {
233
- float: right;
234
- border-left: 1px solid #aeaeae;
235
- width: 85px;
236
- }
237
- .react-datepicker__time-container--with-today-button {
238
- display: inline;
239
- border: 1px solid #aeaeae;
240
- border-radius: 0.3rem;
241
- position: absolute;
242
- right: -87px;
243
- top: 0;
244
- }
245
- .react-datepicker__time-container .react-datepicker__time {
246
- position: relative;
247
- background: white;
248
- border-bottom-right-radius: 0.3rem;
249
- }
250
- .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box {
251
- width: 85px;
252
- overflow-x: hidden;
253
- margin: 0 auto;
254
- text-align: center;
255
- border-bottom-right-radius: 0.3rem;
256
- }
257
- .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list {
258
- list-style: none;
259
- margin: 0;
260
- height: calc(195px + 1.7rem / 2);
261
- overflow-y: scroll;
262
- padding-right: 0;
263
- padding-left: 0;
264
- width: 100%;
265
- box-sizing: content-box;
266
- }
267
- .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item {
268
- height: 30px;
269
- padding: 5px 10px;
270
- white-space: nowrap;
271
- }
272
- .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item:hover {
273
- cursor: pointer;
274
- background-color: #f0f0f0;
275
- }
276
- .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected {
277
- background-color: #216ba5;
278
- color: white;
279
- font-weight: bold;
280
- }
281
- .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected:hover {
282
- background-color: #216ba5;
283
- }
284
- .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled {
285
- color: #ccc;
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:hover {
288
- cursor: default;
289
- background-color: transparent;
290
- }
291
- .react-datepicker__week-number {
292
- color: #ccc;
293
- display: inline-block;
294
- width: 1.7rem;
295
- line-height: 1.7rem;
296
- text-align: center;
297
- margin: 0.166rem;
298
- }
299
- .react-datepicker__week-number.react-datepicker__week-number--clickable {
300
- cursor: pointer;
301
- }
302
- .react-datepicker__week-number.react-datepicker__week-number--clickable:not(.react-datepicker__week-number--selected):hover {
303
- border-radius: 0.3rem;
304
- background-color: #f0f0f0;
305
- }
306
- .react-datepicker__week-number--selected {
307
- border-radius: 0.3rem;
308
- background-color: #216ba5;
309
- color: #fff;
310
- }
311
- .react-datepicker__week-number--selected:hover {
312
- background-color: rgb(28.75, 93.2196969697, 143.75);
313
- }
314
- .react-datepicker__day-names {
315
- text-align: center;
316
- white-space: nowrap;
317
- margin-bottom: -8px;
318
- }
319
- .react-datepicker__week {
320
- white-space: nowrap;
321
- }
322
- .react-datepicker__day-name,
323
- .react-datepicker__day,
324
- .react-datepicker__time-name {
325
- color: #000;
326
- display: inline-block;
327
- width: 1.7rem;
328
- line-height: 1.7rem;
329
- text-align: center;
330
- margin: 0.166rem;
331
- }
332
- .react-datepicker__day-name--disabled,
333
- .react-datepicker__day--disabled,
334
- .react-datepicker__time-name--disabled {
335
- cursor: default;
336
- color: #ccc;
337
- }
338
- .react-datepicker__day,
339
- .react-datepicker__month-text,
340
- .react-datepicker__quarter-text,
341
- .react-datepicker__year-text {
342
- cursor: pointer;
343
- }
344
- .react-datepicker__day:not([aria-disabled=true]):hover,
345
- .react-datepicker__month-text:not([aria-disabled=true]):hover,
346
- .react-datepicker__quarter-text:not([aria-disabled=true]):hover,
347
- .react-datepicker__year-text:not([aria-disabled=true]):hover {
348
- border-radius: 0.3rem;
349
- background-color: #f0f0f0;
350
- }
351
- .react-datepicker__day--today,
352
- .react-datepicker__month-text--today,
353
- .react-datepicker__quarter-text--today,
354
- .react-datepicker__year-text--today {
355
- font-weight: bold;
356
- }
357
- .react-datepicker__day--highlighted,
358
- .react-datepicker__month-text--highlighted,
359
- .react-datepicker__quarter-text--highlighted,
360
- .react-datepicker__year-text--highlighted {
361
- border-radius: 0.3rem;
362
- background-color: #3dcc4a;
363
- color: #fff;
364
- }
365
- .react-datepicker__day--highlighted:not([aria-disabled=true]):hover,
366
- .react-datepicker__month-text--highlighted:not([aria-disabled=true]):hover,
367
- .react-datepicker__quarter-text--highlighted:not([aria-disabled=true]):hover,
368
- .react-datepicker__year-text--highlighted:not([aria-disabled=true]):hover {
369
- background-color: rgb(49.8551020408, 189.6448979592, 62.5632653061);
370
- }
371
- .react-datepicker__day--highlighted-custom-1,
372
- .react-datepicker__month-text--highlighted-custom-1,
373
- .react-datepicker__quarter-text--highlighted-custom-1,
374
- .react-datepicker__year-text--highlighted-custom-1 {
375
- color: magenta;
376
- }
377
- .react-datepicker__day--highlighted-custom-2,
378
- .react-datepicker__month-text--highlighted-custom-2,
379
- .react-datepicker__quarter-text--highlighted-custom-2,
380
- .react-datepicker__year-text--highlighted-custom-2 {
381
- color: green;
382
- }
383
- .react-datepicker__day--holidays,
384
- .react-datepicker__month-text--holidays,
385
- .react-datepicker__quarter-text--holidays,
386
- .react-datepicker__year-text--holidays {
387
- position: relative;
388
- border-radius: 0.3rem;
389
- background-color: #ff6803;
390
- color: #fff;
391
- }
392
- .react-datepicker__day--holidays .overlay,
393
- .react-datepicker__month-text--holidays .overlay,
394
- .react-datepicker__quarter-text--holidays .overlay,
395
- .react-datepicker__year-text--holidays .overlay {
396
- position: absolute;
397
- bottom: 100%;
398
- left: 50%;
399
- transform: translateX(-50%);
400
- background-color: #333;
401
- color: #fff;
402
- padding: 4px;
403
- border-radius: 4px;
404
- white-space: nowrap;
405
- visibility: hidden;
406
- opacity: 0;
407
- transition: visibility 0s, opacity 0.3s ease-in-out;
408
- }
409
- .react-datepicker__day--holidays:not([aria-disabled=true]):hover,
410
- .react-datepicker__month-text--holidays:not([aria-disabled=true]):hover,
411
- .react-datepicker__quarter-text--holidays:not([aria-disabled=true]):hover,
412
- .react-datepicker__year-text--holidays:not([aria-disabled=true]):hover {
413
- background-color: rgb(207, 82.9642857143, 0);
414
- }
415
- .react-datepicker__day--holidays:hover .overlay,
416
- .react-datepicker__month-text--holidays:hover .overlay,
417
- .react-datepicker__quarter-text--holidays:hover .overlay,
418
- .react-datepicker__year-text--holidays:hover .overlay {
419
- visibility: visible;
420
- opacity: 1;
421
- }
422
- .react-datepicker__day--selected, .react-datepicker__day--in-selecting-range, .react-datepicker__day--in-range,
423
- .react-datepicker__month-text--selected,
424
- .react-datepicker__month-text--in-selecting-range,
425
- .react-datepicker__month-text--in-range,
426
- .react-datepicker__quarter-text--selected,
427
- .react-datepicker__quarter-text--in-selecting-range,
428
- .react-datepicker__quarter-text--in-range,
429
- .react-datepicker__year-text--selected,
430
- .react-datepicker__year-text--in-selecting-range,
431
- .react-datepicker__year-text--in-range {
432
- border-radius: 0.3rem;
433
- background-color: #216ba5;
434
- color: #fff;
435
- }
436
- .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,
437
- .react-datepicker__month-text--selected:not([aria-disabled=true]):hover,
438
- .react-datepicker__month-text--in-selecting-range:not([aria-disabled=true]):hover,
439
- .react-datepicker__month-text--in-range:not([aria-disabled=true]):hover,
440
- .react-datepicker__quarter-text--selected:not([aria-disabled=true]):hover,
441
- .react-datepicker__quarter-text--in-selecting-range:not([aria-disabled=true]):hover,
442
- .react-datepicker__quarter-text--in-range:not([aria-disabled=true]):hover,
443
- .react-datepicker__year-text--selected:not([aria-disabled=true]):hover,
444
- .react-datepicker__year-text--in-selecting-range:not([aria-disabled=true]):hover,
445
- .react-datepicker__year-text--in-range:not([aria-disabled=true]):hover {
446
- background-color: rgb(28.75, 93.2196969697, 143.75);
447
- }
448
- .react-datepicker__day--keyboard-selected,
449
- .react-datepicker__month-text--keyboard-selected,
450
- .react-datepicker__quarter-text--keyboard-selected,
451
- .react-datepicker__year-text--keyboard-selected {
452
- border-radius: 0.3rem;
453
- background-color: rgb(186.25, 217.0833333333, 241.25);
454
- color: rgb(0, 0, 0);
455
- }
456
- .react-datepicker__day--keyboard-selected:not([aria-disabled=true]):hover,
457
- .react-datepicker__month-text--keyboard-selected:not([aria-disabled=true]):hover,
458
- .react-datepicker__quarter-text--keyboard-selected:not([aria-disabled=true]):hover,
459
- .react-datepicker__year-text--keyboard-selected:not([aria-disabled=true]):hover {
460
- background-color: rgb(28.75, 93.2196969697, 143.75);
461
- }
462
- .react-datepicker__day--in-selecting-range:not(.react-datepicker__day--in-range,
463
- .react-datepicker__month-text--in-range,
464
- .react-datepicker__quarter-text--in-range,
465
- .react-datepicker__year-text--in-range),
466
- .react-datepicker__month-text--in-selecting-range:not(.react-datepicker__day--in-range,
467
- .react-datepicker__month-text--in-range,
468
- .react-datepicker__quarter-text--in-range,
469
- .react-datepicker__year-text--in-range),
470
- .react-datepicker__quarter-text--in-selecting-range:not(.react-datepicker__day--in-range,
471
- .react-datepicker__month-text--in-range,
472
- .react-datepicker__quarter-text--in-range,
473
- .react-datepicker__year-text--in-range),
474
- .react-datepicker__year-text--in-selecting-range:not(.react-datepicker__day--in-range,
475
- .react-datepicker__month-text--in-range,
476
- .react-datepicker__quarter-text--in-range,
477
- .react-datepicker__year-text--in-range) {
478
- background-color: rgba(33, 107, 165, 0.5);
479
- }
480
- .react-datepicker__month--selecting-range .react-datepicker__day--in-range:not(.react-datepicker__day--in-selecting-range,
481
- .react-datepicker__month-text--in-selecting-range,
482
- .react-datepicker__quarter-text--in-selecting-range,
483
- .react-datepicker__year-text--in-selecting-range), .react-datepicker__year--selecting-range .react-datepicker__day--in-range:not(.react-datepicker__day--in-selecting-range,
484
- .react-datepicker__month-text--in-selecting-range,
485
- .react-datepicker__quarter-text--in-selecting-range,
486
- .react-datepicker__year-text--in-selecting-range),
487
- .react-datepicker__month--selecting-range .react-datepicker__month-text--in-range:not(.react-datepicker__day--in-selecting-range,
488
- .react-datepicker__month-text--in-selecting-range,
489
- .react-datepicker__quarter-text--in-selecting-range,
490
- .react-datepicker__year-text--in-selecting-range),
491
- .react-datepicker__year--selecting-range .react-datepicker__month-text--in-range:not(.react-datepicker__day--in-selecting-range,
492
- .react-datepicker__month-text--in-selecting-range,
493
- .react-datepicker__quarter-text--in-selecting-range,
494
- .react-datepicker__year-text--in-selecting-range),
495
- .react-datepicker__month--selecting-range .react-datepicker__quarter-text--in-range:not(.react-datepicker__day--in-selecting-range,
496
- .react-datepicker__month-text--in-selecting-range,
497
- .react-datepicker__quarter-text--in-selecting-range,
498
- .react-datepicker__year-text--in-selecting-range),
499
- .react-datepicker__year--selecting-range .react-datepicker__quarter-text--in-range:not(.react-datepicker__day--in-selecting-range,
500
- .react-datepicker__month-text--in-selecting-range,
501
- .react-datepicker__quarter-text--in-selecting-range,
502
- .react-datepicker__year-text--in-selecting-range),
503
- .react-datepicker__month--selecting-range .react-datepicker__year-text--in-range:not(.react-datepicker__day--in-selecting-range,
504
- .react-datepicker__month-text--in-selecting-range,
505
- .react-datepicker__quarter-text--in-selecting-range,
506
- .react-datepicker__year-text--in-selecting-range),
507
- .react-datepicker__year--selecting-range .react-datepicker__year-text--in-range:not(.react-datepicker__day--in-selecting-range,
508
- .react-datepicker__month-text--in-selecting-range,
509
- .react-datepicker__quarter-text--in-selecting-range,
510
- .react-datepicker__year-text--in-selecting-range) {
511
- background-color: #f0f0f0;
512
- color: #000;
513
- }
514
- .react-datepicker__day--disabled,
515
- .react-datepicker__month-text--disabled,
516
- .react-datepicker__quarter-text--disabled,
517
- .react-datepicker__year-text--disabled {
518
- cursor: default;
519
- color: #ccc;
520
- }
521
- .react-datepicker__day--disabled .overlay,
522
- .react-datepicker__month-text--disabled .overlay,
523
- .react-datepicker__quarter-text--disabled .overlay,
524
- .react-datepicker__year-text--disabled .overlay {
525
- position: absolute;
526
- bottom: 70%;
527
- left: 50%;
528
- transform: translateX(-50%);
529
- background-color: #333;
530
- color: #fff;
531
- padding: 4px;
532
- border-radius: 4px;
533
- white-space: nowrap;
534
- visibility: hidden;
535
- opacity: 0;
536
- transition: visibility 0s, opacity 0.3s ease-in-out;
537
- }
538
- .react-datepicker__input-container {
539
- position: relative;
540
- display: inline-block;
541
- width: 100%;
542
- }
543
- .react-datepicker__input-container .react-datepicker__calendar-icon {
544
- position: absolute;
545
- padding: 0.5rem;
546
- box-sizing: content-box;
547
- }
548
- .react-datepicker__view-calendar-icon input {
549
- padding: 6px 10px 5px 25px;
550
- }
551
- .react-datepicker__year-read-view,
552
- .react-datepicker__month-read-view,
553
- .react-datepicker__month-year-read-view {
554
- border: 1px solid transparent;
555
- border-radius: 0.3rem;
556
- position: relative;
557
- }
558
- .react-datepicker__year-read-view:hover,
559
- .react-datepicker__month-read-view:hover,
560
- .react-datepicker__month-year-read-view:hover {
561
- cursor: pointer;
562
- }
563
- .react-datepicker__year-read-view:hover .react-datepicker__year-read-view--down-arrow,
564
- .react-datepicker__year-read-view:hover .react-datepicker__month-read-view--down-arrow,
565
- .react-datepicker__month-read-view:hover .react-datepicker__year-read-view--down-arrow,
566
- .react-datepicker__month-read-view:hover .react-datepicker__month-read-view--down-arrow,
567
- .react-datepicker__month-year-read-view:hover .react-datepicker__year-read-view--down-arrow,
568
- .react-datepicker__month-year-read-view:hover .react-datepicker__month-read-view--down-arrow {
569
- border-top-color: rgb(178.5, 178.5, 178.5);
570
- }
571
- .react-datepicker__year-read-view--down-arrow,
572
- .react-datepicker__month-read-view--down-arrow,
573
- .react-datepicker__month-year-read-view--down-arrow {
574
- transform: rotate(135deg);
575
- right: -16px;
576
- top: 0;
577
- }
578
- .react-datepicker__year-dropdown,
579
- .react-datepicker__month-dropdown,
580
- .react-datepicker__month-year-dropdown {
581
- background-color: #f0f0f0;
582
- position: absolute;
583
- width: 50%;
584
- left: 25%;
585
- top: 30px;
586
- z-index: 1;
587
- text-align: center;
588
- border-radius: 0.3rem;
589
- border: 1px solid #aeaeae;
590
- }
591
- .react-datepicker__year-dropdown:hover,
592
- .react-datepicker__month-dropdown:hover,
593
- .react-datepicker__month-year-dropdown:hover {
594
- cursor: pointer;
595
- }
596
- .react-datepicker__year-dropdown--scrollable,
597
- .react-datepicker__month-dropdown--scrollable,
598
- .react-datepicker__month-year-dropdown--scrollable {
599
- height: 150px;
600
- overflow-y: scroll;
601
- }
602
- .react-datepicker__year-option,
603
- .react-datepicker__month-option,
604
- .react-datepicker__month-year-option {
605
- line-height: 20px;
606
- width: 100%;
607
- display: block;
608
- margin-left: auto;
609
- margin-right: auto;
610
- }
611
- .react-datepicker__year-option:first-of-type,
612
- .react-datepicker__month-option:first-of-type,
613
- .react-datepicker__month-year-option:first-of-type {
614
- border-top-left-radius: 0.3rem;
615
- border-top-right-radius: 0.3rem;
616
- }
617
- .react-datepicker__year-option:last-of-type,
618
- .react-datepicker__month-option:last-of-type,
619
- .react-datepicker__month-year-option:last-of-type {
620
- -webkit-user-select: none;
621
- -moz-user-select: none;
622
- -ms-user-select: none;
623
- user-select: none;
624
- border-bottom-left-radius: 0.3rem;
625
- border-bottom-right-radius: 0.3rem;
626
- }
627
- .react-datepicker__year-option:hover,
628
- .react-datepicker__month-option:hover,
629
- .react-datepicker__month-year-option:hover {
630
- background-color: #ccc;
631
- }
632
- .react-datepicker__year-option:hover .react-datepicker__navigation--years-upcoming,
633
- .react-datepicker__month-option:hover .react-datepicker__navigation--years-upcoming,
634
- .react-datepicker__month-year-option:hover .react-datepicker__navigation--years-upcoming {
635
- border-bottom-color: rgb(178.5, 178.5, 178.5);
636
- }
637
- .react-datepicker__year-option:hover .react-datepicker__navigation--years-previous,
638
- .react-datepicker__month-option:hover .react-datepicker__navigation--years-previous,
639
- .react-datepicker__month-year-option:hover .react-datepicker__navigation--years-previous {
640
- border-top-color: rgb(178.5, 178.5, 178.5);
641
- }
642
- .react-datepicker__year-option--selected,
643
- .react-datepicker__month-option--selected,
644
- .react-datepicker__month-year-option--selected {
645
- position: absolute;
646
- left: 15px;
647
- }
648
- .react-datepicker__close-icon {
649
- cursor: pointer;
650
- background-color: transparent;
651
- border: 0;
652
- outline: 0;
653
- padding: 0 6px 0 0;
654
- position: absolute;
655
- top: 0;
656
- right: 0;
657
- height: 100%;
658
- display: table-cell;
659
- vertical-align: middle;
660
- }
661
- .react-datepicker__close-icon::after {
662
- cursor: pointer;
663
- background-color: #216ba5;
664
- color: #fff;
665
- border-radius: 50%;
666
- height: 16px;
667
- width: 16px;
668
- padding: 2px;
669
- font-size: 12px;
670
- line-height: 1;
671
- text-align: center;
672
- display: table-cell;
673
- vertical-align: middle;
674
- content: "×";
675
- }
676
- .react-datepicker__close-icon--disabled {
677
- cursor: default;
678
- }
679
- .react-datepicker__close-icon--disabled::after {
680
- cursor: default;
681
- background-color: #ccc;
682
- }
683
- .react-datepicker__today-button {
684
- background: #f0f0f0;
685
- border-top: 1px solid #aeaeae;
686
- cursor: pointer;
687
- text-align: center;
688
- font-weight: bold;
689
- padding: 5px 0;
690
- clear: left;
691
- }
692
- .react-datepicker__portal {
693
- position: fixed;
694
- width: 100vw;
695
- height: 100vh;
696
- background-color: rgba(0, 0, 0, 0.8);
697
- left: 0;
698
- top: 0;
699
- justify-content: center;
700
- align-items: center;
701
- display: flex;
702
- z-index: 2147483647;
703
- }
704
- .react-datepicker__portal .react-datepicker__day-name,
705
- .react-datepicker__portal .react-datepicker__day,
706
- .react-datepicker__portal .react-datepicker__time-name {
707
- width: 3rem;
708
- line-height: 3rem;
709
- }
710
- @media (max-width: 400px), (max-height: 550px) {
711
- .react-datepicker__portal .react-datepicker__day-name,
712
- .react-datepicker__portal .react-datepicker__day,
713
- .react-datepicker__portal .react-datepicker__time-name {
714
- width: 2rem;
715
- line-height: 2rem;
716
- }
717
- }
718
- .react-datepicker__portal .react-datepicker__current-month,
719
- .react-datepicker__portal .react-datepicker-time__header {
720
- font-size: 1.44rem;
721
- }
722
- .react-datepicker__children-container {
723
- width: 13.8rem;
724
- margin: 0.4rem;
725
- padding-right: 0.2rem;
726
- padding-left: 0.2rem;
727
- height: auto;
728
- }
729
- .react-datepicker__aria-live {
730
- position: absolute;
731
- clip-path: circle(0);
732
- border: 0;
733
- height: 1px;
734
- margin: -1px;
735
- overflow: hidden;
736
- padding: 0;
737
- width: 1px;
738
- white-space: nowrap;
739
- }
740
- .react-datepicker__calendar-icon {
741
- width: 1em;
742
- height: 1em;
743
- vertical-align: -0.125em;
744
- }
745
- .react-datepicker {
746
- font-size: inherit;
747
- background: var(--date-picker-fill);
748
- border: none;
749
- border-radius: var(--date-picker-border-radius);
750
- display: flex;
751
- box-shadow: var(--date-picker-box-shadow);
752
- &__triangle {
753
- display: none;
754
- }
755
- &__tab-loop {
756
- ^&-popper {
757
- z-index: 1000 !important;
758
- &-left {
759
- left: 0 !important;
760
- top: 44px !important;
761
- right: auto !important;
762
- z-index: 1000 !important;
763
- transform: none !important;
764
- }
765
- &-right {
766
- left: auto !important;
767
- top: 44px !important;
768
- right: 0 !important;
769
- z-index: 1000 !important;
770
- transform: none !important;
771
- }
772
- }
773
- }
774
- &__header {
775
- background: var(--date-picker-background);
776
- padding: 0;
777
- border: none;
778
- &--time {
779
- padding: 0;
780
- }
781
- }
782
- &__month {
783
- margin: 0;
784
- &-container {
785
- padding: var(--date-picker-padding);
786
- margin: 0;
787
- ^^&__header {
788
- padding: 0;
789
- border-radius: 0;
790
- border-bottom: none;
791
- display: flex;
792
- flex-direction: column;
793
- gap: 12px;
794
- background-color: transparent;
795
- &--div {
796
- display: flex;
797
- justify-content: space-between;
798
- align-items: center;
799
- ^^^^&__data {
800
- display: flex;
801
- flex: 1;
802
- justify-content: center;
803
- align-items: center;
804
- gap: 12px;
805
- ^^^^^&__month {
806
- &::first-letter {
807
- text-transform: uppercase;
808
- }
809
- }
810
- ^^^^^&__year {
811
- margin: 0;
812
- }
813
- }
814
- }
815
- &--time {
816
- padding: 0;
817
- }
818
- ^^^&__week {
819
- &-number {
820
- width: var(--date-picker-week-width);
821
- height: var(--date-picker-week-height);
822
- font-size: var(--date-picker-week-text-size);
823
- font-weight: var(--date-picker-week-text-weight);
824
- color: var(--date-picker-week-text-color);
825
- line-height: var(--date-picker-week-text-line-height);
826
- margin: 0;
827
- display: flex;
828
- justify-content: center;
829
- align-items: center;
830
- }
831
- }
832
- }
833
- ^^&__day {
834
- &-names {
835
- margin: 0;
836
- display: flex;
837
- }
838
- &-name {
839
- width: var(--date-picker-day-width);
840
- height: var(--date-picker-day-height);
841
- font-size: var(--date-picker-day-name-text-size);
842
- font-weight: var(--date-picker-day-name-text-weight);
843
- color: var(--date-picker-day-name-text-color);
844
- line-height: var(--date-picker-day-name-text-line-height);
845
- margin: 0;
846
- display: flex;
847
- justify-content: center;
848
- align-items: center;
849
- }
850
- }
851
- ^^&__month {
852
- ^^^&__week {
853
- display: flex;
854
- &-number {
855
- color: var(--date-picker-week-number-text-color);
856
- width: var(--date-picker-day-width);
857
- height: var(--date-picker-day-height);
858
- border-radius: var(--date-picker-day-border-radius);
859
- display: flex;
860
- justify-content: center;
861
- align-items: center;
862
- margin: 0;
863
- font-size: var(--date-picker-day-text-size);
864
- font-weight: var(--date-picker-day-text-weight);
865
- line-height: var(--date-picker-day-text-line-height);
866
- &:hover {
867
- background: var(--date-picker-week-number-fill-hover);
868
- cursor: pointer;
869
- }
870
- }
871
- ^^^^&__day {
872
- width: var(--date-picker-day-width);
873
- height: var(--date-picker-day-height);
874
- margin: 0;
875
- border-radius: var(--date-picker-day-border-radius);
876
- display: flex;
877
- justify-content: center;
878
- align-items: center;
879
- &:hover {
880
- color: var(--date-picker-day-hover-text-color);
881
- background: var(--date-picker-day-hover-background);
882
- }
883
- &:focus {
884
- outline: none;
885
- }
886
- & .button__label {
887
- color: var(--date-picker-day-text-color);
888
- font-size: var(--date-picker-day-text-size);
889
- font-weight: var(--date-picker-day-text-weight);
890
- line-height: var(--date-picker-day-text-line-height);
891
- cursor: pointer !important;
892
- }
893
- &--disabled {
894
- background: var(--date-picker-day-outside-background) !important;
895
- cursor: default !important;
896
- & .button__label {
897
- color: var(--date-picker-day-outside-text-color) !important;
898
- cursor: default !important;
899
- }
900
- }
901
- &--in-selecting-range:not(
902
- .react-datepicker__day--in-range,
903
- .react-datepicker__month-text--in-range,
904
- .react-datepicker__quarter-text--in-range,
905
- .react-datepicker__year-text--in-range
906
- ) {
907
- background: var(--date-picker-day-selected-background);
908
- & .button__label {
909
- color: var(--date-picker-day-selected-text-color);
910
- }
911
- }
912
- &--in-range {
913
- background: var(--date-picker-day-selected-background);
914
- border-radius: 0;
915
- &:hover {
916
- background: var(--date-picker-day-selected-background-hover);
917
- & .button__label {
918
- color: var(--date-picker-day-selected-text-color) !important;
919
- }
920
- }
921
- & .button__label {
922
- color: var(--date-picker-day-selected-text-color);
923
- }
924
- }
925
- &--in-selecting-range,
926
- &--selecting-range,
927
- &--range {
928
- background-color: var(
929
- --date-picker-day-range-background
930
- ) !important;
931
- border-radius: var(
932
- --date-picker-day-range-border-radius
933
- ) !important;
934
- & .button__label {
935
- color: var(--date-picker-day-range-text-color) !important;
936
- }
937
- &-start {
938
- border-radius: var(
939
- --date-picker-day-range-start-border-radius
940
- ) !important;
941
- &:hover {
942
- background: var(--date-picker-day-selected-background-hover);
943
- border-radius: var(
944
- --date-picker-day-range-start-border-radius
945
- ) !important;
946
- }
947
- }
948
- &-end {
949
- border-radius: var(
950
- --date-picker-day-range-end-border-radius
951
- ) !important;
952
- &:hover {
953
- border-radius: var(
954
- --date-picker-day-range-end-border-radius
955
- ) !important;
956
- }
957
- }
958
- &-start.react-datepicker__day--range-end {
959
- border-radius: var(
960
- --date-picker-day-range-start-end-border-radius
961
- ) !important;
962
- &:hover {
963
- border-radius: var(
964
- --date-picker-day-range-start-end-border-radius
965
- ) !important;
966
- }
967
- &.react-datepicker__day--today {
968
- border-radius: var(
969
- --date-picker-day-today-border-radius
970
- ) !important;
971
- &:hover {
972
- border-radius: var(
973
- --date-picker-day-today-border-radius
974
- ) !important;
975
- }
976
- }
977
- }
978
- &.react-datepicker__day--selecting-range-start.react-datepicker__day--selecting-range-end {
979
- border-radius: var(
980
- --date-picker-day-range-start-end-border-radius
981
- ) !important;
982
- &:hover {
983
- border-radius: var(
984
- --date-picker-day-range-start-end-border-radius
985
- ) !important;
986
- }
987
- }
988
- }
989
- &--today {
990
- background: var(--date-picker-day-today-background);
991
- &:hover {
992
- background: var(--date-picker-day-hover-background);
993
- }
994
- & .button__label {
995
- color: var(--date-picker-day-today-text-color);
996
- }
997
- &.react-datepicker__day--in-range {
998
- background: var(--date-picker-day-selected-background);
999
- border-radius: 0;
1000
- &:hover {
1001
- background: var(--date-picker-day-selected-background-hover);
1002
- & .button__label {
1003
- color: var(
1004
- --date-picker-day-selected-text-color
1005
- ) !important;
1006
- }
1007
- }
1008
- & .button__label {
1009
- color: var(--date-picker-day-selected-text-color);
1010
- }
1011
- }
1012
- &.react-datepicker__day--range {
1013
- background-color: var(
1014
- --date-picker-day-range-background
1015
- ) !important;
1016
- border-radius: var(
1017
- --date-picker-day-range-border-radius
1018
- ) !important;
1019
- & .button__label {
1020
-
1021
- color: var(--date-picker-day-range-text-color) !important;
1022
- }
1023
- &-start {
1024
- border-radius: var(
1025
- --date-picker-day-range-start-border-radius
1026
- ) !important;
1027
- &:hover {
1028
- border-radius: var(
1029
- --date-picker-day-range-start-border-radius
1030
- ) !important;
1031
- }
1032
- }
1033
- &-end {
1034
- border-radius: var(
1035
- --date-picker-day-range-end-border-radius
1036
- ) !important;
1037
- &:hover {
1038
- border-radius: var(
1039
- --date-picker-day-range-end-border-radius
1040
- ) !important;
1041
- }
1042
- }
1043
- }
1044
- }
1045
- &--today.react-datepicker__day--selecting-range-start.react-datepicker__day--selecting-range-end {
1046
- background: var(--date-picker-day-today-background);
1047
- border-radius: var(--date-picker-day-border-radius) !important;
1048
- & .button__label {
1049
- color: var(--date-picker-day-today-text-color);
1050
- }
1051
- }
1052
- &--keyboard-selected {
1053
- color: var(--date-picker-day-hover-text-color);
1054
- background: var(--date-picker-day-hover-background);
1055
- }
1056
- &--selected {
1057
- background: var(--date-picker-day-selected-background);
1058
- &:hover {
1059
- background: var(--date-picker-day-selected-background-hover);
1060
- }
1061
- & .button__label {
1062
- color: var(--date-picker-day-selected-text-color);
1063
- }
1064
- }
1065
- &--weekend {
1066
- background: var(--date-picker-day-weekend-background);
1067
- &:hover {
1068
- background: var(--date-picker-day-hover-background);
1069
- }
1070
- & .button__label {
1071
- color: var(--date-picker-day-weekend-text-color);
1072
- }
1073
- &.react-datepicker__day--selected {
1074
- background: var(--date-picker-day-selected-background);
1075
-
1076
- &:hover {
1077
- background: var(
1078
- --date-picker-day-selected-background
1079
- ) !important;
1080
- & .button__label {
1081
- color: var(--date-picker-day-selected-text-hover-color) !important;
1082
- }
1083
- }
1084
- & .button__label {
1085
- color: var(--date-picker-day-selected-text-color);
1086
- }
1087
- }
1088
- &.react-datepicker__day--outside-month {
1089
- & .button__label {
1090
- color: var(
1091
- --date-picker-day-weekend-outside-text-color
1092
- ) !important;
1093
- }
1094
- }
1095
- &.react-datepicker__day--in-range {
1096
- background: var(--date-picker-day-selected-background);
1097
- border-radius: 0;
1098
- &:hover {
1099
- background: var(--date-picker-day-selected-background-hover);
1100
- & .button__label {
1101
-
1102
- color: var(
1103
- --date-picker-day-selected-text-color
1104
- ) !important;
1105
- }
1106
- }
1107
- & .button__label {
1108
- color: var(--date-picker-day-selected-text-color);
1109
- }
1110
- }
1111
- &.react-datepicker__day--range {
1112
- background-color: var(
1113
- --date-picker-day-range-background
1114
- ) !important;
1115
- border-radius: var(
1116
- --date-picker-day-range-border-radius
1117
- ) !important;
1118
- & .button__label {
1119
-
1120
- color: var(--date-picker-day-range-text-color) !important;
1121
- }
1122
- &-start {
1123
- border-radius: var(
1124
- --date-picker-day-range-start-border-radius
1125
- ) !important;
1126
- &:hover {
1127
- border-radius: var(
1128
- --date-picker-day-range-start-border-radius
1129
- ) !important;
1130
- }
1131
- }
1132
- &-end {
1133
- border-radius: var(
1134
- --date-picker-day-range-end-border-radius
1135
- ) !important;
1136
- &:hover {
1137
- border-radius: var(
1138
- --date-picker-day-range-end-border-radius
1139
- ) !important;
1140
- }
1141
- }
1142
- }
1143
- }
1144
- &--outside-month {
1145
- background: var(--date-picker-day-outside-background) !important;
1146
- cursor: default !important;
1147
- & .button__label {
1148
- color: var(--date-picker-day-outside-text-color) !important;
1149
- cursor: default !important;
1150
- }
1151
- }
1152
- &-button {
1153
- width: 100%;
1154
- height: 100%;
1155
- }
1156
- }
1157
- }
1158
- }
1159
- }
1160
- }
1161
- &__time {
1162
- width: 95px;
1163
- background: var(--date-picker-background) !important;
1164
- &-container {
1165
- width: auto;
1166
- padding: var(--date-picker-padding);
1167
- border-left: var(--date-picker-border);
1168
- float: none;
1169
- display: flex;
1170
- flex-direction: column;
1171
- gap: 12px;
1172
- ^&-box {
1173
- }
1174
- }
1175
- &-list {
1176
- height: 240px !important;
1177
- &-item {
1178
- max-height: var(--date-picker-day-height);
1179
- font-size: var(--date-picker-name-size);
1180
- line-height: 30px;
1181
- border-radius: var(--date-picker-day-border-radius);
1182
- &:hover {
1183
- background: var(--date-picker-day-hover-background) !important;
1184
- }
1185
- &--selected {
1186
- font-weight: var(--date-picker-selected-weight) !important;
1187
- color: var(--date-picker-day-selected-text-color) !important;
1188
- background: var(--date-picker-day-selected-background) !important;
1189
- &:hover {
1190
- background: var(--date-picker-day-selected-background) !important;
1191
- }
1192
- }
1193
- }
1194
- }
1195
- }
1196
- &__input {
1197
- &-container {
1198
- display: flex;
1199
- align-items: center;
1200
- gap: 12px;
1201
- & .input {
1202
- min-width: var(--date-picker-input-min-width);
1203
- }
1204
- }
1205
- &-time-container {
1206
- text-align: center;
1207
- padding: 4px;
1208
- margin: 0;
1209
- border-top: var(--date-picker-border);
1210
- float: none;
1211
- ^^&-time {
1212
- &__caption {
1213
- display: none;
1214
- }
1215
- &__input-container {
1216
- display: block;
1217
- ^^^^&-time__input {
1218
- margin: 0;
1219
- display: block;
1220
- }
1221
- }
1222
- }
1223
- }
1224
- }
1225
- &__clear-icon.icon {
1226
- position: absolute;
1227
- top: 50%;
1228
- right: 12px;
1229
- transform: translateY(-50%);
1230
- }
1231
- &__clear-label {
1232
- width: auto;
1233
- }
1234
- &__input-icon.icon {
1235
- background: #fff;
1236
- position: absolute;
1237
- top: 50%;
1238
- right: 12px;
1239
- transform: translateY(-50%);
1240
- }
1241
- &-wrapper {
1242
- width: 100%;
1243
- ^&__input-container {
1244
- & .input {
1245
- cursor: pointer;
1246
- }
1247
- }
1248
- }
1249
- &-time {
1250
- &__header {
1251
- min-height: 24px;
1252
- display: flex;
1253
- justify-content: center;
1254
- align-items: center;
1255
- font-size: var(--date-picker-name-size);
1256
- font-weight: var(--date-picker-name-weight);
1257
- }
1258
- }
1259
- }
1260
- .react-datepicker__week-number--selected {
1261
- background: var(--date-picker-week-number-fill-active);
1262
- }
1263
- .datepicker {
1264
- width: 100%;
1265
- border-radius: var(--date-picker-day-border-radius);
1266
- &__input {
1267
- width: 100%;
1268
- border-radius: var(--date-picker-day-border-radius);
1269
- }
1270
- }
1271
- .datepicker {
1272
- &_multiple-months {
1273
- & .react-datepicker {
1274
- &__month-container {
1275
- &:nth-last-child(2) {
1276
- & .react-datepicker__header--div {
1277
- & .react-datepicker__icon {
1278
- &:last-child {
1279
- display: none;
1280
- }
1281
- }
1282
- }
1283
- }
1284
- &:last-child {
1285
- & .react-datepicker__header--div {
1286
- & .react-datepicker__icon {
1287
- &:first-child {
1288
- display: none;
1289
- }
1290
- }
1291
- }
1292
- }
1293
- }
1294
- }
1295
- }
1296
- }
1297
- .datepicker {
1298
- &_button {
1299
- & .react-datepicker {
1300
- display: grid;
1301
- grid-template-columns: 1fr auto;
1302
- grid-template-rows: 1fr auto;
1303
- grid-column-gap: 0;
1304
- &__input-time-container {
1305
- grid-row-start: 2;
1306
- grid-column-start: span 2;
1307
- }
1308
- }
1309
- }
1310
- }
1311
- :root {
1312
- --date-picker-padding: 24px 12px;
1313
- --date-picker-fill: var(--color-surface-fill-primary);
1314
- --date-picker-box-shadow: 0px 4px 24px 0px rgb(0, 0, 0, 0.2);
1315
- --date-picker-border-radius: 12px;
1316
- --date-picker-border: solid 1px var(--color-surface-fill-tertiary);
1317
-
1318
- --date-picker-input-container-padding: 9px 15px;
1319
- --date-picker-input-border-radius: 6px;
1320
-
1321
- --date-picker-selected-weight: 400;
1322
- --date-picker-week-width: 40px;
1323
- --date-picker-week-height: 40px;
1324
- --date-picker-week-text-color: lime;
1325
- --date-picker-week-text-line-height: 20px;
1326
- --date-picker-week-text-size: 18px;
1327
- --date-picker-week-text-weight: normal;
1328
-
1329
- --date-picker-week-number-fill-hover: #eee;
1330
- --date-picker-week-number-fill-active: #eee;
1331
- --date-picker-week-number-text-color: var(--color-surface-text-quaternary);
1332
-
1333
- --date-picker-name-size: 16px;
1334
- --date-picker-name-weight: 400;
1335
- --date-picker-day-name-text-size: 16px;
1336
- --date-picker-day-name-text-line-height: 18px;
1337
- --date-picker-day-name-text-weight: normal;
1338
- --date-picker-day-name-text-color: var(--color-surface-text-quaternary);
1339
-
1340
- --date-picker-day-width: 40px;
1341
- --date-picker-day-height: 40px;
1342
- --date-picker-day-text-size: 18px;
1343
- --date-picker-day-text-line-height: 20px;
1344
- --date-picker-day-text-weight: normal;
1345
- --date-picker-day-text-color: var(--color-surface-text-primary);
1346
- --date-picker-day-padding: 8px 0;
1347
- --date-picker-day-hover-background: var(--color-accent-fill-tertiary);
1348
- --date-picker-day-hover-text-color: var(--color-surface-text-secondary);
1349
- --date-picker-day-border-radius: 8px;
1350
-
1351
- --date-picker-day-today-background: var(--color-surface-fill-secondary);
1352
- --date-picker-day-today-border-radius: 12px;
1353
- --date-picker-day-today-text-color: var(--color-surface-text-primary);
1354
-
1355
- --date-picker-day-range-start-end-border-radius: 8px;
1356
- --date-picker-day-range-background: var(--color-accent-fill-tertiary);
1357
- --date-picker-day-range-text-color: var(--color-accent-text-secondary);
1358
- --date-picker-day-range-border-radius: 0;
1359
- --date-picker-day-range-start-border-radius: 12px 0 0 12px;
1360
- --date-picker-day-range-end-border-radius: 0 12px 12px 0;
1361
-
1362
- --date-picker-day-weekend-background: var(--color-surface-fill-primary);
1363
- --date-picker-day-weekend-text-color: var(--color-secondary-text-secondary);
1364
- --date-picker-day-weekend-outside-text-color: var(
1365
- --color-secondary-text-disabled
1366
- );
1367
-
1368
- --date-picker-day-selected-background: var(--color-accent-fill-primary);
1369
- --date-picker-day-selected-background-hover: var(
1370
- --color-accent-fill-secondary
1371
- );
1372
- --date-picker-day-selected-text-color: var(--color-accent-text-primary);
1373
- --date-picker-day-selected-text-hover-color: var(--color-accent-text-primary);
1374
-
1375
- --date-picker-day-outside-background: var(--color-surface-fill-primary);
1376
- --date-picker-day-outside-text-color: var(--color-surface-text-tertiary);
1377
- }