stk-table-vue 0.8.5 → 0.8.7

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/lib/src/StkTable/useVirtualScroll.d.ts +1 -0
  2. package/lib/stk-table-vue.js +2806 -2797
  3. package/lib/style.css +414 -412
  4. package/package.json +1 -1
  5. package/src/StkTable/StkTable.vue +20 -12
  6. package/src/StkTable/style.less +2 -0
  7. package/src/StkTable/useVirtualScroll.ts +6 -10
package/lib/style.css CHANGED
@@ -1,412 +1,414 @@
1
- @keyframes stk-table-dim{
2
- from{
3
- background-color:var(--highlight-color);
4
- }
5
- }
6
- .stk-table{
7
- --row-height:28px;
8
- --header-row-height:var(--row-height);
9
- --cell-padding-y:0;
10
- --cell-padding-x:8px;
11
- --resize-handle-width:4px;
12
- --border-color:#e8e8f4;
13
- --border-width:1px;
14
- --td-bgc:#fff;
15
- --td-hover-color:#71a2fd;
16
- --td-active-color:#386ccc;
17
- --th-bgc:#f1f1f9;
18
- --th-color:#272841;
19
- --tr-active-bgc:#e6f7ff;
20
- --tr-hover-bgc:rgba(230, 247, 255, 0.7);
21
- --bg-border-top:linear-gradient(180deg, var(--border-color) var(--border-width), transparent var(--border-width));
22
- --bg-border-right:linear-gradient(270deg, var(--border-color) var(--border-width), transparent var(--border-width));
23
- --bg-border-bottom:linear-gradient(0deg, var(--border-color) var(--border-width), transparent var(--border-width));
24
- --bg-border-left:linear-gradient(90deg, var(--border-color) var(--border-width), transparent var(--border-width));
25
- --highlight-color:#71a2fd;
26
- --highlight-duration:2s;
27
- --highlight-timing-function:linear;
28
- --stripe-bgc:#fafafc;
29
- --sort-arrow-color:#757699;
30
- --sort-arrow-hover-color:#8f90b5;
31
- --sort-arrow-active-color:#1b63d9;
32
- --sort-arrow-active-sub-color:#cbcbe1;
33
- --fold-icon-color:#757699;
34
- --fold-icon-hover-color:#8f90b5;
35
- --col-resize-indicator-color:#87879c;
36
- --fixed-col-shadow-color-from:rgba(0, 0, 0, 0.1);
37
- --fixed-col-shadow-color-to:rgba(0, 0, 0, 0);
38
- --drag-handle-hover-color:#d0d1e0;
39
- position:relative;
40
- overflow:auto;
41
- display:flex;
42
- flex-direction:column;
43
- box-sizing:border-box;
44
- }
45
- .stk-table.dark{
46
- --th-bgc:#202029;
47
- --th-color:#c0c0d1;
48
- --td-bgc:#1b1b24;
49
- --td-hover-color:#70a6ff;
50
- --td-active-color:#386ccc;
51
- --border-color:#292933;
52
- --tr-active-bgc:#283f63;
53
- --tr-hover-bgc:#1a2b46;
54
- --table-bgc:#1b1b24;
55
- --highlight-color:#1e4c99;
56
- --stripe-bgc:#202029;
57
- --sort-arrow-color:#5d6064;
58
- --sort-arrow-hover-color:#727782;
59
- --sort-arrow-active-color:#d0d1d2;
60
- --sort-arrow-active-sub-color:#5d6064;
61
- --fold-icon-color:#5d6064;
62
- --fold-icon-hover-color:#727782;
63
- --col-resize-indicator-color:#5d6064;
64
- --fixed-col-shadow-color-from:rgba(135, 135, 156, 0.1);
65
- --fixed-col-shadow-color-to:rgba(135, 135, 156, 0);
66
- --drag-handle-hover-color:#5d6064;
67
- color:#d1d1e0;
68
- }
69
- .stk-table.headless.bordered{
70
- border-top:1px solid var(--border-color);
71
- background-image:var(--bg-border-right), var(--bg-border-bottom);
72
- }
73
- .stk-table.col-resizable .stk-table-main{
74
- width:-moz-fit-content;
75
- width:fit-content;
76
- min-width:-moz-min-content;
77
- min-width:min-content;
78
- }
79
- .stk-table.is-col-resizing th{
80
- pointer-events:none;
81
- }
82
- .stk-table.bordered{
83
- border-left:1px solid var(--border-color);
84
- background-image:var(--bg-border-top), var(--bg-border-right), var(--bg-border-bottom);
85
- }
86
- .stk-table.bordered th,
87
- .stk-table.bordered td{
88
- background-image:var(--bg-border-right), var(--bg-border-bottom);
89
- }
90
- .stk-table.bordered thead tr:first-child th{
91
- background-image:var(--bg-border-top), var(--bg-border-right), var(--bg-border-bottom);
92
- }
93
- .stk-table.bordered-h{
94
- border-left:none;
95
- --bg-border-right:linear-gradient(transparent, transparent);
96
- --bg-border-left:linear-gradient(transparent, transparent);
97
- }
98
- .stk-table.bordered-v{
99
- --bg-border-bottom:linear-gradient(transparent, transparent);
100
- --bg-border-top:linear-gradient(transparent, transparent);
101
- }
102
- .stk-table.bordered-body-v tbody{
103
- --bg-border-bottom:linear-gradient(transparent, transparent);
104
- }
105
- .stk-table.stripe:not(.vt-on) .stk-tbody-main tr:nth-child(even){
106
- background-color:var(--stripe-bgc);
107
- }
108
- .stk-table.stripe.vt-on .stk-tbody-main tr:nth-child(odd){
109
- background-color:var(--stripe-bgc);
110
- }
111
- .stk-table.stripe.row-hover .stk-tbody-main tr:hover{
112
- background-color:var(--tr-hover-bgc);
113
- }
114
- .stk-table.stripe.row-active .stk-tbody-main tr.active{
115
- background-color:var(--tr-active-bgc);
116
- }
117
- .stk-table.row-hover .stk-tbody-main tr:hover{
118
- background-color:var(--tr-hover-bgc);
119
- }
120
- .stk-table.row-active .stk-tbody-main tr.active{
121
- background-color:var(--tr-active-bgc);
122
- }
123
- .stk-table.cell-hover tbody td:hover{
124
- box-shadow:inset 0 0 0 2px var(--td-hover-color);
125
- }
126
- .stk-table.cell-active tbody td.active{
127
- box-shadow:inset 0 0 0 2px var(--td-active-color);
128
- }
129
- .stk-table.text-overflow .table-cell-wrapper{
130
- white-space:nowrap;
131
- overflow:hidden;
132
- text-overflow:ellipsis;
133
- }
134
- .stk-table.header-text-overflow .table-header-cell-wrapper{
135
- white-space:nowrap;
136
- overflow:hidden;
137
- }
138
- .stk-table.header-text-overflow .table-header-title{
139
- text-overflow:ellipsis;
140
- overflow:hidden;
141
- }
142
- .stk-table.virtual{
143
- }
144
- .stk-table.virtual .table-header-cell-wrapper{
145
- overflow:hidden;
146
- max-height:calc(var(--header-row-height) * 1);
147
- max-height:calc(var(--header-row-height) * var(--row-span, 1));
148
- }
149
- .stk-table.virtual .table-header-cell-wrapper .table-header-title{
150
- max-height:inherit;
151
- }
152
- .stk-table.virtual tbody td{
153
- height:var(--row-height);
154
- }
155
- .stk-table.virtual tbody td .table-cell-wrapper{
156
- max-height:var(--row-height);
157
- overflow:hidden;
158
- }
159
- .stk-table.virtual .padding-top-tr td{
160
- height:0;
161
- }
162
- .stk-table.virtual .expand-cell .table-cell-wrapper{
163
- white-space:nowrap;
164
- }
165
- .stk-table.auto-row-height tbody td{
166
- height:auto;
167
- height:initial;
168
- }
169
- .stk-table.auto-row-height tbody td .table-cell-wrapper{
170
- max-height:none;
171
- max-height:initial;
172
- overflow:visible;
173
- overflow:initial;
174
- }
175
- .stk-table.fixed-relative-mode th{
176
- position:relative;
177
- }
178
- .stk-table.fixed-relative-mode .fixed-cell--active{
179
- position:relative;
180
- }
181
- .stk-table.scroll-row-by-row .stk-table-main{
182
- position:sticky;
183
- top:0;
184
- }
185
- .stk-table .row-by-row-table-height{
186
- width:1px;
187
- position:absolute;
188
- left:0;
189
- }
190
- .stk-table th,
191
- .stk-table td{
192
- font-size:14px;
193
- box-sizing:border-box;
194
- padding:var(--cell-padding-y) var(--cell-padding-x);
195
- }
196
- .stk-table th{
197
- color:var(--th-color);
198
- background-color:inherit;
199
- z-index:2;
200
- position:sticky;
201
- }
202
- .stk-table th.sortable{
203
- cursor:pointer;
204
- }
205
- .stk-table th:not(.sorter-desc):not(.sorter-asc):hover .table-header-sorter .arrow-up{
206
- fill:var(--sort-arrow-hover-color);
207
- }
208
- .stk-table th:not(.sorter-desc):not(.sorter-asc):hover .table-header-sorter .arrow-down{
209
- fill:var(--sort-arrow-hover-color);
210
- }
211
- .stk-table th.sorter-desc .table-header-sorter{
212
- display:inline;
213
- }
214
- .stk-table th.sorter-desc .table-header-sorter .arrow-up{
215
- fill:var(--sort-arrow-active-sub-color);
216
- }
217
- .stk-table th.sorter-desc .table-header-sorter .arrow-down{
218
- fill:var(--sort-arrow-active-color);
219
- }
220
- .stk-table th.sorter-asc .table-header-sorter{
221
- display:inline;
222
- }
223
- .stk-table th.sorter-asc .table-header-sorter .arrow-up{
224
- fill:var(--sort-arrow-active-color);
225
- }
226
- .stk-table th.sorter-asc .table-header-sorter .arrow-down{
227
- fill:var(--sort-arrow-active-sub-color);
228
- }
229
- .stk-table thead tr{
230
- background-color:var(--th-bgc);
231
- height:var(--header-row-height);
232
- }
233
- .stk-table tbody tr{
234
- background-color:var(--td-bgc);
235
- height:var(--row-height);
236
- }
237
- .stk-table .vt-x-left,
238
- .stk-table .vt-x-right{
239
- padding:0;
240
- background:none;
241
- pointer-events:none;
242
- }
243
- .stk-table .column-resize-indicator{
244
- width:0;
245
- height:100%;
246
- border-left:2px solid var(--col-resize-indicator-color);
247
- position:absolute;
248
- z-index:10;
249
- display:none;
250
- pointer-events:none;
251
- }
252
- .stk-table .stk-table-main{
253
- border-spacing:0;
254
- border-collapse:separate;
255
- width:-moz-fit-content;
256
- width:fit-content;
257
- min-width:100%;
258
- }
259
- .stk-table .stk-table-main.fixed-mode{
260
- table-layout:fixed;
261
- min-width:-moz-min-content;
262
- min-width:min-content;
263
- }
264
- .stk-table .fixed-cell{
265
- background-color:inherit;
266
- }
267
- .stk-table .highlight-cell{
268
- animation-name:stk-table-dim;
269
- animation-duration:var(--highlight-duration);
270
- animation-timing-function:var(--highlight-timing-function);
271
- }
272
- .stk-table .seq-column{
273
- text-align:center;
274
- }
275
- .stk-table .drag-row-cell .table-cell-wrapper{
276
- display:inline-flex;
277
- align-items:center;
278
- }
279
- .stk-table .drag-row-cell .drag-row-handle{
280
- cursor:grab;
281
- border-radius:4px;
282
- }
283
- .stk-table .drag-row-cell .drag-row-handle:hover{
284
- background-color:var(--drag-handle-hover-color);
285
- }
286
- .stk-table .drag-row-cell .drag-row-handle:active{
287
- cursor:grabbing;
288
- }
289
- .stk-table .drag-row-cell .drag-row-handle > svg{
290
- vertical-align:-2px;
291
- }
292
- .stk-table .tr-dragging{
293
- opacity:0.5;
294
- }
295
- .stk-table .tr-dragging-over{
296
- background-color:var(--tr-hover-bgc);
297
- }
298
- .stk-table .fixed-cell--left{
299
- --shadow-rotate:90deg;
300
- }
301
- .stk-table .fixed-cell--left.fixed-cell--shadow::after{
302
- right:-10px;
303
- }
304
- .stk-table .fixed-cell--right{
305
- --shadow-rotate:-90deg;
306
- }
307
- .stk-table .fixed-cell--right.fixed-cell--shadow::after{
308
- left:-10px;
309
- }
310
- .stk-table .fixed-cell--shadow::after{
311
- content:'';
312
- width:10px;
313
- height:100%;
314
- top:0px;
315
- position:absolute;
316
- pointer-events:none;
317
- background-image:linear-gradient(var(--shadow-rotate), var(--fixed-col-shadow-color-from), var(--fixed-col-shadow-color-to));
318
- }
319
- .stk-table .fixed-cell--active{
320
- position:sticky;
321
- }
322
- .stk-table th.fixed-cell--active{
323
- z-index:3;
324
- }
325
- .stk-table td.fixed-cell--active{
326
- z-index:1;
327
- }
328
- .stk-table .table-header-cell-wrapper{
329
- max-width:100%;
330
- display:inline-flex;
331
- align-items:center;
332
- }
333
- .stk-table .table-header-title{
334
- overflow:hidden;
335
- }
336
- .stk-table .table-header-sorter{
337
- flex-shrink:0;
338
- margin-left:4px;
339
- width:16px;
340
- height:16px;
341
- display:none;
342
- }
343
- .stk-table .table-header-sorter .arrow-up,
344
- .stk-table .table-header-sorter .arrow-down{
345
- fill:var(--sort-arrow-color);
346
- }
347
- .stk-table .table-header-resizer{
348
- position:absolute;
349
- top:0;
350
- bottom:0;
351
- cursor:col-resize;
352
- width:var(--resize-handle-width);
353
- }
354
- .stk-table .table-header-resizer.left{
355
- left:0;
356
- }
357
- .stk-table .table-header-resizer.right{
358
- right:0;
359
- }
360
- .stk-table .highlight-row{
361
- animation-name:stk-table-dim;
362
- animation-duration:var(--highlight-duration);
363
- animation-timing-function:var(--highlight-timing-function);
364
- }
365
- .stk-table .stk-table-no-data{
366
- background-color:var(--table-bgc);
367
- line-height:var(--row-height);
368
- text-align:center;
369
- font-size:14px;
370
- position:sticky;
371
- left:0px;
372
- border-right:var(--border-width) solid var(--border-color);
373
- border-bottom:var(--border-width) solid var(--border-color);
374
- display:flex;
375
- flex-direction:column;
376
- align-items:center;
377
- justify-content:center;
378
- }
379
- .stk-table .stk-table-no-data.no-data-full{
380
- flex:1;
381
- }
382
- .stk-table .expanded > .table-cell-wrapper .stk-fold-icon::before,
383
- .stk-table .tree-expanded > .table-cell-wrapper .stk-fold-icon::before{
384
- transform:rotate(90deg);
385
- }
386
- .stk-table .stk-fold-icon{
387
- display:inline-flex;
388
- width:16px;
389
- height:16px;
390
- cursor:pointer;
391
- align-items:center;
392
- }
393
- .stk-table .stk-fold-icon::before{
394
- content:'';
395
- display:block;
396
- margin:0 2px;
397
- width:0;
398
- height:0;
399
- border-left:5px solid var(--fold-icon-color);
400
- border-top:4px solid transparent;
401
- border-bottom:4px solid transparent;
402
- transition:transform 0.2s ease;
403
- }
404
- .stk-table .stk-fold-icon:hover::before{
405
- border-left:5px solid var(--fold-icon-hover-color);
406
- }
407
- .stk-table td.cell-hover{
408
- background-color:var(--tr-hover-bgc);
409
- }
410
- .stk-table td.cell-active{
411
- background-color:var(--tr-active-bgc);
412
- }
1
+ @keyframes stk-table-dim{
2
+ from{
3
+ background-color:var(--highlight-color);
4
+ }
5
+ }
6
+ .stk-table{
7
+ --row-height:28px;
8
+ --header-row-height:var(--row-height);
9
+ --cell-padding-y:0;
10
+ --cell-padding-x:8px;
11
+ --resize-handle-width:4px;
12
+ --border-color:#e8e8f4;
13
+ --border-width:1px;
14
+ --td-bgc:#fff;
15
+ --td-hover-color:#71a2fd;
16
+ --td-active-color:#386ccc;
17
+ --th-bgc:#f1f1f9;
18
+ --th-color:#272841;
19
+ --tr-active-bgc:#e6f7ff;
20
+ --tr-hover-bgc:rgba(230, 247, 255, 0.7);
21
+ --bg-border-top:linear-gradient(180deg, var(--border-color) var(--border-width), transparent var(--border-width));
22
+ --bg-border-right:linear-gradient(270deg, var(--border-color) var(--border-width), transparent var(--border-width));
23
+ --bg-border-bottom:linear-gradient(0deg, var(--border-color) var(--border-width), transparent var(--border-width));
24
+ --bg-border-left:linear-gradient(90deg, var(--border-color) var(--border-width), transparent var(--border-width));
25
+ --highlight-color:#71a2fd;
26
+ --highlight-duration:2s;
27
+ --highlight-timing-function:linear;
28
+ --stripe-bgc:#fafafc;
29
+ --sort-arrow-color:#757699;
30
+ --sort-arrow-hover-color:#8f90b5;
31
+ --sort-arrow-active-color:#1b63d9;
32
+ --sort-arrow-active-sub-color:#cbcbe1;
33
+ --fold-icon-color:#757699;
34
+ --fold-icon-hover-color:#8f90b5;
35
+ --col-resize-indicator-color:#87879c;
36
+ --fixed-col-shadow-color-from:rgba(0, 0, 0, 0.1);
37
+ --fixed-col-shadow-color-to:rgba(0, 0, 0, 0);
38
+ --drag-handle-hover-color:#d0d1e0;
39
+ position:relative;
40
+ overflow:auto;
41
+ display:flex;
42
+ flex-direction:column;
43
+ box-sizing:border-box;
44
+ }
45
+ .stk-table.dark{
46
+ --th-bgc:#202029;
47
+ --th-color:#c0c0d1;
48
+ --td-bgc:#1b1b24;
49
+ --td-hover-color:#70a6ff;
50
+ --td-active-color:#386ccc;
51
+ --border-color:#292933;
52
+ --tr-active-bgc:#283f63;
53
+ --tr-hover-bgc:#1a2b46;
54
+ --table-bgc:#1b1b24;
55
+ --highlight-color:#1e4c99;
56
+ --stripe-bgc:#202029;
57
+ --sort-arrow-color:#5d6064;
58
+ --sort-arrow-hover-color:#727782;
59
+ --sort-arrow-active-color:#d0d1d2;
60
+ --sort-arrow-active-sub-color:#5d6064;
61
+ --fold-icon-color:#5d6064;
62
+ --fold-icon-hover-color:#727782;
63
+ --col-resize-indicator-color:#5d6064;
64
+ --fixed-col-shadow-color-from:rgba(135, 135, 156, 0.1);
65
+ --fixed-col-shadow-color-to:rgba(135, 135, 156, 0);
66
+ --drag-handle-hover-color:#5d6064;
67
+ color:#d1d1e0;
68
+ }
69
+ .stk-table.headless.bordered{
70
+ border-top:1px solid var(--border-color);
71
+ background-image:var(--bg-border-right), var(--bg-border-bottom);
72
+ }
73
+ .stk-table.col-resizable .stk-table-main{
74
+ width:-moz-fit-content;
75
+ width:fit-content;
76
+ min-width:-moz-min-content;
77
+ min-width:min-content;
78
+ }
79
+ .stk-table.is-col-resizing th{
80
+ pointer-events:none;
81
+ }
82
+ .stk-table.bordered{
83
+ border-left:1px solid var(--border-color);
84
+ background-image:var(--bg-border-top), var(--bg-border-right), var(--bg-border-bottom);
85
+ }
86
+ .stk-table.bordered th,
87
+ .stk-table.bordered td{
88
+ background-image:var(--bg-border-right), var(--bg-border-bottom);
89
+ }
90
+ .stk-table.bordered thead tr:first-child th{
91
+ background-image:var(--bg-border-top), var(--bg-border-right), var(--bg-border-bottom);
92
+ }
93
+ .stk-table.bordered-h{
94
+ border-left:none;
95
+ --bg-border-right:linear-gradient(transparent, transparent);
96
+ --bg-border-left:linear-gradient(transparent, transparent);
97
+ }
98
+ .stk-table.bordered-v{
99
+ --bg-border-bottom:linear-gradient(transparent, transparent);
100
+ --bg-border-top:linear-gradient(transparent, transparent);
101
+ }
102
+ .stk-table.bordered-body-v tbody{
103
+ --bg-border-bottom:linear-gradient(transparent, transparent);
104
+ }
105
+ .stk-table.stripe:not(.vt-on) .stk-tbody-main tr:nth-child(even){
106
+ background-color:var(--stripe-bgc);
107
+ }
108
+ .stk-table.stripe.vt-on .stk-tbody-main tr:nth-child(odd){
109
+ background-color:var(--stripe-bgc);
110
+ }
111
+ .stk-table.stripe.row-hover .stk-tbody-main tr:hover{
112
+ background-color:var(--tr-hover-bgc);
113
+ }
114
+ .stk-table.stripe.row-active .stk-tbody-main tr.active{
115
+ background-color:var(--tr-active-bgc);
116
+ }
117
+ .stk-table.row-hover .stk-tbody-main tr:hover{
118
+ background-color:var(--tr-hover-bgc);
119
+ }
120
+ .stk-table.row-active .stk-tbody-main tr.active{
121
+ background-color:var(--tr-active-bgc);
122
+ }
123
+ .stk-table.cell-hover tbody td:hover{
124
+ box-shadow:inset 0 0 0 2px var(--td-hover-color);
125
+ }
126
+ .stk-table.cell-active tbody td.active{
127
+ box-shadow:inset 0 0 0 2px var(--td-active-color);
128
+ }
129
+ .stk-table.text-overflow .table-cell-wrapper{
130
+ white-space:nowrap;
131
+ overflow:hidden;
132
+ text-overflow:ellipsis;
133
+ }
134
+ .stk-table.header-text-overflow .table-header-cell-wrapper{
135
+ white-space:nowrap;
136
+ overflow:hidden;
137
+ }
138
+ .stk-table.header-text-overflow .table-header-title{
139
+ text-overflow:ellipsis;
140
+ overflow:hidden;
141
+ }
142
+ .stk-table.virtual{
143
+ }
144
+ .stk-table.virtual .table-header-cell-wrapper{
145
+ overflow:hidden;
146
+ max-height:calc(var(--header-row-height) * 1);
147
+ max-height:calc(var(--header-row-height) * var(--row-span, 1));
148
+ }
149
+ .stk-table.virtual .table-header-cell-wrapper .table-header-title{
150
+ max-height:inherit;
151
+ }
152
+ .stk-table.virtual tbody td{
153
+ height:var(--row-height);
154
+ }
155
+ .stk-table.virtual tbody td .table-cell-wrapper{
156
+ max-height:var(--row-height);
157
+ overflow:hidden;
158
+ }
159
+ .stk-table.virtual .padding-top-tr td{
160
+ height:0;
161
+ }
162
+ .stk-table.virtual .expand-cell .table-cell-wrapper{
163
+ white-space:nowrap;
164
+ }
165
+ .stk-table.auto-row-height tbody td{
166
+ height:auto;
167
+ height:initial;
168
+ }
169
+ .stk-table.auto-row-height tbody td .table-cell-wrapper{
170
+ max-height:none;
171
+ max-height:initial;
172
+ overflow:visible;
173
+ overflow:initial;
174
+ }
175
+ .stk-table.fixed-relative-mode th{
176
+ position:relative;
177
+ }
178
+ .stk-table.fixed-relative-mode .fixed-cell--active{
179
+ position:relative;
180
+ }
181
+ .stk-table.scroll-row-by-row .stk-table-main{
182
+ position:sticky;
183
+ top:0;
184
+ }
185
+ .stk-table .row-by-row-table-height{
186
+ width:1px;
187
+ flex-shrink:0;
188
+ position:absolute;
189
+ left:0;
190
+ top:0;
191
+ }
192
+ .stk-table th,
193
+ .stk-table td{
194
+ font-size:14px;
195
+ box-sizing:border-box;
196
+ padding:var(--cell-padding-y) var(--cell-padding-x);
197
+ }
198
+ .stk-table th{
199
+ color:var(--th-color);
200
+ background-color:inherit;
201
+ z-index:2;
202
+ position:sticky;
203
+ }
204
+ .stk-table th.sortable{
205
+ cursor:pointer;
206
+ }
207
+ .stk-table th:not(.sorter-desc):not(.sorter-asc):hover .table-header-sorter .arrow-up{
208
+ fill:var(--sort-arrow-hover-color);
209
+ }
210
+ .stk-table th:not(.sorter-desc):not(.sorter-asc):hover .table-header-sorter .arrow-down{
211
+ fill:var(--sort-arrow-hover-color);
212
+ }
213
+ .stk-table th.sorter-desc .table-header-sorter{
214
+ display:inline;
215
+ }
216
+ .stk-table th.sorter-desc .table-header-sorter .arrow-up{
217
+ fill:var(--sort-arrow-active-sub-color);
218
+ }
219
+ .stk-table th.sorter-desc .table-header-sorter .arrow-down{
220
+ fill:var(--sort-arrow-active-color);
221
+ }
222
+ .stk-table th.sorter-asc .table-header-sorter{
223
+ display:inline;
224
+ }
225
+ .stk-table th.sorter-asc .table-header-sorter .arrow-up{
226
+ fill:var(--sort-arrow-active-color);
227
+ }
228
+ .stk-table th.sorter-asc .table-header-sorter .arrow-down{
229
+ fill:var(--sort-arrow-active-sub-color);
230
+ }
231
+ .stk-table thead tr{
232
+ background-color:var(--th-bgc);
233
+ height:var(--header-row-height);
234
+ }
235
+ .stk-table tbody tr{
236
+ background-color:var(--td-bgc);
237
+ height:var(--row-height);
238
+ }
239
+ .stk-table .vt-x-left,
240
+ .stk-table .vt-x-right{
241
+ padding:0;
242
+ background:none;
243
+ pointer-events:none;
244
+ }
245
+ .stk-table .column-resize-indicator{
246
+ width:0;
247
+ height:100%;
248
+ border-left:2px solid var(--col-resize-indicator-color);
249
+ position:absolute;
250
+ z-index:10;
251
+ display:none;
252
+ pointer-events:none;
253
+ }
254
+ .stk-table .stk-table-main{
255
+ border-spacing:0;
256
+ border-collapse:separate;
257
+ width:-moz-fit-content;
258
+ width:fit-content;
259
+ min-width:100%;
260
+ }
261
+ .stk-table .stk-table-main.fixed-mode{
262
+ table-layout:fixed;
263
+ min-width:-moz-min-content;
264
+ min-width:min-content;
265
+ }
266
+ .stk-table .fixed-cell{
267
+ background-color:inherit;
268
+ }
269
+ .stk-table .highlight-cell{
270
+ animation-name:stk-table-dim;
271
+ animation-duration:var(--highlight-duration);
272
+ animation-timing-function:var(--highlight-timing-function);
273
+ }
274
+ .stk-table .seq-column{
275
+ text-align:center;
276
+ }
277
+ .stk-table .drag-row-cell .table-cell-wrapper{
278
+ display:inline-flex;
279
+ align-items:center;
280
+ }
281
+ .stk-table .drag-row-cell .drag-row-handle{
282
+ cursor:grab;
283
+ border-radius:4px;
284
+ }
285
+ .stk-table .drag-row-cell .drag-row-handle:hover{
286
+ background-color:var(--drag-handle-hover-color);
287
+ }
288
+ .stk-table .drag-row-cell .drag-row-handle:active{
289
+ cursor:grabbing;
290
+ }
291
+ .stk-table .drag-row-cell .drag-row-handle > svg{
292
+ vertical-align:-2px;
293
+ }
294
+ .stk-table .tr-dragging{
295
+ opacity:0.5;
296
+ }
297
+ .stk-table .tr-dragging-over{
298
+ background-color:var(--tr-hover-bgc);
299
+ }
300
+ .stk-table .fixed-cell--left{
301
+ --shadow-rotate:90deg;
302
+ }
303
+ .stk-table .fixed-cell--left.fixed-cell--shadow::after{
304
+ right:-10px;
305
+ }
306
+ .stk-table .fixed-cell--right{
307
+ --shadow-rotate:-90deg;
308
+ }
309
+ .stk-table .fixed-cell--right.fixed-cell--shadow::after{
310
+ left:-10px;
311
+ }
312
+ .stk-table .fixed-cell--shadow::after{
313
+ content:'';
314
+ width:10px;
315
+ height:100%;
316
+ top:0px;
317
+ position:absolute;
318
+ pointer-events:none;
319
+ background-image:linear-gradient(var(--shadow-rotate), var(--fixed-col-shadow-color-from), var(--fixed-col-shadow-color-to));
320
+ }
321
+ .stk-table .fixed-cell--active{
322
+ position:sticky;
323
+ }
324
+ .stk-table th.fixed-cell--active{
325
+ z-index:3;
326
+ }
327
+ .stk-table td.fixed-cell--active{
328
+ z-index:1;
329
+ }
330
+ .stk-table .table-header-cell-wrapper{
331
+ max-width:100%;
332
+ display:inline-flex;
333
+ align-items:center;
334
+ }
335
+ .stk-table .table-header-title{
336
+ overflow:hidden;
337
+ }
338
+ .stk-table .table-header-sorter{
339
+ flex-shrink:0;
340
+ margin-left:4px;
341
+ width:16px;
342
+ height:16px;
343
+ display:none;
344
+ }
345
+ .stk-table .table-header-sorter .arrow-up,
346
+ .stk-table .table-header-sorter .arrow-down{
347
+ fill:var(--sort-arrow-color);
348
+ }
349
+ .stk-table .table-header-resizer{
350
+ position:absolute;
351
+ top:0;
352
+ bottom:0;
353
+ cursor:col-resize;
354
+ width:var(--resize-handle-width);
355
+ }
356
+ .stk-table .table-header-resizer.left{
357
+ left:0;
358
+ }
359
+ .stk-table .table-header-resizer.right{
360
+ right:0;
361
+ }
362
+ .stk-table .highlight-row{
363
+ animation-name:stk-table-dim;
364
+ animation-duration:var(--highlight-duration);
365
+ animation-timing-function:var(--highlight-timing-function);
366
+ }
367
+ .stk-table .stk-table-no-data{
368
+ background-color:var(--table-bgc);
369
+ line-height:var(--row-height);
370
+ text-align:center;
371
+ font-size:14px;
372
+ position:sticky;
373
+ left:0px;
374
+ border-right:var(--border-width) solid var(--border-color);
375
+ border-bottom:var(--border-width) solid var(--border-color);
376
+ display:flex;
377
+ flex-direction:column;
378
+ align-items:center;
379
+ justify-content:center;
380
+ }
381
+ .stk-table .stk-table-no-data.no-data-full{
382
+ flex:1;
383
+ }
384
+ .stk-table .expanded > .table-cell-wrapper .stk-fold-icon::before,
385
+ .stk-table .tree-expanded > .table-cell-wrapper .stk-fold-icon::before{
386
+ transform:rotate(90deg);
387
+ }
388
+ .stk-table .stk-fold-icon{
389
+ display:inline-flex;
390
+ width:16px;
391
+ height:16px;
392
+ cursor:pointer;
393
+ align-items:center;
394
+ }
395
+ .stk-table .stk-fold-icon::before{
396
+ content:'';
397
+ display:block;
398
+ margin:0 2px;
399
+ width:0;
400
+ height:0;
401
+ border-left:5px solid var(--fold-icon-color);
402
+ border-top:4px solid transparent;
403
+ border-bottom:4px solid transparent;
404
+ transition:transform 0.2s ease;
405
+ }
406
+ .stk-table .stk-fold-icon:hover::before{
407
+ border-left:5px solid var(--fold-icon-hover-color);
408
+ }
409
+ .stk-table td.cell-hover{
410
+ background-color:var(--tr-hover-bgc);
411
+ }
412
+ .stk-table td.cell-active{
413
+ background-color:var(--tr-active-bgc);
414
+ }