es-grid-template 1.5.6 → 1.5.8

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,1351 +1,1355 @@
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
- }
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
+ input.be-cell-editing, .ant-picker, .ui-rc-select-selector, .ui-rc-table-select-selector {
946
+ padding-inline: 7px;
947
+ }
948
+
949
+ .#{$prefix}-checkbox-wrapper {
950
+ .#{$prefix}-checkbox {
951
+ background-color: red;
952
+ }
953
+ .#{$prefix}-checkbox-input {
954
+ &:focus-visible {
955
+ outline: none;
956
+ }
957
+ }
958
+ }
959
+
960
+
961
+ .ant-input, .ant-picker{
962
+ border-radius: 0;
963
+ }
964
+
965
+ // color picker
966
+
967
+ .ant-color-picker-trigger{
968
+ height: 100%;
969
+ border-radius: 0;
970
+ .ant-color-picker-color-block {
971
+ height: 100%;
972
+ width: 100%;
973
+ }
974
+
975
+ }
976
+
977
+
978
+ // ------------ select ---------------
979
+
980
+ .#{$prefix}-table-select-single .#{$prefix}-table-select-selector,
981
+ .#{$prefix}-select-single .#{$prefix}-select-selector {
982
+
983
+ border-radius: 0;
984
+
985
+ }
986
+
987
+ .#{$prefix}-table-select-single:not(.#{$prefix}-table-select-customize-input) {
988
+ .#{$prefix}-table-select-selector {
989
+ .#{$prefix}-table-select-selection-search-input {
990
+ height: auto;
991
+ }
992
+ }
993
+ }
994
+
995
+ // ------------ select ---------------
996
+
997
+
998
+ }
999
+ &.cell-editable {
1000
+ &:focus-visible {
1001
+ outline: none;
1002
+ }
1003
+ }
1004
+ .#{$prefix}-table-cell-content {
1005
+ display: flex;
1006
+ height: 100%;
1007
+ }
1008
+
1009
+ .ui-rc_cell-content,
1010
+ .#{$prefix}-table-cell-content{
1011
+ //width: 100%;
1012
+ flex: 1;
1013
+ }
1014
+ .ui-rc_content {
1015
+ //padding: 5px 8px;
1016
+ }
1017
+ .ui-rc_content:has(.ant-color-picker-trigger) {
1018
+ padding: 1px 8px;
1019
+ }
1020
+ }
1021
+ }
1022
+
1023
+ }
1024
+
1025
+ }
1026
+ // ---------------- Table edit end---------------
1027
+
1028
+
1029
+ // -------------- Checkbox ----------
1030
+
1031
+ .#{$prefix}-checkbox-indeterminate {
1032
+ &:hover {
1033
+ .#{$prefix}-checkbox-inner {
1034
+ border-color: $primary !important;;
1035
+ }
1036
+ }
1037
+
1038
+ .#{$prefix}-checkbox-inner {
1039
+ &:after {
1040
+ background-color: $primary;
1041
+ }
1042
+ }
1043
+ }
1044
+ //.#{$prefix}-checkbox-input {
1045
+ // &:focus-visible {
1046
+ // outline: none;
1047
+ // }
1048
+ //}
1049
+
1050
+ .#{$prefix}-checkbox .#{$prefix}-checkbox-input:focus-visible+.#{$prefix}-checkbox-inner {
1051
+ outline: none;
1052
+ }
1053
+
1054
+ .#{$prefix}-checkbox {
1055
+ &.#{$prefix}-checkbox-checked {
1056
+ &:hover {
1057
+ .#{$prefix}-checkbox-inner {
1058
+ background-color: $primary;
1059
+ border-color: $primary;
1060
+ }
1061
+ }
1062
+
1063
+ .#{$prefix}-checkbox-inner {
1064
+ background-color: $primary;
1065
+ border-color: $primary;
1066
+ }
1067
+ }
1068
+ }
1069
+
1070
+ .#{$prefix}-checkbox:not(.#{$prefix}-checkbox-disabled):hover {
1071
+ .#{$prefix}-checkbox-inner {
1072
+ border-color: $primary;
1073
+ }
1074
+ }
1075
+
1076
+ .#{$prefix}-checkbox-wrapper:not(.#{$prefix}-checkbox-wrapper-disabled):hover {
1077
+ .#{$prefix}-checkbox-inner {
1078
+ border-color: $primary;
1079
+ }
1080
+
1081
+ .#{$prefix}-checkbox-checked:not(.#{$prefix}-checkbox-disabled) {
1082
+ .#{$prefix}-checkbox-inner {
1083
+ background-color: $primary;
1084
+ }
1085
+ }
1086
+ }
1087
+
1088
+ // ------------ Tree ---------------
1089
+
1090
+ .#{$prefix}-tree {
1091
+ .#{$prefix}-tree-checkbox-checked {
1092
+ .#{$prefix}-tree-checkbox-inner {
1093
+ background-color: $primary;
1094
+ border-color: $primary;
1095
+ }
1096
+ }
1097
+
1098
+ .#{$prefix}-tree-checkbox-wrapper-checked:not(.#{$prefix}-tree-checkbox-wrapper-disabled):hover,
1099
+ .#{$prefix}-tree-checkbox-checked:not(.#{$prefix}-tree-checkbox-disabled):hover {
1100
+ .#{$prefix}-tree-checkbox-inner {
1101
+ background-color: $primary;
1102
+ }
1103
+ }
1104
+
1105
+ .#{$prefix}-tree-checkbox-wrapper:not(.#{$prefix}-tree-checkbox-wrapper-disabled):hover,
1106
+ .#{$prefix}-tree-checkbox:not(.#{$prefix}-tree-checkbox-disabled):hover {
1107
+ .#{$prefix}-tree-checkbox-inner {
1108
+ border-color: $primary;
1109
+ }
1110
+ }
1111
+ }
1112
+
1113
+
1114
+ // ------------ ant Tree ---------------
1115
+
1116
+ .#{$antdPrefix}-tree {
1117
+ .#{$antdPrefix}-tree-checkbox-checked {
1118
+ .#{$antdPrefix}-tree-checkbox-inner {
1119
+ background-color: $primary;
1120
+ border-color: $primary;
1121
+ }
1122
+ }
1123
+
1124
+ .#{$antdPrefix}-tree-checkbox-wrapper-checked:not(.#{$antdPrefix}-tree-checkbox-wrapper-disabled):hover,
1125
+ .#{$antdPrefix}-tree-checkbox-checked:not(.#{$antdPrefix}-tree-checkbox-disabled):hover {
1126
+ .#{$antdPrefix}-tree-checkbox-inner {
1127
+ background-color: $primary;
1128
+ }
1129
+ }
1130
+
1131
+ .#{$antdPrefix}-tree-checkbox-wrapper:not(.#{$antdPrefix}-tree-checkbox-wrapper-disabled):hover,
1132
+ .#{$antdPrefix}-tree-checkbox:not(.#{$antdPrefix}-tree-checkbox-disabled):hover {
1133
+ .#{$antdPrefix}-tree-checkbox-inner {
1134
+ border-color: $primary;
1135
+ }
1136
+ }
1137
+ }
1138
+
1139
+
1140
+ // ------------ paging ---------------
1141
+
1142
+ .#{$prefix}-table-wrapper .#{$prefix}-table-pagination.#{$prefix}-pagination {
1143
+ margin: 0;
1144
+ }
1145
+
1146
+ .#{$prefix}-table-wrapper {
1147
+ .#{$prefix}-table {
1148
+ .#{$prefix}-pagination {
1149
+ &::before {
1150
+ content: "";
1151
+ position: absolute;
1152
+ border-left: 1px solid $tableBorderColor;
1153
+ height: 55px;
1154
+ bottom: 0;
1155
+ left: 0;
1156
+ }
1157
+
1158
+ &::after {
1159
+ content: "";
1160
+ position: absolute;
1161
+ border-left: 1px solid $tableBorderColor;
1162
+ height: 55px;
1163
+ bottom: 0;
1164
+ visibility: visible;
1165
+ right: 0;
1166
+ }
1167
+
1168
+ &.top-pagination {
1169
+ border: none;
1170
+ padding-top: 0;
1171
+ padding-bottom: 0;
1172
+ .#{$prefix}-pagination-total-text {
1173
+ margin-left: auto;
1174
+ }
1175
+ }
1176
+ border-bottom: 1px solid $tableBorderColor;
1177
+
1178
+ }
1179
+ }
1180
+ }
1181
+
1182
+
1183
+ .#{$prefix}-pagination {
1184
+
1185
+ .#{$prefix}-pagination-total-text {
1186
+ white-space: nowrap;
1187
+ }
1188
+
1189
+ .#{$prefix}-pagination-item-active {
1190
+ border-color: $primary;
1191
+
1192
+ &:hover {
1193
+ border-color: $primary;
1194
+
1195
+ a {
1196
+ color: $primary;
1197
+ }
1198
+ }
1199
+
1200
+ a {
1201
+ color: $primary;
1202
+ }
1203
+ }
1204
+
1205
+ .#{$prefix}-pagination-jump-prev, .#{$prefix}-pagination-jump-next {
1206
+ .#{$prefix}-pagination-item-container {
1207
+ .#{$prefix}-pagination-item-link-icon {
1208
+ color: $primary;
1209
+ }
1210
+ }
1211
+ }
1212
+ }
1213
+
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 {
1217
+ // border-inline-end: 1px solid $tableBorderColor;
1218
+ //}
1219
+ //
1220
+ //.#{$prefix}-table-wrapper .#{$prefix}-table.#{$prefix}-table-bordered >.#{$prefix}-table-container >.#{$prefix}-table-content >table >tbody>tr>td >.#{$prefix}-table-expanded-row-fixed::after {
1221
+ // //border-inline-end: 1px solid $tableBorderColor;
1222
+ // border-inline-end: 0 solid $tableBorderColor;
1223
+ //}
1224
+ //
1225
+ //
1226
+ //.#{$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 {
1227
+ // margin-top: 0;
1228
+ // margin-bottom: 0;
1229
+ // border-inline-end: 1px solid $tableBorderColor;
1230
+ //}
1231
+ //
1232
+ //.#{$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 {
1233
+ // border-inline-end: 0 solid $tableBorderColor;
1234
+ //}
1235
+
1236
+
1237
+ .#{$prefix}-table-wrapper {
1238
+ .#{$prefix}-table {
1239
+ &.#{$prefix}-table-bordered {
1240
+ > .#{$prefix}-table-container {
1241
+ > .#{$prefix}-table-content,
1242
+ > .#{$prefix}-table-header,
1243
+ > .#{$prefix}-table-body,
1244
+ > .#{$prefix}-table-summary {
1245
+ > table > tbody > tr {
1246
+ > th,
1247
+ > td {
1248
+ > .#{$prefix}-table-expanded-row-fixed::after {
1249
+ // Thêm CSS ở đây
1250
+ }
1251
+ }
1252
+ }
1253
+ }
1254
+ }
1255
+ }
1256
+ }
1257
+ }
1258
+
1259
+
1260
+ .#{$prefix}-table-wrapper {
1261
+ .#{$prefix}-table.#{$prefix}-table-small {
1262
+ .#{$prefix}-table-title,
1263
+ .#{$prefix}-table-footer,
1264
+ .#{$prefix}-table-cell,
1265
+ .#{$prefix}-table-thead > tr > th,
1266
+ .#{$prefix}-table-tbody > tr > th,
1267
+ .#{$prefix}-table-tbody > tr > td,
1268
+ tfoot > tr > th,
1269
+ tfoot > tr > td {
1270
+ //padding: 8px 8px;
1271
+ //font-size: 13px;
1272
+ }
1273
+ }
1274
+ }
1275
+ .#{$prefix}-table-wrapper {
1276
+ .#{$prefix}-table.#{$prefix}-table-small {
1277
+ .#{$prefix}-table-cell {
1278
+ &:has(.ant-color-picker-trigger) {
1279
+ padding: 1px 8px;
1280
+ }
1281
+ .ant-color-picker-trigger{
1282
+ width: 100%;
1283
+ min-height: 20px;
1284
+ .ant-color-picker-clear {
1285
+ height: 20px;
1286
+ }
1287
+ }
1288
+ }
1289
+ }
1290
+ }
1291
+
1292
+
1293
+
1294
+ //ui-rc-table-ping-right
1295
+
1296
+ .#{$prefix}-table-wrapper .#{$prefix}-table.#{$prefix}-table-bordered >.#{$prefix}-table-container >.#{$prefix}-table-content >table >thead>tr >.#{$prefix}-table-cell-fix-right-first::after,
1297
+ .#{$prefix}-table-wrapper .#{$prefix}-table.#{$prefix}-table-bordered >.#{$prefix}-table-container >.#{$prefix}-table-header >table >thead>tr >.#{$prefix}-table-cell-fix-right-first::after,
1298
+ .#{$prefix}-table-wrapper .#{$prefix}-table.#{$prefix}-table-bordered >.#{$prefix}-table-container >.#{$prefix}-table-body >table >thead>tr >.#{$prefix}-table-cell-fix-right-first::after,
1299
+ .#{$prefix}-table-wrapper .#{$prefix}-table.#{$prefix}-table-bordered >.#{$prefix}-table-container >.#{$prefix}-table-summary >table >thead>tr >.#{$prefix}-table-cell-fix-right-first::after,
1300
+ .#{$prefix}-table-wrapper .#{$prefix}-table.#{$prefix}-table-bordered >.#{$prefix}-table-container >.#{$prefix}-table-content >table >tbody>tr >.#{$prefix}-table-cell-fix-right-first::after,
1301
+ .#{$prefix}-table-wrapper .#{$prefix}-table.#{$prefix}-table-bordered >.#{$prefix}-table-container >.#{$prefix}-table-header >table >tbody>tr >.#{$prefix}-table-cell-fix-right-first::after,
1302
+ .#{$prefix}-table-wrapper .#{$prefix}-table.#{$prefix}-table-bordered >.#{$prefix}-table-container >.#{$prefix}-table-body >table >tbody>tr >.#{$prefix}-table-cell-fix-right-first::after,
1303
+ .#{$prefix}-table-wrapper .#{$prefix}-table.#{$prefix}-table-bordered >.#{$prefix}-table-container >.#{$prefix}-table-summary >table >tbody>tr >.#{$prefix}-table-cell-fix-right-first::after,
1304
+ .#{$prefix}-table-wrapper .#{$prefix}-table.#{$prefix}-table-bordered >.#{$prefix}-table-container >.#{$prefix}-table-content >table >tfoot>tr >.#{$prefix}-table-cell-fix-right-first::after,
1305
+ .#{$prefix}-table-wrapper .#{$prefix}-table.#{$prefix}-table-bordered >.#{$prefix}-table-container >.#{$prefix}-table-header >table >tfoot>tr >.#{$prefix}-table-cell-fix-right-first::after,
1306
+ .#{$prefix}-table-wrapper .#{$prefix}-table.#{$prefix}-table-bordered >.#{$prefix}-table-container >.#{$prefix}-table-body >table >tfoot>tr >.#{$prefix}-table-cell-fix-right-first::after,
1307
+ .#{$prefix}-table-wrapper .#{$prefix}-table.#{$prefix}-table-bordered >.#{$prefix}-table-container >.#{$prefix}-table-summary >table >tfoot>tr >.#{$prefix}-table-cell-fix-right-first::after {
1308
+ border-inline-end: 1px solid $tableBorderColor;
1309
+ }
1310
+
1311
+
1312
+ // toolbar
1313
+
1314
+ .ui-rc-toolbar-bottom {
1315
+ .be-toolbar-item {
1316
+ .toolbar-dropdown-button {
1317
+ .ant-btn.ant-btn-default.ant-btn-variant-outlined.ant-btn-compact-item.ant-btn-compact-first-item {
1318
+ border-color: #28c76f;
1319
+ }
1320
+ .ant-btn.ant-btn-default.ant-btn-variant-outlined.ant-btn-compact-item.ant-btn-compact-last-item {
1321
+ border-color: #28c76f;
1322
+ .ant-btn-icon {
1323
+ color: #28c76f;
1324
+ }
1325
+ }
1326
+ }
1327
+
1328
+ }
1329
+ }
1330
+
1331
+
1332
+ .react-resizable {
1333
+ position: relative;
1334
+ background-clip: padding-box;
1335
+ }
1336
+
1337
+ .rc-resizable-handle {
1338
+ position: absolute;
1339
+ //right: 10px;
1340
+ right: 0px;
1341
+ bottom: 0;
1342
+ z-index: 1;
1343
+ width: 5px;
1344
+ height: 100%;
1345
+ cursor: col-resize;
1346
+ //transform: translateY(-50%);
1347
+ &.none {
1348
+ cursor: auto;
1349
+ display: none;
1350
+ }
1351
+ }
1352
+
1353
+ .rs-picker-popup {
1354
+ z-index: 1660;
1355
+ }