react-table-edit 1.5.9 → 1.5.11

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.
@@ -358,808 +358,112 @@
358
358
  right: 0;
359
359
  }
360
360
 
361
- .r-table-edit .react-datepicker__year-read-view--down-arrow,
362
- .r-table-edit .react-datepicker__month-read-view--down-arrow,
363
- .r-table-edit .react-datepicker__month-year-read-view--down-arrow,
364
- .r-table-edit .react-datepicker__navigation-icon::before {
365
- border-color: #e0e0e0;
366
- border-style: solid;
367
- border-width: 3px 3px 0 0;
368
- content: "";
369
- display: block;
370
- height: 9px;
371
- position: absolute;
372
- top: 6px;
373
- width: 9px;
374
- }
375
- .r-table-edit .react-datepicker-wrapper {
376
- display: inline-block;
377
- width: 100% !important;
378
- padding: 0;
379
- border: 0;
380
- }
381
- .r-table-edit .react-datepicker-wrapper .react-datepicker__input-container input {
382
- height: 29px !important;
383
- }
384
- .r-table-edit .react-datepicker {
385
- font-family: "Helvetica Neue", helvetica, arial, sans-serif;
386
- font-size: 0.8rem;
387
- background-color: #FFFFFF;
388
- color: #000000;
389
- border: 1px solid #e0e0e0;
390
- border-radius: 0.3rem;
391
- display: inline-block;
392
- position: relative;
393
- line-height: initial;
394
- }
395
- .r-table-edit .react-datepicker--time-only .react-datepicker__time-container {
396
- border-left: 0;
397
- }
398
- .r-table-edit .react-datepicker--time-only .react-datepicker__time,
399
- .r-table-edit .react-datepicker--time-only .react-datepicker__time-box {
400
- border-bottom-left-radius: 0.3rem;
401
- border-bottom-right-radius: 0.3rem;
402
- }
403
- .r-table-edit .react-datepicker-popper {
404
- position: relative;
405
- line-height: 0;
406
- }
407
- .r-table-edit .react-datepicker-popper .react-datepicker__triangle {
408
- stroke: #e0e0e0;
409
- }
410
- .r-table-edit .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle {
411
- fill: #f0f0f0;
412
- color: #f0f0f0;
413
- }
414
- .r-table-edit .react-datepicker-popper[data-placement^=top] .react-datepicker__triangle {
415
- fill: #FFFFFF;
416
- color: #FFFFFF;
417
- }
418
- .r-table-edit .react-datepicker__header {
419
- text-align: center;
420
- background-color: #FFFFFF;
421
- border-bottom: 1px solid #e0e0e0;
422
- border-top-left-radius: 0.3rem;
423
- padding: 8px 0;
361
+ .r-datepicker {
424
362
  position: relative;
425
363
  }
426
- .r-table-edit .react-datepicker__header--time {
427
- padding-bottom: 8px;
428
- padding-left: 5px;
429
- padding-right: 5px;
430
- }
431
- .r-table-edit .react-datepicker__header--time:not(.react-datepicker__header--time--only) {
432
- border-top-left-radius: 0;
433
- }
434
- .r-table-edit .react-datepicker__header:not(.react-datepicker__header--has-time-select) {
435
- border-top-right-radius: 0.3rem;
436
- }
437
- .r-table-edit .react-datepicker__year-dropdown-container--select,
438
- .r-table-edit .react-datepicker__month-dropdown-container--select,
439
- .r-table-edit .react-datepicker__month-year-dropdown-container--select,
440
- .r-table-edit .react-datepicker__year-dropdown-container--scroll,
441
- .r-table-edit .react-datepicker__month-dropdown-container--scroll,
442
- .r-table-edit .react-datepicker__month-year-dropdown-container--scroll {
443
- display: inline-block;
444
- margin: 0 15px;
445
- }
446
- .r-table-edit .react-datepicker__current-month,
447
- .r-table-edit .react-datepicker-time__header,
448
- .r-table-edit .react-datepicker-year-header {
449
- margin-top: 0;
450
- color: #000000;
451
- font-weight: bold;
452
- font-size: 0.944rem;
453
- }
454
- .r-table-edit h2.react-datepicker__current-month {
455
- padding: 0;
456
- margin: 0;
457
- }
458
- .r-table-edit .react-datepicker-time__header {
459
- text-overflow: ellipsis;
460
- white-space: nowrap;
461
- overflow: hidden;
462
- }
463
- .r-table-edit .react-datepicker__navigation {
464
- align-items: center;
465
- background: none;
466
- display: flex;
467
- justify-content: center;
468
- text-align: center;
469
- cursor: pointer;
470
- position: absolute;
471
- top: 2px;
472
- padding: 0;
473
- border: none;
474
- z-index: 1;
475
- height: 32px;
476
- width: 32px;
477
- text-indent: -999em;
478
- overflow: hidden;
479
- }
480
- .r-table-edit .react-datepicker__navigation--previous {
481
- left: 2px;
482
- }
483
- .r-table-edit .react-datepicker__navigation--next {
484
- right: 2px;
485
- }
486
- .r-table-edit .react-datepicker__navigation--next--with-time:not(.react-datepicker__navigation--next--with-today-button) {
487
- right: 85px;
488
- }
489
- .r-table-edit .react-datepicker__navigation--years {
490
- position: relative;
491
- top: 0;
492
- display: block;
493
- margin-left: auto;
494
- margin-right: auto;
495
- }
496
- .r-table-edit .react-datepicker__navigation--years-previous {
497
- top: 4px;
498
- }
499
- .r-table-edit .react-datepicker__navigation--years-upcoming {
500
- top: -4px;
501
- }
502
- .r-table-edit .react-datepicker__navigation:hover *::before {
503
- border-color: #eb4619;
504
- }
505
- .r-table-edit .react-datepicker__navigation-icon {
506
- position: relative;
507
- top: -1px;
508
- font-size: 20px;
509
- width: 0;
510
- }
511
- .r-table-edit .react-datepicker__navigation-icon--next {
512
- left: -2px;
513
- }
514
- .r-table-edit .react-datepicker__navigation-icon--next::before {
515
- transform: rotate(45deg);
516
- left: -7px;
517
- }
518
- .r-table-edit .react-datepicker__navigation-icon--previous {
519
- right: -2px;
520
- }
521
- .r-table-edit .react-datepicker__navigation-icon--previous::before {
522
- transform: rotate(225deg);
523
- right: -7px;
524
- }
525
- .r-table-edit .react-datepicker__month-container {
526
- float: left;
527
- }
528
- .r-table-edit .react-datepicker__year {
529
- margin: 0.4rem;
530
- text-align: center;
531
- }
532
- .r-table-edit .react-datepicker__year-wrapper {
533
- display: flex;
534
- flex-wrap: wrap;
535
- max-width: 180px;
536
- }
537
- .r-table-edit .react-datepicker__year .react-datepicker__year-text {
538
- display: inline-block;
539
- width: 4rem;
540
- margin: 2px;
541
- }
542
- .r-table-edit .react-datepicker__month {
543
- margin: 0.4rem;
544
- text-align: center;
545
- }
546
- .r-table-edit .react-datepicker__month .react-datepicker__month-text,
547
- .r-table-edit .react-datepicker__month .react-datepicker__quarter-text {
548
- display: inline-block;
549
- width: 4rem;
550
- margin: 2px;
551
- }
552
- .r-table-edit .react-datepicker__input-time-container {
553
- clear: both;
554
- width: 100%;
555
- float: left;
556
- margin: 5px 0 10px 15px;
557
- text-align: left;
558
- }
559
- .r-table-edit .react-datepicker__input-time-container .react-datepicker-time__caption {
560
- display: inline-block;
561
- }
562
- .r-table-edit .react-datepicker__input-time-container .react-datepicker-time__input-container {
563
- display: inline-block;
564
- }
565
- .r-table-edit .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input {
566
- display: inline-block;
567
- margin-left: 10px;
568
- }
569
- .r-table-edit .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input {
570
- width: auto;
571
- }
572
- .r-table-edit .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time]::-webkit-inner-spin-button,
573
- .r-table-edit .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time]::-webkit-outer-spin-button {
574
- -webkit-appearance: none;
575
- margin: 0;
576
- }
577
- .r-table-edit .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__delimiter {
578
- margin-left: 5px;
579
- display: inline-block;
580
- }
581
- .r-table-edit .react-datepicker__time-container {
582
- float: right;
583
- border-left: 1px solid #e0e0e0;
584
- width: 85px;
364
+ .r-datepicker .form-control {
365
+ height: 28px;
585
366
  }
586
- .r-table-edit .react-datepicker__time-container--with-today-button {
587
- display: inline;
367
+
368
+ .r-datepicker-popup {
369
+ background: white;
588
370
  border: 1px solid #e0e0e0;
589
- border-radius: 0.3rem;
590
- position: absolute;
591
- right: -87px;
592
- top: 0;
371
+ padding: 15px 5px !important;
593
372
  }
594
- .r-table-edit .react-datepicker__time-container .react-datepicker__time {
595
- position: relative;
596
- background: white;
597
- border-bottom-right-radius: 0.3rem;
373
+ .r-datepicker-popup .rdp-nav {
374
+ display: none;
598
375
  }
599
- .r-table-edit .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box {
600
- width: 85px;
601
- overflow-x: hidden;
602
- margin: 0 auto;
603
- text-align: center;
604
- border-bottom-right-radius: 0.3rem;
376
+ .r-datepicker-popup .rdp-month_caption {
377
+ display: none;
605
378
  }
606
- .r-table-edit .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list {
607
- list-style: none;
608
- margin: 0;
609
- height: calc(195px + 0.85rem);
610
- overflow-y: scroll;
611
- padding-right: 0;
612
- padding-left: 0;
379
+ .r-datepicker-popup .select-month-year {
380
+ display: flex;
381
+ align-items: center;
382
+ justify-content: space-between;
613
383
  width: 100%;
614
- box-sizing: content-box;
384
+ padding: 5px 5px 8px 5px;
615
385
  }
616
- .r-table-edit .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item {
617
- height: 30px;
618
- padding: 5px 10px;
619
- white-space: nowrap;
386
+ .r-datepicker-popup .select-month-year .select-month {
387
+ text-align: right;
388
+ width: 90px !important;
620
389
  }
621
- .r-table-edit .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item:hover {
622
- cursor: pointer;
623
- background-color: #f0f0f0;
624
- }
625
- .r-table-edit .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected {
626
- background-color: #216ba5;
627
- color: white;
628
- font-weight: bold;
629
- }
630
- .r-table-edit .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected:hover {
631
- background-color: #216ba5;
632
- }
633
- .r-table-edit .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled {
634
- color: #ccc;
635
- }
636
- .r-table-edit .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--disabled:hover {
637
- cursor: default;
638
- background-color: transparent;
639
- }
640
- .r-table-edit .react-datepicker__week-number {
641
- color: #ccc;
642
- display: inline-block;
643
- width: 1.7rem;
644
- line-height: 1.7rem;
645
- text-align: center;
646
- margin: 0.166rem;
647
- }
648
- .r-table-edit .react-datepicker__week-number.react-datepicker__week-number--clickable {
649
- cursor: pointer;
650
- }
651
- .r-table-edit .react-datepicker__week-number.react-datepicker__week-number--clickable:not(.react-datepicker__week-number--selected,
652
- .react-datepicker__week-number--keyboard-selected):hover {
653
- border-radius: 0.3rem;
654
- background-color: #f0f0f0;
390
+ .r-datepicker-popup .select-month-year .select-year {
391
+ text-align: left;
392
+ width: 65px !important;
655
393
  }
656
- .r-table-edit .react-datepicker__week-number--selected {
657
- border-radius: 0.3rem;
658
- background-color: #216ba5;
659
- color: #FFFFFF;
394
+ .r-datepicker-popup .select-month-year svg:hover {
395
+ color: #eb4619;
660
396
  }
661
- .r-table-edit .react-datepicker__week-number--selected:hover {
662
- background-color: rgb(28.75, 93.2196969697, 143.75);
397
+ .r-datepicker-popup .select-month-year .select-table-control .select-table-container {
398
+ color: rgba(0, 0, 0, 0.8705882353) !important;
399
+ font-size: 14px !important;
400
+ font-weight: 600;
663
401
  }
664
- .r-table-edit .react-datepicker__week-number--keyboard-selected {
665
- border-radius: 0.3rem;
666
- background-color: rgb(41.5, 134.5606060606, 207.5);
667
- color: #FFFFFF;
402
+ .r-datepicker-popup .select-month-year .select-table-control .select-table-container .select-input {
403
+ cursor: pointer !important;
668
404
  }
669
- .r-table-edit .react-datepicker__week-number--keyboard-selected:hover {
670
- background-color: rgb(28.75, 93.2196969697, 143.75);
405
+ .r-datepicker-popup .select-month-year .react-select-table .select-table-control {
406
+ border: none;
671
407
  }
672
- .r-table-edit .react-datepicker__day-names {
673
- white-space: nowrap;
674
- margin-bottom: -8px;
408
+ .r-datepicker-popup .select-month-year .react-select-table .r-select-is-focus {
409
+ border: none !important;
675
410
  }
676
- .r-table-edit .react-datepicker__week {
677
- white-space: nowrap;
411
+ .r-datepicker-popup .select-month-year .select-table-indicator {
412
+ display: none;
678
413
  }
679
- .r-table-edit .react-datepicker__day-name,
680
- .r-table-edit .react-datepicker__day,
681
- .r-table-edit .react-datepicker__time-name {
682
- color: #000000;
683
- display: inline-block;
684
- width: 1.7rem;
685
- line-height: 1.7rem;
686
- text-align: center;
687
- margin: 0.166rem;
414
+ .r-datepicker-popup .rdp-weekday {
415
+ color: #323232 !important;
416
+ opacity: 1 !important;
417
+ font-weight: 500;
418
+ font-size: 14px !important;
688
419
  }
689
- .r-table-edit .react-datepicker__day,
690
- .r-table-edit .react-datepicker__month-text,
691
- .r-table-edit .react-datepicker__quarter-text,
692
- .r-table-edit .react-datepicker__year-text {
693
- cursor: pointer;
420
+ .r-datepicker-popup .rdp-day {
421
+ color: #323232 !important;
422
+ font-size: 13.5px !important;
423
+ height: 32px !important;
424
+ width: 32px !important;
694
425
  }
695
- .r-table-edit .react-datepicker__day:not([aria-disabled=true]):hover,
696
- .r-table-edit .react-datepicker__month-text:not([aria-disabled=true]):hover,
697
- .r-table-edit .react-datepicker__quarter-text:not([aria-disabled=true]):hover,
698
- .r-table-edit .react-datepicker__year-text:not([aria-disabled=true]):hover {
699
- border-radius: 0.3rem;
700
- background-color: #FFFFFF;
426
+ .r-datepicker-popup .rdp-day .rdp-day_button {
427
+ height: 32px !important;
428
+ width: 32px !important;
701
429
  }
702
- .r-table-edit .react-datepicker__day--today,
703
- .r-table-edit .react-datepicker__month-text--today,
704
- .r-table-edit .react-datepicker__quarter-text--today,
705
- .r-table-edit .react-datepicker__year-text--today {
430
+ .r-datepicker-popup .rdp-day.rdp-today {
706
431
  font-weight: bold;
432
+ color: #eb4619;
707
433
  }
708
- .r-table-edit .react-datepicker__day--highlighted,
709
- .r-table-edit .react-datepicker__month-text--highlighted,
710
- .r-table-edit .react-datepicker__quarter-text--highlighted,
711
- .r-table-edit .react-datepicker__year-text--highlighted {
712
- border-radius: 0.3rem;
713
- background-color: #3dcc4a;
714
- color: #FFFFFF;
715
- }
716
- .r-table-edit .react-datepicker__day--highlighted:not([aria-disabled=true]):hover,
717
- .r-table-edit .react-datepicker__month-text--highlighted:not([aria-disabled=true]):hover,
718
- .r-table-edit .react-datepicker__quarter-text--highlighted:not([aria-disabled=true]):hover,
719
- .r-table-edit .react-datepicker__year-text--highlighted:not([aria-disabled=true]):hover {
720
- background-color: rgb(49.8551020408, 189.6448979592, 62.5632653061);
721
- }
722
- .r-table-edit .react-datepicker__day--highlighted-custom-1,
723
- .r-table-edit .react-datepicker__month-text--highlighted-custom-1,
724
- .r-table-edit .react-datepicker__quarter-text--highlighted-custom-1,
725
- .r-table-edit .react-datepicker__year-text--highlighted-custom-1 {
726
- color: magenta;
727
- }
728
- .r-table-edit .react-datepicker__day--highlighted-custom-2,
729
- .r-table-edit .react-datepicker__month-text--highlighted-custom-2,
730
- .r-table-edit .react-datepicker__quarter-text--highlighted-custom-2,
731
- .r-table-edit .react-datepicker__year-text--highlighted-custom-2 {
732
- color: green;
733
- }
734
- .r-table-edit .react-datepicker__day--holidays,
735
- .r-table-edit .react-datepicker__month-text--holidays,
736
- .r-table-edit .react-datepicker__quarter-text--holidays,
737
- .r-table-edit .react-datepicker__year-text--holidays {
738
- position: relative;
739
- border-radius: 0.3rem;
740
- background-color: #ff6803;
741
- color: #FFFFFF;
742
- }
743
- .r-table-edit .react-datepicker__day--holidays .overlay,
744
- .r-table-edit .react-datepicker__month-text--holidays .overlay,
745
- .r-table-edit .react-datepicker__quarter-text--holidays .overlay,
746
- .r-table-edit .react-datepicker__year-text--holidays .overlay {
747
- position: absolute;
748
- bottom: 100%;
749
- left: 50%;
750
- transform: translateX(-50%);
751
- background-color: #333;
752
- color: #FFFFFF;
753
- padding: 4px;
754
- border-radius: 4px;
755
- white-space: nowrap;
756
- visibility: hidden;
757
- opacity: 0;
758
- transition: visibility 0s, opacity 0.3s ease-in-out;
759
- }
760
- .r-table-edit .react-datepicker__day--holidays:not([aria-disabled=true]):hover,
761
- .r-table-edit .react-datepicker__month-text--holidays:not([aria-disabled=true]):hover,
762
- .r-table-edit .react-datepicker__quarter-text--holidays:not([aria-disabled=true]):hover,
763
- .r-table-edit .react-datepicker__year-text--holidays:not([aria-disabled=true]):hover {
764
- background-color: rgb(207, 82.9642857143, 0);
765
- }
766
- .r-table-edit .react-datepicker__day--holidays:hover .overlay,
767
- .r-table-edit .react-datepicker__month-text--holidays:hover .overlay,
768
- .r-table-edit .react-datepicker__quarter-text--holidays:hover .overlay,
769
- .r-table-edit .react-datepicker__year-text--holidays:hover .overlay {
770
- visibility: visible;
771
- opacity: 1;
772
- }
773
- .r-table-edit .react-datepicker__day--selected,
774
- .r-table-edit .react-datepicker__day--in-selecting-range,
775
- .r-table-edit .react-datepicker__day--in-range,
776
- .r-table-edit .react-datepicker__month-text--selected,
777
- .r-table-edit .react-datepicker__month-text--in-selecting-range,
778
- .r-table-edit .react-datepicker__month-text--in-range,
779
- .r-table-edit .react-datepicker__quarter-text--selected,
780
- .r-table-edit .react-datepicker__quarter-text--in-selecting-range,
781
- .r-table-edit .react-datepicker__quarter-text--in-range,
782
- .r-table-edit .react-datepicker__year-text--selected,
783
- .r-table-edit .react-datepicker__year-text--in-selecting-range,
784
- .r-table-edit .react-datepicker__year-text--in-range {
785
- border-radius: 0.3rem;
786
- background-color: #216ba5;
787
- color: #FFFFFF;
434
+ .r-datepicker-popup .rdp-day.rdp-today .rdp-day_button {
435
+ border: 1px solid #eb4619;
436
+ border-radius: 8px;
788
437
  }
789
- .r-table-edit .react-datepicker__day--selected:not([aria-disabled=true]):hover,
790
- .r-table-edit .react-datepicker__day--in-selecting-range:not([aria-disabled=true]):hover,
791
- .r-table-edit .react-datepicker__day--in-range:not([aria-disabled=true]):hover,
792
- .r-table-edit .react-datepicker__month-text--selected:not([aria-disabled=true]):hover,
793
- .r-table-edit .react-datepicker__month-text--in-selecting-range:not([aria-disabled=true]):hover,
794
- .r-table-edit .react-datepicker__month-text--in-range:not([aria-disabled=true]):hover,
795
- .r-table-edit .react-datepicker__quarter-text--selected:not([aria-disabled=true]):hover,
796
- .r-table-edit .react-datepicker__quarter-text--in-selecting-range:not([aria-disabled=true]):hover,
797
- .r-table-edit .react-datepicker__quarter-text--in-range:not([aria-disabled=true]):hover,
798
- .r-table-edit .react-datepicker__year-text--selected:not([aria-disabled=true]):hover,
799
- .r-table-edit .react-datepicker__year-text--in-selecting-range:not([aria-disabled=true]):hover,
800
- .r-table-edit .react-datepicker__year-text--in-range:not([aria-disabled=true]):hover {
801
- background-color: rgb(28.75, 93.2196969697, 143.75);
802
- }
803
- .r-table-edit .react-datepicker__day--keyboard-selected,
804
- .r-table-edit .react-datepicker__month-text--keyboard-selected,
805
- .r-table-edit .react-datepicker__quarter-text--keyboard-selected,
806
- .r-table-edit .react-datepicker__year-text--keyboard-selected {
807
- border-radius: 0.3rem;
808
- background-color: rgb(186.25, 217.0833333333, 241.25);
809
- color: rgb(0, 0, 0);
810
- }
811
- .r-table-edit .react-datepicker__day--keyboard-selected:not([aria-disabled=true]):hover,
812
- .r-table-edit .react-datepicker__month-text--keyboard-selected:not([aria-disabled=true]):hover,
813
- .r-table-edit .react-datepicker__quarter-text--keyboard-selected:not([aria-disabled=true]):hover,
814
- .r-table-edit .react-datepicker__year-text--keyboard-selected:not([aria-disabled=true]):hover {
815
- background-color: rgb(28.75, 93.2196969697, 143.75);
816
- }
817
- .r-table-edit .react-datepicker__day--in-selecting-range:not(.react-datepicker__day--in-range,
818
- .react-datepicker__month-text--in-range,
819
- .react-datepicker__quarter-text--in-range,
820
- .react-datepicker__year-text--in-range),
821
- .r-table-edit .react-datepicker__month-text--in-selecting-range:not(.react-datepicker__day--in-range,
822
- .react-datepicker__month-text--in-range,
823
- .react-datepicker__quarter-text--in-range,
824
- .react-datepicker__year-text--in-range),
825
- .r-table-edit .react-datepicker__quarter-text--in-selecting-range:not(.react-datepicker__day--in-range,
826
- .react-datepicker__month-text--in-range,
827
- .react-datepicker__quarter-text--in-range,
828
- .react-datepicker__year-text--in-range),
829
- .r-table-edit .react-datepicker__year-text--in-selecting-range:not(.react-datepicker__day--in-range,
830
- .react-datepicker__month-text--in-range,
831
- .react-datepicker__quarter-text--in-range,
832
- .react-datepicker__year-text--in-range) {
833
- background-color: rgba(33, 107, 165, 0.5);
834
- }
835
- .r-table-edit .react-datepicker__month--selecting-range .react-datepicker__day--in-range:not(.react-datepicker__day--in-selecting-range,
836
- .react-datepicker__month-text--in-selecting-range,
837
- .react-datepicker__quarter-text--in-selecting-range,
838
- .react-datepicker__year-text--in-selecting-range),
839
- .r-table-edit .react-datepicker__year--selecting-range .react-datepicker__day--in-range:not(.react-datepicker__day--in-selecting-range,
840
- .react-datepicker__month-text--in-selecting-range,
841
- .react-datepicker__quarter-text--in-selecting-range,
842
- .react-datepicker__year-text--in-selecting-range),
843
- .r-table-edit .react-datepicker__month--selecting-range .react-datepicker__month-text--in-range:not(.react-datepicker__day--in-selecting-range,
844
- .react-datepicker__month-text--in-selecting-range,
845
- .react-datepicker__quarter-text--in-selecting-range,
846
- .react-datepicker__year-text--in-selecting-range),
847
- .r-table-edit .react-datepicker__year--selecting-range .react-datepicker__month-text--in-range:not(.react-datepicker__day--in-selecting-range,
848
- .react-datepicker__month-text--in-selecting-range,
849
- .react-datepicker__quarter-text--in-selecting-range,
850
- .react-datepicker__year-text--in-selecting-range),
851
- .r-table-edit .react-datepicker__month--selecting-range .react-datepicker__quarter-text--in-range:not(.react-datepicker__day--in-selecting-range,
852
- .react-datepicker__month-text--in-selecting-range,
853
- .react-datepicker__quarter-text--in-selecting-range,
854
- .react-datepicker__year-text--in-selecting-range),
855
- .r-table-edit .react-datepicker__year--selecting-range .react-datepicker__quarter-text--in-range:not(.react-datepicker__day--in-selecting-range,
856
- .react-datepicker__month-text--in-selecting-range,
857
- .react-datepicker__quarter-text--in-selecting-range,
858
- .react-datepicker__year-text--in-selecting-range),
859
- .r-table-edit .react-datepicker__month--selecting-range .react-datepicker__year-text--in-range:not(.react-datepicker__day--in-selecting-range,
860
- .react-datepicker__month-text--in-selecting-range,
861
- .react-datepicker__quarter-text--in-selecting-range,
862
- .react-datepicker__year-text--in-selecting-range),
863
- .r-table-edit .react-datepicker__year--selecting-range .react-datepicker__year-text--in-range:not(.react-datepicker__day--in-selecting-range,
864
- .react-datepicker__month-text--in-selecting-range,
865
- .react-datepicker__quarter-text--in-selecting-range,
866
- .react-datepicker__year-text--in-selecting-range) {
867
- background-color: #f0f0f0;
868
- color: #000000;
869
- }
870
- .r-table-edit .react-datepicker__day--disabled,
871
- .r-table-edit .react-datepicker__month-text--disabled,
872
- .r-table-edit .react-datepicker__quarter-text--disabled,
873
- .r-table-edit .react-datepicker__year-text--disabled {
874
- cursor: default;
875
- color: #ccc;
876
- }
877
- .r-table-edit .react-datepicker__day--disabled .overlay,
878
- .r-table-edit .react-datepicker__month-text--disabled .overlay,
879
- .r-table-edit .react-datepicker__quarter-text--disabled .overlay,
880
- .r-table-edit .react-datepicker__year-text--disabled .overlay {
881
- position: absolute;
882
- bottom: 70%;
883
- left: 50%;
884
- transform: translateX(-50%);
885
- background-color: #333;
438
+ .r-datepicker-popup .rdp-day.rdp-selected .rdp-day_button {
439
+ border: 1px solid #eb4619;
440
+ background-color: #eb4619;
886
441
  color: #FFFFFF;
887
- padding: 4px;
888
- border-radius: 4px;
889
- white-space: nowrap;
890
- visibility: hidden;
891
- opacity: 0;
892
- transition: visibility 0s, opacity 0.3s ease-in-out;
442
+ border-radius: 8px;
893
443
  }
894
- .r-table-edit .react-datepicker__input-container {
895
- position: relative;
896
- display: inline-block;
897
- width: 100%;
898
- }
899
- .r-table-edit .react-datepicker__input-container .react-datepicker__calendar-icon {
900
- position: absolute;
901
- padding: 0.5rem;
902
- box-sizing: content-box;
903
- }
904
- .r-table-edit .react-datepicker__view-calendar-icon input {
905
- padding: 6px 10px 5px 25px;
906
- }
907
- .r-table-edit .react-datepicker__year-read-view,
908
- .r-table-edit .react-datepicker__month-read-view,
909
- .r-table-edit .react-datepicker__month-year-read-view {
910
- border: 1px solid transparent;
911
- border-radius: 0.3rem;
912
- position: relative;
913
- }
914
- .r-table-edit .react-datepicker__year-read-view:hover,
915
- .r-table-edit .react-datepicker__month-read-view:hover,
916
- .r-table-edit .react-datepicker__month-year-read-view:hover {
917
- cursor: pointer;
444
+ .r-datepicker-popup .rdp-day.rdp-in-range .rdp-day_button {
445
+ background-color: #fce6df;
446
+ color: #eb4619;
447
+ border-radius: 2px;
448
+ height: 22px !important;
449
+ border-width: 0px !important;
918
450
  }
919
- .r-table-edit .react-datepicker__year-read-view:hover .react-datepicker__year-read-view--down-arrow,
920
- .r-table-edit .react-datepicker__year-read-view:hover .react-datepicker__month-read-view--down-arrow,
921
- .r-table-edit .react-datepicker__month-read-view:hover .react-datepicker__year-read-view--down-arrow,
922
- .r-table-edit .react-datepicker__month-read-view:hover .react-datepicker__month-read-view--down-arrow,
923
- .r-table-edit .react-datepicker__month-year-read-view:hover .react-datepicker__year-read-view--down-arrow,
924
- .r-table-edit .react-datepicker__month-year-read-view:hover .react-datepicker__month-read-view--down-arrow {
925
- border-top-color: rgb(178.5, 178.5, 178.5);
926
- }
927
- .r-table-edit .react-datepicker__year-read-view--down-arrow,
928
- .r-table-edit .react-datepicker__month-read-view--down-arrow,
929
- .r-table-edit .react-datepicker__month-year-read-view--down-arrow {
930
- transform: rotate(135deg);
931
- right: -16px;
932
- top: 0;
451
+ .r-datepicker-popup .rdp-day .rdp-day_button:hover {
452
+ background-color: #fce6df;
453
+ color: #eb4619;
454
+ border-radius: 8px;
933
455
  }
934
- .r-table-edit .react-datepicker__year-dropdown,
935
- .r-table-edit .react-datepicker__month-dropdown,
936
- .r-table-edit .react-datepicker__month-year-dropdown {
937
- background-color: #f0f0f0;
938
- position: absolute;
939
- width: 50%;
940
- left: 25%;
941
- top: 30px;
942
- z-index: 1;
456
+ .r-datepicker-popup .btn-today {
457
+ margin-top: 5px;
943
458
  text-align: center;
944
- border-radius: 0.3rem;
945
- border: 1px solid #e0e0e0;
946
- }
947
- .r-table-edit .react-datepicker__year-dropdown:hover,
948
- .r-table-edit .react-datepicker__month-dropdown:hover,
949
- .r-table-edit .react-datepicker__month-year-dropdown:hover {
459
+ font-size: 13px;
460
+ color: #eb4619;
950
461
  cursor: pointer;
951
- }
952
- .r-table-edit .react-datepicker__year-dropdown--scrollable,
953
- .r-table-edit .react-datepicker__month-dropdown--scrollable,
954
- .r-table-edit .react-datepicker__month-year-dropdown--scrollable {
955
- height: 150px;
956
- overflow-y: scroll;
957
- }
958
- .r-table-edit .react-datepicker__year-option,
959
- .r-table-edit .react-datepicker__month-option,
960
- .r-table-edit .react-datepicker__month-year-option {
961
- line-height: 20px;
962
- width: 100%;
963
- display: block;
964
- margin-left: auto;
965
- margin-right: auto;
966
- }
967
- .r-table-edit .react-datepicker__year-option:first-of-type,
968
- .r-table-edit .react-datepicker__month-option:first-of-type,
969
- .r-table-edit .react-datepicker__month-year-option:first-of-type {
970
- border-top-left-radius: 0.3rem;
971
- border-top-right-radius: 0.3rem;
972
- }
973
- .r-table-edit .react-datepicker__year-option:last-of-type,
974
- .r-table-edit .react-datepicker__month-option:last-of-type,
975
- .r-table-edit .react-datepicker__month-year-option:last-of-type {
976
- -webkit-user-select: none;
977
- -moz-user-select: none;
978
- -ms-user-select: none;
979
462
  user-select: none;
980
- border-bottom-left-radius: 0.3rem;
981
- border-bottom-right-radius: 0.3rem;
982
- }
983
- .r-table-edit .react-datepicker__year-option:hover,
984
- .r-table-edit .react-datepicker__month-option:hover,
985
- .r-table-edit .react-datepicker__month-year-option:hover {
986
- background-color: #ccc;
987
- }
988
- .r-table-edit .react-datepicker__year-option:hover .react-datepicker__navigation--years-upcoming,
989
- .r-table-edit .react-datepicker__month-option:hover .react-datepicker__navigation--years-upcoming,
990
- .r-table-edit .react-datepicker__month-year-option:hover .react-datepicker__navigation--years-upcoming {
991
- border-bottom-color: rgb(178.5, 178.5, 178.5);
992
- }
993
- .r-table-edit .react-datepicker__year-option:hover .react-datepicker__navigation--years-previous,
994
- .r-table-edit .react-datepicker__month-option:hover .react-datepicker__navigation--years-previous,
995
- .r-table-edit .react-datepicker__month-year-option:hover .react-datepicker__navigation--years-previous {
996
- border-top-color: rgb(178.5, 178.5, 178.5);
997
- }
998
- .r-table-edit .react-datepicker__year-option--selected,
999
- .r-table-edit .react-datepicker__month-option--selected,
1000
- .r-table-edit .react-datepicker__month-year-option--selected {
1001
- position: absolute;
1002
- left: 15px;
1003
- }
1004
- .r-table-edit .react-datepicker__close-icon {
1005
- cursor: pointer;
1006
- background-color: transparent;
1007
- border: 0;
1008
- outline: 0;
1009
- padding: 0 6px 0 0;
1010
- position: absolute;
1011
- top: 0;
1012
- right: 0;
1013
- height: 100%;
1014
- display: table-cell;
1015
- vertical-align: middle;
1016
- }
1017
- .r-table-edit .react-datepicker__close-icon::after {
1018
- cursor: pointer;
1019
- background-color: transparent;
1020
- color: #c4c4c4;
1021
- height: 16px;
1022
- width: 16px;
1023
- padding: 0px 2px;
1024
- font-size: 25px;
1025
463
  font-weight: 500;
1026
- line-height: 0.5;
1027
- text-align: center;
1028
- display: table-cell;
1029
- vertical-align: middle;
1030
- content: "×";
1031
- }
1032
- .r-table-edit .react-datepicker__close-icon:hover::after {
1033
- color: rgba(0, 0, 0, 0.8705882353) !important;
1034
- }
1035
- .r-table-edit .react-datepicker__close-icon--disabled {
1036
- cursor: default;
1037
- }
1038
- .r-table-edit .react-datepicker__close-icon--disabled::after {
1039
- cursor: default;
1040
- background-color: #ccc;
1041
- }
1042
- .r-table-edit .react-datepicker__today-button {
1043
- background: #f0f0f0;
1044
- border-top: 1px solid #e0e0e0;
1045
- cursor: pointer;
1046
- text-align: center;
1047
- font-weight: bold;
1048
- padding: 5px 0;
1049
- clear: left;
1050
464
  }
1051
- .r-table-edit .react-datepicker__portal {
1052
- position: fixed;
1053
- width: 100vw;
1054
- height: 100vh;
1055
- background-color: rgba(0, 0, 0, 0.8);
1056
- left: 0;
1057
- top: 0;
1058
- justify-content: center;
1059
- align-items: center;
1060
- display: flex;
1061
- z-index: 2147483647;
1062
- }
1063
- .r-table-edit .react-datepicker__portal .react-datepicker__day-name,
1064
- .r-table-edit .react-datepicker__portal .react-datepicker__day,
1065
- .r-table-edit .react-datepicker__portal .react-datepicker__time-name {
1066
- width: 3rem;
1067
- line-height: 3rem;
1068
- }
1069
- @media (max-width: 400px), (max-height: 550px) {
1070
- .r-table-edit .react-datepicker__portal .react-datepicker__day-name,
1071
- .r-table-edit .react-datepicker__portal .react-datepicker__day,
1072
- .r-table-edit .react-datepicker__portal .react-datepicker__time-name {
1073
- width: 2rem;
1074
- line-height: 2rem;
1075
- }
1076
- }
1077
- .r-table-edit .react-datepicker__portal .react-datepicker__current-month,
1078
- .r-table-edit .react-datepicker__portal .react-datepicker-time__header {
1079
- font-size: 1.44rem;
1080
- }
1081
- .r-table-edit .react-datepicker__children-container {
1082
- width: 13.8rem;
1083
- margin: 0.4rem;
1084
- padding-right: 0.2rem;
1085
- padding-left: 0.2rem;
1086
- height: auto;
1087
- }
1088
- .r-table-edit .react-datepicker__aria-live {
1089
- position: absolute;
1090
- clip-path: circle(0);
1091
- border: 0;
1092
- height: 1px;
1093
- margin: -1px;
1094
- overflow: hidden;
1095
- padding: 0;
1096
- width: 1px;
1097
- white-space: nowrap;
1098
- }
1099
- .r-table-edit .react-datepicker__calendar-icon {
1100
- width: 1em;
1101
- height: 1em;
1102
- vertical-align: -0.125em;
1103
- }
1104
- .r-table-edit .react-datepicker-popper {
1105
- z-index: 999 !important;
1106
- position: fixed !important;
1107
- }
1108
- .r-table-edit .react-datepicker-popper .react-datepicker__current-month {
1109
- color: rgba(0, 0, 0, 0.9) !important;
1110
- font-weight: 500 !important;
1111
- display: none;
1112
- font-family: Montserrat, Helvetica, Arial, serif !important;
1113
- }
1114
- .r-table-edit .react-datepicker-popper .react-datepicker__header__dropdown {
1115
- font-family: Montserrat, Helvetica, Arial, serif !important;
1116
- /* Giao diện của menu dropdown (tháng và năm) */
1117
- }
1118
- .r-table-edit .react-datepicker-popper .react-datepicker__header__dropdown .react-datepicker__month-dropdown-container {
1119
- margin: 0px 3px 0px 0px;
1120
- }
1121
- .r-table-edit .react-datepicker-popper .react-datepicker__header__dropdown .react-datepicker__year-dropdown-container {
1122
- margin: 0px 0px 0px 3px;
1123
- }
1124
- .r-table-edit .react-datepicker-popper .react-datepicker__header__dropdown .react-datepicker__month-select:focus,
1125
- .r-table-edit .react-datepicker-popper .react-datepicker__header__dropdown .react-datepicker__year-select:focus {
1126
- border: 1px solid #1989fa !important;
1127
- }
1128
- .r-table-edit .react-datepicker-popper .react-datepicker__header__dropdown .react-datepicker__month-select,
1129
- .r-table-edit .react-datepicker-popper .react-datepicker__header__dropdown .react-datepicker__year-select {
1130
- background-color: #FFFFFF;
1131
- height: 22px;
1132
- border-radius: 2px;
1133
- padding: 2px 0;
1134
- border: 1px solid hsl(0, 0%, 80%);
1135
- outline: none;
1136
- }
1137
- .r-table-edit .react-datepicker-popper .react-datepicker__navigation {
1138
- margin-top: 4px;
1139
- color: #eb4619;
1140
- }
1141
- .r-table-edit .react-datepicker-popper .react-datepicker__day-name {
1142
- font-family: Montserrat, Helvetica, Arial, serif !important;
1143
- }
1144
- .r-table-edit .react-datepicker-popper .react-datepicker__day {
1145
- outline: none;
1146
- border-radius: 20px !important;
1147
- font-family: Montserrat, Helvetica, Arial, serif !important;
1148
- }
1149
- .r-table-edit .react-datepicker-popper .react-datepicker__day:hover {
1150
- background-color: rgba(235, 70, 25, 0.1) !important;
1151
- }
1152
- .r-table-edit .react-datepicker-popper .react-datepicker__day--today {
1153
- color: #eb4619;
1154
- }
1155
- .r-table-edit .react-datepicker-popper .react-datepicker__day--today.react-datepicker__day--selected {
1156
- color: #FFFFFF;
1157
- }
1158
- .r-table-edit .react-datepicker-popper .react-datepicker__day--today.react-datepicker__day--keyboard-selected {
1159
- background-color: rgba(235, 70, 25, 0.1);
1160
- }
1161
- .r-table-edit .react-datepicker-popper .react-datepicker__day--selected {
1162
- background-color: #eb4619 !important;
465
+ .r-datepicker-popup .btn-today:hover {
466
+ text-decoration: underline;
1163
467
  }
1164
468
 
1165
469
  .tab-custom {
@@ -1672,6 +976,11 @@ html[data-textdirection=rtl] .btn-next svg {
1672
976
  .r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div.r-cell-selected-right {
1673
977
  border-right: 1px solid #eb4619;
1674
978
  }
979
+ .r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .r-datepicker .form-control {
980
+ padding: 0px 4px;
981
+ border-radius: 0px;
982
+ border-width: 0px;
983
+ }
1675
984
  .r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .react-select-table.is-invalid {
1676
985
  border-width: 0px;
1677
986
  }