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