cx 26.3.7 → 26.3.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/build/widgets/grid/Grid.d.ts.map +1 -1
  2. package/build/widgets/grid/Grid.js +1 -0
  3. package/dist/manifest.js +725 -725
  4. package/dist/widgets.js +1 -0
  5. package/package.json +1 -1
  6. package/src/widgets/grid/Grid.scss +657 -690
  7. package/src/widgets/grid/Grid.tsx +1 -0
package/src/widgets/grid/Grid.scss CHANGED
@@ -1,690 +1,657 @@
1
- @use "sass:math";
2
- @use "sass:map";
3
- @use "../variables" as *;
4
- @use "../maps" as *;
5
- @use "../../util/scss/add-rules.scss" as *;
6
- @use "../../util/scss/clockwise.scss" as *;
7
- @use "../../util/scss/deep-merge.scss" as *;
8
- @use "../../util/scss/calc.scss" as *;
9
- @use "../../util/scss/besm.scss" as *;
10
- @use "../../util/scss/include.scss" as *;
11
-
12
- @mixin cx-grid(
13
- $name: "grid",
14
- $header-state-style-map: $cx-grid-header-state-style-map,
15
- $data-state-style-map: $cx-grid-data-state-style-map,
16
- $cell-cursor-style: $cx-grid-cell-cursor-style,
17
- $icon-size: $cx-default-icon-size,
18
- $besm: $cx-besm
19
- ) {
20
- $block: map.get($besm, block);
21
- $element: map.get($besm, element);
22
- $state: map.get($besm, state);
23
- $mod: map.get($besm, mod);
24
-
25
- .#{$block}#{$name} {
26
- box-sizing: border-box;
27
- position: relative;
28
- font-size: $cx-default-grid-font-size;
29
- box-shadow: $cx-default-grid-box-shadow;
30
- border-radius: $cx-default-grid-border-radius;
31
-
32
- @include cx-add-state-rules($cx-list, default);
33
-
34
- &:focus {
35
- @include cx-add-state-rules($cx-list, focus);
36
- }
37
-
38
- table {
39
- border-spacing: 0;
40
- border-collapse: collapse;
41
- width: 100%;
42
- position: relative;
43
- font-size: inherit;
44
- }
45
-
46
- .#{$state}aligned-left {
47
- text-align: left;
48
- }
49
-
50
- .#{$state}aligned-right {
51
- text-align: right;
52
- }
53
-
54
- .#{$state}aligned-center {
55
- text-align: center;
56
- }
57
-
58
- &.#{$state}scrollable {
59
- overflow: hidden;
60
- display: flex;
61
- flex-direction: row;
62
- align-items: stretch;
63
-
64
- &.#{$state}border {
65
- border: 1px solid $cx-default-grid-border-color;
66
- background: $cx-default-grid-background;
67
-
68
- table {
69
- border: none;
70
- }
71
-
72
- .#{$element}#{$name}-header:first-child {
73
- th {
74
- border-top: none;
75
- }
76
- }
77
-
78
- th {
79
- border-left: none;
80
- }
81
-
82
- th:last-child {
83
- border-right: none;
84
- }
85
- }
86
-
87
- & > .#{$element}#{$name}-scroll-area {
88
- overflow-y: auto;
89
- flex: 1 1 0%;
90
- -webkit-overflow-scrolling: touch;
91
-
92
- &.#{$state}fixed-header
93
- > .#{$element}#{$name}-table-wrapper
94
- > table
95
- > .#{$element}#{$name}-header:first-child {
96
- visibility: hidden;
97
- }
98
-
99
- //used to cut off the negative margin
100
- & > .#{$element}#{$name}-table-wrapper {
101
- overflow: hidden;
102
- display: inline-block; //preserve content width
103
- vertical-align: top;
104
- min-width: 100%;
105
- min-height: 100%;
106
- padding-top: $cx-default-grid-scroll-wrapper-padding-top;
107
- }
108
- }
109
- }
110
-
111
- &.#{$state}resizable {
112
- .#{$element}#{$name}-data td,
113
- .#{$element}#{$name}-group-footer td,
114
- .#{$element}#{$name}-group-header td {
115
- box-sizing: border-box;
116
- overflow: hidden;
117
- text-overflow: ellipsis;
118
- }
119
-
120
- .cxe-grid-fixed-header .cxe-grid-col-header:last-child {
121
- max-width: 100%;
122
- width: 100%;
123
- }
124
- }
125
-
126
- &.#{$state}border {
127
- background: $cx-default-grid-background;
128
-
129
- table {
130
- border: 1px solid $cx-default-grid-border-color;
131
- }
132
- }
133
-
134
- &.#{$state}vlines {
135
- td:not(:last-child),
136
- th:not(:last-child) {
137
- border-right-width: 1px;
138
- border-right-style: solid;
139
- border-right-color: $cx-default-grid-border-color;
140
- }
141
- }
142
-
143
- &.#{$mod}responsive {
144
- width: 100%;
145
-
146
- & > .#{$element}#{$name}-scroll-area {
147
- overflow-x: auto;
148
- }
149
- }
150
-
151
- &.#{$mod}fixed-layout {
152
- table {
153
- table-layout: fixed;
154
- width: auto;
155
- }
156
- }
157
-
158
- &.#{$mod}contain {
159
- table {
160
- contain: layout paint;
161
- }
162
- }
163
-
164
- &.#{$mod}nowrap {
165
- .cxe-grid-data td,
166
- .cxe-grid-fixed-footer td,
167
- .cxe-grid-fixed-fixed-footer td {
168
- white-space: nowrap;
169
- }
170
- }
171
- }
172
-
173
- .#{$element}#{$name}-table-wrapper {
174
- overflow-anchor: none;
175
- }
176
-
177
- .#{$element}#{$name}-cell-clip {
178
- overflow: hidden;
179
- text-overflow: ellipsis;
180
- }
181
-
182
- .#{$element}#{$name}-row-number::after {
183
- counter-increment: cx-row-number;
184
- content: counter(cx-row-number);
185
- }
186
-
187
- .#{$element}#{$name}-fixed-header {
188
- overflow: hidden;
189
- position: absolute;
190
- display: none;
191
- left: 0;
192
- top: 0;
193
- right: 0;
194
-
195
- & > table {
196
- width: auto;
197
- table-layout: fixed;
198
- }
199
- }
200
-
201
- .#{$element}#{$name}-fixed-fixed-header {
202
- overflow: hidden;
203
- position: absolute;
204
- display: none;
205
- left: 0;
206
- top: 0;
207
- box-sizing: border-box;
208
- border-right: 1px solid $cx-default-grid-border-color;
209
-
210
- & > table {
211
- width: auto;
212
- table-layout: fixed;
213
- }
214
- }
215
-
216
- .#{$element}#{$name}-fixed-footer {
217
- overflow: hidden;
218
- position: absolute;
219
- display: none;
220
- left: 0;
221
- bottom: 0;
222
- right: 0;
223
-
224
- & > table {
225
- width: auto;
226
- table-layout: fixed;
227
- }
228
- }
229
-
230
- .#{$element}#{$name}-fixed-fixed-footer {
231
- overflow: hidden;
232
- position: absolute;
233
- display: none;
234
- left: 0;
235
- bottom: 0;
236
- border-right: 1px solid $cx-default-grid-border-color;
237
- box-sizing: border-box;
238
-
239
- & > table {
240
- width: auto;
241
- table-layout: fixed;
242
- }
243
- }
244
-
245
- .#{$element}#{$name}-fixed-footer-corner {
246
- width: 100%;
247
- }
248
-
249
- .#{$element}#{$name}-empty-text td {
250
- color: #aaa;
251
- padding: 2rem;
252
- }
253
-
254
- .#{$element}#{$name}-col-header {
255
- text-align: left;
256
- padding: cx-get-state-rule($data-state-style-map, default, padding);
257
- box-sizing: border-box;
258
- position: relative;
259
- -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
260
- -webkit-user-select: none;
261
-
262
- @include cx-add-state-rules($header-state-style-map, default);
263
-
264
- .#{$state}header-default & {
265
- border-width: 1px;
266
- border-style: solid;
267
- position: relative;
268
- }
269
-
270
- .#{$state}header-plain & {
271
- background-color: transparent;
272
- }
273
-
274
- &.#{$state}sortable {
275
- cursor: pointer;
276
- user-select: none;
277
-
278
- &.#{$state}sorted-asc,
279
- &.#{$state}sorted-desc {
280
- @include cx-add-state-rules($header-state-style-map, sorted);
281
-
282
- &:hover {
283
- @include cx-add-state-rules(
284
- $header-state-style-map,
285
- sorted-hover
286
- );
287
- }
288
- }
289
-
290
- &:hover,
291
- .#{$element}#{$name}-fixed-header &:hover {
292
- @include cx-add-state-rules($header-state-style-map, hover);
293
- }
294
-
295
- .#{$element}#{$name}-fixed-header & {
296
- &.#{$state}sorted-asc,
297
- &.#{$state}sorted-desc {
298
- &:hover {
299
- @include cx-add-state-rules(
300
- $header-state-style-map,
301
- sorted-hover
302
- );
303
- }
304
- }
305
- }
306
- }
307
-
308
- &.#{$state}tool {
309
- transition: padding-left 0.2s;
310
- padding-right: cx-calc(15px, $icon-size);
311
- }
312
-
313
- &.#{$state}sortable:not(.#{$state}aligned-right) {
314
- padding-right: cx-calc(5px, $icon-size);
315
-
316
- .#{$element}#{$name}-column-sort-icon {
317
- right: 2px;
318
- }
319
-
320
- &.#{$state}tool.#{$state}sorted-asc,
321
- &.#{$state}tool.#{$state}sorted-desc {
322
- padding-left: cx-calc(5px, $icon-size);
323
-
324
- .#{$element}#{$name}-column-sort-icon {
325
- left: 2px;
326
- }
327
- }
328
- }
329
-
330
- &.#{$state}sortable.#{$state}aligned-center {
331
- padding-left: cx-calc(5px, $icon-size);
332
- }
333
-
334
- &.#{$state}sortable.#{$state}aligned-right {
335
- padding-left: cx-calc(5px, $icon-size);
336
-
337
- .#{$element}#{$name}-column-sort-icon {
338
- left: 2px;
339
- }
340
- }
341
- }
342
-
343
- .#{$element}#{$name}-column-sort-icon {
344
- width: $icon-size;
345
- height: $icon-size;
346
- top: 50%;
347
- margin-top: cx-multiply($icon-size, -0.5);
348
- position: absolute;
349
- transition: transform 0.1s linear;
350
-
351
- .#{$state}sorted-desc > & {
352
- transform: rotate(180deg);
353
- }
354
- }
355
-
356
- .#{$element}#{$name}-data {
357
- -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
358
- background-color: cx-get-state-rule(
359
- $data-state-style-map,
360
- default,
361
- background-color
362
- );
363
-
364
- &.#{$state}alternate {
365
- @include cx-add-state-rules($data-state-style-map, alternate);
366
- }
367
-
368
- td {
369
- padding: 0;
370
- border-top: 1px solid
371
- cx-get-state-rule($data-state-style-map, default, border-color);
372
- line-height: cx-get-state-rule(
373
- $data-state-style-map,
374
- default,
375
- line-height
376
- );
377
- font-weight: cx-get-state-rule(
378
- $data-state-style-map,
379
- default,
380
- font-weight
381
- );
382
- font-size: cx-get-state-rule(
383
- $data-state-style-map,
384
- default,
385
- font-size
386
- );
387
-
388
- &:empty::before {
389
- content: "-";
390
- visibility: hidden;
391
- }
392
- }
393
-
394
- td.#{$state}pad {
395
- padding: cx-get-state-rule($data-state-style-map, default, padding);
396
- }
397
-
398
- .#{$state}selectable & {
399
- &:hover,
400
- &.#{$state}hover {
401
- @include cx-add-state-rules($cx-list-item, hover);
402
- }
403
-
404
- &.#{$state}cursor {
405
- @include cx-add-state-rules($cx-list-item, hover);
406
- }
407
-
408
- &.#{$state}selected {
409
- @include cx-add-state-rules($cx-list-item, selected);
410
-
411
- &.#{$state}cursor {
412
- @include cx-add-state-rules($cx-list-item, selected-cursor);
413
- }
414
- }
415
- }
416
-
417
- .#{$state}focused &,
418
- :focus & {
419
- &.#{$state}cursor {
420
- @include cx-add-state-rules($cx-list-item, cursor);
421
- }
422
-
423
- &.#{$state}selected {
424
- &.#{$state}cursor {
425
- @include cx-add-state-rules($cx-list-item, selected-cursor);
426
- }
427
- }
428
-
429
- &:active {
430
- @include cx-add-state-rules($cx-list-item, active);
431
- }
432
- }
433
-
434
- .#{$state}drag-move &.#{$state}dragged {
435
- display: none;
436
- }
437
-
438
- .#{$state}drag-copy &.#{$state}dragged {
439
- opacity: 0.5;
440
- }
441
-
442
- &.#{$state}draggable {
443
- touch-action: none;
444
- }
445
-
446
- &.#{$state}dummy {
447
- td {
448
- box-sizing: border-box;
449
- }
450
- }
451
-
452
- &.#{$state}over {
453
- background: orange !important;
454
- }
455
- }
456
-
457
- .#{$element}#{$name}-dropzone {
458
- position: relative;
459
- padding: 0;
460
-
461
- .#{$state}drop-preview & {
462
- border-top: 1px solid $cx-default-grid-border-color;
463
-
464
- &:after {
465
- position: absolute;
466
- left: 3px;
467
- right: 3px;
468
- top: 3px;
469
- bottom: 3px;
470
- border: 1px dotted gray;
471
- content: " ";
472
- }
473
- }
474
-
475
- .#{$state}drop-insertion & {
476
- height: 0;
477
-
478
- &:after {
479
- position: absolute;
480
- left: 0;
481
- right: 0;
482
- top: 0;
483
- bottom: 0;
484
- border-top: 1px solid black;
485
- content: " ";
486
- box-shadow: 0 0 2px black;
487
- }
488
- }
489
- }
490
-
491
- .#{$element}#{$name}-group-caption {
492
- font-weight: bold;
493
-
494
- td {
495
- padding: cx-get-state-rule($data-state-style-map, default, padding);
496
- }
497
-
498
- &:not(:first-child) {
499
- td {
500
- padding-top: $cx-default-grid-caption-gap;
501
- }
502
- }
503
- }
504
-
505
- @for $i from 1 through 4 {
506
- .#{$element}#{$name}-group-caption.#{$state}level-#{$i} td {
507
- @include cx-add-state-rules(
508
- $cx-grid-group-caption-level-style-map,
509
- level-#{$i}
510
- );
511
- }
512
- }
513
-
514
- .#{$element}#{$name}-group-footer {
515
- td {
516
- box-sizing: border-box;
517
- &.#{$state}pad {
518
- padding: cx-get-state-rule($data-state-style-map, default, padding);
519
- }
520
- }
521
- }
522
-
523
- @for $i from 1 through 4 {
524
- .#{$element}#{$name}-group-footer.#{$state}level-#{$i} td {
525
- @include cx-add-state-rules(
526
- $cx-grid-group-footer-level-style-map,
527
- level-#{$i}
528
- );
529
- }
530
- }
531
-
532
- .#{$block}#{$name}.#{$state}cell-editable {
533
- .#{$element}#{$name}-data td {
534
- &:hover {
535
- background: rgba(gray, 0.05);
536
- }
537
-
538
- &.#{$state}cellected {
539
- position: relative;
540
- user-select: none;
541
- overflow: visible;
542
-
543
- &:after {
544
- position: absolute;
545
- pointer-events: none;
546
- content: " ";
547
- @include cx-add-rules($cell-cursor-style);
548
- }
549
-
550
- &:last-child::after {
551
- //prevent horizontal scroll for fixed columns
552
- right: 0;
553
- }
554
- }
555
-
556
- &.#{$element}#{$name}-cell-editor {
557
- position: relative;
558
- user-select: none;
559
- overflow: visible;
560
- }
561
- }
562
- }
563
-
564
- .#{$element}#{$name}-cell-editor-wrap {
565
- position: absolute;
566
- top: -1px;
567
- bottom: 0;
568
- left: 0;
569
- right: 0;
570
- width: 100%;
571
- height: calc(100% + 2px);
572
-
573
- & > *:only-child {
574
- width: 100%;
575
- height: 100%;
576
- top: 0;
577
- left: 0;
578
- }
579
- }
580
-
581
- .#{$block}#{$name}.#{$state}buffered,
582
- .#{$block}#{$name}.#{$state}fixed-columns {
583
- .#{$element}#{$name}-data {
584
- white-space: nowrap;
585
- }
586
- }
587
-
588
- .#{$block}#{$name}.#{$state}fixed-columns {
589
- > .#{$element}#{$name}-scroll-area {
590
- overflow-x: scroll;
591
- }
592
- }
593
-
594
- .#{$element}#{$name}-scroll-area {
595
- &.#{$state}fixed-footer
596
- > .#{$element}#{$name}-table-wrapper
597
- > table
598
- > .#{$element}#{$name}-group-footer:last-child {
599
- visibility: hidden;
600
-
601
- td {
602
- border: none;
603
- }
604
- }
605
- }
606
-
607
- .#{$element}#{$name}-fixed-scroll-area {
608
- overflow-x: scroll;
609
- overflow-y: hidden;
610
- border-color: $cx-default-grid-border-color;
611
- border-right-style: solid;
612
- border-right-width: 1px;
613
-
614
- & > .#{$element}#{$name}-fixed-table-wrapper {
615
- padding-top: $cx-default-grid-scroll-wrapper-padding-top;
616
- }
617
-
618
- &.#{$state}fixed-footer
619
- > .#{$element}#{$name}-fixed-table-wrapper
620
- > table
621
- > .#{$element}#{$name}-group-footer:last-child {
622
- visibility: hidden;
623
-
624
- td {
625
- border: none;
626
- }
627
- }
628
- }
629
-
630
- .#{$element}#{$name}-col-header-tool {
631
- position: absolute;
632
- right: 0;
633
- top: 0;
634
- bottom: 0;
635
- }
636
-
637
- .#{$element}#{$name}-col-resizer {
638
- position: absolute;
639
- right: 0;
640
- top: 0;
641
- bottom: 0;
642
- width: 5px;
643
- cursor: col-resize;
644
- }
645
-
646
- .#{$element}#{$name}-col-resizer-prev-col {
647
- position: absolute;
648
- left: 0;
649
- top: 0;
650
- bottom: 0;
651
- width: 5px;
652
- cursor: col-resize;
653
- }
654
-
655
- .#{$element}#{$name}-resize-overlay {
656
- position: absolute;
657
- display: block;
658
- pointer-events: none;
659
- top: 0;
660
- bottom: 0;
661
- left: 0;
662
- width: 0;
663
- border-right: 3px solid $cx-default-grid-border-color;
664
- background: color-mix(
665
- in srgb,
666
- $cx-default-grid-border-color 15%,
667
- transparent
668
- );
669
- box-sizing: border-box;
670
- }
671
-
672
- .#{$element}#{$name}-col-header-drag-clone {
673
- border: 1px solid $cx-default-grid-border-color;
674
- padding: cx-get-state-rule($data-state-style-map, default, padding);
675
- @include cx-add-state-rules($header-state-style-map, default);
676
- box-sizing: border-box;
677
- font-size: $cx-default-grid-font-size;
678
- }
679
-
680
- .#{$element}#{$name}-col-insertion-marker {
681
- border: 1px solid black;
682
- position: absolute;
683
- top: 0;
684
- height: calc(100% - 1px);
685
- }
686
- }
687
-
688
- @if (cx-should-include("cx/widgets/Grid")) {
689
- @include cx-grid();
690
- }
1
+ @use "sass:math";
2
+ @use "sass:map";
3
+ @use "../variables" as *;
4
+ @use "../maps" as *;
5
+ @use "../../util/scss/add-rules.scss" as *;
6
+ @use "../../util/scss/clockwise.scss" as *;
7
+ @use "../../util/scss/deep-merge.scss" as *;
8
+ @use "../../util/scss/calc.scss" as *;
9
+ @use "../../util/scss/besm.scss" as *;
10
+ @use "../../util/scss/include.scss" as *;
11
+
12
+ @mixin cx-grid(
13
+ $name: "grid",
14
+ $header-state-style-map: $cx-grid-header-state-style-map,
15
+ $data-state-style-map: $cx-grid-data-state-style-map,
16
+ $cell-cursor-style: $cx-grid-cell-cursor-style,
17
+ $icon-size: $cx-default-icon-size,
18
+ $besm: $cx-besm
19
+ ) {
20
+ $block: map.get($besm, block);
21
+ $element: map.get($besm, element);
22
+ $state: map.get($besm, state);
23
+ $mod: map.get($besm, mod);
24
+
25
+ .#{$block}#{$name} {
26
+ box-sizing: border-box;
27
+ position: relative;
28
+ font-size: $cx-default-grid-font-size;
29
+ box-shadow: $cx-default-grid-box-shadow;
30
+ border-radius: $cx-default-grid-border-radius;
31
+
32
+ @include cx-add-state-rules($cx-list, default);
33
+
34
+ &:focus {
35
+ @include cx-add-state-rules($cx-list, focus);
36
+ }
37
+
38
+ table {
39
+ border-spacing: 0;
40
+ border-collapse: collapse;
41
+ width: 100%;
42
+ position: relative;
43
+ font-size: inherit;
44
+ }
45
+
46
+ .#{$state}aligned-left {
47
+ text-align: left;
48
+ }
49
+
50
+ .#{$state}aligned-right {
51
+ text-align: right;
52
+ }
53
+
54
+ .#{$state}aligned-center {
55
+ text-align: center;
56
+ }
57
+
58
+ &.#{$state}scrollable {
59
+ overflow: hidden;
60
+ display: flex;
61
+ flex-direction: row;
62
+ align-items: stretch;
63
+
64
+ &.#{$state}border {
65
+ border: 1px solid $cx-default-grid-border-color;
66
+ background: $cx-default-grid-background;
67
+
68
+ table {
69
+ border: none;
70
+ }
71
+
72
+ .#{$element}#{$name}-header:first-child {
73
+ th {
74
+ border-top: none;
75
+ }
76
+ }
77
+
78
+ th {
79
+ border-left: none;
80
+ }
81
+
82
+ th:last-child {
83
+ border-right: none;
84
+ }
85
+ }
86
+
87
+ & > .#{$element}#{$name}-scroll-area {
88
+ overflow-y: auto;
89
+ flex: 1 1 0%;
90
+ -webkit-overflow-scrolling: touch;
91
+
92
+ &.#{$state}fixed-header
93
+ > .#{$element}#{$name}-table-wrapper
94
+ > table
95
+ > .#{$element}#{$name}-header:first-child {
96
+ visibility: hidden;
97
+ }
98
+
99
+ //used to cut off the negative margin
100
+ & > .#{$element}#{$name}-table-wrapper {
101
+ overflow: hidden;
102
+ display: inline-block; //preserve content width
103
+ vertical-align: top;
104
+ min-width: 100%;
105
+ min-height: 100%;
106
+ padding-top: $cx-default-grid-scroll-wrapper-padding-top;
107
+ }
108
+ }
109
+ }
110
+
111
+ &.#{$state}resizable {
112
+ .#{$element}#{$name}-data td,
113
+ .#{$element}#{$name}-group-footer td,
114
+ .#{$element}#{$name}-group-header td {
115
+ box-sizing: border-box;
116
+ overflow: hidden;
117
+ text-overflow: ellipsis;
118
+ }
119
+
120
+ .cxe-grid-fixed-header .cxe-grid-col-header:last-child {
121
+ max-width: 100%;
122
+ width: 100%;
123
+ }
124
+ }
125
+
126
+ &.#{$state}border {
127
+ background: $cx-default-grid-background;
128
+
129
+ table {
130
+ border: 1px solid $cx-default-grid-border-color;
131
+ }
132
+ }
133
+
134
+ &.#{$state}vlines {
135
+ td:not(:last-child),
136
+ th:not(:last-child) {
137
+ border-right-width: 1px;
138
+ border-right-style: solid;
139
+ border-right-color: $cx-default-grid-border-color;
140
+ }
141
+ }
142
+
143
+ &.#{$mod}responsive {
144
+ width: 100%;
145
+
146
+ & > .#{$element}#{$name}-scroll-area {
147
+ overflow-x: auto;
148
+ }
149
+ }
150
+
151
+ &.#{$mod}fixed-layout {
152
+ table {
153
+ table-layout: fixed;
154
+ width: auto;
155
+ }
156
+ }
157
+
158
+ &.#{$mod}contain {
159
+ table {
160
+ contain: layout paint;
161
+ }
162
+ }
163
+
164
+ &.#{$mod}nowrap {
165
+ .cxe-grid-data td,
166
+ .cxe-grid-fixed-footer td,
167
+ .cxe-grid-fixed-fixed-footer td {
168
+ white-space: nowrap;
169
+ }
170
+ }
171
+ }
172
+
173
+ .#{$element}#{$name}-table-wrapper {
174
+ overflow-anchor: none;
175
+ }
176
+
177
+ .#{$element}#{$name}-cell-clip {
178
+ overflow: hidden;
179
+ text-overflow: ellipsis;
180
+ }
181
+
182
+ .#{$element}#{$name}-row-number::after {
183
+ counter-increment: cx-row-number;
184
+ content: counter(cx-row-number);
185
+ }
186
+
187
+ .#{$element}#{$name}-fixed-header {
188
+ overflow: hidden;
189
+ position: absolute;
190
+ display: none;
191
+ left: 0;
192
+ top: 0;
193
+ right: 0;
194
+
195
+ & > table {
196
+ width: auto;
197
+ table-layout: fixed;
198
+ }
199
+ }
200
+
201
+ .#{$element}#{$name}-fixed-fixed-header {
202
+ overflow: hidden;
203
+ position: absolute;
204
+ display: none;
205
+ left: 0;
206
+ top: 0;
207
+ box-sizing: border-box;
208
+ border-right: 1px solid $cx-default-grid-border-color;
209
+
210
+ & > table {
211
+ width: auto;
212
+ table-layout: fixed;
213
+ }
214
+ }
215
+
216
+ .#{$element}#{$name}-fixed-footer {
217
+ overflow: hidden;
218
+ position: absolute;
219
+ display: none;
220
+ left: 0;
221
+ bottom: 0;
222
+ right: 0;
223
+
224
+ & > table {
225
+ width: auto;
226
+ table-layout: fixed;
227
+ }
228
+ }
229
+
230
+ .#{$element}#{$name}-fixed-fixed-footer {
231
+ overflow: hidden;
232
+ position: absolute;
233
+ display: none;
234
+ left: 0;
235
+ bottom: 0;
236
+ border-right: 1px solid $cx-default-grid-border-color;
237
+ box-sizing: border-box;
238
+
239
+ & > table {
240
+ width: auto;
241
+ table-layout: fixed;
242
+ }
243
+ }
244
+
245
+ .#{$element}#{$name}-fixed-footer-corner {
246
+ width: 100%;
247
+ }
248
+
249
+ .#{$element}#{$name}-empty-text td {
250
+ color: #aaa;
251
+ padding: 2rem;
252
+ }
253
+
254
+ .#{$element}#{$name}-col-header {
255
+ text-align: left;
256
+ padding: cx-get-state-rule($data-state-style-map, default, padding);
257
+ box-sizing: border-box;
258
+ position: relative;
259
+ -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
260
+ -webkit-user-select: none;
261
+
262
+ @include cx-add-state-rules($header-state-style-map, default);
263
+
264
+ .#{$state}header-default & {
265
+ border-width: 1px;
266
+ border-style: solid;
267
+ position: relative;
268
+ }
269
+
270
+ .#{$state}header-plain & {
271
+ background-color: transparent;
272
+ }
273
+
274
+ &.#{$state}sortable {
275
+ cursor: pointer;
276
+ user-select: none;
277
+
278
+ &.#{$state}sorted-asc,
279
+ &.#{$state}sorted-desc {
280
+ @include cx-add-state-rules($header-state-style-map, sorted);
281
+
282
+ &:hover {
283
+ @include cx-add-state-rules($header-state-style-map, sorted-hover);
284
+ }
285
+ }
286
+
287
+ &:hover,
288
+ .#{$element}#{$name}-fixed-header &:hover {
289
+ @include cx-add-state-rules($header-state-style-map, hover);
290
+ }
291
+
292
+ .#{$element}#{$name}-fixed-header & {
293
+ &.#{$state}sorted-asc,
294
+ &.#{$state}sorted-desc {
295
+ &:hover {
296
+ @include cx-add-state-rules($header-state-style-map, sorted-hover);
297
+ }
298
+ }
299
+ }
300
+ }
301
+
302
+ &.#{$state}tool {
303
+ transition: padding-left 0.2s;
304
+ padding-right: cx-calc(15px, $icon-size);
305
+ }
306
+
307
+ &.#{$state}sortable:not(.#{$state}aligned-right) {
308
+ padding-right: cx-calc(5px, $icon-size);
309
+
310
+ .#{$element}#{$name}-column-sort-icon {
311
+ right: 2px;
312
+ }
313
+
314
+ &.#{$state}tool.#{$state}sorted-asc,
315
+ &.#{$state}tool.#{$state}sorted-desc {
316
+ padding-left: cx-calc(5px, $icon-size);
317
+
318
+ .#{$element}#{$name}-column-sort-icon {
319
+ left: 2px;
320
+ }
321
+ }
322
+ }
323
+
324
+ &.#{$state}sortable.#{$state}aligned-center {
325
+ padding-left: cx-calc(5px, $icon-size);
326
+ }
327
+
328
+ &.#{$state}sortable.#{$state}aligned-right {
329
+ padding-left: cx-calc(5px, $icon-size);
330
+
331
+ .#{$element}#{$name}-column-sort-icon {
332
+ left: 2px;
333
+ }
334
+ }
335
+ }
336
+
337
+ .#{$element}#{$name}-column-sort-icon {
338
+ width: $icon-size;
339
+ height: $icon-size;
340
+ top: 50%;
341
+ margin-top: cx-multiply($icon-size, -0.5);
342
+ position: absolute;
343
+ transition: transform 0.1s linear;
344
+
345
+ .#{$state}sorted-desc > & {
346
+ transform: rotate(180deg);
347
+ }
348
+ }
349
+
350
+ .#{$element}#{$name}-data {
351
+ -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
352
+ background-color: cx-get-state-rule($data-state-style-map, default, background-color);
353
+
354
+ &.#{$state}alternate {
355
+ @include cx-add-state-rules($data-state-style-map, alternate);
356
+ }
357
+
358
+ td {
359
+ padding: 0;
360
+ border-top: 1px solid cx-get-state-rule($data-state-style-map, default, border-color);
361
+ line-height: cx-get-state-rule($data-state-style-map, default, line-height);
362
+ font-weight: cx-get-state-rule($data-state-style-map, default, font-weight);
363
+ font-size: cx-get-state-rule($data-state-style-map, default, font-size);
364
+
365
+ &:empty::before {
366
+ content: "-";
367
+ visibility: hidden;
368
+ }
369
+ }
370
+
371
+ td.#{$state}pad {
372
+ padding: cx-get-state-rule($data-state-style-map, default, padding);
373
+ }
374
+
375
+ .#{$state}selectable & {
376
+ &:hover,
377
+ &.#{$state}hover {
378
+ @include cx-add-state-rules($data-state-style-map, hover);
379
+ }
380
+
381
+ &.#{$state}cursor {
382
+ @include cx-add-state-rules($data-state-style-map, hover);
383
+ }
384
+
385
+ &.#{$state}selected {
386
+ @include cx-add-state-rules($data-state-style-map, selected);
387
+
388
+ &.#{$state}cursor {
389
+ @include cx-add-state-rules($data-state-style-map, selected-cursor);
390
+ }
391
+ }
392
+ }
393
+
394
+ .#{$state}focused &,
395
+ :focus & {
396
+ &.#{$state}cursor {
397
+ @include cx-add-state-rules($data-state-style-map, cursor);
398
+ }
399
+
400
+ &.#{$state}selected {
401
+ &.#{$state}cursor {
402
+ @include cx-add-state-rules($data-state-style-map, selected-cursor);
403
+ }
404
+ }
405
+
406
+ &:active {
407
+ @include cx-add-state-rules($data-state-style-map, active);
408
+ }
409
+ }
410
+
411
+ .#{$state}drag-move &.#{$state}dragged {
412
+ display: none;
413
+ }
414
+
415
+ .#{$state}drag-copy &.#{$state}dragged {
416
+ opacity: 0.5;
417
+ }
418
+
419
+ &.#{$state}draggable {
420
+ touch-action: none;
421
+ }
422
+
423
+ &.#{$state}dummy {
424
+ td {
425
+ box-sizing: border-box;
426
+ }
427
+ }
428
+
429
+ &.#{$state}over {
430
+ background: orange !important;
431
+ }
432
+ }
433
+
434
+ .#{$element}#{$name}-dropzone {
435
+ position: relative;
436
+ padding: 0;
437
+
438
+ .#{$state}drop-preview & {
439
+ border-top: 1px solid $cx-default-grid-border-color;
440
+
441
+ &:after {
442
+ position: absolute;
443
+ left: 3px;
444
+ right: 3px;
445
+ top: 3px;
446
+ bottom: 3px;
447
+ border: 1px dotted gray;
448
+ content: " ";
449
+ }
450
+ }
451
+
452
+ .#{$state}drop-insertion & {
453
+ height: 0;
454
+
455
+ &:after {
456
+ position: absolute;
457
+ left: 0;
458
+ right: 0;
459
+ top: 0;
460
+ bottom: 0;
461
+ border-top: 1px solid black;
462
+ content: " ";
463
+ box-shadow: 0 0 2px black;
464
+ }
465
+ }
466
+ }
467
+
468
+ .#{$element}#{$name}-group-caption {
469
+ font-weight: bold;
470
+
471
+ td {
472
+ padding: cx-get-state-rule($data-state-style-map, default, padding);
473
+ }
474
+
475
+ &:not(:first-child) {
476
+ td {
477
+ padding-top: $cx-default-grid-caption-gap;
478
+ }
479
+ }
480
+ }
481
+
482
+ @for $i from 1 through 4 {
483
+ .#{$element}#{$name}-group-caption.#{$state}level-#{$i} td {
484
+ @include cx-add-state-rules($cx-grid-group-caption-level-style-map, level-#{$i});
485
+ }
486
+ }
487
+
488
+ .#{$element}#{$name}-group-footer {
489
+ td {
490
+ box-sizing: border-box;
491
+ &.#{$state}pad {
492
+ padding: cx-get-state-rule($data-state-style-map, default, padding);
493
+ }
494
+ }
495
+ }
496
+
497
+ @for $i from 1 through 4 {
498
+ .#{$element}#{$name}-group-footer.#{$state}level-#{$i} td {
499
+ @include cx-add-state-rules($cx-grid-group-footer-level-style-map, level-#{$i});
500
+ }
501
+ }
502
+
503
+ .#{$block}#{$name}.#{$state}cell-editable {
504
+ .#{$element}#{$name}-data td {
505
+ &:hover {
506
+ background: rgba(gray, 0.05);
507
+ }
508
+
509
+ &.#{$state}cellected {
510
+ position: relative;
511
+ user-select: none;
512
+ overflow: visible;
513
+
514
+ &:after {
515
+ position: absolute;
516
+ pointer-events: none;
517
+ content: " ";
518
+ @include cx-add-rules($cell-cursor-style);
519
+ }
520
+
521
+ &:last-child::after {
522
+ //prevent horizontal scroll for fixed columns
523
+ right: 0;
524
+ }
525
+ }
526
+
527
+ &.#{$element}#{$name}-cell-editor {
528
+ position: relative;
529
+ user-select: none;
530
+ overflow: visible;
531
+ }
532
+ }
533
+ }
534
+
535
+ .#{$element}#{$name}-cell-editor-wrap {
536
+ position: absolute;
537
+ top: -1px;
538
+ bottom: 0;
539
+ left: 0;
540
+ right: 0;
541
+ width: 100%;
542
+ height: calc(100% + 2px);
543
+
544
+ & > *:only-child {
545
+ width: 100%;
546
+ height: 100%;
547
+ top: 0;
548
+ left: 0;
549
+ }
550
+ }
551
+
552
+ .#{$block}#{$name}.#{$state}buffered,
553
+ .#{$block}#{$name}.#{$state}fixed-columns {
554
+ .#{$element}#{$name}-data {
555
+ white-space: nowrap;
556
+ }
557
+ }
558
+
559
+ .#{$block}#{$name}.#{$state}fixed-columns {
560
+ > .#{$element}#{$name}-scroll-area {
561
+ overflow-x: scroll;
562
+ }
563
+ }
564
+
565
+ .#{$element}#{$name}-scroll-area {
566
+ &.#{$state}fixed-footer
567
+ > .#{$element}#{$name}-table-wrapper
568
+ > table
569
+ > .#{$element}#{$name}-group-footer:last-child {
570
+ visibility: hidden;
571
+
572
+ td {
573
+ border: none;
574
+ }
575
+ }
576
+ }
577
+
578
+ .#{$element}#{$name}-fixed-scroll-area {
579
+ overflow-x: scroll;
580
+ overflow-y: hidden;
581
+ border-color: $cx-default-grid-border-color;
582
+ border-right-style: solid;
583
+ border-right-width: 1px;
584
+
585
+ & > .#{$element}#{$name}-fixed-table-wrapper {
586
+ padding-top: $cx-default-grid-scroll-wrapper-padding-top;
587
+ }
588
+
589
+ &.#{$state}fixed-footer
590
+ > .#{$element}#{$name}-fixed-table-wrapper
591
+ > table
592
+ > .#{$element}#{$name}-group-footer:last-child {
593
+ visibility: hidden;
594
+
595
+ td {
596
+ border: none;
597
+ }
598
+ }
599
+ }
600
+
601
+ .#{$element}#{$name}-col-header-tool {
602
+ position: absolute;
603
+ right: 0;
604
+ top: 0;
605
+ bottom: 0;
606
+ }
607
+
608
+ .#{$element}#{$name}-col-resizer {
609
+ position: absolute;
610
+ right: 0;
611
+ top: 0;
612
+ bottom: 0;
613
+ width: 5px;
614
+ cursor: col-resize;
615
+ }
616
+
617
+ .#{$element}#{$name}-col-resizer-prev-col {
618
+ position: absolute;
619
+ left: 0;
620
+ top: 0;
621
+ bottom: 0;
622
+ width: 5px;
623
+ cursor: col-resize;
624
+ }
625
+
626
+ .#{$element}#{$name}-resize-overlay {
627
+ position: absolute;
628
+ display: block;
629
+ pointer-events: none;
630
+ top: 0;
631
+ bottom: 0;
632
+ left: 0;
633
+ width: 0;
634
+ border-right: 3px solid $cx-default-grid-border-color;
635
+ background: color-mix(in srgb, $cx-default-grid-border-color 15%, transparent);
636
+ box-sizing: border-box;
637
+ }
638
+
639
+ .#{$element}#{$name}-col-header-drag-clone {
640
+ border: 1px solid $cx-default-grid-border-color;
641
+ padding: cx-get-state-rule($data-state-style-map, default, padding);
642
+ @include cx-add-state-rules($header-state-style-map, default);
643
+ box-sizing: border-box;
644
+ font-size: $cx-default-grid-font-size;
645
+ }
646
+
647
+ .#{$element}#{$name}-col-insertion-marker {
648
+ border: 1px solid black;
649
+ position: absolute;
650
+ top: 0;
651
+ height: calc(100% - 1px);
652
+ }
653
+ }
654
+
655
+ @if (cx-should-include("cx/widgets/Grid")) {
656
+ @include cx-grid();
657
+ }