es-grid-template 1.2.2 → 1.2.3

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 (13) hide show
  1. package/assets/index.css +3 -0
  2. package/assets/index.scss +1064 -1063
  3. package/es/grid-component/GridStyle.js +1 -1
  4. package/es/grid-component/TableGrid.js +3 -2
  5. package/es/grid-component/styles.scss +1 -0
  6. package/es/grid-component/table/GridEdit.js +1 -1
  7. package/es/grid-component/type.d.ts +1 -0
  8. package/lib/grid-component/GridStyle.js +1 -1
  9. package/lib/grid-component/TableGrid.js +3 -2
  10. package/lib/grid-component/styles.scss +1 -0
  11. package/lib/grid-component/table/GridEdit.js +1 -1
  12. package/lib/grid-component/type.d.ts +1 -0
  13. package/package.json +1 -1
package/assets/index.scss CHANGED
@@ -1,1063 +1,1064 @@
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: #f0f0f0 !default;
9
- $border-radius: 6px !default;
10
- $border-selected-color: #0550C5 !default;
11
- $body-color: #ffffff !default;
12
- $cell-selected-bg: #E6EFFD !default;
13
- $cell-index-selected-bg: #0550C5 !default;
14
- $cell-index-focus-bg: #CEDBEF !default;
15
- $rowSelectedHoverBg: 'ui-rc' !default;
16
- $boxShadowColor: rgba(5, 5, 5, 0.09) !default;
17
- $fontFamily: "Montserrat",Helvetica,Arial,serif !default;
18
-
19
- .react-hot-toast {
20
- font-size: 1rem;
21
- color: $body-color;
22
- letter-spacing: 0.14px;
23
- box-shadow: 0px 4px 10px -4px rgb(58 53 65 / 60%);
24
- border-radius: $border-radius;
25
- }
26
-
27
- .popup-context-menu {
28
- min-width: 200px;
29
- }
30
-
31
- // -------------- Table -------------
32
-
33
- .#{$prefix}-table-wrapper {
34
-
35
- p {
36
- margin: 0;
37
- }
38
-
39
- .ui-rc-table {
40
- //font-family: $fontFamily;
41
- color: #000000de;
42
- //font-weight: 500;
43
- }
44
-
45
-
46
-
47
- &.table-none-column-select {
48
- .#{$prefix}-table-cell {
49
- &.#{$prefix}-table-selection-column {
50
- padding: 0 !important;
51
- overflow: hidden !important;
52
- border-inline-end: 0 !important;
53
- //flex: 0 0 0 !important;
54
- //width: 0 !important;
55
- }
56
- }
57
- }
58
-
59
- .#{$prefix}-table {
60
- line-height: 20px;
61
- .#{$prefix}-table-cell {
62
-
63
- .#{$prefix}-table-filter-column {
64
- .#{$prefix}-dropdown-trigger.#{$prefix}-table-filter-trigger {
65
- margin-left: 0;
66
- }
67
- }
68
-
69
- &.cell-group {
70
- font-weight: 600;
71
- background-color: #f5f5f5;
72
- border-inline-end-color: transparent !important;
73
-
74
- }
75
- &.cell-group-fixed {
76
- font-weight: 600;
77
- position: sticky;
78
- text-align: left !important;
79
- left: 0;
80
- z-index: 15;
81
- }
82
-
83
- }
84
-
85
- }
86
-
87
- .#{$prefix}-table-tbody-virtual {
88
- .#{$prefix}-table-cell {
89
- border-bottom: 1px solid $tableBorderColor;
90
- }
91
- }
92
-
93
- .#{$prefix}-table-bordered {
94
-
95
- .#{$prefix}-table-tbody-virtual {
96
- .#{$prefix}-table-cell {
97
- //display: flex;
98
- border-inline-end: 1px solid $tableBorderColor;
99
- }
100
- }
101
- .#{$prefix}-table-container {
102
- .#{$prefix}-table-thead {
103
-
104
- > tr{
105
- > th.#{$prefix}-table-cell:last-of-type {
106
- //border-inline-end: 0;
107
- }
108
- }
109
-
110
- }
111
- .#{$prefix}-table-summary {
112
- > tr{
113
- > td.#{$prefix}-table-cell:last-of-type {
114
- //border-inline-end: 0;
115
- }
116
- }
117
- }
118
- }
119
-
120
- }
121
-
122
- .#{$prefix}-table-tbody {
123
-
124
- .#{$prefix}-table-row {
125
-
126
- &.#{$prefix}-table-row-selected {
127
- > .#{$prefix}-table-cell {
128
- background: #FEF2EF;
129
- }
130
- }
131
-
132
- &.row-disabled {
133
- .#{$prefix}-table-cell {
134
- //background-color: #f5f5f5;
135
- }
136
- }
137
-
138
- > .#{$prefix}-table-cell {
139
- &.#{$prefix}-table-cell-row-hover {
140
- background: #FBDED6;
141
- }
142
-
143
- &.#{$prefix}-cell-command {
144
- padding: 5px 8px;
145
-
146
- .#{$prefix}-cell-command__content {
147
- display: flex;
148
- gap: 5px;
149
- overflow: hidden;
150
- }
151
- }
152
-
153
-
154
- }
155
-
156
- .#{$prefix}-table-cell:last-of-type {
157
- //border-inline-end: 0;
158
- }
159
-
160
-
161
- @for $i from 0 through 10 {
162
- &:has(.indent-level-#{$i}) {
163
- .#{$prefix}-table-cell {
164
- &.cell-number {
165
- .ui-rc_content {
166
- padding-left: $i * 10px;
167
- }
168
- }
169
- }
170
- }
171
- }
172
-
173
- }
174
-
175
- .#{$prefix}-table-placeholder {
176
- .#{$prefix}-table-cell {
177
- padding-top: 0 !important;
178
- padding-bottom: 0 !important;
179
- .#{$prefix}-table-expanded-row-fixed {
180
- margin-top: 0 !important;
181
- margin-bottom: 0 !important;
182
- }
183
- }
184
- }
185
- }
186
-
187
- .#{$prefix}-table-thead {
188
- //font-weight: 400;
189
-
190
- > tr {
191
- > th,
192
- > td {
193
- border-bottom: 1px solid $tableBorderColor;
194
- //background: #fff;
195
- font-weight: 500;
196
- }
197
- }
198
-
199
- .#{$prefix}-table-cell {
200
-
201
- &.#{$prefix}-table-cell-fix-left-last {
202
- .#{$prefix}-table-cell-content {
203
- //overflow: visible;
204
- }
205
- }
206
- .#{$prefix}-table-column-title {
207
- //display: flex;
208
- }
209
- }
210
- }
211
-
212
- .#{$prefix}-table-summary {
213
- .#{$prefix}-table-cell {
214
- background-color: #fafafa;
215
- height: 39px;
216
- font-weight: 600;
217
- }
218
-
219
- > tr > td {
220
- border-bottom: 1px solid $tableBorderColor;
221
- }
222
- }
223
-
224
- .#{$prefix}-table-bordered .#{$prefix}-table-tbody-virtual .#{$prefix}-table-cell.#{$prefix}-table-cell-fix-right-first:before {
225
- border-inline-start: 1px solid $tableBorderColor;
226
- }
227
-
228
- .#{$prefix}-table {
229
-
230
- &.#{$prefix}-table-bordered {
231
- > .#{$prefix}-table-container {
232
- border-inline-start: 1px solid $tableBorderColor;
233
- border-top: 1px solid $tableBorderColor;
234
-
235
- &::after {
236
- border-inline-end: 1px solid $tableBorderColor;
237
- }
238
-
239
- > .#{$prefix}-table-content,
240
- > .#{$prefix}-table-header,
241
- > .#{$prefix}-table-body,
242
- > .#{$prefix}-table-summary {
243
- > table {
244
- > thead {
245
- > tr:not(:last-child) {
246
- > th {
247
- border-bottom: 1px solid $tableBorderColor;
248
- }
249
- }
250
- }
251
- }
252
- }
253
-
254
-
255
- > .#{$prefix}-table-content,
256
- > .#{$prefix}-table-header,
257
- > .#{$prefix}-table-body,
258
- > .#{$prefix}-table-summary {
259
- > table {
260
- > thead,
261
- > tbody,
262
- > tfoot {
263
- > tr {
264
- > th,
265
- > td {
266
- border-inline-end: 1px solid $tableBorderColor;
267
- }
268
- }
269
- }
270
- }
271
- }
272
-
273
- }
274
-
275
- > .#{$prefix}-table-title {
276
- border: 1px solid $tableBorderColor;
277
- border-bottom: 0;
278
- }
279
- }
280
-
281
- &.#{$prefix}-table-ping-right:not(.#{$prefix}-table-has-fix-right) .#{$prefix}-table-container::after {
282
- box-shadow: inset -10px 0 8px -8px $boxShadowColor;
283
- //box-shadow: none;
284
- }
285
-
286
-
287
- }
288
-
289
- .#{$prefix}-table-ping-left {
290
- .#{$prefix}-table-cell-fix-left-first::after,
291
- .#{$prefix}-table-cell-fix-left-last::after {
292
- box-shadow: inset 10px 0 8px -8px $boxShadowColor;
293
- }
294
- }
295
-
296
- .#{$prefix}-table-ping-right {
297
- .#{$prefix}-table-cell-fix-right-first::after,
298
- .#{$prefix}-table-cell-fix-right-last::after {
299
- box-shadow: inset -10px 0 8px -8px $boxShadowColor;
300
- }
301
- }
302
-
303
-
304
- .#{$prefix}-table.#{$prefix}-table-bordered {
305
- > .#{$prefix}-table-container {
306
- > .#{$prefix}-table-header > table > thead > tr,
307
- > .#{$prefix}-table-summary > table > tfoot > tr {
308
- > .#{$prefix}-table-cell-fix-right-first::before {
309
- border-inline-start: 1px solid $tableBorderColor;
310
- content: "";
311
- position: absolute;
312
- inset-block: 0;
313
- inset-inline-start: -1px;
314
- }
315
- }
316
- }
317
- }
318
-
319
-
320
- }
321
-
322
- // -------------- Table edit-------------
323
-
324
- .#{$prefix}-table-wrapper {
325
-
326
- &.grid-editable {
327
-
328
- .#{$prefix}-table-row {
329
- &:has(+ .#{$prefix}-table-cell) {
330
-
331
- }
332
- }
333
-
334
- .#{$prefix}-table .#{$prefix}-table-tbody .rc-ui-cell-editable {
335
- overflow: unset;
336
-
337
- display: flex;
338
- //--------
339
- padding: 0;
340
-
341
- .#{$prefix}-table-row-expand-icon {
342
- top: 8px;
343
- left: 8px;
344
- }
345
-
346
- &.cell-editable {
347
- &.cell-border-top {
348
- border-bottom: 1px solid $border-selected-color;
349
- }
350
-
351
- &.cell-border-bottom {
352
- border-bottom: 1px solid $border-selected-color;
353
- }
354
-
355
- &.cell-paste-border-bottom {
356
- border-bottom: 1px dashed #949494;
357
- }
358
-
359
- &.cell-border-left {
360
- border-inline-end: 1px solid $border-selected-color;
361
- }
362
-
363
- &.cell-paste-border-left {
364
- border-inline-end: 1px dashed #949494;
365
- }
366
-
367
- &.cell-border-right {
368
- border-inline-end: 1px solid $border-selected-color;
369
- }
370
-
371
- &.cell-paste-border-right {
372
- border-inline-end: 1px dashed #949494;
373
- }
374
-
375
- &.#{$prefix}-table-cell-fix-left {
376
- &:has(.ui-rc_cell-content.selected) {
377
- }
378
-
379
- }
380
-
381
- &.#{$prefix}-table-cell-fix-right {
382
- &:has(.ui-rc_cell-content.selected) {
383
- }
384
-
385
- &.cell-border-end {
386
- z-index: 3;
387
- }
388
-
389
- }
390
-
391
-
392
- &.cell-border-end {
393
- z-index: 1;
394
- }
395
-
396
- &.#{$prefix}-table-cell-fix-right-first {
397
-
398
- &.cell-border-end {
399
- z-index: 3;
400
- }
401
-
402
- &.next-cell-border-left {
403
- &::before {
404
- border-inline-start: 1px solid $border-selected-color;
405
- }
406
- }
407
-
408
-
409
- &.next-cell-paste-border-left {
410
- &::before {
411
- border-inline-start: 1px dashed #949494;
412
- }
413
- }
414
-
415
- &.fixed-cell-border-left {
416
- &::before {
417
- border-inline-start: 1px solid $border-selected-color;
418
- }
419
- }
420
- &.fixed-cell-paste-border-left {
421
- &::before {
422
- border-inline-start: 1px dashed #949494;
423
- }
424
- }
425
-
426
- }
427
-
428
- &.#{$prefix}-table-cell-fix-left-last {
429
-
430
- &.cell-border-end {
431
- z-index: 3;
432
- }
433
-
434
- }
435
-
436
- }
437
-
438
-
439
- }
440
-
441
- .#{$prefix}-table.#{$prefix}-table-ping-left {
442
- .#{$prefix}-table-tbody .rc-ui-cell-editable{
443
- &.cell-editable {
444
-
445
-
446
- &.#{$prefix}-table-cell-fix-left-last {
447
-
448
- &.cell-border-left {
449
- border-inline-end: 1px solid $tableBorderColor;
450
- }
451
-
452
- }
453
-
454
-
455
-
456
- }
457
- }
458
-
459
- &:not(.#{$prefix}-table.#{$prefix}-table-ping-right) {
460
-
461
- .#{$prefix}-table-tbody .rc-ui-cell-editable {
462
- &.cell-editable {
463
-
464
- // //&.cell-border-end {
465
- // // z-index: 1;
466
- // //}
467
-
468
- &.#{$prefix}-table-cell-fix-right {
469
- z-index: 0;
470
-
471
- &.cell-border-end {
472
- z-index: 3;
473
- }
474
- }
475
-
476
- }
477
- }
478
-
479
- }
480
-
481
- }
482
-
483
- .#{$prefix}-table.#{$prefix}-table-ping-right {
484
- .#{$prefix}-table-tbody .rc-ui-cell-editable{
485
-
486
- &.cell-editable {
487
-
488
- &.#{$prefix}-table-cell-fix-right-first {
489
-
490
- &.next-cell-border-left {
491
- &::before {
492
- border-inline-start: 1px solid $tableBorderColor;
493
- }
494
- }
495
-
496
-
497
-
498
- }
499
-
500
- &.#{$prefix}-table-cell-fix-left-last {
501
- &.cell-border-end {
502
- z-index: 3;
503
- }
504
- }
505
-
506
- }
507
-
508
- &.cell-border-end {
509
- z-index: 1;
510
- }
511
-
512
- }
513
-
514
- }
515
-
516
-
517
- .#{$prefix}-table.#{$prefix}-table-small {
518
- .#{$prefix}-table-thead > tr > th,
519
- tfoot > tr > th,
520
- tfoot > tr > td,
521
- tfoot > tr > td.#{$prefix}-table-cell
522
- {
523
- //padding: 8px 8px;
524
- }
525
- }
526
-
527
- .#{$prefix}-table.#{$prefix}-table-small {
528
- .#{$prefix}-table-selection-column{
529
- //padding: 8px 8px;
530
- padding: 6px 8px;
531
- }
532
- }
533
-
534
- .ui-rc_cell-content {
535
- //position: relative;
536
- user-select: none;
537
- //padding: 8px 8px;
538
- padding: 7px 8px;
539
- //min-height: 23px;
540
- overflow: hidden;
541
-
542
- .ui-rc_content {
543
- width: 100%;
544
- }
545
- &:hover {
546
- .dragging-point {
547
- //visibility: visible;
548
- }
549
- }
550
-
551
- .dragging-point {
552
- //visibility: hidden;
553
- width: 10px;
554
- height: 10px;
555
- position: absolute;
556
- cursor: crosshair;
557
- right: 0;
558
- bottom: 0;
559
- //background: red;
560
-
561
- .dot-point {
562
- position: absolute;
563
- width: 8px;
564
- height: 8px;
565
- border-radius: 6px;
566
- background-color: $border-selected-color;
567
- bottom: -4px;
568
- right: -4px;
569
- }
570
-
571
- }
572
- }
573
-
574
- .ui-rc_cell-content.selected {
575
- background-color: $cell-selected-bg;
576
- }
577
-
578
- .ui-rc_cell-content--index {
579
- &.focus {
580
- background-color: $cell-index-focus-bg;
581
- //color: #fff;
582
- //font-weight: 500;
583
- }
584
- &.selected {
585
- background-color: $cell-index-selected-bg;
586
- color: #fff;
587
- //font-weight: 500;
588
- }
589
- }
590
-
591
- .#{$prefix}-table-tbody {
592
-
593
- .#{$prefix}-table-row {
594
- &.#{$prefix}-table-row-selected {
595
- >.#{$prefix}-table-cell {
596
- background: #FEF2EF;
597
- }
598
- }
599
- >.#{$prefix}-table-cell {
600
- &.#{$prefix}-table-cell-row-hover {
601
- background: #FBDED6;
602
- }
603
- }
604
-
605
- .#{$prefix}-table-cell {
606
-
607
- .#{$prefix}-table-row-indent {
608
- position: absolute;
609
- @for $i from 1 through 10 {
610
- &.indent-level-#{$i} {
611
- padding-left: $i * 25px;;
612
- }
613
- }
614
- }
615
-
616
- @for $i from 0 through 10 {
617
- &:has(.indent-level-#{$i}) {
618
-
619
- .#{$prefix}-table-row-expand-icon {
620
- position: absolute;
621
- //.ui-rc_content {
622
- padding-left: $i * 10px;
623
- //}
624
- }
625
-
626
- .ui-rc_cell-content {
627
- padding-left: $i * 25px + 8px;
628
- }
629
-
630
- }
631
- }
632
-
633
- @for $i from 0 through 10 {
634
- &:has(.indent-level-#{$i}) {
635
-
636
- .#{$prefix}-table-row-expand-icon {
637
- position: absolute;
638
- left: $i * 25px + 8px !important;
639
- }
640
-
641
- .ui-rc_cell-content {
642
- padding-left: ($i + 1)* 25px + 8px;
643
- }
644
-
645
- }
646
- }
647
- }
648
- }
649
-
650
-
651
- .#{$prefix}-table-cell{
652
-
653
- &.#{$prefix}-table-cell-ellipsis {
654
- .ui-rc_cell-content {
655
-
656
- .ui-rc_content {
657
- text-overflow: ellipsis;
658
- text-decoration: none;
659
- transition: 0.3s;
660
- white-space: nowrap;
661
- overflow: hidden;
662
- }
663
- }
664
- }
665
-
666
- &.cell-editing {
667
- //padding: 0 !important;
668
- &:focus-visible {
669
- outline: none;
670
- }
671
- .ant-form-item ,
672
- .ant-row.ant-form-item-row,
673
- .ant-col.ant-form-item-control,
674
- .ant-form-item-control-input,
675
- .ant-form-item-control-input-content,
676
- .ant-input{
677
- height: 100%;
678
- &:focus-visible {
679
- outline: none;
680
- }
681
- }
682
-
683
- .#{$prefix}-checkbox-wrapper {
684
- .#{$prefix}-checkbox {
685
- background-color: red;
686
- }
687
- .#{$prefix}-checkbox-input {
688
- &:focus-visible {
689
- outline: none;
690
- }
691
- }
692
- }
693
-
694
-
695
- .ant-input, .ant-picker{
696
- border-radius: 0;
697
- }
698
-
699
- // color picker
700
-
701
- .ant-color-picker-trigger{
702
- height: 100%;
703
- border-radius: 0;
704
- .ant-color-picker-color-block {
705
- height: 100%;
706
- width: 100%;
707
- }
708
-
709
- }
710
-
711
-
712
- // ------------ select ---------------
713
-
714
- .#{$prefix}-table-select-single .#{$prefix}-table-select-selector,
715
- .#{$prefix}-select-single .#{$prefix}-select-selector {
716
-
717
- border-radius: 0;
718
-
719
- }
720
-
721
- .#{$prefix}-table-select-single:not(.#{$prefix}-table-select-customize-input) {
722
- .#{$prefix}-table-select-selector {
723
- .#{$prefix}-table-select-selection-search-input {
724
- height: auto;
725
- }
726
- }
727
- }
728
-
729
- // ------------ select ---------------
730
-
731
-
732
- }
733
- &.cell-editable {
734
- &:focus-visible {
735
- outline: none;
736
- }
737
- }
738
- .#{$prefix}-table-cell-content {
739
- display: flex;
740
- height: 100%;
741
- }
742
-
743
- .ui-rc_cell-content,
744
- .#{$prefix}-table-cell-content{
745
- //width: 100%;
746
- flex: 1;
747
- }
748
- .ui-rc_content {
749
- //padding: 5px 8px;
750
- }
751
- .ui-rc_content:has(.ant-color-picker-trigger) {
752
- padding: 1px 8px;
753
- }
754
- }
755
- }
756
-
757
- }
758
-
759
- }
760
- // ---------------- Table edit end---------------
761
-
762
-
763
- // -------------- Checkbox ----------
764
-
765
- .#{$prefix}-checkbox-indeterminate {
766
- &:hover {
767
- .#{$prefix}-checkbox-inner {
768
- border-color: $primary !important;;
769
- }
770
- }
771
-
772
- .#{$prefix}-checkbox-inner {
773
- &:after {
774
- background-color: $primary;
775
- }
776
- }
777
- }
778
- //.#{$prefix}-checkbox-input {
779
- // &:focus-visible {
780
- // outline: none;
781
- // }
782
- //}
783
-
784
- .#{$prefix}-checkbox .#{$prefix}-checkbox-input:focus-visible+.#{$prefix}-checkbox-inner {
785
- outline: none;
786
- }
787
-
788
- .#{$prefix}-checkbox {
789
- &.#{$prefix}-checkbox-checked {
790
- &:hover {
791
- .#{$prefix}-checkbox-inner {
792
- background-color: $primary;
793
- border-color: $primary;
794
- }
795
- }
796
-
797
- .#{$prefix}-checkbox-inner {
798
- background-color: $primary;
799
- border-color: $primary;
800
- }
801
- }
802
- }
803
-
804
- .#{$prefix}-checkbox:not(.#{$prefix}-checkbox-disabled):hover {
805
- .#{$prefix}-checkbox-inner {
806
- border-color: $primary;
807
- }
808
- }
809
-
810
- .#{$prefix}-checkbox-wrapper:not(.#{$prefix}-checkbox-wrapper-disabled):hover {
811
- .#{$prefix}-checkbox-inner {
812
- border-color: $primary;
813
- }
814
-
815
- .#{$prefix}-checkbox-checked:not(.#{$prefix}-checkbox-disabled) {
816
- .#{$prefix}-checkbox-inner {
817
- background-color: $primary;
818
- }
819
- }
820
- }
821
-
822
- // ------------ Tree ---------------
823
-
824
- .#{$prefix}-tree {
825
- .#{$prefix}-tree-checkbox-checked {
826
- .#{$prefix}-tree-checkbox-inner {
827
- background-color: $primary;
828
- border-color: $primary;
829
- }
830
- }
831
-
832
- .#{$prefix}-tree-checkbox-wrapper-checked:not(.#{$prefix}-tree-checkbox-wrapper-disabled):hover,
833
- .#{$prefix}-tree-checkbox-checked:not(.#{$prefix}-tree-checkbox-disabled):hover {
834
- .#{$prefix}-tree-checkbox-inner {
835
- background-color: $primary;
836
- }
837
- }
838
-
839
- .#{$prefix}-tree-checkbox-wrapper:not(.#{$prefix}-tree-checkbox-wrapper-disabled):hover,
840
- .#{$prefix}-tree-checkbox:not(.#{$prefix}-tree-checkbox-disabled):hover {
841
- .#{$prefix}-tree-checkbox-inner {
842
- border-color: $primary;
843
- }
844
- }
845
- }
846
-
847
-
848
- // ------------ ant Tree ---------------
849
-
850
- .#{$antdPrefix}-tree {
851
- .#{$antdPrefix}-tree-checkbox-checked {
852
- .#{$antdPrefix}-tree-checkbox-inner {
853
- background-color: $primary;
854
- border-color: $primary;
855
- }
856
- }
857
-
858
- .#{$antdPrefix}-tree-checkbox-wrapper-checked:not(.#{$antdPrefix}-tree-checkbox-wrapper-disabled):hover,
859
- .#{$antdPrefix}-tree-checkbox-checked:not(.#{$antdPrefix}-tree-checkbox-disabled):hover {
860
- .#{$antdPrefix}-tree-checkbox-inner {
861
- background-color: $primary;
862
- }
863
- }
864
-
865
- .#{$antdPrefix}-tree-checkbox-wrapper:not(.#{$antdPrefix}-tree-checkbox-wrapper-disabled):hover,
866
- .#{$antdPrefix}-tree-checkbox:not(.#{$antdPrefix}-tree-checkbox-disabled):hover {
867
- .#{$antdPrefix}-tree-checkbox-inner {
868
- border-color: $primary;
869
- }
870
- }
871
- }
872
-
873
-
874
- // ------------ paging ---------------
875
-
876
- .#{$prefix}-table-wrapper .#{$prefix}-table-pagination.#{$prefix}-pagination {
877
- margin: 0;
878
- }
879
-
880
- .#{$prefix}-table-wrapper {
881
- .#{$prefix}-table {
882
- .#{$prefix}-pagination {
883
- &::before {
884
- content: "";
885
- position: absolute;
886
- border-left: 1px solid $tableBorderColor;
887
- height: 55px;
888
- bottom: 0;
889
- left: 0;
890
- }
891
-
892
- &::after {
893
- content: "";
894
- position: absolute;
895
- border-left: 1px solid $tableBorderColor;
896
- height: 55px;
897
- bottom: 0;
898
- visibility: visible;
899
- right: 0;
900
- }
901
-
902
- &.top-pagination {
903
- border: none;
904
- padding-top: 0;
905
- padding-bottom: 0;
906
- .#{$prefix}-pagination-total-text {
907
- margin-left: auto;
908
- }
909
- }
910
- border-bottom: 1px solid $tableBorderColor;
911
-
912
- }
913
- }
914
- }
915
-
916
-
917
- .#{$prefix}-pagination {
918
-
919
- .#{$prefix}-pagination-total-text {
920
- white-space: nowrap;
921
- }
922
-
923
- .#{$prefix}-pagination-item-active {
924
- border-color: $primary;
925
-
926
- &:hover {
927
- border-color: $primary;
928
-
929
- a {
930
- color: $primary;
931
- }
932
- }
933
-
934
- a {
935
- color: $primary;
936
- }
937
- }
938
-
939
- .#{$prefix}-pagination-jump-prev, .#{$prefix}-pagination-jump-next {
940
- .#{$prefix}-pagination-item-container {
941
- .#{$prefix}-pagination-item-link-icon {
942
- color: $primary;
943
- }
944
- }
945
- }
946
- }
947
-
948
-
949
-
950
- //.#{$prefix}-table-wrapper .#{$prefix}-table.#{$prefix}-table-bordered >.#{$prefix}-table-container >.#{$prefix}-table-content >table >tbody>tr>td >.#{$prefix}-table-expanded-row-fixed {
951
- // border-inline-end: 1px solid $tableBorderColor;
952
- //}
953
- //
954
- //.#{$prefix}-table-wrapper .#{$prefix}-table.#{$prefix}-table-bordered >.#{$prefix}-table-container >.#{$prefix}-table-content >table >tbody>tr>td >.#{$prefix}-table-expanded-row-fixed::after {
955
- // //border-inline-end: 1px solid $tableBorderColor;
956
- // border-inline-end: 0 solid $tableBorderColor;
957
- //}
958
- //
959
- //
960
- //.#{$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 {
961
- // margin-top: 0;
962
- // margin-bottom: 0;
963
- // border-inline-end: 1px solid $tableBorderColor;
964
- //}
965
- //
966
- //.#{$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 {
967
- // border-inline-end: 0 solid $tableBorderColor;
968
- //}
969
-
970
-
971
- .#{$prefix}-table-wrapper {
972
- .#{$prefix}-table {
973
- &.#{$prefix}-table-bordered {
974
- > .#{$prefix}-table-container {
975
- > .#{$prefix}-table-content,
976
- > .#{$prefix}-table-header,
977
- > .#{$prefix}-table-body,
978
- > .#{$prefix}-table-summary {
979
- > table > tbody > tr {
980
- > th,
981
- > td {
982
- > .#{$prefix}-table-expanded-row-fixed::after {
983
- // Thêm CSS ở đây
984
- }
985
- }
986
- }
987
- }
988
- }
989
- }
990
- }
991
- }
992
-
993
-
994
- .#{$prefix}-table-wrapper {
995
- .#{$prefix}-table.#{$prefix}-table-small {
996
- .#{$prefix}-table-title,
997
- .#{$prefix}-table-footer,
998
- .#{$prefix}-table-cell,
999
- .#{$prefix}-table-thead > tr > th,
1000
- .#{$prefix}-table-tbody > tr > th,
1001
- .#{$prefix}-table-tbody > tr > td,
1002
- tfoot > tr > th,
1003
- tfoot > tr > td {
1004
- //padding: 8px 8px;
1005
- //font-size: 13px;
1006
- }
1007
- }
1008
- }
1009
- .#{$prefix}-table-wrapper {
1010
- .#{$prefix}-table.#{$prefix}-table-small {
1011
- .#{$prefix}-table-cell {
1012
- &:has(.ant-color-picker-trigger) {
1013
- padding: 1px 8px;
1014
- }
1015
- .ant-color-picker-trigger{
1016
- width: 100%;
1017
- min-height: 20px;
1018
- .ant-color-picker-clear {
1019
- height: 20px;
1020
- }
1021
- }
1022
- }
1023
- }
1024
- }
1025
-
1026
-
1027
-
1028
- //ui-rc-table-ping-right
1029
-
1030
- .#{$prefix}-table-wrapper .#{$prefix}-table.#{$prefix}-table-bordered >.#{$prefix}-table-container >.#{$prefix}-table-content >table >thead>tr >.#{$prefix}-table-cell-fix-right-first::after,
1031
- .#{$prefix}-table-wrapper .#{$prefix}-table.#{$prefix}-table-bordered >.#{$prefix}-table-container >.#{$prefix}-table-header >table >thead>tr >.#{$prefix}-table-cell-fix-right-first::after,
1032
- .#{$prefix}-table-wrapper .#{$prefix}-table.#{$prefix}-table-bordered >.#{$prefix}-table-container >.#{$prefix}-table-body >table >thead>tr >.#{$prefix}-table-cell-fix-right-first::after,
1033
- .#{$prefix}-table-wrapper .#{$prefix}-table.#{$prefix}-table-bordered >.#{$prefix}-table-container >.#{$prefix}-table-summary >table >thead>tr >.#{$prefix}-table-cell-fix-right-first::after,
1034
- .#{$prefix}-table-wrapper .#{$prefix}-table.#{$prefix}-table-bordered >.#{$prefix}-table-container >.#{$prefix}-table-content >table >tbody>tr >.#{$prefix}-table-cell-fix-right-first::after,
1035
- .#{$prefix}-table-wrapper .#{$prefix}-table.#{$prefix}-table-bordered >.#{$prefix}-table-container >.#{$prefix}-table-header >table >tbody>tr >.#{$prefix}-table-cell-fix-right-first::after,
1036
- .#{$prefix}-table-wrapper .#{$prefix}-table.#{$prefix}-table-bordered >.#{$prefix}-table-container >.#{$prefix}-table-body >table >tbody>tr >.#{$prefix}-table-cell-fix-right-first::after,
1037
- .#{$prefix}-table-wrapper .#{$prefix}-table.#{$prefix}-table-bordered >.#{$prefix}-table-container >.#{$prefix}-table-summary >table >tbody>tr >.#{$prefix}-table-cell-fix-right-first::after,
1038
- .#{$prefix}-table-wrapper .#{$prefix}-table.#{$prefix}-table-bordered >.#{$prefix}-table-container >.#{$prefix}-table-content >table >tfoot>tr >.#{$prefix}-table-cell-fix-right-first::after,
1039
- .#{$prefix}-table-wrapper .#{$prefix}-table.#{$prefix}-table-bordered >.#{$prefix}-table-container >.#{$prefix}-table-header >table >tfoot>tr >.#{$prefix}-table-cell-fix-right-first::after,
1040
- .#{$prefix}-table-wrapper .#{$prefix}-table.#{$prefix}-table-bordered >.#{$prefix}-table-container >.#{$prefix}-table-body >table >tfoot>tr >.#{$prefix}-table-cell-fix-right-first::after,
1041
- .#{$prefix}-table-wrapper .#{$prefix}-table.#{$prefix}-table-bordered >.#{$prefix}-table-container >.#{$prefix}-table-summary >table >tfoot>tr >.#{$prefix}-table-cell-fix-right-first::after {
1042
- border-inline-end: 1px solid $tableBorderColor;
1043
- }
1044
-
1045
-
1046
- // toolbar
1047
-
1048
- .ui-rc-toolbar-bottom {
1049
- .be-toolbar-item {
1050
- .toolbar-dropdown-button {
1051
- .ant-btn.ant-btn-default.ant-btn-variant-outlined.ant-btn-compact-item.ant-btn-compact-first-item {
1052
- border-color: #28c76f;
1053
- }
1054
- .ant-btn.ant-btn-default.ant-btn-variant-outlined.ant-btn-compact-item.ant-btn-compact-last-item {
1055
- border-color: #28c76f;
1056
- .ant-btn-icon {
1057
- color: #28c76f;
1058
- }
1059
- }
1060
- }
1061
-
1062
- }
1063
- }
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: #f0f0f0 !default;
9
+ $border-radius: 6px !default;
10
+ $border-selected-color: #0550C5 !default;
11
+ $body-color: #ffffff !default;
12
+ $cell-selected-bg: #E6EFFD !default;
13
+ $cell-index-selected-bg: #0550C5 !default;
14
+ $cell-index-focus-bg: #CEDBEF !default;
15
+ $rowSelectedHoverBg: 'ui-rc' !default;
16
+ $boxShadowColor: rgba(5, 5, 5, 0.09) !default;
17
+ $fontFamily: "Montserrat",Helvetica,Arial,serif !default;
18
+
19
+ .react-hot-toast {
20
+ font-size: 1rem;
21
+ color: $body-color;
22
+ letter-spacing: 0.14px;
23
+ box-shadow: 0px 4px 10px -4px rgb(58 53 65 / 60%);
24
+ border-radius: $border-radius;
25
+ }
26
+
27
+ .popup-context-menu {
28
+ min-width: 200px;
29
+ }
30
+
31
+ // -------------- Table -------------
32
+
33
+ .#{$prefix}-table-wrapper {
34
+
35
+ p {
36
+ margin: 0;
37
+ }
38
+
39
+ .ui-rc-table {
40
+ //font-family: $fontFamily;
41
+ color: #000000de;
42
+ //font-weight: 500;
43
+ }
44
+
45
+
46
+
47
+ &.table-none-column-select {
48
+ .#{$prefix}-table-cell {
49
+ &.#{$prefix}-table-selection-column {
50
+ padding: 0 !important;
51
+ overflow: hidden !important;
52
+ border-inline-end: 0 !important;
53
+ //flex: 0 0 0 !important;
54
+ //width: 0 !important;
55
+ }
56
+ }
57
+ }
58
+
59
+ .#{$prefix}-table {
60
+ line-height: 20px;
61
+ .#{$prefix}-table-cell {
62
+ min-height: 35px;
63
+
64
+ .#{$prefix}-table-filter-column {
65
+ .#{$prefix}-dropdown-trigger.#{$prefix}-table-filter-trigger {
66
+ margin-left: 0;
67
+ }
68
+ }
69
+
70
+ &.cell-group {
71
+ font-weight: 600;
72
+ background-color: #f5f5f5;
73
+ border-inline-end-color: transparent !important;
74
+
75
+ }
76
+ &.cell-group-fixed {
77
+ font-weight: 600;
78
+ position: sticky;
79
+ text-align: left !important;
80
+ left: 0;
81
+ z-index: 15;
82
+ }
83
+
84
+ }
85
+
86
+ }
87
+
88
+ .#{$prefix}-table-tbody-virtual {
89
+ .#{$prefix}-table-cell {
90
+ border-bottom: 1px solid $tableBorderColor;
91
+ }
92
+ }
93
+
94
+ .#{$prefix}-table-bordered {
95
+
96
+ .#{$prefix}-table-tbody-virtual {
97
+ .#{$prefix}-table-cell {
98
+ //display: flex;
99
+ border-inline-end: 1px solid $tableBorderColor;
100
+ }
101
+ }
102
+ .#{$prefix}-table-container {
103
+ .#{$prefix}-table-thead {
104
+
105
+ > tr{
106
+ > th.#{$prefix}-table-cell:last-of-type {
107
+ //border-inline-end: 0;
108
+ }
109
+ }
110
+
111
+ }
112
+ .#{$prefix}-table-summary {
113
+ > tr{
114
+ > td.#{$prefix}-table-cell:last-of-type {
115
+ //border-inline-end: 0;
116
+ }
117
+ }
118
+ }
119
+ }
120
+
121
+ }
122
+
123
+ .#{$prefix}-table-tbody {
124
+
125
+ .#{$prefix}-table-row {
126
+
127
+ &.#{$prefix}-table-row-selected {
128
+ > .#{$prefix}-table-cell {
129
+ background: #FEF2EF;
130
+ }
131
+ }
132
+
133
+ &.row-disabled {
134
+ .#{$prefix}-table-cell {
135
+ //background-color: #f5f5f5;
136
+ }
137
+ }
138
+
139
+ > .#{$prefix}-table-cell {
140
+ &.#{$prefix}-table-cell-row-hover {
141
+ background: #FBDED6;
142
+ }
143
+
144
+ &.#{$prefix}-cell-command {
145
+ padding: 5px 8px;
146
+
147
+ .#{$prefix}-cell-command__content {
148
+ display: flex;
149
+ gap: 5px;
150
+ overflow: hidden;
151
+ }
152
+ }
153
+
154
+
155
+ }
156
+
157
+ .#{$prefix}-table-cell:last-of-type {
158
+ //border-inline-end: 0;
159
+ }
160
+
161
+
162
+ @for $i from 0 through 10 {
163
+ &:has(.indent-level-#{$i}) {
164
+ .#{$prefix}-table-cell {
165
+ &.cell-number {
166
+ .ui-rc_content {
167
+ padding-left: $i * 10px;
168
+ }
169
+ }
170
+ }
171
+ }
172
+ }
173
+
174
+ }
175
+
176
+ .#{$prefix}-table-placeholder {
177
+ .#{$prefix}-table-cell {
178
+ padding-top: 0 !important;
179
+ padding-bottom: 0 !important;
180
+ .#{$prefix}-table-expanded-row-fixed {
181
+ margin-top: 0 !important;
182
+ margin-bottom: 0 !important;
183
+ }
184
+ }
185
+ }
186
+ }
187
+
188
+ .#{$prefix}-table-thead {
189
+ //font-weight: 400;
190
+
191
+ > tr {
192
+ > th,
193
+ > td {
194
+ border-bottom: 1px solid $tableBorderColor;
195
+ //background: #fff;
196
+ font-weight: 500;
197
+ }
198
+ }
199
+
200
+ .#{$prefix}-table-cell {
201
+
202
+ &.#{$prefix}-table-cell-fix-left-last {
203
+ .#{$prefix}-table-cell-content {
204
+ //overflow: visible;
205
+ }
206
+ }
207
+ .#{$prefix}-table-column-title {
208
+ //display: flex;
209
+ }
210
+ }
211
+ }
212
+
213
+ .#{$prefix}-table-summary {
214
+ .#{$prefix}-table-cell {
215
+ background-color: #fafafa;
216
+ height: 39px;
217
+ font-weight: 600;
218
+ }
219
+
220
+ > tr > td {
221
+ border-bottom: 1px solid $tableBorderColor;
222
+ }
223
+ }
224
+
225
+ .#{$prefix}-table-bordered .#{$prefix}-table-tbody-virtual .#{$prefix}-table-cell.#{$prefix}-table-cell-fix-right-first:before {
226
+ border-inline-start: 1px solid $tableBorderColor;
227
+ }
228
+
229
+ .#{$prefix}-table {
230
+
231
+ &.#{$prefix}-table-bordered {
232
+ > .#{$prefix}-table-container {
233
+ border-inline-start: 1px solid $tableBorderColor;
234
+ border-top: 1px solid $tableBorderColor;
235
+
236
+ &::after {
237
+ border-inline-end: 1px solid $tableBorderColor;
238
+ }
239
+
240
+ > .#{$prefix}-table-content,
241
+ > .#{$prefix}-table-header,
242
+ > .#{$prefix}-table-body,
243
+ > .#{$prefix}-table-summary {
244
+ > table {
245
+ > thead {
246
+ > tr:not(:last-child) {
247
+ > th {
248
+ border-bottom: 1px solid $tableBorderColor;
249
+ }
250
+ }
251
+ }
252
+ }
253
+ }
254
+
255
+
256
+ > .#{$prefix}-table-content,
257
+ > .#{$prefix}-table-header,
258
+ > .#{$prefix}-table-body,
259
+ > .#{$prefix}-table-summary {
260
+ > table {
261
+ > thead,
262
+ > tbody,
263
+ > tfoot {
264
+ > tr {
265
+ > th,
266
+ > td {
267
+ border-inline-end: 1px solid $tableBorderColor;
268
+ }
269
+ }
270
+ }
271
+ }
272
+ }
273
+
274
+ }
275
+
276
+ > .#{$prefix}-table-title {
277
+ border: 1px solid $tableBorderColor;
278
+ border-bottom: 0;
279
+ }
280
+ }
281
+
282
+ &.#{$prefix}-table-ping-right:not(.#{$prefix}-table-has-fix-right) .#{$prefix}-table-container::after {
283
+ box-shadow: inset -10px 0 8px -8px $boxShadowColor;
284
+ //box-shadow: none;
285
+ }
286
+
287
+
288
+ }
289
+
290
+ .#{$prefix}-table-ping-left {
291
+ .#{$prefix}-table-cell-fix-left-first::after,
292
+ .#{$prefix}-table-cell-fix-left-last::after {
293
+ box-shadow: inset 10px 0 8px -8px $boxShadowColor;
294
+ }
295
+ }
296
+
297
+ .#{$prefix}-table-ping-right {
298
+ .#{$prefix}-table-cell-fix-right-first::after,
299
+ .#{$prefix}-table-cell-fix-right-last::after {
300
+ box-shadow: inset -10px 0 8px -8px $boxShadowColor;
301
+ }
302
+ }
303
+
304
+
305
+ .#{$prefix}-table.#{$prefix}-table-bordered {
306
+ > .#{$prefix}-table-container {
307
+ > .#{$prefix}-table-header > table > thead > tr,
308
+ > .#{$prefix}-table-summary > table > tfoot > tr {
309
+ > .#{$prefix}-table-cell-fix-right-first::before {
310
+ border-inline-start: 1px solid $tableBorderColor;
311
+ content: "";
312
+ position: absolute;
313
+ inset-block: 0;
314
+ inset-inline-start: -1px;
315
+ }
316
+ }
317
+ }
318
+ }
319
+
320
+
321
+ }
322
+
323
+ // -------------- Table edit-------------
324
+
325
+ .#{$prefix}-table-wrapper {
326
+
327
+ &.grid-editable {
328
+
329
+ .#{$prefix}-table-row {
330
+ &:has(+ .#{$prefix}-table-cell) {
331
+
332
+ }
333
+ }
334
+
335
+ .#{$prefix}-table .#{$prefix}-table-tbody .rc-ui-cell-editable {
336
+ overflow: unset;
337
+
338
+ display: flex;
339
+ //--------
340
+ padding: 0;
341
+
342
+ .#{$prefix}-table-row-expand-icon {
343
+ top: 8px;
344
+ left: 8px;
345
+ }
346
+
347
+ &.cell-editable {
348
+ &.cell-border-top {
349
+ border-bottom: 1px solid $border-selected-color;
350
+ }
351
+
352
+ &.cell-border-bottom {
353
+ border-bottom: 1px solid $border-selected-color;
354
+ }
355
+
356
+ &.cell-paste-border-bottom {
357
+ border-bottom: 1px dashed #949494;
358
+ }
359
+
360
+ &.cell-border-left {
361
+ border-inline-end: 1px solid $border-selected-color;
362
+ }
363
+
364
+ &.cell-paste-border-left {
365
+ border-inline-end: 1px dashed #949494;
366
+ }
367
+
368
+ &.cell-border-right {
369
+ border-inline-end: 1px solid $border-selected-color;
370
+ }
371
+
372
+ &.cell-paste-border-right {
373
+ border-inline-end: 1px dashed #949494;
374
+ }
375
+
376
+ &.#{$prefix}-table-cell-fix-left {
377
+ &:has(.ui-rc_cell-content.selected) {
378
+ }
379
+
380
+ }
381
+
382
+ &.#{$prefix}-table-cell-fix-right {
383
+ &:has(.ui-rc_cell-content.selected) {
384
+ }
385
+
386
+ &.cell-border-end {
387
+ z-index: 3;
388
+ }
389
+
390
+ }
391
+
392
+
393
+ &.cell-border-end {
394
+ z-index: 1;
395
+ }
396
+
397
+ &.#{$prefix}-table-cell-fix-right-first {
398
+
399
+ &.cell-border-end {
400
+ z-index: 3;
401
+ }
402
+
403
+ &.next-cell-border-left {
404
+ &::before {
405
+ border-inline-start: 1px solid $border-selected-color;
406
+ }
407
+ }
408
+
409
+
410
+ &.next-cell-paste-border-left {
411
+ &::before {
412
+ border-inline-start: 1px dashed #949494;
413
+ }
414
+ }
415
+
416
+ &.fixed-cell-border-left {
417
+ &::before {
418
+ border-inline-start: 1px solid $border-selected-color;
419
+ }
420
+ }
421
+ &.fixed-cell-paste-border-left {
422
+ &::before {
423
+ border-inline-start: 1px dashed #949494;
424
+ }
425
+ }
426
+
427
+ }
428
+
429
+ &.#{$prefix}-table-cell-fix-left-last {
430
+
431
+ &.cell-border-end {
432
+ z-index: 3;
433
+ }
434
+
435
+ }
436
+
437
+ }
438
+
439
+
440
+ }
441
+
442
+ .#{$prefix}-table.#{$prefix}-table-ping-left {
443
+ .#{$prefix}-table-tbody .rc-ui-cell-editable{
444
+ &.cell-editable {
445
+
446
+
447
+ &.#{$prefix}-table-cell-fix-left-last {
448
+
449
+ &.cell-border-left {
450
+ border-inline-end: 1px solid $tableBorderColor;
451
+ }
452
+
453
+ }
454
+
455
+
456
+
457
+ }
458
+ }
459
+
460
+ &:not(.#{$prefix}-table.#{$prefix}-table-ping-right) {
461
+
462
+ .#{$prefix}-table-tbody .rc-ui-cell-editable {
463
+ &.cell-editable {
464
+
465
+ // //&.cell-border-end {
466
+ // // z-index: 1;
467
+ // //}
468
+
469
+ &.#{$prefix}-table-cell-fix-right {
470
+ z-index: 0;
471
+
472
+ &.cell-border-end {
473
+ z-index: 3;
474
+ }
475
+ }
476
+
477
+ }
478
+ }
479
+
480
+ }
481
+
482
+ }
483
+
484
+ .#{$prefix}-table.#{$prefix}-table-ping-right {
485
+ .#{$prefix}-table-tbody .rc-ui-cell-editable{
486
+
487
+ &.cell-editable {
488
+
489
+ &.#{$prefix}-table-cell-fix-right-first {
490
+
491
+ &.next-cell-border-left {
492
+ &::before {
493
+ border-inline-start: 1px solid $tableBorderColor;
494
+ }
495
+ }
496
+
497
+
498
+
499
+ }
500
+
501
+ &.#{$prefix}-table-cell-fix-left-last {
502
+ &.cell-border-end {
503
+ z-index: 3;
504
+ }
505
+ }
506
+
507
+ }
508
+
509
+ &.cell-border-end {
510
+ z-index: 1;
511
+ }
512
+
513
+ }
514
+
515
+ }
516
+
517
+
518
+ .#{$prefix}-table.#{$prefix}-table-small {
519
+ .#{$prefix}-table-thead > tr > th,
520
+ tfoot > tr > th,
521
+ tfoot > tr > td,
522
+ tfoot > tr > td.#{$prefix}-table-cell
523
+ {
524
+ //padding: 8px 8px;
525
+ }
526
+ }
527
+
528
+ .#{$prefix}-table.#{$prefix}-table-small {
529
+ .#{$prefix}-table-selection-column{
530
+ //padding: 8px 8px;
531
+ padding: 6px 8px;
532
+ }
533
+ }
534
+
535
+ .ui-rc_cell-content {
536
+ //position: relative;
537
+ user-select: none;
538
+ //padding: 8px 8px;
539
+ padding: 7px 8px;
540
+ //min-height: 23px;
541
+ overflow: hidden;
542
+
543
+ .ui-rc_content {
544
+ width: 100%;
545
+ }
546
+ &:hover {
547
+ .dragging-point {
548
+ //visibility: visible;
549
+ }
550
+ }
551
+
552
+ .dragging-point {
553
+ //visibility: hidden;
554
+ width: 10px;
555
+ height: 10px;
556
+ position: absolute;
557
+ cursor: crosshair;
558
+ right: 0;
559
+ bottom: 0;
560
+ //background: red;
561
+
562
+ .dot-point {
563
+ position: absolute;
564
+ width: 8px;
565
+ height: 8px;
566
+ border-radius: 6px;
567
+ background-color: $border-selected-color;
568
+ bottom: -4px;
569
+ right: -4px;
570
+ }
571
+
572
+ }
573
+ }
574
+
575
+ .ui-rc_cell-content.selected {
576
+ background-color: $cell-selected-bg;
577
+ }
578
+
579
+ .ui-rc_cell-content--index {
580
+ &.focus {
581
+ background-color: $cell-index-focus-bg;
582
+ //color: #fff;
583
+ //font-weight: 500;
584
+ }
585
+ &.selected {
586
+ background-color: $cell-index-selected-bg;
587
+ color: #fff;
588
+ //font-weight: 500;
589
+ }
590
+ }
591
+
592
+ .#{$prefix}-table-tbody {
593
+
594
+ .#{$prefix}-table-row {
595
+ &.#{$prefix}-table-row-selected {
596
+ >.#{$prefix}-table-cell {
597
+ background: #FEF2EF;
598
+ }
599
+ }
600
+ >.#{$prefix}-table-cell {
601
+ &.#{$prefix}-table-cell-row-hover {
602
+ background: #FBDED6;
603
+ }
604
+ }
605
+
606
+ .#{$prefix}-table-cell {
607
+
608
+ .#{$prefix}-table-row-indent {
609
+ position: absolute;
610
+ @for $i from 1 through 10 {
611
+ &.indent-level-#{$i} {
612
+ padding-left: $i * 25px;;
613
+ }
614
+ }
615
+ }
616
+
617
+ @for $i from 0 through 10 {
618
+ &:has(.indent-level-#{$i}) {
619
+
620
+ .#{$prefix}-table-row-expand-icon {
621
+ position: absolute;
622
+ //.ui-rc_content {
623
+ padding-left: $i * 10px;
624
+ //}
625
+ }
626
+
627
+ .ui-rc_cell-content {
628
+ padding-left: $i * 25px + 8px;
629
+ }
630
+
631
+ }
632
+ }
633
+
634
+ @for $i from 0 through 10 {
635
+ &:has(.indent-level-#{$i}) {
636
+
637
+ .#{$prefix}-table-row-expand-icon {
638
+ position: absolute;
639
+ left: $i * 25px + 8px !important;
640
+ }
641
+
642
+ .ui-rc_cell-content {
643
+ padding-left: ($i + 1)* 25px + 8px;
644
+ }
645
+
646
+ }
647
+ }
648
+ }
649
+ }
650
+
651
+
652
+ .#{$prefix}-table-cell{
653
+
654
+ &.#{$prefix}-table-cell-ellipsis {
655
+ .ui-rc_cell-content {
656
+
657
+ .ui-rc_content {
658
+ text-overflow: ellipsis;
659
+ text-decoration: none;
660
+ transition: 0.3s;
661
+ white-space: nowrap;
662
+ overflow: hidden;
663
+ }
664
+ }
665
+ }
666
+
667
+ &.cell-editing {
668
+ //padding: 0 !important;
669
+ &:focus-visible {
670
+ outline: none;
671
+ }
672
+ .ant-form-item ,
673
+ .ant-row.ant-form-item-row,
674
+ .ant-col.ant-form-item-control,
675
+ .ant-form-item-control-input,
676
+ .ant-form-item-control-input-content,
677
+ .ant-input{
678
+ height: 100%;
679
+ &:focus-visible {
680
+ outline: none;
681
+ }
682
+ }
683
+
684
+ .#{$prefix}-checkbox-wrapper {
685
+ .#{$prefix}-checkbox {
686
+ background-color: red;
687
+ }
688
+ .#{$prefix}-checkbox-input {
689
+ &:focus-visible {
690
+ outline: none;
691
+ }
692
+ }
693
+ }
694
+
695
+
696
+ .ant-input, .ant-picker{
697
+ border-radius: 0;
698
+ }
699
+
700
+ // color picker
701
+
702
+ .ant-color-picker-trigger{
703
+ height: 100%;
704
+ border-radius: 0;
705
+ .ant-color-picker-color-block {
706
+ height: 100%;
707
+ width: 100%;
708
+ }
709
+
710
+ }
711
+
712
+
713
+ // ------------ select ---------------
714
+
715
+ .#{$prefix}-table-select-single .#{$prefix}-table-select-selector,
716
+ .#{$prefix}-select-single .#{$prefix}-select-selector {
717
+
718
+ border-radius: 0;
719
+
720
+ }
721
+
722
+ .#{$prefix}-table-select-single:not(.#{$prefix}-table-select-customize-input) {
723
+ .#{$prefix}-table-select-selector {
724
+ .#{$prefix}-table-select-selection-search-input {
725
+ height: auto;
726
+ }
727
+ }
728
+ }
729
+
730
+ // ------------ select ---------------
731
+
732
+
733
+ }
734
+ &.cell-editable {
735
+ &:focus-visible {
736
+ outline: none;
737
+ }
738
+ }
739
+ .#{$prefix}-table-cell-content {
740
+ display: flex;
741
+ height: 100%;
742
+ }
743
+
744
+ .ui-rc_cell-content,
745
+ .#{$prefix}-table-cell-content{
746
+ //width: 100%;
747
+ flex: 1;
748
+ }
749
+ .ui-rc_content {
750
+ //padding: 5px 8px;
751
+ }
752
+ .ui-rc_content:has(.ant-color-picker-trigger) {
753
+ padding: 1px 8px;
754
+ }
755
+ }
756
+ }
757
+
758
+ }
759
+
760
+ }
761
+ // ---------------- Table edit end---------------
762
+
763
+
764
+ // -------------- Checkbox ----------
765
+
766
+ .#{$prefix}-checkbox-indeterminate {
767
+ &:hover {
768
+ .#{$prefix}-checkbox-inner {
769
+ border-color: $primary !important;;
770
+ }
771
+ }
772
+
773
+ .#{$prefix}-checkbox-inner {
774
+ &:after {
775
+ background-color: $primary;
776
+ }
777
+ }
778
+ }
779
+ //.#{$prefix}-checkbox-input {
780
+ // &:focus-visible {
781
+ // outline: none;
782
+ // }
783
+ //}
784
+
785
+ .#{$prefix}-checkbox .#{$prefix}-checkbox-input:focus-visible+.#{$prefix}-checkbox-inner {
786
+ outline: none;
787
+ }
788
+
789
+ .#{$prefix}-checkbox {
790
+ &.#{$prefix}-checkbox-checked {
791
+ &:hover {
792
+ .#{$prefix}-checkbox-inner {
793
+ background-color: $primary;
794
+ border-color: $primary;
795
+ }
796
+ }
797
+
798
+ .#{$prefix}-checkbox-inner {
799
+ background-color: $primary;
800
+ border-color: $primary;
801
+ }
802
+ }
803
+ }
804
+
805
+ .#{$prefix}-checkbox:not(.#{$prefix}-checkbox-disabled):hover {
806
+ .#{$prefix}-checkbox-inner {
807
+ border-color: $primary;
808
+ }
809
+ }
810
+
811
+ .#{$prefix}-checkbox-wrapper:not(.#{$prefix}-checkbox-wrapper-disabled):hover {
812
+ .#{$prefix}-checkbox-inner {
813
+ border-color: $primary;
814
+ }
815
+
816
+ .#{$prefix}-checkbox-checked:not(.#{$prefix}-checkbox-disabled) {
817
+ .#{$prefix}-checkbox-inner {
818
+ background-color: $primary;
819
+ }
820
+ }
821
+ }
822
+
823
+ // ------------ Tree ---------------
824
+
825
+ .#{$prefix}-tree {
826
+ .#{$prefix}-tree-checkbox-checked {
827
+ .#{$prefix}-tree-checkbox-inner {
828
+ background-color: $primary;
829
+ border-color: $primary;
830
+ }
831
+ }
832
+
833
+ .#{$prefix}-tree-checkbox-wrapper-checked:not(.#{$prefix}-tree-checkbox-wrapper-disabled):hover,
834
+ .#{$prefix}-tree-checkbox-checked:not(.#{$prefix}-tree-checkbox-disabled):hover {
835
+ .#{$prefix}-tree-checkbox-inner {
836
+ background-color: $primary;
837
+ }
838
+ }
839
+
840
+ .#{$prefix}-tree-checkbox-wrapper:not(.#{$prefix}-tree-checkbox-wrapper-disabled):hover,
841
+ .#{$prefix}-tree-checkbox:not(.#{$prefix}-tree-checkbox-disabled):hover {
842
+ .#{$prefix}-tree-checkbox-inner {
843
+ border-color: $primary;
844
+ }
845
+ }
846
+ }
847
+
848
+
849
+ // ------------ ant Tree ---------------
850
+
851
+ .#{$antdPrefix}-tree {
852
+ .#{$antdPrefix}-tree-checkbox-checked {
853
+ .#{$antdPrefix}-tree-checkbox-inner {
854
+ background-color: $primary;
855
+ border-color: $primary;
856
+ }
857
+ }
858
+
859
+ .#{$antdPrefix}-tree-checkbox-wrapper-checked:not(.#{$antdPrefix}-tree-checkbox-wrapper-disabled):hover,
860
+ .#{$antdPrefix}-tree-checkbox-checked:not(.#{$antdPrefix}-tree-checkbox-disabled):hover {
861
+ .#{$antdPrefix}-tree-checkbox-inner {
862
+ background-color: $primary;
863
+ }
864
+ }
865
+
866
+ .#{$antdPrefix}-tree-checkbox-wrapper:not(.#{$antdPrefix}-tree-checkbox-wrapper-disabled):hover,
867
+ .#{$antdPrefix}-tree-checkbox:not(.#{$antdPrefix}-tree-checkbox-disabled):hover {
868
+ .#{$antdPrefix}-tree-checkbox-inner {
869
+ border-color: $primary;
870
+ }
871
+ }
872
+ }
873
+
874
+
875
+ // ------------ paging ---------------
876
+
877
+ .#{$prefix}-table-wrapper .#{$prefix}-table-pagination.#{$prefix}-pagination {
878
+ margin: 0;
879
+ }
880
+
881
+ .#{$prefix}-table-wrapper {
882
+ .#{$prefix}-table {
883
+ .#{$prefix}-pagination {
884
+ &::before {
885
+ content: "";
886
+ position: absolute;
887
+ border-left: 1px solid $tableBorderColor;
888
+ height: 55px;
889
+ bottom: 0;
890
+ left: 0;
891
+ }
892
+
893
+ &::after {
894
+ content: "";
895
+ position: absolute;
896
+ border-left: 1px solid $tableBorderColor;
897
+ height: 55px;
898
+ bottom: 0;
899
+ visibility: visible;
900
+ right: 0;
901
+ }
902
+
903
+ &.top-pagination {
904
+ border: none;
905
+ padding-top: 0;
906
+ padding-bottom: 0;
907
+ .#{$prefix}-pagination-total-text {
908
+ margin-left: auto;
909
+ }
910
+ }
911
+ border-bottom: 1px solid $tableBorderColor;
912
+
913
+ }
914
+ }
915
+ }
916
+
917
+
918
+ .#{$prefix}-pagination {
919
+
920
+ .#{$prefix}-pagination-total-text {
921
+ white-space: nowrap;
922
+ }
923
+
924
+ .#{$prefix}-pagination-item-active {
925
+ border-color: $primary;
926
+
927
+ &:hover {
928
+ border-color: $primary;
929
+
930
+ a {
931
+ color: $primary;
932
+ }
933
+ }
934
+
935
+ a {
936
+ color: $primary;
937
+ }
938
+ }
939
+
940
+ .#{$prefix}-pagination-jump-prev, .#{$prefix}-pagination-jump-next {
941
+ .#{$prefix}-pagination-item-container {
942
+ .#{$prefix}-pagination-item-link-icon {
943
+ color: $primary;
944
+ }
945
+ }
946
+ }
947
+ }
948
+
949
+
950
+
951
+ //.#{$prefix}-table-wrapper .#{$prefix}-table.#{$prefix}-table-bordered >.#{$prefix}-table-container >.#{$prefix}-table-content >table >tbody>tr>td >.#{$prefix}-table-expanded-row-fixed {
952
+ // border-inline-end: 1px solid $tableBorderColor;
953
+ //}
954
+ //
955
+ //.#{$prefix}-table-wrapper .#{$prefix}-table.#{$prefix}-table-bordered >.#{$prefix}-table-container >.#{$prefix}-table-content >table >tbody>tr>td >.#{$prefix}-table-expanded-row-fixed::after {
956
+ // //border-inline-end: 1px solid $tableBorderColor;
957
+ // border-inline-end: 0 solid $tableBorderColor;
958
+ //}
959
+ //
960
+ //
961
+ //.#{$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 {
962
+ // margin-top: 0;
963
+ // margin-bottom: 0;
964
+ // border-inline-end: 1px solid $tableBorderColor;
965
+ //}
966
+ //
967
+ //.#{$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 {
968
+ // border-inline-end: 0 solid $tableBorderColor;
969
+ //}
970
+
971
+
972
+ .#{$prefix}-table-wrapper {
973
+ .#{$prefix}-table {
974
+ &.#{$prefix}-table-bordered {
975
+ > .#{$prefix}-table-container {
976
+ > .#{$prefix}-table-content,
977
+ > .#{$prefix}-table-header,
978
+ > .#{$prefix}-table-body,
979
+ > .#{$prefix}-table-summary {
980
+ > table > tbody > tr {
981
+ > th,
982
+ > td {
983
+ > .#{$prefix}-table-expanded-row-fixed::after {
984
+ // Thêm CSS ở đây
985
+ }
986
+ }
987
+ }
988
+ }
989
+ }
990
+ }
991
+ }
992
+ }
993
+
994
+
995
+ .#{$prefix}-table-wrapper {
996
+ .#{$prefix}-table.#{$prefix}-table-small {
997
+ .#{$prefix}-table-title,
998
+ .#{$prefix}-table-footer,
999
+ .#{$prefix}-table-cell,
1000
+ .#{$prefix}-table-thead > tr > th,
1001
+ .#{$prefix}-table-tbody > tr > th,
1002
+ .#{$prefix}-table-tbody > tr > td,
1003
+ tfoot > tr > th,
1004
+ tfoot > tr > td {
1005
+ //padding: 8px 8px;
1006
+ //font-size: 13px;
1007
+ }
1008
+ }
1009
+ }
1010
+ .#{$prefix}-table-wrapper {
1011
+ .#{$prefix}-table.#{$prefix}-table-small {
1012
+ .#{$prefix}-table-cell {
1013
+ &:has(.ant-color-picker-trigger) {
1014
+ padding: 1px 8px;
1015
+ }
1016
+ .ant-color-picker-trigger{
1017
+ width: 100%;
1018
+ min-height: 20px;
1019
+ .ant-color-picker-clear {
1020
+ height: 20px;
1021
+ }
1022
+ }
1023
+ }
1024
+ }
1025
+ }
1026
+
1027
+
1028
+
1029
+ //ui-rc-table-ping-right
1030
+
1031
+ .#{$prefix}-table-wrapper .#{$prefix}-table.#{$prefix}-table-bordered >.#{$prefix}-table-container >.#{$prefix}-table-content >table >thead>tr >.#{$prefix}-table-cell-fix-right-first::after,
1032
+ .#{$prefix}-table-wrapper .#{$prefix}-table.#{$prefix}-table-bordered >.#{$prefix}-table-container >.#{$prefix}-table-header >table >thead>tr >.#{$prefix}-table-cell-fix-right-first::after,
1033
+ .#{$prefix}-table-wrapper .#{$prefix}-table.#{$prefix}-table-bordered >.#{$prefix}-table-container >.#{$prefix}-table-body >table >thead>tr >.#{$prefix}-table-cell-fix-right-first::after,
1034
+ .#{$prefix}-table-wrapper .#{$prefix}-table.#{$prefix}-table-bordered >.#{$prefix}-table-container >.#{$prefix}-table-summary >table >thead>tr >.#{$prefix}-table-cell-fix-right-first::after,
1035
+ .#{$prefix}-table-wrapper .#{$prefix}-table.#{$prefix}-table-bordered >.#{$prefix}-table-container >.#{$prefix}-table-content >table >tbody>tr >.#{$prefix}-table-cell-fix-right-first::after,
1036
+ .#{$prefix}-table-wrapper .#{$prefix}-table.#{$prefix}-table-bordered >.#{$prefix}-table-container >.#{$prefix}-table-header >table >tbody>tr >.#{$prefix}-table-cell-fix-right-first::after,
1037
+ .#{$prefix}-table-wrapper .#{$prefix}-table.#{$prefix}-table-bordered >.#{$prefix}-table-container >.#{$prefix}-table-body >table >tbody>tr >.#{$prefix}-table-cell-fix-right-first::after,
1038
+ .#{$prefix}-table-wrapper .#{$prefix}-table.#{$prefix}-table-bordered >.#{$prefix}-table-container >.#{$prefix}-table-summary >table >tbody>tr >.#{$prefix}-table-cell-fix-right-first::after,
1039
+ .#{$prefix}-table-wrapper .#{$prefix}-table.#{$prefix}-table-bordered >.#{$prefix}-table-container >.#{$prefix}-table-content >table >tfoot>tr >.#{$prefix}-table-cell-fix-right-first::after,
1040
+ .#{$prefix}-table-wrapper .#{$prefix}-table.#{$prefix}-table-bordered >.#{$prefix}-table-container >.#{$prefix}-table-header >table >tfoot>tr >.#{$prefix}-table-cell-fix-right-first::after,
1041
+ .#{$prefix}-table-wrapper .#{$prefix}-table.#{$prefix}-table-bordered >.#{$prefix}-table-container >.#{$prefix}-table-body >table >tfoot>tr >.#{$prefix}-table-cell-fix-right-first::after,
1042
+ .#{$prefix}-table-wrapper .#{$prefix}-table.#{$prefix}-table-bordered >.#{$prefix}-table-container >.#{$prefix}-table-summary >table >tfoot>tr >.#{$prefix}-table-cell-fix-right-first::after {
1043
+ border-inline-end: 1px solid $tableBorderColor;
1044
+ }
1045
+
1046
+
1047
+ // toolbar
1048
+
1049
+ .ui-rc-toolbar-bottom {
1050
+ .be-toolbar-item {
1051
+ .toolbar-dropdown-button {
1052
+ .ant-btn.ant-btn-default.ant-btn-variant-outlined.ant-btn-compact-item.ant-btn-compact-first-item {
1053
+ border-color: #28c76f;
1054
+ }
1055
+ .ant-btn.ant-btn-default.ant-btn-variant-outlined.ant-btn-compact-item.ant-btn-compact-last-item {
1056
+ border-color: #28c76f;
1057
+ .ant-btn-icon {
1058
+ color: #28c76f;
1059
+ }
1060
+ }
1061
+ }
1062
+
1063
+ }
1064
+ }