es-grid-template 1.4.3 → 1.4.5

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