@scania/tegel-lite 1.7.0 → 1.8.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/dist/components.css +970 -152
  2. package/dist/global.css +4 -0
  3. package/dist/tl-dropdown.css +28 -43
  4. package/dist/tl-folder-tabs.css +0 -1
  5. package/dist/tl-popover-menu.css +1 -1
  6. package/dist/tl-table.css +878 -0
  7. package/dist/tl-text-field.css +46 -70
  8. package/dist/tl-textarea.css +30 -37
  9. package/package.json +4 -3
package/dist/tl-table.css ADDED
@@ -0,0 +1,878 @@
1
+ :host,
2
+ :root {
3
+ --tl-scrollbar-width-standard: thin;
4
+ --tl-scrollbar-width: 10px;
5
+ --tl-scrollbar-height: 10px;
6
+ --tl-scrollbar-thumb-border-width: 3px;
7
+ --tl-scrollbar-thumb-border-hover-width: 2px;
8
+ }
9
+
10
+ body {
11
+ scrollbar-width: thin;
12
+ }
13
+
14
+ /**
15
+ * Do not edit directly, this file was auto-generated.
16
+ */
17
+ :root,
18
+ .tds-mode-light,
19
+ .scania .tds-mode-light,
20
+ .scania.tds-mode-light,
21
+ .scania .tl-mode-light,
22
+ .scania.tl-mode-light {
23
+ --component-table-background-footer-default: var(--scania-color-grey-150);
24
+ --component-table-background-header-default: var(--scania-color-grey-150);
25
+ --component-table-background-header-hover: var(--scania-color-grey-200);
26
+ --component-table-background-toolbar-default: var(--scania-color-grey-200);
27
+ --component-table-background-cell-primary-default: var(--scania-color-grey-50);
28
+ --component-table-background-cell-primary-hover: var(--scania-color-grey-100);
29
+ --component-table-background-cell-secondary-default: var(--scania-color-base-white);
30
+ --component-table-background-cell-secondary-hover: var(--scania-color-grey-100);
31
+ --component-table-background-cell-selected-default: var(--scania-color-grey-150);
32
+ --component-table-background-cell-selected-hover: var(--scania-color-grey-200);
33
+ --component-table-background-cell-expanded-default: var(
34
+ --component-table-background-cell-selected-default
35
+ );
36
+ --component-table-border-divider-default: var(--color-border-discrete);
37
+ --component-table-border-divider-hover: var(--scania-color-transparent-250);
38
+ --component-table-border-radius-default: var(--scania-unit-4);
39
+ --component-table-text-cell-default: var(--color-text-strong);
40
+ --component-table-text-footer-default: var(--color-text-strong);
41
+ --component-table-text-header-default: var(--color-text-strong);
42
+ --component-table-text-placeholder-default: var(--color-text-subtle);
43
+ --component-table-text-toolbar-default: var(--color-text-strong);
44
+ --component-table-text-value-default: var(--color-text-strong);
45
+ --component-table-icon-edit-default: var(--color-icon-strong);
46
+ --component-table-icon-expand-default: var(--color-icon-strong);
47
+ --component-table-icon-filter-default: var(--color-icon-strong);
48
+ --component-table-icon-prefix-default: var(--color-icon-strong);
49
+ --component-table-icon-sort-default: var(--color-icon-strong);
50
+ }
51
+
52
+ .traton .tds-mode-light,
53
+ .traton.tds-mode-light,
54
+ .traton .tl-mode-light,
55
+ .traton.tl-mode-light {
56
+ --component-table-background-footer-default: var(--traton-color-grey-200);
57
+ --component-table-background-header-default: var(--traton-color-grey-300);
58
+ --component-table-background-header-hover: var(--traton-color-grey-400);
59
+ --component-table-background-toolbar-default: var(--traton-color-grey-400);
60
+ --component-table-background-cell-primary-default: var(--color-background-layer-01);
61
+ --component-table-background-cell-primary-hover: var(--traton-color-grey-200);
62
+ --component-table-background-cell-secondary-default: var(--color-background-layer-02);
63
+ --component-table-background-cell-secondary-hover: var(--traton-color-grey-200);
64
+ --component-table-background-cell-selected-default: var(--traton-color-grey-300);
65
+ --component-table-background-cell-selected-hover: var(--traton-color-grey-400);
66
+ --component-table-background-cell-expanded-default: var(
67
+ --component-table-background-cell-selected-default
68
+ );
69
+ --component-table-border-divider-default: var(--color-border-discrete);
70
+ --component-table-border-divider-hover: var(--traton-color-transparent-400);
71
+ --component-table-border-radius-default: var(--traton-unit-4);
72
+ --component-table-text-cell-default: var(--color-text-strong);
73
+ --component-table-text-footer-default: var(--color-text-strong);
74
+ --component-table-text-header-default: var(--color-text-strong);
75
+ --component-table-text-placeholder-default: var(--color-text-subtle);
76
+ --component-table-text-toolbar-default: var(--color-text-strong);
77
+ --component-table-text-value-default: var(--color-text-strong);
78
+ --component-table-icon-edit-default: var(--color-icon-strong);
79
+ --component-table-icon-expand-default: var(--color-icon-strong);
80
+ --component-table-icon-filter-default: var(--color-icon-strong);
81
+ --component-table-icon-prefix-default: var(--color-icon-strong);
82
+ --component-table-icon-sort-default: var(--color-icon-strong);
83
+ }
84
+
85
+ .tds-mode-dark,
86
+ .scania .tds-mode-dark,
87
+ .scania.tds-mode-dark,
88
+ .scania .tl-mode-dark,
89
+ .scania.tl-mode-dark {
90
+ --component-table-background-footer-default: var(--scania-color-grey-700);
91
+ --component-table-background-header-default: var(--scania-color-grey-700);
92
+ --component-table-background-header-hover: var(--scania-color-grey-650);
93
+ --component-table-background-toolbar-default: var(--scania-color-grey-650);
94
+ --component-table-background-cell-primary-default: var(--scania-color-grey-850);
95
+ --component-table-background-cell-primary-hover: var(--scania-color-grey-750);
96
+ --component-table-background-cell-secondary-default: var(--scania-color-grey-800);
97
+ --component-table-background-cell-secondary-hover: var(--scania-color-grey-750);
98
+ --component-table-background-cell-selected-default: var(--scania-color-grey-700);
99
+ --component-table-background-cell-selected-hover: var(--scania-color-grey-650);
100
+ --component-table-background-cell-expanded-default: var(
101
+ --component-table-background-cell-selected-default
102
+ );
103
+ --component-table-border-divider-default: var(--color-border-discrete);
104
+ --component-table-border-divider-hover: var(--scania-color-transparent-inverse-500);
105
+ --component-table-border-radius-default: var(--scania-unit-4);
106
+ --component-table-text-cell-default: var(--color-text-strong);
107
+ --component-table-text-footer-default: var(--color-text-strong);
108
+ --component-table-text-header-default: var(--color-text-strong);
109
+ --component-table-text-placeholder-default: var(--color-text-subtle);
110
+ --component-table-text-toolbar-default: var(--color-text-strong);
111
+ --component-table-text-value-default: var(--color-text-strong);
112
+ --component-table-icon-edit-default: var(--color-icon-strong);
113
+ --component-table-icon-expand-default: var(--color-icon-strong);
114
+ --component-table-icon-filter-default: var(--color-icon-strong);
115
+ --component-table-icon-prefix-default: var(--color-icon-strong);
116
+ --component-table-icon-sort-default: var(--color-icon-strong);
117
+ }
118
+
119
+ .traton .tds-mode-dark,
120
+ .traton.tds-mode-dark,
121
+ .traton .tl-mode-dark,
122
+ .traton.tl-mode-dark {
123
+ --component-table-background-footer-default: var(--traton-color-blue-800);
124
+ --component-table-background-header-default: var(--traton-color-blue-800);
125
+ --component-table-background-header-hover: var(--traton-color-blue-700);
126
+ --component-table-background-toolbar-default: var(--traton-color-blue-700);
127
+ --component-table-background-cell-primary-default: var(--color-background-layer-01);
128
+ --component-table-background-cell-primary-hover: var(--traton-color-blue-850);
129
+ --component-table-background-cell-secondary-default: var(--color-background-layer-02);
130
+ --component-table-background-cell-secondary-hover: var(--traton-color-blue-800);
131
+ --component-table-background-cell-selected-default: var(--traton-color-blue-800);
132
+ --component-table-background-cell-selected-hover: var(--traton-color-blue-700);
133
+ --component-table-background-cell-expanded-default: var(
134
+ --component-table-background-cell-selected-default
135
+ );
136
+ --component-table-border-divider-default: var(--color-border-discrete);
137
+ --component-table-border-divider-hover: var(--traton-color-transparent-inverse-400);
138
+ --component-table-border-radius-default: var(--traton-unit-4);
139
+ --component-table-text-cell-default: var(--color-text-strong);
140
+ --component-table-text-footer-default: var(--color-text-strong);
141
+ --component-table-text-header-default: var(--color-text-strong);
142
+ --component-table-text-placeholder-default: var(--color-text-subtle);
143
+ --component-table-text-toolbar-default: var(--color-text-strong);
144
+ --component-table-text-value-default: var(--color-text-strong);
145
+ --component-table-icon-edit-default: var(--color-icon-strong);
146
+ --component-table-icon-expand-default: var(--color-icon-strong);
147
+ --component-table-icon-filter-default: var(--color-icon-strong);
148
+ --component-table-icon-prefix-default: var(--color-icon-strong);
149
+ --component-table-icon-sort-default: var(--color-icon-strong);
150
+ }
151
+
152
+ .tl-table {
153
+ --table-background: var(--table-body-row);
154
+ --table-cell-background: var(--table-body-row);
155
+ /* Table-header */
156
+ --table-header: var(--component-table-background-header-default);
157
+ --table-header-hover: var(--component-table-background-header-hover);
158
+ --table-header-text-color: var(--component-table-text-header-default);
159
+ /* Table-toolbar */
160
+ --table-toolbar: var(--component-table-background-toolbar-default);
161
+ --table-toolbar-text-color: var(--component-table-text-toolbar-default);
162
+ /* Table-footer */
163
+ --table-footer: var(--component-table-background-footer-default);
164
+ --table-footer-text-color: var(--component-table-text-footer-default);
165
+ --table-footer-page-selector-input-background: var(--component--input-background-secondary);
166
+ /* Divider */
167
+ --table-divider: var(--component-table-border-divider-default);
168
+ --table-divider-hover: var(--component-table-border-divider-hover);
169
+ --table-border-radius: calc(var(--component-table-border-radius-default) * 1px);
170
+ /* Table-body-cell */
171
+ --table-body-cell-hover: var(--component-table-background-cell-primary-hover);
172
+ --table-body-cell-text-color: var(--component-table-text-cell-default);
173
+ /* Table-body-row */
174
+ --table-body-row: var(--component-table-background-cell-primary-default);
175
+ --table-body-row-hover: var(--component-table-background-cell-primary-hover);
176
+ --table-zebra-mode: var(--component-table-background-cell-secondary-default);
177
+ --table-body-row-selected: var(--component-table-background-cell-selected-default);
178
+ --table-body-row-expanded: var(--component-table-background-cell-expanded-default);
179
+ --table-body-row-selected-hover: var(--component-table-background-cell-selected-hover);
180
+ /* Table input body */
181
+ --table-input-placeholder-text-color: var(--component-table-text-placeholder-default);
182
+ --table-input-value-text-color: var(--component-table-text-value-default);
183
+ --table-input-opacity-disabled: calc(var(--component--input-opacity-disabled) / 100);
184
+ /* Table-icons */
185
+ --table-edit-icon-color: var(--component-table-icon-edit-default);
186
+ --table-expand-icon-color: var(--component-table-icon-expand-default);
187
+ --table-filter-icon-color: var(--component-table-icon-filter-default);
188
+ --table-prefix-icon-color: var(--component-table-icon-prefix-default);
189
+ --table-sort-icon-color: var(--component-table-icon-sort-default);
190
+ }
191
+ .tl-table.tl-table--primary {
192
+ --table-body-row: var(--component-table-background-cell-primary-default);
193
+ --table-body-row-hover: var(--component-table-background-cell-primary-hover);
194
+ --table-body-cell-hover: var(--component-table-background-cell-primary-hover);
195
+ --table-zebra-mode: var(--component-table-background-cell-secondary-default);
196
+ }
197
+ .tl-table.tl-table--secondary {
198
+ --table-body-row: var(--component-table-background-cell-secondary-default);
199
+ --table-body-row-hover: var(--component-table-background-cell-secondary-hover);
200
+ --table-body-cell-hover: var(--component-table-background-cell-secondary-hover);
201
+ --table-zebra-mode: var(--component-table-background-cell-primary-default);
202
+ }
203
+
204
+ /* Typography Usage mixins */
205
+ .tl-table__footer {
206
+ display: table-footer-group;
207
+ height: var(--unit-48);
208
+ }
209
+ .tl-table--compact .tl-table__footer {
210
+ height: var(--unit-32);
211
+ }
212
+
213
+ .tl-table__footer .tl-dropdown__text {
214
+ max-width: calc(100% - 20px);
215
+ }
216
+
217
+ .tl-table__footer-row {
218
+ display: table-row;
219
+ border-bottom: 1px solid var(--table-divider);
220
+ background-color: var(--table-footer);
221
+ color: var(--table-footer-text-color);
222
+ transition: background-color 200ms ease;
223
+ }
224
+
225
+ .tl-table__footer-cell {
226
+ padding: 0 var(--unit-16);
227
+ }
228
+
229
+ .tl-table__pagination {
230
+ height: var(--unit-48);
231
+ display: flex;
232
+ align-items: center;
233
+ justify-content: space-between;
234
+ }
235
+ .tl-table__pagination .tl-dropdown__button,
236
+ .tl-table__pagination .tl-dropdown__select,
237
+ .tl-table__pagination .tl-dropdown__input {
238
+ background-color: var(--table-footer-page-selector-input-background);
239
+ }
240
+
241
+ .tl-table__row-selector,
242
+ .tl-table__page-selector {
243
+ display: flex;
244
+ align-items: center;
245
+ }
246
+
247
+ .tl-table__rows-per-page {
248
+ margin-right: var(--unit-16);
249
+ display: flex;
250
+ align-items: center;
251
+ }
252
+ .tl-table__rows-per-page .tl-dropdown {
253
+ width: 77px;
254
+ }
255
+
256
+ .tl-table__rows-per-page-label {
257
+ font-family: var(--type-system-body-01-font-family);
258
+ font-size: calc(var(--type-system-body-01-font-size) * 1px);
259
+ line-height: calc(var(--type-system-body-01-line-height) * 1px);
260
+ font-weight: var(--type-system-body-01-font-weight);
261
+ letter-spacing: calc(var(--type-system-body-01-letter-spacing) * 1px);
262
+ text-transform: var(--type-system-body-01-text-transform);
263
+ margin-right: var(--unit-8);
264
+ }
265
+
266
+ .tl-table__page-selector .tl-text-field {
267
+ min-width: unset;
268
+ width: 87px;
269
+ }
270
+ .tl-table__page-selector .tl-text-field .tl-text-field__input {
271
+ font-family: var(--type-system-body-01-font-family);
272
+ font-size: calc(var(--type-system-body-01-font-size) * 1px);
273
+ line-height: calc(var(--type-system-body-01-line-height) * 1px);
274
+ font-weight: var(--type-system-body-01-font-weight);
275
+ letter-spacing: calc(var(--type-system-body-01-letter-spacing) * 1px);
276
+ text-transform: var(--type-system-body-01-text-transform);
277
+ background-color: var(--table-footer-page-selector-input-background);
278
+ color: var(--table-footer-text-color);
279
+ margin-right: var(--unit-10);
280
+ width: 77px;
281
+ height: 40px;
282
+ padding-left: 16px;
283
+ }
284
+ .tl-table__page-selector .tl-text-field .tl-text-field__input:hover {
285
+ background-color: var(--table-footer-page-selector-input-background);
286
+ }
287
+ .tl-table__page-selector .tl-text-field .tl-text-field__input:disabled {
288
+ opacity: var(--table-input-opacity-disabled);
289
+ }
290
+
291
+ .tl-table__footer-text {
292
+ padding: 1px 10px 0 0;
293
+ font-family: var(--type-system-body-01-font-family);
294
+ font-size: calc(var(--type-system-body-01-font-size) * 1px);
295
+ line-height: calc(var(--type-system-body-01-line-height) * 1px);
296
+ font-weight: var(--type-system-body-01-font-weight);
297
+ letter-spacing: calc(var(--type-system-body-01-letter-spacing) * 1px);
298
+ text-transform: var(--type-system-body-01-text-transform);
299
+ }
300
+
301
+ .tl-table {
302
+ box-sizing: border-box;
303
+ }
304
+ .tl-table * {
305
+ box-sizing: border-box;
306
+ }
307
+ .tl-table {
308
+ border-collapse: collapse;
309
+ display: table;
310
+ color: var(--table-body-cell-text-color);
311
+ background-color: var(--table-header);
312
+ border-top-left-radius: var(--table-border-radius);
313
+ border-top-right-radius: var(--table-border-radius);
314
+ }
315
+ .tl-table--responsive {
316
+ width: 100%;
317
+ }
318
+ .tl-table--horizontal-scroll {
319
+ display: block;
320
+ overflow-x: auto;
321
+ white-space: nowrap;
322
+ }
323
+ .tl-table--horizontal-scroll::-webkit-scrollbar {
324
+ height: var(--tl-scrollbar-height);
325
+ }
326
+ .tl-table--horizontal-scroll::-webkit-scrollbar-track {
327
+ background: var(--tl-scrollbar-track-color);
328
+ }
329
+ .tl-table--horizontal-scroll::-webkit-scrollbar-thumb {
330
+ border-radius: var(--tl-scrollbar-thumb-border-radius);
331
+ background: var(--tl-scrollbar-thumb-color);
332
+ border-width: var(--tl-scrollbar-thumb-border-width);
333
+ border-style: solid;
334
+ border-color: transparent;
335
+ background-clip: padding-box;
336
+ }
337
+ .tl-table--horizontal-scroll::-webkit-scrollbar-thumb:hover {
338
+ border-width: var(--tl-scrollbar-thumb-border-hover-width);
339
+ border-radius: var(--tl-scrollbar-hover-thumb-border-radius);
340
+ }
341
+ .tl-table--horizontal-scroll::-webkit-scrollbar-button {
342
+ height: 0;
343
+ width: 0;
344
+ }
345
+ @supports not selector(::-webkit-scrollbar) {
346
+ .tl-table--horizontal-scroll {
347
+ scrollbar-color: var(--tl-scrollbar-thumb-color) var(--tl-scrollbar-track-color);
348
+ scrollbar-width: var(--tl-scrollbar-width-standard);
349
+ }
350
+ }
351
+
352
+ .tl-table__header {
353
+ display: table-header-group;
354
+ }
355
+
356
+ .tl-table__body {
357
+ display: table-row-group;
358
+ }
359
+
360
+ .tl-table__row {
361
+ display: table-row;
362
+ background-color: var(--table-background);
363
+ transition: background-color 200ms ease;
364
+ color: var(--table-body-cell-text-color);
365
+ }
366
+ .tl-table__row:not(.tl-table__row--expanded) {
367
+ border-bottom: 1px solid var(--table-divider);
368
+ }
369
+ .tl-table__row:hover:not(.tl-table__row--expanded, .tl-table__row--selected) {
370
+ --table-background: var(--table-body-row-hover);
371
+ --table-cell-background: var(--table-body-row-hover);
372
+ }
373
+ .tl-table__row--expanded {
374
+ --table-cell-background: var(--table-body-row-expanded);
375
+ }
376
+ .tl-table--zebra-columns-odd .tl-table__row:not(:hover, .tl-table__row--selected, .tl-table__row--expanded) .tl-table__body-cell:not(.tl-table__body-cell--column-highlight):nth-child(odd) {
377
+ --table-background: var(--table-zebra-mode);
378
+ --table-cell-background: var(--table-zebra-mode);
379
+ }
380
+ .tl-table--zebra-columns-even .tl-table__row:not(:hover, .tl-table__row--selected, .tl-table__row--expanded) .tl-table__body-cell:not(.tl-table__body-cell--column-highlight):nth-child(even) {
381
+ --table-background: var(--table-zebra-mode);
382
+ --table-cell-background: var(--table-zebra-mode);
383
+ }
384
+ .tl-table--zebra-rows-odd .tl-table__row:not(:hover, .tl-table__row--selected, .tl-table__row--expanded):nth-child(odd of .tl-table__row) {
385
+ --table-background: var(--table-zebra-mode);
386
+ --table-cell-background: var(--table-zebra-mode);
387
+ }
388
+ .tl-table--zebra-rows-even .tl-table__row:not(:hover, .tl-table__row--selected, .tl-table__row--expanded):nth-child(even of .tl-table__row) {
389
+ --table-background: var(--table-zebra-mode);
390
+ --table-cell-background: var(--table-zebra-mode);
391
+ }
392
+ .tl-table__row--selected {
393
+ --table-background: var(--table-body-row-selected);
394
+ --table-cell-background: var(--table-body-row-selected);
395
+ }
396
+ .tl-table__row--selected:hover {
397
+ --table-background: var(--table-body-row-selected-hover);
398
+ --table-cell-background: var(--table-body-row-selected-hover);
399
+ }
400
+ .tl-table--clickable .tl-table__row, .tl-table__row--clickable {
401
+ cursor: pointer;
402
+ }
403
+ .tl-table__row--clickable:focus-visible {
404
+ outline: 2px solid var(--component--focus-ring-color-strong);
405
+ box-shadow: inset 0 0 0 3px var(--component--focus-ring-color-discrete);
406
+ outline-offset: -2px;
407
+ z-index: 1;
408
+ }
409
+ .tl-table__header .tl-table__row {
410
+ background-color: var(--table-header);
411
+ border-bottom: 1px solid var(--table-divider);
412
+ }
413
+
414
+ .tl-table__header-cell {
415
+ display: table-cell;
416
+ padding: 16px;
417
+ font-family: var(--type-system-title-01-font-family);
418
+ font-size: calc(var(--type-system-title-01-font-size) * 1px);
419
+ line-height: calc(var(--type-system-title-01-line-height) * 1px);
420
+ font-weight: var(--type-system-title-01-font-weight);
421
+ letter-spacing: calc(var(--type-system-title-01-letter-spacing) * 1px);
422
+ color: var(--table-header-text-color);
423
+ text-align: left;
424
+ transition: background-color 200ms ease;
425
+ min-width: 192px;
426
+ }
427
+ .tl-table__header-cell:hover:not(.tl-table__header-cell--checkbox, .tl-table__header-cell--expand) {
428
+ background-color: var(--table-header-hover);
429
+ }
430
+ .tl-table__header-cell:first-of-type {
431
+ border-top-left-radius: var(--table-border-radius);
432
+ }
433
+ .tl-table__header-cell:last-of-type {
434
+ border-top-right-radius: var(--table-border-radius);
435
+ }
436
+ .tl-table--vertical-dividers .tl-table__header-cell:not(:last-child) {
437
+ border-right: 1px solid var(--table-divider);
438
+ }
439
+ .tl-table:has(.tl-table__toolbar) .tl-table__header-cell:first-of-type, .tl-table__header-cell:has(.tl-table__header-input-wrapper):first-of-type {
440
+ border-top-left-radius: 0;
441
+ }
442
+ .tl-table:has(.tl-table__toolbar) .tl-table__header-cell:last-of-type, .tl-table__header-cell:has(.tl-table__header-input-wrapper):last-of-type {
443
+ border-top-right-radius: 0;
444
+ }
445
+ .tl-table__header-cell:has(.tl-table__header-input-wrapper), .tl-table--no-header-padding .tl-table__header-cell, .tl-table__header-cell--sortable {
446
+ padding: 0;
447
+ }
448
+ .tl-table__header-cell--checkbox, .tl-table__header-cell--expand {
449
+ min-width: 48px;
450
+ width: 48px;
451
+ padding: 0;
452
+ text-align: center;
453
+ }
454
+ .tl-table--compact .tl-table__header-cell {
455
+ height: 32px;
456
+ padding: 8px 16px;
457
+ }
458
+ .tl-table--compact .tl-table__header-cell--sortable {
459
+ padding: 0;
460
+ }
461
+ .tl-table--compact .tl-table__header-cell--checkbox, .tl-table--compact .tl-table__header-cell--expand, .tl-table--compact .tl-table__header-cell:has(.tl-table__header-input-wrapper) {
462
+ width: 32px;
463
+ min-width: 32px;
464
+ padding: 0;
465
+ }
466
+ .tl-table--no-min-width .tl-table__header-cell {
467
+ min-width: unset;
468
+ }
469
+ .tl-table--header-text-align-left .tl-table__header-cell {
470
+ text-align: left;
471
+ }
472
+ .tl-table--header-text-align-start .tl-table__header-cell {
473
+ text-align: start;
474
+ }
475
+ .tl-table--header-text-align-center .tl-table__header-cell {
476
+ text-align: center;
477
+ }
478
+ .tl-table--header-text-align-right .tl-table__header-cell {
479
+ text-align: right;
480
+ }
481
+ .tl-table--header-text-align-end .tl-table__header-cell {
482
+ text-align: end;
483
+ }
484
+
485
+ .tl-table__header-button {
486
+ display: flex;
487
+ align-items: center;
488
+ gap: 8px;
489
+ justify-content: start;
490
+ flex-direction: row;
491
+ width: 100%;
492
+ height: 100%;
493
+ padding: 16px;
494
+ background-color: transparent;
495
+ border: none;
496
+ cursor: pointer;
497
+ transition: background-color 200ms ease;
498
+ font-family: var(--type-system-title-01-font-family);
499
+ font-size: calc(var(--type-system-title-01-font-size) * 1px);
500
+ line-height: calc(var(--type-system-title-01-line-height) * 1px);
501
+ font-weight: var(--type-system-title-01-font-weight);
502
+ letter-spacing: calc(var(--type-system-title-01-letter-spacing) * 1px);
503
+ color: var(--table-header-text-color);
504
+ text-align: left;
505
+ }
506
+ .tl-table__header-button:focus-visible, .tl-table__header-button:focus, .tl-table__header-button:active {
507
+ outline: 2px solid var(--component--focus-ring-color-strong);
508
+ box-shadow: inset 0 0 0 3px var(--component--focus-ring-color-discrete);
509
+ outline-offset: -2px;
510
+ z-index: 1;
511
+ }
512
+ .tl-table--compact .tl-table__header-button {
513
+ height: 32px;
514
+ }
515
+
516
+ .tl-table__header-button-text {
517
+ color: var(--table-header-text-color);
518
+ text-align: left;
519
+ }
520
+
521
+ .tl-table__header-button-icon {
522
+ flex: 0 0 16px;
523
+ height: 16px;
524
+ width: 16px;
525
+ opacity: 0;
526
+ transform-origin: center;
527
+ transition: opacity 200ms ease-in, transform 200ms ease;
528
+ color: var(--table-sort-icon-color);
529
+ }
530
+
531
+ .tl-table__header-button:focus-visible .tl-table__header-button-icon,
532
+ .tl-table__header-button:focus .tl-table__header-button-icon,
533
+ .tl-table__header-button:active .tl-table__header-button-icon,
534
+ .tl-table__header-button:hover .tl-table__header-button-icon {
535
+ opacity: 1;
536
+ }
537
+
538
+ .tl-table__header-cell--is-sorted .tl-table__header-button-icon {
539
+ opacity: 1;
540
+ }
541
+
542
+ .tl-table__header-cell--is-sorted .tl-table__header-button-icon--rotate {
543
+ transform: rotate(180deg);
544
+ }
545
+
546
+ .tl-table__body-cell {
547
+ display: table-cell;
548
+ padding: 16px;
549
+ background-color: var(--table-cell-background);
550
+ color: var(--table-body-cell-text-color);
551
+ font-family: var(--type-system-body-01-font-family);
552
+ font-size: calc(var(--type-system-body-01-font-size) * 1px);
553
+ line-height: calc(var(--type-system-body-01-line-height) * 1px);
554
+ font-weight: var(--type-system-body-01-font-weight);
555
+ letter-spacing: calc(var(--type-system-body-01-letter-spacing) * 1px);
556
+ text-transform: var(--type-system-body-01-text-transform);
557
+ transition: background-color 200ms ease;
558
+ min-width: 192px;
559
+ }
560
+ .tl-table__body-cell:has(.tl-table__expand-control) {
561
+ min-width: unset;
562
+ width: 48px;
563
+ height: 48px;
564
+ padding: 0;
565
+ }
566
+ .tl-table__body-cell:has(.tl-checkbox) {
567
+ min-width: 48px;
568
+ width: 48px;
569
+ padding: 0;
570
+ text-align: center;
571
+ padding: 8px 16px;
572
+ }
573
+ .tl-table__body-cell:focus {
574
+ outline: 2px solid var(--component--focus-ring-color-strong);
575
+ box-shadow: inset 0 0 0 3px var(--component--focus-ring-color-discrete);
576
+ outline-offset: -2px;
577
+ z-index: 1;
578
+ }
579
+ .tl-table__body-cell--column-highlight {
580
+ --table-cell-background: var(--table-body-cell-hover);
581
+ }
582
+ .tl-table__row--selected .tl-table__body-cell--column-highlight {
583
+ --table-cell-background: var(--table-body-row-selected-hover);
584
+ }
585
+ .tl-table__row--expanded .tl-table__body-cell--column-highlight {
586
+ --table-cell-background: var(--table-body-row-selected-hover);
587
+ }
588
+ .tl-table--compact .tl-table__body-cell {
589
+ height: 32px;
590
+ padding: 8px 16px;
591
+ }
592
+ .tl-table--compact .tl-table__body-cell:has(.tl-checkbox) {
593
+ height: 32px;
594
+ width: 32px;
595
+ padding: 4px;
596
+ min-width: unset;
597
+ }
598
+ .tl-table--compact .tl-table__body-cell:has(.tl-table__expand-control) {
599
+ min-width: unset;
600
+ width: 32px;
601
+ height: 32px;
602
+ padding: 0;
603
+ }
604
+ .tl-table--no-min-width .tl-table__body-cell {
605
+ min-width: unset;
606
+ }
607
+ .tl-table--vertical-dividers .tl-table__body-cell:not(:last-child) {
608
+ border-right: 1px solid var(--table-divider);
609
+ }
610
+ .tl-table--vertical-dividers .tl-table__row--expanded .tl-table__body-cell:not(:has(.tl-table__expand-control)) {
611
+ border-bottom: 1px solid var(--table-divider);
612
+ }
613
+ .tl-table--cell-text-align-left .tl-table__body-cell {
614
+ text-align: left;
615
+ }
616
+ .tl-table--cell-text-align-start .tl-table__body-cell {
617
+ text-align: start;
618
+ }
619
+ .tl-table--cell-text-align-center .tl-table__body-cell {
620
+ text-align: center;
621
+ }
622
+ .tl-table--cell-text-align-right .tl-table__body-cell {
623
+ text-align: right;
624
+ }
625
+ .tl-table--cell-text-align-end .tl-table__body-cell {
626
+ text-align: end;
627
+ }
628
+ .tl-table--no-padding .tl-table__body-cell {
629
+ padding: 0;
630
+ }
631
+
632
+ .tl-table__toolbar {
633
+ box-sizing: border-box;
634
+ }
635
+ .tl-table__toolbar * {
636
+ box-sizing: border-box;
637
+ }
638
+ .tl-table__toolbar {
639
+ display: table-caption;
640
+ position: relative;
641
+ background-color: var(--table-toolbar);
642
+ color: var(--table-toolbar-text-color);
643
+ padding: 0 var(--unit-16);
644
+ height: 64px;
645
+ border-top-left-radius: var(--table-border-radius);
646
+ border-top-right-radius: var(--table-border-radius);
647
+ }
648
+ .tl-table--compact .tl-table__toolbar {
649
+ height: 56px;
650
+ }
651
+
652
+ .tl-table__upper-bar {
653
+ width: 100%;
654
+ height: 100%;
655
+ display: flex;
656
+ justify-content: space-between;
657
+ }
658
+
659
+ .tl-table__actionbar-left {
660
+ display: flex;
661
+ align-items: center;
662
+ }
663
+
664
+ .tl-table__title {
665
+ font-family: var(--type-system-title-01-font-family);
666
+ font-size: calc(var(--type-system-title-01-font-size) * 1px);
667
+ line-height: calc(var(--type-system-title-01-line-height) * 1px);
668
+ font-weight: var(--type-system-title-01-font-weight);
669
+ letter-spacing: calc(var(--type-system-title-01-letter-spacing) * 1px);
670
+ display: flex;
671
+ align-self: baseline;
672
+ text-align: left;
673
+ padding-top: var(--unit-16);
674
+ margin-right: var(--unit-8);
675
+ }
676
+
677
+ .tl-table__actionbar-right {
678
+ display: flex;
679
+ align-self: center;
680
+ column-gap: 8px;
681
+ position: relative;
682
+ }
683
+
684
+ .tl-table__header-input-wrapper {
685
+ position: relative;
686
+ width: 100%;
687
+ height: 100%;
688
+ }
689
+
690
+ .tl-table__header-input-wrapper .tl-icon {
691
+ color: var(--table-filter-icon-color);
692
+ position: absolute;
693
+ left: 15px;
694
+ top: 50%;
695
+ transform: translateY(-50%);
696
+ z-index: 1;
697
+ pointer-events: none;
698
+ }
699
+
700
+ .tl-table__header-input {
701
+ box-sizing: border-box;
702
+ font-family: var(--type-system-body-01-font-family);
703
+ font-size: calc(var(--type-system-body-01-font-size) * 1px);
704
+ line-height: calc(var(--type-system-body-01-line-height) * 1px);
705
+ font-weight: var(--type-system-body-01-font-weight);
706
+ letter-spacing: calc(var(--type-system-body-01-letter-spacing) * 1px);
707
+ text-transform: var(--type-system-body-01-text-transform);
708
+ color: var(--table-input-value-text-color);
709
+ padding: 0 var(--unit-16);
710
+ width: 100%;
711
+ border-radius: 0;
712
+ background-color: transparent;
713
+ border: none;
714
+ outline: none;
715
+ }
716
+ .tl-table--compact .tl-table__header-input {
717
+ height: 32px;
718
+ }
719
+ .tl-table__header-input {
720
+ padding-left: 35px;
721
+ height: 48px;
722
+ }
723
+ .tl-table__header-input::placeholder {
724
+ color: var(--table-input-placeholder-text-color);
725
+ }
726
+ .tl-table__header-input:focus {
727
+ outline: 2px solid var(--component--focus-ring-color-strong);
728
+ box-shadow: inset 0 0 0 3px var(--component--focus-ring-color-discrete);
729
+ outline-offset: -2px;
730
+ z-index: 1;
731
+ }
732
+
733
+ .tl-table__body-cell .tl-text-field {
734
+ height: 48px;
735
+ min-width: auto;
736
+ padding-bottom: 0;
737
+ cursor: pointer;
738
+ }
739
+
740
+ .tl-table--compact .tl-table__body-cell .tl-text-field {
741
+ height: 32px;
742
+ }
743
+
744
+ .tl-table__body-cell .tl-text-field .tl-text-field__input:focus {
745
+ outline: 2px solid var(--component--focus-ring-color-strong);
746
+ box-shadow: inset 0 0 0 3px var(--component--focus-ring-color-discrete);
747
+ outline-offset: -2px;
748
+ z-index: 1;
749
+ }
750
+
751
+ .tl-table--compact .tl-table__body-cell .tl-text-field .tl-text-field__input {
752
+ height: 32px;
753
+ }
754
+
755
+ .tl-table__body-cell .tl-text-field .tl-text-field__suffix--icon {
756
+ display: none;
757
+ }
758
+
759
+ .tl-table__body-cell .tl-text-field:hover:not(.tl-text-field:has(.tl-text-field__input:disabled)) .tl-text-field__suffix--icon,
760
+ .tl-table__body-cell .tl-text-field:has(.tl-text-field__input:not(:disabled):focus) .tl-text-field__suffix--icon {
761
+ display: inline-block;
762
+ }
763
+
764
+ .tl-table__expand-control {
765
+ background-color: transparent;
766
+ border: none;
767
+ display: inline-flex;
768
+ align-items: center;
769
+ justify-content: center;
770
+ box-shadow: none;
771
+ position: relative;
772
+ text-decoration: none;
773
+ cursor: pointer;
774
+ height: 48px;
775
+ width: 48px;
776
+ color: var(--table-expand-icon-color);
777
+ }
778
+ .tl-table--compact .tl-table__expand-control {
779
+ padding: 0;
780
+ height: 32px;
781
+ width: 32px;
782
+ }
783
+ .tl-table__expand-control:focus, .tl-table__expand-control:focus-visible, .tl-table__expand-control:active {
784
+ outline: 2px solid var(--component--focus-ring-color-strong);
785
+ box-shadow: inset 0 0 0 3px var(--component--focus-ring-color-discrete);
786
+ outline-offset: -2px;
787
+ z-index: 1;
788
+ }
789
+
790
+ .tl-table__expand-icon {
791
+ transition: transform 200ms ease;
792
+ transform: rotate(0);
793
+ color: var(--table-expand-icon-color);
794
+ }
795
+
796
+ .tl-table__row--expanded .tl-table__expand-icon {
797
+ transform: rotate(180deg);
798
+ }
799
+
800
+ .tl-table__expand-row {
801
+ display: none;
802
+ transition: background-color 200ms ease;
803
+ }
804
+ .tl-table__expand-row--expanded {
805
+ background-color: var(--table-body-row-expanded);
806
+ border-bottom: 1px solid var(--table-divider);
807
+ display: table-row;
808
+ }
809
+
810
+ .tl-table__expand-row-cell {
811
+ max-width: 1px;
812
+ overflow: auto;
813
+ padding: 16px 16px 16px 66px;
814
+ color: var(--table-body-cell-text-color);
815
+ }
816
+ .tl-table__expand-row-cell::-webkit-scrollbar {
817
+ height: var(--tl-scrollbar-height);
818
+ }
819
+ .tl-table__expand-row-cell::-webkit-scrollbar-track {
820
+ background: var(--tl-scrollbar-track-color);
821
+ }
822
+ .tl-table__expand-row-cell::-webkit-scrollbar-thumb {
823
+ border-radius: var(--tl-scrollbar-thumb-border-radius);
824
+ background: var(--tl-scrollbar-thumb-color);
825
+ border-width: var(--tl-scrollbar-thumb-border-width);
826
+ border-style: solid;
827
+ border-color: transparent;
828
+ background-clip: padding-box;
829
+ }
830
+ .tl-table__expand-row-cell::-webkit-scrollbar-thumb:hover {
831
+ border-width: var(--tl-scrollbar-thumb-border-hover-width);
832
+ border-radius: var(--tl-scrollbar-hover-thumb-border-radius);
833
+ }
834
+ .tl-table__expand-row-cell::-webkit-scrollbar-button {
835
+ height: 0;
836
+ width: 0;
837
+ }
838
+ @supports not selector(::-webkit-scrollbar) {
839
+ .tl-table__expand-row-cell {
840
+ scrollbar-color: var(--tl-scrollbar-thumb-color) var(--tl-scrollbar-track-color);
841
+ scrollbar-width: var(--tl-scrollbar-width-standard);
842
+ }
843
+ }
844
+ .tl-table--compact .tl-table__expand-row-cell {
845
+ padding: 8px 16px 8px 66px;
846
+ }
847
+ .tl-table__expand-row-cell--overflow-visible {
848
+ overflow: visible;
849
+ }
850
+ .tl-table__expand-row-cell--overflow-hidden {
851
+ overflow: hidden;
852
+ }
853
+
854
+ .tl-table__body .tl-text-field__input {
855
+ border: none;
856
+ border-radius: 0;
857
+ background-color: var(--table-cell-background);
858
+ }
859
+ .tl-table__body .tl-text-field__input:disabled {
860
+ background-color: var(--table-cell-background);
861
+ }
862
+ .tl-table__body .tl-text-field__input:hover {
863
+ border: none;
864
+ border-radius: 0;
865
+ }
866
+
867
+ .tl-table__body .tl-text-field:hover .tl-text-field__input {
868
+ border: none !important;
869
+ border-radius: 0;
870
+ }
871
+
872
+ .tl-table--compact .tl-table__header-cell--checkbox {
873
+ padding: 4px;
874
+ }
875
+
876
+ .tl-table__header-cell--checkbox {
877
+ padding: 8px 16px;
878
+ }