jsl-ui 10.0.3 → 10.0.4

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.
package/lib/grid.css CHANGED
@@ -1,3698 +1,1106 @@
1
- @media (prefers-reduced-motion: reduce) {
2
- .jsl-button {
3
- transition: none;
4
- }
1
+ .slick-header.ui-state-default, .slick-headerrow.ui-state-default, .slick-footerrow.ui-state-default, .slick-top-panel-scroller.ui-state-default, .slick-group-header.ui-state-default {
2
+ background: var(--jsl-color-surface);
3
+ width: 100%;
4
+ position: relative;
5
+ overflow: auto;
6
+ border-left: 0 !important;
5
7
  }
6
8
 
7
- html {
8
- -webkit-text-size-adjust: 100%;
9
- -ms-text-size-adjust: 100%;
9
+ .slick-header.ui-state-default {
10
+ overflow: inherit;
10
11
  }
11
12
 
12
- hr {
13
- box-sizing: content-box;
14
- height: 0;
15
- overflow: visible;
13
+ .slick-header::-webkit-scrollbar {
14
+ display: none;
16
15
  }
17
16
 
18
- pre, code {
19
- font-family: monospace;
20
- font-size: 1em;
17
+ .slick-headerrow::-webkit-scrollbar {
18
+ display: none;
21
19
  }
22
20
 
23
- a {
24
- -webkit-text-decoration-skip: objects;
21
+ .slick-footerrow::-webkit-scrollbar {
22
+ display: none;
25
23
  }
26
24
 
27
- sub, sup {
28
- vertical-align: baseline;
29
- font-size: 75%;
30
- line-height: 0;
25
+ .slick-header-columns, .slick-headerrow-columns, .slick-footerrow-columns, .slick-group-header-columns {
26
+ white-space: nowrap;
27
+ cursor: default;
31
28
  position: relative;
29
+ overflow: hidden;
32
30
  }
33
31
 
34
- sub {
35
- bottom: -.25em;
32
+ .slick-header-column.ui-state-default, .slick-group-header-column.ui-state-default {
33
+ text-overflow: ellipsis;
34
+ border-right: 1px solid var(--jsl-color-border-subtle);
35
+ border-top: 1px solid var(--jsl-color-border-subtle);
36
+ float: left;
37
+ height: 20px;
38
+ margin: 0;
39
+ padding: 4px;
40
+ line-height: 20px;
41
+ position: relative;
42
+ overflow: hidden;
43
+ box-sizing: content-box !important;
44
+ border-bottom: 0 !important;
45
+ border-left: 0 !important;
36
46
  }
37
47
 
38
- sup {
39
- top: -.5em;
48
+ .slick-header-column.ui-state-default {
49
+ height: var(--jsl-grid-header-height, 40px);
50
+ line-height: var(--jsl-grid-header-height, 40px);
40
51
  }
41
52
 
42
- input, optgroup, select, textarea {
43
- text-transform: none;
53
+ .slick-footerrow-column.ui-state-default {
54
+ text-overflow: ellipsis;
55
+ border-right: 1px solid var(--jsl-color-border-subtle);
56
+ float: left;
57
+ vertical-align: middle;
58
+ border-top: 0;
59
+ border-bottom: 0;
60
+ border-left: 0;
61
+ align-content: center;
62
+ height: auto;
44
63
  margin: 0;
45
- font-size: 100%;
46
- line-height: 1.15;
64
+ padding: 4px;
65
+ line-height: 20px;
66
+ top: 0;
67
+ bottom: 0;
47
68
  }
48
69
 
49
- button, input {
50
- overflow: visible;
70
+ .slick-headerrow-column.ui-state-default, .slick-footerrow-column.ui-state-default {
71
+ padding: 4px;
51
72
  }
52
73
 
53
- button, html [type="button"], [type="reset"], [type="submit"] {
54
- -webkit-appearance: button;
74
+ .slick-header-column-sorted {
75
+ font-style: inherit;
55
76
  }
56
77
 
57
- button::-moz-focus-inner {
58
- border-style: none;
59
- padding: 0;
78
+ .slick-sort-indicator {
79
+ float: left;
80
+ width: 8px;
81
+ height: 5px;
82
+ margin-top: 6px;
83
+ margin-left: 4px;
60
84
  }
61
85
 
62
- [type="button"]::-moz-focus-inner {
63
- border-style: none;
64
- padding: 0;
86
+ .slick-sort-indicator-numbered {
87
+ float: left;
88
+ width: 8px;
89
+ height: 5px;
90
+ color: var(--jsl-color-text-secondary);
91
+ margin-top: 0;
92
+ margin-left: 4px;
93
+ font-style: normal;
94
+ font-weight: bold;
95
+ line-height: 20px;
65
96
  }
66
97
 
67
- [type="reset"]::-moz-focus-inner {
68
- border-style: none;
69
- padding: 0;
98
+ .grid-canvas {
99
+ outline: 0;
100
+ position: relative;
70
101
  }
71
102
 
72
- [type="submit"]::-moz-focus-inner {
73
- border-style: none;
74
- padding: 0;
103
+ .slick-row.ui-widget-content, .slick-row.ui-state-active {
104
+ border: 0;
105
+ width: 100%;
106
+ position: absolute;
75
107
  }
76
108
 
77
- button:-moz-focusring {
78
- outline: 1px dotted buttontext;
109
+ .slick-cell, .slick-headerrow-column, .slick-footerrow-column {
110
+ border: 1px solid #0000;
111
+ border-right: 1px dotted var(--jsl-color-border-subtle);
112
+ text-overflow: ellipsis;
113
+ vertical-align: middle;
114
+ z-index: 1;
115
+ white-space: nowrap;
116
+ cursor: default;
117
+ margin: 0;
118
+ padding: 1px 2px 1px 1px;
119
+ position: absolute;
120
+ overflow: hidden;
121
+ box-sizing: content-box !important;
79
122
  }
80
123
 
81
- [type="button"]:-moz-focusring {
82
- outline: 1px dotted buttontext;
124
+ .slick-headerrow-column {
125
+ border-bottom-color: var(--jsl-color-border-subtle);
83
126
  }
84
127
 
85
- [type="reset"]:-moz-focusring {
86
- outline: 1px dotted buttontext;
128
+ .slick-footerrow-column {
129
+ border-top-color: var(--jsl-color-border-subtle);
87
130
  }
88
131
 
89
- [type="submit"]:-moz-focusring {
90
- outline: 1px dotted buttontext;
132
+ .slick-group-toggle {
133
+ display: inline-block;
91
134
  }
92
135
 
93
- textarea {
94
- overflow: auto;
136
+ .slick-cell.highlighted {
137
+ background: var(--jsl-color-surface-selected);
138
+ -o-transition: all .5s;
139
+ transition: all .5s;
95
140
  }
96
141
 
97
- .right {
98
- text-align: right;
142
+ .slick-cell.flashing {
143
+ border: 1px solid var(--jsl-color-danger) !important;
99
144
  }
100
145
 
101
- .center {
102
- text-align: center;
146
+ .slick-cell.editable {
147
+ z-index: 11;
148
+ overflow: visible;
103
149
  }
104
150
 
105
- div.jsl-fill {
106
- box-sizing: border-box;
107
- height: 100%;
108
- position: relative;
151
+ .slick-cell:focus {
152
+ outline: none;
109
153
  }
110
154
 
111
- .resizable {
112
- position: relative;
155
+ .slick-reorder-proxy {
156
+ background: var(--jsl-color-accent);
157
+ opacity: .15;
158
+ filter: alpha(opacity = 15);
159
+ cursor: move;
160
+ display: inline-block;
113
161
  }
114
162
 
115
- .resizable > .rs-r {
116
- box-sizing: border-box;
117
- cursor: w-resize;
118
- background: #14141433;
119
- width: .5rem;
120
- position: absolute;
121
- top: 0;
122
- bottom: 0;
123
- right: 0;
163
+ .slick-reorder-guide {
164
+ background: var(--jsl-color-accent);
165
+ opacity: .7;
166
+ height: 2px;
167
+ filter: alpha(opacity = 70);
168
+ display: inline-block;
124
169
  }
125
170
 
126
- .resizable > .rs-b {
127
- box-sizing: border-box;
128
- cursor: n-resize;
129
- background: #14141433;
130
- height: .5rem;
171
+ .slick-selection {
172
+ z-index: 10;
173
+ border: 2px dashed var(--jsl-color-focus);
131
174
  position: absolute;
132
- bottom: 0;
133
- left: 0;
134
- right: 0;
135
- }
136
-
137
- .resizable > .rs-r.rs-b {
138
- top: initial;
139
- left: initial;
140
- cursor: nw-resize;
141
- bottom: 0;
142
- right: 0;
143
- }
144
-
145
- .dp-below, .dp-modal, .dp-permanent {
146
- box-sizing: border-box;
147
- color: var(--jsl-color-text);
148
- font: inherit;
149
- font-size: .875rem;
150
- line-height: 1.4;
151
175
  }
152
176
 
153
- .dp-below *, .dp-modal *, .dp-permanent * {
154
- box-sizing: border-box;
177
+ .slick-pane {
178
+ outline: 0;
179
+ width: 100%;
180
+ position: absolute;
181
+ overflow: hidden;
155
182
  }
156
183
 
157
- .dp {
158
- border: 1px solid var(--jsl-color-border);
159
- background: var(--jsl-color-surface);
160
- border-radius: .875rem;
161
- width: 19rem;
162
- max-width: calc(100vw - 1rem);
163
- max-height: calc(100dvh - 1rem);
164
- overflow: auto;
165
- box-shadow: 0 12px 32px #00000024, 0 2px 6px #0000000f;
184
+ .slick-pane-header {
185
+ display: block;
166
186
  }
167
187
 
168
- .dp-below {
169
- z-index: 2200;
170
- width: max-content;
171
- position: fixed;
188
+ .slick-header, .slick-headerrow, .slick-top-panel-scroller {
189
+ position: relative;
190
+ overflow: hidden;
172
191
  }
173
192
 
174
- .dp-modal {
175
- z-index: 2300;
176
- background: var(--jsl-color-overlay);
177
- place-items: center;
178
- padding: .5rem;
179
- display: grid;
180
- position: fixed;
181
- inset: 0;
193
+ .slick-top-panel {
194
+ width: 10000px;
182
195
  }
183
196
 
184
- .dp-permanent {
185
- max-width: 100%;
186
- display: inline-block;
197
+ .slick-viewport {
198
+ background: var(--jsl-color-surface);
199
+ outline: 0;
200
+ width: 100%;
201
+ position: relative;
187
202
  }
188
203
 
189
- .dp-permanent .dp {
190
- box-shadow: none;
191
- max-width: 100%;
204
+ .slick-wrap {
205
+ white-space: normal;
192
206
  }
193
207
 
194
- .dp button {
195
- appearance: none;
196
- color: inherit;
197
- font: inherit;
198
- cursor: pointer;
199
- text-align: center;
208
+ input.editor-text, textarea.editor-text {
209
+ resize: none;
200
210
  background: none;
201
211
  border: 0;
202
- border-radius: .4rem;
212
+ outline: 0;
213
+ width: 100%;
214
+ height: 100%;
203
215
  margin: 0;
204
- padding: .5rem;
205
- line-height: 1.4;
216
+ padding: 0;
206
217
  }
207
218
 
208
- .dp button:hover:not(:disabled) {
209
- background: var(--jsl-color-surface-hover);
219
+ .slick-cell .jsl-container {
220
+ position: absolute;
221
+ inset: 0;
210
222
  }
211
223
 
212
- .dp button:focus-visible {
213
- outline: 2px solid var(--jsl-color-focus);
214
- outline-offset: -2px;
215
- z-index: 1;
216
- position: relative;
224
+ .slick-cell .jsl-container .jsl-selected {
225
+ padding: 0;
217
226
  }
218
227
 
219
- .dp button:disabled {
220
- color: var(--jsl-color-disabled-text);
221
- cursor: not-allowed;
222
- opacity: .4;
228
+ .slickgrid {
229
+ box-sizing: border-box;
230
+ border: solid 1px var(--jsl-color-border);
231
+ border-radius: 3px;
223
232
  }
224
233
 
225
- .dp-cal-header {
226
- grid-template-columns: 2rem 1fr auto 2rem;
227
- align-items: center;
228
- gap: .125rem;
229
- padding: .75rem .625rem .5rem;
230
- display: grid;
234
+ .slick-col-ghost {
235
+ box-sizing: content-box;
236
+ pointer-events: none;
237
+ position: absolute;
231
238
  }
232
239
 
233
- .dp-cal-header button {
234
- font-weight: 600;
240
+ .slick-ghost-content {
241
+ border: solid 2px var(--jsl-color-border);
242
+ background: var(--jsl-color-surface-selected);
243
+ position: absolute;
244
+ left: 0;
245
+ right: 0;
235
246
  }
236
247
 
237
- .dp .dp-prev, .dp .dp-next {
238
- padding: .35rem;
239
- font-size: 1.375rem;
240
- line-height: 1;
248
+ .editor-text {
249
+ font-size: 100%;
241
250
  }
242
251
 
243
- .dp-days {
244
- grid-template-columns: repeat(7, minmax(0, 1fr));
245
- gap: .125rem;
246
- padding: 0 .625rem .625rem;
247
- display: grid;
252
+ .slick-filtered-header {
253
+ color: var(--jsl-color-accent);
254
+ background: var(--jsl-color-surface-selected);
248
255
  }
249
256
 
250
- .dp-col-header {
251
- color: var(--jsl-color-text-muted);
257
+ .slick-preheader-panel .slick-column-name {
252
258
  text-align: center;
253
- padding: .5rem 0;
254
- font-size: .6875rem;
255
- font-weight: 500;
259
+ float: none;
256
260
  }
257
261
 
258
- .dp .dp-day {
259
- font-variant-numeric: tabular-nums;
260
- min-height: 2.125rem;
261
- padding: .45rem 0;
262
- font-size: .8125rem;
263
- position: relative;
262
+ .slick-header-column.resizable > .rs-r {
263
+ background: none;
264
264
  }
265
265
 
266
- .dp .dp-edge-day {
267
- color: var(--jsl-color-text-muted);
266
+ .js-touch .slick-header-column > .slick-header-menubutton {
267
+ display: inline-block;
268
268
  }
269
269
 
270
- .dp .dp-current:not(.dp-selected) {
271
- background: var(--jsl-color-surface-selected);
272
- }
273
-
274
- .dp .dp-selected, .dp .dp-selected:hover:not(:disabled) {
275
- background: var(--jsl-color-accent);
276
- color: var(--jsl-color-on-accent);
277
- font-weight: 600;
278
- }
279
-
280
- .dp-day-today:after {
281
- content: "";
282
- background: currentColor;
283
- border-radius: 50%;
284
- width: 3px;
285
- height: 3px;
286
- position: absolute;
287
- bottom: 3px;
288
- left: calc(50% - 1.5px);
289
- }
290
-
291
- .dp-cal-footer {
292
- border-top: 1px solid var(--jsl-color-border-subtle);
293
- grid-template-columns: repeat(3, 1fr);
294
- gap: .25rem;
295
- padding: .5rem .625rem;
296
- display: grid;
297
- }
298
-
299
- .dp-cal-footer button {
300
- font-size: .75rem;
301
- font-weight: 500;
302
- }
303
-
304
- .dp-months {
305
- grid-template-columns: repeat(3, 1fr);
306
- align-content: center;
307
- gap: .375rem;
308
- min-height: 15rem;
309
- padding: .75rem;
310
- display: grid;
311
- }
312
-
313
- .dp-months button {
314
- padding: .875rem .25rem;
315
- font-size: .75rem;
316
- }
317
-
318
- .dp-years {
319
- gap: .25rem;
320
- height: 19rem;
321
- padding: .75rem;
322
- display: grid;
323
- overflow-y: auto;
324
- }
325
-
326
- .dp-years button {
327
- width: 100%;
328
- padding: .625rem;
329
- display: block;
330
- }
331
-
332
- @media (forced-colors: active) {
333
- .dp .dp-selected {
334
- outline: 2px solid highlight;
335
- }
336
- }
337
-
338
- .jsl-button, .jsl-button:any-link {
339
- --jsl-button-height: 2rem;
340
- --jsl-button-padding: .875rem;
341
- box-sizing: border-box;
342
- height: var(--jsl-button-height);
343
- padding: 0 var(--jsl-button-padding);
344
- vertical-align: middle;
345
- border-radius: var(--jsl-button-radius, .375rem);
346
- background: var(--jsl-button-primary, var(--jsl-color-accent));
347
- color: var(--jsl-button-on-primary, var(--jsl-color-on-accent));
348
- font: inherit;
349
- letter-spacing: normal;
350
- text-align: center;
351
- text-transform: none;
352
- white-space: nowrap;
353
- cursor: pointer;
354
- border: 1px solid #0000;
355
- justify-content: center;
356
- align-items: center;
357
- gap: .5rem;
358
- margin: 0;
359
- font-size: .875rem;
360
- font-weight: 500;
361
- line-height: 1.25;
362
- text-decoration: none;
363
- transition: background-color .12s, border-color .12s, box-shadow .12s;
364
- display: inline-flex;
365
- position: relative;
366
- }
367
-
368
- .jsl-button, button.jsl-button[type] {
369
- appearance: none;
370
- }
371
-
372
- .jsl-button:where(:hover), .jsl-button:any-link:where(:hover) {
373
- background: var(--jsl-button-primary-hover, var(--jsl-color-accent-hover));
374
- }
375
-
376
- .jsl-button:where(:active, .active, [aria-pressed="true"]), .jsl-button:any-link:where(:active, .active, [aria-pressed="true"]) {
377
- background: var(--jsl-button-primary-active, var(--jsl-color-accent-active));
378
- box-shadow: inset 0 0 0 1px;
379
- }
380
-
381
- .jsl-button.jsl-button-outline {
382
- border-color: var(--jsl-button-border, var(--jsl-color-border));
383
- background: var(--jsl-button-surface, var(--jsl-color-surface));
384
- color: var(--jsl-button-text, var(--jsl-color-text));
385
- }
386
-
387
- .jsl-button.jsl-button-ghost {
388
- color: var(--jsl-button-text, var(--jsl-color-text));
389
- background: none;
390
- }
391
-
392
- .jsl-button.jsl-button-outline:where(:hover), .jsl-button.jsl-button-ghost:where(:hover) {
393
- background: var(--jsl-button-hover-surface, var(--jsl-color-surface-hover));
394
- border-color: var(--jsl-button-border, var(--jsl-color-border));
395
- }
396
-
397
- .jsl-button.jsl-button-outline:where(:active, .active, [aria-pressed="true"]), .jsl-button.jsl-button-ghost:where(:active, .active, [aria-pressed="true"]) {
398
- background: var(--jsl-button-selected-surface, var(--jsl-color-surface-selected));
399
- border-color: var(--jsl-button-primary, var(--jsl-color-accent));
400
- color: var(--jsl-button-selected-text, var(--jsl-color-text));
401
- box-shadow: none;
402
- }
403
-
404
- .jsl-button:focus-visible {
405
- outline: 2px solid var(--jsl-button-focus, var(--jsl-color-focus));
406
- outline-offset: 3px;
407
- }
408
-
409
- .jsl-button.jsl-button-small {
410
- --jsl-button-height: 1.75rem;
411
- --jsl-button-padding: .625rem;
412
- gap: .375rem;
413
- font-size: .8125rem;
414
- }
415
-
416
- .jsl-button.jsl-button-large {
417
- --jsl-button-height: 2.5rem;
418
- --jsl-button-padding: 1rem;
419
- font-size: .9375rem;
420
- }
421
-
422
- .jsl-button.jsl-button-icon-only {
423
- width: var(--jsl-button-height);
424
- flex-shrink: 0;
425
- padding: 0;
426
- }
427
-
428
- .jsl-button-icon {
429
- pointer-events: none;
430
- flex: none;
431
- justify-content: center;
432
- align-items: center;
433
- width: 1.125em;
434
- height: 1.125em;
435
- line-height: 1;
436
- display: inline-flex;
437
- }
438
-
439
- .jsl-button-icon > img, .jsl-button-icon > svg {
440
- object-fit: contain;
441
- width: 100%;
442
- height: 100%;
443
- display: block;
444
- }
445
-
446
- .jsl-button-label-hidden {
447
- clip-path: inset(50%);
448
- white-space: nowrap;
449
- border: 0;
450
- width: 1px;
451
- height: 1px;
452
- margin: -1px;
453
- padding: 0;
454
- position: absolute;
455
- overflow: hidden;
456
- }
457
-
458
- .jsl-button:disabled, .jsl-button.disabled, .jsl-button[aria-disabled="true"] {
459
- background: var(--jsl-button-disabled-surface, var(--jsl-color-disabled-surface));
460
- border-color: var(--jsl-button-disabled-border, var(--jsl-color-border-subtle));
461
- color: var(--jsl-button-disabled-text, var(--jsl-color-disabled-text));
462
- box-shadow: none;
463
- cursor: not-allowed;
464
- }
465
-
466
- @media (prefers-reduced-motion: reduce) {
467
- .jsl-button {
468
- transition: none;
469
- }
470
- }
471
-
472
- .jsl-dialog-overlay {
473
- z-index: var(--jsl-dialog-z-index, 2001);
474
- background: var(--jsl-dialog-backdrop, var(--jsl-color-overlay));
475
- position: fixed;
476
- inset: 0;
477
- }
478
-
479
- .jsl-dialog {
480
- box-sizing: border-box;
481
- border: 1px solid var(--jsl-dialog-border, var(--jsl-color-border-subtle));
482
- border-radius: var(--jsl-dialog-radius, .75rem);
483
- background: var(--jsl-dialog-surface, var(--jsl-color-surface));
484
- width: 32rem;
485
- max-width: calc(100% - 2rem);
486
- max-height: calc(100% - 2rem);
487
- color: var(--jsl-color-text);
488
- box-shadow: var(--jsl-dialog-shadow, var(--jsl-shadow-dialog));
489
- font: inherit;
490
- pointer-events: auto;
491
- isolation: isolate;
492
- flex-direction: column;
493
- line-height: 1.5;
494
- display: flex;
495
- position: absolute;
496
- top: 50%;
497
- left: 50%;
498
- transform: translate(-50%, -50%);
499
- }
500
-
501
- .jsl-dialog:focus {
502
- outline: none;
503
- }
504
-
505
- .jsl-dialog.resizable {
506
- position: absolute;
507
- }
508
-
509
- .jsl-dialog:focus-visible {
510
- outline: 2px solid var(--jsl-color-focus);
511
- outline-offset: 3px;
512
- }
513
-
514
- .jsl-dialog > .dlg-header {
515
- box-sizing: border-box;
516
- border-bottom: 1px solid var(--jsl-color-border-subtle);
517
- border-radius: var(--jsl-dialog-radius, .75rem) var(--jsl-dialog-radius, .75rem) 0 0;
518
- flex: none;
519
- align-items: center;
520
- gap: 1rem;
521
- min-width: 0;
522
- padding: 1.125rem 1.5rem;
523
- font-size: 1rem;
524
- font-weight: 600;
525
- line-height: 1.5;
526
- display: flex;
527
- }
528
-
529
- .jsl-dialog .dlg-title {
530
- overflow-wrap: anywhere;
531
- flex: 1;
532
- min-width: 0;
533
- }
534
-
535
- .jsl-dialog-moveable > .dlg-header {
536
- cursor: move;
537
- touch-action: none;
538
- }
539
-
540
- .jsl-dialog .dlg-close-btn {
541
- box-sizing: border-box;
542
- width: 2rem;
543
- height: 2rem;
544
- color: var(--jsl-color-text-secondary);
545
- font: inherit;
546
- cursor: pointer;
547
- background: none;
548
- border: 1px solid #0000;
549
- border-radius: .375rem;
550
- flex: none;
551
- justify-content: center;
552
- align-items: center;
553
- margin: -.25rem -.5rem -.25rem auto;
554
- padding: 0;
555
- display: inline-flex;
556
- position: relative;
557
- }
558
-
559
- .jsl-dialog .dlg-close-btn:before, .jsl-dialog .dlg-close-btn:after {
560
- content: "";
561
- background: currentColor;
562
- border-radius: 1px;
563
- width: .875rem;
564
- height: 1.5px;
565
- position: absolute;
566
- transform: rotate(45deg);
567
- }
568
-
569
- .jsl-dialog .dlg-close-btn:after {
570
- transform: rotate(-45deg);
571
- }
572
-
573
- .jsl-dialog .dlg-close-btn:hover {
574
- background: var(--jsl-color-surface-hover);
575
- color: var(--jsl-color-text);
576
- }
577
-
578
- .jsl-dialog .dlg-close-btn:focus-visible {
579
- outline: 2px solid var(--jsl-color-focus);
580
- outline-offset: 2px;
581
- }
582
-
583
- .jsl-dialog > .dlg-body {
584
- box-sizing: border-box;
585
- overflow-wrap: anywhere;
586
- overscroll-behavior: contain;
587
- flex: auto;
588
- min-width: 0;
589
- min-height: 0;
590
- padding: 1.5rem;
591
- overflow: auto;
592
- }
593
-
594
- .jsl-dialog > .dlg-footer {
595
- box-sizing: border-box;
596
- border-top: 1px solid var(--jsl-color-border-subtle);
597
- border-radius: 0 0 var(--jsl-dialog-radius, .75rem) var(--jsl-dialog-radius, .75rem);
598
- background: var(--jsl-color-surface-subtle);
599
- text-align: end;
600
- flex: none;
601
- padding: 1rem 1.5rem;
602
- }
603
-
604
- .jsl-dialog > .dlg-footer > div, .jsl-dialog > .dlg-footer > form {
605
- flex-wrap: wrap;
606
- justify-content: flex-end;
607
- align-items: center;
608
- gap: .5rem;
609
- display: flex;
610
- }
611
-
612
- .jsl-dialog > .dlg-footer > button + button {
613
- margin-inline-start: .5rem;
614
- }
615
-
616
- .jsl-dialog > .dlg-header[hidden], .jsl-dialog > .dlg-footer[hidden] {
617
- display: none;
618
- }
619
-
620
- .jsl-dialog .slickgrid {
621
- border-radius: 0;
622
- }
623
-
624
- .jsl-dialog.resizable > .dlg-res-handle.rs-r.rs-b {
625
- cursor: nwse-resize;
626
- touch-action: none;
627
- background: none;
628
- width: 1rem;
629
- height: 1rem;
630
- bottom: .125rem;
631
- right: .125rem;
632
- }
633
-
634
- .jsl-dialog .dlg-res-handle:after {
635
- content: "";
636
- border-right: 1px solid var(--jsl-color-text-muted);
637
- border-bottom: 1px solid var(--jsl-color-text-muted);
638
- width: .4rem;
639
- height: .4rem;
640
- position: absolute;
641
- bottom: .2rem;
642
- right: .2rem;
643
- }
644
-
645
- @media (width <= 480px) {
646
- .jsl-dialog {
647
- max-width: calc(100% - 1.5rem);
648
- max-height: calc(100% - 1.5rem);
649
- }
650
-
651
- .jsl-dialog > .dlg-header {
652
- padding: 1rem 1.125rem;
653
- }
654
-
655
- .jsl-dialog > .dlg-body {
656
- padding: 1.125rem;
657
- }
658
-
659
- .jsl-dialog > .dlg-footer {
660
- padding: .875rem 1.125rem;
661
- }
662
- }
663
-
664
- .jsl-number {
665
- text-align: right;
666
- }
667
-
668
- .jsl-notification-container {
669
- z-index: 3020;
670
- box-sizing: border-box;
671
- width: 25rem;
672
- max-width: 100vw;
673
- max-height: 100dvh;
674
- box-shadow: none;
675
- pointer-events: none;
676
- scrollbar-width: thin;
677
- background: none;
678
- border: 0;
679
- border-radius: 1.75rem;
680
- padding: 1rem;
681
- position: fixed;
682
- top: 0;
683
- right: 0;
684
- overflow-y: auto;
685
- }
686
-
687
- .jsl-notification-container > div {
688
- flex-direction: column;
689
- gap: .75rem;
690
- display: flex;
691
- }
692
-
693
- .jsl-notification {
694
- --jsl-notification-tone: var(--jsl-color-text-secondary);
695
- box-sizing: border-box;
696
- border: 1px solid var(--jsl-color-border);
697
- background: var(--jsl-color-surface);
698
- width: 100%;
699
- color: var(--jsl-color-text);
700
- font: inherit;
701
- pointer-events: auto;
702
- border-radius: .75rem;
703
- grid-template-columns: 1.25rem minmax(0, 1fr) auto;
704
- align-items: start;
705
- gap: .75rem;
706
- padding: 1rem;
707
- font-size: .8125rem;
708
- line-height: 1.5;
709
- animation: .16s ease-out jsl-notification-appear;
710
- display: grid;
711
- position: relative;
712
- box-shadow: 0 8px 24px #0000001a, 0 1px 4px #0000000a;
713
- }
714
-
715
- .jsl-notification[hidden] {
716
- display: none;
717
- }
718
-
719
- .jsl-notification--info {
720
- --jsl-notification-tone: var(--jsl-color-info);
721
- }
722
-
723
- .jsl-notification--success {
724
- --jsl-notification-tone: var(--jsl-color-success);
725
- }
726
-
727
- .jsl-notification--warning {
728
- --jsl-notification-tone: var(--jsl-color-warning);
729
- }
730
-
731
- .jsl-notification--error {
732
- --jsl-notification-tone: var(--jsl-color-danger);
733
- }
734
-
735
- .jsl-notification-icon {
736
- box-sizing: border-box;
737
- width: 1.125rem;
738
- height: 1.125rem;
739
- color: var(--jsl-notification-tone);
740
- border: 1.5px solid;
741
- border-radius: 50%;
742
- place-items: center;
743
- margin-top: .125rem;
744
- font-size: .6875rem;
745
- font-weight: 700;
746
- line-height: 1;
747
- display: grid;
748
- }
749
-
750
- .jsl-notification--success .jsl-notification-icon {
751
- font-size: .75rem;
752
- }
753
-
754
- .jsl-notification-copy {
755
- overflow-wrap: anywhere;
756
- min-width: 0;
757
- }
758
-
759
- .jsl-notification-title {
760
- color: var(--jsl-color-text);
761
- margin-bottom: .25rem;
762
- font-weight: 600;
763
- }
764
-
765
- .jsl-notification-title[hidden] {
766
- display: none;
767
- }
768
-
769
- .jsl-notification-close {
770
- appearance: none;
771
- width: 1.5rem;
772
- height: 1.5rem;
773
- color: var(--jsl-color-text-muted);
774
- font: inherit;
775
- cursor: pointer;
776
- background: none;
777
- border: 0;
778
- border-radius: .25rem;
779
- place-items: center;
780
- margin: -.125rem -.25rem 0 0;
781
- padding: 0;
782
- font-size: 1.125rem;
783
- line-height: 1;
784
- display: grid;
785
- }
786
-
787
- .jsl-notification-close[hidden] {
788
- display: none;
789
- }
790
-
791
- .jsl-notification-progress {
792
- background: var(--jsl-color-border-subtle);
793
- pointer-events: none;
794
- border-radius: 999px;
795
- height: 3px;
796
- position: absolute;
797
- inset: auto 1rem .375rem;
798
- overflow: hidden;
799
- }
800
-
801
- .jsl-notification-progress-fill {
802
- background: var(--jsl-color-accent);
803
- transform-origin: 0;
804
- height: 100%;
805
- display: block;
806
- }
807
-
808
- .jsl-notification-close:hover {
809
- background: var(--jsl-color-surface-hover);
810
- color: var(--jsl-color-text);
811
- }
812
-
813
- .jsl-notification-close:focus-visible, .jsl-notification:focus-visible {
814
- outline: 2px solid var(--jsl-color-focus);
815
- outline-offset: 2px;
816
- }
817
-
818
- @keyframes jsl-notification-appear {
819
- from {
820
- opacity: 0;
821
- transform: translateY(-4px);
822
- }
823
-
824
- to {
825
- opacity: 1;
826
- transform: translateY(0);
827
- }
828
- }
829
-
830
- @media (prefers-reduced-motion: reduce) {
831
- .jsl-notification {
832
- animation: none;
833
- }
834
- }
835
-
836
- .slick-header.ui-state-default, .slick-headerrow.ui-state-default, .slick-footerrow.ui-state-default, .slick-top-panel-scroller.ui-state-default, .slick-group-header.ui-state-default {
837
- background: var(--jsl-color-surface);
838
- width: 100%;
839
- position: relative;
840
- overflow: auto;
841
- border-left: 0 !important;
842
- }
843
-
844
- .slick-header.ui-state-default {
845
- overflow: inherit;
846
- }
847
-
848
- .slick-header::-webkit-scrollbar {
849
- display: none;
850
- }
851
-
852
- .slick-headerrow::-webkit-scrollbar {
853
- display: none;
854
- }
855
-
856
- .slick-footerrow::-webkit-scrollbar {
857
- display: none;
858
- }
859
-
860
- .slick-header-columns, .slick-headerrow-columns, .slick-footerrow-columns, .slick-group-header-columns {
861
- white-space: nowrap;
862
- cursor: default;
863
- position: relative;
864
- overflow: hidden;
865
- }
866
-
867
- .slick-header-column.ui-state-default, .slick-group-header-column.ui-state-default {
868
- text-overflow: ellipsis;
869
- border-right: 1px solid var(--jsl-color-border-subtle);
870
- border-top: 1px solid var(--jsl-color-border-subtle);
871
- float: left;
872
- height: 20px;
873
- margin: 0;
874
- padding: 4px;
875
- line-height: 20px;
876
- position: relative;
877
- overflow: hidden;
878
- box-sizing: content-box !important;
879
- border-bottom: 0 !important;
880
- border-left: 0 !important;
881
- }
882
-
883
- .slick-header-column.ui-state-default {
884
- height: var(--jsl-grid-header-height, 40px);
885
- line-height: var(--jsl-grid-header-height, 40px);
886
- }
887
-
888
- .slick-footerrow-column.ui-state-default {
889
- text-overflow: ellipsis;
890
- border-right: 1px solid var(--jsl-color-border-subtle);
891
- float: left;
892
- vertical-align: middle;
893
- border-top: 0;
894
- border-bottom: 0;
895
- border-left: 0;
896
- align-content: center;
897
- height: auto;
898
- margin: 0;
899
- padding: 4px;
900
- line-height: 20px;
901
- top: 0;
902
- bottom: 0;
903
- }
904
-
905
- .slick-headerrow-column.ui-state-default, .slick-footerrow-column.ui-state-default {
906
- padding: 4px;
907
- }
908
-
909
- .slick-header-column-sorted {
910
- font-style: inherit;
911
- }
912
-
913
- .slick-sort-indicator {
914
- float: left;
915
- width: 8px;
916
- height: 5px;
917
- margin-top: 6px;
918
- margin-left: 4px;
919
- }
920
-
921
- .slick-sort-indicator-numbered {
922
- float: left;
923
- width: 8px;
924
- height: 5px;
925
- color: var(--jsl-color-text-secondary);
926
- margin-top: 0;
927
- margin-left: 4px;
928
- font-style: normal;
929
- font-weight: bold;
930
- line-height: 20px;
931
- }
932
-
933
- .grid-canvas {
934
- outline: 0;
935
- position: relative;
936
- }
937
-
938
- .slick-row.ui-widget-content, .slick-row.ui-state-active {
939
- border: 0;
940
- width: 100%;
941
- position: absolute;
942
- }
943
-
944
- .slick-cell, .slick-headerrow-column, .slick-footerrow-column {
945
- border: 1px solid #0000;
946
- border-right: 1px dotted var(--jsl-color-border-subtle);
947
- text-overflow: ellipsis;
948
- vertical-align: middle;
949
- z-index: 1;
950
- white-space: nowrap;
951
- cursor: default;
952
- margin: 0;
953
- padding: 1px 2px 1px 1px;
954
- position: absolute;
955
- overflow: hidden;
956
- box-sizing: content-box !important;
957
- }
958
-
959
- .slick-headerrow-column {
960
- border-bottom-color: var(--jsl-color-border-subtle);
961
- }
962
-
963
- .slick-footerrow-column {
964
- border-top-color: var(--jsl-color-border-subtle);
965
- }
966
-
967
- .slick-group-toggle {
968
- display: inline-block;
969
- }
970
-
971
- .slick-cell.highlighted {
972
- background: var(--jsl-color-surface-selected);
973
- -o-transition: all .5s;
974
- transition: all .5s;
975
- }
976
-
977
- .slick-cell.flashing {
978
- border: 1px solid var(--jsl-color-danger) !important;
979
- }
980
-
981
- .slick-cell.editable {
982
- z-index: 11;
983
- overflow: visible;
984
- }
985
-
986
- .slick-cell:focus {
987
- outline: none;
988
- }
989
-
990
- .slick-reorder-proxy {
991
- background: var(--jsl-color-accent);
992
- opacity: .15;
993
- filter: alpha(opacity = 15);
994
- cursor: move;
995
- display: inline-block;
996
- }
997
-
998
- .slick-reorder-guide {
999
- background: var(--jsl-color-accent);
1000
- opacity: .7;
1001
- height: 2px;
1002
- filter: alpha(opacity = 70);
1003
- display: inline-block;
1004
- }
1005
-
1006
- .slick-selection {
1007
- z-index: 10;
1008
- border: 2px dashed var(--jsl-color-focus);
1009
- position: absolute;
1010
- }
1011
-
1012
- .slick-pane {
1013
- outline: 0;
1014
- width: 100%;
1015
- position: absolute;
1016
- overflow: hidden;
1017
- }
1018
-
1019
- .slick-pane-header {
1020
- display: block;
1021
- }
1022
-
1023
- .slick-header, .slick-headerrow, .slick-top-panel-scroller {
1024
- position: relative;
1025
- overflow: hidden;
1026
- }
1027
-
1028
- .slick-top-panel {
1029
- width: 10000px;
1030
- }
1031
-
1032
- .slick-viewport {
1033
- background: var(--jsl-color-surface);
1034
- outline: 0;
1035
- width: 100%;
1036
- position: relative;
1037
- }
1038
-
1039
- .slick-wrap {
1040
- white-space: normal;
1041
- }
1042
-
1043
- input.editor-text, textarea.editor-text {
1044
- resize: none;
1045
- background: none;
1046
- border: 0;
1047
- outline: 0;
1048
- width: 100%;
1049
- height: 100%;
1050
- margin: 0;
1051
- padding: 0;
1052
- }
1053
-
1054
- .slick-cell .jsl-container {
1055
- position: absolute;
1056
- inset: 0;
1057
- }
1058
-
1059
- .slick-cell .jsl-container .jsl-selected {
1060
- padding: 0;
1061
- }
1062
-
1063
- .slickgrid {
1064
- box-sizing: border-box;
1065
- border: solid 1px var(--jsl-color-border);
1066
- border-radius: 3px;
1067
- }
1068
-
1069
- .slick-col-ghost {
1070
- box-sizing: content-box;
1071
- pointer-events: none;
1072
- position: absolute;
1073
- }
1074
-
1075
- .slick-ghost-content {
1076
- border: solid 2px var(--jsl-color-border);
1077
- background: var(--jsl-color-surface-selected);
1078
- position: absolute;
1079
- left: 0;
1080
- right: 0;
1081
- }
1082
-
1083
- .editor-text {
1084
- font-size: 100%;
1085
- }
1086
-
1087
- .slick-filtered-header {
1088
- color: var(--jsl-color-accent);
1089
- background: var(--jsl-color-surface-selected);
1090
- }
1091
-
1092
- .slick-preheader-panel .slick-column-name {
1093
- text-align: center;
1094
- float: none;
1095
- }
1096
-
1097
- .slick-header-column.resizable > .rs-r {
1098
- background: none;
1099
- }
1100
-
1101
- .js-touch .slick-header-column > .slick-header-menubutton {
1102
- display: inline-block;
1103
- }
1104
-
1105
- .js-touch .slick-header-column.resizable > .rs-r {
1106
- background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAYCAYAAACbU/80AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsIAAA7CARUoSoAAAAMNSURBVEhLxVY7i1NBGM3NwzyMINiIjSKoC9tIBEG02FgkIeSxpJBlS7sV1s5fIRZqYWFhtYssEggJ5IEaFxERYdXWam1EkQVh82Lz8pzJl3jvzb1JjK8DA/lOZuacO/PNN+Po9/tT29LSktuKt2vov4B2xeo/c3M6piASiawHg8G9eDweEmoi2A/936G9wNg1oW2h0YUdKB4IBO45nU5Ht9s9ACLFYnFb/h4DxT0ez2uXy3WIca/XczQajZuVSuW+6mABWwPRaPSa3+9/DHFNKEe73a7XarWj1Wq1I5QByWQyBwMpCRVoAubL4K9ns9nPQo9guQVW4pwIK7BuJ05AZK3T6exIqMDVAx8Fn89kMieEHmHMQCwWuwrxTbM4l7JcLj8SyhL8QrfbncRKbXGMHuBDMLFtNmHYAor7fL4KxF1CKWDCcj6fj0k4EyR/7uo/hICJXZi5PNyO0Qowgbxeb8ksjgEfuH8SzgwmXrPZXMFKGJIM4qeQE+/T6fRJxmoFwuHwcRybjxA6onoJzG7ngeQTt9TwYcin3Xq9fkZLJBLnEL+C02MQG/wLaJr2HYMWf0d8CJyON5jrooQK/HC0r1oqlarh3B4W/p/D+T/Fiaml+G9jZIB7guwctT8NzNnTz48E5/Het80BZOnbQqFgSJx5wMIDsWdI8AWhFCiOsn6WK7AIR3sD+icwIIQjlJFwLoh43iyOE9eFgWWU9S/OXC73CdwFmPg2+HsAnluc3yc8x0L9MiBymx8ioQLFW61WpFQqPWescoAmsA3nWXgYDwETGi8lllWhZgbfAphzVUIFVkVUx9WhOGG4C2TJXsL1aaEUMJCJs4lKeWuWwmRzm1J8BRfallAKY+8B3b6NvYDA74BPTjKBCy2OC61gEudtegP3wwOhRhirA5ycIrwBOVAPmgL/UEJLYJU2LMT5KhoTJywLEU3w+uVAvQn8ZvbekdASWKVlbNeBhNy68qQnmaWBITiQJiBK4Y4+e+3ANyP6XkLbR3s69SqXW2li4xN71mf2sKG/z4o3tr7jB/mDdb4DhXtsAAAAAElFTkSuQmCC") 100% / .5em .3em no-repeat;
1107
- width: 1.2rem;
1108
- }
1109
-
1110
- .js-touch .slick-header-menubutton.resize-offset {
1111
- width: 1.2rem;
1112
- right: 1.2rem;
1113
- }
1114
-
1115
- .slick-header-columns {
1116
- border-bottom: 2px solid var(--jsl-color-border-subtle);
1117
- background: var(--jsl-color-surface-subtle);
1118
- }
1119
-
1120
- .slick-header-column {
1121
- border-right: 1px solid var(--jsl-color-border-subtle);
1122
- text-align: inherit;
1123
- font-weight: 600;
1124
- }
1125
-
1126
- .slick-header-column:hover, .slick-header-column-active {
1127
- background: var(--jsl-color-surface-hover);
1128
- color: var(--jsl-color-text);
1129
- }
1130
-
1131
- .slick-header-column > .slick-header-menubutton:hover {
1132
- background-color: var(--jsl-color-surface-selected);
1133
- }
1134
-
1135
- .slick-headerrow {
1136
- background: var(--jsl-color-surface-subtle);
1137
- }
1138
-
1139
- .slick-headerrow-column {
1140
- background: var(--jsl-color-surface-subtle);
1141
- border-bottom: 0;
1142
- height: 100%;
1143
- }
1144
-
1145
- .slick-row {
1146
- background: var(--jsl-color-surface);
1147
- line-height: inherit;
1148
- border: 0;
1149
- align-items: center;
1150
- display: flex;
1151
- position: absolute;
1152
- }
1153
-
1154
- .slick-row.selected {
1155
- z-index: 10;
1156
- background: var(--jsl-color-surface-selected);
1157
- }
1158
-
1159
- .slick-cell {
1160
- align-content: center;
1161
- padding-left: 4px;
1162
- padding-right: 4px;
1163
- }
1164
-
1165
- .slick-cell.editable .select-comp {
1166
- max-width: none;
1167
- height: 100%;
1168
- min-height: 0;
1169
- display: flex;
1170
- }
1171
-
1172
- .slick-cell.editable .select-comp > .sel-expander {
1173
- border-radius: .25rem;
1174
- height: 100%;
1175
- min-height: 0;
1176
- padding: 0 .5rem;
1177
- }
1178
-
1179
- .slick-cell.editable .select-comp.multiple > .sel-expander {
1180
- padding-top: 0;
1181
- padding-bottom: 0;
1182
- }
1183
-
1184
- .slick-cell.editable .select-comp .sel-chip {
1185
- padding: .0625rem .375rem;
1186
- font-size: .6875rem;
1187
- }
1188
-
1189
- .slick-group {
1190
- border-bottom: 2px solid var(--jsl-color-border-subtle);
1191
- }
1192
-
1193
- .slick-group .slick-cell {
1194
- background: var(--jsl-color-surface-selected);
1195
- align-items: center;
1196
- display: flex;
1197
- }
1198
-
1199
- .slick-group-toggle {
1200
- vertical-align: middle;
1201
- flex-shrink: 0;
1202
- width: 20px;
1203
- height: 20px;
1204
- margin-right: 5px;
1205
- }
1206
-
1207
- .slick-group-toggle.expanded {
1208
- background-color: currentColor;
1209
- mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 122.88 119.8'%3E%3Cpath d='M23.59,0h75.7a23.63,23.63,0,0,1,23.59,23.59V96.21A23.64,23.64,0,0,1,99.29,119.8H23.59a23.53,23.53,0,0,1-16.67-6.93l-.38-.42A23.49,23.49,0,0,1,0,96.21V23.59A23.63,23.63,0,0,1,23.59,0Zm59.7,53.51a6.39,6.39,0,1,1,0,12.77H39.59a6.39,6.39,0,1,1,0-12.77Zm16-40.74H23.59A10.86,10.86,0,0,0,12.77,23.59V96.21a10.77,10.77,0,0,0,2.9,7.37l.28.26A10.76,10.76,0,0,0,23.59,107h75.7a10.87,10.87,0,0,0,10.82-10.82V23.59A10.86,10.86,0,0,0,99.29,12.77Z'/%3E%3C/svg%3E") center / contain no-repeat;
1210
- }
1211
-
1212
- .slick-group-toggle.collapsed {
1213
- background-color: currentColor;
1214
- mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' viewBox='0 0 122.88 119.72' style='enable-background:new 0 0 122.88 119.72' xml:space='preserve'%3E%3Cg%3E%3Cpath d='M22.72,0h77.45c6.25,0,11.93,2.56,16.05,6.67c4.11,4.11,6.67,9.79,6.67,16.05v74.29c0,6.25-2.56,11.93-6.67,16.05 l-0.32,0.29c-4.09,3.94-9.64,6.38-15.73,6.38H22.72c-6.25,0-11.93-2.56-16.05-6.67l-0.3-0.32C2.43,108.64,0,103.09,0,97.01V22.71 c0-6.25,2.55-11.93,6.67-16.05C10.78,2.55,16.46,0,22.72,0L22.72,0z M55.47,38.34c0-3.3,2.67-5.97,5.97-5.97 c3.3,0,5.97,2.67,5.97,5.97v15.55h15.55c3.3,0,5.97,2.67,5.97,5.97c0,3.3-2.67,5.97-5.97,5.97H67.41v15.55 c0,3.3-2.67,5.97-5.97,5.97c-3.3,0-5.97-2.67-5.97-5.97V65.83H39.91c-3.3,0-5.97-2.67-5.97-5.97c0-3.3,2.67-5.97,5.97-5.97h15.55 V38.34L55.47,38.34z M100.16,10.24H22.72c-3.43,0-6.54,1.41-8.81,3.67c-2.26,2.26-3.67,5.38-3.67,8.81v74.29 c0,3.33,1.31,6.35,3.43,8.59l0.24,0.22c2.26,2.26,5.38,3.67,8.81,3.67h77.45c3.32,0,6.35-1.31,8.59-3.44l0.21-0.23 c2.26-2.26,3.67-5.38,3.67-8.81V22.71c0-3.42-1.41-6.54-3.67-8.81C106.71,11.65,103.59,10.24,100.16,10.24L100.16,10.24z'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
1215
- }
1216
-
1217
- .slick-group-totals {
1218
- color: var(--jsl-color-text-secondary);
1219
- background: var(--jsl-color-surface);
1220
- }
1221
-
1222
- .slick-group-select-checkbox {
1223
- width: 13px;
1224
- height: 13px;
1225
- margin: 3px 10px 0 0;
1226
- display: inline-block;
1227
- }
1228
-
1229
- .slick-cell.selected {
1230
- background-color: var(--jsl-color-surface-selected);
1231
- }
1232
-
1233
- .slick-cell.active {
1234
- border-color: var(--jsl-color-focus);
1235
- border-style: solid;
1236
- }
1237
-
1238
- .slick-sortable-placeholder {
1239
- background: var(--jsl-color-surface-selected) !important;
1240
- }
1241
-
1242
- .slick-row.odd {
1243
- background: var(--jsl-color-surface-subtle);
1244
- }
1245
-
1246
- .slick-row.ui-state-active {
1247
- background: var(--jsl-color-surface-selected);
1248
- }
1249
-
1250
- .slick-row.loading {
1251
- opacity: .5;
1252
- filter: alpha(opacity = 50);
1253
- }
1254
-
1255
- .slick-cell.invalid {
1256
- border-color: var(--jsl-color-danger);
1257
- animation-name: slickgrid-invalid-hilite;
1258
- animation-duration: .2s;
1259
- }
1260
-
1261
- @keyframes slickgrid-invalid-hilite {
1262
- from {
1263
- box-shadow: 0 0 6px var(--jsl-color-danger);
1264
- }
1265
-
1266
- to {
1267
- box-shadow: none;
1268
- }
1269
- }
1270
-
1271
- .new-row .slick-cell {
1272
- border-top: solid 1px var(--jsl-color-border);
1273
- background: var(--jsl-color-surface-selected);
1274
- }
1275
-
1276
- .slickgrid {
1277
- font: inherit;
1278
- color: var(--jsl-color-text);
1279
- background: var(--jsl-color-surface);
1280
- }
1281
-
1282
- .slick-row:not(.slick-group):not(.slick-group-totals) > .slick-cell:not(.active):not(.invalid):not(.flashing) {
1283
- border-right-color: #0000;
1284
- }
1285
-
1286
- .slickgrid .right {
1287
- text-align: right;
1288
- }
1289
-
1290
- .slickgrid .center {
1291
- text-align: center;
1292
- }
1293
-
1294
- .slickgrid .tabular-nums {
1295
- font-variant-numeric: tabular-nums;
1296
- }
1297
-
1298
- .slick-header-column .slick-column-name {
1299
- float: none;
1300
- text-overflow: ellipsis;
1301
- white-space: normal;
1302
- vertical-align: middle;
1303
- max-width: 100%;
1304
- max-height: 2.4em;
1305
- margin-bottom: 0;
1306
- line-height: 1.2;
1307
- display: inline-block;
1308
- overflow: hidden;
1309
- }
1310
-
1311
- .slick-header-sortable .slick-column-name {
1312
- max-width: calc(100% - 1.25rem);
1313
- }
1314
-
1315
- .slick-header-column .slick-sort-indicator, .slick-header-column .slick-sort-indicator-numbered {
1316
- float: none;
1317
- vertical-align: top;
1318
- height: var(--jsl-grid-header-height, 40px);
1319
- line-height: var(--jsl-grid-header-height, 40px);
1320
- color: var(--jsl-color-accent);
1321
- margin: 0 0 0 .375rem;
1322
- display: inline-block;
1323
- position: relative;
1324
- }
1325
-
1326
- .slick-header-column .slick-sort-indicator {
1327
- width: .65rem;
1328
- }
1329
-
1330
- .slick-header-column.right .slick-sort-indicator, .slick-header-column.right .slick-sort-indicator-numbered {
1331
- float: left;
1332
- margin-left: 0;
1333
- margin-right: .375rem;
1334
- }
1335
-
1336
- .slick-sort-indicator-asc:before, .slick-sort-indicator-desc:before {
1337
- content: "";
1338
- background: currentColor;
1339
- width: 8px;
1340
- height: 5px;
1341
- position: absolute;
1342
- top: 50%;
1343
- left: 0;
1344
- transform: translateY(-50%);
1345
- }
1346
-
1347
- .slick-sort-indicator-asc:before {
1348
- clip-path: polygon(50% 0, 100% 100%, 0 100%);
1349
- }
1350
-
1351
- .slick-sort-indicator-desc:before {
1352
- clip-path: polygon(0 0, 100% 0, 50% 100%);
1353
- }
1354
-
1355
- .slick-header-column .slick-sort-indicator-numbered {
1356
- width: auto;
1357
- min-width: .65rem;
1358
- font-size: .8em;
1359
- }
1360
-
1361
- .slick-header-column .slick-sort-indicator.slick-sort-indicator-numbered {
1362
- min-width: 1.5rem;
1363
- padding-left: .75rem;
1364
- }
1365
-
1366
- .slickgrid:has(.slick-header-column.frozen) > .slick-pane-left:after {
1367
- content: "";
1368
- background: var(--jsl-color-border);
1369
- pointer-events: none;
1370
- z-index: 20;
1371
- width: 1px;
1372
- position: absolute;
1373
- top: 0;
1374
- bottom: 0;
1375
- right: 0;
1376
- box-shadow: -2px 0 4px #00000014;
1377
- }
1378
-
1379
- .slick-header-menubutton {
1380
- cursor: pointer;
1381
- background-image: url("data:image/gif;base64,R0lGODlhDgAOAIABADtKYwAAACH5BAEAAAEALAAAAAAOAA4AAAISjI+py+0PHZgUsGobhTn6DxoFADs=");
1382
- background-position: 0;
1383
- background-repeat: no-repeat;
1384
- border-left: thin ridge silver;
1385
- width: 14px;
1386
- display: none;
1387
- position: absolute;
1388
- top: 0;
1389
- bottom: 0;
1390
- right: 0;
1391
- }
1392
-
1393
- .slick-header-menubutton.resize-offset {
1394
- right: .5rem;
1395
- }
1396
-
1397
- .slick-header-column:hover > .slick-header-menubutton, .slick-header-column-active .slick-header-menubutton {
1398
- display: inline-block;
1399
- }
1400
-
1401
- .slick-header-menu {
1402
- cursor: default;
1403
- margin: 0;
1404
- padding: 2px;
1405
- display: inline-block;
1406
- position: absolute;
1407
- }
1408
-
1409
- .slick-header-menuitem {
1410
- cursor: pointer;
1411
- margin: 0;
1412
- padding: 0;
1413
- list-style: none;
1414
- }
1415
-
1416
- .slick-header-menuicon {
1417
- vertical-align: middle;
1418
- background-position: center;
1419
- background-repeat: no-repeat;
1420
- width: 16px;
1421
- height: 16px;
1422
- margin-right: 4px;
1423
- display: inline-block;
1424
- }
1425
-
1426
- .slick-header-menucontent {
1427
- vertical-align: middle;
1428
- display: inline-block;
1429
- }
1430
-
1431
- .slick-header-menuitem-disabled {
1432
- color: silver;
1433
- }
1434
-
1435
- .slick-header-menuitem.slick-header-menuitem-divider {
1436
- cursor: default;
1437
- background-color: #cecece;
1438
- border: none;
1439
- height: 1px;
1440
- margin: 8px 2px;
1441
- padding: 0;
1442
- overflow: hidden;
1443
- }
1444
-
1445
- .slick-header-menuitem-divider.slick-header-menuitem:hover {
1446
- background-color: #cecece;
1447
- }
1448
-
1449
- .slick-header-menu {
1450
- z-index: 20;
1451
- background: #fff;
1452
- border: 1px solid #bebebe;
1453
- padding: 2px;
1454
- box-shadow: 2px 2px 2px silver;
1455
- }
1456
-
1457
- .slick-header-menuitem {
1458
- border-radius: 3px;
1459
- padding: 2px 4px;
1460
- }
1461
-
1462
- .slick-header-menuitem:hover {
1463
- color: #fff;
1464
- background: #3b99ff;
1465
- }
1466
-
1467
- .slick-header-menuitem-disabled {
1468
- background: inherit !important;
1469
- border-color: #0000 !important;
1470
- }
1471
-
1472
- .slick-column-name, .slick-sort-indicator {
1473
- float: left;
1474
- margin-bottom: 100px;
1475
- display: inline-block;
1476
- }
1477
-
1478
- .slick-header-button {
1479
- float: right;
1480
- vertical-align: top;
1481
- cursor: pointer;
1482
- background-position: center;
1483
- background-repeat: no-repeat;
1484
- width: 15px;
1485
- height: 15px;
1486
- margin: 1px 2rem 100px 1px;
1487
- display: inline-block;
1488
- }
1489
-
1490
- .slick-header-button-hidden {
1491
- width: 0;
1492
- transition: width .2s;
1493
- }
1494
-
1495
- .slick-header-column:hover > .slick-header-button {
1496
- width: 15px;
1497
- }
1498
-
1499
- .v-r-comp, .v-r-comp .v-r-child > * {
1500
- height: 100%;
1501
- }
1502
-
1503
- .cell-reorder {
1504
- cursor: move;
1505
- background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAMAAABhq6zVAAADAFBMVEUAAACWlpbY2NgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADmpIfcAAABAHRSTlP///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////8AU/cHJQAAABlJREFUCNdj+I8EGFA5jHAA5DDBAW2VIQEAmyRUB6U7kZIAAAAASUVORK5CYII=");
1506
- background-position: center;
1507
- background-repeat: no-repeat;
1508
- }
1509
-
1510
- .header-overlay {
1511
- background-color: #217346;
1512
- }
1513
-
1514
- .cell-overlay, .selection-cell-overlay {
1515
- z-index: 20;
1516
- background-color: #217346;
1517
- display: block;
1518
- position: absolute;
1519
- }
1520
-
1521
- .handle-overlay {
1522
- z-index: 20;
1523
- cursor: crosshair;
1524
- background-color: #217346;
1525
- border: 1px solid #fff;
1526
- width: 2px;
1527
- height: 2px;
1528
- padding: 3px;
1529
- position: absolute;
1530
- }
1531
-
1532
- .overlay-handle-decorator {
1533
- z-index: 20;
1534
- border: 2px solid #217346;
1535
- }
1536
-
1537
- .select-comp {
1538
- box-sizing: border-box;
1539
- vertical-align: middle;
1540
- width: 14rem;
1541
- min-width: 0;
1542
- max-width: 100%;
1543
- min-height: 2.5rem;
1544
- color: var(--jsl-color-text);
1545
- font: inherit;
1546
- font-size: .875rem;
1547
- display: inline-flex;
1548
- position: relative;
1549
- }
1550
-
1551
- .select-comp *, .sel-comp-dd * {
1552
- box-sizing: border-box;
1553
- }
1554
-
1555
- .select-comp .sel-expander {
1556
- appearance: none;
1557
- width: 100%;
1558
- min-width: 0;
1559
- min-height: inherit;
1560
- border: 1px solid var(--jsl-color-border);
1561
- background: var(--jsl-color-surface);
1562
- color: inherit;
1563
- font: inherit;
1564
- text-align: left;
1565
- cursor: pointer;
1566
- border-radius: .5rem;
1567
- align-items: center;
1568
- gap: .625rem;
1569
- padding: .5rem .75rem;
1570
- line-height: 1.4;
1571
- transition: border-color .15s;
1572
- display: flex;
1573
- }
1574
-
1575
- .select-comp:has(.clear-btn:not([hidden])) .sel-expander {
1576
- padding-right: 3.5rem;
1577
- }
1578
-
1579
- .select-comp .sel-expander:hover:not(:disabled) {
1580
- border-color: var(--jsl-color-text-muted);
1581
- }
1582
-
1583
- .select-comp.expanded .sel-expander {
1584
- border-color: var(--jsl-color-accent);
1585
- }
1586
-
1587
- .select-comp .sel-expander:focus-visible, .select-comp .clear-btn:focus-visible {
1588
- outline: 2px solid var(--jsl-color-focus);
1589
- outline-offset: 2px;
1590
- }
1591
-
1592
- .select-comp .sel-result {
1593
- text-overflow: ellipsis;
1594
- white-space: nowrap;
1595
- flex: 1;
1596
- min-width: 0;
1597
- overflow: hidden;
1598
- }
1599
-
1600
- .select-comp .sel-placeholder {
1601
- color: var(--jsl-color-text-muted);
1602
- }
1603
-
1604
- .select-comp .sel-result > .sel-dd-item {
1605
- text-overflow: ellipsis;
1606
- display: block;
1607
- overflow: hidden;
1608
- }
1609
-
1610
- .select-comp .sel-chevron {
1611
- border: solid var(--jsl-color-text-muted);
1612
- border-width: 0 1.5px 1.5px 0;
1613
- flex: 0 0 7px;
1614
- width: 7px;
1615
- height: 7px;
1616
- margin-left: auto;
1617
- transform: rotate(45deg) translateY(-2px);
1618
- }
1619
-
1620
- .select-comp.expanded .sel-chevron {
1621
- transform: rotate(225deg) translate(-2px, -1px);
1622
- }
1623
-
1624
- .select-comp:has(.clear-btn:not([hidden])) .sel-chevron {
1625
- position: absolute;
1626
- right: .875rem;
1627
- }
1628
-
1629
- .select-comp .clear-btn {
1630
- appearance: none;
1631
- width: 1.5rem;
1632
- height: 1.5rem;
1633
- font: inherit;
1634
- color: var(--jsl-color-text-muted);
1635
- cursor: pointer;
1636
- background: none;
1637
- border: 0;
1638
- border-radius: .25rem;
1639
- place-items: center;
1640
- padding: 0;
1641
- font-size: 1.125rem;
1642
- line-height: 1;
1643
- display: grid;
1644
- position: absolute;
1645
- top: 50%;
1646
- right: 1.875rem;
1647
- transform: translateY(-50%);
1648
- }
1649
-
1650
- .select-comp .clear-btn:hover:not(:disabled) {
1651
- background: var(--jsl-color-surface-hover);
1652
- color: var(--jsl-color-text);
1653
- }
1654
-
1655
- .select-comp .clear-btn[hidden] {
1656
- display: none;
1657
- }
1658
-
1659
- .select-comp:is(.disabled, :has( > .sel-expander:disabled)) .sel-expander {
1660
- background: var(--jsl-color-disabled-surface);
1661
- color: var(--jsl-color-disabled-text);
1662
- cursor: not-allowed;
1663
- }
1664
-
1665
- .select-comp:is(.disabled, :has( > .sel-expander:disabled)) .clear-btn {
1666
- color: var(--jsl-color-disabled-text);
1667
- cursor: not-allowed;
1668
- }
1669
-
1670
- .select-comp:is(.disabled, :has( > .sel-expander:disabled)) .sel-result, .select-comp:is(.disabled, :has( > .sel-expander:disabled)) .sel-chevron {
1671
- opacity: .65;
1672
- }
1673
-
1674
- .select-comp.multiple .sel-result:not(.sel-placeholder) {
1675
- white-space: normal;
1676
- flex-wrap: wrap;
1677
- gap: .25rem;
1678
- display: flex;
1679
- }
1680
-
1681
- .select-comp.multiple .sel-expander {
1682
- padding-top: .375rem;
1683
- padding-bottom: .375rem;
1684
- }
1685
-
1686
- .sel-chip {
1687
- background: var(--jsl-color-surface-selected);
1688
- min-width: 0;
1689
- max-width: 100%;
1690
- color: var(--jsl-color-text-secondary);
1691
- text-overflow: ellipsis;
1692
- white-space: nowrap;
1693
- border-radius: .25rem;
1694
- padding: .125rem .4375rem;
1695
- font-size: .75rem;
1696
- line-height: 1.5;
1697
- display: inline-block;
1698
- overflow: hidden;
1699
- }
1700
-
1701
- .sel-chip-count {
1702
- color: var(--jsl-color-text-muted);
1703
- background: var(--jsl-color-surface-hover);
1704
- }
1705
-
1706
- .sel-comp-dd {
1707
- z-index: 2200;
1708
- box-sizing: border-box;
1709
- border: 1px solid var(--jsl-color-border);
1710
- background: var(--jsl-color-surface);
1711
- color: var(--jsl-color-text);
1712
- font: inherit;
1713
- border-radius: .625rem;
1714
- padding: 4px;
1715
- font-size: .875rem;
1716
- position: absolute;
1717
- overflow: hidden;
1718
- box-shadow: 0 12px 32px #0000001f, 0 2px 6px #0000000f;
1719
- }
1720
-
1721
- .sel-dd-panel {
1722
- flex-direction: column;
1723
- height: 100%;
1724
- min-height: 0;
1725
- display: flex;
1726
- }
1727
-
1728
- .sel-search {
1729
- flex: 0 0 44px;
1730
- padding: 3px 4px 7px;
1731
- }
1732
-
1733
- .sel-search[hidden] {
1734
- display: none;
1735
- }
1736
-
1737
- .sel-search input {
1738
- appearance: none;
1739
- border: 1px solid var(--jsl-color-border-subtle);
1740
- background: var(--jsl-color-surface-subtle);
1741
- width: 100%;
1742
- height: 34px;
1743
- color: var(--jsl-color-text);
1744
- font: inherit;
1745
- background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%2371717a' stroke-width='1.5' stroke-linecap='round'%3E%3Ccircle cx='7' cy='7' r='4.5'/%3E%3Cpath d='m10.5 10.5 3 3'/%3E%3C/svg%3E");
1746
- background-position: .625rem;
1747
- background-repeat: no-repeat;
1748
- border-radius: .375rem;
1749
- padding: .375rem .625rem .375rem 2rem;
1750
- font-size: .8125rem;
1751
- line-height: 1.4;
1752
- }
1753
-
1754
- .sel-search input::placeholder {
1755
- color: var(--jsl-color-text-muted);
1756
- }
1757
-
1758
- .sel-search input:focus {
1759
- border-color: var(--jsl-color-focus);
1760
- outline: 0;
1761
- }
1762
-
1763
- .sel-listbox {
1764
- outline: none;
1765
- flex: 1;
1766
- min-height: 0;
1767
- position: relative;
1768
- }
1769
-
1770
- .sel-comp-dd .sel-dd-items {
1771
- overscroll-behavior: contain;
1772
- scrollbar-width: thin;
1773
- }
1774
-
1775
- .sel-comp-dd .sel-dd-item {
1776
- text-overflow: ellipsis;
1777
- white-space: nowrap;
1778
- cursor: pointer;
1779
- border-radius: .375rem;
1780
- align-items: center;
1781
- height: 100%;
1782
- padding: 0 2rem 0 .625rem;
1783
- font-size: .8125rem;
1784
- line-height: 1.4;
1785
- display: flex;
1786
- position: relative;
1787
- overflow: hidden;
1788
- }
1789
-
1790
- .sel-comp-dd .sel-dd-item:hover:not(.sel-dd-group) {
1791
- background: var(--jsl-color-surface-hover);
1792
- }
1793
-
1794
- .sel-comp-dd .sel-dd-item.selected {
1795
- background: var(--jsl-color-surface-selected);
1796
- }
1797
-
1798
- .sel-comp-dd .sel-dd-item.focused {
1799
- outline: 1px solid var(--jsl-color-focus);
1800
- outline-offset: -2px;
1801
- }
1802
-
1803
- .sel-comp-dd .sel-dd-item.selected:after {
1804
- content: "";
1805
- border: solid var(--jsl-color-text);
1806
- border-width: 0 1.5px 1.5px 0;
1807
- width: 5px;
1808
- height: 9px;
1809
- position: absolute;
1810
- right: .875rem;
1811
- transform: rotate(45deg) translateY(-2px);
1812
- }
1813
-
1814
- .sel-comp-dd .multiple .sel-dd-item:not(.sel-dd-group) {
1815
- padding-left: 2rem;
1816
- padding-right: .625rem;
1817
- }
1818
-
1819
- .sel-comp-dd .multiple .sel-dd-item:not(.sel-dd-group):before {
1820
- content: "";
1821
- border: 1px solid var(--jsl-color-border);
1822
- background: var(--jsl-color-surface);
1823
- border-radius: .25rem;
1824
- width: 14px;
1825
- height: 14px;
1826
- position: absolute;
1827
- left: .625rem;
1828
- }
1829
-
1830
- .sel-comp-dd .multiple .sel-dd-item.selected:before {
1831
- border-color: var(--jsl-color-accent);
1832
- background: var(--jsl-color-accent);
1833
- }
1834
-
1835
- .sel-comp-dd .multiple .sel-dd-item.selected:after {
1836
- border-color: var(--jsl-color-on-accent);
1837
- width: 4px;
1838
- height: 7px;
1839
- left: .875rem;
1840
- right: auto;
1841
- }
1842
-
1843
- .sel-comp-dd .sel-dd-group {
1844
- color: var(--jsl-color-text-muted);
1845
- cursor: default;
1846
- padding: 0 .625rem;
1847
- font-size: .6875rem;
1848
- font-weight: 600;
1849
- }
1850
-
1851
- .sel-empty {
1852
- color: var(--jsl-color-text-muted);
1853
- text-align: center;
1854
- padding: 1.25rem .625rem;
1855
- font-size: .8125rem;
1856
- }
1857
-
1858
- .sel-empty[hidden] {
1859
- display: none;
1860
- }
1861
-
1862
- .sel-dd-animate {
1863
- animation: .12s ease-out jsl-select-appear;
1864
- }
1865
-
1866
- @keyframes jsl-select-appear {
1867
- from {
1868
- opacity: 0;
1869
- }
1870
-
1871
- to {
1872
- opacity: 1;
1873
- }
1874
- }
1875
-
1876
- @media (prefers-reduced-motion: reduce) {
1877
- .sel-dd-animate {
1878
- animation: none;
1879
- }
1880
-
1881
- .select-comp .sel-expander {
1882
- transition: none;
1883
- }
1884
- }
1885
-
1886
- @media (forced-colors: active) {
1887
- .sel-comp-dd .sel-dd-item.selected {
1888
- outline-offset: -2px;
1889
- outline: 2px solid highlight;
1890
- }
1891
-
1892
- .sel-chip {
1893
- border: 1px solid buttontext;
1894
- }
1895
- }
1896
-
1897
- .autocomplete-suggestions {
1898
- z-index: 2200;
1899
- box-sizing: border-box;
1900
- border: 1px solid var(--jsl-color-border);
1901
- background: var(--jsl-color-surface);
1902
- max-height: min(16rem, 100dvh - 1rem);
1903
- color: var(--jsl-color-text);
1904
- font: inherit;
1905
- text-align: left;
1906
- border-radius: .625rem;
1907
- padding: 4px;
1908
- font-size: .8125rem;
1909
- display: none;
1910
- position: absolute;
1911
- overflow-y: auto;
1912
- box-shadow: 0 12px 32px #0000001f, 0 2px 6px #0000000f;
1913
- }
1914
-
1915
- .autocomplete-suggestion {
1916
- white-space: nowrap;
1917
- text-overflow: ellipsis;
1918
- cursor: pointer;
1919
- border-radius: .375rem;
1920
- padding: .5rem .625rem;
1921
- line-height: 1.4;
1922
- position: relative;
1923
- overflow: hidden;
1924
- }
1925
-
1926
- .autocomplete-suggestion b {
1927
- color: inherit;
1928
- font-weight: 600;
1929
- }
1930
-
1931
- .autocomplete-suggestion.selected, .autocomplete-suggestion:hover {
1932
- background: var(--jsl-color-surface-selected);
1933
- }
1934
-
1935
- @media (prefers-reduced-motion: reduce) {
1936
- .jsl-input, .jsl-date-input {
1937
- transition: none;
1938
- }
1939
- }
1940
-
1941
- .progress-comp {
1942
- background: var(--jsl-color-border-subtle);
1943
- border-radius: 999px;
1944
- height: .5rem;
1945
- position: relative;
1946
- overflow: hidden;
1947
- }
1948
-
1949
- .progress-comp.has-label {
1950
- height: 1.25rem;
1951
- }
1952
-
1953
- .progress-comp .bar {
1954
- background: var(--jsl-color-accent);
1955
- border-radius: inherit;
1956
- height: 100%;
1957
- }
1958
-
1959
- .progress-comp .progress-label {
1960
- color: var(--jsl-color-text);
1961
- text-shadow: 0 0 3px var(--jsl-color-surface);
1962
- place-items: center;
1963
- font: 600 .75rem / 1.25rem sans-serif;
1964
- display: grid;
1965
- position: absolute;
1966
- inset: 0;
1967
- }
1968
-
1969
- .jsl-input, .jsl-date-input {
1970
- box-sizing: border-box;
1971
- border: 1px solid var(--jsl-color-border);
1972
- background-color: var(--jsl-color-surface);
1973
- width: 14rem;
1974
- min-width: 0;
1975
- max-width: 100%;
1976
- height: 2.5rem;
1977
- color: var(--jsl-color-text);
1978
- font: inherit;
1979
- border-radius: .5rem;
1980
- padding: .5rem .75rem;
1981
- font-size: .875rem;
1982
- line-height: 1.4;
1983
- transition: border-color .15s;
1984
- }
1985
-
1986
- .jsl-input:hover:not(:disabled), .jsl-date-input:hover:not(:disabled) {
1987
- border-color: var(--jsl-color-text-muted);
1988
- }
1989
-
1990
- .jsl-input:focus, .jsl-date-input:focus {
1991
- outline: 2px solid var(--jsl-color-focus);
1992
- outline-offset: 2px;
1993
- border-color: var(--jsl-color-accent);
1994
- }
1995
-
1996
- .jsl-input::placeholder, .jsl-date-input::placeholder {
1997
- color: var(--jsl-color-text-muted);
1998
- opacity: 1;
1999
- }
2000
-
2001
- .jsl-input:disabled, .jsl-date-input:disabled {
2002
- cursor: not-allowed;
2003
- background-color: var(--jsl-color-disabled-surface);
2004
- color: var(--jsl-color-disabled-text);
2005
- }
2006
-
2007
- .jsl-input[aria-invalid="true"] {
2008
- border-color: var(--jsl-color-danger);
2009
- }
2010
-
2011
- textarea.jsl-input {
2012
- resize: vertical;
2013
- height: auto;
2014
- min-height: 6rem;
2015
- }
2016
-
2017
- .jsl-input[type="color"] {
2018
- cursor: pointer;
2019
- width: 4rem;
2020
- padding: .25rem;
2021
- }
2022
-
2023
- .jsl-input[type="number"], .jsl-input.jsl-number {
2024
- font-variant-numeric: tabular-nums;
2025
- }
2026
-
2027
- @media (prefers-reduced-motion: reduce) {
2028
- .jsl-input, .jsl-date-input {
2029
- transition: none;
2030
- }
2031
- }
2032
-
2033
- .jsl-date-input {
2034
- font-variant-numeric: tabular-nums;
2035
- width: 11rem;
2036
- }
2037
-
2038
- .date-comp {
2039
- background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' stroke='%2371717a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='4' width='13' height='12' rx='2'/%3E%3Cpath d='M6 2v4M12 2v4M3 8h12'/%3E%3C/svg%3E");
2040
- background-position: right .7rem center;
2041
- background-repeat: no-repeat;
2042
- padding-right: 2.4rem;
2043
- }
2044
-
2045
- .jsl-date-input:disabled {
2046
- opacity: .75;
2047
- }
2048
-
2049
- .jsl-date-input[aria-invalid="true"] {
2050
- border-style: dashed;
2051
- border-width: 2px;
2052
- }
2053
-
2054
- .time-comp {
2055
- text-align: center;
2056
- width: 6rem;
2057
- }
2058
-
2059
- .time-comp-seconds {
2060
- width: 7.5rem;
2061
- }
2062
-
2063
- .date-time-comp {
2064
- flex-wrap: wrap;
2065
- align-items: center;
2066
- gap: .5rem;
2067
- max-width: 100%;
2068
- display: inline-flex;
2069
- }
2070
-
2071
- .date-time-comp .date-comp {
2072
- flex: 10rem;
2073
- }
2074
-
2075
- .date-time-comp .time-comp {
2076
- flex: 0 0 6rem;
2077
- }
2078
-
2079
- .date-time-comp .time-comp-seconds {
2080
- flex-basis: 7.5rem;
2081
- }
2082
-
2083
- .expander-comp {
2084
- box-sizing: border-box;
2085
- border: 1px solid var(--jsl-color-border-subtle);
2086
- background: var(--jsl-color-surface);
2087
- max-width: 100%;
2088
- color: var(--jsl-color-text);
2089
- font: inherit;
2090
- border-radius: .625rem;
2091
- font-size: .875rem;
2092
- line-height: 1.5;
2093
- }
2094
-
2095
- .expander-comp > .header {
2096
- border-radius: inherit;
2097
- align-items: center;
2098
- gap: .5rem;
2099
- min-height: 3rem;
2100
- padding: .5rem .875rem .5rem .625rem;
2101
- display: flex;
2102
- }
2103
-
2104
- .expander-comp.toggle-on-header > .header {
2105
- cursor: pointer;
2106
- }
2107
-
2108
- .expander-comp.toggle-on-header:not(.disabled) > .header:hover {
2109
- background: var(--jsl-color-surface-hover);
2110
- }
2111
-
2112
- .expander-comp > .header > .toggler {
2113
- appearance: none;
2114
- min-width: 2rem;
2115
- min-height: 2rem;
2116
- color: var(--jsl-color-text-secondary);
2117
- font: inherit;
2118
- cursor: pointer;
2119
- background: none;
2120
- border: 0;
2121
- border-radius: .375rem;
2122
- flex: none;
2123
- place-items: center;
2124
- margin: 0;
2125
- padding: .25rem;
2126
- line-height: 1;
2127
- display: inline-grid;
2128
- }
2129
-
2130
- .expander-comp > .header > .toggler:hover:not(:disabled) {
2131
- background: var(--jsl-color-surface-selected);
2132
- }
2133
-
2134
- .expander-comp > .header > .toggler:focus-visible {
2135
- outline: 2px solid var(--jsl-color-focus);
2136
- outline-offset: 2px;
2137
- }
2138
-
2139
- .expander-comp > .header > .content {
2140
- overflow-wrap: anywhere;
2141
- flex: 1;
2142
- min-width: 0;
2143
- font-weight: 500;
2144
- }
2145
-
2146
- .expander-icon, .expand-collapse-icon {
2147
- place-items: center;
2148
- display: inline-grid;
2149
- }
2150
-
2151
- .expand-collapse-icon {
2152
- width: 1rem;
2153
- height: 1rem;
2154
- }
2155
-
2156
- .expander-chevron {
2157
- border: 1.5px solid;
2158
- border-width: 0 1.5px 1.5px 0;
2159
- width: 37.5%;
2160
- height: 37.5%;
2161
- display: block;
2162
- transform: rotate(-45deg);
2163
- }
2164
-
2165
- .expand-collapse-icon.is-expanded .expander-chevron {
2166
- transform: rotate(45deg) translate(-1px, -1px);
2167
- }
2168
-
2169
- .expander-comp > .body {
2170
- border-top: 1px solid var(--jsl-color-border-subtle);
2171
- overflow-wrap: anywhere;
2172
- padding: 1rem 1.125rem;
2173
- }
2174
-
2175
- .expander-comp > .body[hidden] {
2176
- display: none;
2177
- }
2178
-
2179
- .expander-comp.expanded > .body {
2180
- animation: .14s ease-out jsl-expander-appear;
2181
- }
2182
-
2183
- .expander-comp.disabled > .header {
2184
- color: var(--jsl-color-disabled-text);
2185
- cursor: default;
2186
- background: var(--jsl-color-disabled-surface);
2187
- }
2188
-
2189
- .expander-comp > .header > .toggler:disabled {
2190
- color: var(--jsl-color-disabled-text);
2191
- cursor: not-allowed;
2192
- }
2193
-
2194
- @keyframes jsl-expander-appear {
2195
- from {
2196
- opacity: 0;
2197
- }
2198
-
2199
- to {
2200
- opacity: 1;
2201
- }
2202
- }
2203
-
2204
- @media (prefers-reduced-motion: reduce) {
2205
- .expander-comp.expanded > .body {
2206
- animation: none;
2207
- }
2208
- }
2209
-
2210
- .jsl-loading {
2211
- max-width: 100%;
2212
- color: var(--jsl-color-text-secondary);
2213
- font: inherit;
2214
- vertical-align: middle;
2215
- justify-content: center;
2216
- align-items: center;
2217
- gap: .625rem;
2218
- display: inline-flex;
2219
- }
2220
-
2221
- .lds-dual-ring {
2222
- width: var(--jsl-loading-size, 1em);
2223
- height: var(--jsl-loading-size, 1em);
2224
- flex-shrink: 0;
2225
- max-width: 100%;
2226
- display: inline-block;
2227
- position: relative;
2228
- }
2229
-
2230
- .lds-dual-ring:after {
2231
- content: "";
2232
- box-sizing: border-box;
2233
- border: max(2px, calc(var(--jsl-loading-size, 1em) * .08)) solid var(--jsl-color-border-subtle);
2234
- border-top-color: var(--jsl-loading-color, var(--jsl-color-accent));
2235
- border-right-color: var(--jsl-loading-color, var(--jsl-color-accent));
2236
- border-radius: 50%;
2237
- animation: .85s linear infinite jsl-loading-spin;
2238
- position: absolute;
2239
- inset: 0;
2240
- }
2241
-
2242
- .jsl-loading-label {
2243
- font-size: .8125rem;
2244
- line-height: 1.5;
2245
- }
2246
-
2247
- .jsl-loading-label-hidden {
2248
- clip-path: inset(50%);
2249
- white-space: nowrap;
2250
- border: 0;
2251
- width: 1px;
2252
- height: 1px;
2253
- margin: -1px;
2254
- padding: 0;
2255
- position: absolute;
2256
- overflow: hidden;
2257
- }
2258
-
2259
- @keyframes jsl-loading-spin {
2260
- to {
2261
- transform: rotate(360deg);
2262
- }
2263
- }
2264
-
2265
- @media (prefers-reduced-motion: reduce) {
2266
- .lds-dual-ring:after {
2267
- animation: none;
2268
- }
2269
- }
2270
-
2271
- .form-field {
2272
- min-width: 0;
2273
- max-width: 100%;
2274
- color: var(--jsl-color-text);
2275
- font: inherit;
2276
- flex-direction: column;
2277
- gap: .375rem;
2278
- margin: 0 0 1rem;
2279
- font-size: .875rem;
2280
- display: flex;
2281
- position: relative;
2282
- }
2283
-
2284
- .form-field__label {
2285
- color: var(--jsl-color-text-secondary);
2286
- font-size: .75rem;
2287
- font-weight: 500;
2288
- line-height: 1.5;
2289
- display: block;
2290
- }
2291
-
2292
- .form-field__required {
2293
- color: var(--jsl-color-text-muted);
2294
- }
2295
-
2296
- .form-field__required[hidden] {
2297
- display: none;
2298
- }
2299
-
2300
- .form-field__control {
2301
- border: 0;
2302
- min-width: 0;
2303
- margin: 0;
2304
- padding: 0;
2305
- display: block;
2306
- }
2307
-
2308
- .form-field__control > .jsl-input, .form-field__control > .jsl-date-input, .form-field__control > .select-comp, .form-field__control > .date-time-comp {
2309
- width: 100%;
2310
- }
2311
-
2312
- .form-field__description, .form-field__error {
2313
- color: var(--jsl-color-text-muted);
2314
- font-size: .75rem;
2315
- line-height: 1.5;
2316
- }
2317
-
2318
- .form-field__error {
2319
- color: var(--jsl-color-danger);
2320
- }
2321
-
2322
- .form-field__description[hidden], .form-field__error[hidden] {
2323
- display: none;
2324
- }
2325
-
2326
- .form-field--invalid > .form-field__label {
2327
- color: var(--jsl-color-danger);
2328
- }
2329
-
2330
- .form-field--invalid > .form-field__control .sel-expander {
2331
- border-color: var(--jsl-color-danger);
2332
- }
2333
-
2334
- .form-field--floating {
2335
- padding-top: .5rem;
2336
- }
2337
-
2338
- .form-field--floating > .form-field__label {
2339
- z-index: 1;
2340
- background: var(--jsl-color-surface);
2341
- max-width: calc(100% - 1.25rem);
2342
- padding: 0 .25rem;
2343
- position: absolute;
2344
- top: 0;
2345
- left: .625rem;
2346
- }
2347
-
2348
- .form-field:has(.form-field__control:disabled) > .form-field__label {
2349
- color: var(--jsl-color-disabled-text);
2350
- }
2351
-
2352
- .treeview-comp {
2353
- color: var(--jsl-color-text);
2354
- font: inherit;
2355
- font-size: .875rem;
2356
- line-height: 1.5;
2357
- }
2358
-
2359
- .treeview-comp .tv-ul {
2360
- margin: 0;
2361
- padding: 0;
2362
- list-style: none;
2363
- }
2364
-
2365
- .treeview-comp .tv-ul .tv-ul {
2366
- border-left: 1px solid var(--jsl-color-border-subtle);
2367
- margin-left: 1rem;
2368
- padding-left: .5rem;
2369
- }
2370
-
2371
- .treeview-comp [hidden] {
2372
- display: none;
2373
- }
2374
-
2375
- .tv-row {
2376
- cursor: pointer;
2377
- overflow-wrap: anywhere;
2378
- border-radius: .375rem;
2379
- align-items: center;
2380
- gap: .625rem;
2381
- padding: .375rem .625rem;
2382
- display: flex;
2383
- }
2384
-
2385
- .tv-row:hover {
2386
- background: var(--jsl-color-surface-hover);
2387
- }
2388
-
2389
- .tv-row.is-selected {
2390
- background: var(--jsl-color-surface-selected);
2391
- }
2392
-
2393
- .tv-row:focus-visible {
2394
- outline: 2px solid var(--jsl-color-focus);
2395
- outline-offset: -2px;
2396
- }
2397
-
2398
- .tv-chevron {
2399
- border-right: 1.5px solid var(--jsl-color-text-muted);
2400
- border-bottom: 1.5px solid var(--jsl-color-text-muted);
2401
- flex: 0 0 .375rem;
2402
- width: .375rem;
2403
- height: .375rem;
2404
- margin-right: .25rem;
2405
- transform: rotate(-45deg);
2406
- }
2407
-
2408
- .tv-row[aria-expanded="true"] > .tv-chevron {
2409
- transform: translateY(-.125rem) rotate(45deg);
2410
- }
2411
-
2412
- .tv-leaf {
2413
- border-color: #0000;
2414
- }
2415
-
2416
- .stabcomponent {
2417
- min-width: 0;
2418
- max-width: 100%;
2419
- color: var(--jsl-color-text);
2420
- }
2421
-
2422
- .stabcomponent > .tab-header-row {
2423
- overscroll-behavior-inline: contain;
2424
- scrollbar-width: thin;
2425
- border-bottom: 1px solid var(--jsl-tabs-border, var(--jsl-color-border-subtle));
2426
- align-items: stretch;
2427
- gap: .25rem;
2428
- min-width: 0;
2429
- display: flex;
2430
- overflow-x: auto;
2431
- }
2432
-
2433
- .stabcomponent > .tab-header-row > .tab-item {
2434
- color: var(--jsl-tabs-text, var(--jsl-color-text-secondary));
2435
- background: none;
2436
- border: 0;
2437
- border-bottom: 2px solid #0000;
2438
- border-radius: .375rem .375rem 0 0;
2439
- flex: none;
2440
- align-items: center;
2441
- gap: .125rem;
2442
- margin: 0;
2443
- padding: 0;
2444
- display: flex;
2445
- position: relative;
2446
- }
2447
-
2448
- .stabcomponent > .tab-header-row > .tab-item:hover {
2449
- background: var(--jsl-tabs-hover-surface, var(--jsl-color-surface-hover));
2450
- color: var(--jsl-color-text);
2451
- }
2452
-
2453
- .stabcomponent > .tab-header-row > .tab-item.active {
2454
- border-bottom-color: var(--jsl-tabs-accent, var(--jsl-color-accent));
2455
- color: var(--jsl-tabs-active-text, var(--jsl-color-text));
2456
- }
2457
-
2458
- .stabcomponent > .tab-header-row > .tab-item.disabled {
2459
- color: var(--jsl-color-disabled-text);
2460
- cursor: not-allowed;
2461
- background: none;
2462
- border-bottom-color: #0000;
2463
- }
2464
-
2465
- .stabcomponent .tab-trigger {
2466
- box-sizing: border-box;
2467
- min-width: 0;
2468
- min-height: 2.5rem;
2469
- color: inherit;
2470
- font: inherit;
2471
- text-align: start;
2472
- cursor: pointer;
2473
- background: none;
2474
- border: 0;
2475
- border-radius: .375rem;
2476
- justify-content: center;
2477
- align-items: center;
2478
- gap: .5rem;
2479
- margin: 0;
2480
- padding: .625rem .875rem;
2481
- font-size: .875rem;
2482
- font-weight: 500;
2483
- line-height: 1.5;
2484
- text-decoration: none;
2485
- display: inline-flex;
2486
- }
2487
-
2488
- .stabcomponent .tab-trigger:disabled {
2489
- cursor: not-allowed;
2490
- }
2491
-
2492
- .stabcomponent .tab-trigger:focus-visible, .stabcomponent > .tab-header-row > .tab-item > .close-button:focus-visible, .stabcomponent > .tab-header-row:focus-visible {
2493
- outline: 2px solid var(--jsl-color-focus);
2494
- outline-offset: -3px;
2495
- }
2496
-
2497
- .stabcomponent .tab-label {
2498
- white-space: nowrap;
2499
- align-items: center;
2500
- gap: .5rem;
2501
- display: inline-flex;
270
+ .js-touch .slick-header-column.resizable > .rs-r {
271
+ background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAYCAYAAACbU/80AAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsIAAA7CARUoSoAAAAMNSURBVEhLxVY7i1NBGM3NwzyMINiIjSKoC9tIBEG02FgkIeSxpJBlS7sV1s5fIRZqYWFhtYssEggJ5IEaFxERYdXWam1EkQVh82Lz8pzJl3jvzb1JjK8DA/lOZuacO/PNN+Po9/tT29LSktuKt2vov4B2xeo/c3M6piASiawHg8G9eDweEmoi2A/936G9wNg1oW2h0YUdKB4IBO45nU5Ht9s9ACLFYnFb/h4DxT0ez2uXy3WIca/XczQajZuVSuW+6mABWwPRaPSa3+9/DHFNKEe73a7XarWj1Wq1I5QByWQyBwMpCRVoAubL4K9ns9nPQo9guQVW4pwIK7BuJ05AZK3T6exIqMDVAx8Fn89kMieEHmHMQCwWuwrxTbM4l7JcLj8SyhL8QrfbncRKbXGMHuBDMLFtNmHYAor7fL4KxF1CKWDCcj6fj0k4EyR/7uo/hICJXZi5PNyO0Qowgbxeb8ksjgEfuH8SzgwmXrPZXMFKGJIM4qeQE+/T6fRJxmoFwuHwcRybjxA6onoJzG7ngeQTt9TwYcin3Xq9fkZLJBLnEL+C02MQG/wLaJr2HYMWf0d8CJyON5jrooQK/HC0r1oqlarh3B4W/p/D+T/Fiaml+G9jZIB7guwctT8NzNnTz48E5/Het80BZOnbQqFgSJx5wMIDsWdI8AWhFCiOsn6WK7AIR3sD+icwIIQjlJFwLoh43iyOE9eFgWWU9S/OXC73CdwFmPg2+HsAnluc3yc8x0L9MiBymx8ioQLFW61WpFQqPWescoAmsA3nWXgYDwETGi8lllWhZgbfAphzVUIFVkVUx9WhOGG4C2TJXsL1aaEUMJCJs4lKeWuWwmRzm1J8BRfallAKY+8B3b6NvYDA74BPTjKBCy2OC61gEudtegP3wwOhRhirA5ycIrwBOVAPmgL/UEJLYJU2LMT5KhoTJywLEU3w+uVAvQn8ZvbekdASWKVlbNeBhNy68qQnmaWBITiQJiBK4Y4+e+3ANyP6XkLbR3s69SqXW2li4xN71mf2sKG/z4o3tr7jB/mDdb4DhXtsAAAAAElFTkSuQmCC") 100% / .5em .3em no-repeat;
272
+ width: 1.2rem;
2502
273
  }
2503
274
 
2504
- .stabcomponent > .tab-header-row > .tab-item > .close-button {
2505
- box-sizing: border-box;
2506
- width: 1.5rem;
2507
- height: 1.5rem;
2508
- color: var(--jsl-color-text-muted);
2509
- cursor: pointer;
2510
- background: none;
2511
- border: 0;
2512
- border-radius: .25rem;
2513
- flex: none;
2514
- justify-content: center;
2515
- align-items: center;
2516
- margin: 0 .5rem 0 -.375rem;
2517
- padding: 0;
2518
- display: inline-flex;
2519
- position: relative;
275
+ .js-touch .slick-header-menubutton.resize-offset {
276
+ width: 1.2rem;
277
+ right: 1.2rem;
2520
278
  }
2521
279
 
2522
- .stabcomponent > .tab-header-row > .tab-item > .close-button:before, .stabcomponent > .tab-header-row > .tab-item > .close-button:after {
2523
- content: "";
2524
- background: currentColor;
2525
- border-radius: 1px;
2526
- width: .625rem;
2527
- height: 1.5px;
2528
- position: absolute;
2529
- transform: rotate(45deg);
280
+ .slick-header-columns {
281
+ border-bottom: 2px solid var(--jsl-color-border-subtle);
282
+ background: var(--jsl-color-surface-subtle);
2530
283
  }
2531
284
 
2532
- .stabcomponent > .tab-header-row > .tab-item > .close-button:after {
2533
- transform: rotate(-45deg);
285
+ .slick-header-column {
286
+ border-right: 1px solid var(--jsl-color-border-subtle);
287
+ text-align: inherit;
288
+ font-weight: 600;
2534
289
  }
2535
290
 
2536
- .stabcomponent > .tab-header-row > .tab-item > .close-button:hover {
2537
- background: var(--jsl-color-surface-selected);
291
+ .slick-header-column:hover, .slick-header-column-active {
292
+ background: var(--jsl-color-surface-hover);
2538
293
  color: var(--jsl-color-text);
2539
294
  }
2540
295
 
2541
- .stabcomponent > .tab-header-row > .tab-item > .close-button:disabled {
2542
- color: var(--jsl-color-disabled-text);
2543
- cursor: not-allowed;
2544
- background: none;
2545
- }
2546
-
2547
- .stabcomponent > .tab-panels {
2548
- background: var(--jsl-tabs-surface, var(--jsl-color-surface));
2549
- min-width: 0;
2550
- }
2551
-
2552
- .stabcomponent > .tab-panels > .tab-content {
2553
- box-sizing: border-box;
2554
- overflow-wrap: anywhere;
2555
- overscroll-behavior: contain;
2556
- min-width: 0;
2557
- padding: 1rem;
2558
- line-height: 1.6;
2559
- overflow: auto;
2560
- }
2561
-
2562
- .stabcomponent > .tab-panels > .tab-content:focus-visible {
2563
- outline: 2px solid var(--jsl-color-focus);
2564
- outline-offset: -2px;
296
+ .slick-header-column > .slick-header-menubutton:hover {
297
+ background-color: var(--jsl-color-surface-selected);
2565
298
  }
2566
299
 
2567
- .stabcomponent > .tab-panels > .tab-content.tab-hidden, .stabcomponent > .tab-panels > .tab-content[hidden] {
2568
- display: none;
300
+ .slick-headerrow {
301
+ background: var(--jsl-color-surface-subtle);
2569
302
  }
2570
303
 
2571
- .jsl-checkbox {
2572
- max-width: 100%;
2573
- color: var(--jsl-color-text);
2574
- font: inherit;
2575
- vertical-align: middle;
2576
- align-items: flex-start;
2577
- gap: .625rem;
2578
- font-size: .875rem;
2579
- line-height: 1.5;
2580
- display: inline-flex;
304
+ .slick-headerrow-column {
305
+ background: var(--jsl-color-surface-subtle);
306
+ border-bottom: 0;
307
+ height: 100%;
2581
308
  }
2582
309
 
2583
- .checkbox-comp {
2584
- appearance: none;
2585
- box-sizing: border-box;
2586
- border: 1px solid var(--jsl-color-border);
310
+ .slick-row {
2587
311
  background: var(--jsl-color-surface);
2588
- width: 1.125rem;
2589
- height: 1.125rem;
2590
- color: var(--jsl-color-on-accent);
2591
- font: inherit;
2592
- cursor: pointer;
2593
- border-radius: .25rem;
2594
- flex: 0 0 1.125rem;
2595
- place-content: center;
2596
- margin: calc(.75em - .5625rem) 0 0;
2597
- transition: background-color .12s, border-color .12s;
2598
- display: inline-grid;
2599
- position: relative;
2600
- }
2601
-
2602
- .checkbox-comp:after {
2603
- content: "";
2604
- opacity: 0;
2605
- border: 1.5px solid;
2606
- border-width: 0 1.5px 1.5px 0;
2607
- width: 4px;
2608
- height: 8px;
2609
- margin-top: -2px;
2610
- transform: rotate(45deg);
2611
- }
2612
-
2613
- .checkbox-comp:checked, .checkbox-comp:indeterminate {
2614
- border-color: var(--jsl-color-accent);
2615
- background: var(--jsl-color-accent);
2616
- }
2617
-
2618
- .checkbox-comp:checked:after, .checkbox-comp:indeterminate:after {
2619
- opacity: 1;
2620
- }
2621
-
2622
- .checkbox-comp:indeterminate:after {
2623
- border-width: 0 0 2px;
2624
- width: 8px;
2625
- height: 0;
2626
- margin-top: 0;
2627
- transform: none;
2628
- }
2629
-
2630
- .checkbox-comp:focus-visible {
2631
- outline: 2px solid var(--jsl-color-focus);
2632
- outline-offset: 3px;
2633
- }
2634
-
2635
- .jsl-checkbox:has(.checkbox-comp:not(:disabled)):hover .checkbox-comp {
2636
- border-color: var(--jsl-color-text-muted);
2637
- }
2638
-
2639
- .jsl-checkbox:has(.checkbox-comp:checked:not(:disabled)):hover .checkbox-comp, .jsl-checkbox:has(.checkbox-comp:indeterminate:not(:disabled)):hover .checkbox-comp {
2640
- border-color: var(--jsl-color-accent-hover);
2641
- background: var(--jsl-color-accent-hover);
2642
- }
2643
-
2644
- .checkbox-copy {
2645
- min-width: 0;
2646
- }
2647
-
2648
- .checkbox-label {
2649
- cursor: pointer;
2650
- overflow-wrap: anywhere;
2651
- display: block;
2652
- }
2653
-
2654
- .checkbox-description {
2655
- color: var(--jsl-color-text-muted);
2656
- margin-top: .1875rem;
2657
- font-size: .75rem;
2658
- line-height: 1.5;
2659
- display: block;
2660
- }
2661
-
2662
- .checkbox-description[hidden] {
2663
- display: none;
2664
- }
2665
-
2666
- .checkbox-comp:disabled {
2667
- background: var(--jsl-color-disabled-surface);
2668
- border-color: var(--jsl-color-border-subtle);
2669
- cursor: not-allowed;
2670
- }
2671
-
2672
- .checkbox-comp:disabled:checked, .checkbox-comp:disabled:indeterminate {
2673
- background: var(--jsl-color-disabled-text);
2674
- border-color: var(--jsl-color-disabled-text);
2675
- color: var(--jsl-color-disabled-surface);
2676
- opacity: .65;
2677
- }
2678
-
2679
- .jsl-checkbox.disabled .checkbox-label {
2680
- color: var(--jsl-color-disabled-text);
2681
- cursor: not-allowed;
2682
- }
2683
-
2684
- @media (prefers-reduced-motion: reduce) {
2685
- .checkbox-comp {
2686
- transition: none;
2687
- }
2688
- }
2689
-
2690
- @media (forced-colors: active) {
2691
- .checkbox-comp {
2692
- appearance: auto;
2693
- }
2694
-
2695
- .checkbox-comp:after {
2696
- display: none;
2697
- }
2698
- }
2699
-
2700
- .stackpanel-comp {
2701
- box-sizing: border-box;
2702
- min-width: 0;
2703
- min-height: 0;
312
+ line-height: inherit;
313
+ border: 0;
314
+ align-items: center;
2704
315
  display: flex;
2705
- }
2706
-
2707
- .stackpanel-comp.hstackpanel {
2708
- flex-direction: row;
2709
- width: 100%;
2710
- }
2711
-
2712
- .stackpanel-comp.vstackpanel {
2713
- flex-direction: column;
2714
- }
2715
-
2716
- .stackpanel-comp.wrap {
2717
- flex-wrap: wrap;
2718
- }
2719
-
2720
- .stackpanel-comp > div:not(.split-comp) {
2721
- box-sizing: border-box;
2722
- min-width: 0;
2723
- min-height: 0;
2724
- }
2725
-
2726
- @media (width <= 70em) {
2727
- .stackpanel-comp.hstackpanel.responsive {
2728
- flex-direction: column;
2729
- }
2730
-
2731
- .stackpanel-comp.hstackpanel.responsive > div:not(.split-comp) {
2732
- flex: none !important;
2733
- width: auto !important;
2734
- }
2735
-
2736
- .stackpanel-comp.hstackpanel.responsive > .split-comp {
2737
- display: none;
2738
- }
2739
- }
2740
-
2741
- .stackpanel-comp > .split-comp {
2742
- background: var(--jsl-color-surface-subtle);
2743
- touch-action: none;
2744
- -webkit-user-select: none;
2745
- user-select: none;
2746
- outline-offset: -2px;
2747
- flex: 0 0 12px;
2748
- align-self: stretch;
2749
- position: relative;
2750
- }
2751
-
2752
- .split-comp:before {
2753
- content: "";
2754
- background: var(--jsl-color-border);
2755
- border-radius: 999px;
2756
316
  position: absolute;
2757
317
  }
2758
318
 
2759
- .hstackpanel > .split-comp {
2760
- cursor: col-resize;
2761
- }
2762
-
2763
- .hstackpanel > .split-comp:before {
2764
- width: 3px;
2765
- height: 32px;
2766
- max-height: 80%;
2767
- top: 50%;
2768
- left: 50%;
2769
- transform: translate(-50%, -50%);
2770
- }
2771
-
2772
- .vstackpanel > .split-comp {
2773
- cursor: row-resize;
2774
- }
2775
-
2776
- .vstackpanel > .split-comp:before {
2777
- width: 32px;
2778
- max-width: 80%;
2779
- height: 3px;
2780
- top: 50%;
2781
- left: 50%;
2782
- transform: translate(-50%, -50%);
2783
- }
2784
-
2785
- .split-comp:hover:before, .split-comp:focus-visible:before {
2786
- background: var(--jsl-color-accent);
2787
- }
2788
-
2789
- .split-comp:focus-visible {
2790
- outline: 2px solid var(--jsl-color-focus);
2791
- }
2792
-
2793
- .date-range-comp {
2794
- width: 25rem;
2795
- max-width: 100%;
2796
- color: var(--jsl-color-text);
2797
- display: inline-block;
2798
- }
2799
-
2800
- .date-range-fields {
2801
- grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
2802
- align-items: end;
2803
- gap: .625rem;
2804
- display: grid;
2805
- }
2806
-
2807
- .date-range-field {
2808
- min-width: 0;
2809
- }
2810
-
2811
- .date-range-field label {
2812
- color: var(--jsl-color-text-secondary);
2813
- font: inherit;
2814
- margin-bottom: .375rem;
2815
- font-size: .75rem;
2816
- font-weight: 500;
2817
- display: block;
2818
- }
2819
-
2820
- .date-range-field input {
2821
- width: 100%;
2822
- }
2823
-
2824
- .date-range-separator {
2825
- color: var(--jsl-color-text-muted);
2826
- line-height: 2.5rem;
319
+ .slick-row.selected {
320
+ z-index: 10;
321
+ background: var(--jsl-color-surface-selected);
2827
322
  }
2828
323
 
2829
- .date-range-track {
2830
- padding: 1.5rem .625rem .875rem;
324
+ .slick-cell {
325
+ align-content: center;
326
+ padding-left: 4px;
327
+ padding-right: 4px;
2831
328
  }
2832
329
 
2833
- .date-range-limits {
2834
- color: var(--jsl-color-text-muted);
2835
- font-variant-numeric: tabular-nums;
2836
- justify-content: space-between;
2837
- gap: .5rem;
2838
- font-size: .6875rem;
330
+ .slick-cell.editable .select-comp {
331
+ max-width: none;
332
+ height: 100%;
333
+ min-height: 0;
2839
334
  display: flex;
2840
335
  }
2841
336
 
2842
- @media (width <= 380px) {
2843
- .date-range-fields {
2844
- gap: .375rem;
2845
- }
2846
-
2847
- .date-range-field input {
2848
- background-position: right .3rem center;
2849
- background-size: 15px;
2850
- padding-left: .5rem;
2851
- padding-right: 1.75rem;
2852
- font-size: .75rem;
2853
- }
2854
- }
2855
-
2856
- .noUi-target, .noUi-target * {
2857
- -webkit-touch-callout: none;
2858
- -webkit-tap-highlight-color: #0000;
2859
- -webkit-user-select: none;
2860
- user-select: none;
2861
- -ms-touch-action: none;
2862
- touch-action: none;
2863
- box-sizing: border-box;
2864
- }
2865
-
2866
- .noUi-target {
2867
- position: relative;
2868
- }
2869
-
2870
- .noUi-base, .noUi-connects {
2871
- z-index: 1;
2872
- width: 100%;
337
+ .slick-cell.editable .select-comp > .sel-expander {
338
+ border-radius: .25rem;
2873
339
  height: 100%;
2874
- position: relative;
2875
- }
2876
-
2877
- .noUi-connects {
2878
- z-index: 0;
2879
- overflow: hidden;
2880
- }
2881
-
2882
- .noUi-connect, .noUi-origin {
2883
- will-change: transform;
2884
- z-index: 1;
2885
- transform-origin: 0 0;
2886
- -webkit-transform-style: preserve-3d;
2887
- transform-style: flat;
2888
- position: absolute;
2889
- top: 0;
2890
- right: 0;
340
+ min-height: 0;
341
+ padding: 0 .5rem;
2891
342
  }
2892
343
 
2893
- .noUi-connect {
2894
- width: 100%;
2895
- height: 100%;
344
+ .slick-cell.editable .select-comp.multiple > .sel-expander {
345
+ padding-top: 0;
346
+ padding-bottom: 0;
2896
347
  }
2897
348
 
2898
- .noUi-origin {
2899
- width: 10%;
2900
- height: 10%;
349
+ .slick-cell.editable .select-comp .sel-chip {
350
+ padding: .0625rem .375rem;
351
+ font-size: .6875rem;
2901
352
  }
2902
353
 
2903
- .noUi-txt-dir-rtl.noUi-horizontal .noUi-origin {
2904
- left: 0;
2905
- right: auto;
354
+ .slick-group {
355
+ border-bottom: 2px solid var(--jsl-color-border-subtle);
2906
356
  }
2907
357
 
2908
- .noUi-vertical .noUi-origin {
2909
- width: 0;
358
+ .slick-group .slick-cell {
359
+ background: var(--jsl-color-surface-selected);
360
+ align-items: center;
361
+ display: flex;
2910
362
  }
2911
363
 
2912
- .noUi-horizontal .noUi-origin {
2913
- height: 0;
364
+ .slick-group-toggle {
365
+ vertical-align: middle;
366
+ flex-shrink: 0;
367
+ width: 20px;
368
+ height: 20px;
369
+ margin-right: 5px;
2914
370
  }
2915
371
 
2916
- .noUi-handle {
2917
- backface-visibility: hidden;
2918
- position: absolute;
372
+ .slick-group-toggle.expanded {
373
+ background-color: currentColor;
374
+ mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 122.88 119.8'%3E%3Cpath d='M23.59,0h75.7a23.63,23.63,0,0,1,23.59,23.59V96.21A23.64,23.64,0,0,1,99.29,119.8H23.59a23.53,23.53,0,0,1-16.67-6.93l-.38-.42A23.49,23.49,0,0,1,0,96.21V23.59A23.63,23.63,0,0,1,23.59,0Zm59.7,53.51a6.39,6.39,0,1,1,0,12.77H39.59a6.39,6.39,0,1,1,0-12.77Zm16-40.74H23.59A10.86,10.86,0,0,0,12.77,23.59V96.21a10.77,10.77,0,0,0,2.9,7.37l.28.26A10.76,10.76,0,0,0,23.59,107h75.7a10.87,10.87,0,0,0,10.82-10.82V23.59A10.86,10.86,0,0,0,99.29,12.77Z'/%3E%3C/svg%3E") center / contain no-repeat;
2919
375
  }
2920
376
 
2921
- .noUi-touch-area {
2922
- width: 100%;
2923
- height: 100%;
377
+ .slick-group-toggle.collapsed {
378
+ background-color: currentColor;
379
+ mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' viewBox='0 0 122.88 119.72' style='enable-background:new 0 0 122.88 119.72' xml:space='preserve'%3E%3Cg%3E%3Cpath d='M22.72,0h77.45c6.25,0,11.93,2.56,16.05,6.67c4.11,4.11,6.67,9.79,6.67,16.05v74.29c0,6.25-2.56,11.93-6.67,16.05 l-0.32,0.29c-4.09,3.94-9.64,6.38-15.73,6.38H22.72c-6.25,0-11.93-2.56-16.05-6.67l-0.3-0.32C2.43,108.64,0,103.09,0,97.01V22.71 c0-6.25,2.55-11.93,6.67-16.05C10.78,2.55,16.46,0,22.72,0L22.72,0z M55.47,38.34c0-3.3,2.67-5.97,5.97-5.97 c3.3,0,5.97,2.67,5.97,5.97v15.55h15.55c3.3,0,5.97,2.67,5.97,5.97c0,3.3-2.67,5.97-5.97,5.97H67.41v15.55 c0,3.3-2.67,5.97-5.97,5.97c-3.3,0-5.97-2.67-5.97-5.97V65.83H39.91c-3.3,0-5.97-2.67-5.97-5.97c0-3.3,2.67-5.97,5.97-5.97h15.55 V38.34L55.47,38.34z M100.16,10.24H22.72c-3.43,0-6.54,1.41-8.81,3.67c-2.26,2.26-3.67,5.38-3.67,8.81v74.29 c0,3.33,1.31,6.35,3.43,8.59l0.24,0.22c2.26,2.26,5.38,3.67,8.81,3.67h77.45c3.32,0,6.35-1.31,8.59-3.44l0.21-0.23 c2.26-2.26,3.67-5.38,3.67-8.81V22.71c0-3.42-1.41-6.54-3.67-8.81C106.71,11.65,103.59,10.24,100.16,10.24L100.16,10.24z'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
2924
380
  }
2925
381
 
2926
- .noUi-state-tap .noUi-connect, .noUi-state-tap .noUi-origin {
2927
- transition: transform .3s;
382
+ .slick-group-totals {
383
+ color: var(--jsl-color-text-secondary);
384
+ background: var(--jsl-color-surface);
2928
385
  }
2929
386
 
2930
- .noUi-state-drag * {
2931
- cursor: inherit !important;
387
+ .slick-group-select-checkbox {
388
+ width: 13px;
389
+ height: 13px;
390
+ margin: 3px 10px 0 0;
391
+ display: inline-block;
2932
392
  }
2933
393
 
2934
- .noUi-horizontal {
2935
- height: 6px;
394
+ .slick-cell.selected {
395
+ background-color: var(--jsl-color-surface-selected);
2936
396
  }
2937
397
 
2938
- .noUi-horizontal .noUi-handle {
2939
- width: 18px;
2940
- height: 18px;
2941
- top: -6px;
2942
- right: -9px;
398
+ .slick-cell.active {
399
+ border-color: var(--jsl-color-focus);
400
+ border-style: solid;
2943
401
  }
2944
402
 
2945
- .noUi-vertical {
2946
- width: 6px;
403
+ .slick-sortable-placeholder {
404
+ background: var(--jsl-color-surface-selected) !important;
2947
405
  }
2948
406
 
2949
- .noUi-vertical .noUi-handle {
2950
- width: 18px;
2951
- height: 18px;
2952
- top: -9px;
2953
- right: -6px;
407
+ .slick-row.odd {
408
+ background: var(--jsl-color-surface-subtle);
2954
409
  }
2955
410
 
2956
- .noUi-txt-dir-rtl.noUi-horizontal .noUi-handle {
2957
- left: -9px;
2958
- right: auto;
411
+ .slick-row.ui-state-active {
412
+ background: var(--jsl-color-surface-selected);
2959
413
  }
2960
414
 
2961
- .noUi-target {
2962
- background: var(--jsl-slider-track, var(--jsl-color-border-subtle));
2963
- box-shadow: none;
2964
- border: 0;
2965
- border-radius: 999px;
415
+ .slick-row.loading {
416
+ opacity: .5;
417
+ filter: alpha(opacity = 50);
2966
418
  }
2967
419
 
2968
- .noUi-connects {
2969
- border-radius: 3px;
420
+ .slick-cell.invalid {
421
+ border-color: var(--jsl-color-danger);
422
+ animation-name: slickgrid-invalid-hilite;
423
+ animation-duration: .2s;
2970
424
  }
2971
425
 
2972
- .noUi-connect {
2973
- background: var(--jsl-slider-connect, var(--jsl-color-accent));
2974
- }
426
+ @keyframes slickgrid-invalid-hilite {
427
+ from {
428
+ box-shadow: 0 0 6px var(--jsl-color-danger);
429
+ }
2975
430
 
2976
- .noUi-draggable {
2977
- cursor: ew-resize;
431
+ to {
432
+ box-shadow: none;
433
+ }
2978
434
  }
2979
435
 
2980
- .noUi-vertical .noUi-draggable {
2981
- cursor: ns-resize;
436
+ .new-row .slick-cell {
437
+ border-top: solid 1px var(--jsl-color-border);
438
+ background: var(--jsl-color-surface-selected);
2982
439
  }
2983
440
 
2984
- .noUi-handle {
2985
- border: 2px solid var(--jsl-color-accent);
441
+ .slickgrid {
442
+ font: inherit;
443
+ color: var(--jsl-color-text);
2986
444
  background: var(--jsl-color-surface);
2987
- cursor: default;
2988
- border-radius: 50%;
2989
- box-shadow: 0 1px 4px #00000029;
2990
445
  }
2991
446
 
2992
- .noUi-active {
2993
- border-color: var(--jsl-color-accent);
447
+ .slick-row:not(.slick-group):not(.slick-group-totals) > .slick-cell:not(.active):not(.invalid):not(.flashing) {
448
+ border-right-color: #0000;
2994
449
  }
2995
450
 
2996
- [disabled] .noUi-connect {
2997
- background: var(--jsl-color-disabled-text);
451
+ .slickgrid .right {
452
+ text-align: right;
2998
453
  }
2999
454
 
3000
- [disabled].noUi-target, [disabled].noUi-handle, [disabled] .noUi-handle {
3001
- cursor: not-allowed;
455
+ .slickgrid .center {
456
+ text-align: center;
3002
457
  }
3003
458
 
3004
- .noUi-pips, .noUi-pips * {
3005
- box-sizing: border-box;
459
+ .slickgrid .tabular-nums {
460
+ font-variant-numeric: tabular-nums;
3006
461
  }
3007
462
 
3008
- .noUi-pips {
3009
- color: var(--jsl-color-text-muted);
3010
- position: absolute;
463
+ .slick-header-column .slick-column-name {
464
+ float: none;
465
+ text-overflow: ellipsis;
466
+ white-space: normal;
467
+ vertical-align: middle;
468
+ max-width: 100%;
469
+ max-height: 2.4em;
470
+ margin-bottom: 0;
471
+ line-height: 1.2;
472
+ display: inline-block;
473
+ overflow: hidden;
3011
474
  }
3012
475
 
3013
- .noUi-value {
3014
- white-space: nowrap;
3015
- text-align: center;
3016
- position: absolute;
476
+ .slick-header-sortable .slick-column-name {
477
+ max-width: calc(100% - 1.25rem);
3017
478
  }
3018
479
 
3019
- .noUi-value-sub {
3020
- color: var(--jsl-color-text-muted);
3021
- font-size: 10px;
480
+ .slick-header-column .slick-sort-indicator, .slick-header-column .slick-sort-indicator-numbered {
481
+ float: none;
482
+ vertical-align: top;
483
+ height: var(--jsl-grid-header-height, 40px);
484
+ line-height: var(--jsl-grid-header-height, 40px);
485
+ color: var(--jsl-color-accent);
486
+ margin: 0 0 0 .375rem;
487
+ display: inline-block;
488
+ position: relative;
3022
489
  }
3023
490
 
3024
- .noUi-marker {
3025
- background: var(--jsl-color-border);
3026
- position: absolute;
491
+ .slick-header-column .slick-sort-indicator {
492
+ width: .65rem;
3027
493
  }
3028
494
 
3029
- .noUi-marker-sub, .noUi-marker-large {
3030
- background: var(--jsl-color-border);
495
+ .slick-header-column.right .slick-sort-indicator, .slick-header-column.right .slick-sort-indicator-numbered {
496
+ float: left;
497
+ margin-left: 0;
498
+ margin-right: .375rem;
3031
499
  }
3032
500
 
3033
- .noUi-pips-horizontal {
3034
- width: 100%;
3035
- height: 80px;
3036
- padding: 10px 0;
3037
- top: 100%;
501
+ .slick-sort-indicator-asc:before, .slick-sort-indicator-desc:before {
502
+ content: "";
503
+ background: currentColor;
504
+ width: 8px;
505
+ height: 5px;
506
+ position: absolute;
507
+ top: 50%;
3038
508
  left: 0;
509
+ transform: translateY(-50%);
3039
510
  }
3040
511
 
3041
- .noUi-value-horizontal {
3042
- transform: translate(-50%, 50%);
512
+ .slick-sort-indicator-asc:before {
513
+ clip-path: polygon(50% 0, 100% 100%, 0 100%);
3043
514
  }
3044
515
 
3045
- .noUi-rtl .noUi-value-horizontal {
3046
- transform: translate(50%, 50%);
516
+ .slick-sort-indicator-desc:before {
517
+ clip-path: polygon(0 0, 100% 0, 50% 100%);
3047
518
  }
3048
519
 
3049
- .noUi-marker-horizontal.noUi-marker {
3050
- width: 2px;
3051
- height: 5px;
3052
- margin-left: -1px;
520
+ .slick-header-column .slick-sort-indicator-numbered {
521
+ width: auto;
522
+ min-width: .65rem;
523
+ font-size: .8em;
3053
524
  }
3054
525
 
3055
- .noUi-marker-horizontal.noUi-marker-sub {
3056
- height: 10px;
526
+ .slick-header-column .slick-sort-indicator.slick-sort-indicator-numbered {
527
+ min-width: 1.5rem;
528
+ padding-left: .75rem;
3057
529
  }
3058
530
 
3059
- .noUi-marker-horizontal.noUi-marker-large {
3060
- height: 15px;
531
+ .slickgrid:has(.slick-header-column.frozen) > .slick-pane-left:after {
532
+ content: "";
533
+ background: var(--jsl-color-border);
534
+ pointer-events: none;
535
+ z-index: 20;
536
+ width: 1px;
537
+ position: absolute;
538
+ top: 0;
539
+ bottom: 0;
540
+ right: 0;
541
+ box-shadow: -2px 0 4px #00000014;
3061
542
  }
3062
543
 
3063
- .noUi-pips-vertical {
3064
- height: 100%;
3065
- padding: 0 10px;
3066
- top: 0;
3067
- left: 100%;
544
+ .resizable {
545
+ position: relative;
3068
546
  }
3069
547
 
3070
- .noUi-value-vertical {
3071
- padding-left: 25px;
3072
- transform: translate(0, -50%);
548
+ .resizable > .rs-r {
549
+ box-sizing: border-box;
550
+ cursor: w-resize;
551
+ background: #14141433;
552
+ width: .5rem;
553
+ position: absolute;
554
+ top: 0;
555
+ bottom: 0;
556
+ right: 0;
3073
557
  }
3074
558
 
3075
- .noUi-rtl .noUi-value-vertical {
3076
- transform: translate(0, 50%);
559
+ .resizable > .rs-b {
560
+ box-sizing: border-box;
561
+ cursor: n-resize;
562
+ background: #14141433;
563
+ height: .5rem;
564
+ position: absolute;
565
+ bottom: 0;
566
+ left: 0;
567
+ right: 0;
3077
568
  }
3078
569
 
3079
- .noUi-marker-vertical.noUi-marker {
3080
- width: 5px;
3081
- height: 2px;
3082
- margin-top: -1px;
570
+ .resizable > .rs-r.rs-b {
571
+ top: initial;
572
+ left: initial;
573
+ cursor: nw-resize;
574
+ bottom: 0;
575
+ right: 0;
3083
576
  }
3084
577
 
3085
- .noUi-marker-vertical.noUi-marker-sub {
3086
- width: 10px;
578
+ .slick-header-menubutton {
579
+ cursor: pointer;
580
+ background-image: url("data:image/gif;base64,R0lGODlhDgAOAIABADtKYwAAACH5BAEAAAEALAAAAAAOAA4AAAISjI+py+0PHZgUsGobhTn6DxoFADs=");
581
+ background-position: 0;
582
+ background-repeat: no-repeat;
583
+ border-left: thin ridge silver;
584
+ width: 14px;
585
+ display: none;
586
+ position: absolute;
587
+ top: 0;
588
+ bottom: 0;
589
+ right: 0;
3087
590
  }
3088
591
 
3089
- .noUi-marker-vertical.noUi-marker-large {
3090
- width: 15px;
592
+ .slick-header-menubutton.resize-offset {
593
+ right: .5rem;
3091
594
  }
3092
595
 
3093
- .noUi-tooltip {
3094
- border: 1px solid var(--jsl-color-border);
3095
- background: var(--jsl-color-surface);
3096
- color: var(--jsl-color-text);
3097
- text-align: center;
3098
- white-space: nowrap;
3099
- border-radius: 3px;
3100
- padding: 5px;
3101
- display: block;
3102
- position: absolute;
596
+ .slick-header-column:hover > .slick-header-menubutton, .slick-header-column-active .slick-header-menubutton {
597
+ display: inline-block;
3103
598
  }
3104
599
 
3105
- .noUi-horizontal .noUi-tooltip {
3106
- bottom: 120%;
3107
- left: 50%;
3108
- transform: translate(-50%);
600
+ .slick-header-menu {
601
+ cursor: default;
602
+ margin: 0;
603
+ padding: 2px;
604
+ display: inline-block;
605
+ position: absolute;
3109
606
  }
3110
607
 
3111
- .noUi-vertical .noUi-tooltip {
3112
- top: 50%;
3113
- right: 120%;
3114
- transform: translate(0, -50%);
608
+ .slick-header-menuitem {
609
+ cursor: pointer;
610
+ margin: 0;
611
+ padding: 0;
612
+ list-style: none;
3115
613
  }
3116
614
 
3117
- .noUi-horizontal .noUi-origin > .noUi-tooltip {
3118
- bottom: 10px;
3119
- left: auto;
3120
- transform: translate(50%);
615
+ .slick-header-menuicon {
616
+ vertical-align: middle;
617
+ background-position: center;
618
+ background-repeat: no-repeat;
619
+ width: 16px;
620
+ height: 16px;
621
+ margin-right: 4px;
622
+ display: inline-block;
3121
623
  }
3122
624
 
3123
- .noUi-vertical .noUi-origin > .noUi-tooltip {
3124
- top: auto;
3125
- right: 28px;
3126
- transform: translate(0, -18px);
625
+ .slick-header-menucontent {
626
+ vertical-align: middle;
627
+ display: inline-block;
3127
628
  }
3128
629
 
3129
- .noUi-touch-area {
3130
- width: auto;
3131
- height: auto;
3132
- position: absolute;
3133
- inset: -6px;
630
+ .slick-header-menuitem-disabled {
631
+ color: silver;
3134
632
  }
3135
633
 
3136
- .noUi-base:before {
3137
- content: "";
3138
- position: absolute;
3139
- inset: -10px 0;
634
+ .slick-header-menuitem.slick-header-menuitem-divider {
635
+ cursor: default;
636
+ background-color: #cecece;
637
+ border: none;
638
+ height: 1px;
639
+ margin: 8px 2px;
640
+ padding: 0;
641
+ overflow: hidden;
3140
642
  }
3141
643
 
3142
- .noUi-vertical .noUi-base:before {
3143
- inset: 0 -10px;
644
+ .slick-header-menuitem-divider.slick-header-menuitem:hover {
645
+ background-color: #cecece;
3144
646
  }
3145
647
 
3146
- .noUi-handle {
3147
- cursor: grab;
648
+ .slick-header-menu {
649
+ z-index: 20;
650
+ background: #fff;
651
+ border: 1px solid #bebebe;
652
+ padding: 2px;
653
+ box-shadow: 2px 2px 2px silver;
3148
654
  }
3149
655
 
3150
- .noUi-handle:active {
3151
- cursor: grabbing;
656
+ .slick-header-menuitem {
657
+ border-radius: 3px;
658
+ padding: 2px 4px;
3152
659
  }
3153
660
 
3154
- .noUi-handle:focus-visible {
3155
- outline: 2px solid var(--jsl-color-focus);
3156
- outline-offset: 3px;
661
+ .slick-header-menuitem:hover {
662
+ color: #fff;
663
+ background: #3b99ff;
3157
664
  }
3158
665
 
3159
- [disabled] .noUi-handle, .noUi-handle[disabled] {
3160
- border-color: var(--jsl-color-disabled-text);
3161
- background: var(--jsl-color-disabled-surface);
666
+ .slick-header-menuitem-disabled {
667
+ background: inherit !important;
668
+ border-color: #0000 !important;
3162
669
  }
3163
670
 
3164
- .noUi-tooltip {
3165
- font: inherit;
3166
- border-radius: .375rem;
3167
- padding: 4px 8px;
3168
- font-size: .75rem;
671
+ .slick-column-name, .slick-sort-indicator {
672
+ float: left;
673
+ margin-bottom: 100px;
674
+ display: inline-block;
3169
675
  }
3170
676
 
3171
- .slick-cell .jsl-toggle {
3172
- color: #888;
3173
- box-sizing: border-box;
677
+ .slick-header-button {
678
+ float: right;
679
+ vertical-align: top;
3174
680
  cursor: pointer;
3175
- width: 1.2em;
3176
- height: 100%;
681
+ background-position: center;
682
+ background-repeat: no-repeat;
683
+ width: 15px;
684
+ height: 15px;
685
+ margin: 1px 2rem 100px 1px;
3177
686
  display: inline-block;
3178
687
  }
3179
688
 
3180
- .slick-cell .jsl-toggle-spacer {
3181
- box-sizing: border-box;
3182
- min-width: 1.2em;
3183
- display: inline-block;
689
+ .slick-header-button-hidden {
690
+ width: 0;
691
+ transition: width .2s;
3184
692
  }
3185
693
 
3186
- .slick-cell .jsl-indent {
3187
- display: inline-block;
3188
- position: relative;
694
+ .slick-header-column:hover > .slick-header-button {
695
+ width: 15px;
3189
696
  }
3190
697
 
3191
- .jsl-navigation {
3192
- width: 100%;
3193
- color: var(--jsl-color-text);
3194
- background: var(--jsl-color-surface);
3195
- border-block: 1px solid var(--jsl-color-border-subtle);
698
+ :where(:root) {
699
+ --jsl-color-canvas: #f7f7f8;
700
+ --jsl-color-surface: #fff;
701
+ --jsl-color-surface-subtle: #fafafa;
702
+ --jsl-color-surface-hover: #f0f0f2;
703
+ --jsl-color-surface-selected: #e8e8eb;
704
+ --jsl-color-border: #d4d4d8;
705
+ --jsl-color-border-subtle: #e4e4e7;
706
+ --jsl-color-text: #27272a;
707
+ --jsl-color-text-secondary: #52525b;
708
+ --jsl-color-text-muted: #71717a;
709
+ --jsl-color-accent: #3f3f46;
710
+ --jsl-color-accent-hover: #27272a;
711
+ --jsl-color-accent-active: #18181b;
712
+ --jsl-color-on-accent: #fff;
713
+ --jsl-color-focus: #52525b;
714
+ --jsl-color-danger: #b42318;
715
+ --jsl-color-success: #15803d;
716
+ --jsl-color-warning: #b45309;
717
+ --jsl-color-info: #2563eb;
718
+ --jsl-color-disabled-surface: #f4f4f5;
719
+ --jsl-color-disabled-text: #71717a;
720
+ --jsl-color-overlay: #18181b73;
721
+ --jsl-shadow-dialog: 0 24px 64px #0000002e, 0 4px 16px #00000014;
722
+ }
723
+
724
+ .jsl-button, .jsl-button:any-link {
725
+ --jsl-button-height: 2rem;
726
+ --jsl-button-padding: .875rem;
3196
727
  box-sizing: border-box;
728
+ height: var(--jsl-button-height);
729
+ padding: 0 var(--jsl-button-padding);
730
+ vertical-align: middle;
731
+ border-radius: var(--jsl-button-radius, .375rem);
732
+ background: var(--jsl-button-primary, var(--jsl-color-accent));
733
+ color: var(--jsl-button-on-primary, var(--jsl-color-on-accent));
3197
734
  font: inherit;
3198
- font-size: .875rem;
3199
- line-height: 1.4;
735
+ letter-spacing: normal;
736
+ text-align: center;
737
+ text-transform: none;
738
+ white-space: nowrap;
739
+ cursor: pointer;
740
+ border: 1px solid #0000;
741
+ justify-content: center;
742
+ align-items: center;
743
+ gap: .5rem;
744
+ margin: 0;
745
+ font-weight: 500;
746
+ line-height: 1.25;
747
+ text-decoration: none;
748
+ transition: background-color .12s, border-color .12s, box-shadow .12s;
749
+ display: inline-flex;
3200
750
  position: relative;
3201
751
  }
3202
752
 
3203
- .jsl-navigation *, .jsl-navigation :before, .jsl-navigation :after {
3204
- box-sizing: border-box;
753
+ .jsl-button, button.jsl-button[type] {
754
+ appearance: none;
3205
755
  }
3206
756
 
3207
- .jsl-navigation--fixed, .jsl-navigation--fixed-bottom {
3208
- z-index: 1010;
3209
- position: fixed;
3210
- inset-inline: 0;
3211
- box-shadow: 0 2px 8px #0000000a;
757
+ .jsl-button:where(:hover), .jsl-button:any-link:where(:hover) {
758
+ background: var(--jsl-button-primary-hover, var(--jsl-color-accent-hover));
3212
759
  }
3213
760
 
3214
- .jsl-navigation--fixed {
3215
- top: 0;
761
+ .jsl-button:where(:active, .active, [aria-pressed="true"]), .jsl-button:any-link:where(:active, .active, [aria-pressed="true"]) {
762
+ background: var(--jsl-button-primary-active, var(--jsl-color-accent-active));
763
+ box-shadow: inset 0 0 0 1px;
3216
764
  }
3217
765
 
3218
- .jsl-navigation--fixed-bottom {
3219
- bottom: 0;
766
+ .jsl-button.jsl-button-outline {
767
+ border-color: var(--jsl-button-border, var(--jsl-color-border));
768
+ background: var(--jsl-button-surface, var(--jsl-color-surface));
769
+ color: var(--jsl-button-text, var(--jsl-color-text));
3220
770
  }
3221
771
 
3222
- .jsl-navigation [hidden] {
3223
- display: none !important;
772
+ .jsl-button.jsl-button-ghost {
773
+ color: var(--jsl-button-text, var(--jsl-color-text));
774
+ background: none;
3224
775
  }
3225
776
 
3226
- .jsl-navigation button, .jsl-navigation a {
3227
- -webkit-tap-highlight-color: transparent;
777
+ .jsl-button.jsl-button-outline:where(:hover), .jsl-button.jsl-button-ghost:where(:hover) {
778
+ background: var(--jsl-button-hover-surface, var(--jsl-color-surface-hover));
779
+ border-color: var(--jsl-button-border, var(--jsl-color-border));
3228
780
  }
3229
781
 
3230
- .jsl-navigation button {
3231
- font: inherit;
782
+ .jsl-button.jsl-button-outline:where(:active, .active, [aria-pressed="true"]), .jsl-button.jsl-button-ghost:where(:active, .active, [aria-pressed="true"]) {
783
+ background: var(--jsl-button-selected-surface, var(--jsl-color-surface-selected));
784
+ border-color: var(--jsl-button-primary, var(--jsl-color-accent));
785
+ color: var(--jsl-button-selected-text, var(--jsl-color-text));
786
+ box-shadow: none;
3232
787
  }
3233
788
 
3234
- .jsl-navigation button:focus-visible, .jsl-navigation a:focus-visible {
3235
- outline: 2px solid var(--jsl-color-focus);
3236
- outline-offset: 2px;
3237
- z-index: 1;
789
+ .jsl-button:focus-visible {
790
+ outline: 2px solid var(--jsl-button-focus, var(--jsl-color-focus));
791
+ outline-offset: 3px;
3238
792
  }
3239
793
 
3240
- .jsl-nav-bar {
3241
- flex-wrap: wrap;
3242
- align-items: center;
3243
- gap: .5rem 1.5rem;
3244
- min-height: 3.5rem;
3245
- padding: .625rem 1rem;
3246
- display: flex;
3247
- container-type: inline-size;
794
+ .jsl-button.jsl-button-small {
795
+ --jsl-button-height: 1.75rem;
796
+ --jsl-button-padding: .625rem;
797
+ gap: .375rem;
798
+ font-size: .8125rem;
3248
799
  }
3249
800
 
3250
- .jsl-nav-brand {
3251
- color: inherit;
3252
- overflow-wrap: anywhere;
3253
- align-items: center;
3254
- gap: .5rem;
3255
- min-width: 0;
3256
- font-size: 1rem;
3257
- font-weight: 650;
3258
- text-decoration: none;
3259
- display: flex;
801
+ .jsl-button.jsl-button-large {
802
+ --jsl-button-height: 2.5rem;
803
+ --jsl-button-padding: 1rem;
804
+ font-size: .9375rem;
3260
805
  }
3261
806
 
3262
- .jsl-nav-items, .jsl-nav-submenu {
3263
- margin: 0;
807
+ .jsl-button.jsl-button-icon-only {
808
+ width: var(--jsl-button-height);
809
+ flex-shrink: 0;
3264
810
  padding: 0;
3265
- list-style: none;
3266
- }
3267
-
3268
- .jsl-nav-items {
3269
- flex-wrap: wrap;
3270
- align-items: center;
3271
- gap: .25rem;
3272
- min-width: 0;
3273
- display: flex;
3274
- }
3275
-
3276
- .jsl-nav-bar--right > .jsl-nav-items {
3277
- margin-inline-start: auto;
3278
- }
3279
-
3280
- .jsl-nav-item {
3281
- min-width: 0;
3282
- position: relative;
3283
- }
3284
-
3285
- .jsl-nav-row {
3286
- border-radius: .375rem;
3287
- align-items: stretch;
3288
- display: flex;
3289
811
  }
3290
812
 
3291
- .jsl-nav-link, .jsl-nav-submenu-toggle, .jsl-nav-toggle {
3292
- color: var(--jsl-color-text-secondary);
3293
- cursor: pointer;
3294
- background: none;
3295
- border: 0;
3296
- border-radius: .375rem;
813
+ .jsl-button-icon {
814
+ pointer-events: none;
815
+ flex: none;
3297
816
  justify-content: center;
3298
817
  align-items: center;
3299
- gap: .625rem;
3300
- min-height: 2.25rem;
3301
- padding: .5rem .75rem;
3302
- line-height: 1.4;
3303
- text-decoration: none;
818
+ width: 1.125em;
819
+ height: 1.125em;
820
+ line-height: 1;
3304
821
  display: inline-flex;
3305
822
  }
3306
823
 
3307
- .jsl-nav-link {
3308
- text-align: start;
3309
- overflow-wrap: anywhere;
3310
- flex: 1;
3311
- justify-content: flex-start;
3312
- min-width: 0;
824
+ .jsl-button-icon > img, .jsl-button-icon > svg {
825
+ object-fit: contain;
826
+ width: 100%;
827
+ height: 100%;
828
+ display: block;
3313
829
  }
3314
830
 
3315
- .jsl-nav-link > img, .jsl-nav-brand img {
3316
- width: auto;
3317
- max-height: 1.5rem;
831
+ .jsl-button-label-hidden {
832
+ clip-path: inset(50%);
833
+ white-space: nowrap;
834
+ border: 0;
835
+ width: 1px;
836
+ height: 1px;
837
+ margin: -1px;
838
+ padding: 0;
839
+ position: absolute;
840
+ overflow: hidden;
3318
841
  }
3319
842
 
3320
- .jsl-nav-submenu-toggle {
3321
- padding-inline: .5rem;
843
+ .jsl-button:disabled, .jsl-button.disabled, .jsl-button[aria-disabled="true"] {
844
+ background: var(--jsl-button-disabled-surface, var(--jsl-color-disabled-surface));
845
+ border-color: var(--jsl-button-disabled-border, var(--jsl-color-border-subtle));
846
+ color: var(--jsl-button-disabled-text, var(--jsl-color-disabled-text));
847
+ box-shadow: none;
848
+ cursor: not-allowed;
3322
849
  }
3323
850
 
3324
- .jsl-nav-link:hover, .jsl-nav-submenu-toggle:hover, .jsl-nav-toggle:hover {
3325
- background: var(--jsl-color-surface-hover);
3326
- color: var(--jsl-color-text);
851
+ @media (prefers-reduced-motion: reduce) {
852
+ .jsl-button {
853
+ transition: none;
854
+ }
3327
855
  }
3328
856
 
3329
- .jsl-nav-item.is-active > .jsl-nav-row {
3330
- background: var(--jsl-color-surface-selected);
857
+ .jsl-dialog-overlay {
858
+ z-index: var(--jsl-dialog-z-index, 2001);
859
+ background: var(--jsl-dialog-backdrop, var(--jsl-color-overlay));
860
+ position: fixed;
861
+ inset: 0;
3331
862
  }
3332
863
 
3333
- .jsl-nav-item.is-active > .jsl-nav-row > .jsl-nav-link {
864
+ .jsl-dialog {
865
+ box-sizing: border-box;
866
+ border: 1px solid var(--jsl-dialog-border, var(--jsl-color-border-subtle));
867
+ border-radius: var(--jsl-dialog-radius, .75rem);
868
+ background: var(--jsl-dialog-surface, var(--jsl-color-surface));
869
+ width: 32rem;
870
+ max-width: calc(100% - 2rem);
871
+ max-height: calc(100% - 2rem);
3334
872
  color: var(--jsl-color-text);
3335
- font-weight: 600;
873
+ box-shadow: var(--jsl-dialog-shadow, var(--jsl-shadow-dialog));
874
+ font: inherit;
875
+ pointer-events: auto;
876
+ isolation: isolate;
877
+ flex-direction: column;
878
+ line-height: 1.5;
879
+ display: flex;
880
+ position: absolute;
881
+ top: 50%;
882
+ left: 50%;
883
+ transform: translate(-50%, -50%);
3336
884
  }
3337
885
 
3338
- .jsl-navigation :disabled, .jsl-navigation [aria-disabled="true"] {
3339
- color: var(--jsl-color-disabled-text);
3340
- cursor: default;
3341
- opacity: .6;
3342
- background: none;
886
+ .jsl-dialog:focus {
887
+ outline: none;
3343
888
  }
3344
889
 
3345
- .jsl-nav-chevron {
3346
- border-bottom: 1.5px solid;
3347
- border-right: 1.5px solid;
3348
- flex-shrink: 0;
3349
- width: .4rem;
3350
- height: .4rem;
3351
- margin: .125rem;
3352
- transform: translateY(-.1rem) rotate(45deg);
890
+ .jsl-dialog.resizable {
891
+ position: absolute;
3353
892
  }
3354
893
 
3355
- [aria-expanded="true"] > .jsl-nav-chevron {
3356
- transform: translateY(.1rem) rotate(225deg);
894
+ .jsl-dialog:focus-visible {
895
+ outline: 2px solid var(--jsl-color-focus);
896
+ outline-offset: 3px;
3357
897
  }
3358
898
 
3359
- .jsl-nav-submenu {
3360
- z-index: 1020;
3361
- background: var(--jsl-color-surface);
3362
- border: 1px solid var(--jsl-color-border-subtle);
3363
- top: calc(100% + .375rem);
3364
- border-radius: .625rem;
3365
- width: max-content;
3366
- min-width: 12rem;
3367
- max-width: min(22rem, 100vw - 2rem);
3368
- max-height: min(28rem, 65dvh);
3369
- padding: .375rem;
3370
- position: absolute;
3371
- inset-inline-end: 0;
3372
- overflow: auto;
3373
- box-shadow: 0 8px 24px #0000001a;
899
+ .jsl-dialog > .dlg-header {
900
+ box-sizing: border-box;
901
+ border-bottom: 1px solid var(--jsl-color-border-subtle);
902
+ border-radius: var(--jsl-dialog-radius, .75rem) var(--jsl-dialog-radius, .75rem) 0 0;
903
+ flex: none;
904
+ align-items: center;
905
+ gap: 1rem;
906
+ min-width: 0;
907
+ padding: 1.125rem 1.5rem;
908
+ font-size: 1rem;
909
+ font-weight: 600;
910
+ line-height: 1.5;
911
+ display: flex;
3374
912
  }
3375
913
 
3376
- .jsl-nav-submenu .jsl-nav-submenu {
3377
- border: 0;
3378
- border-inline-start: 1px solid var(--jsl-color-border);
3379
- width: auto;
914
+ .jsl-dialog .dlg-title {
915
+ overflow-wrap: anywhere;
916
+ flex: 1;
3380
917
  min-width: 0;
3381
- max-height: none;
3382
- box-shadow: none;
3383
- border-radius: 0;
3384
- margin: .25rem .5rem .375rem .75rem;
3385
- padding: 0 0 0 .5rem;
3386
- position: static;
3387
918
  }
3388
919
 
3389
- .jsl-navigation--fixed-bottom > .jsl-nav-bar > .jsl-nav-items > li > .jsl-nav-submenu {
3390
- top: auto;
3391
- bottom: calc(100% + .375rem);
3392
- }
3393
-
3394
- .jsl-nav-toggle {
3395
- width: 2.25rem;
3396
- margin-inline-start: auto;
3397
- padding: .5rem;
3398
- display: none;
920
+ .jsl-dialog-moveable > .dlg-header {
921
+ cursor: move;
922
+ touch-action: none;
3399
923
  }
3400
924
 
3401
- .jsl-nav-menu-icon, .jsl-nav-menu-icon:before, .jsl-nav-menu-icon:after {
3402
- background: currentColor;
3403
- width: 1rem;
3404
- height: 1.5px;
3405
- display: block;
925
+ .jsl-dialog .dlg-close-btn {
926
+ box-sizing: border-box;
927
+ width: 2rem;
928
+ height: 2rem;
929
+ color: var(--jsl-color-text-secondary);
930
+ font: inherit;
931
+ cursor: pointer;
932
+ background: none;
933
+ border: 1px solid #0000;
934
+ border-radius: .375rem;
935
+ flex: none;
936
+ justify-content: center;
937
+ align-items: center;
938
+ margin: -.25rem -.5rem -.25rem auto;
939
+ padding: 0;
940
+ display: inline-flex;
3406
941
  position: relative;
3407
942
  }
3408
943
 
3409
- .jsl-nav-menu-icon:before, .jsl-nav-menu-icon:after {
944
+ .jsl-dialog .dlg-close-btn:before, .jsl-dialog .dlg-close-btn:after {
3410
945
  content: "";
946
+ background: currentColor;
947
+ border-radius: 1px;
948
+ width: .875rem;
949
+ height: 1.5px;
3411
950
  position: absolute;
3412
- top: -.3125rem;
3413
- left: 0;
3414
- }
3415
-
3416
- .jsl-nav-menu-icon:after {
3417
- top: .3125rem;
3418
- }
3419
-
3420
- .is-open > .jsl-nav-toggle .jsl-nav-menu-icon {
3421
- background: none;
3422
- }
3423
-
3424
- .is-open > .jsl-nav-toggle .jsl-nav-menu-icon:before {
3425
- top: 0;
3426
951
  transform: rotate(45deg);
3427
952
  }
3428
953
 
3429
- .is-open > .jsl-nav-toggle .jsl-nav-menu-icon:after {
3430
- top: 0;
954
+ .jsl-dialog .dlg-close-btn:after {
3431
955
  transform: rotate(-45deg);
3432
956
  }
3433
957
 
3434
- @container (width <= 40rem) {
3435
- .jsl-nav-toggle {
3436
- display: inline-flex;
3437
- }
3438
-
3439
- .jsl-nav-brand {
3440
- max-width: calc(100% - 4rem);
3441
- }
3442
-
3443
- .jsl-nav-items {
3444
- border-top: 1px solid var(--jsl-color-border-subtle);
3445
- width: 100%;
3446
- max-height: 65dvh;
3447
- margin-inline-start: 0;
3448
- padding-top: .5rem;
3449
- display: none;
3450
- overflow: auto;
3451
- }
3452
-
3453
- .is-open > .jsl-nav-items {
3454
- display: block;
3455
- }
3456
-
3457
- .jsl-nav-item + .jsl-nav-item {
3458
- margin-top: .125rem;
3459
- }
3460
-
3461
- .jsl-nav-items .jsl-nav-submenu {
3462
- border: 0;
3463
- border-inline-start: 1px solid var(--jsl-color-border);
3464
- width: auto;
3465
- min-width: 0;
3466
- max-width: none;
3467
- max-height: none;
3468
- box-shadow: none;
3469
- border-radius: 0;
3470
- margin: .25rem .5rem .375rem .75rem;
3471
- padding: 0 0 0 .5rem;
3472
- position: static;
3473
- }
958
+ .jsl-dialog .dlg-close-btn:hover {
959
+ background: var(--jsl-color-surface-hover);
960
+ color: var(--jsl-color-text);
3474
961
  }
3475
962
 
3476
- @media (width <= 767px) {
3477
- .jsl-nav-toggle {
3478
- display: inline-flex;
3479
- }
3480
-
3481
- .jsl-nav-brand {
3482
- max-width: calc(100% - 4rem);
3483
- }
3484
-
3485
- .jsl-nav-items {
3486
- border-top: 1px solid var(--jsl-color-border-subtle);
3487
- width: 100%;
3488
- max-height: 65dvh;
3489
- margin-inline-start: 0;
3490
- padding-top: .5rem;
3491
- display: none;
3492
- overflow: auto;
3493
- }
3494
-
3495
- .is-open > .jsl-nav-items {
3496
- display: block;
3497
- }
3498
-
3499
- .jsl-nav-item + .jsl-nav-item {
3500
- margin-top: .125rem;
3501
- }
3502
-
3503
- .jsl-nav-items .jsl-nav-submenu {
3504
- border: 0;
3505
- border-inline-start: 1px solid var(--jsl-color-border);
3506
- width: auto;
3507
- min-width: 0;
3508
- max-width: none;
3509
- max-height: none;
3510
- box-shadow: none;
3511
- border-radius: 0;
3512
- margin: .25rem .5rem .375rem .75rem;
3513
- padding: 0 0 0 .5rem;
3514
- position: static;
3515
- }
963
+ .jsl-dialog .dlg-close-btn:focus-visible {
964
+ outline: 2px solid var(--jsl-color-focus);
965
+ outline-offset: 2px;
3516
966
  }
3517
967
 
3518
- .ribbon-menu-comp {
3519
- background: var(--jsl-color-surface-subtle);
3520
- color: var(--jsl-color-text);
3521
- border: 1px solid var(--jsl-color-border-subtle);
968
+ .jsl-dialog > .dlg-body {
3522
969
  box-sizing: border-box;
3523
- border-radius: 0;
3524
- flex-wrap: wrap;
3525
- align-items: stretch;
3526
- gap: .75rem;
3527
- margin: 0;
3528
- padding: .75rem;
3529
- display: flex;
3530
- }
3531
-
3532
- .ribbon-menu-comp .ribbon-group {
3533
- border-inline-end: 1px solid var(--jsl-color-border-subtle);
3534
- flex-direction: column;
3535
- gap: .5rem;
970
+ overflow-wrap: anywhere;
971
+ overscroll-behavior: contain;
972
+ flex: auto;
3536
973
  min-width: 0;
3537
- padding-inline-end: .75rem;
3538
- display: flex;
974
+ min-height: 0;
975
+ padding: 1.5rem;
976
+ overflow: auto;
3539
977
  }
3540
978
 
3541
- .ribbon-menu-comp .ribbon-group:last-child {
3542
- border-inline-end: 0;
3543
- padding-inline-end: 0;
979
+ .jsl-dialog > .dlg-footer {
980
+ box-sizing: border-box;
981
+ border-top: 1px solid var(--jsl-color-border-subtle);
982
+ border-radius: 0 0 var(--jsl-dialog-radius, .75rem) var(--jsl-dialog-radius, .75rem);
983
+ background: var(--jsl-color-surface-subtle);
984
+ text-align: end;
985
+ flex: none;
986
+ padding: 1rem 1.5rem;
3544
987
  }
3545
988
 
3546
- .ribbon-actions {
989
+ .jsl-dialog > .dlg-footer > div, .jsl-dialog > .dlg-footer > form {
3547
990
  flex-wrap: wrap;
3548
- flex: 1;
991
+ justify-content: flex-end;
3549
992
  align-items: center;
3550
- gap: .375rem;
993
+ gap: .5rem;
3551
994
  display: flex;
3552
995
  }
3553
996
 
3554
- .ribbon-menu-comp .ribbon-legend {
3555
- color: var(--jsl-color-text-muted);
3556
- text-align: center;
3557
- font-size: .6875rem;
3558
- }
3559
-
3560
- :where(:root) {
3561
- --jsl-color-canvas: #f7f7f8;
3562
- --jsl-color-surface: #fff;
3563
- --jsl-color-surface-subtle: #fafafa;
3564
- --jsl-color-surface-hover: #f0f0f2;
3565
- --jsl-color-surface-selected: #e8e8eb;
3566
- --jsl-color-border: #d4d4d8;
3567
- --jsl-color-border-subtle: #e4e4e7;
3568
- --jsl-color-text: #27272a;
3569
- --jsl-color-text-secondary: #52525b;
3570
- --jsl-color-text-muted: #71717a;
3571
- --jsl-color-accent: #3f3f46;
3572
- --jsl-color-accent-hover: #27272a;
3573
- --jsl-color-accent-active: #18181b;
3574
- --jsl-color-on-accent: #fff;
3575
- --jsl-color-focus: #52525b;
3576
- --jsl-color-danger: #b42318;
3577
- --jsl-color-success: #15803d;
3578
- --jsl-color-warning: #b45309;
3579
- --jsl-color-info: #2563eb;
3580
- --jsl-color-disabled-surface: #f4f4f5;
3581
- --jsl-color-disabled-text: #71717a;
3582
- --jsl-color-overlay: #18181b73;
3583
- --jsl-shadow-dialog: 0 24px 64px #0000002e, 0 4px 16px #00000014;
997
+ .jsl-dialog > .dlg-footer > button + button {
998
+ margin-inline-start: .5rem;
3584
999
  }
3585
1000
 
3586
- .jsl-overlay-overlay {
3587
- color: var(--jsl-color-text);
3588
- width: fit-content;
3589
- max-width: 100vw;
3590
- height: fit-content;
3591
- max-height: 100dvh;
3592
- font: inherit;
3593
- background: none;
3594
- border: 0;
3595
- margin: 0;
3596
- padding: 0;
3597
- position: fixed;
3598
- inset: 0;
3599
- overflow: visible;
1001
+ .jsl-dialog > .dlg-header[hidden], .jsl-dialog > .dlg-footer[hidden] {
1002
+ display: none;
3600
1003
  }
3601
1004
 
3602
- .jsl-overlay-overlay:has(.overl-body-top) {
3603
- width: 100%;
1005
+ .jsl-dialog .slickgrid {
1006
+ border-radius: 0;
3604
1007
  }
3605
1008
 
3606
- .jsl-overlay-overlay::backdrop {
3607
- background: var(--jsl-color-overlay);
1009
+ .jsl-dialog.resizable > .dlg-res-handle.rs-r.rs-b {
1010
+ cursor: nwse-resize;
1011
+ touch-action: none;
1012
+ background: none;
1013
+ width: 1rem;
1014
+ height: 1rem;
1015
+ bottom: .125rem;
1016
+ right: .125rem;
3608
1017
  }
3609
1018
 
3610
- .jsl-overlay-overlay[hidden] {
3611
- display: none;
1019
+ .jsl-dialog .dlg-res-handle:after {
1020
+ content: "";
1021
+ border-right: 1px solid var(--jsl-color-text-muted);
1022
+ border-bottom: 1px solid var(--jsl-color-text-muted);
1023
+ width: .4rem;
1024
+ height: .4rem;
1025
+ position: absolute;
1026
+ bottom: .2rem;
1027
+ right: .2rem;
3612
1028
  }
3613
1029
 
3614
- .overl-body {
3615
- box-sizing: border-box;
3616
- background: var(--jsl-color-surface);
3617
- box-shadow: var(--jsl-shadow-dialog);
3618
- flex-direction: column;
3619
- display: flex;
3620
- overflow: auto;
3621
- }
1030
+ @media (width <= 480px) {
1031
+ .jsl-dialog {
1032
+ max-width: calc(100% - 1.5rem);
1033
+ max-height: calc(100% - 1.5rem);
1034
+ }
3622
1035
 
3623
- .overl-body-left {
3624
- width: var(--jsl-overlay-size);
3625
- border-radius: 0 .75rem .75rem 0;
3626
- max-width: 100vw;
3627
- height: 100dvh;
3628
- }
1036
+ .jsl-dialog > .dlg-header {
1037
+ padding: 1rem 1.125rem;
1038
+ }
3629
1039
 
3630
- .overl-body-top {
3631
- height: var(--jsl-overlay-size);
3632
- border-radius: 0 0 .75rem .75rem;
3633
- width: 100vw;
3634
- max-height: 100dvh;
3635
- }
1040
+ .jsl-dialog > .dlg-body {
1041
+ padding: 1.125rem;
1042
+ }
3636
1043
 
3637
- .overl-header {
3638
- justify-content: flex-end;
3639
- padding: .75rem .75rem 0;
3640
- display: flex;
1044
+ .jsl-dialog > .dlg-footer {
1045
+ padding: .875rem 1.125rem;
1046
+ }
3641
1047
  }
3642
1048
 
3643
- .overl-content {
3644
- padding: 1.25rem;
3645
- overflow: auto;
1049
+ .v-r-comp, .v-r-comp .v-r-child > * {
1050
+ height: 100%;
3646
1051
  }
3647
1052
 
3648
- .overl-close-btn {
3649
- width: 2rem;
3650
- height: 2rem;
3651
- color: var(--jsl-color-text-muted);
3652
- font: inherit;
3653
- cursor: pointer;
3654
- background: none;
3655
- border: 0;
3656
- border-radius: .375rem;
3657
- place-items: center;
3658
- padding: 0;
3659
- font-size: 1.5rem;
3660
- display: grid;
1053
+ .cell-reorder {
1054
+ cursor: move;
1055
+ background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAMAAABhq6zVAAADAFBMVEUAAACWlpbY2NgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADmpIfcAAABAHRSTlP///////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////8AU/cHJQAAABlJREFUCNdj+I8EGFA5jHAA5DDBAW2VIQEAmyRUB6U7kZIAAAAASUVORK5CYII=");
1056
+ background-position: center;
1057
+ background-repeat: no-repeat;
3661
1058
  }
3662
1059
 
3663
- .overl-close-btn:hover {
3664
- background: var(--jsl-color-surface-hover);
3665
- color: var(--jsl-color-text);
1060
+ .header-overlay {
1061
+ background-color: #217346;
3666
1062
  }
3667
1063
 
3668
- .overl-close-btn:focus-visible {
3669
- outline: 2px solid var(--jsl-color-focus);
3670
- outline-offset: 2px;
1064
+ .cell-overlay, .selection-cell-overlay {
1065
+ z-index: 20;
1066
+ background-color: #217346;
1067
+ display: block;
1068
+ position: absolute;
3671
1069
  }
3672
1070
 
3673
- .overl-body-left.overl-animate {
3674
- animation: .18s ease-out jsl-panel-left;
1071
+ .handle-overlay {
1072
+ z-index: 20;
1073
+ cursor: crosshair;
1074
+ background-color: #217346;
1075
+ border: 1px solid #fff;
1076
+ width: 2px;
1077
+ height: 2px;
1078
+ padding: 3px;
1079
+ position: absolute;
3675
1080
  }
3676
1081
 
3677
- .overl-body-top.overl-animate {
3678
- animation: .18s ease-out jsl-panel-top;
1082
+ .overlay-handle-decorator {
1083
+ z-index: 20;
1084
+ border: 2px solid #217346;
3679
1085
  }
3680
1086
 
3681
- @keyframes jsl-panel-left {
3682
- from {
3683
- transform: translateX(-100%);
3684
- }
1087
+ .slick-cell .jsl-toggle {
1088
+ color: #888;
1089
+ box-sizing: border-box;
1090
+ cursor: pointer;
1091
+ width: 1.2em;
1092
+ height: 100%;
1093
+ display: inline-block;
3685
1094
  }
3686
1095
 
3687
- @keyframes jsl-panel-top {
3688
- from {
3689
- transform: translateY(-100%);
3690
- }
1096
+ .slick-cell .jsl-toggle-spacer {
1097
+ box-sizing: border-box;
1098
+ min-width: 1.2em;
1099
+ display: inline-block;
3691
1100
  }
3692
1101
 
3693
- @media (prefers-reduced-motion: reduce) {
3694
- .overl-animate {
3695
- animation: none !important;
3696
- }
1102
+ .slick-cell .jsl-indent {
1103
+ display: inline-block;
1104
+ position: relative;
3697
1105
  }
3698
1106
  /*# sourceMappingURL=index.css.map */