react-table-edit 1.5.45 → 1.5.46

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.
@@ -275,6 +275,20 @@
275
275
  right: -100vw;
276
276
  height: 100vh;
277
277
  }
278
+ .r-sidebar .r-handle {
279
+ position: fixed;
280
+ background-color: #FFFFFF;
281
+ top: 50%;
282
+ transform: translate(-50%, -50%);
283
+ filter: drop-shadow(0.9px 0.9px 1.5px);
284
+ height: 50px;
285
+ display: flex;
286
+ align-items: center;
287
+ border-radius: 0px 5px 5px 0px;
288
+ cursor: pointer;
289
+ margin-left: 7px;
290
+ z-index: 9;
291
+ }
278
292
  .r-sidebar.customizer-md {
279
293
  width: 600px;
280
294
  }
@@ -344,808 +358,112 @@
344
358
  right: 0;
345
359
  }
346
360
 
347
- .r-table-edit .react-datepicker__year-read-view--down-arrow,
348
- .r-table-edit .react-datepicker__month-read-view--down-arrow,
349
- .r-table-edit .react-datepicker__month-year-read-view--down-arrow,
350
- .r-table-edit .react-datepicker__navigation-icon::before {
351
- border-color: #e0e0e0;
352
- border-style: solid;
353
- border-width: 3px 3px 0 0;
354
- content: "";
355
- display: block;
356
- height: 9px;
357
- position: absolute;
358
- top: 6px;
359
- width: 9px;
360
- }
361
- .r-table-edit .react-datepicker-wrapper {
362
- display: inline-block;
363
- width: 100% !important;
364
- padding: 0;
365
- border: 0;
366
- }
367
- .r-table-edit .react-datepicker-wrapper .react-datepicker__input-container input {
368
- height: 29px !important;
369
- }
370
- .r-table-edit .react-datepicker {
371
- font-family: "Helvetica Neue", helvetica, arial, sans-serif;
372
- font-size: 0.8rem;
373
- background-color: #FFFFFF;
374
- color: #000000;
375
- border: 1px solid #e0e0e0;
376
- border-radius: 0.3rem;
377
- display: inline-block;
378
- position: relative;
379
- line-height: initial;
380
- }
381
- .r-table-edit .react-datepicker--time-only .react-datepicker__time-container {
382
- border-left: 0;
383
- }
384
- .r-table-edit .react-datepicker--time-only .react-datepicker__time,
385
- .r-table-edit .react-datepicker--time-only .react-datepicker__time-box {
386
- border-bottom-left-radius: 0.3rem;
387
- border-bottom-right-radius: 0.3rem;
388
- }
389
- .r-table-edit .react-datepicker-popper {
390
- position: relative;
391
- line-height: 0;
392
- }
393
- .r-table-edit .react-datepicker-popper .react-datepicker__triangle {
394
- stroke: #e0e0e0;
395
- }
396
- .r-table-edit .react-datepicker-popper[data-placement^=bottom] .react-datepicker__triangle {
397
- fill: #f0f0f0;
398
- color: #f0f0f0;
399
- }
400
- .r-table-edit .react-datepicker-popper[data-placement^=top] .react-datepicker__triangle {
401
- fill: #FFFFFF;
402
- color: #FFFFFF;
403
- }
404
- .r-table-edit .react-datepicker__header {
405
- text-align: center;
406
- background-color: #FFFFFF;
407
- border-bottom: 1px solid #e0e0e0;
408
- border-top-left-radius: 0.3rem;
409
- padding: 8px 0;
410
- position: relative;
411
- }
412
- .r-table-edit .react-datepicker__header--time {
413
- padding-bottom: 8px;
414
- padding-left: 5px;
415
- padding-right: 5px;
416
- }
417
- .r-table-edit .react-datepicker__header--time:not(.react-datepicker__header--time--only) {
418
- border-top-left-radius: 0;
419
- }
420
- .r-table-edit .react-datepicker__header:not(.react-datepicker__header--has-time-select) {
421
- border-top-right-radius: 0.3rem;
422
- }
423
- .r-table-edit .react-datepicker__year-dropdown-container--select,
424
- .r-table-edit .react-datepicker__month-dropdown-container--select,
425
- .r-table-edit .react-datepicker__month-year-dropdown-container--select,
426
- .r-table-edit .react-datepicker__year-dropdown-container--scroll,
427
- .r-table-edit .react-datepicker__month-dropdown-container--scroll,
428
- .r-table-edit .react-datepicker__month-year-dropdown-container--scroll {
429
- display: inline-block;
430
- margin: 0 15px;
431
- }
432
- .r-table-edit .react-datepicker__current-month,
433
- .r-table-edit .react-datepicker-time__header,
434
- .r-table-edit .react-datepicker-year-header {
435
- margin-top: 0;
436
- color: #000000;
437
- font-weight: bold;
438
- font-size: 0.944rem;
439
- }
440
- .r-table-edit h2.react-datepicker__current-month {
441
- padding: 0;
442
- margin: 0;
443
- }
444
- .r-table-edit .react-datepicker-time__header {
445
- text-overflow: ellipsis;
446
- white-space: nowrap;
447
- overflow: hidden;
448
- }
449
- .r-table-edit .react-datepicker__navigation {
450
- align-items: center;
451
- background: none;
452
- display: flex;
453
- justify-content: center;
454
- text-align: center;
455
- cursor: pointer;
456
- position: absolute;
457
- top: 2px;
458
- padding: 0;
459
- border: none;
460
- z-index: 1;
461
- height: 32px;
462
- width: 32px;
463
- text-indent: -999em;
464
- overflow: hidden;
465
- }
466
- .r-table-edit .react-datepicker__navigation--previous {
467
- left: 2px;
468
- }
469
- .r-table-edit .react-datepicker__navigation--next {
470
- right: 2px;
471
- }
472
- .r-table-edit .react-datepicker__navigation--next--with-time:not(.react-datepicker__navigation--next--with-today-button) {
473
- right: 85px;
474
- }
475
- .r-table-edit .react-datepicker__navigation--years {
361
+ .r-datepicker {
476
362
  position: relative;
477
- top: 0;
478
- display: block;
479
- margin-left: auto;
480
- margin-right: auto;
481
- }
482
- .r-table-edit .react-datepicker__navigation--years-previous {
483
- top: 4px;
484
- }
485
- .r-table-edit .react-datepicker__navigation--years-upcoming {
486
- top: -4px;
487
- }
488
- .r-table-edit .react-datepicker__navigation:hover *::before {
489
- border-color: #eb4619;
490
- }
491
- .r-table-edit .react-datepicker__navigation-icon {
492
- position: relative;
493
- top: -1px;
494
- font-size: 20px;
495
- width: 0;
496
- }
497
- .r-table-edit .react-datepicker__navigation-icon--next {
498
- left: -2px;
499
- }
500
- .r-table-edit .react-datepicker__navigation-icon--next::before {
501
- transform: rotate(45deg);
502
- left: -7px;
503
- }
504
- .r-table-edit .react-datepicker__navigation-icon--previous {
505
- right: -2px;
506
- }
507
- .r-table-edit .react-datepicker__navigation-icon--previous::before {
508
- transform: rotate(225deg);
509
- right: -7px;
510
- }
511
- .r-table-edit .react-datepicker__month-container {
512
- float: left;
513
- }
514
- .r-table-edit .react-datepicker__year {
515
- margin: 0.4rem;
516
- text-align: center;
517
- }
518
- .r-table-edit .react-datepicker__year-wrapper {
519
- display: flex;
520
- flex-wrap: wrap;
521
- max-width: 180px;
522
363
  }
523
- .r-table-edit .react-datepicker__year .react-datepicker__year-text {
524
- display: inline-block;
525
- width: 4rem;
526
- margin: 2px;
527
- }
528
- .r-table-edit .react-datepicker__month {
529
- margin: 0.4rem;
530
- text-align: center;
531
- }
532
- .r-table-edit .react-datepicker__month .react-datepicker__month-text,
533
- .r-table-edit .react-datepicker__month .react-datepicker__quarter-text {
534
- display: inline-block;
535
- width: 4rem;
536
- margin: 2px;
537
- }
538
- .r-table-edit .react-datepicker__input-time-container {
539
- clear: both;
540
- width: 100%;
541
- float: left;
542
- margin: 5px 0 10px 15px;
543
- text-align: left;
544
- }
545
- .r-table-edit .react-datepicker__input-time-container .react-datepicker-time__caption {
546
- display: inline-block;
547
- }
548
- .r-table-edit .react-datepicker__input-time-container .react-datepicker-time__input-container {
549
- display: inline-block;
550
- }
551
- .r-table-edit .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input {
552
- display: inline-block;
553
- margin-left: 10px;
554
- }
555
- .r-table-edit .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input {
556
- width: auto;
557
- }
558
- .r-table-edit .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time]::-webkit-inner-spin-button,
559
- .r-table-edit .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__input input[type=time]::-webkit-outer-spin-button {
560
- -webkit-appearance: none;
561
- margin: 0;
562
- }
563
- .r-table-edit .react-datepicker__input-time-container .react-datepicker-time__input-container .react-datepicker-time__delimiter {
564
- margin-left: 5px;
565
- display: inline-block;
566
- }
567
- .r-table-edit .react-datepicker__time-container {
568
- float: right;
569
- border-left: 1px solid #e0e0e0;
570
- width: 85px;
571
- }
572
- .r-table-edit .react-datepicker__time-container--with-today-button {
573
- display: inline;
574
- border: 1px solid #e0e0e0;
575
- border-radius: 0.3rem;
576
- position: absolute;
577
- right: -87px;
578
- top: 0;
364
+ .r-datepicker .form-control {
365
+ height: 28px;
579
366
  }
580
- .r-table-edit .react-datepicker__time-container .react-datepicker__time {
581
- position: relative;
367
+
368
+ .r-datepicker-popup {
582
369
  background: white;
583
- border-bottom-right-radius: 0.3rem;
584
- }
585
- .r-table-edit .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box {
586
- width: 85px;
587
- overflow-x: hidden;
588
- margin: 0 auto;
589
- text-align: center;
590
- border-bottom-right-radius: 0.3rem;
591
- }
592
- .r-table-edit .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list {
593
- list-style: none;
594
- margin: 0;
595
- height: calc(195px + 0.85rem);
596
- overflow-y: scroll;
597
- padding-right: 0;
598
- padding-left: 0;
599
- width: 100%;
600
- box-sizing: content-box;
601
- }
602
- .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 {
603
- height: 30px;
604
- padding: 5px 10px;
605
- white-space: nowrap;
606
- }
607
- .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 {
608
- cursor: pointer;
609
- background-color: #f0f0f0;
610
- }
611
- .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 {
612
- background-color: #216ba5;
613
- color: white;
614
- font-weight: bold;
615
- }
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--selected:hover {
617
- background-color: #216ba5;
618
- }
619
- .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 {
620
- color: #ccc;
621
- }
622
- .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 {
623
- cursor: default;
624
- background-color: transparent;
625
- }
626
- .r-table-edit .react-datepicker__week-number {
627
- color: #ccc;
628
- display: inline-block;
629
- width: 1.7rem;
630
- line-height: 1.7rem;
631
- text-align: center;
632
- margin: 0.166rem;
633
- }
634
- .r-table-edit .react-datepicker__week-number.react-datepicker__week-number--clickable {
635
- cursor: pointer;
636
- }
637
- .r-table-edit .react-datepicker__week-number.react-datepicker__week-number--clickable:not(.react-datepicker__week-number--selected,
638
- .react-datepicker__week-number--keyboard-selected):hover {
639
- border-radius: 0.3rem;
640
- background-color: #f0f0f0;
641
- }
642
- .r-table-edit .react-datepicker__week-number--selected {
643
- border-radius: 0.3rem;
644
- background-color: #216ba5;
645
- color: #FFFFFF;
646
- }
647
- .r-table-edit .react-datepicker__week-number--selected:hover {
648
- background-color: rgb(28.75, 93.2196969697, 143.75);
649
- }
650
- .r-table-edit .react-datepicker__week-number--keyboard-selected {
651
- border-radius: 0.3rem;
652
- background-color: rgb(41.5, 134.5606060606, 207.5);
653
- color: #FFFFFF;
654
- }
655
- .r-table-edit .react-datepicker__week-number--keyboard-selected:hover {
656
- background-color: rgb(28.75, 93.2196969697, 143.75);
657
- }
658
- .r-table-edit .react-datepicker__day-names {
659
- white-space: nowrap;
660
- margin-bottom: -8px;
661
- }
662
- .r-table-edit .react-datepicker__week {
663
- white-space: nowrap;
664
- }
665
- .r-table-edit .react-datepicker__day-name,
666
- .r-table-edit .react-datepicker__day,
667
- .r-table-edit .react-datepicker__time-name {
668
- color: #000000;
669
- display: inline-block;
670
- width: 1.7rem;
671
- line-height: 1.7rem;
672
- text-align: center;
673
- margin: 0.166rem;
674
- }
675
- .r-table-edit .react-datepicker__day,
676
- .r-table-edit .react-datepicker__month-text,
677
- .r-table-edit .react-datepicker__quarter-text,
678
- .r-table-edit .react-datepicker__year-text {
679
- cursor: pointer;
680
- }
681
- .r-table-edit .react-datepicker__day:not([aria-disabled=true]):hover,
682
- .r-table-edit .react-datepicker__month-text:not([aria-disabled=true]):hover,
683
- .r-table-edit .react-datepicker__quarter-text:not([aria-disabled=true]):hover,
684
- .r-table-edit .react-datepicker__year-text:not([aria-disabled=true]):hover {
685
- border-radius: 0.3rem;
686
- background-color: #FFFFFF;
687
- }
688
- .r-table-edit .react-datepicker__day--today,
689
- .r-table-edit .react-datepicker__month-text--today,
690
- .r-table-edit .react-datepicker__quarter-text--today,
691
- .r-table-edit .react-datepicker__year-text--today {
692
- font-weight: bold;
693
- }
694
- .r-table-edit .react-datepicker__day--highlighted,
695
- .r-table-edit .react-datepicker__month-text--highlighted,
696
- .r-table-edit .react-datepicker__quarter-text--highlighted,
697
- .r-table-edit .react-datepicker__year-text--highlighted {
698
- border-radius: 0.3rem;
699
- background-color: #3dcc4a;
700
- color: #FFFFFF;
701
- }
702
- .r-table-edit .react-datepicker__day--highlighted:not([aria-disabled=true]):hover,
703
- .r-table-edit .react-datepicker__month-text--highlighted:not([aria-disabled=true]):hover,
704
- .r-table-edit .react-datepicker__quarter-text--highlighted:not([aria-disabled=true]):hover,
705
- .r-table-edit .react-datepicker__year-text--highlighted:not([aria-disabled=true]):hover {
706
- background-color: rgb(49.8551020408, 189.6448979592, 62.5632653061);
707
- }
708
- .r-table-edit .react-datepicker__day--highlighted-custom-1,
709
- .r-table-edit .react-datepicker__month-text--highlighted-custom-1,
710
- .r-table-edit .react-datepicker__quarter-text--highlighted-custom-1,
711
- .r-table-edit .react-datepicker__year-text--highlighted-custom-1 {
712
- color: magenta;
713
- }
714
- .r-table-edit .react-datepicker__day--highlighted-custom-2,
715
- .r-table-edit .react-datepicker__month-text--highlighted-custom-2,
716
- .r-table-edit .react-datepicker__quarter-text--highlighted-custom-2,
717
- .r-table-edit .react-datepicker__year-text--highlighted-custom-2 {
718
- color: green;
719
- }
720
- .r-table-edit .react-datepicker__day--holidays,
721
- .r-table-edit .react-datepicker__month-text--holidays,
722
- .r-table-edit .react-datepicker__quarter-text--holidays,
723
- .r-table-edit .react-datepicker__year-text--holidays {
724
- position: relative;
725
- border-radius: 0.3rem;
726
- background-color: #ff6803;
727
- color: #FFFFFF;
728
- }
729
- .r-table-edit .react-datepicker__day--holidays .overlay,
730
- .r-table-edit .react-datepicker__month-text--holidays .overlay,
731
- .r-table-edit .react-datepicker__quarter-text--holidays .overlay,
732
- .r-table-edit .react-datepicker__year-text--holidays .overlay {
733
- position: absolute;
734
- bottom: 100%;
735
- left: 50%;
736
- transform: translateX(-50%);
737
- background-color: #333;
738
- color: #FFFFFF;
739
- padding: 4px;
740
- border-radius: 4px;
741
- white-space: nowrap;
742
- visibility: hidden;
743
- opacity: 0;
744
- transition: visibility 0s, opacity 0.3s ease-in-out;
745
- }
746
- .r-table-edit .react-datepicker__day--holidays:not([aria-disabled=true]):hover,
747
- .r-table-edit .react-datepicker__month-text--holidays:not([aria-disabled=true]):hover,
748
- .r-table-edit .react-datepicker__quarter-text--holidays:not([aria-disabled=true]):hover,
749
- .r-table-edit .react-datepicker__year-text--holidays:not([aria-disabled=true]):hover {
750
- background-color: rgb(207, 82.9642857143, 0);
751
- }
752
- .r-table-edit .react-datepicker__day--holidays:hover .overlay,
753
- .r-table-edit .react-datepicker__month-text--holidays:hover .overlay,
754
- .r-table-edit .react-datepicker__quarter-text--holidays:hover .overlay,
755
- .r-table-edit .react-datepicker__year-text--holidays:hover .overlay {
756
- visibility: visible;
757
- opacity: 1;
370
+ border: 1px solid #e0e0e0;
371
+ padding: 15px 5px !important;
758
372
  }
759
- .r-table-edit .react-datepicker__day--selected,
760
- .r-table-edit .react-datepicker__day--in-selecting-range,
761
- .r-table-edit .react-datepicker__day--in-range,
762
- .r-table-edit .react-datepicker__month-text--selected,
763
- .r-table-edit .react-datepicker__month-text--in-selecting-range,
764
- .r-table-edit .react-datepicker__month-text--in-range,
765
- .r-table-edit .react-datepicker__quarter-text--selected,
766
- .r-table-edit .react-datepicker__quarter-text--in-selecting-range,
767
- .r-table-edit .react-datepicker__quarter-text--in-range,
768
- .r-table-edit .react-datepicker__year-text--selected,
769
- .r-table-edit .react-datepicker__year-text--in-selecting-range,
770
- .r-table-edit .react-datepicker__year-text--in-range {
771
- border-radius: 0.3rem;
772
- background-color: #216ba5;
773
- color: #FFFFFF;
373
+ .r-datepicker-popup .rdp-nav {
374
+ display: none;
774
375
  }
775
- .r-table-edit .react-datepicker__day--selected:not([aria-disabled=true]):hover,
776
- .r-table-edit .react-datepicker__day--in-selecting-range:not([aria-disabled=true]):hover,
777
- .r-table-edit .react-datepicker__day--in-range:not([aria-disabled=true]):hover,
778
- .r-table-edit .react-datepicker__month-text--selected:not([aria-disabled=true]):hover,
779
- .r-table-edit .react-datepicker__month-text--in-selecting-range:not([aria-disabled=true]):hover,
780
- .r-table-edit .react-datepicker__month-text--in-range:not([aria-disabled=true]):hover,
781
- .r-table-edit .react-datepicker__quarter-text--selected:not([aria-disabled=true]):hover,
782
- .r-table-edit .react-datepicker__quarter-text--in-selecting-range:not([aria-disabled=true]):hover,
783
- .r-table-edit .react-datepicker__quarter-text--in-range:not([aria-disabled=true]):hover,
784
- .r-table-edit .react-datepicker__year-text--selected:not([aria-disabled=true]):hover,
785
- .r-table-edit .react-datepicker__year-text--in-selecting-range:not([aria-disabled=true]):hover,
786
- .r-table-edit .react-datepicker__year-text--in-range:not([aria-disabled=true]):hover {
787
- background-color: rgb(28.75, 93.2196969697, 143.75);
788
- }
789
- .r-table-edit .react-datepicker__day--keyboard-selected,
790
- .r-table-edit .react-datepicker__month-text--keyboard-selected,
791
- .r-table-edit .react-datepicker__quarter-text--keyboard-selected,
792
- .r-table-edit .react-datepicker__year-text--keyboard-selected {
793
- border-radius: 0.3rem;
794
- background-color: rgb(186.25, 217.0833333333, 241.25);
795
- color: rgb(0, 0, 0);
796
- }
797
- .r-table-edit .react-datepicker__day--keyboard-selected:not([aria-disabled=true]):hover,
798
- .r-table-edit .react-datepicker__month-text--keyboard-selected:not([aria-disabled=true]):hover,
799
- .r-table-edit .react-datepicker__quarter-text--keyboard-selected:not([aria-disabled=true]):hover,
800
- .r-table-edit .react-datepicker__year-text--keyboard-selected:not([aria-disabled=true]):hover {
801
- background-color: rgb(28.75, 93.2196969697, 143.75);
802
- }
803
- .r-table-edit .react-datepicker__day--in-selecting-range:not(.react-datepicker__day--in-range,
804
- .react-datepicker__month-text--in-range,
805
- .react-datepicker__quarter-text--in-range,
806
- .react-datepicker__year-text--in-range),
807
- .r-table-edit .react-datepicker__month-text--in-selecting-range:not(.react-datepicker__day--in-range,
808
- .react-datepicker__month-text--in-range,
809
- .react-datepicker__quarter-text--in-range,
810
- .react-datepicker__year-text--in-range),
811
- .r-table-edit .react-datepicker__quarter-text--in-selecting-range:not(.react-datepicker__day--in-range,
812
- .react-datepicker__month-text--in-range,
813
- .react-datepicker__quarter-text--in-range,
814
- .react-datepicker__year-text--in-range),
815
- .r-table-edit .react-datepicker__year-text--in-selecting-range:not(.react-datepicker__day--in-range,
816
- .react-datepicker__month-text--in-range,
817
- .react-datepicker__quarter-text--in-range,
818
- .react-datepicker__year-text--in-range) {
819
- background-color: rgba(33, 107, 165, 0.5);
820
- }
821
- .r-table-edit .react-datepicker__month--selecting-range .react-datepicker__day--in-range:not(.react-datepicker__day--in-selecting-range,
822
- .react-datepicker__month-text--in-selecting-range,
823
- .react-datepicker__quarter-text--in-selecting-range,
824
- .react-datepicker__year-text--in-selecting-range),
825
- .r-table-edit .react-datepicker__year--selecting-range .react-datepicker__day--in-range:not(.react-datepicker__day--in-selecting-range,
826
- .react-datepicker__month-text--in-selecting-range,
827
- .react-datepicker__quarter-text--in-selecting-range,
828
- .react-datepicker__year-text--in-selecting-range),
829
- .r-table-edit .react-datepicker__month--selecting-range .react-datepicker__month-text--in-range:not(.react-datepicker__day--in-selecting-range,
830
- .react-datepicker__month-text--in-selecting-range,
831
- .react-datepicker__quarter-text--in-selecting-range,
832
- .react-datepicker__year-text--in-selecting-range),
833
- .r-table-edit .react-datepicker__year--selecting-range .react-datepicker__month-text--in-range:not(.react-datepicker__day--in-selecting-range,
834
- .react-datepicker__month-text--in-selecting-range,
835
- .react-datepicker__quarter-text--in-selecting-range,
836
- .react-datepicker__year-text--in-selecting-range),
837
- .r-table-edit .react-datepicker__month--selecting-range .react-datepicker__quarter-text--in-range:not(.react-datepicker__day--in-selecting-range,
838
- .react-datepicker__month-text--in-selecting-range,
839
- .react-datepicker__quarter-text--in-selecting-range,
840
- .react-datepicker__year-text--in-selecting-range),
841
- .r-table-edit .react-datepicker__year--selecting-range .react-datepicker__quarter-text--in-range:not(.react-datepicker__day--in-selecting-range,
842
- .react-datepicker__month-text--in-selecting-range,
843
- .react-datepicker__quarter-text--in-selecting-range,
844
- .react-datepicker__year-text--in-selecting-range),
845
- .r-table-edit .react-datepicker__month--selecting-range .react-datepicker__year-text--in-range:not(.react-datepicker__day--in-selecting-range,
846
- .react-datepicker__month-text--in-selecting-range,
847
- .react-datepicker__quarter-text--in-selecting-range,
848
- .react-datepicker__year-text--in-selecting-range),
849
- .r-table-edit .react-datepicker__year--selecting-range .react-datepicker__year-text--in-range:not(.react-datepicker__day--in-selecting-range,
850
- .react-datepicker__month-text--in-selecting-range,
851
- .react-datepicker__quarter-text--in-selecting-range,
852
- .react-datepicker__year-text--in-selecting-range) {
853
- background-color: #f0f0f0;
854
- color: #000000;
855
- }
856
- .r-table-edit .react-datepicker__day--disabled,
857
- .r-table-edit .react-datepicker__month-text--disabled,
858
- .r-table-edit .react-datepicker__quarter-text--disabled,
859
- .r-table-edit .react-datepicker__year-text--disabled {
860
- cursor: default;
861
- color: #ccc;
862
- }
863
- .r-table-edit .react-datepicker__day--disabled .overlay,
864
- .r-table-edit .react-datepicker__month-text--disabled .overlay,
865
- .r-table-edit .react-datepicker__quarter-text--disabled .overlay,
866
- .r-table-edit .react-datepicker__year-text--disabled .overlay {
867
- position: absolute;
868
- bottom: 70%;
869
- left: 50%;
870
- transform: translateX(-50%);
871
- background-color: #333;
872
- color: #FFFFFF;
873
- padding: 4px;
874
- border-radius: 4px;
875
- white-space: nowrap;
876
- visibility: hidden;
877
- opacity: 0;
878
- transition: visibility 0s, opacity 0.3s ease-in-out;
376
+ .r-datepicker-popup .rdp-month_caption {
377
+ display: none;
879
378
  }
880
- .r-table-edit .react-datepicker__input-container {
881
- position: relative;
882
- display: inline-block;
379
+ .r-datepicker-popup .select-month-year {
380
+ display: flex;
381
+ align-items: center;
382
+ justify-content: space-between;
883
383
  width: 100%;
384
+ padding: 5px 5px 8px 5px;
884
385
  }
885
- .r-table-edit .react-datepicker__input-container .react-datepicker__calendar-icon {
886
- position: absolute;
887
- padding: 0.5rem;
888
- box-sizing: content-box;
889
- }
890
- .r-table-edit .react-datepicker__view-calendar-icon input {
891
- padding: 6px 10px 5px 25px;
386
+ .r-datepicker-popup .select-month-year .select-month {
387
+ text-align: right;
388
+ width: 90px !important;
892
389
  }
893
- .r-table-edit .react-datepicker__year-read-view,
894
- .r-table-edit .react-datepicker__month-read-view,
895
- .r-table-edit .react-datepicker__month-year-read-view {
896
- border: 1px solid transparent;
897
- border-radius: 0.3rem;
898
- position: relative;
899
- }
900
- .r-table-edit .react-datepicker__year-read-view:hover,
901
- .r-table-edit .react-datepicker__month-read-view:hover,
902
- .r-table-edit .react-datepicker__month-year-read-view:hover {
903
- cursor: pointer;
390
+ .r-datepicker-popup .select-month-year .select-year {
391
+ text-align: left;
392
+ width: 65px !important;
904
393
  }
905
- .r-table-edit .react-datepicker__year-read-view:hover .react-datepicker__year-read-view--down-arrow,
906
- .r-table-edit .react-datepicker__year-read-view:hover .react-datepicker__month-read-view--down-arrow,
907
- .r-table-edit .react-datepicker__month-read-view:hover .react-datepicker__year-read-view--down-arrow,
908
- .r-table-edit .react-datepicker__month-read-view:hover .react-datepicker__month-read-view--down-arrow,
909
- .r-table-edit .react-datepicker__month-year-read-view:hover .react-datepicker__year-read-view--down-arrow,
910
- .r-table-edit .react-datepicker__month-year-read-view:hover .react-datepicker__month-read-view--down-arrow {
911
- border-top-color: rgb(178.5, 178.5, 178.5);
912
- }
913
- .r-table-edit .react-datepicker__year-read-view--down-arrow,
914
- .r-table-edit .react-datepicker__month-read-view--down-arrow,
915
- .r-table-edit .react-datepicker__month-year-read-view--down-arrow {
916
- transform: rotate(135deg);
917
- right: -16px;
918
- top: 0;
394
+ .r-datepicker-popup .select-month-year svg:hover {
395
+ color: #eb4619;
919
396
  }
920
- .r-table-edit .react-datepicker__year-dropdown,
921
- .r-table-edit .react-datepicker__month-dropdown,
922
- .r-table-edit .react-datepicker__month-year-dropdown {
923
- background-color: #f0f0f0;
924
- position: absolute;
925
- width: 50%;
926
- left: 25%;
927
- top: 30px;
928
- z-index: 1;
929
- text-align: center;
930
- border-radius: 0.3rem;
931
- border: 1px solid #e0e0e0;
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;
932
401
  }
933
- .r-table-edit .react-datepicker__year-dropdown:hover,
934
- .r-table-edit .react-datepicker__month-dropdown:hover,
935
- .r-table-edit .react-datepicker__month-year-dropdown:hover {
936
- cursor: pointer;
402
+ .r-datepicker-popup .select-month-year .select-table-control .select-table-container .select-input {
403
+ cursor: pointer !important;
937
404
  }
938
- .r-table-edit .react-datepicker__year-dropdown--scrollable,
939
- .r-table-edit .react-datepicker__month-dropdown--scrollable,
940
- .r-table-edit .react-datepicker__month-year-dropdown--scrollable {
941
- height: 150px;
942
- overflow-y: scroll;
405
+ .r-datepicker-popup .select-month-year .react-select-table .select-table-control {
406
+ border: none;
943
407
  }
944
- .r-table-edit .react-datepicker__year-option,
945
- .r-table-edit .react-datepicker__month-option,
946
- .r-table-edit .react-datepicker__month-year-option {
947
- line-height: 20px;
948
- width: 100%;
949
- display: block;
950
- margin-left: auto;
951
- margin-right: auto;
952
- }
953
- .r-table-edit .react-datepicker__year-option:first-of-type,
954
- .r-table-edit .react-datepicker__month-option:first-of-type,
955
- .r-table-edit .react-datepicker__month-year-option:first-of-type {
956
- border-top-left-radius: 0.3rem;
957
- border-top-right-radius: 0.3rem;
958
- }
959
- .r-table-edit .react-datepicker__year-option:last-of-type,
960
- .r-table-edit .react-datepicker__month-option:last-of-type,
961
- .r-table-edit .react-datepicker__month-year-option:last-of-type {
962
- -webkit-user-select: none;
963
- -moz-user-select: none;
964
- -ms-user-select: none;
965
- user-select: none;
966
- border-bottom-left-radius: 0.3rem;
967
- border-bottom-right-radius: 0.3rem;
968
- }
969
- .r-table-edit .react-datepicker__year-option:hover,
970
- .r-table-edit .react-datepicker__month-option:hover,
971
- .r-table-edit .react-datepicker__month-year-option:hover {
972
- background-color: #ccc;
973
- }
974
- .r-table-edit .react-datepicker__year-option:hover .react-datepicker__navigation--years-upcoming,
975
- .r-table-edit .react-datepicker__month-option:hover .react-datepicker__navigation--years-upcoming,
976
- .r-table-edit .react-datepicker__month-year-option:hover .react-datepicker__navigation--years-upcoming {
977
- border-bottom-color: rgb(178.5, 178.5, 178.5);
978
- }
979
- .r-table-edit .react-datepicker__year-option:hover .react-datepicker__navigation--years-previous,
980
- .r-table-edit .react-datepicker__month-option:hover .react-datepicker__navigation--years-previous,
981
- .r-table-edit .react-datepicker__month-year-option:hover .react-datepicker__navigation--years-previous {
982
- border-top-color: rgb(178.5, 178.5, 178.5);
983
- }
984
- .r-table-edit .react-datepicker__year-option--selected,
985
- .r-table-edit .react-datepicker__month-option--selected,
986
- .r-table-edit .react-datepicker__month-year-option--selected {
987
- position: absolute;
988
- left: 15px;
408
+ .r-datepicker-popup .select-month-year .react-select-table .r-select-is-focus {
409
+ border: none !important;
989
410
  }
990
- .r-table-edit .react-datepicker__close-icon {
991
- cursor: pointer;
992
- background-color: transparent;
993
- border: 0;
994
- outline: 0;
995
- padding: 0 6px 0 0;
996
- position: absolute;
997
- top: 0;
998
- right: 0;
999
- height: 100%;
1000
- display: table-cell;
1001
- vertical-align: middle;
411
+ .r-datepicker-popup .select-month-year .select-table-indicator {
412
+ display: none;
1002
413
  }
1003
- .r-table-edit .react-datepicker__close-icon::after {
1004
- cursor: pointer;
1005
- background-color: transparent;
1006
- color: #c4c4c4;
1007
- height: 16px;
1008
- width: 16px;
1009
- padding: 0px 2px;
1010
- font-size: 25px;
414
+ .r-datepicker-popup .rdp-weekday {
415
+ color: rgba(0, 0, 0, 0.8705882353) !important;
416
+ opacity: 1 !important;
1011
417
  font-weight: 500;
1012
- line-height: 0.5;
1013
- text-align: center;
1014
- display: table-cell;
1015
- vertical-align: middle;
1016
- content: "×";
418
+ font-size: 14px !important;
1017
419
  }
1018
- .r-table-edit .react-datepicker__close-icon:hover::after {
420
+ .r-datepicker-popup .rdp-day {
1019
421
  color: rgba(0, 0, 0, 0.8705882353) !important;
422
+ font-size: 13.5px !important;
423
+ height: 32px !important;
424
+ width: 32px !important;
1020
425
  }
1021
- .r-table-edit .react-datepicker__close-icon--disabled {
1022
- cursor: default;
1023
- }
1024
- .r-table-edit .react-datepicker__close-icon--disabled::after {
1025
- cursor: default;
1026
- background-color: #ccc;
426
+ .r-datepicker-popup .rdp-day .rdp-day_button {
427
+ height: 32px !important;
428
+ width: 32px !important;
1027
429
  }
1028
- .r-table-edit .react-datepicker__today-button {
1029
- background: #f0f0f0;
1030
- border-top: 1px solid #e0e0e0;
1031
- cursor: pointer;
1032
- text-align: center;
430
+ .r-datepicker-popup .rdp-day.rdp-today {
1033
431
  font-weight: bold;
1034
- padding: 5px 0;
1035
- clear: left;
1036
- }
1037
- .r-table-edit .react-datepicker__portal {
1038
- position: fixed;
1039
- width: 100vw;
1040
- height: 100vh;
1041
- background-color: rgba(0, 0, 0, 0.8);
1042
- left: 0;
1043
- top: 0;
1044
- justify-content: center;
1045
- align-items: center;
1046
- display: flex;
1047
- z-index: 2147483647;
1048
- }
1049
- .r-table-edit .react-datepicker__portal .react-datepicker__day-name,
1050
- .r-table-edit .react-datepicker__portal .react-datepicker__day,
1051
- .r-table-edit .react-datepicker__portal .react-datepicker__time-name {
1052
- width: 3rem;
1053
- line-height: 3rem;
1054
- }
1055
- @media (max-width: 400px), (max-height: 550px) {
1056
- .r-table-edit .react-datepicker__portal .react-datepicker__day-name,
1057
- .r-table-edit .react-datepicker__portal .react-datepicker__day,
1058
- .r-table-edit .react-datepicker__portal .react-datepicker__time-name {
1059
- width: 2rem;
1060
- line-height: 2rem;
1061
- }
1062
- }
1063
- .r-table-edit .react-datepicker__portal .react-datepicker__current-month,
1064
- .r-table-edit .react-datepicker__portal .react-datepicker-time__header {
1065
- font-size: 1.44rem;
1066
- }
1067
- .r-table-edit .react-datepicker__children-container {
1068
- width: 13.8rem;
1069
- margin: 0.4rem;
1070
- padding-right: 0.2rem;
1071
- padding-left: 0.2rem;
1072
- height: auto;
1073
- }
1074
- .r-table-edit .react-datepicker__aria-live {
1075
- position: absolute;
1076
- clip-path: circle(0);
1077
- border: 0;
1078
- height: 1px;
1079
- margin: -1px;
1080
- overflow: hidden;
1081
- padding: 0;
1082
- width: 1px;
1083
- white-space: nowrap;
1084
- }
1085
- .r-table-edit .react-datepicker__calendar-icon {
1086
- width: 1em;
1087
- height: 1em;
1088
- vertical-align: -0.125em;
1089
- }
1090
- .r-table-edit .react-datepicker-popper {
1091
- z-index: 999 !important;
1092
- position: fixed !important;
1093
- }
1094
- .r-table-edit .react-datepicker-popper .react-datepicker__current-month {
1095
- color: rgba(0, 0, 0, 0.9) !important;
1096
- font-weight: 500 !important;
1097
- display: none;
1098
- font-family: Montserrat, Helvetica, Arial, serif !important;
1099
- }
1100
- .r-table-edit .react-datepicker-popper .react-datepicker__header__dropdown {
1101
- font-family: Montserrat, Helvetica, Arial, serif !important;
1102
- /* Giao diện của menu dropdown (tháng và năm) */
1103
- }
1104
- .r-table-edit .react-datepicker-popper .react-datepicker__header__dropdown .react-datepicker__month-dropdown-container {
1105
- margin: 0px 3px 0px 0px;
432
+ color: #eb4619;
1106
433
  }
1107
- .r-table-edit .react-datepicker-popper .react-datepicker__header__dropdown .react-datepicker__year-dropdown-container {
1108
- margin: 0px 0px 0px 3px;
434
+ .r-datepicker-popup .rdp-day.rdp-today .rdp-day_button {
435
+ border: 1px solid #eb4619;
436
+ border-radius: 8px;
1109
437
  }
1110
- .r-table-edit .react-datepicker-popper .react-datepicker__header__dropdown .react-datepicker__month-select:focus,
1111
- .r-table-edit .react-datepicker-popper .react-datepicker__header__dropdown .react-datepicker__year-select:focus {
1112
- border: 1px solid #1989fa !important;
438
+ .r-datepicker-popup .rdp-day.rdp-selected .rdp-day_button {
439
+ border: 1px solid #eb4619;
440
+ background-color: #eb4619;
441
+ color: #FFFFFF;
442
+ border-radius: 8px;
1113
443
  }
1114
- .r-table-edit .react-datepicker-popper .react-datepicker__header__dropdown .react-datepicker__month-select,
1115
- .r-table-edit .react-datepicker-popper .react-datepicker__header__dropdown .react-datepicker__year-select {
1116
- background-color: #FFFFFF;
1117
- height: 22px;
444
+ .r-datepicker-popup .rdp-day.rdp-in-range .rdp-day_button {
445
+ background-color: #fce6df;
446
+ color: #eb4619;
1118
447
  border-radius: 2px;
1119
- padding: 2px 0;
1120
- border: 1px solid hsl(0, 0%, 80%);
1121
- outline: none;
448
+ height: 22px !important;
449
+ border-width: 0px !important;
1122
450
  }
1123
- .r-table-edit .react-datepicker-popper .react-datepicker__navigation {
1124
- margin-top: 4px;
451
+ .r-datepicker-popup .rdp-day .rdp-day_button:hover {
452
+ background-color: #fce6df;
1125
453
  color: #eb4619;
454
+ border-radius: 8px;
1126
455
  }
1127
- .r-table-edit .react-datepicker-popper .react-datepicker__day-name {
1128
- font-family: Montserrat, Helvetica, Arial, serif !important;
1129
- }
1130
- .r-table-edit .react-datepicker-popper .react-datepicker__day {
1131
- outline: none;
1132
- border-radius: 20px !important;
1133
- font-family: Montserrat, Helvetica, Arial, serif !important;
1134
- }
1135
- .r-table-edit .react-datepicker-popper .react-datepicker__day:hover {
1136
- background-color: rgba(235, 70, 25, 0.1) !important;
1137
- }
1138
- .r-table-edit .react-datepicker-popper .react-datepicker__day--today {
456
+ .r-datepicker-popup .btn-today {
457
+ margin-top: 5px;
458
+ text-align: center;
459
+ font-size: 13px;
1139
460
  color: #eb4619;
461
+ cursor: pointer;
462
+ user-select: none;
463
+ font-weight: 500;
1140
464
  }
1141
- .r-table-edit .react-datepicker-popper .react-datepicker__day--today.react-datepicker__day--selected {
1142
- color: #FFFFFF;
1143
- }
1144
- .r-table-edit .react-datepicker-popper .react-datepicker__day--today.react-datepicker__day--keyboard-selected {
1145
- background-color: rgba(235, 70, 25, 0.1);
1146
- }
1147
- .r-table-edit .react-datepicker-popper .react-datepicker__day--selected {
1148
- background-color: #eb4619 !important;
465
+ .r-datepicker-popup .btn-today:hover {
466
+ text-decoration: underline;
1149
467
  }
1150
468
 
1151
469
  .tab-custom {
@@ -1358,6 +676,27 @@ html[data-textdirection=rtl] .btn-next svg {
1358
676
  padding-top: 1.5rem;
1359
677
  }
1360
678
  }
679
+ .r-context-popover .popover-arrow {
680
+ display: none !important;
681
+ }
682
+ .r-context-popover .popover-body {
683
+ padding: 5px !important;
684
+ border: none !important;
685
+ border-radius: 10px;
686
+ }
687
+ .r-context-popover .popover-body .r-context-item {
688
+ padding: 5px 10px;
689
+ font-size: 13px;
690
+ cursor: pointer;
691
+ border-radius: 5px;
692
+ display: flex;
693
+ align-items: center;
694
+ }
695
+ .r-context-popover .popover-body .r-context-item:hover {
696
+ background-color: rgba(235, 70, 25, 0.1);
697
+ color: #eb4619;
698
+ }
699
+
1361
700
  .r-table-edit .r-grid {
1362
701
  font-size: 12px;
1363
702
  }
@@ -1478,10 +817,10 @@ html[data-textdirection=rtl] .btn-next svg {
1478
817
  border-right: 1px solid #e0e0e0;
1479
818
  }
1480
819
  .r-table-edit .r-grid .r-gridtable .r-gridheader .r-row .cell-fixed.fix-left.fixed-last .r-headercell-div {
1481
- border-right: 2px solid #e0e0e0;
820
+ box-shadow: 2px 0 4px -1px rgba(0, 0, 0, 0.1);
1482
821
  }
1483
822
  .r-table-edit .r-grid .r-gridtable .r-gridheader .r-row .cell-fixed.fix-right.fixed-last .r-headercell-div {
1484
- border-left: 2px solid #e0e0e0;
823
+ box-shadow: -2px 0 4px -1px rgba(0, 0, 0, 0.1);
1485
824
  }
1486
825
  .r-table-edit .r-grid .r-gridtable .r-gridheader .r-row .r-headercell {
1487
826
  color: rgba(0, 0, 0, 0.8705882353);
@@ -1508,7 +847,6 @@ html[data-textdirection=rtl] .btn-next svg {
1508
847
  }
1509
848
  .r-table-edit .r-grid .r-gridtable .r-gridheader .r-row .r-headercell .header-content .text-content {
1510
849
  display: -webkit-box;
1511
- -webkit-line-clamp: 2;
1512
850
  -webkit-box-orient: vertical;
1513
851
  overflow: hidden;
1514
852
  text-overflow: ellipsis;
@@ -1518,46 +856,82 @@ html[data-textdirection=rtl] .btn-next svg {
1518
856
  }
1519
857
  .r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row {
1520
858
  font-size: 13px;
859
+ transition: transform 0.05s linear;
860
+ will-change: transform;
861
+ backface-visibility: hidden;
1521
862
  }
1522
863
  .r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .cell-fixed {
1523
864
  position: sticky;
1524
865
  z-index: 1;
1525
866
  }
867
+ .r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .cell-fixed .r-rowcell.r-cell-selected-right {
868
+ margin-right: 1px;
869
+ }
870
+ .r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row.r-last-row .r-rowcell .r-rowcell-div {
871
+ border-bottom: 1px solid #e0e0e0;
872
+ }
1526
873
  .r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell {
1527
874
  background-color: #FFFFFF;
1528
875
  border-bottom: 1px solid #e0e0e0;
1529
- border-right: 1px dotted #e0e0e0;
876
+ border-right: 1px solid #e0e0e0;
1530
877
  vertical-align: middle;
1531
878
  padding: 0;
1532
879
  }
880
+ .r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell.r-cell-sum-group {
881
+ background-color: #fafafa;
882
+ }
883
+ .r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell.r-cell-sum-group .r-rowcell-div {
884
+ padding-left: 10px;
885
+ padding-right: 5px;
886
+ display: flex;
887
+ align-items: center;
888
+ background-color: #fafafa;
889
+ font-weight: 550;
890
+ }
891
+ .r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell.r-cell-group {
892
+ left: 0px;
893
+ position: sticky;
894
+ z-index: 1;
895
+ }
896
+ .r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell.r-cell-group .r-rowcell-div {
897
+ padding-left: 10px;
898
+ padding-right: 5px !important;
899
+ display: flex;
900
+ align-items: center;
901
+ background-color: #fafafa;
902
+ font-weight: 550;
903
+ }
904
+ .r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell.r-cell-group .r-rowcell-div svg {
905
+ margin-right: 10px;
906
+ cursor: pointer;
907
+ user-select: none;
908
+ transition: transform 0.2s ease-in-out;
909
+ }
910
+ .r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell.r-cell-group .r-rowcell-div svg:hover {
911
+ color: #eb4619;
912
+ }
913
+ .r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell.cell-fixed .r-rowcell-div.r-cell-selected-right {
914
+ padding-right: 1px;
915
+ }
1533
916
  .r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell.fix-right {
1534
- border-left: 1px dotted #e0e0e0;
917
+ border-left: 1px solid #e0e0e0;
1535
918
  }
1536
919
  .r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell.fix-right.fixed-last {
1537
- border-left: 2px solid #e0e0e0;
920
+ border-left: 1px solid #e0e0e0;
921
+ box-shadow: -2px 0 4px -1px rgba(0, 0, 0, 0.1);
1538
922
  }
1539
923
  .r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell.fix-left.fixed-last {
1540
- border-right: 2px solid #e0e0e0;
924
+ border-right: 1px solid #e0e0e0;
925
+ box-shadow: 2px 0 4px -1px rgba(0, 0, 0, 0.1);
1541
926
  }
1542
- .r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell.r-active {
927
+ .r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell.r-active-row {
1543
928
  background-color: #fce6df;
929
+ border-right: 2px solid #eb4619;
1544
930
  }
1545
931
  .r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div {
1546
- margin: 2px;
1547
- display: flex;
1548
- flex-direction: column;
1549
- }
1550
- .r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .r-icon-expand {
1551
- transition: transform 0.3s ease;
1552
- position: absolute;
1553
- left: 3px;
1554
- top: 8px;
1555
- }
1556
- .r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .r-icon-expand.is-open {
1557
- transform: rotate(90deg);
1558
- -moz-transform: rotate(90deg);
1559
- -webkit-transform: rotate(90deg);
1560
- -o-transform: rotate(90deg);
932
+ min-height: 28px !important;
933
+ border: 1px solid transparent;
934
+ position: relative;
1561
935
  }
1562
936
  .r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .arrow-context-menu {
1563
937
  position: absolute;
@@ -1578,57 +952,96 @@ html[data-textdirection=rtl] .btn-next svg {
1578
952
  .r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div.command {
1579
953
  padding-top: 0px;
1580
954
  }
1581
- .r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .r-rowcell-content {
1582
- min-height: 28px;
955
+ .r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div:focus {
956
+ outline: none;
957
+ /* bỏ viền focus mặc định */
1583
958
  }
1584
- .r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .r-rowcell-content .r-cell-text {
1585
- margin: 4.2px 7px;
1586
- font-size: 13px;
1587
- overflow-x: hidden;
1588
- text-overflow: ellipsis;
1589
- white-space: nowrap;
959
+ .r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div.r-cell-disable {
960
+ background-color: #f9f9f9;
961
+ }
962
+ .r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div.r-active-cell {
963
+ background-color: rgb(255, 240, 240);
1590
964
  }
1591
- .r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .r-rowcell-content .is-invalid {
1592
- border: 1px solid red;
965
+ .r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .r-cell-text:focus {
966
+ outline: none;
967
+ /* bỏ viền focus mặc định */
1593
968
  }
1594
- .r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .r-rowcell-content.r-is-invalid {
1595
- border: 1px solid red;
969
+ .r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .r-icon-invalid {
970
+ position: absolute;
971
+ width: 10px;
972
+ height: 10px;
973
+ top: 0px;
974
+ left: -6px;
975
+ rotate: -90deg;
976
+ }
977
+ .r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .r-drag-icon {
978
+ position: absolute;
979
+ border: 1px solid #FFFFFF;
980
+ bottom: -2px;
981
+ right: -2px;
982
+ width: 7px;
983
+ height: 7px;
984
+ background-color: #eb4619;
985
+ border-radius: 20%;
986
+ cursor: crosshair;
987
+ }
988
+ .r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .r-cell-text {
989
+ padding: 0px 7px;
1596
990
  display: flex;
1597
- justify-content: end;
991
+ align-items: center;
992
+ min-width: 0;
993
+ min-height: 28px;
994
+ flex: 1;
1598
995
  }
1599
- .r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .r-rowcell-content.r-is-invalid .r-cell-text {
1600
- padding-right: 9px;
1601
- display: inline;
996
+ .r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .r-cell-text .r-drop-icon {
997
+ position: absolute;
998
+ fill: #c4c4c4 !important;
999
+ right: 8.5px;
1000
+ top: 3.5px;
1001
+ cursor: pointer;
1602
1002
  }
1603
- .r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .r-rowcell-content.r-is-invalid .icon-table {
1604
- margin-right: 10px;
1605
- margin-top: 3.7px;
1003
+ .r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .is-invalid {
1004
+ border-width: 0px !important;
1606
1005
  }
1607
- .r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .r-rowcell-content.r-is-invalid .icon-table svg {
1608
- stroke-width: 2.2;
1006
+ .r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .is-invalid .r-select-is-invalid {
1007
+ border-width: 0px !important;
1609
1008
  }
1610
- .r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .r-rowcell-content .react-select-table.is-invalid {
1611
- border-width: 0px;
1009
+ .r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div.r-cell-selected-top {
1010
+ border-top: 1px solid #eb4619;
1011
+ }
1012
+ .r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div.r-cell-selected-bottom {
1013
+ border-bottom: 1px solid #eb4619;
1612
1014
  }
1613
- .r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .r-rowcell-content .react-select-table .select-table-control {
1015
+ .r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div.r-cell-selected-left {
1016
+ border-left: 1px solid #eb4619;
1017
+ }
1018
+ .r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div.r-cell-selected-right {
1019
+ border-right: 1px solid #eb4619;
1020
+ }
1021
+ .r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .r-datepicker .form-control {
1022
+ padding: 0px 4px;
1614
1023
  border-radius: 0px;
1615
1024
  border-width: 0px;
1616
1025
  }
1617
- .r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .r-rowcell-content .react-select-table .select-table-control.r-select-is-invalid {
1618
- border: 1px solid red;
1026
+ .r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .react-select-table.is-invalid {
1027
+ border-width: 0px;
1619
1028
  }
1620
- .r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .r-rowcell-content .react-select-table .select-table-control.r-select-is-focus {
1029
+ .r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .react-select-table .r-select-is-focus {
1030
+ border-width: 0px !important;
1031
+ }
1032
+ .r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .react-select-table .select-table-control {
1033
+ border-radius: 0px;
1034
+ border-width: 0px;
1035
+ }
1036
+ .r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .react-select-table .select-table-control.r-select-is-focus {
1621
1037
  border: 1px solid #1989fa;
1622
1038
  }
1623
- .r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .r-rowcell-content .form-edit .display-value {
1039
+ .r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .form-edit .display-value {
1624
1040
  cursor: pointer;
1625
1041
  border-radius: 0px;
1626
1042
  background-color: #FFFFFF;
1627
1043
  }
1628
- .r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .r-rowcell-content .form-edit .display-value.r-is-focus {
1629
- border: 1px solid #1989fa;
1630
- }
1631
- .r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .r-rowcell-content .form-edit .input-display {
1044
+ .r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .form-edit .input-display {
1632
1045
  border-width: 0px;
1633
1046
  box-sizing: border-box;
1634
1047
  border: none;
@@ -1636,40 +1049,42 @@ html[data-textdirection=rtl] .btn-next svg {
1636
1049
  outline: none;
1637
1050
  /* Loại bỏ outline khi input được chọn */
1638
1051
  }
1639
- .r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .r-rowcell-content .form-edit .form-input-content .form-control {
1052
+ .r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .form-edit .form-input-content .form-control {
1640
1053
  border-radius: 4px;
1641
1054
  }
1642
- .r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .r-rowcell-content .form-edit .form-input-content .form-control :focus {
1643
- border-radius: 4px;
1055
+ .r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .form-edit .form-input-content .form-control:focus {
1056
+ border: 1px solid #1989fa;
1057
+ outline: none;
1058
+ box-shadow: none;
1644
1059
  }
1645
- .r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .r-rowcell-content .form-edit input::placeholder {
1060
+ .r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .form-edit input::placeholder {
1646
1061
  color: #eb4619;
1647
1062
  opacity: 1;
1648
1063
  /* Firefox */
1649
1064
  }
1650
- .r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .r-rowcell-content .form-edit-inline .form__display {
1065
+ .r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .form-edit-inline .form__display {
1651
1066
  vertical-align: middle;
1652
1067
  }
1653
- .r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .r-rowcell-content .form-edit-inline .form__edit {
1068
+ .r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .form-edit-inline .form__edit {
1654
1069
  display: none;
1655
1070
  text-align: left;
1656
1071
  }
1657
- .r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .r-rowcell-content .form-edit-inline .form__edit.active {
1072
+ .r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .form-edit-inline .form__edit.active {
1658
1073
  display: flex;
1659
1074
  }
1660
- .r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .r-rowcell-content .form-edit-inline .form__edit .form-label {
1075
+ .r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .form-edit-inline .form__edit .form-label {
1661
1076
  font-size: 10px;
1662
1077
  margin-bottom: 0px;
1663
1078
  text-align: left;
1664
1079
  }
1665
- .r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .r-rowcell-content .form-edit-inline .form__edit .form-control {
1080
+ .r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .form-edit-inline .form__edit .form-control {
1666
1081
  border-radius: 0px;
1667
1082
  height: 23px;
1668
1083
  }
1669
- .r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .r-rowcell-content .form-edit-inline .form__edit .form__element {
1084
+ .r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .form-edit-inline .form__edit .form__element {
1670
1085
  margin: 0px 2px;
1671
1086
  }
1672
- .r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .r-rowcell-content .r-date-input {
1087
+ .r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .r-date-input {
1673
1088
  text-align: center;
1674
1089
  height: 29px;
1675
1090
  border: 1px solid #ccc;
@@ -1679,12 +1094,12 @@ html[data-textdirection=rtl] .btn-next svg {
1679
1094
  background-color: #f9f9f9;
1680
1095
  color: #333;
1681
1096
  }
1682
- .r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .r-rowcell-content .form-control:focus {
1097
+ .r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .form-control:focus {
1683
1098
  border-radius: 0px;
1684
- border: 1px solid #1989fa !important;
1099
+ border-width: 0px;
1685
1100
  background-color: #f8f8f8;
1686
1101
  }
1687
- .r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div .r-rowcell-content input {
1102
+ .r-table-edit .r-grid .r-gridtable .r-gridcontent .r-row .r-rowcell .r-rowcell-div input {
1688
1103
  font-size: 13px;
1689
1104
  }
1690
1105
  .r-table-edit .r-grid .r-gridtable .r-gridfoot {
@@ -1709,7 +1124,7 @@ html[data-textdirection=rtl] .btn-next svg {
1709
1124
  }
1710
1125
  .r-table-edit .r-grid .r-gridtable .r-gridfoot .r-row .r-footer .r-footer-div {
1711
1126
  height: 30px;
1712
- padding: 5px 7px;
1127
+ padding: 5px 0px;
1713
1128
  }
1714
1129
  .r-table-edit .r-grid .r-gridtable .formula-dropdown {
1715
1130
  box-shadow: rgba(0, 0, 0, 0.2) 0px 5px 15px;
@@ -1732,6 +1147,12 @@ html[data-textdirection=rtl] .btn-next svg {
1732
1147
  justify-content: space-between;
1733
1148
  align-items: center;
1734
1149
  }
1150
+ .r-table-edit .r-grid .r-toolbar .r-toolbar-items svg {
1151
+ cursor: pointer;
1152
+ }
1153
+ .r-table-edit .r-grid .r-toolbar .r-toolbar-items svg:hover {
1154
+ color: #eb4619;
1155
+ }
1735
1156
  .r-table-edit .r-grid .r-toolbar .r-toolbar-items .r-toolbar-left {
1736
1157
  display: flex;
1737
1158
  justify-content: flex-start;
@@ -1756,9 +1177,89 @@ html[data-textdirection=rtl] .btn-next svg {
1756
1177
  .r-table-edit .r-grid .r-toolbar .r-toolbar-items .r-toolbar-right .r-toolbar-item {
1757
1178
  margin: 7px 7px 7px 0px;
1758
1179
  }
1180
+ .r-table-edit .r-setting-container {
1181
+ margin: 0px 15px;
1182
+ }
1183
+ .r-table-edit .r-setting-container .r-setting-content {
1184
+ -webkit-overflow-scrolling: touch;
1185
+ overflow-x: auto;
1186
+ overflow-y: scroll;
1187
+ position: relative;
1188
+ background-color: #FFFFFF;
1189
+ color: rgba(0, 0, 0, 0.8705882353);
1190
+ font-weight: 400;
1191
+ border-left: 1px solid #e0e0e0;
1192
+ border-right: 1px solid #e0e0e0;
1193
+ /* Toàn bộ thanh cuộn */
1194
+ /* Nền của thanh cuộn */
1195
+ /* Thanh trượt (thumb) */
1196
+ /* Khi hover */
1197
+ }
1198
+ .r-table-edit .r-setting-container .r-setting-content::-webkit-scrollbar {
1199
+ width: 9px;
1200
+ /* Độ rộng của thanh cuộn */
1201
+ height: 9px;
1202
+ /* Độ cao của thanh cuộn */
1203
+ }
1204
+ .r-table-edit .r-setting-container .r-setting-content::-webkit-scrollbar-track {
1205
+ background: #FCFCFC;
1206
+ /* Màu nền nhạt */
1207
+ }
1208
+ .r-table-edit .r-setting-container .r-setting-content::-webkit-scrollbar-thumb {
1209
+ background: #8B8B8B;
1210
+ /* Màu xám nhạt */
1211
+ border-radius: 6px;
1212
+ /* Bo góc giống Edge */
1213
+ }
1214
+ .r-table-edit .r-setting-container .r-setting-content::-webkit-scrollbar-thumb:hover {
1215
+ background: #636363;
1216
+ /* Màu đậm hơn khi hover */
1217
+ }
1218
+ .r-table-edit .r-setting-container .r-setting-row {
1219
+ padding: 5px !important;
1220
+ margin: 0px;
1221
+ border-bottom: 1px solid #e0e0e0;
1222
+ font-size: 13px;
1223
+ display: flex;
1224
+ align-items: center;
1225
+ }
1226
+ .r-table-edit .r-setting-container .r-setting-row .r-setting-cell {
1227
+ padding-right: 10px;
1228
+ overflow: hidden;
1229
+ text-overflow: ellipsis;
1230
+ white-space: nowrap;
1231
+ }
1232
+ .r-table-edit .r-setting-container .r-setting-row .r-setting-cell .form-control {
1233
+ font-size: 13px !important;
1234
+ }
1235
+ .r-table-edit .r-setting-container .r-setting-row.r-setting-header {
1236
+ font-size: 12px !important;
1237
+ }
1238
+ .r-table-edit.r-virtualized-table {
1239
+ transition: top 0.25s ease, left 0.25s ease, width 0.25s ease, height 0.25s ease;
1240
+ }
1759
1241
  .r-table-edit.r-virtualized-table .r-row:hover .r-rowcell {
1760
1242
  background-color: #fce6df !important;
1761
1243
  }
1244
+ .r-table-edit.r-virtualized-table.is-maximized {
1245
+ position: fixed;
1246
+ inset: 0;
1247
+ width: 100vw;
1248
+ height: 100vh;
1249
+ z-index: 9999;
1250
+ background: #fff;
1251
+ }
1252
+ @keyframes zoomFeel {
1253
+ 0% {
1254
+ transform: scale(0.98);
1255
+ }
1256
+ 55% {
1257
+ transform: scale(1.02);
1258
+ }
1259
+ 100% {
1260
+ transform: scale(1);
1261
+ }
1262
+ }
1762
1263
  .r-table-edit .r-pager {
1763
1264
  border: 1px solid #e0e0e0;
1764
1265
  border-top-width: 0px;