albinasoft-ui-package 1.0.71 → 1.0.73

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,787 @@
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
+
248
+ .react-datepicker__time-container--with-today-button {
249
+ display: inline;
250
+ border: 1px solid #aeaeae;
251
+ border-radius: 0.3rem;
252
+ position: absolute;
253
+ right: -87px;
254
+ top: 0;
255
+ }
256
+ .react-datepicker__time-container .react-datepicker__time {
257
+ position: relative;
258
+ background: white;
259
+ border-bottom-right-radius: 0.3rem;
260
+ }
261
+ .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box {
262
+ width: 85px;
263
+ overflow-x: hidden;
264
+ margin: 0 auto;
265
+ text-align: center;
266
+ border-bottom-right-radius: 0.3rem;
267
+ }
268
+ .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list {
269
+ list-style: none;
270
+ margin: 0;
271
+ height: calc(195px + 1.7rem / 2);
272
+ overflow-y: scroll;
273
+ padding-right: 0;
274
+ padding-left: 0;
275
+ width: 100%;
276
+ box-sizing: content-box;
277
+ }
278
+ .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item {
279
+ height: 30px;
280
+ padding: 5px 10px;
281
+ white-space: nowrap;
282
+ }
283
+ .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item:hover {
284
+ cursor: pointer;
285
+ background-color: #f0f0f0;
286
+ }
287
+ .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected {
288
+ background-color: #216ba5;
289
+ color: white;
290
+ font-weight: bold;
291
+ }
292
+ .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected:hover {
293
+ background-color: #216ba5;
294
+ }
295
+ .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled {
296
+ color: #ccc;
297
+ }
298
+ .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled:hover {
299
+ cursor: default;
300
+ background-color: transparent;
301
+ }
302
+
303
+ .react-datepicker__week-number {
304
+ color: #ccc;
305
+ display: inline-block;
306
+ width: 1.7rem;
307
+ line-height: 1.7rem;
308
+ text-align: center;
309
+ margin: 0.166rem;
310
+ }
311
+ .react-datepicker__week-number.react-datepicker__week-number--clickable {
312
+ cursor: pointer;
313
+ }
314
+ .react-datepicker__week-number.react-datepicker__week-number--clickable:not(.react-datepicker__week-number--selected):hover {
315
+ border-radius: 0.3rem;
316
+ background-color: #f0f0f0;
317
+ }
318
+ .react-datepicker__week-number--selected {
319
+ border-radius: 0.3rem;
320
+ background-color: #216ba5;
321
+ color: #fff;
322
+ }
323
+ .react-datepicker__week-number--selected:hover {
324
+ background-color: rgb(28.75, 93.2196969697, 143.75);
325
+ }
326
+
327
+ .react-datepicker__day-names {
328
+ white-space: nowrap;
329
+ margin-bottom: -8px;
330
+ }
331
+
332
+ .react-datepicker__week {
333
+ white-space: nowrap;
334
+ }
335
+
336
+ .react-datepicker__day-name,
337
+ .react-datepicker__day,
338
+ .react-datepicker__time-name {
339
+ color: #000;
340
+ display: inline-block;
341
+ width: 1.7rem;
342
+ line-height: 1.7rem;
343
+ text-align: center;
344
+ margin: 0.166rem;
345
+ }
346
+
347
+ .react-datepicker__day,
348
+ .react-datepicker__month-text,
349
+ .react-datepicker__quarter-text,
350
+ .react-datepicker__year-text {
351
+ cursor: pointer;
352
+ }
353
+ .react-datepicker__day:not([aria-disabled=true]):hover,
354
+ .react-datepicker__month-text:not([aria-disabled=true]):hover,
355
+ .react-datepicker__quarter-text:not([aria-disabled=true]):hover,
356
+ .react-datepicker__year-text:not([aria-disabled=true]):hover {
357
+ border-radius: 0.3rem;
358
+ background-color: #f0f0f0;
359
+ }
360
+ .react-datepicker__day--today,
361
+ .react-datepicker__month-text--today,
362
+ .react-datepicker__quarter-text--today,
363
+ .react-datepicker__year-text--today {
364
+ font-weight: bold;
365
+ }
366
+ .react-datepicker__day--highlighted,
367
+ .react-datepicker__month-text--highlighted,
368
+ .react-datepicker__quarter-text--highlighted,
369
+ .react-datepicker__year-text--highlighted {
370
+ border-radius: 0.3rem;
371
+ background-color: #3dcc4a;
372
+ color: #fff;
373
+ }
374
+ .react-datepicker__day--highlighted:not([aria-disabled=true]):hover,
375
+ .react-datepicker__month-text--highlighted:not([aria-disabled=true]):hover,
376
+ .react-datepicker__quarter-text--highlighted:not([aria-disabled=true]):hover,
377
+ .react-datepicker__year-text--highlighted:not([aria-disabled=true]):hover {
378
+ background-color: rgb(49.8551020408, 189.6448979592, 62.5632653061);
379
+ }
380
+ .react-datepicker__day--highlighted-custom-1,
381
+ .react-datepicker__month-text--highlighted-custom-1,
382
+ .react-datepicker__quarter-text--highlighted-custom-1,
383
+ .react-datepicker__year-text--highlighted-custom-1 {
384
+ color: magenta;
385
+ }
386
+ .react-datepicker__day--highlighted-custom-2,
387
+ .react-datepicker__month-text--highlighted-custom-2,
388
+ .react-datepicker__quarter-text--highlighted-custom-2,
389
+ .react-datepicker__year-text--highlighted-custom-2 {
390
+ color: green;
391
+ }
392
+ .react-datepicker__day--holidays,
393
+ .react-datepicker__month-text--holidays,
394
+ .react-datepicker__quarter-text--holidays,
395
+ .react-datepicker__year-text--holidays {
396
+ position: relative;
397
+ border-radius: 0.3rem;
398
+ background-color: #ff6803;
399
+ color: #fff;
400
+ }
401
+ .react-datepicker__day--holidays .overlay,
402
+ .react-datepicker__month-text--holidays .overlay,
403
+ .react-datepicker__quarter-text--holidays .overlay,
404
+ .react-datepicker__year-text--holidays .overlay {
405
+ position: absolute;
406
+ bottom: 100%;
407
+ left: 50%;
408
+ transform: translateX(-50%);
409
+ background-color: #333;
410
+ color: #fff;
411
+ padding: 4px;
412
+ border-radius: 4px;
413
+ white-space: nowrap;
414
+ visibility: hidden;
415
+ opacity: 0;
416
+ transition: visibility 0s, opacity 0.3s ease-in-out;
417
+ }
418
+ .react-datepicker__day--holidays:not([aria-disabled=true]):hover,
419
+ .react-datepicker__month-text--holidays:not([aria-disabled=true]):hover,
420
+ .react-datepicker__quarter-text--holidays:not([aria-disabled=true]):hover,
421
+ .react-datepicker__year-text--holidays:not([aria-disabled=true]):hover {
422
+ background-color: rgb(207, 82.9642857143, 0);
423
+ }
424
+ .react-datepicker__day--holidays:hover .overlay,
425
+ .react-datepicker__month-text--holidays:hover .overlay,
426
+ .react-datepicker__quarter-text--holidays:hover .overlay,
427
+ .react-datepicker__year-text--holidays:hover .overlay {
428
+ visibility: visible;
429
+ opacity: 1;
430
+ }
431
+ .react-datepicker__day--selected, .react-datepicker__day--in-selecting-range, .react-datepicker__day--in-range,
432
+ .react-datepicker__month-text--selected,
433
+ .react-datepicker__month-text--in-selecting-range,
434
+ .react-datepicker__month-text--in-range,
435
+ .react-datepicker__quarter-text--selected,
436
+ .react-datepicker__quarter-text--in-selecting-range,
437
+ .react-datepicker__quarter-text--in-range,
438
+ .react-datepicker__year-text--selected,
439
+ .react-datepicker__year-text--in-selecting-range,
440
+ .react-datepicker__year-text--in-range {
441
+ border-radius: 0.3rem;
442
+ background-color: #216ba5;
443
+ color: #fff;
444
+ }
445
+ .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,
446
+ .react-datepicker__month-text--selected:not([aria-disabled=true]):hover,
447
+ .react-datepicker__month-text--in-selecting-range:not([aria-disabled=true]):hover,
448
+ .react-datepicker__month-text--in-range:not([aria-disabled=true]):hover,
449
+ .react-datepicker__quarter-text--selected:not([aria-disabled=true]):hover,
450
+ .react-datepicker__quarter-text--in-selecting-range:not([aria-disabled=true]):hover,
451
+ .react-datepicker__quarter-text--in-range:not([aria-disabled=true]):hover,
452
+ .react-datepicker__year-text--selected:not([aria-disabled=true]):hover,
453
+ .react-datepicker__year-text--in-selecting-range:not([aria-disabled=true]):hover,
454
+ .react-datepicker__year-text--in-range:not([aria-disabled=true]):hover {
455
+ background-color: rgb(28.75, 93.2196969697, 143.75);
456
+ }
457
+ .react-datepicker__day--keyboard-selected,
458
+ .react-datepicker__month-text--keyboard-selected,
459
+ .react-datepicker__quarter-text--keyboard-selected,
460
+ .react-datepicker__year-text--keyboard-selected {
461
+ border-radius: 0.3rem;
462
+ background-color: rgb(186.25, 217.0833333333, 241.25);
463
+ color: rgb(0, 0, 0);
464
+ }
465
+ .react-datepicker__day--keyboard-selected:not([aria-disabled=true]):hover,
466
+ .react-datepicker__month-text--keyboard-selected:not([aria-disabled=true]):hover,
467
+ .react-datepicker__quarter-text--keyboard-selected:not([aria-disabled=true]):hover,
468
+ .react-datepicker__year-text--keyboard-selected:not([aria-disabled=true]):hover {
469
+ background-color: rgb(28.75, 93.2196969697, 143.75);
470
+ }
471
+ .react-datepicker__day--in-selecting-range:not(.react-datepicker__day--in-range,
472
+ .react-datepicker__month-text--in-range,
473
+ .react-datepicker__quarter-text--in-range,
474
+ .react-datepicker__year-text--in-range),
475
+ .react-datepicker__month-text--in-selecting-range:not(.react-datepicker__day--in-range,
476
+ .react-datepicker__month-text--in-range,
477
+ .react-datepicker__quarter-text--in-range,
478
+ .react-datepicker__year-text--in-range),
479
+ .react-datepicker__quarter-text--in-selecting-range:not(.react-datepicker__day--in-range,
480
+ .react-datepicker__month-text--in-range,
481
+ .react-datepicker__quarter-text--in-range,
482
+ .react-datepicker__year-text--in-range),
483
+ .react-datepicker__year-text--in-selecting-range:not(.react-datepicker__day--in-range,
484
+ .react-datepicker__month-text--in-range,
485
+ .react-datepicker__quarter-text--in-range,
486
+ .react-datepicker__year-text--in-range) {
487
+ background-color: rgba(33, 107, 165, 0.5);
488
+ }
489
+ .react-datepicker__month--selecting-range .react-datepicker__day--in-range:not(.react-datepicker__day--in-selecting-range,
490
+ .react-datepicker__month-text--in-selecting-range,
491
+ .react-datepicker__quarter-text--in-selecting-range,
492
+ .react-datepicker__year-text--in-selecting-range), .react-datepicker__year--selecting-range .react-datepicker__day--in-range:not(.react-datepicker__day--in-selecting-range,
493
+ .react-datepicker__month-text--in-selecting-range,
494
+ .react-datepicker__quarter-text--in-selecting-range,
495
+ .react-datepicker__year-text--in-selecting-range),
496
+ .react-datepicker__month--selecting-range .react-datepicker__month-text--in-range:not(.react-datepicker__day--in-selecting-range,
497
+ .react-datepicker__month-text--in-selecting-range,
498
+ .react-datepicker__quarter-text--in-selecting-range,
499
+ .react-datepicker__year-text--in-selecting-range),
500
+ .react-datepicker__year--selecting-range .react-datepicker__month-text--in-range:not(.react-datepicker__day--in-selecting-range,
501
+ .react-datepicker__month-text--in-selecting-range,
502
+ .react-datepicker__quarter-text--in-selecting-range,
503
+ .react-datepicker__year-text--in-selecting-range),
504
+ .react-datepicker__month--selecting-range .react-datepicker__quarter-text--in-range:not(.react-datepicker__day--in-selecting-range,
505
+ .react-datepicker__month-text--in-selecting-range,
506
+ .react-datepicker__quarter-text--in-selecting-range,
507
+ .react-datepicker__year-text--in-selecting-range),
508
+ .react-datepicker__year--selecting-range .react-datepicker__quarter-text--in-range:not(.react-datepicker__day--in-selecting-range,
509
+ .react-datepicker__month-text--in-selecting-range,
510
+ .react-datepicker__quarter-text--in-selecting-range,
511
+ .react-datepicker__year-text--in-selecting-range),
512
+ .react-datepicker__month--selecting-range .react-datepicker__year-text--in-range:not(.react-datepicker__day--in-selecting-range,
513
+ .react-datepicker__month-text--in-selecting-range,
514
+ .react-datepicker__quarter-text--in-selecting-range,
515
+ .react-datepicker__year-text--in-selecting-range),
516
+ .react-datepicker__year--selecting-range .react-datepicker__year-text--in-range:not(.react-datepicker__day--in-selecting-range,
517
+ .react-datepicker__month-text--in-selecting-range,
518
+ .react-datepicker__quarter-text--in-selecting-range,
519
+ .react-datepicker__year-text--in-selecting-range) {
520
+ background-color: #f0f0f0;
521
+ color: #000;
522
+ }
523
+ .react-datepicker__day--disabled,
524
+ .react-datepicker__month-text--disabled,
525
+ .react-datepicker__quarter-text--disabled,
526
+ .react-datepicker__year-text--disabled {
527
+ cursor: default;
528
+ color: #ccc;
529
+ }
530
+ .react-datepicker__day--disabled .overlay,
531
+ .react-datepicker__month-text--disabled .overlay,
532
+ .react-datepicker__quarter-text--disabled .overlay,
533
+ .react-datepicker__year-text--disabled .overlay {
534
+ position: absolute;
535
+ bottom: 70%;
536
+ left: 50%;
537
+ transform: translateX(-50%);
538
+ background-color: #333;
539
+ color: #fff;
540
+ padding: 4px;
541
+ border-radius: 4px;
542
+ white-space: nowrap;
543
+ visibility: hidden;
544
+ opacity: 0;
545
+ transition: visibility 0s, opacity 0.3s ease-in-out;
546
+ }
547
+
548
+ .react-datepicker__input-container {
549
+ position: relative;
550
+ display: inline-block;
551
+ width: 100%;
552
+ }
553
+ .react-datepicker__input-container .react-datepicker__calendar-icon {
554
+ position: absolute;
555
+ padding: 0.5rem;
556
+ box-sizing: content-box;
557
+ }
558
+
559
+ .react-datepicker__view-calendar-icon input {
560
+ padding: 6px 10px 5px 25px;
561
+ }
562
+
563
+ .react-datepicker__year-read-view,
564
+ .react-datepicker__month-read-view,
565
+ .react-datepicker__month-year-read-view {
566
+ border: 1px solid transparent;
567
+ border-radius: 0.3rem;
568
+ position: relative;
569
+ }
570
+ .react-datepicker__year-read-view:hover,
571
+ .react-datepicker__month-read-view:hover,
572
+ .react-datepicker__month-year-read-view:hover {
573
+ cursor: pointer;
574
+ }
575
+ .react-datepicker__year-read-view:hover .react-datepicker__year-read-view--down-arrow,
576
+ .react-datepicker__year-read-view:hover .react-datepicker__month-read-view--down-arrow,
577
+ .react-datepicker__month-read-view:hover .react-datepicker__year-read-view--down-arrow,
578
+ .react-datepicker__month-read-view:hover .react-datepicker__month-read-view--down-arrow,
579
+ .react-datepicker__month-year-read-view:hover .react-datepicker__year-read-view--down-arrow,
580
+ .react-datepicker__month-year-read-view:hover .react-datepicker__month-read-view--down-arrow {
581
+ border-top-color: rgb(178.5, 178.5, 178.5);
582
+ }
583
+ .react-datepicker__year-read-view--down-arrow,
584
+ .react-datepicker__month-read-view--down-arrow,
585
+ .react-datepicker__month-year-read-view--down-arrow {
586
+ transform: rotate(135deg);
587
+ right: -16px;
588
+ top: 0;
589
+ }
590
+
591
+ .react-datepicker__year-dropdown,
592
+ .react-datepicker__month-dropdown,
593
+ .react-datepicker__month-year-dropdown {
594
+ background-color: #f0f0f0;
595
+ position: absolute;
596
+ width: 50%;
597
+ left: 25%;
598
+ top: 30px;
599
+ z-index: 1;
600
+ text-align: center;
601
+ border-radius: 0.3rem;
602
+ border: 1px solid #aeaeae;
603
+ }
604
+ .react-datepicker__year-dropdown:hover,
605
+ .react-datepicker__month-dropdown:hover,
606
+ .react-datepicker__month-year-dropdown:hover {
607
+ cursor: pointer;
608
+ }
609
+ .react-datepicker__year-dropdown--scrollable,
610
+ .react-datepicker__month-dropdown--scrollable,
611
+ .react-datepicker__month-year-dropdown--scrollable {
612
+ height: 150px;
613
+ overflow-y: scroll;
614
+ }
615
+
616
+ .react-datepicker__year-option,
617
+ .react-datepicker__month-option,
618
+ .react-datepicker__month-year-option {
619
+ line-height: 20px;
620
+ width: 100%;
621
+ display: block;
622
+ margin-left: auto;
623
+ margin-right: auto;
624
+ }
625
+ .react-datepicker__year-option:first-of-type,
626
+ .react-datepicker__month-option:first-of-type,
627
+ .react-datepicker__month-year-option:first-of-type {
628
+ border-top-left-radius: 0.3rem;
629
+ border-top-right-radius: 0.3rem;
630
+ }
631
+ .react-datepicker__year-option:last-of-type,
632
+ .react-datepicker__month-option:last-of-type,
633
+ .react-datepicker__month-year-option:last-of-type {
634
+ -webkit-user-select: none;
635
+ -moz-user-select: none;
636
+ -ms-user-select: none;
637
+ user-select: none;
638
+ border-bottom-left-radius: 0.3rem;
639
+ border-bottom-right-radius: 0.3rem;
640
+ }
641
+ .react-datepicker__year-option:hover,
642
+ .react-datepicker__month-option:hover,
643
+ .react-datepicker__month-year-option:hover {
644
+ background-color: #ccc;
645
+ }
646
+ .react-datepicker__year-option:hover .react-datepicker__navigation--years-upcoming,
647
+ .react-datepicker__month-option:hover .react-datepicker__navigation--years-upcoming,
648
+ .react-datepicker__month-year-option:hover .react-datepicker__navigation--years-upcoming {
649
+ border-bottom-color: rgb(178.5, 178.5, 178.5);
650
+ }
651
+ .react-datepicker__year-option:hover .react-datepicker__navigation--years-previous,
652
+ .react-datepicker__month-option:hover .react-datepicker__navigation--years-previous,
653
+ .react-datepicker__month-year-option:hover .react-datepicker__navigation--years-previous {
654
+ border-top-color: rgb(178.5, 178.5, 178.5);
655
+ }
656
+ .react-datepicker__year-option--selected,
657
+ .react-datepicker__month-option--selected,
658
+ .react-datepicker__month-year-option--selected {
659
+ position: absolute;
660
+ left: 15px;
661
+ }
662
+
663
+ .react-datepicker__close-icon {
664
+ cursor: pointer;
665
+ background-color: transparent;
666
+ border: 0;
667
+ outline: 0;
668
+ padding: 0 6px 0 0;
669
+ position: absolute;
670
+ top: 0;
671
+ right: 0;
672
+ height: 100%;
673
+ display: table-cell;
674
+ vertical-align: middle;
675
+ }
676
+ .react-datepicker__close-icon::after {
677
+ cursor: pointer;
678
+ background-color: #216ba5;
679
+ color: #fff;
680
+ border-radius: 50%;
681
+ height: 16px;
682
+ width: 16px;
683
+ padding: 2px;
684
+ font-size: 12px;
685
+ line-height: 1;
686
+ text-align: center;
687
+ display: table-cell;
688
+ vertical-align: middle;
689
+ content: "×";
690
+ }
691
+ .react-datepicker__close-icon--disabled {
692
+ cursor: default;
693
+ }
694
+ .react-datepicker__close-icon--disabled::after {
695
+ cursor: default;
696
+ background-color: #ccc;
697
+ }
698
+
699
+ .react-datepicker__today-button {
700
+ background: #f0f0f0;
701
+ border-top: 1px solid #aeaeae;
702
+ cursor: pointer;
703
+ text-align: center;
704
+ font-weight: bold;
705
+ padding: 5px 0;
706
+ clear: left;
707
+ }
708
+
709
+ .react-datepicker__portal {
710
+ position: fixed;
711
+ width: 100vw;
712
+ height: 100vh;
713
+ background-color: rgba(0, 0, 0, 0.8);
714
+ left: 0;
715
+ top: 0;
716
+ justify-content: center;
717
+ align-items: center;
718
+ display: flex;
719
+ z-index: 2147483647;
720
+ }
721
+ .react-datepicker__portal .react-datepicker__day-name,
722
+ .react-datepicker__portal .react-datepicker__day,
723
+ .react-datepicker__portal .react-datepicker__time-name {
724
+ width: 3rem;
725
+ line-height: 3rem;
726
+ }
727
+ @media (max-width: 400px), (max-height: 550px) {
728
+ .react-datepicker__portal .react-datepicker__day-name,
729
+ .react-datepicker__portal .react-datepicker__day,
730
+ .react-datepicker__portal .react-datepicker__time-name {
731
+ width: 2rem;
732
+ line-height: 2rem;
733
+ }
734
+ }
735
+ .react-datepicker__portal .react-datepicker__current-month,
736
+ .react-datepicker__portal .react-datepicker-time__header {
737
+ font-size: 1.44rem;
738
+ }
739
+
740
+ .react-datepicker__children-container {
741
+ width: 13.8rem;
742
+ margin: 0.4rem;
743
+ padding-right: 0.2rem;
744
+ padding-left: 0.2rem;
745
+ height: auto;
746
+ }
747
+
748
+ .react-datepicker__aria-live {
749
+ position: absolute;
750
+ clip-path: circle(0);
751
+ border: 0;
752
+ height: 1px;
753
+ margin: -1px;
754
+ overflow: hidden;
755
+ padding: 0;
756
+ width: 1px;
757
+ white-space: nowrap;
758
+ }
759
+
760
+ .react-datepicker__calendar-icon {
761
+ width: 1em;
762
+ height: 1em;
763
+ vertical-align: -0.125em;
764
+ }
765
+
766
+
767
+ .react-datepicker__navigation--years-upcoming::before {
768
+ content: "";
769
+ position: absolute;
770
+ right: 8px;
771
+ top: 70%;
772
+ transform: translateY(-50%) rotate(-135deg);
773
+ border: solid #000; /* ikon rengi */
774
+ border-width: 0 2px 2px 0;
775
+ display: inline-block;
776
+ width: 15px;
777
+ height: 15px;
778
+ }
779
+
780
+ .react-datepicker__navigation--years-previous::before {
781
+ content: "";
782
+ position: absolute;
783
+ right: 8px;
784
+ top: 30%;
785
+ transform: translateY(-50%) rotate(45deg);
786
+ border: solid #000; /* ikon rengi */
787
+ border-width: 0 2px 2px 0;
788
+ display: inline-block;
789
+ width: 15px;
790
+ height: 15px;
791
+ }
@@ -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,48 @@ 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, locale: customTrLocale, dateFormat: showTimeSelectOnly
54
55
  ? timeFormat
55
56
  : showTimeSelect
56
57
  ? "dd.MM.yyyy HH:mm"
57
- : "dd.MM.yyyy", timeIntervals: timeFormat == TimeFormat.H
58
+ : "dd.MM.yyyy", timeIntervals: timeFormat === TimeFormat.H
58
59
  ? 60
59
- : timeFormat == TimeFormat.M
60
+ : timeFormat === TimeFormat.M
60
61
  ? 1
61
62
  : timeIntervals
62
63
  ? 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.73",
4
4
  "main": "dist/index.js",
5
5
  "types": "dist/index.d.ts",
6
6
  "scripts": {