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