es-grid-template 1.5.4 → 1.5.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,1347 +1,1351 @@
1
- $prefix: 'ui-rc' !default;
2
- $antdPrefix: 'ant' !default;
3
- $primary: #eb4619 !default;
4
- $rowHoverBg: #FBDED6 !default;
5
- $rowSelectedBg: #FEF2EF !default;
6
- //$tableBorderColor: red !default;
7
- $tableBorderColor: #e0e0e0 !default;
8
- //$tableBorderColor: #C4C4C4 !default;
9
- //$tableBorderColor: #f0f0f0 !default;
10
- $border-radius: 6px !default;
11
- $border-selected-color: #0550C5 !default;
12
- $body-color: #ffffff !default;
13
- //$cell-selected-bg: #E6EFFD !default;
14
- $cell-selected-bg: #F3F8FF !default;
15
- //$cell-index-selected-bg: #0550C5 !default;
16
- $cell-index-selected-bg: #1869E6 !default;
17
- //$cell-index-focus-bg: #CEDBEF !default;
18
- $cell-index-focus-bg: #E6EFFD !default;
19
- $rowSelectedHoverBg: 'ui-rc' !default;
20
- $boxShadowColor: rgba(5, 5, 5, 0.09) !default;
21
- $fontFamily: "Montserrat",Helvetica,Arial,serif !default;
22
-
23
- .react-hot-toast {
24
- font-size: 1rem;
25
- color: $body-color;
26
- letter-spacing: 0.14px;
27
- box-shadow: 0px 4px 10px -4px rgb(58 53 65 / 60%);
28
- border-radius: $border-radius;
29
- }
30
-
31
- .popup-context-menu {
32
- min-width: 200px;
33
-
34
- }
35
- .ant-dropdown-menu.popup-context-menu {
36
- .ant-dropdown-menu-submenu {
37
- .ant-dropdown-menu-submenu-title {
38
- align-items: center;
39
- }
40
- }
41
- }
42
-
43
- // -------------- Table -------------
44
-
45
- .#{$prefix}-table-wrapper {
46
-
47
- p {
48
- margin: 0;
49
- }
50
-
51
- .ui-rc-table {
52
- //font-family: $fontFamily;
53
- color: #000000de;
54
- //font-weight: 500;
55
- }
56
-
57
- .ui-rc-table {
58
- .#{$prefix}-table-cell {
59
- &.#{$prefix}-table-selection-column {
60
- //padding: 6px 8px !important;
61
- //padding: 6px 8px !important;
62
- }
63
- }
64
- }
65
-
66
-
67
- &.table-none-column-select {
68
- .#{$prefix}-table-cell {
69
- &.#{$prefix}-table-selection-column {
70
- padding: 0 !important;
71
- overflow: hidden !important;
72
- border-inline-end: 0 !important;
73
- //flex: 0 0 0 !important;
74
- //width: 0 !important;
75
- }
76
- }
77
- }
78
-
79
- .#{$prefix}-table {
80
- &.ui-rc-table-scroll-horizontal {
81
-
82
- .ui-rc-table-container {
83
-
84
- .#{$prefix}-table-tbody-virtual {
85
-
86
- .ui-rc-table-tbody-virtual-scrollbar.ui-rc-table-tbody-virtual-scrollbar-horizontal {
87
- visibility: visible !important;
88
- bottom: -8px !important;
89
- z-index: 5 !important;
90
- background-color: #f0f0f0;
91
- }
92
-
93
- }
94
-
95
- &:has(.ui-rc-table-summary) {
96
-
97
- .#{$prefix}-table-tbody-virtual {
98
-
99
- .ui-rc-table-tbody-virtual-scrollbar.ui-rc-table-tbody-virtual-scrollbar-horizontal {
100
- visibility: visible !important;
101
- //bottom: -40px !important;
102
- bottom: -47px !important;
103
- z-index: 5 !important;
104
-
105
- }
106
-
107
- }
108
-
109
- }
110
-
111
- }
112
-
113
-
114
-
115
- }
116
- }
117
- .#{$prefix}-table {
118
-
119
- //line-height: 20px;
120
-
121
- .#{$prefix}-table-cell {
122
- //min-height: 35px;
123
- //height: 35px;
124
-
125
- .#{$prefix}-table-filter-column {
126
- .#{$prefix}-dropdown-trigger.#{$prefix}-table-filter-trigger {
127
- margin-left: 0;
128
- }
129
- }
130
-
131
- &.cell-group {
132
- font-weight: 600;
133
- background-color: #f5f5f5;
134
- border-inline-end-color: transparent !important;
135
-
136
- }
137
- &.cell-group-fixed {
138
- font-weight: 600;
139
- position: sticky;
140
- text-align: left !important;
141
- left: 0;
142
- z-index: 15;
143
- }
144
-
145
- }
146
-
147
- }
148
-
149
- .#{$prefix}-table-tbody-virtual {
150
- .#{$prefix}-table-cell {
151
- border-bottom: 1px solid $tableBorderColor;
152
- }
153
- }
154
-
155
- .#{$prefix}-table-bordered {
156
-
157
- .#{$prefix}-table-tbody-virtual {
158
- .#{$prefix}-table-cell {
159
- //display: flex;
160
- border-inline-end: 1px solid $tableBorderColor;
161
- }
162
- }
163
- .#{$prefix}-table-container {
164
- .#{$prefix}-table-thead {
165
-
166
- > tr{
167
- > th.#{$prefix}-table-cell:last-of-type {
168
- //border-inline-end: 0;
169
- }
170
- }
171
-
172
- }
173
- .#{$prefix}-table-summary {
174
- > tr{
175
- > td.#{$prefix}-table-cell:last-of-type {
176
- //border-inline-end: 0;
177
- }
178
- }
179
- }
180
- }
181
-
182
- }
183
-
184
- .#{$prefix}-table-tbody {
185
-
186
-
187
- .#{$prefix}-table-cell {
188
- line-height: 22px;
189
- &:focus-visible {
190
- outline: none;
191
- }
192
-
193
-
194
- &.disable {
195
- background-color: #f0f0f0;
196
- }
197
-
198
- //&.selected {
199
- // //background: red;
200
- // background-color: $cell-selected-bg !important;
201
- //}
202
- &.selected-bg {
203
- //background: red;
204
- background-color: $cell-selected-bg !important;
205
- }
206
-
207
- .ui-rc-table-cell-content {
208
- line-height: 22px;
209
- }
210
-
211
- &.#{$prefix}-table-cell-fix-left-last {
212
- .#{$prefix}-table-cell-content {
213
- }
214
- }
215
-
216
- }
217
-
218
- .#{$prefix}-table-row {
219
-
220
- &.#{$prefix}-table-row-selected {
221
- > .#{$prefix}-table-cell {
222
- background: #FEF2EF;
223
- }
224
- }
225
-
226
- &.row-disabled {
227
- .#{$prefix}-table-cell {
228
- //background-color: #f5f5f5;
229
- }
230
- }
231
-
232
- > .#{$prefix}-table-cell {
233
- &.#{$prefix}-table-cell-row-hover {
234
- background: #FBDED6;
235
- }
236
-
237
- &.#{$prefix}-cell-command {
238
- padding: 5px 8px;
239
-
240
- .#{$prefix}-cell-command__content {
241
- display: flex;
242
- gap: 5px;
243
- overflow: hidden;
244
- }
245
- }
246
-
247
-
248
- }
249
-
250
- .#{$prefix}-table-cell:last-of-type {
251
- //border-inline-end: 0;
252
- }
253
-
254
-
255
- @for $i from 0 through 10 {
256
- &:has(.indent-level-#{$i}) {
257
- .#{$prefix}-table-cell {
258
- &.cell-number {
259
- .ui-rc_content {
260
- padding-left: $i * 10px;
261
- }
262
- }
263
- }
264
- }
265
- }
266
-
267
- }
268
-
269
- .#{$prefix}-table-placeholder {
270
- .#{$prefix}-table-cell {
271
- padding-top: 0 !important;
272
- padding-bottom: 0 !important;
273
- .#{$prefix}-table-expanded-row-fixed {
274
- margin-top: 0 !important;
275
- margin-bottom: 0 !important;
276
- }
277
- }
278
- }
279
- }
280
-
281
- .#{$prefix}-table-thead {
282
- //font-weight: 400;
283
-
284
- > tr {
285
- > th,
286
- > td {
287
- border-bottom: 1px solid $tableBorderColor;
288
- //background: #fff;
289
- font-weight: 500;
290
- //line-height: 23px;
291
- //height: 40px;
292
- }
293
- }
294
-
295
- .#{$prefix}-table-cell {
296
-
297
- .ui-rc-table-column-sorter{
298
- line-height: normal !important;
299
- }
300
-
301
- &:hover {
302
- .ui-rc-table-column-sorter-up.active {
303
- opacity: 1 !important;
304
- }
305
- }
306
-
307
- .ui-rc-table-cell-content {
308
- line-height: 22px;
309
- }
310
-
311
- &.#{$prefix}-table-cell-fix-left-last {
312
- .#{$prefix}-table-cell-content {
313
- //overflow: visible;
314
- }
315
- }
316
- .#{$prefix}-table-column-title {
317
- //display: flex;
318
- }
319
-
320
- &.head-align-center {
321
- text-align: center;
322
- }
323
- &.head-align-right {
324
- text-align: right;
325
- }
326
- }
327
- }
328
-
329
- .#{$prefix}-table-summary {
330
- .#{$prefix}-table-cell {
331
- background-color: #fafafa;
332
- height: 39px;
333
- font-weight: 600;
334
- }
335
-
336
- > tr > td {
337
- border-bottom: 1px solid $tableBorderColor;
338
- }
339
- }
340
-
341
- //.#{$prefix}-table-bordered .#{$prefix}-table-tbody-virtual .#{$prefix}-table-cell.#{$prefix}-table-cell-fix-right-first:before {
342
- // border-inline-start: 1px solid $tableBorderColor;
343
- //}
344
-
345
- .#{$prefix}-table-bordered .#{$prefix}-table-tbody-virtual .#{$prefix}-table-cell.#{$prefix}-table-cell-fix-right-first {
346
- &::before {
347
- border-inline-start: 1px solid $tableBorderColor;
348
- }
349
- &.has-before::before {
350
- border-inline-start: 1px solid $border-selected-color;
351
- }
352
- &.cell-border-left.selected-bg::before {
353
- border-inline-start: 1px solid $border-selected-color;
354
- }
355
- }
356
-
357
-
358
-
359
- .#{$prefix}-table {
360
-
361
- &.#{$prefix}-table-bordered {
362
- > .#{$prefix}-table-container {
363
- border-inline-start: 1px solid $tableBorderColor;
364
- border-top: 1px solid $tableBorderColor;
365
-
366
- &::after {
367
- border-inline-end: 1px solid $tableBorderColor;
368
- }
369
-
370
- > .#{$prefix}-table-content,
371
- > .#{$prefix}-table-header,
372
- > .#{$prefix}-table-body,
373
- > .#{$prefix}-table-summary {
374
- > table {
375
- > thead {
376
- > tr:not(:last-child) {
377
- > th {
378
- border-bottom: 1px solid $tableBorderColor;
379
- }
380
- }
381
- }
382
- }
383
- }
384
-
385
-
386
- > .#{$prefix}-table-content,
387
- > .#{$prefix}-table-header,
388
- > .#{$prefix}-table-body,
389
- > .#{$prefix}-table-summary {
390
- > table {
391
- > thead,
392
- > tbody,
393
- > tfoot {
394
- > tr {
395
- > th,
396
- > td {
397
- border-inline-end: 1px solid $tableBorderColor;
398
- }
399
- }
400
- }
401
- }
402
- }
403
-
404
- }
405
-
406
- > .#{$prefix}-table-title {
407
- border: 1px solid $tableBorderColor;
408
- border-bottom: 0;
409
- }
410
- }
411
-
412
- &.#{$prefix}-table-ping-right:not(.#{$prefix}-table-has-fix-right) .#{$prefix}-table-container::after {
413
- box-shadow: inset -10px 0 8px -8px $boxShadowColor;
414
- //box-shadow: none;
415
- }
416
-
417
-
418
- }
419
-
420
- .#{$prefix}-table-ping-left {
421
- .#{$prefix}-table-cell-fix-left-first::after,
422
- .#{$prefix}-table-cell-fix-left-last::after {
423
- box-shadow: inset 10px 0 8px -8px $boxShadowColor;
424
- }
425
- }
426
-
427
- .#{$prefix}-table-ping-right {
428
- .#{$prefix}-table-cell-fix-right-first::after,
429
- .#{$prefix}-table-cell-fix-right-last::after {
430
- box-shadow: inset -10px 0 8px -8px $boxShadowColor;
431
- }
432
- }
433
-
434
-
435
- .#{$prefix}-table.#{$prefix}-table-bordered {
436
- > .#{$prefix}-table-container {
437
- > .#{$prefix}-table-header > table > thead > tr,
438
- > .#{$prefix}-table-summary > table > tfoot > tr {
439
- > .#{$prefix}-table-cell-fix-right-first::before {
440
- border-inline-start: 1px solid $tableBorderColor;
441
- content: "";
442
- position: absolute;
443
- inset-block: 0;
444
- inset-inline-start: -1px;
445
- }
446
- }
447
- }
448
- }
449
-
450
-
451
- }
452
-
453
- // -------------- Table edit-------------
454
-
455
- .#{$prefix}-table-wrapper {
456
-
457
- .#{$prefix}-table.#{$prefix}-table-small {
458
- .ui-rc-table-thead {
459
- >tr >th.#{$prefix}-table-selection-column{
460
- //padding-block: 7px;
461
- padding: 0;
462
- //padding: 6px 8px;
463
- }
464
- }
465
- //.#{$prefix}-table-selection-column{
466
- // padding-block: 7px;
467
- // padding: 0;
468
- // //padding: 6px 8px;
469
- //}
470
- }
471
-
472
- &.grid-editable {
473
-
474
- .#{$prefix}-table-row {
475
- &:has(+ .#{$prefix}-table-cell) {
476
-
477
- }
478
- }
479
-
480
- .#{$prefix}-table .#{$prefix}-table-tbody .rc-ui-cell-editable {
481
- overflow: unset;
482
- display: flex;
483
- height: 37px;
484
- //--------
485
- padding: 0;
486
-
487
- .#{$prefix}-table-row-expand-icon {
488
- top: 8px;
489
- left: 8px;
490
- }
491
-
492
- &.rc-ui-cell-index {
493
- &.focus {
494
- background-color: $cell-index-focus-bg;
495
- //font-weight: 500;
496
- }
497
- &.selected-index {
498
- background-color: $cell-index-selected-bg !important;
499
- color: #fff;
500
- //font-weight: 500;
501
- }
502
- }
503
-
504
- &.cell-editable {
505
-
506
- &.cell-border-top {
507
- //border-bottom: 1px solid $border-selected-color;
508
- &::after {
509
- content: "";
510
- position: absolute;
511
- top: -1px;
512
- left: 0;
513
- //right: 0;
514
- //bottom: 0;
515
- height: 1px;
516
- width: 100%;
517
- border-top: 1px solid $border-selected-color; /* line đè lên border gốc */
518
- pointer-events: none; /* không ảnh hưởng đến tương tác */
519
- z-index: 1;
520
- }
521
- &.ui-rc-table-cell-fix-left.ui-rc-table-cell-fix-left-last {
522
- &::after {
523
- left: -100%;
524
- }
525
- }
526
- &.ui-rc-table-cell-fix-right.ui-rc-table-cell-fix-right-first {
527
- &::after {
528
- left: 100%;
529
- }
530
- }
531
- }
532
-
533
- &.cell-border-bottom {
534
- border-bottom: 1px solid $border-selected-color;
535
- //position: relative;
536
- //&::before {
537
- // content: "";
538
- // position: absolute;
539
- // //top: 0;
540
- // left: 0;
541
- // //right: 0;
542
- // bottom: 0;
543
- // height: 1px;
544
- // width: 100%;
545
- // border: 1px solid red; /* line đè lên border gốc */
546
- // pointer-events: none; /* không ảnh hưởng đến tương tác */
547
- // z-index: 1;
548
- //}
549
-
550
- }
551
-
552
- &.cell-border-left {
553
- //overflow: hidden;
554
- //border-inline-end: 1px solid $border-selected-color;
555
- &::before {
556
- content: "";
557
- position: absolute;
558
- top: 0;
559
- left: 0;
560
- //right: 0;
561
- //bottom: 0;
562
- height: 102%;
563
- width: 1px;
564
- border-left: 1px solid $border-selected-color; /* line đè lên border gốc */
565
- pointer-events: none; /* không ảnh hưởng đến tương tác */
566
- z-index: 1;
567
- }
568
- }
569
-
570
- &.cell-border-right {
571
- border-inline-end: 1px solid $border-selected-color;
572
- //&::before {
573
- // content: "";
574
- // position: absolute;
575
- // top: 0;
576
- // //left: 0;
577
- // right: 0;
578
- // //bottom: 0;
579
- // height: 100%;
580
- // width: 1px;
581
- // border: 1px solid red; /* line đè lên border gốc */
582
- // pointer-events: none; /* không ảnh hưởng đến tương tác */
583
- // z-index: 1;
584
- //}
585
- }
586
-
587
- &.cell-paste-border-top {
588
- border-bottom: 1px dashed #949494;
589
- }
590
-
591
- &.cell-paste-border-bottom {
592
- border-bottom: 1px dashed #949494;
593
- }
594
-
595
- &.cell-paste-border-left {
596
- border-inline-end: 1px dashed #949494;
597
- }
598
-
599
- &.cell-paste-border-right {
600
- border-inline-end: 1px dashed #949494;
601
- }
602
-
603
-
604
- &.#{$prefix}-table-cell-fix-left {
605
- &:has(.ui-rc_cell-content.selected) {
606
- }
607
-
608
- }
609
-
610
- &.#{$prefix}-table-cell-fix-right {
611
- &:has(.ui-rc_cell-content.selected) {
612
- }
613
-
614
- &.cell-border-end {
615
- z-index: 3;
616
- }
617
-
618
- }
619
-
620
-
621
- &.cell-border-end {
622
- z-index: 1;
623
- }
624
-
625
- &.#{$prefix}-table-cell-fix-right-first {
626
-
627
- &.cell-border-end {
628
- z-index: 3;
629
- }
630
-
631
- &.next-cell-border-left {
632
- &::before {
633
- border-inline-start: 1px solid $border-selected-color;
634
- }
635
- }
636
-
637
-
638
- &.next-cell-paste-border-left {
639
- &::before {
640
- border-inline-start: 1px dashed #949494;
641
- }
642
- }
643
-
644
- &.fixed-cell-border-left {
645
- &::before {
646
- border-inline-start: 1px solid $border-selected-color;
647
- }
648
- }
649
- &.fixed-cell-paste-border-left {
650
- &::before {
651
- border-inline-start: 1px dashed #949494;
652
- }
653
- }
654
-
655
- }
656
-
657
- &.#{$prefix}-table-cell-fix-left-last {
658
-
659
- &.cell-border-end {
660
- z-index: 3;
661
- }
662
-
663
- }
664
-
665
- }
666
-
667
-
668
- }
669
-
670
- .#{$prefix}-table.#{$prefix}-table-ping-left {
671
- .#{$prefix}-table-tbody .rc-ui-cell-editable{
672
- &.cell-editable {
673
-
674
-
675
- &.#{$prefix}-table-cell-fix-left-last {
676
-
677
- //&.cell-border-left {
678
- // border-inline-end: 1px solid $tableBorderColor;
679
- //}
680
-
681
- }
682
-
683
-
684
-
685
- }
686
- }
687
-
688
- &:not(.#{$prefix}-table.#{$prefix}-table-ping-right) {
689
-
690
- .#{$prefix}-table-tbody .rc-ui-cell-editable {
691
- &.cell-editable {
692
-
693
- // //&.cell-border-end {
694
- // // z-index: 1;
695
- // //}
696
-
697
- &.#{$prefix}-table-cell-fix-right {
698
- z-index: 0 !important;
699
-
700
- &:has(.dragging-point.show) {
701
- z-index: 3 !important;
702
- }
703
-
704
- &.cell-border-end {
705
- z-index: 3;
706
- }
707
- }
708
-
709
- }
710
- }
711
-
712
- }
713
-
714
- }
715
-
716
- .#{$prefix}-table.#{$prefix}-table-ping-right {
717
- .#{$prefix}-table-tbody .rc-ui-cell-editable{
718
-
719
- &.cell-editable {
720
-
721
- &.#{$prefix}-table-cell-fix-right-first {
722
-
723
- &.next-cell-border-left {
724
- &::before {
725
- border-inline-start: 1px solid $tableBorderColor;
726
- }
727
- }
728
-
729
-
730
-
731
- }
732
-
733
- &.#{$prefix}-table-cell-fix-left-last {
734
- &.cell-border-end {
735
- z-index: 3;
736
- }
737
- }
738
-
739
- }
740
-
741
- &.cell-border-end {
742
- z-index: 1;
743
- }
744
-
745
- }
746
-
747
- }
748
-
749
-
750
- .#{$prefix}-table.#{$prefix}-table-small {
751
- .#{$prefix}-table-thead > tr > th,
752
- tfoot > tr > th,
753
- tfoot > tr > td,
754
- tfoot > tr > td.#{$prefix}-table-cell
755
- {
756
- //padding: 8px 8px;
757
- }
758
- }
759
-
760
- .#{$prefix}-table.#{$prefix}-table-small {
761
- .#{$prefix}-table-selection-column{
762
- //padding: 8px 8px;
763
- //padding: 6px 8px;
764
- }
765
- }
766
-
767
- .ui-rc_cell-content {
768
- user-select: none;
769
- //padding: 7px 8px;
770
- padding: 2px 8px;
771
- display: flex;
772
- align-items: center;
773
- overflow: hidden;
774
-
775
- .ui-rc_content {
776
- width: 100%;
777
- }
778
- &:hover {
779
- .dragging-point {
780
- //visibility: visible;
781
- }
782
- }
783
-
784
- .dragging-point {
785
- //visibility: hidden;
786
- width: 10px;
787
- height: 10px;
788
- position: absolute;
789
- cursor: crosshair;
790
- right: -1px;
791
- bottom: -1px;
792
- //background: red;
793
-
794
- &.hidden {
795
- display: none;
796
- }
797
-
798
- .dot-point {
799
- position: absolute;
800
- width: 8px;
801
- height: 8px;
802
- border-radius: 6px;
803
- background-color: $border-selected-color;
804
- bottom: -3px;
805
- right: -3px;
806
- }
807
-
808
- }
809
- }
810
-
811
- .ui-rc_cell-content.selected {
812
- background-color: $cell-selected-bg;
813
- }
814
- .ui-rc_cell-content {
815
- //position: relative;
816
- &.isValid {
817
- &::after {
818
- content: "";
819
- position: absolute;
820
- top: 0;
821
- right: 0;
822
- width: 0;
823
- height: 0;
824
- border-top: 0 solid transparent;
825
- border-right: 8px solid red;
826
- border-bottom: 8px solid transparent;
827
- }
828
- }
829
- }
830
-
831
- //.ui-rc_cell-content.disable {
832
- // background-color: #f0f0f0;
833
- //}
834
-
835
- //.ui-rc_cell-content--index {
836
- // &.focus {
837
- // background-color: $cell-index-focus-bg;
838
- // //color: #fff;
839
- // //font-weight: 500;
840
- // }
841
- // &.selected {
842
- // background-color: $cell-index-selected-bg;
843
- // color: #fff;
844
- // //font-weight: 500;
845
- // }
846
- //}
847
-
848
- .#{$prefix}-table-tbody {
849
-
850
- .#{$prefix}-table-row {
851
- &.#{$prefix}-table-row-selected {
852
- >.#{$prefix}-table-cell {
853
- //background: #FEF2EF;
854
- }
855
- }
856
- >.#{$prefix}-table-cell {
857
- &.#{$prefix}-table-cell-row-hover {
858
- //background: #FBDED6;
859
- }
860
- }
861
-
862
- .#{$prefix}-table-cell {
863
-
864
- .#{$prefix}-table-row-indent {
865
- position: absolute;
866
- @for $i from 1 through 10 {
867
- &.indent-level-#{$i} {
868
- padding-left: $i * 25px;;
869
- }
870
- }
871
- }
872
-
873
- @for $i from 0 through 10 {
874
- &:has(.indent-level-#{$i}) {
875
-
876
- .#{$prefix}-table-row-expand-icon {
877
- position: absolute;
878
- //.ui-rc_content {
879
- //padding-left: $i * 10px;
880
- //}
881
- }
882
-
883
- .ui-rc_cell-content {
884
- padding-left: $i * 25px + 8px;
885
- }
886
-
887
- }
888
- }
889
-
890
- @for $i from 0 through 10 {
891
- &:has(.indent-level-#{$i}) {
892
-
893
- .#{$prefix}-table-row-expand-icon {
894
- position: absolute;
895
- left: $i * 25px + 8px !important;
896
- }
897
-
898
- .ui-rc_cell-content {
899
- padding-left: ($i + 1)* 25px + 8px;
900
- }
901
-
902
- }
903
- }
904
- }
905
- }
906
-
907
-
908
- .#{$prefix}-table-cell{
909
-
910
- &.#{$prefix}-table-cell-ellipsis {
911
- .ui-rc_cell-content {
912
-
913
- .ui-rc_content {
914
- text-overflow: ellipsis;
915
- text-decoration: none;
916
- transition: 0.3s;
917
- white-space: nowrap;
918
- overflow: hidden;
919
- line-height: 22px;
920
- }
921
- }
922
- }
923
-
924
- &.cell-editing {
925
- //padding: 0 !important;
926
- &:focus-visible {
927
- outline: none;
928
- }
929
- .ant-form-item ,
930
- .ant-row.ant-form-item-row,
931
- .ant-col.ant-form-item-control,
932
- .ant-form-item-control-input,
933
- .ant-form-item-control-input-content,
934
- .ant-input{
935
- height: 100%;
936
- &:focus-visible {
937
- outline: none;
938
- }
939
- }
940
-
941
- .#{$prefix}-checkbox-wrapper {
942
- .#{$prefix}-checkbox {
943
- background-color: red;
944
- }
945
- .#{$prefix}-checkbox-input {
946
- &:focus-visible {
947
- outline: none;
948
- }
949
- }
950
- }
951
-
952
-
953
- .ant-input, .ant-picker{
954
- border-radius: 0;
955
- }
956
-
957
- // color picker
958
-
959
- .ant-color-picker-trigger{
960
- height: 100%;
961
- border-radius: 0;
962
- .ant-color-picker-color-block {
963
- height: 100%;
964
- width: 100%;
965
- }
966
-
967
- }
968
-
969
-
970
- // ------------ select ---------------
971
-
972
- .#{$prefix}-table-select-single .#{$prefix}-table-select-selector,
973
- .#{$prefix}-select-single .#{$prefix}-select-selector {
974
-
975
- border-radius: 0;
976
-
977
- }
978
-
979
- .#{$prefix}-table-select-single:not(.#{$prefix}-table-select-customize-input) {
980
- .#{$prefix}-table-select-selector {
981
- .#{$prefix}-table-select-selection-search-input {
982
- height: auto;
983
- }
984
- }
985
- }
986
-
987
- // ------------ select ---------------
988
-
989
-
990
- }
991
- &.cell-editable {
992
- &:focus-visible {
993
- outline: none;
994
- }
995
- }
996
- .#{$prefix}-table-cell-content {
997
- display: flex;
998
- height: 100%;
999
- }
1000
-
1001
- .ui-rc_cell-content,
1002
- .#{$prefix}-table-cell-content{
1003
- //width: 100%;
1004
- flex: 1;
1005
- }
1006
- .ui-rc_content {
1007
- //padding: 5px 8px;
1008
- }
1009
- .ui-rc_content:has(.ant-color-picker-trigger) {
1010
- padding: 1px 8px;
1011
- }
1012
- }
1013
- }
1014
-
1015
- }
1016
-
1017
- }
1018
- // ---------------- Table edit end---------------
1019
-
1020
-
1021
- // -------------- Checkbox ----------
1022
-
1023
- .#{$prefix}-checkbox-indeterminate {
1024
- &:hover {
1025
- .#{$prefix}-checkbox-inner {
1026
- border-color: $primary !important;;
1027
- }
1028
- }
1029
-
1030
- .#{$prefix}-checkbox-inner {
1031
- &:after {
1032
- background-color: $primary;
1033
- }
1034
- }
1035
- }
1036
- //.#{$prefix}-checkbox-input {
1037
- // &:focus-visible {
1038
- // outline: none;
1039
- // }
1040
- //}
1041
-
1042
- .#{$prefix}-checkbox .#{$prefix}-checkbox-input:focus-visible+.#{$prefix}-checkbox-inner {
1043
- outline: none;
1044
- }
1045
-
1046
- .#{$prefix}-checkbox {
1047
- &.#{$prefix}-checkbox-checked {
1048
- &:hover {
1049
- .#{$prefix}-checkbox-inner {
1050
- background-color: $primary;
1051
- border-color: $primary;
1052
- }
1053
- }
1054
-
1055
- .#{$prefix}-checkbox-inner {
1056
- background-color: $primary;
1057
- border-color: $primary;
1058
- }
1059
- }
1060
- }
1061
-
1062
- .#{$prefix}-checkbox:not(.#{$prefix}-checkbox-disabled):hover {
1063
- .#{$prefix}-checkbox-inner {
1064
- border-color: $primary;
1065
- }
1066
- }
1067
-
1068
- .#{$prefix}-checkbox-wrapper:not(.#{$prefix}-checkbox-wrapper-disabled):hover {
1069
- .#{$prefix}-checkbox-inner {
1070
- border-color: $primary;
1071
- }
1072
-
1073
- .#{$prefix}-checkbox-checked:not(.#{$prefix}-checkbox-disabled) {
1074
- .#{$prefix}-checkbox-inner {
1075
- background-color: $primary;
1076
- }
1077
- }
1078
- }
1079
-
1080
- // ------------ Tree ---------------
1081
-
1082
- .#{$prefix}-tree {
1083
- .#{$prefix}-tree-checkbox-checked {
1084
- .#{$prefix}-tree-checkbox-inner {
1085
- background-color: $primary;
1086
- border-color: $primary;
1087
- }
1088
- }
1089
-
1090
- .#{$prefix}-tree-checkbox-wrapper-checked:not(.#{$prefix}-tree-checkbox-wrapper-disabled):hover,
1091
- .#{$prefix}-tree-checkbox-checked:not(.#{$prefix}-tree-checkbox-disabled):hover {
1092
- .#{$prefix}-tree-checkbox-inner {
1093
- background-color: $primary;
1094
- }
1095
- }
1096
-
1097
- .#{$prefix}-tree-checkbox-wrapper:not(.#{$prefix}-tree-checkbox-wrapper-disabled):hover,
1098
- .#{$prefix}-tree-checkbox:not(.#{$prefix}-tree-checkbox-disabled):hover {
1099
- .#{$prefix}-tree-checkbox-inner {
1100
- border-color: $primary;
1101
- }
1102
- }
1103
- }
1104
-
1105
-
1106
- // ------------ ant Tree ---------------
1107
-
1108
- .#{$antdPrefix}-tree {
1109
- .#{$antdPrefix}-tree-checkbox-checked {
1110
- .#{$antdPrefix}-tree-checkbox-inner {
1111
- background-color: $primary;
1112
- border-color: $primary;
1113
- }
1114
- }
1115
-
1116
- .#{$antdPrefix}-tree-checkbox-wrapper-checked:not(.#{$antdPrefix}-tree-checkbox-wrapper-disabled):hover,
1117
- .#{$antdPrefix}-tree-checkbox-checked:not(.#{$antdPrefix}-tree-checkbox-disabled):hover {
1118
- .#{$antdPrefix}-tree-checkbox-inner {
1119
- background-color: $primary;
1120
- }
1121
- }
1122
-
1123
- .#{$antdPrefix}-tree-checkbox-wrapper:not(.#{$antdPrefix}-tree-checkbox-wrapper-disabled):hover,
1124
- .#{$antdPrefix}-tree-checkbox:not(.#{$antdPrefix}-tree-checkbox-disabled):hover {
1125
- .#{$antdPrefix}-tree-checkbox-inner {
1126
- border-color: $primary;
1127
- }
1128
- }
1129
- }
1130
-
1131
-
1132
- // ------------ paging ---------------
1133
-
1134
- .#{$prefix}-table-wrapper .#{$prefix}-table-pagination.#{$prefix}-pagination {
1135
- margin: 0;
1136
- }
1137
-
1138
- .#{$prefix}-table-wrapper {
1139
- .#{$prefix}-table {
1140
- .#{$prefix}-pagination {
1141
- &::before {
1142
- content: "";
1143
- position: absolute;
1144
- border-left: 1px solid $tableBorderColor;
1145
- height: 55px;
1146
- bottom: 0;
1147
- left: 0;
1148
- }
1149
-
1150
- &::after {
1151
- content: "";
1152
- position: absolute;
1153
- border-left: 1px solid $tableBorderColor;
1154
- height: 55px;
1155
- bottom: 0;
1156
- visibility: visible;
1157
- right: 0;
1158
- }
1159
-
1160
- &.top-pagination {
1161
- border: none;
1162
- padding-top: 0;
1163
- padding-bottom: 0;
1164
- .#{$prefix}-pagination-total-text {
1165
- margin-left: auto;
1166
- }
1167
- }
1168
- border-bottom: 1px solid $tableBorderColor;
1169
-
1170
- }
1171
- }
1172
- }
1173
-
1174
-
1175
- .#{$prefix}-pagination {
1176
-
1177
- .#{$prefix}-pagination-total-text {
1178
- white-space: nowrap;
1179
- }
1180
-
1181
- .#{$prefix}-pagination-item-active {
1182
- border-color: $primary;
1183
-
1184
- &:hover {
1185
- border-color: $primary;
1186
-
1187
- a {
1188
- color: $primary;
1189
- }
1190
- }
1191
-
1192
- a {
1193
- color: $primary;
1194
- }
1195
- }
1196
-
1197
- .#{$prefix}-pagination-jump-prev, .#{$prefix}-pagination-jump-next {
1198
- .#{$prefix}-pagination-item-container {
1199
- .#{$prefix}-pagination-item-link-icon {
1200
- color: $primary;
1201
- }
1202
- }
1203
- }
1204
- }
1205
-
1206
-
1207
-
1208
- //.#{$prefix}-table-wrapper .#{$prefix}-table.#{$prefix}-table-bordered >.#{$prefix}-table-container >.#{$prefix}-table-content >table >tbody>tr>td >.#{$prefix}-table-expanded-row-fixed {
1209
- // border-inline-end: 1px solid $tableBorderColor;
1210
- //}
1211
- //
1212
- //.#{$prefix}-table-wrapper .#{$prefix}-table.#{$prefix}-table-bordered >.#{$prefix}-table-container >.#{$prefix}-table-content >table >tbody>tr>td >.#{$prefix}-table-expanded-row-fixed::after {
1213
- // //border-inline-end: 1px solid $tableBorderColor;
1214
- // border-inline-end: 0 solid $tableBorderColor;
1215
- //}
1216
- //
1217
- //
1218
- //.#{$prefix}-table-wrapper .#{$prefix}-table.#{$prefix}-table-bordered.#{$prefix}-table-small >.#{$prefix}-table-container >.#{$prefix}-table-body >table>tbody>tr>td >.#{$prefix}-table-expanded-row-fixed {
1219
- // margin-top: 0;
1220
- // margin-bottom: 0;
1221
- // border-inline-end: 1px solid $tableBorderColor;
1222
- //}
1223
- //
1224
- //.#{$prefix}-table-wrapper .#{$prefix}-table.#{$prefix}-table-bordered.#{$prefix}-table-small >.#{$prefix}-table-container >.#{$prefix}-table-body >table>tbody>tr>td >.#{$prefix}-table-expanded-row-fixed::after {
1225
- // border-inline-end: 0 solid $tableBorderColor;
1226
- //}
1227
-
1228
-
1229
- .#{$prefix}-table-wrapper {
1230
- .#{$prefix}-table {
1231
- &.#{$prefix}-table-bordered {
1232
- > .#{$prefix}-table-container {
1233
- > .#{$prefix}-table-content,
1234
- > .#{$prefix}-table-header,
1235
- > .#{$prefix}-table-body,
1236
- > .#{$prefix}-table-summary {
1237
- > table > tbody > tr {
1238
- > th,
1239
- > td {
1240
- > .#{$prefix}-table-expanded-row-fixed::after {
1241
- // Thêm CSS đây
1242
- }
1243
- }
1244
- }
1245
- }
1246
- }
1247
- }
1248
- }
1249
- }
1250
-
1251
-
1252
- .#{$prefix}-table-wrapper {
1253
- .#{$prefix}-table.#{$prefix}-table-small {
1254
- .#{$prefix}-table-title,
1255
- .#{$prefix}-table-footer,
1256
- .#{$prefix}-table-cell,
1257
- .#{$prefix}-table-thead > tr > th,
1258
- .#{$prefix}-table-tbody > tr > th,
1259
- .#{$prefix}-table-tbody > tr > td,
1260
- tfoot > tr > th,
1261
- tfoot > tr > td {
1262
- //padding: 8px 8px;
1263
- //font-size: 13px;
1264
- }
1265
- }
1266
- }
1267
- .#{$prefix}-table-wrapper {
1268
- .#{$prefix}-table.#{$prefix}-table-small {
1269
- .#{$prefix}-table-cell {
1270
- &:has(.ant-color-picker-trigger) {
1271
- padding: 1px 8px;
1272
- }
1273
- .ant-color-picker-trigger{
1274
- width: 100%;
1275
- min-height: 20px;
1276
- .ant-color-picker-clear {
1277
- height: 20px;
1278
- }
1279
- }
1280
- }
1281
- }
1282
- }
1283
-
1284
-
1285
-
1286
- //ui-rc-table-ping-right
1287
-
1288
- .#{$prefix}-table-wrapper .#{$prefix}-table.#{$prefix}-table-bordered >.#{$prefix}-table-container >.#{$prefix}-table-content >table >thead>tr >.#{$prefix}-table-cell-fix-right-first::after,
1289
- .#{$prefix}-table-wrapper .#{$prefix}-table.#{$prefix}-table-bordered >.#{$prefix}-table-container >.#{$prefix}-table-header >table >thead>tr >.#{$prefix}-table-cell-fix-right-first::after,
1290
- .#{$prefix}-table-wrapper .#{$prefix}-table.#{$prefix}-table-bordered >.#{$prefix}-table-container >.#{$prefix}-table-body >table >thead>tr >.#{$prefix}-table-cell-fix-right-first::after,
1291
- .#{$prefix}-table-wrapper .#{$prefix}-table.#{$prefix}-table-bordered >.#{$prefix}-table-container >.#{$prefix}-table-summary >table >thead>tr >.#{$prefix}-table-cell-fix-right-first::after,
1292
- .#{$prefix}-table-wrapper .#{$prefix}-table.#{$prefix}-table-bordered >.#{$prefix}-table-container >.#{$prefix}-table-content >table >tbody>tr >.#{$prefix}-table-cell-fix-right-first::after,
1293
- .#{$prefix}-table-wrapper .#{$prefix}-table.#{$prefix}-table-bordered >.#{$prefix}-table-container >.#{$prefix}-table-header >table >tbody>tr >.#{$prefix}-table-cell-fix-right-first::after,
1294
- .#{$prefix}-table-wrapper .#{$prefix}-table.#{$prefix}-table-bordered >.#{$prefix}-table-container >.#{$prefix}-table-body >table >tbody>tr >.#{$prefix}-table-cell-fix-right-first::after,
1295
- .#{$prefix}-table-wrapper .#{$prefix}-table.#{$prefix}-table-bordered >.#{$prefix}-table-container >.#{$prefix}-table-summary >table >tbody>tr >.#{$prefix}-table-cell-fix-right-first::after,
1296
- .#{$prefix}-table-wrapper .#{$prefix}-table.#{$prefix}-table-bordered >.#{$prefix}-table-container >.#{$prefix}-table-content >table >tfoot>tr >.#{$prefix}-table-cell-fix-right-first::after,
1297
- .#{$prefix}-table-wrapper .#{$prefix}-table.#{$prefix}-table-bordered >.#{$prefix}-table-container >.#{$prefix}-table-header >table >tfoot>tr >.#{$prefix}-table-cell-fix-right-first::after,
1298
- .#{$prefix}-table-wrapper .#{$prefix}-table.#{$prefix}-table-bordered >.#{$prefix}-table-container >.#{$prefix}-table-body >table >tfoot>tr >.#{$prefix}-table-cell-fix-right-first::after,
1299
- .#{$prefix}-table-wrapper .#{$prefix}-table.#{$prefix}-table-bordered >.#{$prefix}-table-container >.#{$prefix}-table-summary >table >tfoot>tr >.#{$prefix}-table-cell-fix-right-first::after {
1300
- border-inline-end: 1px solid $tableBorderColor;
1301
- }
1302
-
1303
-
1304
- // toolbar
1305
-
1306
- .ui-rc-toolbar-bottom {
1307
- .be-toolbar-item {
1308
- .toolbar-dropdown-button {
1309
- .ant-btn.ant-btn-default.ant-btn-variant-outlined.ant-btn-compact-item.ant-btn-compact-first-item {
1310
- border-color: #28c76f;
1311
- }
1312
- .ant-btn.ant-btn-default.ant-btn-variant-outlined.ant-btn-compact-item.ant-btn-compact-last-item {
1313
- border-color: #28c76f;
1314
- .ant-btn-icon {
1315
- color: #28c76f;
1316
- }
1317
- }
1318
- }
1319
-
1320
- }
1321
- }
1322
-
1323
-
1324
- .react-resizable {
1325
- position: relative;
1326
- background-clip: padding-box;
1327
- }
1328
-
1329
- .rc-resizable-handle {
1330
- position: absolute;
1331
- //right: 10px;
1332
- right: 0px;
1333
- bottom: 0;
1334
- z-index: 1;
1335
- width: 5px;
1336
- height: 100%;
1337
- cursor: col-resize;
1338
- //transform: translateY(-50%);
1339
- &.none {
1340
- cursor: auto;
1341
- display: none;
1342
- }
1343
- }
1344
-
1345
- .rs-picker-popup {
1346
- z-index: 1660;
1347
- }
1
+ $prefix: 'ui-rc' !default;
2
+ $antdPrefix: 'ant' !default;
3
+ $primary: #eb4619 !default;
4
+ $rowHoverBg: #FBDED6 !default;
5
+ $rowSelectedBg: #FEF2EF !default;
6
+ //$tableBorderColor: red !default;
7
+ $tableBorderColor: #e0e0e0 !default;
8
+ //$tableBorderColor: #C4C4C4 !default;
9
+ //$tableBorderColor: #f0f0f0 !default;
10
+ $border-radius: 6px !default;
11
+ $border-selected-color: #0550C5 !default;
12
+ $body-color: #ffffff !default;
13
+ //$cell-selected-bg: #E6EFFD !default;
14
+ $cell-selected-bg: #F3F8FF !default;
15
+ //$cell-index-selected-bg: #0550C5 !default;
16
+ $cell-index-selected-bg: #1869E6 !default;
17
+ //$cell-index-focus-bg: #CEDBEF !default;
18
+ $cell-index-focus-bg: #E6EFFD !default;
19
+ $rowSelectedHoverBg: 'ui-rc' !default;
20
+ $boxShadowColor: rgba(5, 5, 5, 0.09) !default;
21
+ $fontFamily: "Montserrat",Helvetica,Arial,serif !default;
22
+
23
+ .react-hot-toast {
24
+ font-size: 1rem;
25
+ color: $body-color;
26
+ letter-spacing: 0.14px;
27
+ box-shadow: 0px 4px 10px -4px rgb(58 53 65 / 60%);
28
+ border-radius: $border-radius;
29
+ }
30
+
31
+ .popup-context-menu {
32
+ min-width: 200px;
33
+
34
+ }
35
+ .ant-dropdown-menu.popup-context-menu {
36
+ .ant-dropdown-menu-submenu {
37
+ .ant-dropdown-menu-submenu-title {
38
+ align-items: center;
39
+ }
40
+ }
41
+ }
42
+
43
+ // -------------- Table -------------
44
+
45
+ .#{$prefix}-table-wrapper {
46
+
47
+ p {
48
+ margin: 0;
49
+ }
50
+
51
+ .ui-rc-table {
52
+ //font-family: $fontFamily;
53
+ color: #000000de;
54
+ //font-weight: 500;
55
+ }
56
+
57
+ .ui-rc-table {
58
+ .#{$prefix}-table-cell {
59
+ &.#{$prefix}-table-selection-column {
60
+ //padding: 6px 8px !important;
61
+ //padding: 6px 8px !important;
62
+ }
63
+ }
64
+ }
65
+
66
+
67
+ &.table-none-column-select {
68
+ .#{$prefix}-table-cell {
69
+ &.#{$prefix}-table-selection-column {
70
+ padding: 0 !important;
71
+ overflow: hidden !important;
72
+ border-inline-end: 0 !important;
73
+ //flex: 0 0 0 !important;
74
+ //width: 0 !important;
75
+ }
76
+ }
77
+ }
78
+
79
+ .#{$prefix}-table {
80
+ &.ui-rc-table-scroll-horizontal {
81
+
82
+ .ui-rc-table-container {
83
+
84
+ .#{$prefix}-table-tbody-virtual {
85
+
86
+ .ui-rc-table-tbody-virtual-scrollbar.ui-rc-table-tbody-virtual-scrollbar-horizontal {
87
+ visibility: visible !important;
88
+ bottom: -8px !important;
89
+ z-index: 5 !important;
90
+ background-color: #f0f0f0;
91
+ }
92
+
93
+ }
94
+
95
+ &:has(.ui-rc-table-summary) {
96
+
97
+ .#{$prefix}-table-tbody-virtual {
98
+
99
+ .ui-rc-table-tbody-virtual-scrollbar.ui-rc-table-tbody-virtual-scrollbar-horizontal {
100
+ visibility: visible !important;
101
+ //bottom: -40px !important;
102
+ bottom: -47px !important;
103
+ z-index: 5 !important;
104
+
105
+ }
106
+
107
+ }
108
+
109
+ }
110
+
111
+ }
112
+
113
+
114
+
115
+ }
116
+ }
117
+ .#{$prefix}-table {
118
+
119
+ //line-height: 20px;
120
+
121
+ .#{$prefix}-table-cell {
122
+ //min-height: 35px;
123
+ //height: 35px;
124
+
125
+ .#{$prefix}-table-filter-column {
126
+ .#{$prefix}-dropdown-trigger.#{$prefix}-table-filter-trigger {
127
+ margin-left: 0;
128
+ }
129
+ }
130
+
131
+ &.cell-group {
132
+ font-weight: 600;
133
+ background-color: #f5f5f5;
134
+ border-inline-end-color: transparent !important;
135
+ }
136
+
137
+ &.cell-group.cell-number {
138
+ border-inline-end-color: $tableBorderColor !important;
139
+ }
140
+
141
+ &.cell-group-fixed {
142
+ font-weight: 600;
143
+ position: sticky;
144
+ text-align: left !important;
145
+ left: 0;
146
+ z-index: 15;
147
+ }
148
+
149
+ }
150
+
151
+ }
152
+
153
+ .#{$prefix}-table-tbody-virtual {
154
+ .#{$prefix}-table-cell {
155
+ border-bottom: 1px solid $tableBorderColor;
156
+ }
157
+ }
158
+
159
+ .#{$prefix}-table-bordered {
160
+
161
+ .#{$prefix}-table-tbody-virtual {
162
+ .#{$prefix}-table-cell {
163
+ //display: flex;
164
+ border-inline-end: 1px solid $tableBorderColor;
165
+ }
166
+ }
167
+ .#{$prefix}-table-container {
168
+ .#{$prefix}-table-thead {
169
+
170
+ > tr{
171
+ > th.#{$prefix}-table-cell:last-of-type {
172
+ //border-inline-end: 0;
173
+ }
174
+ }
175
+
176
+ }
177
+ .#{$prefix}-table-summary {
178
+ > tr{
179
+ > td.#{$prefix}-table-cell:last-of-type {
180
+ //border-inline-end: 0;
181
+ }
182
+ }
183
+ }
184
+ }
185
+
186
+ }
187
+
188
+ .#{$prefix}-table-tbody {
189
+
190
+
191
+ .#{$prefix}-table-cell {
192
+ line-height: 22px;
193
+ &:focus-visible {
194
+ outline: none;
195
+ }
196
+
197
+
198
+ &.disable {
199
+ background-color: #f0f0f0;
200
+ }
201
+
202
+ //&.selected {
203
+ // //background: red;
204
+ // background-color: $cell-selected-bg !important;
205
+ //}
206
+ &.selected-bg {
207
+ //background: red;
208
+ background-color: $cell-selected-bg !important;
209
+ }
210
+
211
+ .ui-rc-table-cell-content {
212
+ line-height: 22px;
213
+ }
214
+
215
+ &.#{$prefix}-table-cell-fix-left-last {
216
+ .#{$prefix}-table-cell-content {
217
+ }
218
+ }
219
+
220
+ }
221
+
222
+ .#{$prefix}-table-row {
223
+
224
+ &.#{$prefix}-table-row-selected {
225
+ > .#{$prefix}-table-cell {
226
+ background: #FEF2EF;
227
+ }
228
+ }
229
+
230
+ &.row-disabled {
231
+ .#{$prefix}-table-cell {
232
+ //background-color: #f5f5f5;
233
+ }
234
+ }
235
+
236
+ > .#{$prefix}-table-cell {
237
+ &.#{$prefix}-table-cell-row-hover {
238
+ background: #FBDED6;
239
+ }
240
+
241
+ &.#{$prefix}-cell-command {
242
+ padding: 5px 8px;
243
+
244
+ .#{$prefix}-cell-command__content {
245
+ display: flex;
246
+ gap: 5px;
247
+ overflow: hidden;
248
+ }
249
+ }
250
+
251
+
252
+ }
253
+
254
+ .#{$prefix}-table-cell:last-of-type {
255
+ //border-inline-end: 0;
256
+ }
257
+
258
+
259
+ @for $i from 0 through 10 {
260
+ &:has(.indent-level-#{$i}) {
261
+ .#{$prefix}-table-cell {
262
+ &.cell-number {
263
+ .ui-rc_content {
264
+ padding-left: $i * 10px;
265
+ }
266
+ }
267
+ }
268
+ }
269
+ }
270
+
271
+ }
272
+
273
+ .#{$prefix}-table-placeholder {
274
+ .#{$prefix}-table-cell {
275
+ padding-top: 0 !important;
276
+ padding-bottom: 0 !important;
277
+ .#{$prefix}-table-expanded-row-fixed {
278
+ margin-top: 0 !important;
279
+ margin-bottom: 0 !important;
280
+ }
281
+ }
282
+ }
283
+ }
284
+
285
+ .#{$prefix}-table-thead {
286
+ //font-weight: 400;
287
+
288
+ > tr {
289
+ > th,
290
+ > td {
291
+ border-bottom: 1px solid $tableBorderColor;
292
+ //background: #fff;
293
+ font-weight: 500;
294
+ //line-height: 23px;
295
+ //height: 40px;
296
+ }
297
+ }
298
+
299
+ .#{$prefix}-table-cell {
300
+
301
+ .ui-rc-table-column-sorter{
302
+ line-height: normal !important;
303
+ }
304
+
305
+ &:hover {
306
+ .ui-rc-table-column-sorter-up.active {
307
+ opacity: 1 !important;
308
+ }
309
+ }
310
+
311
+ .ui-rc-table-cell-content {
312
+ line-height: 22px;
313
+ }
314
+
315
+ &.#{$prefix}-table-cell-fix-left-last {
316
+ .#{$prefix}-table-cell-content {
317
+ //overflow: visible;
318
+ }
319
+ }
320
+ .#{$prefix}-table-column-title {
321
+ //display: flex;
322
+ }
323
+
324
+ &.head-align-center {
325
+ text-align: center;
326
+ }
327
+ &.head-align-right {
328
+ text-align: right;
329
+ }
330
+ }
331
+ }
332
+
333
+ .#{$prefix}-table-summary {
334
+ .#{$prefix}-table-cell {
335
+ background-color: #fafafa;
336
+ height: 39px;
337
+ font-weight: 600;
338
+ }
339
+
340
+ > tr > td {
341
+ border-bottom: 1px solid $tableBorderColor;
342
+ }
343
+ }
344
+
345
+ //.#{$prefix}-table-bordered .#{$prefix}-table-tbody-virtual .#{$prefix}-table-cell.#{$prefix}-table-cell-fix-right-first:before {
346
+ // border-inline-start: 1px solid $tableBorderColor;
347
+ //}
348
+
349
+ .#{$prefix}-table-bordered .#{$prefix}-table-tbody-virtual .#{$prefix}-table-cell.#{$prefix}-table-cell-fix-right-first {
350
+ &::before {
351
+ border-inline-start: 1px solid $tableBorderColor;
352
+ }
353
+ &.has-before::before {
354
+ border-inline-start: 1px solid $border-selected-color;
355
+ }
356
+ &.cell-border-left.selected-bg::before {
357
+ border-inline-start: 1px solid $border-selected-color;
358
+ }
359
+ }
360
+
361
+
362
+
363
+ .#{$prefix}-table {
364
+
365
+ &.#{$prefix}-table-bordered {
366
+ > .#{$prefix}-table-container {
367
+ border-inline-start: 1px solid $tableBorderColor;
368
+ border-top: 1px solid $tableBorderColor;
369
+
370
+ &::after {
371
+ border-inline-end: 1px solid $tableBorderColor;
372
+ }
373
+
374
+ > .#{$prefix}-table-content,
375
+ > .#{$prefix}-table-header,
376
+ > .#{$prefix}-table-body,
377
+ > .#{$prefix}-table-summary {
378
+ > table {
379
+ > thead {
380
+ > tr:not(:last-child) {
381
+ > th {
382
+ border-bottom: 1px solid $tableBorderColor;
383
+ }
384
+ }
385
+ }
386
+ }
387
+ }
388
+
389
+
390
+ > .#{$prefix}-table-content,
391
+ > .#{$prefix}-table-header,
392
+ > .#{$prefix}-table-body,
393
+ > .#{$prefix}-table-summary {
394
+ > table {
395
+ > thead,
396
+ > tbody,
397
+ > tfoot {
398
+ > tr {
399
+ > th,
400
+ > td {
401
+ border-inline-end: 1px solid $tableBorderColor;
402
+ }
403
+ }
404
+ }
405
+ }
406
+ }
407
+
408
+ }
409
+
410
+ > .#{$prefix}-table-title {
411
+ border: 1px solid $tableBorderColor;
412
+ border-bottom: 0;
413
+ }
414
+ }
415
+
416
+ &.#{$prefix}-table-ping-right:not(.#{$prefix}-table-has-fix-right) .#{$prefix}-table-container::after {
417
+ box-shadow: inset -10px 0 8px -8px $boxShadowColor;
418
+ //box-shadow: none;
419
+ }
420
+
421
+
422
+ }
423
+
424
+ .#{$prefix}-table-ping-left {
425
+ .#{$prefix}-table-cell-fix-left-first::after,
426
+ .#{$prefix}-table-cell-fix-left-last::after {
427
+ box-shadow: inset 10px 0 8px -8px $boxShadowColor;
428
+ }
429
+ }
430
+
431
+ .#{$prefix}-table-ping-right {
432
+ .#{$prefix}-table-cell-fix-right-first::after,
433
+ .#{$prefix}-table-cell-fix-right-last::after {
434
+ box-shadow: inset -10px 0 8px -8px $boxShadowColor;
435
+ }
436
+ }
437
+
438
+
439
+ .#{$prefix}-table.#{$prefix}-table-bordered {
440
+ > .#{$prefix}-table-container {
441
+ > .#{$prefix}-table-header > table > thead > tr,
442
+ > .#{$prefix}-table-summary > table > tfoot > tr {
443
+ > .#{$prefix}-table-cell-fix-right-first::before {
444
+ border-inline-start: 1px solid $tableBorderColor;
445
+ content: "";
446
+ position: absolute;
447
+ inset-block: 0;
448
+ inset-inline-start: -1px;
449
+ }
450
+ }
451
+ }
452
+ }
453
+
454
+
455
+ }
456
+
457
+ // -------------- Table edit-------------
458
+
459
+ .#{$prefix}-table-wrapper {
460
+
461
+ .#{$prefix}-table.#{$prefix}-table-small {
462
+ .ui-rc-table-thead {
463
+ >tr >th.#{$prefix}-table-selection-column{
464
+ //padding-block: 7px;
465
+ padding: 0;
466
+ //padding: 6px 8px;
467
+ }
468
+ }
469
+ //.#{$prefix}-table-selection-column{
470
+ // padding-block: 7px;
471
+ // padding: 0;
472
+ // //padding: 6px 8px;
473
+ //}
474
+ }
475
+
476
+ &.grid-editable {
477
+
478
+ .#{$prefix}-table-row {
479
+ &:has(+ .#{$prefix}-table-cell) {
480
+
481
+ }
482
+ }
483
+
484
+ .#{$prefix}-table .#{$prefix}-table-tbody .rc-ui-cell-editable {
485
+ overflow: unset;
486
+ display: flex;
487
+ height: 37px;
488
+ //--------
489
+ padding: 0;
490
+
491
+ .#{$prefix}-table-row-expand-icon {
492
+ top: 8px;
493
+ left: 8px;
494
+ }
495
+
496
+ &.rc-ui-cell-index {
497
+ &.focus {
498
+ background-color: $cell-index-focus-bg;
499
+ //font-weight: 500;
500
+ }
501
+ &.selected-index {
502
+ background-color: $cell-index-selected-bg !important;
503
+ color: #fff;
504
+ //font-weight: 500;
505
+ }
506
+ }
507
+
508
+ &.cell-editable {
509
+
510
+ &.cell-border-top {
511
+ //border-bottom: 1px solid $border-selected-color;
512
+ &::after {
513
+ content: "";
514
+ position: absolute;
515
+ top: -1px;
516
+ left: 0;
517
+ //right: 0;
518
+ //bottom: 0;
519
+ height: 1px;
520
+ width: 100%;
521
+ border-top: 1px solid $border-selected-color; /* line đè lên border gốc */
522
+ pointer-events: none; /* không ảnh hưởng đến tương tác */
523
+ z-index: 1;
524
+ }
525
+ &.ui-rc-table-cell-fix-left.ui-rc-table-cell-fix-left-last {
526
+ &::after {
527
+ left: -100%;
528
+ }
529
+ }
530
+ &.ui-rc-table-cell-fix-right.ui-rc-table-cell-fix-right-first {
531
+ &::after {
532
+ left: 100%;
533
+ }
534
+ }
535
+ }
536
+
537
+ &.cell-border-bottom {
538
+ border-bottom: 1px solid $border-selected-color;
539
+ //position: relative;
540
+ //&::before {
541
+ // content: "";
542
+ // position: absolute;
543
+ // //top: 0;
544
+ // left: 0;
545
+ // //right: 0;
546
+ // bottom: 0;
547
+ // height: 1px;
548
+ // width: 100%;
549
+ // border: 1px solid red; /* line đè lên border gốc */
550
+ // pointer-events: none; /* không ảnh hưởng đến tương tác */
551
+ // z-index: 1;
552
+ //}
553
+
554
+ }
555
+
556
+ &.cell-border-left {
557
+ //overflow: hidden;
558
+ //border-inline-end: 1px solid $border-selected-color;
559
+ &::before {
560
+ content: "";
561
+ position: absolute;
562
+ top: 0;
563
+ left: 0;
564
+ //right: 0;
565
+ //bottom: 0;
566
+ height: 102%;
567
+ width: 1px;
568
+ border-left: 1px solid $border-selected-color; /* line đè lên border gốc */
569
+ pointer-events: none; /* không ảnh hưởng đến tương tác */
570
+ z-index: 1;
571
+ }
572
+ }
573
+
574
+ &.cell-border-right {
575
+ border-inline-end: 1px solid $border-selected-color;
576
+ //&::before {
577
+ // content: "";
578
+ // position: absolute;
579
+ // top: 0;
580
+ // //left: 0;
581
+ // right: 0;
582
+ // //bottom: 0;
583
+ // height: 100%;
584
+ // width: 1px;
585
+ // border: 1px solid red; /* line đè lên border gốc */
586
+ // pointer-events: none; /* không ảnh hưởng đến tương tác */
587
+ // z-index: 1;
588
+ //}
589
+ }
590
+
591
+ &.cell-paste-border-top {
592
+ border-bottom: 1px dashed #949494;
593
+ }
594
+
595
+ &.cell-paste-border-bottom {
596
+ border-bottom: 1px dashed #949494;
597
+ }
598
+
599
+ &.cell-paste-border-left {
600
+ border-inline-end: 1px dashed #949494;
601
+ }
602
+
603
+ &.cell-paste-border-right {
604
+ border-inline-end: 1px dashed #949494;
605
+ }
606
+
607
+
608
+ &.#{$prefix}-table-cell-fix-left {
609
+ &:has(.ui-rc_cell-content.selected) {
610
+ }
611
+
612
+ }
613
+
614
+ &.#{$prefix}-table-cell-fix-right {
615
+ &:has(.ui-rc_cell-content.selected) {
616
+ }
617
+
618
+ &.cell-border-end {
619
+ z-index: 3;
620
+ }
621
+
622
+ }
623
+
624
+
625
+ &.cell-border-end {
626
+ z-index: 1;
627
+ }
628
+
629
+ &.#{$prefix}-table-cell-fix-right-first {
630
+
631
+ &.cell-border-end {
632
+ z-index: 3;
633
+ }
634
+
635
+ &.next-cell-border-left {
636
+ &::before {
637
+ border-inline-start: 1px solid $border-selected-color;
638
+ }
639
+ }
640
+
641
+
642
+ &.next-cell-paste-border-left {
643
+ &::before {
644
+ border-inline-start: 1px dashed #949494;
645
+ }
646
+ }
647
+
648
+ &.fixed-cell-border-left {
649
+ &::before {
650
+ border-inline-start: 1px solid $border-selected-color;
651
+ }
652
+ }
653
+ &.fixed-cell-paste-border-left {
654
+ &::before {
655
+ border-inline-start: 1px dashed #949494;
656
+ }
657
+ }
658
+
659
+ }
660
+
661
+ &.#{$prefix}-table-cell-fix-left-last {
662
+
663
+ &.cell-border-end {
664
+ z-index: 3;
665
+ }
666
+
667
+ }
668
+
669
+ }
670
+
671
+
672
+ }
673
+
674
+ .#{$prefix}-table.#{$prefix}-table-ping-left {
675
+ .#{$prefix}-table-tbody .rc-ui-cell-editable{
676
+ &.cell-editable {
677
+
678
+
679
+ &.#{$prefix}-table-cell-fix-left-last {
680
+
681
+ //&.cell-border-left {
682
+ // border-inline-end: 1px solid $tableBorderColor;
683
+ //}
684
+
685
+ }
686
+
687
+
688
+
689
+ }
690
+ }
691
+
692
+ &:not(.#{$prefix}-table.#{$prefix}-table-ping-right) {
693
+
694
+ .#{$prefix}-table-tbody .rc-ui-cell-editable {
695
+ &.cell-editable {
696
+
697
+ // //&.cell-border-end {
698
+ // // z-index: 1;
699
+ // //}
700
+
701
+ &.#{$prefix}-table-cell-fix-right {
702
+ z-index: 0 !important;
703
+
704
+ &:has(.dragging-point.show) {
705
+ z-index: 3 !important;
706
+ }
707
+
708
+ &.cell-border-end {
709
+ z-index: 3;
710
+ }
711
+ }
712
+
713
+ }
714
+ }
715
+
716
+ }
717
+
718
+ }
719
+
720
+ .#{$prefix}-table.#{$prefix}-table-ping-right {
721
+ .#{$prefix}-table-tbody .rc-ui-cell-editable{
722
+
723
+ &.cell-editable {
724
+
725
+ &.#{$prefix}-table-cell-fix-right-first {
726
+
727
+ &.next-cell-border-left {
728
+ &::before {
729
+ border-inline-start: 1px solid $tableBorderColor;
730
+ }
731
+ }
732
+
733
+
734
+
735
+ }
736
+
737
+ &.#{$prefix}-table-cell-fix-left-last {
738
+ &.cell-border-end {
739
+ z-index: 3;
740
+ }
741
+ }
742
+
743
+ }
744
+
745
+ &.cell-border-end {
746
+ z-index: 1;
747
+ }
748
+
749
+ }
750
+
751
+ }
752
+
753
+
754
+ .#{$prefix}-table.#{$prefix}-table-small {
755
+ .#{$prefix}-table-thead > tr > th,
756
+ tfoot > tr > th,
757
+ tfoot > tr > td,
758
+ tfoot > tr > td.#{$prefix}-table-cell
759
+ {
760
+ //padding: 8px 8px;
761
+ }
762
+ }
763
+
764
+ .#{$prefix}-table.#{$prefix}-table-small {
765
+ .#{$prefix}-table-selection-column{
766
+ //padding: 8px 8px;
767
+ //padding: 6px 8px;
768
+ }
769
+ }
770
+
771
+ .ui-rc_cell-content {
772
+ user-select: none;
773
+ //padding: 7px 8px;
774
+ padding: 2px 8px;
775
+ display: flex;
776
+ align-items: center;
777
+ overflow: hidden;
778
+
779
+ .ui-rc_content {
780
+ width: 100%;
781
+ }
782
+ &:hover {
783
+ .dragging-point {
784
+ //visibility: visible;
785
+ }
786
+ }
787
+
788
+ .dragging-point {
789
+ //visibility: hidden;
790
+ width: 10px;
791
+ height: 10px;
792
+ position: absolute;
793
+ cursor: crosshair;
794
+ right: -1px;
795
+ bottom: -1px;
796
+ //background: red;
797
+
798
+ &.hidden {
799
+ display: none;
800
+ }
801
+
802
+ .dot-point {
803
+ position: absolute;
804
+ width: 8px;
805
+ height: 8px;
806
+ border-radius: 6px;
807
+ background-color: $border-selected-color;
808
+ bottom: -3px;
809
+ right: -3px;
810
+ }
811
+
812
+ }
813
+ }
814
+
815
+ .ui-rc_cell-content.selected {
816
+ background-color: $cell-selected-bg;
817
+ }
818
+ .ui-rc_cell-content {
819
+ //position: relative;
820
+ &.isValid {
821
+ &::after {
822
+ content: "";
823
+ position: absolute;
824
+ top: 0;
825
+ right: 0;
826
+ width: 0;
827
+ height: 0;
828
+ border-top: 0 solid transparent;
829
+ border-right: 8px solid red;
830
+ border-bottom: 8px solid transparent;
831
+ }
832
+ }
833
+ }
834
+
835
+ //.ui-rc_cell-content.disable {
836
+ // background-color: #f0f0f0;
837
+ //}
838
+
839
+ //.ui-rc_cell-content--index {
840
+ // &.focus {
841
+ // background-color: $cell-index-focus-bg;
842
+ // //color: #fff;
843
+ // //font-weight: 500;
844
+ // }
845
+ // &.selected {
846
+ // background-color: $cell-index-selected-bg;
847
+ // color: #fff;
848
+ // //font-weight: 500;
849
+ // }
850
+ //}
851
+
852
+ .#{$prefix}-table-tbody {
853
+
854
+ .#{$prefix}-table-row {
855
+ &.#{$prefix}-table-row-selected {
856
+ >.#{$prefix}-table-cell {
857
+ //background: #FEF2EF;
858
+ }
859
+ }
860
+ >.#{$prefix}-table-cell {
861
+ &.#{$prefix}-table-cell-row-hover {
862
+ //background: #FBDED6;
863
+ }
864
+ }
865
+
866
+ .#{$prefix}-table-cell {
867
+
868
+ .#{$prefix}-table-row-indent {
869
+ position: absolute;
870
+ @for $i from 1 through 10 {
871
+ &.indent-level-#{$i} {
872
+ padding-left: $i * 25px;;
873
+ }
874
+ }
875
+ }
876
+
877
+ @for $i from 0 through 10 {
878
+ &:has(.indent-level-#{$i}) {
879
+
880
+ .#{$prefix}-table-row-expand-icon {
881
+ position: absolute;
882
+ //.ui-rc_content {
883
+ //padding-left: $i * 10px;
884
+ //}
885
+ }
886
+
887
+ .ui-rc_cell-content {
888
+ padding-left: $i * 25px + 8px;
889
+ }
890
+
891
+ }
892
+ }
893
+
894
+ @for $i from 0 through 10 {
895
+ &:has(.indent-level-#{$i}) {
896
+
897
+ .#{$prefix}-table-row-expand-icon {
898
+ position: absolute;
899
+ left: $i * 25px + 8px !important;
900
+ }
901
+
902
+ .ui-rc_cell-content {
903
+ padding-left: ($i + 1)* 25px + 8px;
904
+ }
905
+
906
+ }
907
+ }
908
+ }
909
+ }
910
+
911
+
912
+ .#{$prefix}-table-cell{
913
+
914
+ &.#{$prefix}-table-cell-ellipsis {
915
+ .ui-rc_cell-content {
916
+
917
+ .ui-rc_content {
918
+ text-overflow: ellipsis;
919
+ text-decoration: none;
920
+ transition: 0.3s;
921
+ white-space: nowrap;
922
+ overflow: hidden;
923
+ line-height: 22px;
924
+ }
925
+ }
926
+ }
927
+
928
+ &.cell-editing {
929
+ //padding: 0 !important;
930
+ &:focus-visible {
931
+ outline: none;
932
+ }
933
+ .ant-form-item ,
934
+ .ant-row.ant-form-item-row,
935
+ .ant-col.ant-form-item-control,
936
+ .ant-form-item-control-input,
937
+ .ant-form-item-control-input-content,
938
+ .ant-input{
939
+ height: 100%;
940
+ &:focus-visible {
941
+ outline: none;
942
+ }
943
+ }
944
+
945
+ .#{$prefix}-checkbox-wrapper {
946
+ .#{$prefix}-checkbox {
947
+ background-color: red;
948
+ }
949
+ .#{$prefix}-checkbox-input {
950
+ &:focus-visible {
951
+ outline: none;
952
+ }
953
+ }
954
+ }
955
+
956
+
957
+ .ant-input, .ant-picker{
958
+ border-radius: 0;
959
+ }
960
+
961
+ // color picker
962
+
963
+ .ant-color-picker-trigger{
964
+ height: 100%;
965
+ border-radius: 0;
966
+ .ant-color-picker-color-block {
967
+ height: 100%;
968
+ width: 100%;
969
+ }
970
+
971
+ }
972
+
973
+
974
+ // ------------ select ---------------
975
+
976
+ .#{$prefix}-table-select-single .#{$prefix}-table-select-selector,
977
+ .#{$prefix}-select-single .#{$prefix}-select-selector {
978
+
979
+ border-radius: 0;
980
+
981
+ }
982
+
983
+ .#{$prefix}-table-select-single:not(.#{$prefix}-table-select-customize-input) {
984
+ .#{$prefix}-table-select-selector {
985
+ .#{$prefix}-table-select-selection-search-input {
986
+ height: auto;
987
+ }
988
+ }
989
+ }
990
+
991
+ // ------------ select ---------------
992
+
993
+
994
+ }
995
+ &.cell-editable {
996
+ &:focus-visible {
997
+ outline: none;
998
+ }
999
+ }
1000
+ .#{$prefix}-table-cell-content {
1001
+ display: flex;
1002
+ height: 100%;
1003
+ }
1004
+
1005
+ .ui-rc_cell-content,
1006
+ .#{$prefix}-table-cell-content{
1007
+ //width: 100%;
1008
+ flex: 1;
1009
+ }
1010
+ .ui-rc_content {
1011
+ //padding: 5px 8px;
1012
+ }
1013
+ .ui-rc_content:has(.ant-color-picker-trigger) {
1014
+ padding: 1px 8px;
1015
+ }
1016
+ }
1017
+ }
1018
+
1019
+ }
1020
+
1021
+ }
1022
+ // ---------------- Table edit end---------------
1023
+
1024
+
1025
+ // -------------- Checkbox ----------
1026
+
1027
+ .#{$prefix}-checkbox-indeterminate {
1028
+ &:hover {
1029
+ .#{$prefix}-checkbox-inner {
1030
+ border-color: $primary !important;;
1031
+ }
1032
+ }
1033
+
1034
+ .#{$prefix}-checkbox-inner {
1035
+ &:after {
1036
+ background-color: $primary;
1037
+ }
1038
+ }
1039
+ }
1040
+ //.#{$prefix}-checkbox-input {
1041
+ // &:focus-visible {
1042
+ // outline: none;
1043
+ // }
1044
+ //}
1045
+
1046
+ .#{$prefix}-checkbox .#{$prefix}-checkbox-input:focus-visible+.#{$prefix}-checkbox-inner {
1047
+ outline: none;
1048
+ }
1049
+
1050
+ .#{$prefix}-checkbox {
1051
+ &.#{$prefix}-checkbox-checked {
1052
+ &:hover {
1053
+ .#{$prefix}-checkbox-inner {
1054
+ background-color: $primary;
1055
+ border-color: $primary;
1056
+ }
1057
+ }
1058
+
1059
+ .#{$prefix}-checkbox-inner {
1060
+ background-color: $primary;
1061
+ border-color: $primary;
1062
+ }
1063
+ }
1064
+ }
1065
+
1066
+ .#{$prefix}-checkbox:not(.#{$prefix}-checkbox-disabled):hover {
1067
+ .#{$prefix}-checkbox-inner {
1068
+ border-color: $primary;
1069
+ }
1070
+ }
1071
+
1072
+ .#{$prefix}-checkbox-wrapper:not(.#{$prefix}-checkbox-wrapper-disabled):hover {
1073
+ .#{$prefix}-checkbox-inner {
1074
+ border-color: $primary;
1075
+ }
1076
+
1077
+ .#{$prefix}-checkbox-checked:not(.#{$prefix}-checkbox-disabled) {
1078
+ .#{$prefix}-checkbox-inner {
1079
+ background-color: $primary;
1080
+ }
1081
+ }
1082
+ }
1083
+
1084
+ // ------------ Tree ---------------
1085
+
1086
+ .#{$prefix}-tree {
1087
+ .#{$prefix}-tree-checkbox-checked {
1088
+ .#{$prefix}-tree-checkbox-inner {
1089
+ background-color: $primary;
1090
+ border-color: $primary;
1091
+ }
1092
+ }
1093
+
1094
+ .#{$prefix}-tree-checkbox-wrapper-checked:not(.#{$prefix}-tree-checkbox-wrapper-disabled):hover,
1095
+ .#{$prefix}-tree-checkbox-checked:not(.#{$prefix}-tree-checkbox-disabled):hover {
1096
+ .#{$prefix}-tree-checkbox-inner {
1097
+ background-color: $primary;
1098
+ }
1099
+ }
1100
+
1101
+ .#{$prefix}-tree-checkbox-wrapper:not(.#{$prefix}-tree-checkbox-wrapper-disabled):hover,
1102
+ .#{$prefix}-tree-checkbox:not(.#{$prefix}-tree-checkbox-disabled):hover {
1103
+ .#{$prefix}-tree-checkbox-inner {
1104
+ border-color: $primary;
1105
+ }
1106
+ }
1107
+ }
1108
+
1109
+
1110
+ // ------------ ant Tree ---------------
1111
+
1112
+ .#{$antdPrefix}-tree {
1113
+ .#{$antdPrefix}-tree-checkbox-checked {
1114
+ .#{$antdPrefix}-tree-checkbox-inner {
1115
+ background-color: $primary;
1116
+ border-color: $primary;
1117
+ }
1118
+ }
1119
+
1120
+ .#{$antdPrefix}-tree-checkbox-wrapper-checked:not(.#{$antdPrefix}-tree-checkbox-wrapper-disabled):hover,
1121
+ .#{$antdPrefix}-tree-checkbox-checked:not(.#{$antdPrefix}-tree-checkbox-disabled):hover {
1122
+ .#{$antdPrefix}-tree-checkbox-inner {
1123
+ background-color: $primary;
1124
+ }
1125
+ }
1126
+
1127
+ .#{$antdPrefix}-tree-checkbox-wrapper:not(.#{$antdPrefix}-tree-checkbox-wrapper-disabled):hover,
1128
+ .#{$antdPrefix}-tree-checkbox:not(.#{$antdPrefix}-tree-checkbox-disabled):hover {
1129
+ .#{$antdPrefix}-tree-checkbox-inner {
1130
+ border-color: $primary;
1131
+ }
1132
+ }
1133
+ }
1134
+
1135
+
1136
+ // ------------ paging ---------------
1137
+
1138
+ .#{$prefix}-table-wrapper .#{$prefix}-table-pagination.#{$prefix}-pagination {
1139
+ margin: 0;
1140
+ }
1141
+
1142
+ .#{$prefix}-table-wrapper {
1143
+ .#{$prefix}-table {
1144
+ .#{$prefix}-pagination {
1145
+ &::before {
1146
+ content: "";
1147
+ position: absolute;
1148
+ border-left: 1px solid $tableBorderColor;
1149
+ height: 55px;
1150
+ bottom: 0;
1151
+ left: 0;
1152
+ }
1153
+
1154
+ &::after {
1155
+ content: "";
1156
+ position: absolute;
1157
+ border-left: 1px solid $tableBorderColor;
1158
+ height: 55px;
1159
+ bottom: 0;
1160
+ visibility: visible;
1161
+ right: 0;
1162
+ }
1163
+
1164
+ &.top-pagination {
1165
+ border: none;
1166
+ padding-top: 0;
1167
+ padding-bottom: 0;
1168
+ .#{$prefix}-pagination-total-text {
1169
+ margin-left: auto;
1170
+ }
1171
+ }
1172
+ border-bottom: 1px solid $tableBorderColor;
1173
+
1174
+ }
1175
+ }
1176
+ }
1177
+
1178
+
1179
+ .#{$prefix}-pagination {
1180
+
1181
+ .#{$prefix}-pagination-total-text {
1182
+ white-space: nowrap;
1183
+ }
1184
+
1185
+ .#{$prefix}-pagination-item-active {
1186
+ border-color: $primary;
1187
+
1188
+ &:hover {
1189
+ border-color: $primary;
1190
+
1191
+ a {
1192
+ color: $primary;
1193
+ }
1194
+ }
1195
+
1196
+ a {
1197
+ color: $primary;
1198
+ }
1199
+ }
1200
+
1201
+ .#{$prefix}-pagination-jump-prev, .#{$prefix}-pagination-jump-next {
1202
+ .#{$prefix}-pagination-item-container {
1203
+ .#{$prefix}-pagination-item-link-icon {
1204
+ color: $primary;
1205
+ }
1206
+ }
1207
+ }
1208
+ }
1209
+
1210
+
1211
+
1212
+ //.#{$prefix}-table-wrapper .#{$prefix}-table.#{$prefix}-table-bordered >.#{$prefix}-table-container >.#{$prefix}-table-content >table >tbody>tr>td >.#{$prefix}-table-expanded-row-fixed {
1213
+ // border-inline-end: 1px solid $tableBorderColor;
1214
+ //}
1215
+ //
1216
+ //.#{$prefix}-table-wrapper .#{$prefix}-table.#{$prefix}-table-bordered >.#{$prefix}-table-container >.#{$prefix}-table-content >table >tbody>tr>td >.#{$prefix}-table-expanded-row-fixed::after {
1217
+ // //border-inline-end: 1px solid $tableBorderColor;
1218
+ // border-inline-end: 0 solid $tableBorderColor;
1219
+ //}
1220
+ //
1221
+ //
1222
+ //.#{$prefix}-table-wrapper .#{$prefix}-table.#{$prefix}-table-bordered.#{$prefix}-table-small >.#{$prefix}-table-container >.#{$prefix}-table-body >table>tbody>tr>td >.#{$prefix}-table-expanded-row-fixed {
1223
+ // margin-top: 0;
1224
+ // margin-bottom: 0;
1225
+ // border-inline-end: 1px solid $tableBorderColor;
1226
+ //}
1227
+ //
1228
+ //.#{$prefix}-table-wrapper .#{$prefix}-table.#{$prefix}-table-bordered.#{$prefix}-table-small >.#{$prefix}-table-container >.#{$prefix}-table-body >table>tbody>tr>td >.#{$prefix}-table-expanded-row-fixed::after {
1229
+ // border-inline-end: 0 solid $tableBorderColor;
1230
+ //}
1231
+
1232
+
1233
+ .#{$prefix}-table-wrapper {
1234
+ .#{$prefix}-table {
1235
+ &.#{$prefix}-table-bordered {
1236
+ > .#{$prefix}-table-container {
1237
+ > .#{$prefix}-table-content,
1238
+ > .#{$prefix}-table-header,
1239
+ > .#{$prefix}-table-body,
1240
+ > .#{$prefix}-table-summary {
1241
+ > table > tbody > tr {
1242
+ > th,
1243
+ > td {
1244
+ > .#{$prefix}-table-expanded-row-fixed::after {
1245
+ // Thêm CSS ở đây
1246
+ }
1247
+ }
1248
+ }
1249
+ }
1250
+ }
1251
+ }
1252
+ }
1253
+ }
1254
+
1255
+
1256
+ .#{$prefix}-table-wrapper {
1257
+ .#{$prefix}-table.#{$prefix}-table-small {
1258
+ .#{$prefix}-table-title,
1259
+ .#{$prefix}-table-footer,
1260
+ .#{$prefix}-table-cell,
1261
+ .#{$prefix}-table-thead > tr > th,
1262
+ .#{$prefix}-table-tbody > tr > th,
1263
+ .#{$prefix}-table-tbody > tr > td,
1264
+ tfoot > tr > th,
1265
+ tfoot > tr > td {
1266
+ //padding: 8px 8px;
1267
+ //font-size: 13px;
1268
+ }
1269
+ }
1270
+ }
1271
+ .#{$prefix}-table-wrapper {
1272
+ .#{$prefix}-table.#{$prefix}-table-small {
1273
+ .#{$prefix}-table-cell {
1274
+ &:has(.ant-color-picker-trigger) {
1275
+ padding: 1px 8px;
1276
+ }
1277
+ .ant-color-picker-trigger{
1278
+ width: 100%;
1279
+ min-height: 20px;
1280
+ .ant-color-picker-clear {
1281
+ height: 20px;
1282
+ }
1283
+ }
1284
+ }
1285
+ }
1286
+ }
1287
+
1288
+
1289
+
1290
+ //ui-rc-table-ping-right
1291
+
1292
+ .#{$prefix}-table-wrapper .#{$prefix}-table.#{$prefix}-table-bordered >.#{$prefix}-table-container >.#{$prefix}-table-content >table >thead>tr >.#{$prefix}-table-cell-fix-right-first::after,
1293
+ .#{$prefix}-table-wrapper .#{$prefix}-table.#{$prefix}-table-bordered >.#{$prefix}-table-container >.#{$prefix}-table-header >table >thead>tr >.#{$prefix}-table-cell-fix-right-first::after,
1294
+ .#{$prefix}-table-wrapper .#{$prefix}-table.#{$prefix}-table-bordered >.#{$prefix}-table-container >.#{$prefix}-table-body >table >thead>tr >.#{$prefix}-table-cell-fix-right-first::after,
1295
+ .#{$prefix}-table-wrapper .#{$prefix}-table.#{$prefix}-table-bordered >.#{$prefix}-table-container >.#{$prefix}-table-summary >table >thead>tr >.#{$prefix}-table-cell-fix-right-first::after,
1296
+ .#{$prefix}-table-wrapper .#{$prefix}-table.#{$prefix}-table-bordered >.#{$prefix}-table-container >.#{$prefix}-table-content >table >tbody>tr >.#{$prefix}-table-cell-fix-right-first::after,
1297
+ .#{$prefix}-table-wrapper .#{$prefix}-table.#{$prefix}-table-bordered >.#{$prefix}-table-container >.#{$prefix}-table-header >table >tbody>tr >.#{$prefix}-table-cell-fix-right-first::after,
1298
+ .#{$prefix}-table-wrapper .#{$prefix}-table.#{$prefix}-table-bordered >.#{$prefix}-table-container >.#{$prefix}-table-body >table >tbody>tr >.#{$prefix}-table-cell-fix-right-first::after,
1299
+ .#{$prefix}-table-wrapper .#{$prefix}-table.#{$prefix}-table-bordered >.#{$prefix}-table-container >.#{$prefix}-table-summary >table >tbody>tr >.#{$prefix}-table-cell-fix-right-first::after,
1300
+ .#{$prefix}-table-wrapper .#{$prefix}-table.#{$prefix}-table-bordered >.#{$prefix}-table-container >.#{$prefix}-table-content >table >tfoot>tr >.#{$prefix}-table-cell-fix-right-first::after,
1301
+ .#{$prefix}-table-wrapper .#{$prefix}-table.#{$prefix}-table-bordered >.#{$prefix}-table-container >.#{$prefix}-table-header >table >tfoot>tr >.#{$prefix}-table-cell-fix-right-first::after,
1302
+ .#{$prefix}-table-wrapper .#{$prefix}-table.#{$prefix}-table-bordered >.#{$prefix}-table-container >.#{$prefix}-table-body >table >tfoot>tr >.#{$prefix}-table-cell-fix-right-first::after,
1303
+ .#{$prefix}-table-wrapper .#{$prefix}-table.#{$prefix}-table-bordered >.#{$prefix}-table-container >.#{$prefix}-table-summary >table >tfoot>tr >.#{$prefix}-table-cell-fix-right-first::after {
1304
+ border-inline-end: 1px solid $tableBorderColor;
1305
+ }
1306
+
1307
+
1308
+ // toolbar
1309
+
1310
+ .ui-rc-toolbar-bottom {
1311
+ .be-toolbar-item {
1312
+ .toolbar-dropdown-button {
1313
+ .ant-btn.ant-btn-default.ant-btn-variant-outlined.ant-btn-compact-item.ant-btn-compact-first-item {
1314
+ border-color: #28c76f;
1315
+ }
1316
+ .ant-btn.ant-btn-default.ant-btn-variant-outlined.ant-btn-compact-item.ant-btn-compact-last-item {
1317
+ border-color: #28c76f;
1318
+ .ant-btn-icon {
1319
+ color: #28c76f;
1320
+ }
1321
+ }
1322
+ }
1323
+
1324
+ }
1325
+ }
1326
+
1327
+
1328
+ .react-resizable {
1329
+ position: relative;
1330
+ background-clip: padding-box;
1331
+ }
1332
+
1333
+ .rc-resizable-handle {
1334
+ position: absolute;
1335
+ //right: 10px;
1336
+ right: 0px;
1337
+ bottom: 0;
1338
+ z-index: 1;
1339
+ width: 5px;
1340
+ height: 100%;
1341
+ cursor: col-resize;
1342
+ //transform: translateY(-50%);
1343
+ &.none {
1344
+ cursor: auto;
1345
+ display: none;
1346
+ }
1347
+ }
1348
+
1349
+ .rs-picker-popup {
1350
+ z-index: 1660;
1351
+ }