dcp-design-react 1.12.18 → 1.12.20

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,507 +1,504 @@
1
- /*
2
- * @Author: 焦质晔
3
- * @Date: 2022-03-16 19:05:30
4
- * @Last Modified by: 焦质晔
5
- * @Last Modified time: 2025-01-12 14:23:51
6
- */
7
- @import '../../style/common';
8
-
9
- .@{prefix-pivot-grid}__layout {
10
- .reset-container();
11
- width: 100%;
12
-
13
- &.col-resize {
14
- cursor: col-resize;
15
- .qm-scrollbar__view {
16
- pointer-events: none;
17
- }
18
- }
19
-
20
- // =========== 变量 ===========
21
- @header-bg-color: #d7f0ff;
22
- @border-radius: 8px;
23
- .bor-radius-left() {
24
- border-top-left-radius: @border-radius;
25
- border-bottom-left-radius: @border-radius;
26
- }
27
- .bor-radius-right() {
28
- border-top-right-radius: @border-radius;
29
- border-bottom-right-radius: @border-radius;
30
- }
31
- .bor-left-shadow() {
32
- box-shadow: -5px 0px 0 0px @--background-color-light;
33
- }
34
- .bor-right-shadow() {
35
- box-shadow: 5px 0px 0 0px @--background-color-light;
36
- }
37
- // =========== 变量 END ===========
38
-
39
- .@{qm-prefix}-scrollbar__wrap {
40
- // 调整为 flex 布局
41
- display: flex;
42
- flex-wrap: nowrap;
43
- & > div {
44
- height: fit-content;
45
- }
46
- }
47
- .header,
48
- .footer {
49
- display: flex;
50
- flex-direction: row;
51
- .fixed-left {
52
- position: sticky;
53
- left: 0;
54
- z-index: 1;
55
- display: flex;
56
- border-left: 1px solid @--border-color-secondary;
57
- border-bottom: 1px solid @--border-color-secondary;
58
- .bor-left-shadow();
59
- &,
60
- .table-cell:first-child {
61
- .bor-radius-left();
62
- }
63
- }
64
- .no-fixed {
65
- flex: 1 0;
66
- display: flex;
67
- border-bottom: 1px solid @--border-color-secondary;
68
- .bor-right-shadow();
69
- &,
70
- .table-cell:last-child {
71
- .bor-radius-right();
72
- }
73
- }
74
- }
75
- .header {
76
- position: sticky;
77
- top: 0;
78
- z-index: 2;
79
- .table-cell {
80
- position: relative;
81
- background-color: @header-bg-color !important;
82
- cursor: pointer;
83
- }
84
- .resize-bar {
85
- position: absolute;
86
- top: 0;
87
- bottom: 0;
88
- right: -3px;
89
- width: 6px;
90
- z-index: 2;
91
- cursor: col-resize;
92
- }
93
- }
94
- .body {
95
- display: flex;
96
- flex-direction: row;
97
- min-height: fit-content;
98
- }
99
- .footer {
100
- position: sticky;
101
- bottom: 0;
102
- z-index: 2;
103
- }
104
- .header,
105
- .body,
106
- .footer {
107
- .table-cell {
108
- align-self: stretch; // 子元素高度和父元素一致
109
- display: inline-flex;
110
- align-items: center;
111
- border-top: 1px solid @--border-color-secondary;
112
- border-right: 1px solid @--border-color-secondary;
113
- background-color: #fff;
114
- &.selection-column {
115
- justify-content: center;
116
- border-right-color: transparent;
117
- cursor: default;
118
- }
119
- .action {
120
- display: inline-flex;
121
- align-items: center;
122
- justify-content: center;
123
- .drag-icon,
124
- .expand-icon {
125
- display: inline-flex;
126
- align-items: center;
127
- justify-content: center;
128
- width: 20px;
129
- height: 20px;
130
- color: @--text-color-placeholder;
131
- cursor: pointer;
132
- visibility: hidden;
133
- }
134
- .drag-icon {
135
- cursor: grab;
136
- }
137
- .expand-icon:hover {
138
- color: @--primary-color;
139
- }
140
- .middle {
141
- text-align: center;
142
- width: 16px;
143
- margin: 0 2px;
144
- .order {
145
- display: inline-block;
146
- }
147
- .checkbox {
148
- display: none;
149
- }
150
- }
151
- }
152
- &.col--center {
153
- text-align: center;
154
- justify-content: center;
155
- }
156
- &.col--right {
157
- text-align: right;
158
- justify-content: flex-end;
159
- }
160
- &.col--fix-left {
161
- position: sticky;
162
- z-index: 1;
163
- }
164
- &.col--checked {
165
- background-color: @--primary-1;
166
- }
167
- &.active {
168
- box-shadow: inset 0 0 0 2px @--primary-color;
169
- background-color: rgba(255, 235, 140, 1);
170
- }
171
- .cell {
172
- .text-overflow-cut();
173
- padding: 0 @--padding-sm;
174
- }
175
- }
176
- .label-cell,
177
- .table-cell {
178
- &:hover {
179
- .count-select {
180
- visibility: visible;
181
- }
182
- }
183
- }
184
- .count-select {
185
- .text-overflow-cut();
186
- display: inline-flex;
187
- align-items: center;
188
- justify-content: flex-end;
189
- height: 100%;
190
- width: 100%;
191
- padding: 0 4px;
192
- color: @--text-color-placeholder;
193
- cursor: pointer;
194
- visibility: hidden;
195
- &:hover,
196
- &.ant-dropdown-open {
197
- visibility: visible;
198
- background-color: @--background-color-light;
199
- }
200
- &.show {
201
- visibility: visible;
202
- }
203
- .icon {
204
- margin-left: 4px;
205
- }
206
- }
207
- }
208
- .resize-line {
209
- position: absolute;
210
- left: -2px;
211
- top: 0;
212
- width: 2px;
213
- height: 100%;
214
- background-color: @--primary-color;
215
- z-index: 2;
216
- }
217
- .fixed-line {
218
- position: absolute;
219
- left: -1px;
220
- top: 0;
221
- width: 0;
222
- height: 100%;
223
- border-left: 1px solid @--border-color-base;
224
- z-index: 2;
225
- pointer-events: none;
226
- &::after {
227
- content: '';
228
- position: absolute;
229
- top: 0;
230
- right: 0;
231
- bottom: -1px;
232
- width: 20px;
233
- transform: translateX(100%);
234
- transition: box-shadow 0.3s, -webkit-box-shadow 0.3s;
235
- pointer-events: none;
236
- }
237
- &.leave {
238
- &::after {
239
- box-shadow: inset 10px 0 8px -8px rgba(0, 0, 0, 0.15);
240
- }
241
- }
242
- &.active {
243
- border-left: 1px solid @--primary-color;
244
- border-right: 1px solid @--primary-color;
245
- }
246
- }
247
- .fixed-bar {
248
- position: absolute;
249
- top: 0;
250
- left: -1px;
251
- width: 6px;
252
- height: 100%;
253
- margin-left: -2px;
254
- background-image: none;
255
- background-repeat: no-repeat;
256
- z-index: 1;
257
- cursor: col-resize;
258
- &:hover,
259
- &.active {
260
- background-image: linear-gradient(to right, transparent 2px, @--border-color-base 2px 4px, transparent 4px 6px);
261
- z-index: 2;
262
- .thumb {
263
- opacity: 1;
264
- }
265
- }
266
- .thumb {
267
- position: absolute;
268
- top: 0;
269
- left: 0;
270
- width: 100%;
271
- height: 32px;
272
- border-radius: 6px;
273
- background-color: @--primary-color;
274
- opacity: 0;
275
- pointer-events: none;
276
- }
277
- }
278
- .content-empty {
279
- position: absolute;
280
- width: 100%;
281
- margin: 20px 0;
282
- }
283
- // 左侧面板
284
- .left-panel {
285
- position: sticky;
286
- left: 0;
287
- z-index: 1;
288
- .group-label {
289
- border-right: 0 !important;
290
- .bor-radius-left();
291
- &.level0 {
292
- .bor-left-shadow();
293
- }
294
- }
295
- .row-item {
296
- &:nth-of-type(1) {
297
- border-top-left-radius: @border-radius;
298
- .bor-left-shadow();
299
- .table-cell:first-child {
300
- border-top-left-radius: @border-radius;
301
- }
302
- }
303
- &.last {
304
- border-bottom-left-radius: @border-radius;
305
- .table-cell:first-child {
306
- border-bottom-left-radius: @border-radius;
307
- }
308
- }
309
- &.is-leaf {
310
- .selection-column {
311
- border-top-color: transparent;
312
- }
313
- .cell--indent {
314
- display: flex;
315
- background-color: #fff;
316
- .line {
317
- flex: 1 0;
318
- position: relative;
319
- &::before {
320
- content: '';
321
- position: absolute;
322
- left: 10px;
323
- height: 100%;
324
- margin-top: -100%;
325
- border-left: 1px dashed rgba(0, 0, 0, 0.175);
326
- }
327
- }
328
- }
329
- }
330
- }
331
- .no-group {
332
- .row-item:last-child {
333
- .bor-left-shadow();
334
- }
335
- }
336
- }
337
- .main-panel {
338
- flex: 1 0;
339
- z-index: 0;
340
- .group-label,
341
- .row-item {
342
- border-left: 0 !important;
343
- }
344
- .group-label {
345
- .bor-radius-right();
346
- }
347
- .row-item {
348
- &:nth-of-type(1) {
349
- border-top-right-radius: @border-radius;
350
- .table-cell:last-child {
351
- border-top-right-radius: @border-radius;
352
- }
353
- }
354
- &.last {
355
- border-bottom-right-radius: @border-radius;
356
- .table-cell:last-child {
357
- border-bottom-right-radius: @border-radius;
358
- }
359
- }
360
- }
361
- }
362
- .container {
363
- position: relative;
364
- left: 0;
365
- top: 0;
366
- &.no-group {
367
- .row-item:last-child {
368
- .table-cell {
369
- border-bottom: 1px solid @--border-color-secondary;
370
- }
371
- .cell--indent {
372
- height: fill-available;
373
- height: -webkit-fill-available;
374
- }
375
- }
376
- }
377
- .group-label {
378
- position: absolute;
379
- box-sizing: content-box;
380
- border: 1px solid @--border-color-secondary;
381
- background-color: #fff;
382
- overflow: hidden;
383
- .label-row {
384
- display: flex;
385
- align-items: center;
386
- }
387
- .label-cell {
388
- align-self: stretch;
389
- display: inline-flex;
390
- align-items: center;
391
- &.expandable-column {
392
- justify-content: center;
393
- .button-icon {
394
- & > .anticon {
395
- transition: transform 0.3s ease;
396
- }
397
- &.expand > .anticon {
398
- transform: rotate(90deg);
399
- }
400
- }
401
- }
402
- &.col--fix-left {
403
- position: sticky;
404
- z-index: 1;
405
- }
406
- .title {
407
- flex: 1 0;
408
- margin-left: 8px;
409
- font-weight: 600;
410
- .text-overflow-cut();
411
- & + .count-select {
412
- width: fit-content;
413
- padding-left: @--padding-md;
414
- }
415
- &.empty {
416
- color: @--text-color-placeholder;
417
- font-weight: 400;
418
- }
419
- }
420
- }
421
- }
422
- .row-item {
423
- position: absolute;
424
- border-left: 1px solid @--border-color-secondary;
425
- .table-row {
426
- display: flex;
427
- align-items: center;
428
- height: inherit;
429
- &.row--hover,
430
- &.row--selection {
431
- .table-cell,
432
- .cell--indent {
433
- background-color: @--background-color-light;
434
- .middle&:has(.checkbox) {
435
- .order {
436
- display: none;
437
- }
438
- .checkbox {
439
- display: inline-flex;
440
- }
441
- }
442
- }
443
- }
444
- &.row--highlight {
445
- .table-cell,
446
- .cell--indent {
447
- background-color: @--primary-1;
448
- }
449
- }
450
- &.row--hover {
451
- .table-cell {
452
- .drag-icon,
453
- .expand-icon {
454
- visibility: visible;
455
- }
456
- }
457
- }
458
- .cell--expand {
459
- display: inline-flex;
460
- align-items: center;
461
- justify-content: center;
462
- z-index: 1;
463
- padding: 3px;
464
- color: @--text-color-placeholder;
465
- border-radius: @--border-radius-lg;
466
- background-color: #fff;
467
- user-select: none;
468
- cursor: pointer;
469
- .icon {
470
- transition: transform 0.3s ease;
471
- }
472
- &.fold {
473
- .icon {
474
- transform: rotate(-90deg);
475
- }
476
- }
477
- &.disabled {
478
- color: @--disabled-color;
479
- cursor: not-allowed;
480
- }
481
- }
482
- }
483
- }
484
- }
485
- // size
486
- &.small {
487
- .label-row,
488
- .table-cell,
489
- .cell--indent {
490
- height: 26px;
491
- }
492
- }
493
- &.middle {
494
- .label-row,
495
- .table-cell,
496
- .cell--indent {
497
- height: 34px;
498
- }
499
- }
500
- &.large {
501
- .label-row,
502
- .table-cell,
503
- .cell--indent {
504
- height: 42px;
505
- }
506
- }
507
- }
1
+ /*
2
+ * @Author: 焦质晔
3
+ * @Date: 2022-03-16 19:05:30
4
+ * @Last Modified by: 焦质晔
5
+ * @Last Modified time: 2025-01-12 14:23:51
6
+ */
7
+ @import '../../style/common';
8
+
9
+ .@{prefix-pivot-grid}__layout {
10
+ .reset-container();
11
+ width: 100%;
12
+
13
+ &.col-resize {
14
+ cursor: col-resize;
15
+ .qm-scrollbar__view {
16
+ pointer-events: none;
17
+ }
18
+ }
19
+
20
+ // =========== 变量 ===========
21
+ @header-bg-color: #d7f0ff;
22
+ @border-radius: 8px;
23
+ .bor-radius-left() {
24
+ border-top-left-radius: @border-radius;
25
+ border-bottom-left-radius: @border-radius;
26
+ }
27
+ .bor-radius-right() {
28
+ border-top-right-radius: @border-radius;
29
+ border-bottom-right-radius: @border-radius;
30
+ }
31
+ .bor-left-shadow() {
32
+ box-shadow: -5px 0px 0 0px @--background-color-light;
33
+ }
34
+ .bor-right-shadow() {
35
+ box-shadow: 5px 0px 0 0px @--background-color-light;
36
+ }
37
+ // =========== 变量 END ===========
38
+
39
+ .@{qm-prefix}-scrollbar__wrap {
40
+ // 调整为 flex 布局
41
+ display: flex;
42
+ flex-wrap: nowrap;
43
+ & > div {
44
+ height: fit-content;
45
+ }
46
+ }
47
+ .header,
48
+ .footer {
49
+ display: flex;
50
+ flex-direction: row;
51
+ .table-cell {
52
+ border-bottom: 1px solid @--border-color-secondary;
53
+ }
54
+ .fixed-left {
55
+ position: sticky;
56
+ left: 0;
57
+ z-index: 1;
58
+ display: flex;
59
+ border-left: 1px solid @--border-color-secondary;
60
+ .bor-left-shadow();
61
+ &,
62
+ .table-cell:first-child {
63
+ .bor-radius-left();
64
+ }
65
+ }
66
+ .no-fixed {
67
+ flex: 1 0;
68
+ display: flex;
69
+ .bor-right-shadow();
70
+ &,
71
+ .table-cell:last-child {
72
+ .bor-radius-right();
73
+ }
74
+ }
75
+ }
76
+ .header {
77
+ position: sticky;
78
+ top: 0;
79
+ z-index: 2;
80
+ .table-cell {
81
+ position: relative;
82
+ background-color: @header-bg-color !important;
83
+ cursor: pointer;
84
+ }
85
+ .resize-bar {
86
+ position: absolute;
87
+ top: 0;
88
+ bottom: 0;
89
+ right: -3px;
90
+ width: 6px;
91
+ z-index: 2;
92
+ cursor: col-resize;
93
+ }
94
+ }
95
+ .body {
96
+ display: flex;
97
+ flex-direction: row;
98
+ min-height: fit-content;
99
+ }
100
+ .footer {
101
+ position: sticky;
102
+ bottom: 0;
103
+ z-index: 2;
104
+ }
105
+ .header,
106
+ .body,
107
+ .footer {
108
+ .table-cell {
109
+ align-self: stretch; // 子元素高度和父元素一致
110
+ display: inline-flex;
111
+ align-items: center;
112
+ border-top: 1px solid @--border-color-secondary;
113
+ border-right: 1px solid @--border-color-secondary;
114
+ background-color: #fff;
115
+ &.selection-column {
116
+ justify-content: center;
117
+ border-right-color: transparent;
118
+ cursor: default;
119
+ }
120
+ .action {
121
+ display: inline-flex;
122
+ align-items: center;
123
+ justify-content: center;
124
+ .drag-icon,
125
+ .expand-icon {
126
+ display: inline-flex;
127
+ align-items: center;
128
+ justify-content: center;
129
+ width: 20px;
130
+ height: 20px;
131
+ color: @--text-color-placeholder;
132
+ cursor: pointer;
133
+ visibility: hidden;
134
+ }
135
+ .drag-icon {
136
+ cursor: grab;
137
+ }
138
+ .expand-icon:hover {
139
+ color: @--primary-color;
140
+ }
141
+ .middle {
142
+ text-align: center;
143
+ width: 16px;
144
+ margin: 0 2px;
145
+ .order {
146
+ display: inline-block;
147
+ }
148
+ .checkbox {
149
+ display: none;
150
+ }
151
+ }
152
+ }
153
+ &.col--center {
154
+ text-align: center;
155
+ justify-content: center;
156
+ }
157
+ &.col--right {
158
+ text-align: right;
159
+ justify-content: flex-end;
160
+ }
161
+ &.col--fix-left {
162
+ position: sticky;
163
+ z-index: 1;
164
+ }
165
+ &.col--checked {
166
+ background-color: @--primary-1;
167
+ }
168
+ &.active {
169
+ box-shadow: inset 0 0 0 2px @--primary-color;
170
+ background-color: rgba(255, 235, 140, 1);
171
+ }
172
+ .cell {
173
+ .text-overflow-cut();
174
+ padding: 0 @--padding-sm;
175
+ }
176
+ }
177
+ .label-cell,
178
+ .table-cell {
179
+ &:hover {
180
+ .count-select {
181
+ visibility: visible;
182
+ }
183
+ }
184
+ }
185
+ .count-select {
186
+ .text-overflow-cut();
187
+ display: inline-flex;
188
+ align-items: center;
189
+ justify-content: flex-end;
190
+ height: 100%;
191
+ width: 100%;
192
+ padding: 0 4px;
193
+ color: @--text-color-placeholder;
194
+ cursor: pointer;
195
+ visibility: hidden;
196
+ &:hover,
197
+ &.ant-dropdown-open {
198
+ visibility: visible;
199
+ background-color: @--background-color-light;
200
+ }
201
+ &.show {
202
+ visibility: visible;
203
+ }
204
+ .icon {
205
+ margin-left: 4px;
206
+ }
207
+ }
208
+ }
209
+ .resize-line {
210
+ position: absolute;
211
+ left: -2px;
212
+ top: 0;
213
+ width: 2px;
214
+ height: 100%;
215
+ background-color: @--primary-color;
216
+ z-index: 2;
217
+ }
218
+ .fixed-line {
219
+ position: absolute;
220
+ left: -1px;
221
+ top: 0;
222
+ width: 0;
223
+ height: 100%;
224
+ border-left: 1px solid @--border-color-base;
225
+ z-index: 2;
226
+ pointer-events: none;
227
+ &::after {
228
+ content: '';
229
+ position: absolute;
230
+ top: 0;
231
+ right: 0;
232
+ bottom: -1px;
233
+ width: 20px;
234
+ transform: translateX(100%);
235
+ transition: box-shadow 0.3s, -webkit-box-shadow 0.3s;
236
+ pointer-events: none;
237
+ }
238
+ &.leave {
239
+ &::after {
240
+ box-shadow: inset 10px 0 8px -8px rgba(0, 0, 0, 0.15);
241
+ }
242
+ }
243
+ &.active {
244
+ border-left: 1px solid @--primary-color;
245
+ border-right: 1px solid @--primary-color;
246
+ }
247
+ }
248
+ .fixed-bar {
249
+ position: absolute;
250
+ top: 0;
251
+ left: -1px;
252
+ width: 6px;
253
+ height: 100%;
254
+ margin-left: -2px;
255
+ background-image: none;
256
+ background-repeat: no-repeat;
257
+ z-index: 1;
258
+ cursor: col-resize;
259
+ &:hover,
260
+ &.active {
261
+ background-image: linear-gradient(to right, transparent 2px, @--border-color-base 2px 4px, transparent 4px 6px);
262
+ z-index: 2;
263
+ .thumb {
264
+ opacity: 1;
265
+ }
266
+ }
267
+ .thumb {
268
+ position: absolute;
269
+ top: 0;
270
+ left: 0;
271
+ width: 100%;
272
+ height: 32px;
273
+ border-radius: 6px;
274
+ background-color: @--primary-color;
275
+ opacity: 0;
276
+ pointer-events: none;
277
+ }
278
+ }
279
+ .content-empty {
280
+ position: absolute;
281
+ inset: 0;
282
+ display: inline-flex;
283
+ flex-direction: column;
284
+ justify-content: center;
285
+ }
286
+ // 左侧面板
287
+ .left-panel {
288
+ position: sticky;
289
+ left: 0;
290
+ z-index: 1;
291
+ .group-label {
292
+ border-right: 0 !important;
293
+ .bor-radius-left();
294
+ &.level0 {
295
+ .bor-left-shadow();
296
+ }
297
+ }
298
+ .row-item {
299
+ &:nth-of-type(1) {
300
+ border-top-left-radius: @border-radius;
301
+ .bor-left-shadow();
302
+ .table-cell:first-child {
303
+ border-top-left-radius: @border-radius;
304
+ }
305
+ }
306
+ &.last {
307
+ border-bottom-left-radius: @border-radius;
308
+ .table-cell:first-child {
309
+ border-bottom-left-radius: @border-radius;
310
+ }
311
+ }
312
+ &.is-leaf {
313
+ .selection-column {
314
+ border-top-color: transparent;
315
+ }
316
+ .cell--indent {
317
+ display: flex;
318
+ height: inherit;
319
+ background-color: #fff;
320
+ .line {
321
+ flex: 1 0;
322
+ position: relative;
323
+ &::before {
324
+ content: '';
325
+ position: absolute;
326
+ left: 10px;
327
+ height: 100%;
328
+ margin-top: -100%;
329
+ border-left: 1px dashed rgba(0, 0, 0, 0.175);
330
+ }
331
+ }
332
+ }
333
+ }
334
+ }
335
+ .no-group {
336
+ .row-item:last-child {
337
+ .bor-left-shadow();
338
+ }
339
+ }
340
+ }
341
+ .main-panel {
342
+ flex: 1 0;
343
+ z-index: 0;
344
+ .group-label,
345
+ .row-item {
346
+ border-left: 0 !important;
347
+ }
348
+ .group-label {
349
+ .bor-radius-right();
350
+ }
351
+ .row-item {
352
+ &:nth-of-type(1) {
353
+ border-top-right-radius: @border-radius;
354
+ .table-cell:last-child {
355
+ border-top-right-radius: @border-radius;
356
+ }
357
+ }
358
+ &.last {
359
+ border-bottom-right-radius: @border-radius;
360
+ .table-cell:last-child {
361
+ border-bottom-right-radius: @border-radius;
362
+ }
363
+ }
364
+ }
365
+ }
366
+ .container {
367
+ position: relative;
368
+ left: 0;
369
+ top: 0;
370
+ &.no-group {
371
+ .row-item:last-child {
372
+ .table-cell {
373
+ border-bottom: 1px solid @--border-color-secondary;
374
+ }
375
+ }
376
+ }
377
+ .group-label {
378
+ position: absolute;
379
+ box-sizing: content-box;
380
+ border: 1px solid @--border-color-secondary;
381
+ background-color: #fff;
382
+ overflow: hidden;
383
+ .label-row {
384
+ display: flex;
385
+ align-items: center;
386
+ }
387
+ .label-cell {
388
+ align-self: stretch;
389
+ display: inline-flex;
390
+ align-items: center;
391
+ &.expandable-column {
392
+ justify-content: center;
393
+ .button-icon {
394
+ & > .anticon {
395
+ transition: transform 0.3s ease;
396
+ }
397
+ &.expand > .anticon {
398
+ transform: rotate(90deg);
399
+ }
400
+ }
401
+ }
402
+ &.col--fix-left {
403
+ position: sticky;
404
+ z-index: 1;
405
+ }
406
+ .title {
407
+ flex: 1 0;
408
+ margin-left: 8px;
409
+ font-weight: 600;
410
+ .text-overflow-cut();
411
+ & + .count-select {
412
+ width: fit-content;
413
+ padding-left: @--padding-md;
414
+ }
415
+ &.empty {
416
+ color: @--text-color-placeholder;
417
+ font-weight: 400;
418
+ }
419
+ }
420
+ }
421
+ }
422
+ .row-item {
423
+ position: absolute;
424
+ border-left: 1px solid @--border-color-secondary;
425
+ .table-row {
426
+ display: flex;
427
+ align-items: center;
428
+ height: inherit;
429
+ &.row--hover,
430
+ &.row--selection {
431
+ .table-cell,
432
+ .cell--indent {
433
+ background-color: @--background-color-light;
434
+ .middle&:has(.checkbox) {
435
+ .order {
436
+ display: none;
437
+ }
438
+ .checkbox {
439
+ display: inline-flex;
440
+ }
441
+ }
442
+ }
443
+ }
444
+ &.row--highlight {
445
+ .table-cell,
446
+ .cell--indent {
447
+ background-color: @--primary-1;
448
+ }
449
+ }
450
+ &.row--hover {
451
+ .table-cell {
452
+ .drag-icon,
453
+ .expand-icon {
454
+ visibility: visible;
455
+ }
456
+ }
457
+ }
458
+ .cell--expand {
459
+ display: inline-flex;
460
+ align-items: center;
461
+ justify-content: center;
462
+ z-index: 1;
463
+ padding: 3px;
464
+ color: @--text-color-placeholder;
465
+ border-radius: @--border-radius-lg;
466
+ background-color: #fff;
467
+ user-select: none;
468
+ cursor: pointer;
469
+ .icon {
470
+ transition: transform 0.3s ease;
471
+ }
472
+ &.fold {
473
+ .icon {
474
+ transform: rotate(-90deg);
475
+ }
476
+ }
477
+ &.disabled {
478
+ color: @--disabled-color;
479
+ cursor: not-allowed;
480
+ }
481
+ }
482
+ }
483
+ }
484
+ }
485
+ // size
486
+ &.small {
487
+ .label-cell,
488
+ .table-cell {
489
+ height: 26px;
490
+ }
491
+ }
492
+ &.middle {
493
+ .label-cell,
494
+ .table-cell {
495
+ height: 34px;
496
+ }
497
+ }
498
+ &.large {
499
+ .label-cell,
500
+ .table-cell {
501
+ height: 42px;
502
+ }
503
+ }
504
+ }