stk-table-vue 0.8.4 → 0.8.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/lib/stk-table-vue.js +2797 -2800
  2. package/lib/style.css +412 -410
  3. package/package.json +3 -3
  4. package/src/StkTable/StkTable.vue +5 -13
  5. package/src/StkTable/style.less +4 -2
package/lib/style.css CHANGED
@@ -1,410 +1,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
- 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:stk-table-dim var(--highlight-duration);
269
- animation-timing-function:var(--highlight-timing-function);
270
- }
271
- .stk-table .seq-column{
272
- text-align:center;
273
- }
274
- .stk-table .drag-row-cell .table-cell-wrapper{
275
- display:inline-flex;
276
- align-items:center;
277
- }
278
- .stk-table .drag-row-cell .drag-row-handle{
279
- cursor:grab;
280
- border-radius:4px;
281
- }
282
- .stk-table .drag-row-cell .drag-row-handle:hover{
283
- background-color:var(--drag-handle-hover-color);
284
- }
285
- .stk-table .drag-row-cell .drag-row-handle:active{
286
- cursor:grabbing;
287
- }
288
- .stk-table .drag-row-cell .drag-row-handle > svg{
289
- vertical-align:-2px;
290
- }
291
- .stk-table .tr-dragging{
292
- opacity:0.5;
293
- }
294
- .stk-table .tr-dragging-over{
295
- background-color:var(--tr-hover-bgc);
296
- }
297
- .stk-table .fixed-cell--left{
298
- --shadow-rotate:90deg;
299
- }
300
- .stk-table .fixed-cell--left.fixed-cell--shadow::after{
301
- right:-10px;
302
- }
303
- .stk-table .fixed-cell--right{
304
- --shadow-rotate:-90deg;
305
- }
306
- .stk-table .fixed-cell--right.fixed-cell--shadow::after{
307
- left:-10px;
308
- }
309
- .stk-table .fixed-cell--shadow::after{
310
- content:'';
311
- width:10px;
312
- height:100%;
313
- top:0px;
314
- position:absolute;
315
- pointer-events:none;
316
- background-image:linear-gradient(var(--shadow-rotate), var(--fixed-col-shadow-color-from), var(--fixed-col-shadow-color-to));
317
- }
318
- .stk-table .fixed-cell--active{
319
- position:sticky;
320
- }
321
- .stk-table th.fixed-cell--active{
322
- z-index:3;
323
- }
324
- .stk-table td.fixed-cell--active{
325
- z-index:1;
326
- }
327
- .stk-table .table-header-cell-wrapper{
328
- max-width:100%;
329
- display:inline-flex;
330
- align-items:center;
331
- }
332
- .stk-table .table-header-title{
333
- overflow:hidden;
334
- }
335
- .stk-table .table-header-sorter{
336
- flex-shrink:0;
337
- margin-left:4px;
338
- width:16px;
339
- height:16px;
340
- display:none;
341
- }
342
- .stk-table .table-header-sorter .arrow-up,
343
- .stk-table .table-header-sorter .arrow-down{
344
- fill:var(--sort-arrow-color);
345
- }
346
- .stk-table .table-header-resizer{
347
- position:absolute;
348
- top:0;
349
- bottom:0;
350
- cursor:col-resize;
351
- width:var(--resize-handle-width);
352
- }
353
- .stk-table .table-header-resizer.left{
354
- left:0;
355
- }
356
- .stk-table .table-header-resizer.right{
357
- right:0;
358
- }
359
- .stk-table .highlight-row{
360
- animation:stk-table-dim var(--highlight-duration);
361
- animation-timing-function:var(--highlight-timing-function);
362
- }
363
- .stk-table .stk-table-no-data{
364
- background-color:var(--table-bgc);
365
- line-height:var(--row-height);
366
- text-align:center;
367
- font-size:14px;
368
- position:sticky;
369
- left:0px;
370
- border-right:var(--border-width) solid var(--border-color);
371
- border-bottom:var(--border-width) solid var(--border-color);
372
- display:flex;
373
- flex-direction:column;
374
- align-items:center;
375
- justify-content:center;
376
- }
377
- .stk-table .stk-table-no-data.no-data-full{
378
- flex:1;
379
- }
380
- .stk-table .expanded > .table-cell-wrapper .stk-fold-icon::before,
381
- .stk-table .tree-expanded > .table-cell-wrapper .stk-fold-icon::before{
382
- transform:rotate(90deg);
383
- }
384
- .stk-table .stk-fold-icon{
385
- display:inline-flex;
386
- width:16px;
387
- height:16px;
388
- cursor:pointer;
389
- align-items:center;
390
- }
391
- .stk-table .stk-fold-icon::before{
392
- content:'';
393
- display:block;
394
- margin:0 2px;
395
- width:0;
396
- height:0;
397
- border-left:5px solid var(--fold-icon-color);
398
- border-top:4px solid transparent;
399
- border-bottom:4px solid transparent;
400
- transition:transform 0.2s ease;
401
- }
402
- .stk-table .stk-fold-icon:hover::before{
403
- border-left:5px solid var(--fold-icon-hover-color);
404
- }
405
- .stk-table td.cell-hover{
406
- background-color:var(--tr-hover-bgc);
407
- }
408
- .stk-table td.cell-active{
409
- background-color:var(--tr-active-bgc);
410
- }
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
+ }