albinasoft-ui-package 1.1.42 → 1.1.43

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 (58) hide show
  1. package/LICENSE +21 -21
  2. package/dist/assets/css/custom-autocomplete-input.css +49 -49
  3. package/dist/assets/css/custom-datatable.css +2 -2
  4. package/dist/assets/css/custom-datetime-picker.css +779 -779
  5. package/dist/assets/css/custom-progress-bar.css +37 -37
  6. package/dist/assets/css/custom-select.css +62 -62
  7. package/dist/assets/css/custom-simple-select.css +117 -117
  8. package/dist/assets/css/custom-timeline.css +43 -43
  9. package/dist/assets/css/dark.css +2159 -2159
  10. package/dist/assets/css/main.css +26664 -26664
  11. package/dist/components/AlbinaForm.d.ts +28 -28
  12. package/dist/components/AlbinaForm.js +88 -88
  13. package/dist/components/CustomAutocompleteInput.d.ts +23 -23
  14. package/dist/components/CustomAutocompleteInput.js +185 -185
  15. package/dist/components/CustomButton.d.ts +14 -14
  16. package/dist/components/CustomButton.js +98 -98
  17. package/dist/components/CustomCheckbox.d.ts +20 -20
  18. package/dist/components/CustomCheckbox.js +58 -58
  19. package/dist/components/CustomDatatable.d.ts +42 -42
  20. package/dist/components/CustomDatatable.js +92 -92
  21. package/dist/components/CustomDateTimePicker.d.ts +33 -33
  22. package/dist/components/CustomDateTimePicker.js +91 -91
  23. package/dist/components/CustomDivider.d.ts +51 -51
  24. package/dist/components/CustomDivider.js +87 -87
  25. package/dist/components/CustomFileUploader.d.ts +65 -65
  26. package/dist/components/CustomFileUploader.js +460 -460
  27. package/dist/components/CustomForm.d.ts +225 -225
  28. package/dist/components/CustomForm.js +243 -243
  29. package/dist/components/CustomInput.d.ts +37 -37
  30. package/dist/components/CustomInput.js +85 -85
  31. package/dist/components/CustomModal.d.ts +15 -15
  32. package/dist/components/CustomModal.js +17 -17
  33. package/dist/components/CustomPhoneInput.d.ts +29 -29
  34. package/dist/components/CustomPhoneInput.js +251 -251
  35. package/dist/components/CustomProgressBar.d.ts +9 -9
  36. package/dist/components/CustomProgressBar.js +40 -40
  37. package/dist/components/CustomRadioButton.d.ts +25 -25
  38. package/dist/components/CustomRadioButton.js +34 -34
  39. package/dist/components/CustomRichTextbox.d.ts +14 -14
  40. package/dist/components/CustomRichTextbox.js +89 -89
  41. package/dist/components/CustomSelect.d.ts +32 -32
  42. package/dist/components/CustomSelect.js +194 -191
  43. package/dist/components/CustomSimpleSelect.d.ts +21 -21
  44. package/dist/components/CustomSimpleSelect.js +64 -64
  45. package/dist/components/CustomTab.d.ts +44 -44
  46. package/dist/components/CustomTab.js +122 -122
  47. package/dist/components/CustomText.d.ts +72 -72
  48. package/dist/components/CustomText.js +158 -158
  49. package/dist/components/CustomTextarea.d.ts +22 -22
  50. package/dist/components/CustomTextarea.js +33 -33
  51. package/dist/components/CustomTimeline.d.ts +30 -30
  52. package/dist/components/CustomTimeline.js +80 -80
  53. package/dist/components/CustomTreeView.d.ts +22 -22
  54. package/dist/components/CustomTreeView.js +157 -157
  55. package/dist/index.d.ts +22 -22
  56. package/dist/index.js +48 -48
  57. package/package.json +44 -43
  58. package/readme.md +9 -9
@@ -1,779 +1,779 @@
1
- /* Genel Ayarlar */
2
- .react-datepicker-popper {
3
- z-index: 5;
4
- }
5
-
6
- .react-datepicker__navigation-icon::before,
7
- .react-datepicker__year-read-view--down-arrow,
8
- .react-datepicker__month-read-view--down-arrow,
9
- .react-datepicker__month-year-read-view--down-arrow {
10
- border-color: var(--bs-body-color);
11
- border-style: solid;
12
- border-width: 3px 3px 0 0;
13
- content: "";
14
- display: block;
15
- height: 9px;
16
- position: absolute;
17
- top: 6px;
18
- width: 9px;
19
- }
20
-
21
- .react-datepicker-wrapper {
22
- display: block;
23
- padding: 0;
24
- border: 0;
25
- }
26
-
27
- .react-datepicker {
28
- font-family: var(--bs-body-font-family, "Helvetica Neue", Helvetica, Arial, sans-serif);
29
- font-size: 0.8rem;
30
- background-color: var(--bs-body-bg);
31
- color: var(--bs-text-primary);
32
- border: 1px solid var(--bs-border-color);
33
- border-radius: var(--bs-border-radius);
34
- display: inline-block;
35
- position: relative;
36
- line-height: initial;
37
- }
38
-
39
- /* Zaman Seçimi */
40
- .react-datepicker--time-only .react-datepicker__time-container {
41
- height:auto;
42
- border-left: 0;
43
- }
44
- .react-datepicker--time-only .react-datepicker__time,
45
- .react-datepicker--time-only .react-datepicker__time-box {
46
- border-bottom-left-radius: 0.3rem;
47
- border-bottom-right-radius: 0.3rem;
48
- height: auto;
49
- }
50
-
51
- .react-datepicker-popper {
52
- z-index: 1;
53
- line-height: 0;
54
- }
55
- .react-datepicker-popper .react-datepicker__triangle {
56
- stroke: var(--bs-border-color);
57
- }
58
- .react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle {
59
- fill: var(--bs-body-bg);
60
- color: var(--bs-body-bg);
61
- }
62
- .react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle {
63
- fill: var(--bs-white);
64
- color: var(--bs-white);
65
- }
66
-
67
- /* Header */
68
- .react-datepicker__header {
69
- text-align: center;
70
- background-color: var(--bs-light-bg-subtle);
71
- border-bottom: 1px solid var(--bs-border-color);
72
- border-top-left-radius: var(--bs-border-radius);
73
- padding: 8px 0;
74
- position: relative;
75
- }
76
- .react-datepicker__header--time {
77
- padding-bottom: 8px;
78
- padding-left: 5px;
79
- padding-right: 5px;
80
- }
81
- .react-datepicker__header--time:not(.react-datepicker__header--time--only) {
82
- border-top-left-radius: 0;
83
- }
84
- .react-datepicker__header:not(.react-datepicker__header--has-time-select) {
85
- border-top-right-radius: 0.3rem;
86
- }
87
-
88
- /* Dropdown Container */
89
- .react-datepicker__year-dropdown-container--select,
90
- .react-datepicker__month-dropdown-container--select,
91
- .react-datepicker__month-year-dropdown-container--select,
92
- .react-datepicker__year-dropdown-container--scroll,
93
- .react-datepicker__month-dropdown-container--scroll,
94
- .react-datepicker__month-year-dropdown-container--scroll {
95
- display: inline-block;
96
- margin: 0 15px;
97
- }
98
-
99
- /* Başlık Metinleri */
100
- .react-datepicker__current-month,
101
- .react-datepicker-time__header,
102
- .react-datepicker-year-header {
103
- margin-top: 0;
104
- color: var(--bs-text-primary);
105
- font-weight: bold;
106
- font-size: 0.944rem;
107
- }
108
-
109
- h2.react-datepicker__current-month {
110
- padding: 0;
111
- margin: 0;
112
- }
113
-
114
- .react-datepicker-time__header {
115
- text-overflow: ellipsis;
116
- white-space: nowrap;
117
- overflow: hidden;
118
- }
119
-
120
- /* Navigasyon */
121
- .react-datepicker__navigation {
122
- align-items: center;
123
- background: none;
124
- display: flex;
125
- justify-content: center;
126
- text-align: center;
127
- cursor: pointer;
128
- position: absolute;
129
- top: 2px;
130
- padding: 0;
131
- border: none;
132
- z-index: 1;
133
- height: 32px;
134
- width: 32px;
135
- text-indent: -999em;
136
- overflow: hidden;
137
- }
138
- .react-datepicker__navigation--previous {
139
- left: 2px;
140
- }
141
- .react-datepicker__navigation--next {
142
- right: 2px;
143
- }
144
- .react-datepicker__navigation--next--with-time:not(.react-datepicker__navigation--next--with-today-button) {
145
- right: 85px;
146
- }
147
- .react-datepicker__navigation--years {
148
- position: relative;
149
- top: 0;
150
- display: block;
151
- margin-left: auto;
152
- margin-right: auto;
153
- }
154
- .react-datepicker__navigation--years-previous {
155
- top: 4px;
156
- }
157
- .react-datepicker__navigation--years-upcoming {
158
- top: -4px;
159
- }
160
- .react-datepicker__navigation:hover *::before {
161
- border-color: var(--bs-nav-hover-border, rgb(165, 165, 165));
162
- }
163
- .react-datepicker__navigation-icon {
164
- position: relative;
165
- top: -1px;
166
- font-size: 20px;
167
- width: 0;
168
- }
169
- .react-datepicker__navigation-icon--next {
170
- left: -2px;
171
- }
172
- .react-datepicker__navigation-icon--next::before {
173
- transform: rotate(45deg);
174
- left: -7px;
175
- }
176
- .react-datepicker__navigation-icon--previous {
177
- right: -2px;
178
- }
179
- .react-datepicker__navigation-icon--previous::before {
180
- transform: rotate(225deg);
181
- right: -7px;
182
- }
183
-
184
- /* Yıl & Ay */
185
- .react-datepicker__month-container {
186
- float: left;
187
- }
188
-
189
- .react-datepicker__year {
190
- margin: 0.4rem;
191
- text-align: center;
192
- }
193
- .react-datepicker__year-wrapper {
194
- display: flex;
195
- flex-wrap: wrap;
196
- max-width: 180px;
197
- }
198
- .react-datepicker__year .react-datepicker__year-text {
199
- display: inline-block;
200
- width: 4rem;
201
- margin: 2px;
202
- }
203
-
204
- .react-datepicker__month {
205
- margin: 0.4rem;
206
- text-align: center;
207
- }
208
- .react-datepicker__month .react-datepicker__month-text,
209
- .react-datepicker__month .react-datepicker__quarter-text {
210
- display: inline-block;
211
- width: 4rem;
212
- margin: 2px;
213
- }
214
-
215
- /* Zaman Girişi */
216
- .react-datepicker__input-time-container {
217
- clear: both;
218
- width: 100%;
219
- float: left;
220
- margin: 5px 0 10px 15px;
221
- text-align: left;
222
- }
223
- .react-datepicker__input-time-container .react-datepicker-time__caption {
224
- display: inline-block;
225
- }
226
- .react-datepicker__input-time-container .react-datepicker-time__input-container {
227
- display: inline-block;
228
- }
229
- .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input {
230
- display: inline-block;
231
- margin-left: 10px;
232
- }
233
- .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input {
234
- width: auto;
235
- }
236
- .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time]::-webkit-inner-spin-button,
237
- .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time]::-webkit-outer-spin-button {
238
- -webkit-appearance: none;
239
- margin: 0;
240
- }
241
- .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time] {
242
- -moz-appearance: textfield;
243
- }
244
- .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__delimiter {
245
- margin-left: 5px;
246
- display: inline-block;
247
- }
248
-
249
- /* Zaman Kutucuğu */
250
- .react-datepicker__time-container {
251
- float: right;
252
- /* border-left: 1px solid var(--bs-border-color); */
253
- width: 85px;
254
- }
255
- .react-datepicker__time-container--with-today-button {
256
- display: inline;
257
- border: 1px solid var(--bs-border-color);
258
- border-radius: 0.3rem;
259
- position: absolute;
260
- right: -87px;
261
- top: 0;
262
- }
263
- .react-datepicker__time-container .react-datepicker__time {
264
- position: relative;
265
- background: var(--bs-body-bg) !important;
266
- border-bottom-right-radius: 0.3rem;
267
- }
268
- .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box {
269
- width: 85px;
270
- overflow-x: hidden;
271
- margin: 0 auto;
272
- text-align: center;
273
- border-bottom-right-radius: 0.3rem;
274
- }
275
- .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list {
276
- list-style: none;
277
- margin: 0;
278
- /* height: calc(250px + 1.7rem / 2); */
279
- height: 250px;
280
- overflow-y: scroll;
281
- padding-right: 0;
282
- padding-left: 0;
283
- width: 100%;
284
- box-sizing: content-box;
285
- }
286
- .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item {
287
- height: 30px;
288
- padding: 5px 10px;
289
- white-space: nowrap;
290
- color: var(--bs-text-primary) !important;
291
- }
292
- .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item:hover {
293
- cursor: pointer;
294
- background-color: var(--bs-light-hover-bg, #f0f0f0);
295
- }
296
- .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected {
297
- background-color: var(--bs-primary, #216ba5);
298
- color: var(--bs-white, #fff);
299
- font-weight: bold;
300
- }
301
- .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected:hover {
302
- background-color: var(--bs-primary, #216ba5);
303
- }
304
- .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled {
305
- color: var(--bs-gray-300, #ccc);
306
- }
307
- .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled:hover {
308
- cursor: default;
309
- background-color: transparent;
310
- }
311
-
312
- /* Hafta Numarası */
313
- .react-datepicker__week-number {
314
- color: var(--bs-gray-300, #ccc);
315
- display: inline-block;
316
- width: 1.7rem;
317
- line-height: 1.7rem;
318
- text-align: center;
319
- margin: 0.166rem;
320
- }
321
- .react-datepicker__week-number.react-datepicker__week-number--clickable {
322
- cursor: pointer;
323
- }
324
- .react-datepicker__week-number.react-datepicker__week-number--clickable:not(.react-datepicker__week-number--selected):hover {
325
- border-radius: 0.3rem;
326
- background-color: var(--bs-light-hover-bg, #f0f0f0);
327
- }
328
- .react-datepicker__week-number--selected {
329
- border-radius: 0.3rem;
330
- background-color: var(--bs-primary, #216ba5);
331
- color: var(--bs-white, #fff);
332
- }
333
- .react-datepicker__week-number--selected:hover {
334
- background-color: var(--bs-primary-hover-bg, var(--bs-primary, rgb(28,93,144)));
335
- }
336
-
337
- /* Gün, Ay, Yıl */
338
- .react-datepicker__day-name,
339
- .react-datepicker__day,
340
- .react-datepicker__time-name {
341
- color: var(--bs-text-primary);
342
- display: inline-block;
343
- width: 1.7rem;
344
- line-height: 1.7rem;
345
- text-align: center;
346
- margin: 0.166rem;
347
- }
348
- .react-datepicker__day,
349
- .react-datepicker__month-text,
350
- .react-datepicker__quarter-text,
351
- .react-datepicker__year-text {
352
- cursor: pointer;
353
- }
354
- .react-datepicker__day:not([aria-disabled="true"]):hover,
355
- .react-datepicker__month-text:not([aria-disabled="true"]):hover,
356
- .react-datepicker__quarter-text:not([aria-disabled="true"]):hover,
357
- .react-datepicker__year-text:not([aria-disabled="true"]):hover {
358
- border-radius: var(--bs-border-radius);
359
- background-color: var(--bs-light-hover-bg, #f0f0f0);
360
- }
361
-
362
- /* Bugün & Seçili */
363
- .react-datepicker__day--today,
364
- .react-datepicker__month-text--today,
365
- .react-datepicker__quarter-text--today,
366
- .react-datepicker__year-text--today {
367
- font-weight: bold;
368
- }
369
- .react-datepicker__day--highlighted,
370
- .react-datepicker__month-text--highlighted,
371
- .react-datepicker__quarter-text--highlighted,
372
- .react-datepicker__year-text--highlighted {
373
- border-radius: 0.3rem;
374
- background-color: var(--bs-success, #3dcc4a);
375
- color: var(--bs-white, #fff);
376
- }
377
- .react-datepicker__day--highlighted:not([aria-disabled="true"]):hover,
378
- .react-datepicker__month-text--highlighted:not([aria-disabled="true"]):hover,
379
- .react-datepicker__quarter-text--highlighted:not([aria-disabled="true"]):hover,
380
- .react-datepicker__year-text--highlighted:not([aria-disabled="true"]):hover {
381
- background-color: var(--bs-success-hover-bg, rgb(50,190,63));
382
- }
383
-
384
- /* Özel Highlight Renkleri */
385
- .react-datepicker__day--highlighted-custom-1,
386
- .react-datepicker__month-text--highlighted-custom-1,
387
- .react-datepicker__quarter-text--highlighted-custom-1,
388
- .react-datepicker__year-text--highlighted-custom-1 {
389
- color: var(--bs-pink, magenta);
390
- }
391
- .react-datepicker__day--highlighted-custom-2,
392
- .react-datepicker__month-text--highlighted-custom-2,
393
- .react-datepicker__quarter-text--highlighted-custom-2,
394
- .react-datepicker__year-text--highlighted-custom-2 {
395
- color: var(--bs-success, green);
396
- }
397
-
398
- /* Tatil Günleri */
399
- .react-datepicker__day--holidays,
400
- .react-datepicker__month-text--holidays,
401
- .react-datepicker__quarter-text--holidays,
402
- .react-datepicker__year-text--holidays {
403
- position: relative;
404
- border-radius: 0.3rem;
405
- background-color: var(--bs-warning, #ff6803);
406
- color: var(--bs-white, #fff);
407
- }
408
- .react-datepicker__day--holidays .overlay,
409
- .react-datepicker__month-text--holidays .overlay,
410
- .react-datepicker__quarter-text--holidays .overlay,
411
- .react-datepicker__year-text--holidays .overlay {
412
- position: absolute;
413
- bottom: 100%;
414
- left: 50%;
415
- transform: translateX(-50%);
416
- background-color: var(--bs-dark, #333);
417
- color: var(--bs-white, #fff);
418
- padding: 4px;
419
- border-radius: 4px;
420
- white-space: nowrap;
421
- visibility: hidden;
422
- opacity: 0;
423
- transition: visibility 0s, opacity 0.3s ease-in-out;
424
- }
425
- .react-datepicker__day--holidays:not([aria-disabled="true"]):hover {
426
- background-color: var(--bs-warning-hover-bg, rgb(207,83,0));
427
- }
428
- .react-datepicker__day--holidays:hover .overlay,
429
- .react-datepicker__month-text--holidays:hover .overlay,
430
- .react-datepicker__quarter-text--holidays:hover .overlay,
431
- .react-datepicker__year-text--holidays:hover .overlay {
432
- visibility: visible;
433
- opacity: 1;
434
- }
435
-
436
- /* Seçili Gün/Ay/Yıl */
437
- .react-datepicker__day--selected,
438
- .react-datepicker__day--in-selecting-range,
439
- .react-datepicker__day--in-range,
440
- .react-datepicker__month-text--selected,
441
- .react-datepicker__month-text--in-selecting-range,
442
- .react-datepicker__month-text--in-range,
443
- .react-datepicker__quarter-text--selected,
444
- .react-datepicker__quarter-text--in-selecting-range,
445
- .react-datepicker__quarter-text--in-range,
446
- .react-datepicker__year-text--selected,
447
- .react-datepicker__year-text--in-selecting-range,
448
- .react-datepicker__year-text--in-range {
449
- border-radius: var(--bs-border-radius);
450
- background-color: var(--bs-primary, #216ba5);
451
- color: var(--bs-white, #fff);
452
- }
453
- .react-datepicker__day--selected:not([aria-disabled="true"]):hover,
454
- .react-datepicker__day--in-selecting-range:not([aria-disabled="true"]):hover,
455
- .react-datepicker__day--in-range:not([aria-disabled="true"]):hover,
456
- .react-datepicker__month-text--selected:not([aria-disabled="true"]):hover,
457
- .react-datepicker__month-text--in-selecting-range:not([aria-disabled="true"]):hover,
458
- .react-datepicker__month-text--in-range:not([aria-disabled="true"]):hover,
459
- .react-datepicker__quarter-text--selected:not([aria-disabled="true"]):hover,
460
- .react-datepicker__quarter-text--in-selecting-range:not([aria-disabled="true"]):hover,
461
- .react-datepicker__quarter-text--in-range:not([aria-disabled="true"]):hover,
462
- .react-datepicker__year-text--selected:not([aria-disabled="true"]):hover,
463
- .react-datepicker__year-text--in-selecting-range:not([aria-disabled="true"]):hover,
464
- .react-datepicker__year-text--in-range:not([aria-disabled="true"]):hover {
465
- background-color: var(--bs-primary-hover-bg, var(--bs-primary, rgb(29,93,144)));
466
- }
467
-
468
- /* Klavye Seçimi */
469
- .react-datepicker__day--keyboard-selected,
470
- .react-datepicker__month-text--keyboard-selected,
471
- .react-datepicker__quarter-text--keyboard-selected,
472
- .react-datepicker__year-text--keyboard-selected {
473
- border-radius: 0.3rem;
474
- background-color: var(--bs-light-bg-subtle, rgb(186,217,241));
475
- color: var(--bs-black, #000);
476
- }
477
- .react-datepicker__day--keyboard-selected:not([aria-disabled="true"]):hover,
478
- .react-datepicker__month-text--keyboard-selected:not([aria-disabled="true"]):hover,
479
- .react-datepicker__quarter-text--keyboard-selected:not([aria-disabled="true"]):hover,
480
- .react-datepicker__year-text--keyboard-selected:not([aria-disabled="true"]):hover {
481
- background-color: var(--bs-primary-hover-bg, var(--bs-primary, rgb(29,93,144)));
482
- }
483
-
484
- /* Seçim Aralığı */
485
- .react-datepicker__day--in-selecting-range:not(.react-datepicker__day--in-range),
486
- .react-datepicker__month-text--in-selecting-range:not(.react-datepicker__month-text--in-range),
487
- .react-datepicker__quarter-text--in-selecting-range:not(.react-datepicker__quarter-text--in-range),
488
- .react-datepicker__year-text--in-selecting-range:not(.react-datepicker__year-text--in-range) {
489
- background-color: var(--bs-dark-soft, rgba(33,107,165,0.5));
490
- }
491
-
492
- /* Seçim Aralığı (Ay/Yıl) */
493
- .react-datepicker__month--selecting-range .react-datepicker__day--in-range:not(.react-datepicker__day--in-selecting-range),
494
- .react-datepicker__year--selecting-range .react-datepicker__day--in-range:not(.react-datepicker__day--in-selecting-range),
495
- .react-datepicker__month--selecting-range .react-datepicker__month-text--in-range:not(.react-datepicker__month-text--in-selecting-range),
496
- .react-datepicker__year--selecting-range .react-datepicker__month-text--in-range:not(.react-datepicker__month-text--in-selecting-range),
497
- .react-datepicker__month--selecting-range .react-datepicker__quarter-text--in-range:not(.react-datepicker__quarter-text--in-selecting-range),
498
- .react-datepicker__year--selecting-range .react-datepicker__quarter-text--in-range:not(.react-datepicker__quarter-text--in-selecting-range),
499
- .react-datepicker__month--selecting-range .react-datepicker__year-text--in-range:not(.react-datepicker__year-text--in-selecting-range),
500
- .react-datepicker__year--selecting-range .react-datepicker__year-text--in-range:not(.react-datepicker__year-text--in-selecting-range) {
501
- background-color: var(--bs-light-bg-subtle, #f0f0f0);
502
- color: var(--bs-black, #000);
503
- }
504
-
505
- /* Devre Dışı Günler */
506
- .react-datepicker__day--disabled,
507
- .react-datepicker__month-text--disabled,
508
- .react-datepicker__quarter-text--disabled,
509
- .react-datepicker__year-text--disabled {
510
- cursor: default;
511
- color: var(--bs-gray-300, #ccc);
512
- }
513
- .react-datepicker__day--disabled .overlay,
514
- .react-datepicker__month-text--disabled .overlay,
515
- .react-datepicker__quarter-text--disabled .overlay,
516
- .react-datepicker__year-text--disabled .overlay {
517
- position: absolute;
518
- bottom: 70%;
519
- left: 50%;
520
- transform: translateX(-50%);
521
- background-color: var(--bs-dark, #333);
522
- color: var(--bs-white, #fff);
523
- padding: 4px;
524
- border-radius: 4px;
525
- white-space: nowrap;
526
- visibility: hidden;
527
- opacity: 0;
528
- transition: visibility 0s, opacity 0.3s ease-in-out;
529
- }
530
-
531
- /* Input Container */
532
- .react-datepicker__input-container {
533
- position: relative;
534
- display: inline-block;
535
- width: 100%;
536
- }
537
- .react-datepicker__input-container .react-datepicker__calendar-icon {
538
- position: absolute;
539
- padding: 0.5rem;
540
- box-sizing: content-box;
541
- }
542
- .react-datepicker__view-calendar-icon input {
543
- padding: 6px 10px 5px 25px;
544
- }
545
-
546
- /* Ok Görünümü */
547
- .react-datepicker__year-read-view,
548
- .react-datepicker__month-read-view,
549
- .react-datepicker__month-year-read-view {
550
- border: 1px solid transparent;
551
- border-radius: 0.3rem;
552
- position: relative;
553
- }
554
- .react-datepicker__year-read-view:hover,
555
- .react-datepicker__month-read-view:hover,
556
- .react-datepicker__month-year-read-view:hover {
557
- cursor: pointer;
558
- }
559
- /* .react-datepicker__year-read-view:hover .react-datepicker__year-read-view--down-arrow,
560
- .react-datepicker__month-read-view:hover .react-datepicker__year-read-view--down-arrow,
561
- .react-datepicker__month-read-view:hover .react-datepicker__month-read-view--down-arrow,
562
- .react-datepicker__month-year-read-view:hover .react-datepicker__year-read-view--down-arrow,
563
- .react-datepicker__month-year-read-view:hover .react-datepicker__month-read-view--down-arrow {
564
- border-top-color: var(--bs-gray-400, var(--bs-gray, rgb(178,178,178)));
565
- } */
566
- .react-datepicker__year-read-view--down-arrow,
567
- .react-datepicker__month-read-view--down-arrow,
568
- .react-datepicker__month-year-read-view--down-arrow {
569
- transform: rotate(135deg);
570
- right: -16px;
571
- top: 0;
572
- }
573
-
574
- /* Dropdowns */
575
- .react-datepicker__year-dropdown,
576
- .react-datepicker__month-dropdown,
577
- .react-datepicker__month-year-dropdown {
578
- background-color: var(--bs-body-bg) !important;
579
- border: 1px solid var(--bs-border-color) !important;
580
- position: absolute;
581
- width: 50%;
582
- left: 25%;
583
- top: 30px;
584
- z-index: 1;
585
- text-align: center;
586
- border-radius: 0.3rem;
587
- }
588
- .react-datepicker__year-dropdown:hover,
589
- .react-datepicker__month-dropdown:hover,
590
- .react-datepicker__month-year-dropdown:hover {
591
- cursor: pointer;
592
- }
593
- .react-datepicker__year-dropdown--scrollable,
594
- .react-datepicker__month-dropdown--scrollable,
595
- .react-datepicker__month-year-dropdown--scrollable {
596
- height: 150px;
597
- overflow-y: scroll;
598
- }
599
-
600
- /* Dropdown Seçenekleri */
601
- .react-datepicker__year-option,
602
- .react-datepicker__month-option,
603
- .react-datepicker__month-year-option {
604
- color: var(--bs-text-primary) !important;
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
- user-select: none;
621
- border-bottom-left-radius: 0.3rem;
622
- border-bottom-right-radius: 0.3rem;
623
- }
624
- .react-datepicker__year-option:hover,
625
- .react-datepicker__month-option:hover,
626
- .react-datepicker__month-year-option:hover {
627
- background-color: var(--bs-gray-hover-bg, #ccc);
628
- }
629
- .react-datepicker__year-option:hover .react-datepicker__navigation--years-upcoming,
630
- .react-datepicker__month-option:hover .react-datepicker__navigation--years-upcoming,
631
- .react-datepicker__month-year-option:hover .react-datepicker__navigation--years-upcoming {
632
- border-bottom-color: var(--bs-gray-hover-bg, #ccc);
633
- }
634
- .react-datepicker__year-option:hover .react-datepicker__navigation--years-previous,
635
- .react-datepicker__month-option:hover .react-datepicker__navigation--years-previous,
636
- .react-datepicker__month-year-option:hover .react-datepicker__navigation--years-previous {
637
- border-top-color: var(--bs-gray-hover-bg, #ccc);
638
- }
639
- .react-datepicker__year-option--selected,
640
- .react-datepicker__month-option--selected,
641
- .react-datepicker__month-year-option--selected {
642
- position: absolute;
643
- left: 15px;
644
- }
645
-
646
- /* Kapatma Ikonu */
647
- .react-datepicker__close-icon {
648
- cursor: pointer;
649
- background-color: transparent;
650
- border: 0;
651
- outline: 0;
652
- padding: 0 6px 0 0;
653
- position: absolute;
654
- top: 0;
655
- right: 0;
656
- height: 100%;
657
- display: table-cell;
658
- vertical-align: middle;
659
- }
660
- .react-datepicker__close-icon::after {
661
- cursor: pointer;
662
- background-color: var(--bs-primary, #216ba5);
663
- color: var(--bs-white, #fff);
664
- border-radius: 50%;
665
- height: 16px;
666
- width: 16px;
667
- padding: 2px;
668
- font-size: 12px;
669
- line-height: 1;
670
- text-align: center;
671
- display: table-cell;
672
- vertical-align: middle;
673
- content: "×";
674
- }
675
- .react-datepicker__close-icon--disabled {
676
- cursor: default;
677
- }
678
- .react-datepicker__close-icon--disabled::after {
679
- cursor: default;
680
- background-color: var(--bs-gray, #ccc);
681
- }
682
-
683
- /* Bugün Butonu */
684
- .react-datepicker__today-button {
685
- background: var(--bs-light-bg-subtle, #f0f0f0);
686
- border-top: 1px solid var(--bs-border-color);
687
- cursor: pointer;
688
- text-align: center;
689
- font-weight: bold;
690
- padding: 5px 0;
691
- clear: left;
692
- }
693
-
694
- /* Portal */
695
- .react-datepicker__portal {
696
- position: fixed;
697
- width: 100vw;
698
- height: 100vh;
699
- background-color: var(--bs-portal-bg, rgba(0, 0, 0, 0.8));
700
- left: 0;
701
- top: 0;
702
- justify-content: center;
703
- align-items: center;
704
- display: flex;
705
- z-index: 2147483647;
706
- }
707
- .react-datepicker__portal .react-datepicker__day-name,
708
- .react-datepicker__portal .react-datepicker__day,
709
- .react-datepicker__portal .react-datepicker__time-name {
710
- width: 3rem;
711
- line-height: 3rem;
712
- }
713
- @media (max-width: 400px), (max-height: 550px) {
714
- .react-datepicker__portal .react-datepicker__day-name,
715
- .react-datepicker__portal .react-datepicker__day,
716
- .react-datepicker__portal .react-datepicker__time-name {
717
- width: 2rem;
718
- line-height: 2rem;
719
- }
720
- }
721
- .react-datepicker__portal .react-datepicker__current-month,
722
- .react-datepicker__portal .react-datepicker-time__header {
723
- font-size: 1.44rem;
724
- }
725
-
726
- /* Çocuk Konteyner */
727
- .react-datepicker__children-container {
728
- width: 13.8rem;
729
- margin: 0.4rem;
730
- padding-right: 0.2rem;
731
- padding-left: 0.2rem;
732
- height: auto;
733
- }
734
-
735
- /* Erişilebilirlik */
736
- .react-datepicker__aria-live {
737
- position: absolute;
738
- clip-path: circle(0);
739
- border: 0;
740
- height: 1px;
741
- margin: -1px;
742
- overflow: hidden;
743
- padding: 0;
744
- width: 1px;
745
- white-space: nowrap;
746
- }
747
-
748
- /* Takvim İkonu */
749
- .react-datepicker__calendar-icon {
750
- width: 1em;
751
- height: 1em;
752
- vertical-align: -0.125em;
753
- }
754
-
755
- /* Yıl Navigasyon Okları */
756
- .react-datepicker__navigation--years-upcoming::before {
757
- content: "";
758
- position: absolute;
759
- right: 8px;
760
- top: 70%;
761
- transform: translateY(-50%) rotate(-135deg);
762
- border: solid var(--bs-body-color);
763
- border-width: 0 2px 2px 0;
764
- display: inline-block;
765
- width: 15px;
766
- height: 15px;
767
- }
768
- .react-datepicker__navigation--years-previous::before {
769
- content: "";
770
- position: absolute;
771
- right: 8px;
772
- top: 30%;
773
- transform: translateY(-50%) rotate(45deg);
774
- border: solid var(--bs-body-color);
775
- border-width: 0 2px 2px 0;
776
- display: inline-block;
777
- width: 15px;
778
- height: 15px;
779
- }
1
+ /* Genel Ayarlar */
2
+ .react-datepicker-popper {
3
+ z-index: 5;
4
+ }
5
+
6
+ .react-datepicker__navigation-icon::before,
7
+ .react-datepicker__year-read-view--down-arrow,
8
+ .react-datepicker__month-read-view--down-arrow,
9
+ .react-datepicker__month-year-read-view--down-arrow {
10
+ border-color: var(--bs-body-color);
11
+ border-style: solid;
12
+ border-width: 3px 3px 0 0;
13
+ content: "";
14
+ display: block;
15
+ height: 9px;
16
+ position: absolute;
17
+ top: 6px;
18
+ width: 9px;
19
+ }
20
+
21
+ .react-datepicker-wrapper {
22
+ display: block;
23
+ padding: 0;
24
+ border: 0;
25
+ }
26
+
27
+ .react-datepicker {
28
+ font-family: var(--bs-body-font-family, "Helvetica Neue", Helvetica, Arial, sans-serif);
29
+ font-size: 0.8rem;
30
+ background-color: var(--bs-body-bg);
31
+ color: var(--bs-text-primary);
32
+ border: 1px solid var(--bs-border-color);
33
+ border-radius: var(--bs-border-radius);
34
+ display: inline-block;
35
+ position: relative;
36
+ line-height: initial;
37
+ }
38
+
39
+ /* Zaman Seçimi */
40
+ .react-datepicker--time-only .react-datepicker__time-container {
41
+ height:auto;
42
+ border-left: 0;
43
+ }
44
+ .react-datepicker--time-only .react-datepicker__time,
45
+ .react-datepicker--time-only .react-datepicker__time-box {
46
+ border-bottom-left-radius: 0.3rem;
47
+ border-bottom-right-radius: 0.3rem;
48
+ height: auto;
49
+ }
50
+
51
+ .react-datepicker-popper {
52
+ z-index: 1;
53
+ line-height: 0;
54
+ }
55
+ .react-datepicker-popper .react-datepicker__triangle {
56
+ stroke: var(--bs-border-color);
57
+ }
58
+ .react-datepicker-popper[data-placement^="bottom"] .react-datepicker__triangle {
59
+ fill: var(--bs-body-bg);
60
+ color: var(--bs-body-bg);
61
+ }
62
+ .react-datepicker-popper[data-placement^="top"] .react-datepicker__triangle {
63
+ fill: var(--bs-white);
64
+ color: var(--bs-white);
65
+ }
66
+
67
+ /* Header */
68
+ .react-datepicker__header {
69
+ text-align: center;
70
+ background-color: var(--bs-light-bg-subtle);
71
+ border-bottom: 1px solid var(--bs-border-color);
72
+ border-top-left-radius: var(--bs-border-radius);
73
+ padding: 8px 0;
74
+ position: relative;
75
+ }
76
+ .react-datepicker__header--time {
77
+ padding-bottom: 8px;
78
+ padding-left: 5px;
79
+ padding-right: 5px;
80
+ }
81
+ .react-datepicker__header--time:not(.react-datepicker__header--time--only) {
82
+ border-top-left-radius: 0;
83
+ }
84
+ .react-datepicker__header:not(.react-datepicker__header--has-time-select) {
85
+ border-top-right-radius: 0.3rem;
86
+ }
87
+
88
+ /* Dropdown Container */
89
+ .react-datepicker__year-dropdown-container--select,
90
+ .react-datepicker__month-dropdown-container--select,
91
+ .react-datepicker__month-year-dropdown-container--select,
92
+ .react-datepicker__year-dropdown-container--scroll,
93
+ .react-datepicker__month-dropdown-container--scroll,
94
+ .react-datepicker__month-year-dropdown-container--scroll {
95
+ display: inline-block;
96
+ margin: 0 15px;
97
+ }
98
+
99
+ /* Başlık Metinleri */
100
+ .react-datepicker__current-month,
101
+ .react-datepicker-time__header,
102
+ .react-datepicker-year-header {
103
+ margin-top: 0;
104
+ color: var(--bs-text-primary);
105
+ font-weight: bold;
106
+ font-size: 0.944rem;
107
+ }
108
+
109
+ h2.react-datepicker__current-month {
110
+ padding: 0;
111
+ margin: 0;
112
+ }
113
+
114
+ .react-datepicker-time__header {
115
+ text-overflow: ellipsis;
116
+ white-space: nowrap;
117
+ overflow: hidden;
118
+ }
119
+
120
+ /* Navigasyon */
121
+ .react-datepicker__navigation {
122
+ align-items: center;
123
+ background: none;
124
+ display: flex;
125
+ justify-content: center;
126
+ text-align: center;
127
+ cursor: pointer;
128
+ position: absolute;
129
+ top: 2px;
130
+ padding: 0;
131
+ border: none;
132
+ z-index: 1;
133
+ height: 32px;
134
+ width: 32px;
135
+ text-indent: -999em;
136
+ overflow: hidden;
137
+ }
138
+ .react-datepicker__navigation--previous {
139
+ left: 2px;
140
+ }
141
+ .react-datepicker__navigation--next {
142
+ right: 2px;
143
+ }
144
+ .react-datepicker__navigation--next--with-time:not(.react-datepicker__navigation--next--with-today-button) {
145
+ right: 85px;
146
+ }
147
+ .react-datepicker__navigation--years {
148
+ position: relative;
149
+ top: 0;
150
+ display: block;
151
+ margin-left: auto;
152
+ margin-right: auto;
153
+ }
154
+ .react-datepicker__navigation--years-previous {
155
+ top: 4px;
156
+ }
157
+ .react-datepicker__navigation--years-upcoming {
158
+ top: -4px;
159
+ }
160
+ .react-datepicker__navigation:hover *::before {
161
+ border-color: var(--bs-nav-hover-border, rgb(165, 165, 165));
162
+ }
163
+ .react-datepicker__navigation-icon {
164
+ position: relative;
165
+ top: -1px;
166
+ font-size: 20px;
167
+ width: 0;
168
+ }
169
+ .react-datepicker__navigation-icon--next {
170
+ left: -2px;
171
+ }
172
+ .react-datepicker__navigation-icon--next::before {
173
+ transform: rotate(45deg);
174
+ left: -7px;
175
+ }
176
+ .react-datepicker__navigation-icon--previous {
177
+ right: -2px;
178
+ }
179
+ .react-datepicker__navigation-icon--previous::before {
180
+ transform: rotate(225deg);
181
+ right: -7px;
182
+ }
183
+
184
+ /* Yıl & Ay */
185
+ .react-datepicker__month-container {
186
+ float: left;
187
+ }
188
+
189
+ .react-datepicker__year {
190
+ margin: 0.4rem;
191
+ text-align: center;
192
+ }
193
+ .react-datepicker__year-wrapper {
194
+ display: flex;
195
+ flex-wrap: wrap;
196
+ max-width: 180px;
197
+ }
198
+ .react-datepicker__year .react-datepicker__year-text {
199
+ display: inline-block;
200
+ width: 4rem;
201
+ margin: 2px;
202
+ }
203
+
204
+ .react-datepicker__month {
205
+ margin: 0.4rem;
206
+ text-align: center;
207
+ }
208
+ .react-datepicker__month .react-datepicker__month-text,
209
+ .react-datepicker__month .react-datepicker__quarter-text {
210
+ display: inline-block;
211
+ width: 4rem;
212
+ margin: 2px;
213
+ }
214
+
215
+ /* Zaman Girişi */
216
+ .react-datepicker__input-time-container {
217
+ clear: both;
218
+ width: 100%;
219
+ float: left;
220
+ margin: 5px 0 10px 15px;
221
+ text-align: left;
222
+ }
223
+ .react-datepicker__input-time-container .react-datepicker-time__caption {
224
+ display: inline-block;
225
+ }
226
+ .react-datepicker__input-time-container .react-datepicker-time__input-container {
227
+ display: inline-block;
228
+ }
229
+ .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input {
230
+ display: inline-block;
231
+ margin-left: 10px;
232
+ }
233
+ .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input {
234
+ width: auto;
235
+ }
236
+ .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time]::-webkit-inner-spin-button,
237
+ .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time]::-webkit-outer-spin-button {
238
+ -webkit-appearance: none;
239
+ margin: 0;
240
+ }
241
+ .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time] {
242
+ -moz-appearance: textfield;
243
+ }
244
+ .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__delimiter {
245
+ margin-left: 5px;
246
+ display: inline-block;
247
+ }
248
+
249
+ /* Zaman Kutucuğu */
250
+ .react-datepicker__time-container {
251
+ float: right;
252
+ /* border-left: 1px solid var(--bs-border-color); */
253
+ width: 85px;
254
+ }
255
+ .react-datepicker__time-container--with-today-button {
256
+ display: inline;
257
+ border: 1px solid var(--bs-border-color);
258
+ border-radius: 0.3rem;
259
+ position: absolute;
260
+ right: -87px;
261
+ top: 0;
262
+ }
263
+ .react-datepicker__time-container .react-datepicker__time {
264
+ position: relative;
265
+ background: var(--bs-body-bg) !important;
266
+ border-bottom-right-radius: 0.3rem;
267
+ }
268
+ .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box {
269
+ width: 85px;
270
+ overflow-x: hidden;
271
+ margin: 0 auto;
272
+ text-align: center;
273
+ border-bottom-right-radius: 0.3rem;
274
+ }
275
+ .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list {
276
+ list-style: none;
277
+ margin: 0;
278
+ /* height: calc(250px + 1.7rem / 2); */
279
+ height: 250px;
280
+ overflow-y: scroll;
281
+ padding-right: 0;
282
+ padding-left: 0;
283
+ width: 100%;
284
+ box-sizing: content-box;
285
+ }
286
+ .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item {
287
+ height: 30px;
288
+ padding: 5px 10px;
289
+ white-space: nowrap;
290
+ color: var(--bs-text-primary) !important;
291
+ }
292
+ .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item:hover {
293
+ cursor: pointer;
294
+ background-color: var(--bs-light-hover-bg, #f0f0f0);
295
+ }
296
+ .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected {
297
+ background-color: var(--bs-primary, #216ba5);
298
+ color: var(--bs-white, #fff);
299
+ font-weight: bold;
300
+ }
301
+ .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected:hover {
302
+ background-color: var(--bs-primary, #216ba5);
303
+ }
304
+ .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled {
305
+ color: var(--bs-gray-300, #ccc);
306
+ }
307
+ .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled:hover {
308
+ cursor: default;
309
+ background-color: transparent;
310
+ }
311
+
312
+ /* Hafta Numarası */
313
+ .react-datepicker__week-number {
314
+ color: var(--bs-gray-300, #ccc);
315
+ display: inline-block;
316
+ width: 1.7rem;
317
+ line-height: 1.7rem;
318
+ text-align: center;
319
+ margin: 0.166rem;
320
+ }
321
+ .react-datepicker__week-number.react-datepicker__week-number--clickable {
322
+ cursor: pointer;
323
+ }
324
+ .react-datepicker__week-number.react-datepicker__week-number--clickable:not(.react-datepicker__week-number--selected):hover {
325
+ border-radius: 0.3rem;
326
+ background-color: var(--bs-light-hover-bg, #f0f0f0);
327
+ }
328
+ .react-datepicker__week-number--selected {
329
+ border-radius: 0.3rem;
330
+ background-color: var(--bs-primary, #216ba5);
331
+ color: var(--bs-white, #fff);
332
+ }
333
+ .react-datepicker__week-number--selected:hover {
334
+ background-color: var(--bs-primary-hover-bg, var(--bs-primary, rgb(28,93,144)));
335
+ }
336
+
337
+ /* Gün, Ay, Yıl */
338
+ .react-datepicker__day-name,
339
+ .react-datepicker__day,
340
+ .react-datepicker__time-name {
341
+ color: var(--bs-text-primary);
342
+ display: inline-block;
343
+ width: 1.7rem;
344
+ line-height: 1.7rem;
345
+ text-align: center;
346
+ margin: 0.166rem;
347
+ }
348
+ .react-datepicker__day,
349
+ .react-datepicker__month-text,
350
+ .react-datepicker__quarter-text,
351
+ .react-datepicker__year-text {
352
+ cursor: pointer;
353
+ }
354
+ .react-datepicker__day:not([aria-disabled="true"]):hover,
355
+ .react-datepicker__month-text:not([aria-disabled="true"]):hover,
356
+ .react-datepicker__quarter-text:not([aria-disabled="true"]):hover,
357
+ .react-datepicker__year-text:not([aria-disabled="true"]):hover {
358
+ border-radius: var(--bs-border-radius);
359
+ background-color: var(--bs-light-hover-bg, #f0f0f0);
360
+ }
361
+
362
+ /* Bugün & Seçili */
363
+ .react-datepicker__day--today,
364
+ .react-datepicker__month-text--today,
365
+ .react-datepicker__quarter-text--today,
366
+ .react-datepicker__year-text--today {
367
+ font-weight: bold;
368
+ }
369
+ .react-datepicker__day--highlighted,
370
+ .react-datepicker__month-text--highlighted,
371
+ .react-datepicker__quarter-text--highlighted,
372
+ .react-datepicker__year-text--highlighted {
373
+ border-radius: 0.3rem;
374
+ background-color: var(--bs-success, #3dcc4a);
375
+ color: var(--bs-white, #fff);
376
+ }
377
+ .react-datepicker__day--highlighted:not([aria-disabled="true"]):hover,
378
+ .react-datepicker__month-text--highlighted:not([aria-disabled="true"]):hover,
379
+ .react-datepicker__quarter-text--highlighted:not([aria-disabled="true"]):hover,
380
+ .react-datepicker__year-text--highlighted:not([aria-disabled="true"]):hover {
381
+ background-color: var(--bs-success-hover-bg, rgb(50,190,63));
382
+ }
383
+
384
+ /* Özel Highlight Renkleri */
385
+ .react-datepicker__day--highlighted-custom-1,
386
+ .react-datepicker__month-text--highlighted-custom-1,
387
+ .react-datepicker__quarter-text--highlighted-custom-1,
388
+ .react-datepicker__year-text--highlighted-custom-1 {
389
+ color: var(--bs-pink, magenta);
390
+ }
391
+ .react-datepicker__day--highlighted-custom-2,
392
+ .react-datepicker__month-text--highlighted-custom-2,
393
+ .react-datepicker__quarter-text--highlighted-custom-2,
394
+ .react-datepicker__year-text--highlighted-custom-2 {
395
+ color: var(--bs-success, green);
396
+ }
397
+
398
+ /* Tatil Günleri */
399
+ .react-datepicker__day--holidays,
400
+ .react-datepicker__month-text--holidays,
401
+ .react-datepicker__quarter-text--holidays,
402
+ .react-datepicker__year-text--holidays {
403
+ position: relative;
404
+ border-radius: 0.3rem;
405
+ background-color: var(--bs-warning, #ff6803);
406
+ color: var(--bs-white, #fff);
407
+ }
408
+ .react-datepicker__day--holidays .overlay,
409
+ .react-datepicker__month-text--holidays .overlay,
410
+ .react-datepicker__quarter-text--holidays .overlay,
411
+ .react-datepicker__year-text--holidays .overlay {
412
+ position: absolute;
413
+ bottom: 100%;
414
+ left: 50%;
415
+ transform: translateX(-50%);
416
+ background-color: var(--bs-dark, #333);
417
+ color: var(--bs-white, #fff);
418
+ padding: 4px;
419
+ border-radius: 4px;
420
+ white-space: nowrap;
421
+ visibility: hidden;
422
+ opacity: 0;
423
+ transition: visibility 0s, opacity 0.3s ease-in-out;
424
+ }
425
+ .react-datepicker__day--holidays:not([aria-disabled="true"]):hover {
426
+ background-color: var(--bs-warning-hover-bg, rgb(207,83,0));
427
+ }
428
+ .react-datepicker__day--holidays:hover .overlay,
429
+ .react-datepicker__month-text--holidays:hover .overlay,
430
+ .react-datepicker__quarter-text--holidays:hover .overlay,
431
+ .react-datepicker__year-text--holidays:hover .overlay {
432
+ visibility: visible;
433
+ opacity: 1;
434
+ }
435
+
436
+ /* Seçili Gün/Ay/Yıl */
437
+ .react-datepicker__day--selected,
438
+ .react-datepicker__day--in-selecting-range,
439
+ .react-datepicker__day--in-range,
440
+ .react-datepicker__month-text--selected,
441
+ .react-datepicker__month-text--in-selecting-range,
442
+ .react-datepicker__month-text--in-range,
443
+ .react-datepicker__quarter-text--selected,
444
+ .react-datepicker__quarter-text--in-selecting-range,
445
+ .react-datepicker__quarter-text--in-range,
446
+ .react-datepicker__year-text--selected,
447
+ .react-datepicker__year-text--in-selecting-range,
448
+ .react-datepicker__year-text--in-range {
449
+ border-radius: var(--bs-border-radius);
450
+ background-color: var(--bs-primary, #216ba5);
451
+ color: var(--bs-white, #fff);
452
+ }
453
+ .react-datepicker__day--selected:not([aria-disabled="true"]):hover,
454
+ .react-datepicker__day--in-selecting-range:not([aria-disabled="true"]):hover,
455
+ .react-datepicker__day--in-range:not([aria-disabled="true"]):hover,
456
+ .react-datepicker__month-text--selected:not([aria-disabled="true"]):hover,
457
+ .react-datepicker__month-text--in-selecting-range:not([aria-disabled="true"]):hover,
458
+ .react-datepicker__month-text--in-range:not([aria-disabled="true"]):hover,
459
+ .react-datepicker__quarter-text--selected:not([aria-disabled="true"]):hover,
460
+ .react-datepicker__quarter-text--in-selecting-range:not([aria-disabled="true"]):hover,
461
+ .react-datepicker__quarter-text--in-range:not([aria-disabled="true"]):hover,
462
+ .react-datepicker__year-text--selected:not([aria-disabled="true"]):hover,
463
+ .react-datepicker__year-text--in-selecting-range:not([aria-disabled="true"]):hover,
464
+ .react-datepicker__year-text--in-range:not([aria-disabled="true"]):hover {
465
+ background-color: var(--bs-primary-hover-bg, var(--bs-primary, rgb(29,93,144)));
466
+ }
467
+
468
+ /* Klavye Seçimi */
469
+ .react-datepicker__day--keyboard-selected,
470
+ .react-datepicker__month-text--keyboard-selected,
471
+ .react-datepicker__quarter-text--keyboard-selected,
472
+ .react-datepicker__year-text--keyboard-selected {
473
+ border-radius: 0.3rem;
474
+ background-color: var(--bs-light-bg-subtle, rgb(186,217,241));
475
+ color: var(--bs-black, #000);
476
+ }
477
+ .react-datepicker__day--keyboard-selected:not([aria-disabled="true"]):hover,
478
+ .react-datepicker__month-text--keyboard-selected:not([aria-disabled="true"]):hover,
479
+ .react-datepicker__quarter-text--keyboard-selected:not([aria-disabled="true"]):hover,
480
+ .react-datepicker__year-text--keyboard-selected:not([aria-disabled="true"]):hover {
481
+ background-color: var(--bs-primary-hover-bg, var(--bs-primary, rgb(29,93,144)));
482
+ }
483
+
484
+ /* Seçim Aralığı */
485
+ .react-datepicker__day--in-selecting-range:not(.react-datepicker__day--in-range),
486
+ .react-datepicker__month-text--in-selecting-range:not(.react-datepicker__month-text--in-range),
487
+ .react-datepicker__quarter-text--in-selecting-range:not(.react-datepicker__quarter-text--in-range),
488
+ .react-datepicker__year-text--in-selecting-range:not(.react-datepicker__year-text--in-range) {
489
+ background-color: var(--bs-dark-soft, rgba(33,107,165,0.5));
490
+ }
491
+
492
+ /* Seçim Aralığı (Ay/Yıl) */
493
+ .react-datepicker__month--selecting-range .react-datepicker__day--in-range:not(.react-datepicker__day--in-selecting-range),
494
+ .react-datepicker__year--selecting-range .react-datepicker__day--in-range:not(.react-datepicker__day--in-selecting-range),
495
+ .react-datepicker__month--selecting-range .react-datepicker__month-text--in-range:not(.react-datepicker__month-text--in-selecting-range),
496
+ .react-datepicker__year--selecting-range .react-datepicker__month-text--in-range:not(.react-datepicker__month-text--in-selecting-range),
497
+ .react-datepicker__month--selecting-range .react-datepicker__quarter-text--in-range:not(.react-datepicker__quarter-text--in-selecting-range),
498
+ .react-datepicker__year--selecting-range .react-datepicker__quarter-text--in-range:not(.react-datepicker__quarter-text--in-selecting-range),
499
+ .react-datepicker__month--selecting-range .react-datepicker__year-text--in-range:not(.react-datepicker__year-text--in-selecting-range),
500
+ .react-datepicker__year--selecting-range .react-datepicker__year-text--in-range:not(.react-datepicker__year-text--in-selecting-range) {
501
+ background-color: var(--bs-light-bg-subtle, #f0f0f0);
502
+ color: var(--bs-black, #000);
503
+ }
504
+
505
+ /* Devre Dışı Günler */
506
+ .react-datepicker__day--disabled,
507
+ .react-datepicker__month-text--disabled,
508
+ .react-datepicker__quarter-text--disabled,
509
+ .react-datepicker__year-text--disabled {
510
+ cursor: default;
511
+ color: var(--bs-gray-300, #ccc);
512
+ }
513
+ .react-datepicker__day--disabled .overlay,
514
+ .react-datepicker__month-text--disabled .overlay,
515
+ .react-datepicker__quarter-text--disabled .overlay,
516
+ .react-datepicker__year-text--disabled .overlay {
517
+ position: absolute;
518
+ bottom: 70%;
519
+ left: 50%;
520
+ transform: translateX(-50%);
521
+ background-color: var(--bs-dark, #333);
522
+ color: var(--bs-white, #fff);
523
+ padding: 4px;
524
+ border-radius: 4px;
525
+ white-space: nowrap;
526
+ visibility: hidden;
527
+ opacity: 0;
528
+ transition: visibility 0s, opacity 0.3s ease-in-out;
529
+ }
530
+
531
+ /* Input Container */
532
+ .react-datepicker__input-container {
533
+ position: relative;
534
+ display: inline-block;
535
+ width: 100%;
536
+ }
537
+ .react-datepicker__input-container .react-datepicker__calendar-icon {
538
+ position: absolute;
539
+ padding: 0.5rem;
540
+ box-sizing: content-box;
541
+ }
542
+ .react-datepicker__view-calendar-icon input {
543
+ padding: 6px 10px 5px 25px;
544
+ }
545
+
546
+ /* Ok Görünümü */
547
+ .react-datepicker__year-read-view,
548
+ .react-datepicker__month-read-view,
549
+ .react-datepicker__month-year-read-view {
550
+ border: 1px solid transparent;
551
+ border-radius: 0.3rem;
552
+ position: relative;
553
+ }
554
+ .react-datepicker__year-read-view:hover,
555
+ .react-datepicker__month-read-view:hover,
556
+ .react-datepicker__month-year-read-view:hover {
557
+ cursor: pointer;
558
+ }
559
+ /* .react-datepicker__year-read-view:hover .react-datepicker__year-read-view--down-arrow,
560
+ .react-datepicker__month-read-view:hover .react-datepicker__year-read-view--down-arrow,
561
+ .react-datepicker__month-read-view:hover .react-datepicker__month-read-view--down-arrow,
562
+ .react-datepicker__month-year-read-view:hover .react-datepicker__year-read-view--down-arrow,
563
+ .react-datepicker__month-year-read-view:hover .react-datepicker__month-read-view--down-arrow {
564
+ border-top-color: var(--bs-gray-400, var(--bs-gray, rgb(178,178,178)));
565
+ } */
566
+ .react-datepicker__year-read-view--down-arrow,
567
+ .react-datepicker__month-read-view--down-arrow,
568
+ .react-datepicker__month-year-read-view--down-arrow {
569
+ transform: rotate(135deg);
570
+ right: -16px;
571
+ top: 0;
572
+ }
573
+
574
+ /* Dropdowns */
575
+ .react-datepicker__year-dropdown,
576
+ .react-datepicker__month-dropdown,
577
+ .react-datepicker__month-year-dropdown {
578
+ background-color: var(--bs-body-bg) !important;
579
+ border: 1px solid var(--bs-border-color) !important;
580
+ position: absolute;
581
+ width: 50%;
582
+ left: 25%;
583
+ top: 30px;
584
+ z-index: 1;
585
+ text-align: center;
586
+ border-radius: 0.3rem;
587
+ }
588
+ .react-datepicker__year-dropdown:hover,
589
+ .react-datepicker__month-dropdown:hover,
590
+ .react-datepicker__month-year-dropdown:hover {
591
+ cursor: pointer;
592
+ }
593
+ .react-datepicker__year-dropdown--scrollable,
594
+ .react-datepicker__month-dropdown--scrollable,
595
+ .react-datepicker__month-year-dropdown--scrollable {
596
+ height: 150px;
597
+ overflow-y: scroll;
598
+ }
599
+
600
+ /* Dropdown Seçenekleri */
601
+ .react-datepicker__year-option,
602
+ .react-datepicker__month-option,
603
+ .react-datepicker__month-year-option {
604
+ color: var(--bs-text-primary) !important;
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
+ user-select: none;
621
+ border-bottom-left-radius: 0.3rem;
622
+ border-bottom-right-radius: 0.3rem;
623
+ }
624
+ .react-datepicker__year-option:hover,
625
+ .react-datepicker__month-option:hover,
626
+ .react-datepicker__month-year-option:hover {
627
+ background-color: var(--bs-gray-hover-bg, #ccc);
628
+ }
629
+ .react-datepicker__year-option:hover .react-datepicker__navigation--years-upcoming,
630
+ .react-datepicker__month-option:hover .react-datepicker__navigation--years-upcoming,
631
+ .react-datepicker__month-year-option:hover .react-datepicker__navigation--years-upcoming {
632
+ border-bottom-color: var(--bs-gray-hover-bg, #ccc);
633
+ }
634
+ .react-datepicker__year-option:hover .react-datepicker__navigation--years-previous,
635
+ .react-datepicker__month-option:hover .react-datepicker__navigation--years-previous,
636
+ .react-datepicker__month-year-option:hover .react-datepicker__navigation--years-previous {
637
+ border-top-color: var(--bs-gray-hover-bg, #ccc);
638
+ }
639
+ .react-datepicker__year-option--selected,
640
+ .react-datepicker__month-option--selected,
641
+ .react-datepicker__month-year-option--selected {
642
+ position: absolute;
643
+ left: 15px;
644
+ }
645
+
646
+ /* Kapatma Ikonu */
647
+ .react-datepicker__close-icon {
648
+ cursor: pointer;
649
+ background-color: transparent;
650
+ border: 0;
651
+ outline: 0;
652
+ padding: 0 6px 0 0;
653
+ position: absolute;
654
+ top: 0;
655
+ right: 0;
656
+ height: 100%;
657
+ display: table-cell;
658
+ vertical-align: middle;
659
+ }
660
+ .react-datepicker__close-icon::after {
661
+ cursor: pointer;
662
+ background-color: var(--bs-primary, #216ba5);
663
+ color: var(--bs-white, #fff);
664
+ border-radius: 50%;
665
+ height: 16px;
666
+ width: 16px;
667
+ padding: 2px;
668
+ font-size: 12px;
669
+ line-height: 1;
670
+ text-align: center;
671
+ display: table-cell;
672
+ vertical-align: middle;
673
+ content: "×";
674
+ }
675
+ .react-datepicker__close-icon--disabled {
676
+ cursor: default;
677
+ }
678
+ .react-datepicker__close-icon--disabled::after {
679
+ cursor: default;
680
+ background-color: var(--bs-gray, #ccc);
681
+ }
682
+
683
+ /* Bugün Butonu */
684
+ .react-datepicker__today-button {
685
+ background: var(--bs-light-bg-subtle, #f0f0f0);
686
+ border-top: 1px solid var(--bs-border-color);
687
+ cursor: pointer;
688
+ text-align: center;
689
+ font-weight: bold;
690
+ padding: 5px 0;
691
+ clear: left;
692
+ }
693
+
694
+ /* Portal */
695
+ .react-datepicker__portal {
696
+ position: fixed;
697
+ width: 100vw;
698
+ height: 100vh;
699
+ background-color: var(--bs-portal-bg, rgba(0, 0, 0, 0.8));
700
+ left: 0;
701
+ top: 0;
702
+ justify-content: center;
703
+ align-items: center;
704
+ display: flex;
705
+ z-index: 2147483647;
706
+ }
707
+ .react-datepicker__portal .react-datepicker__day-name,
708
+ .react-datepicker__portal .react-datepicker__day,
709
+ .react-datepicker__portal .react-datepicker__time-name {
710
+ width: 3rem;
711
+ line-height: 3rem;
712
+ }
713
+ @media (max-width: 400px), (max-height: 550px) {
714
+ .react-datepicker__portal .react-datepicker__day-name,
715
+ .react-datepicker__portal .react-datepicker__day,
716
+ .react-datepicker__portal .react-datepicker__time-name {
717
+ width: 2rem;
718
+ line-height: 2rem;
719
+ }
720
+ }
721
+ .react-datepicker__portal .react-datepicker__current-month,
722
+ .react-datepicker__portal .react-datepicker-time__header {
723
+ font-size: 1.44rem;
724
+ }
725
+
726
+ /* Çocuk Konteyner */
727
+ .react-datepicker__children-container {
728
+ width: 13.8rem;
729
+ margin: 0.4rem;
730
+ padding-right: 0.2rem;
731
+ padding-left: 0.2rem;
732
+ height: auto;
733
+ }
734
+
735
+ /* Erişilebilirlik */
736
+ .react-datepicker__aria-live {
737
+ position: absolute;
738
+ clip-path: circle(0);
739
+ border: 0;
740
+ height: 1px;
741
+ margin: -1px;
742
+ overflow: hidden;
743
+ padding: 0;
744
+ width: 1px;
745
+ white-space: nowrap;
746
+ }
747
+
748
+ /* Takvim İkonu */
749
+ .react-datepicker__calendar-icon {
750
+ width: 1em;
751
+ height: 1em;
752
+ vertical-align: -0.125em;
753
+ }
754
+
755
+ /* Yıl Navigasyon Okları */
756
+ .react-datepicker__navigation--years-upcoming::before {
757
+ content: "";
758
+ position: absolute;
759
+ right: 8px;
760
+ top: 70%;
761
+ transform: translateY(-50%) rotate(-135deg);
762
+ border: solid var(--bs-body-color);
763
+ border-width: 0 2px 2px 0;
764
+ display: inline-block;
765
+ width: 15px;
766
+ height: 15px;
767
+ }
768
+ .react-datepicker__navigation--years-previous::before {
769
+ content: "";
770
+ position: absolute;
771
+ right: 8px;
772
+ top: 30%;
773
+ transform: translateY(-50%) rotate(45deg);
774
+ border: solid var(--bs-body-color);
775
+ border-width: 0 2px 2px 0;
776
+ display: inline-block;
777
+ width: 15px;
778
+ height: 15px;
779
+ }