albinasoft-ui-package 1.0.71 → 1.0.72

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.
@@ -5,3 +5,786 @@
5
5
  .react-datepicker-popper {
6
6
  z-index: 5;
7
7
  }
8
+
9
+ .react-datepicker__navigation-icon::before, .react-datepicker__year-read-view--down-arrow,
10
+ .react-datepicker__month-read-view--down-arrow,
11
+ .react-datepicker__month-year-read-view--down-arrow {
12
+ border-color: #ccc;
13
+ border-style: solid;
14
+ border-width: 3px 3px 0 0;
15
+ content: "";
16
+ display: block;
17
+ height: 9px;
18
+ position: absolute;
19
+ top: 6px;
20
+ width: 9px;
21
+ }
22
+ .react-datepicker-wrapper {
23
+ display: inline-block;
24
+ padding: 0;
25
+ border: 0;
26
+ }
27
+
28
+ .react-datepicker {
29
+ font-family: "Helvetica Neue", helvetica, arial, sans-serif;
30
+ font-size: 0.8rem;
31
+ background-color: #fff;
32
+ color: #000;
33
+ border: 1px solid #aeaeae;
34
+ border-radius: 0.3rem;
35
+ display: inline-block;
36
+ position: relative;
37
+ line-height: initial;
38
+ }
39
+
40
+ .react-datepicker--time-only .react-datepicker__time-container {
41
+ border-left: 0;
42
+ }
43
+ .react-datepicker--time-only .react-datepicker__time,
44
+ .react-datepicker--time-only .react-datepicker__time-box {
45
+ border-bottom-left-radius: 0.3rem;
46
+ border-bottom-right-radius: 0.3rem;
47
+ }
48
+
49
+ .react-datepicker-popper {
50
+ z-index: 1;
51
+ line-height: 0;
52
+ }
53
+ .react-datepicker-popper .react-datepicker__triangle {
54
+ stroke: #aeaeae;
55
+ }
56
+ .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle {
57
+ fill: #f0f0f0;
58
+ color: #f0f0f0;
59
+ }
60
+ .react-datepicker-popper[data-placement^=top] .react-datepicker__triangle {
61
+ fill: #fff;
62
+ color: #fff;
63
+ }
64
+
65
+ .react-datepicker__header {
66
+ text-align: center;
67
+ background-color: #f0f0f0;
68
+ border-bottom: 1px solid #aeaeae;
69
+ border-top-left-radius: 0.3rem;
70
+ padding: 8px 0;
71
+ position: relative;
72
+ }
73
+ .react-datepicker__header--time {
74
+ padding-bottom: 8px;
75
+ padding-left: 5px;
76
+ padding-right: 5px;
77
+ }
78
+ .react-datepicker__header--time:not(.react-datepicker__header--time--only) {
79
+ border-top-left-radius: 0;
80
+ }
81
+ .react-datepicker__header:not(.react-datepicker__header--has-time-select) {
82
+ border-top-right-radius: 0.3rem;
83
+ }
84
+
85
+ .react-datepicker__year-dropdown-container--select,
86
+ .react-datepicker__month-dropdown-container--select,
87
+ .react-datepicker__month-year-dropdown-container--select,
88
+ .react-datepicker__year-dropdown-container--scroll,
89
+ .react-datepicker__month-dropdown-container--scroll,
90
+ .react-datepicker__month-year-dropdown-container--scroll {
91
+ display: inline-block;
92
+ margin: 0 15px;
93
+ }
94
+
95
+ .react-datepicker__current-month,
96
+ .react-datepicker-time__header,
97
+ .react-datepicker-year-header {
98
+ margin-top: 0;
99
+ color: #000;
100
+ font-weight: bold;
101
+ font-size: 0.944rem;
102
+ }
103
+
104
+ h2.react-datepicker__current-month {
105
+ padding: 0;
106
+ margin: 0;
107
+ }
108
+
109
+ .react-datepicker-time__header {
110
+ text-overflow: ellipsis;
111
+ white-space: nowrap;
112
+ overflow: hidden;
113
+ }
114
+
115
+ .react-datepicker__navigation {
116
+ align-items: center;
117
+ background: none;
118
+ display: flex;
119
+ justify-content: center;
120
+ text-align: center;
121
+ cursor: pointer;
122
+ position: absolute;
123
+ top: 2px;
124
+ padding: 0;
125
+ border: none;
126
+ z-index: 1;
127
+ height: 32px;
128
+ width: 32px;
129
+ text-indent: -999em;
130
+ overflow: hidden;
131
+ }
132
+ .react-datepicker__navigation--previous {
133
+ left: 2px;
134
+ }
135
+ .react-datepicker__navigation--next {
136
+ right: 2px;
137
+ }
138
+ .react-datepicker__navigation--next--with-time:not(.react-datepicker__navigation--next--with-today-button) {
139
+ right: 85px;
140
+ }
141
+ .react-datepicker__navigation--years {
142
+ position: relative;
143
+ top: 0;
144
+ display: block;
145
+ margin-left: auto;
146
+ margin-right: auto;
147
+ }
148
+ .react-datepicker__navigation--years-previous {
149
+ top: 4px;
150
+ }
151
+ .react-datepicker__navigation--years-upcoming {
152
+ top: -4px;
153
+ }
154
+ .react-datepicker__navigation:hover *::before {
155
+ border-color: rgb(165.75, 165.75, 165.75);
156
+ }
157
+
158
+ .react-datepicker__navigation-icon {
159
+ position: relative;
160
+ top: -1px;
161
+ font-size: 20px;
162
+ width: 0;
163
+ }
164
+ .react-datepicker__navigation-icon--next {
165
+ left: -2px;
166
+ }
167
+ .react-datepicker__navigation-icon--next::before {
168
+ transform: rotate(45deg);
169
+ left: -7px;
170
+ }
171
+ .react-datepicker__navigation-icon--previous {
172
+ right: -2px;
173
+ }
174
+ .react-datepicker__navigation-icon--previous::before {
175
+ transform: rotate(225deg);
176
+ right: -7px;
177
+ }
178
+
179
+ .react-datepicker__month-container {
180
+ float: left;
181
+ }
182
+
183
+ .react-datepicker__year {
184
+ margin: 0.4rem;
185
+ text-align: center;
186
+ }
187
+ .react-datepicker__year-wrapper {
188
+ display: flex;
189
+ flex-wrap: wrap;
190
+ max-width: 180px;
191
+ }
192
+ .react-datepicker__year .react-datepicker__year-text {
193
+ display: inline-block;
194
+ width: 4rem;
195
+ margin: 2px;
196
+ }
197
+
198
+ .react-datepicker__month {
199
+ margin: 0.4rem;
200
+ text-align: center;
201
+ }
202
+ .react-datepicker__month .react-datepicker__month-text,
203
+ .react-datepicker__month .react-datepicker__quarter-text {
204
+ display: inline-block;
205
+ width: 4rem;
206
+ margin: 2px;
207
+ }
208
+
209
+ .react-datepicker__input-time-container {
210
+ clear: both;
211
+ width: 100%;
212
+ float: left;
213
+ margin: 5px 0 10px 15px;
214
+ text-align: left;
215
+ }
216
+ .react-datepicker__input-time-container .react-datepicker-time__caption {
217
+ display: inline-block;
218
+ }
219
+ .react-datepicker__input-time-container .react-datepicker-time__input-container {
220
+ display: inline-block;
221
+ }
222
+ .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input {
223
+ display: inline-block;
224
+ margin-left: 10px;
225
+ }
226
+ .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input {
227
+ width: auto;
228
+ }
229
+ .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time]::-webkit-inner-spin-button,
230
+ .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time]::-webkit-outer-spin-button {
231
+ -webkit-appearance: none;
232
+ margin: 0;
233
+ }
234
+ .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time] {
235
+ -moz-appearance: textfield;
236
+ }
237
+ .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__delimiter {
238
+ margin-left: 5px;
239
+ display: inline-block;
240
+ }
241
+
242
+ .react-datepicker__time-container {
243
+ float: right;
244
+ border-left: 1px solid #aeaeae;
245
+ width: 85px;
246
+ }
247
+ .react-datepicker__time-container--with-today-button {
248
+ display: inline;
249
+ border: 1px solid #aeaeae;
250
+ border-radius: 0.3rem;
251
+ position: absolute;
252
+ right: -87px;
253
+ top: 0;
254
+ }
255
+ .react-datepicker__time-container .react-datepicker__time {
256
+ position: relative;
257
+ background: white;
258
+ border-bottom-right-radius: 0.3rem;
259
+ }
260
+ .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box {
261
+ width: 85px;
262
+ overflow-x: hidden;
263
+ margin: 0 auto;
264
+ text-align: center;
265
+ border-bottom-right-radius: 0.3rem;
266
+ }
267
+ .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list {
268
+ list-style: none;
269
+ margin: 0;
270
+ height: calc(195px + 1.7rem / 2);
271
+ overflow-y: scroll;
272
+ padding-right: 0;
273
+ padding-left: 0;
274
+ width: 100%;
275
+ box-sizing: content-box;
276
+ }
277
+ .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item {
278
+ height: 30px;
279
+ padding: 5px 10px;
280
+ white-space: nowrap;
281
+ }
282
+ .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item:hover {
283
+ cursor: pointer;
284
+ background-color: #f0f0f0;
285
+ }
286
+ .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected {
287
+ background-color: #216ba5;
288
+ color: white;
289
+ font-weight: bold;
290
+ }
291
+ .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected:hover {
292
+ background-color: #216ba5;
293
+ }
294
+ .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled {
295
+ color: #ccc;
296
+ }
297
+ .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled:hover {
298
+ cursor: default;
299
+ background-color: transparent;
300
+ }
301
+
302
+ .react-datepicker__week-number {
303
+ color: #ccc;
304
+ display: inline-block;
305
+ width: 1.7rem;
306
+ line-height: 1.7rem;
307
+ text-align: center;
308
+ margin: 0.166rem;
309
+ }
310
+ .react-datepicker__week-number.react-datepicker__week-number--clickable {
311
+ cursor: pointer;
312
+ }
313
+ .react-datepicker__week-number.react-datepicker__week-number--clickable:not(.react-datepicker__week-number--selected):hover {
314
+ border-radius: 0.3rem;
315
+ background-color: #f0f0f0;
316
+ }
317
+ .react-datepicker__week-number--selected {
318
+ border-radius: 0.3rem;
319
+ background-color: #216ba5;
320
+ color: #fff;
321
+ }
322
+ .react-datepicker__week-number--selected:hover {
323
+ background-color: rgb(28.75, 93.2196969697, 143.75);
324
+ }
325
+
326
+ .react-datepicker__day-names {
327
+ white-space: nowrap;
328
+ margin-bottom: -8px;
329
+ }
330
+
331
+ .react-datepicker__week {
332
+ white-space: nowrap;
333
+ }
334
+
335
+ .react-datepicker__day-name,
336
+ .react-datepicker__day,
337
+ .react-datepicker__time-name {
338
+ color: #000;
339
+ display: inline-block;
340
+ width: 1.7rem;
341
+ line-height: 1.7rem;
342
+ text-align: center;
343
+ margin: 0.166rem;
344
+ }
345
+
346
+ .react-datepicker__day,
347
+ .react-datepicker__month-text,
348
+ .react-datepicker__quarter-text,
349
+ .react-datepicker__year-text {
350
+ cursor: pointer;
351
+ }
352
+ .react-datepicker__day:not([aria-disabled=true]):hover,
353
+ .react-datepicker__month-text:not([aria-disabled=true]):hover,
354
+ .react-datepicker__quarter-text:not([aria-disabled=true]):hover,
355
+ .react-datepicker__year-text:not([aria-disabled=true]):hover {
356
+ border-radius: 0.3rem;
357
+ background-color: #f0f0f0;
358
+ }
359
+ .react-datepicker__day--today,
360
+ .react-datepicker__month-text--today,
361
+ .react-datepicker__quarter-text--today,
362
+ .react-datepicker__year-text--today {
363
+ font-weight: bold;
364
+ }
365
+ .react-datepicker__day--highlighted,
366
+ .react-datepicker__month-text--highlighted,
367
+ .react-datepicker__quarter-text--highlighted,
368
+ .react-datepicker__year-text--highlighted {
369
+ border-radius: 0.3rem;
370
+ background-color: #3dcc4a;
371
+ color: #fff;
372
+ }
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: rgb(49.8551020408, 189.6448979592, 62.5632653061);
378
+ }
379
+ .react-datepicker__day--highlighted-custom-1,
380
+ .react-datepicker__month-text--highlighted-custom-1,
381
+ .react-datepicker__quarter-text--highlighted-custom-1,
382
+ .react-datepicker__year-text--highlighted-custom-1 {
383
+ color: magenta;
384
+ }
385
+ .react-datepicker__day--highlighted-custom-2,
386
+ .react-datepicker__month-text--highlighted-custom-2,
387
+ .react-datepicker__quarter-text--highlighted-custom-2,
388
+ .react-datepicker__year-text--highlighted-custom-2 {
389
+ color: green;
390
+ }
391
+ .react-datepicker__day--holidays,
392
+ .react-datepicker__month-text--holidays,
393
+ .react-datepicker__quarter-text--holidays,
394
+ .react-datepicker__year-text--holidays {
395
+ position: relative;
396
+ border-radius: 0.3rem;
397
+ background-color: #ff6803;
398
+ color: #fff;
399
+ }
400
+ .react-datepicker__day--holidays .overlay,
401
+ .react-datepicker__month-text--holidays .overlay,
402
+ .react-datepicker__quarter-text--holidays .overlay,
403
+ .react-datepicker__year-text--holidays .overlay {
404
+ position: absolute;
405
+ bottom: 100%;
406
+ left: 50%;
407
+ transform: translateX(-50%);
408
+ background-color: #333;
409
+ color: #fff;
410
+ padding: 4px;
411
+ border-radius: 4px;
412
+ white-space: nowrap;
413
+ visibility: hidden;
414
+ opacity: 0;
415
+ transition: visibility 0s, opacity 0.3s ease-in-out;
416
+ }
417
+ .react-datepicker__day--holidays:not([aria-disabled=true]):hover,
418
+ .react-datepicker__month-text--holidays:not([aria-disabled=true]):hover,
419
+ .react-datepicker__quarter-text--holidays:not([aria-disabled=true]):hover,
420
+ .react-datepicker__year-text--holidays:not([aria-disabled=true]):hover {
421
+ background-color: rgb(207, 82.9642857143, 0);
422
+ }
423
+ .react-datepicker__day--holidays:hover .overlay,
424
+ .react-datepicker__month-text--holidays:hover .overlay,
425
+ .react-datepicker__quarter-text--holidays:hover .overlay,
426
+ .react-datepicker__year-text--holidays:hover .overlay {
427
+ visibility: visible;
428
+ opacity: 1;
429
+ }
430
+ .react-datepicker__day--selected, .react-datepicker__day--in-selecting-range, .react-datepicker__day--in-range,
431
+ .react-datepicker__month-text--selected,
432
+ .react-datepicker__month-text--in-selecting-range,
433
+ .react-datepicker__month-text--in-range,
434
+ .react-datepicker__quarter-text--selected,
435
+ .react-datepicker__quarter-text--in-selecting-range,
436
+ .react-datepicker__quarter-text--in-range,
437
+ .react-datepicker__year-text--selected,
438
+ .react-datepicker__year-text--in-selecting-range,
439
+ .react-datepicker__year-text--in-range {
440
+ border-radius: 0.3rem;
441
+ background-color: #216ba5;
442
+ color: #fff;
443
+ }
444
+ .react-datepicker__day--selected:not([aria-disabled=true]):hover, .react-datepicker__day--in-selecting-range:not([aria-disabled=true]):hover, .react-datepicker__day--in-range:not([aria-disabled=true]):hover,
445
+ .react-datepicker__month-text--selected:not([aria-disabled=true]):hover,
446
+ .react-datepicker__month-text--in-selecting-range:not([aria-disabled=true]):hover,
447
+ .react-datepicker__month-text--in-range:not([aria-disabled=true]):hover,
448
+ .react-datepicker__quarter-text--selected:not([aria-disabled=true]):hover,
449
+ .react-datepicker__quarter-text--in-selecting-range:not([aria-disabled=true]):hover,
450
+ .react-datepicker__quarter-text--in-range:not([aria-disabled=true]):hover,
451
+ .react-datepicker__year-text--selected:not([aria-disabled=true]):hover,
452
+ .react-datepicker__year-text--in-selecting-range:not([aria-disabled=true]):hover,
453
+ .react-datepicker__year-text--in-range:not([aria-disabled=true]):hover {
454
+ background-color: rgb(28.75, 93.2196969697, 143.75);
455
+ }
456
+ .react-datepicker__day--keyboard-selected,
457
+ .react-datepicker__month-text--keyboard-selected,
458
+ .react-datepicker__quarter-text--keyboard-selected,
459
+ .react-datepicker__year-text--keyboard-selected {
460
+ border-radius: 0.3rem;
461
+ background-color: rgb(186.25, 217.0833333333, 241.25);
462
+ color: rgb(0, 0, 0);
463
+ }
464
+ .react-datepicker__day--keyboard-selected:not([aria-disabled=true]):hover,
465
+ .react-datepicker__month-text--keyboard-selected:not([aria-disabled=true]):hover,
466
+ .react-datepicker__quarter-text--keyboard-selected:not([aria-disabled=true]):hover,
467
+ .react-datepicker__year-text--keyboard-selected:not([aria-disabled=true]):hover {
468
+ background-color: rgb(28.75, 93.2196969697, 143.75);
469
+ }
470
+ .react-datepicker__day--in-selecting-range:not(.react-datepicker__day--in-range,
471
+ .react-datepicker__month-text--in-range,
472
+ .react-datepicker__quarter-text--in-range,
473
+ .react-datepicker__year-text--in-range),
474
+ .react-datepicker__month-text--in-selecting-range:not(.react-datepicker__day--in-range,
475
+ .react-datepicker__month-text--in-range,
476
+ .react-datepicker__quarter-text--in-range,
477
+ .react-datepicker__year-text--in-range),
478
+ .react-datepicker__quarter-text--in-selecting-range:not(.react-datepicker__day--in-range,
479
+ .react-datepicker__month-text--in-range,
480
+ .react-datepicker__quarter-text--in-range,
481
+ .react-datepicker__year-text--in-range),
482
+ .react-datepicker__year-text--in-selecting-range:not(.react-datepicker__day--in-range,
483
+ .react-datepicker__month-text--in-range,
484
+ .react-datepicker__quarter-text--in-range,
485
+ .react-datepicker__year-text--in-range) {
486
+ background-color: rgba(33, 107, 165, 0.5);
487
+ }
488
+ .react-datepicker__month--selecting-range .react-datepicker__day--in-range:not(.react-datepicker__day--in-selecting-range,
489
+ .react-datepicker__month-text--in-selecting-range,
490
+ .react-datepicker__quarter-text--in-selecting-range,
491
+ .react-datepicker__year-text--in-selecting-range), .react-datepicker__year--selecting-range .react-datepicker__day--in-range:not(.react-datepicker__day--in-selecting-range,
492
+ .react-datepicker__month-text--in-selecting-range,
493
+ .react-datepicker__quarter-text--in-selecting-range,
494
+ .react-datepicker__year-text--in-selecting-range),
495
+ .react-datepicker__month--selecting-range .react-datepicker__month-text--in-range:not(.react-datepicker__day--in-selecting-range,
496
+ .react-datepicker__month-text--in-selecting-range,
497
+ .react-datepicker__quarter-text--in-selecting-range,
498
+ .react-datepicker__year-text--in-selecting-range),
499
+ .react-datepicker__year--selecting-range .react-datepicker__month-text--in-range:not(.react-datepicker__day--in-selecting-range,
500
+ .react-datepicker__month-text--in-selecting-range,
501
+ .react-datepicker__quarter-text--in-selecting-range,
502
+ .react-datepicker__year-text--in-selecting-range),
503
+ .react-datepicker__month--selecting-range .react-datepicker__quarter-text--in-range:not(.react-datepicker__day--in-selecting-range,
504
+ .react-datepicker__month-text--in-selecting-range,
505
+ .react-datepicker__quarter-text--in-selecting-range,
506
+ .react-datepicker__year-text--in-selecting-range),
507
+ .react-datepicker__year--selecting-range .react-datepicker__quarter-text--in-range:not(.react-datepicker__day--in-selecting-range,
508
+ .react-datepicker__month-text--in-selecting-range,
509
+ .react-datepicker__quarter-text--in-selecting-range,
510
+ .react-datepicker__year-text--in-selecting-range),
511
+ .react-datepicker__month--selecting-range .react-datepicker__year-text--in-range:not(.react-datepicker__day--in-selecting-range,
512
+ .react-datepicker__month-text--in-selecting-range,
513
+ .react-datepicker__quarter-text--in-selecting-range,
514
+ .react-datepicker__year-text--in-selecting-range),
515
+ .react-datepicker__year--selecting-range .react-datepicker__year-text--in-range:not(.react-datepicker__day--in-selecting-range,
516
+ .react-datepicker__month-text--in-selecting-range,
517
+ .react-datepicker__quarter-text--in-selecting-range,
518
+ .react-datepicker__year-text--in-selecting-range) {
519
+ background-color: #f0f0f0;
520
+ color: #000;
521
+ }
522
+ .react-datepicker__day--disabled,
523
+ .react-datepicker__month-text--disabled,
524
+ .react-datepicker__quarter-text--disabled,
525
+ .react-datepicker__year-text--disabled {
526
+ cursor: default;
527
+ color: #ccc;
528
+ }
529
+ .react-datepicker__day--disabled .overlay,
530
+ .react-datepicker__month-text--disabled .overlay,
531
+ .react-datepicker__quarter-text--disabled .overlay,
532
+ .react-datepicker__year-text--disabled .overlay {
533
+ position: absolute;
534
+ bottom: 70%;
535
+ left: 50%;
536
+ transform: translateX(-50%);
537
+ background-color: #333;
538
+ color: #fff;
539
+ padding: 4px;
540
+ border-radius: 4px;
541
+ white-space: nowrap;
542
+ visibility: hidden;
543
+ opacity: 0;
544
+ transition: visibility 0s, opacity 0.3s ease-in-out;
545
+ }
546
+
547
+ .react-datepicker__input-container {
548
+ position: relative;
549
+ display: inline-block;
550
+ width: 100%;
551
+ }
552
+ .react-datepicker__input-container .react-datepicker__calendar-icon {
553
+ position: absolute;
554
+ padding: 0.5rem;
555
+ box-sizing: content-box;
556
+ }
557
+
558
+ .react-datepicker__view-calendar-icon input {
559
+ padding: 6px 10px 5px 25px;
560
+ }
561
+
562
+ .react-datepicker__year-read-view,
563
+ .react-datepicker__month-read-view,
564
+ .react-datepicker__month-year-read-view {
565
+ border: 1px solid transparent;
566
+ border-radius: 0.3rem;
567
+ position: relative;
568
+ }
569
+ .react-datepicker__year-read-view:hover,
570
+ .react-datepicker__month-read-view:hover,
571
+ .react-datepicker__month-year-read-view:hover {
572
+ cursor: pointer;
573
+ }
574
+ .react-datepicker__year-read-view:hover .react-datepicker__year-read-view--down-arrow,
575
+ .react-datepicker__year-read-view:hover .react-datepicker__month-read-view--down-arrow,
576
+ .react-datepicker__month-read-view:hover .react-datepicker__year-read-view--down-arrow,
577
+ .react-datepicker__month-read-view:hover .react-datepicker__month-read-view--down-arrow,
578
+ .react-datepicker__month-year-read-view:hover .react-datepicker__year-read-view--down-arrow,
579
+ .react-datepicker__month-year-read-view:hover .react-datepicker__month-read-view--down-arrow {
580
+ border-top-color: rgb(178.5, 178.5, 178.5);
581
+ }
582
+ .react-datepicker__year-read-view--down-arrow,
583
+ .react-datepicker__month-read-view--down-arrow,
584
+ .react-datepicker__month-year-read-view--down-arrow {
585
+ transform: rotate(135deg);
586
+ right: -16px;
587
+ top: 0;
588
+ }
589
+
590
+ .react-datepicker__year-dropdown,
591
+ .react-datepicker__month-dropdown,
592
+ .react-datepicker__month-year-dropdown {
593
+ background-color: #f0f0f0;
594
+ position: absolute;
595
+ width: 50%;
596
+ left: 25%;
597
+ top: 30px;
598
+ z-index: 1;
599
+ text-align: center;
600
+ border-radius: 0.3rem;
601
+ border: 1px solid #aeaeae;
602
+ }
603
+ .react-datepicker__year-dropdown:hover,
604
+ .react-datepicker__month-dropdown:hover,
605
+ .react-datepicker__month-year-dropdown:hover {
606
+ cursor: pointer;
607
+ }
608
+ .react-datepicker__year-dropdown--scrollable,
609
+ .react-datepicker__month-dropdown--scrollable,
610
+ .react-datepicker__month-year-dropdown--scrollable {
611
+ height: 150px;
612
+ overflow-y: scroll;
613
+ }
614
+
615
+ .react-datepicker__year-option,
616
+ .react-datepicker__month-option,
617
+ .react-datepicker__month-year-option {
618
+ line-height: 20px;
619
+ width: 100%;
620
+ display: block;
621
+ margin-left: auto;
622
+ margin-right: auto;
623
+ }
624
+ .react-datepicker__year-option:first-of-type,
625
+ .react-datepicker__month-option:first-of-type,
626
+ .react-datepicker__month-year-option:first-of-type {
627
+ border-top-left-radius: 0.3rem;
628
+ border-top-right-radius: 0.3rem;
629
+ }
630
+ .react-datepicker__year-option:last-of-type,
631
+ .react-datepicker__month-option:last-of-type,
632
+ .react-datepicker__month-year-option:last-of-type {
633
+ -webkit-user-select: none;
634
+ -moz-user-select: none;
635
+ -ms-user-select: none;
636
+ user-select: none;
637
+ border-bottom-left-radius: 0.3rem;
638
+ border-bottom-right-radius: 0.3rem;
639
+ }
640
+ .react-datepicker__year-option:hover,
641
+ .react-datepicker__month-option:hover,
642
+ .react-datepicker__month-year-option:hover {
643
+ background-color: #ccc;
644
+ }
645
+ .react-datepicker__year-option:hover .react-datepicker__navigation--years-upcoming,
646
+ .react-datepicker__month-option:hover .react-datepicker__navigation--years-upcoming,
647
+ .react-datepicker__month-year-option:hover .react-datepicker__navigation--years-upcoming {
648
+ border-bottom-color: rgb(178.5, 178.5, 178.5);
649
+ }
650
+ .react-datepicker__year-option:hover .react-datepicker__navigation--years-previous,
651
+ .react-datepicker__month-option:hover .react-datepicker__navigation--years-previous,
652
+ .react-datepicker__month-year-option:hover .react-datepicker__navigation--years-previous {
653
+ border-top-color: rgb(178.5, 178.5, 178.5);
654
+ }
655
+ .react-datepicker__year-option--selected,
656
+ .react-datepicker__month-option--selected,
657
+ .react-datepicker__month-year-option--selected {
658
+ position: absolute;
659
+ left: 15px;
660
+ }
661
+
662
+ .react-datepicker__close-icon {
663
+ cursor: pointer;
664
+ background-color: transparent;
665
+ border: 0;
666
+ outline: 0;
667
+ padding: 0 6px 0 0;
668
+ position: absolute;
669
+ top: 0;
670
+ right: 0;
671
+ height: 100%;
672
+ display: table-cell;
673
+ vertical-align: middle;
674
+ }
675
+ .react-datepicker__close-icon::after {
676
+ cursor: pointer;
677
+ background-color: #216ba5;
678
+ color: #fff;
679
+ border-radius: 50%;
680
+ height: 16px;
681
+ width: 16px;
682
+ padding: 2px;
683
+ font-size: 12px;
684
+ line-height: 1;
685
+ text-align: center;
686
+ display: table-cell;
687
+ vertical-align: middle;
688
+ content: "×";
689
+ }
690
+ .react-datepicker__close-icon--disabled {
691
+ cursor: default;
692
+ }
693
+ .react-datepicker__close-icon--disabled::after {
694
+ cursor: default;
695
+ background-color: #ccc;
696
+ }
697
+
698
+ .react-datepicker__today-button {
699
+ background: #f0f0f0;
700
+ border-top: 1px solid #aeaeae;
701
+ cursor: pointer;
702
+ text-align: center;
703
+ font-weight: bold;
704
+ padding: 5px 0;
705
+ clear: left;
706
+ }
707
+
708
+ .react-datepicker__portal {
709
+ position: fixed;
710
+ width: 100vw;
711
+ height: 100vh;
712
+ background-color: rgba(0, 0, 0, 0.8);
713
+ left: 0;
714
+ top: 0;
715
+ justify-content: center;
716
+ align-items: center;
717
+ display: flex;
718
+ z-index: 2147483647;
719
+ }
720
+ .react-datepicker__portal .react-datepicker__day-name,
721
+ .react-datepicker__portal .react-datepicker__day,
722
+ .react-datepicker__portal .react-datepicker__time-name {
723
+ width: 3rem;
724
+ line-height: 3rem;
725
+ }
726
+ @media (max-width: 400px), (max-height: 550px) {
727
+ .react-datepicker__portal .react-datepicker__day-name,
728
+ .react-datepicker__portal .react-datepicker__day,
729
+ .react-datepicker__portal .react-datepicker__time-name {
730
+ width: 2rem;
731
+ line-height: 2rem;
732
+ }
733
+ }
734
+ .react-datepicker__portal .react-datepicker__current-month,
735
+ .react-datepicker__portal .react-datepicker-time__header {
736
+ font-size: 1.44rem;
737
+ }
738
+
739
+ .react-datepicker__children-container {
740
+ width: 13.8rem;
741
+ margin: 0.4rem;
742
+ padding-right: 0.2rem;
743
+ padding-left: 0.2rem;
744
+ height: auto;
745
+ }
746
+
747
+ .react-datepicker__aria-live {
748
+ position: absolute;
749
+ clip-path: circle(0);
750
+ border: 0;
751
+ height: 1px;
752
+ margin: -1px;
753
+ overflow: hidden;
754
+ padding: 0;
755
+ width: 1px;
756
+ white-space: nowrap;
757
+ }
758
+
759
+ .react-datepicker__calendar-icon {
760
+ width: 1em;
761
+ height: 1em;
762
+ vertical-align: -0.125em;
763
+ }
764
+
765
+
766
+ .react-datepicker__navigation--years-upcoming::before {
767
+ content: "";
768
+ position: absolute;
769
+ right: 8px;
770
+ top: 70%;
771
+ transform: translateY(-50%) rotate(-135deg);
772
+ border: solid #000; /* ikon rengi */
773
+ border-width: 0 2px 2px 0;
774
+ display: inline-block;
775
+ width: 15px;
776
+ height: 15px;
777
+ }
778
+
779
+ .react-datepicker__navigation--years-previous::before {
780
+ content: "";
781
+ position: absolute;
782
+ right: 8px;
783
+ top: 30%;
784
+ transform: translateY(-50%) rotate(45deg);
785
+ border: solid #000; /* ikon rengi */
786
+ border-width: 0 2px 2px 0;
787
+ display: inline-block;
788
+ width: 15px;
789
+ height: 15px;
790
+ }
@@ -1,5 +1,4 @@
1
1
  import React from "react";
2
- import "react-datepicker/dist/react-datepicker.css";
3
2
  import "../assets/css/custom-datetime-picker.css";
4
3
  declare enum TimeFormat {
5
4
  H = "HH",
@@ -1,27 +1,4 @@
1
1
  "use strict";
2
- var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
- if (k2 === undefined) k2 = k;
4
- var desc = Object.getOwnPropertyDescriptor(m, k);
5
- if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
6
- desc = { enumerable: true, get: function() { return m[k]; } };
7
- }
8
- Object.defineProperty(o, k2, desc);
9
- }) : (function(o, m, k, k2) {
10
- if (k2 === undefined) k2 = k;
11
- o[k2] = m[k];
12
- }));
13
- var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
14
- Object.defineProperty(o, "default", { enumerable: true, value: v });
15
- }) : function(o, v) {
16
- o["default"] = v;
17
- });
18
- var __importStar = (this && this.__importStar) || function (mod) {
19
- if (mod && mod.__esModule) return mod;
20
- var result = {};
21
- if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
22
- __setModuleDefault(result, mod);
23
- return result;
24
- };
25
2
  var __importDefault = (this && this.__importDefault) || function (mod) {
26
3
  return (mod && mod.__esModule) ? mod : { "default": mod };
27
4
  };
@@ -30,11 +7,8 @@ exports.TimeFormat = exports.CustomDateTimePicker = void 0;
30
7
  var react_1 = __importDefault(require("react"));
31
8
  var react_bootstrap_1 = require("react-bootstrap");
32
9
  var fa_1 = require("react-icons/fa");
33
- var react_datepicker_1 = __importStar(require("react-datepicker"));
34
- require("react-datepicker/dist/react-datepicker.css");
10
+ var react_datepicker_1 = __importDefault(require("react-datepicker"));
35
11
  require("../assets/css/custom-datetime-picker.css");
36
- var tr_1 = require("date-fns/locale/tr");
37
- (0, react_datepicker_1.registerLocale)('tr', tr_1.tr);
38
12
  var TimeFormat;
39
13
  (function (TimeFormat) {
40
14
  TimeFormat["H"] = "HH";
@@ -42,21 +16,50 @@ var TimeFormat;
42
16
  TimeFormat["HM"] = "HH:mm";
43
17
  })(TimeFormat || (TimeFormat = {}));
44
18
  exports.TimeFormat = TimeFormat;
19
+ // Manuel Türkçe locale objesi
20
+ var customTrLocale = {
21
+ localize: {
22
+ month: function (n) {
23
+ var months = [
24
+ "Ocak", "Şubat", "Mart", "Nisan", "Mayıs", "Haziran",
25
+ "Temmuz", "Ağustos", "Eylül", "Ekim", "Kasım", "Aralık"
26
+ ];
27
+ return months[n];
28
+ },
29
+ day: function (n) {
30
+ var days = [
31
+ "Pzr", "Pts", "Sal", "Çrş", "Prş", "Cum", "Cts"
32
+ ];
33
+ return days[n];
34
+ },
35
+ // Diğer lokalizasyon fonksiyonları eklenebilir
36
+ },
37
+ formatLong: {
38
+ date: function () { return "dd.MM.yyyy"; },
39
+ time: function () { return "HH:mm"; },
40
+ dateTime: function () { return "dd.MM.yyyy HH:mm"; },
41
+ },
42
+ options: {
43
+ weekStartsOn: 1 // Haftanın başlangıcı: Pazartesi
44
+ }
45
+ };
45
46
  var CustomDateTimePicker = function (_a) {
46
47
  var id = _a.id, name = _a.name, label = _a.label, value = _a.value, placeholder = _a.placeholder, _b = _a.required, required = _b === void 0 ? false : _b, errorMessage = _a.errorMessage, _c = _a.conditionalErrorVisible, conditionalErrorVisible = _c === void 0 ? false : _c, conditionalErrorMessage = _a.conditionalErrorMessage, tooltip = _a.tooltip, description = _a.description, _d = _a.disabled, disabled = _d === void 0 ? false : _d, className = _a.className, style = _a.style, showTimeSelect = _a.showTimeSelect, showTimeSelectOnly = _a.showTimeSelectOnly, showYearDropdown = _a.showYearDropdown, _e = _a.timeFormat, timeFormat = _e === void 0 ? TimeFormat.HM : _e, timeIntervals = _a.timeIntervals, onChange = _a.onChange;
47
- return (react_1.default.createElement("div", { className: "col-12" },
48
+ return (react_1.default.createElement("div", { className: "col-12", style: style },
48
49
  react_1.default.createElement("div", { className: "form-group" },
49
50
  react_1.default.createElement("label", { htmlFor: id, className: "form-label" }, label),
50
51
  react_1.default.createElement("div", { className: "position-relative" },
51
52
  react_1.default.createElement(react_bootstrap_1.OverlayTrigger, { placement: "bottom", overlay: tooltip ? (react_1.default.createElement(react_bootstrap_1.Tooltip, { id: "tooltip-".concat(id) }, tooltip)) : (react_1.default.createElement(react_1.default.Fragment, null)) },
52
53
  react_1.default.createElement("div", null,
53
- react_1.default.createElement(react_datepicker_1.default, { id: id, name: name, selected: value, onChange: onChange, className: "form-control ".concat(className || ""), placeholderText: placeholder, disabled: disabled, required: required, showTimeSelect: showTimeSelect || false, showTimeSelectOnly: showTimeSelectOnly || false, showYearDropdown: showYearDropdown || false, showTimeCaption: false, timeFormat: timeFormat, locale: "tr", dateFormat: showTimeSelectOnly
54
+ react_1.default.createElement(react_datepicker_1.default, { id: id, name: name, selected: value, onChange: onChange, className: "form-control ".concat(className || ""), placeholderText: placeholder, disabled: disabled, required: required, showTimeSelect: showTimeSelect || false, showTimeSelectOnly: showTimeSelectOnly || false, showYearDropdown: showYearDropdown || false, showTimeCaption: false, timeFormat: timeFormat,
55
+ // Manuel locale objesini geçiyoruz; TypeScript uyumsuzluklarını önlemek için "as any"
56
+ locale: customTrLocale, dateFormat: showTimeSelectOnly
54
57
  ? timeFormat
55
58
  : showTimeSelect
56
59
  ? "dd.MM.yyyy HH:mm"
57
- : "dd.MM.yyyy", timeIntervals: timeFormat == TimeFormat.H
60
+ : "dd.MM.yyyy", timeIntervals: timeFormat === TimeFormat.H
58
61
  ? 60
59
- : timeFormat == TimeFormat.M
62
+ : timeFormat === TimeFormat.M
60
63
  ? 1
61
64
  : timeIntervals
62
65
  ? timeIntervals
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "albinasoft-ui-package",
3
- "version": "1.0.71",
3
+ "version": "1.0.72",
4
4
  "main": "dist/index.js",
5
5
  "types": "dist/index.d.ts",
6
6
  "scripts": {