@scania/tegel-lite 1.7.0 → 1.8.0-dd-select-all-beta.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.
- package/dist/components.css +1364 -670
- package/dist/global.css +4 -0
- package/dist/tl-datetime.css +222 -247
- package/dist/tl-dropdown.css +79 -43
- package/dist/tl-folder-tabs.css +0 -1
- package/dist/tl-popover-menu.css +1 -1
- package/dist/tl-table.css +878 -0
- package/dist/tl-text-field.css +47 -71
- package/dist/tl-textarea.css +30 -37
- package/package.json +4 -3
package/dist/components.css
CHANGED
|
@@ -2283,128 +2283,174 @@
|
|
|
2283
2283
|
padding: 0 6px;
|
|
2284
2284
|
}
|
|
2285
2285
|
|
|
2286
|
+
/**
|
|
2287
|
+
* Do not edit directly, this file was auto-generated.
|
|
2288
|
+
*/
|
|
2289
|
+
:root,
|
|
2290
|
+
.tds-mode-light,
|
|
2291
|
+
.scania .tds-mode-light,
|
|
2292
|
+
.scania.tds-mode-light,
|
|
2293
|
+
.scania .tl-mode-light,
|
|
2294
|
+
.scania.tl-mode-light {
|
|
2295
|
+
--component--input-background-primary: var(--color-background-layer-01);
|
|
2296
|
+
--component--input-background-secondary: var(--color-background-layer-02);
|
|
2297
|
+
--component--input-border-default: var(--color-border-soft);
|
|
2298
|
+
--component--input-border-hover: var(--color-border-strong);
|
|
2299
|
+
--component--input-border-success-default: var(--color-border-strong);
|
|
2300
|
+
--component--input-border-error-default: var(--color-system-danger-default);
|
|
2301
|
+
--component--input-border-radius-default: var(--scania-unit-4);
|
|
2302
|
+
--component--input-border-radius-none: var(--scania-unit-0);
|
|
2303
|
+
--component--input-border-radius-top-left: var(--component--input-border-radius-default);
|
|
2304
|
+
--component--input-border-radius-top-right: var(--component--input-border-radius-default);
|
|
2305
|
+
--component--input-border-radius-bottom-left: var(--component--input-border-radius-none);
|
|
2306
|
+
--component--input-border-radius-bottom-right: var(--component--input-border-radius-none);
|
|
2307
|
+
--component--input-border-width-default: var(--scania-unit-1);
|
|
2308
|
+
--component--input-border-width-none: var(--scania-unit-0);
|
|
2309
|
+
--component--input-border-width-top: var(--component--input-border-width-none);
|
|
2310
|
+
--component--input-border-width-right: var(--component--input-border-width-none);
|
|
2311
|
+
--component--input-border-width-bottom: var(--component--input-border-width-default);
|
|
2312
|
+
--component--input-border-width-left: var(--component--input-border-width-none);
|
|
2313
|
+
--component--input-icon-prefix-default: var(--color-text-defined);
|
|
2314
|
+
--component--input-icon-suffix-default: var(--color-text-defined);
|
|
2315
|
+
--component--input-icon-error-default: var(--color-system-danger-default);
|
|
2316
|
+
--component--input-icon-control-default: var(--color-icon-strong);
|
|
2317
|
+
--component--input-icon-control-hover: var(--component--input-icon-control-default);
|
|
2318
|
+
--component--input-opacity-disabled: var(--scania-opacity-25);
|
|
2319
|
+
--component--input-text-counter-default: var(--color-text-defined);
|
|
2320
|
+
--component--input-text-label-default: var(--color-text-strong);
|
|
2321
|
+
--component--input-text-helper-default: var(--color-text-defined);
|
|
2322
|
+
--component--input-text-placeholder-default: var(--color-text-soft);
|
|
2323
|
+
--component--input-text-value-default: var(--color-text-strong);
|
|
2324
|
+
--component--input-text-error-default: var(--color-system-danger-default);
|
|
2325
|
+
}
|
|
2326
|
+
|
|
2327
|
+
.traton .tds-mode-light,
|
|
2328
|
+
.traton.tds-mode-light,
|
|
2329
|
+
.traton .tl-mode-light,
|
|
2330
|
+
.traton.tl-mode-light {
|
|
2331
|
+
--component--input-background-primary: var(--color-background-layer-01);
|
|
2332
|
+
--component--input-background-secondary: var(--color-background-layer-02);
|
|
2333
|
+
--component--input-border-default: var(--color-border-soft);
|
|
2334
|
+
--component--input-border-hover: var(--color-border-strong);
|
|
2335
|
+
--component--input-border-success-default: var(--color-border-strong);
|
|
2336
|
+
--component--input-border-error-default: var(--color-system-danger-default);
|
|
2337
|
+
--component--input-border-radius-default: var(--traton-unit-4);
|
|
2338
|
+
--component--input-border-radius-none: var(--traton-unit-0);
|
|
2339
|
+
--component--input-border-radius-top-left: var(--component--input-border-radius-default);
|
|
2340
|
+
--component--input-border-radius-top-right: var(--component--input-border-radius-default);
|
|
2341
|
+
--component--input-border-radius-bottom-left: var(--component--input-border-radius-default);
|
|
2342
|
+
--component--input-border-radius-bottom-right: var(--component--input-border-radius-default);
|
|
2343
|
+
--component--input-border-width-default: var(--traton-unit-1);
|
|
2344
|
+
--component--input-border-width-none: var(--traton-unit-0);
|
|
2345
|
+
--component--input-border-width-top: var(--component--input-border-width-default);
|
|
2346
|
+
--component--input-border-width-right: var(--component--input-border-width-default);
|
|
2347
|
+
--component--input-border-width-bottom: var(--component--input-border-width-default);
|
|
2348
|
+
--component--input-border-width-left: var(--component--input-border-width-default);
|
|
2349
|
+
--component--input-icon-prefix-default: var(--color-text-defined);
|
|
2350
|
+
--component--input-icon-suffix-default: var(--color-text-defined);
|
|
2351
|
+
--component--input-icon-error-default: var(--color-system-danger-default);
|
|
2352
|
+
--component--input-icon-control-default: var(--color-icon-subtle);
|
|
2353
|
+
--component--input-icon-control-hover: var(--component--input-icon-control-default);
|
|
2354
|
+
--component--input-opacity-disabled: var(--traton-opacity-25);
|
|
2355
|
+
--component--input-text-counter-default: var(--color-text-defined);
|
|
2356
|
+
--component--input-text-label-default: var(--color-text-strong);
|
|
2357
|
+
--component--input-text-helper-default: var(--color-text-defined);
|
|
2358
|
+
--component--input-text-placeholder-default: var(--color-text-subtle);
|
|
2359
|
+
--component--input-text-value-default: var(--color-text-strong);
|
|
2360
|
+
--component--input-text-error-default: var(--color-system-danger-default);
|
|
2361
|
+
}
|
|
2362
|
+
|
|
2363
|
+
.tds-mode-dark,
|
|
2364
|
+
.scania .tds-mode-dark,
|
|
2365
|
+
.scania.tds-mode-dark,
|
|
2366
|
+
.scania .tl-mode-dark,
|
|
2367
|
+
.scania.tl-mode-dark {
|
|
2368
|
+
--component--input-background-primary: var(--color-background-layer-01);
|
|
2369
|
+
--component--input-background-secondary: var(--color-background-layer-02);
|
|
2370
|
+
--component--input-border-default: var(--color-border-soft);
|
|
2371
|
+
--component--input-border-hover: var(--color-border-strong);
|
|
2372
|
+
--component--input-border-success-default: var(--color-border-strong);
|
|
2373
|
+
--component--input-border-error-default: var(--color-system-danger-default);
|
|
2374
|
+
--component--input-border-radius-default: var(--scania-unit-4);
|
|
2375
|
+
--component--input-border-radius-none: var(--scania-unit-0);
|
|
2376
|
+
--component--input-border-radius-top-left: var(--component--input-border-radius-default);
|
|
2377
|
+
--component--input-border-radius-top-right: var(--component--input-border-radius-default);
|
|
2378
|
+
--component--input-border-radius-bottom-left: var(--component--input-border-radius-none);
|
|
2379
|
+
--component--input-border-radius-bottom-right: var(--component--input-border-radius-none);
|
|
2380
|
+
--component--input-border-width-default: var(--scania-unit-1);
|
|
2381
|
+
--component--input-border-width-none: var(--scania-unit-0);
|
|
2382
|
+
--component--input-border-width-top: var(--component--input-border-width-none);
|
|
2383
|
+
--component--input-border-width-right: var(--component--input-border-width-none);
|
|
2384
|
+
--component--input-border-width-bottom: var(--component--input-border-width-default);
|
|
2385
|
+
--component--input-border-width-left: var(--component--input-border-width-none);
|
|
2386
|
+
--component--input-icon-prefix-default: var(--color-text-defined);
|
|
2387
|
+
--component--input-icon-suffix-default: var(--color-text-defined);
|
|
2388
|
+
--component--input-icon-error-default: var(--color-system-danger-default);
|
|
2389
|
+
--component--input-icon-control-default: var(--color-icon-strong);
|
|
2390
|
+
--component--input-icon-control-hover: var(--component--input-icon-control-default);
|
|
2391
|
+
--component--input-opacity-disabled: var(--scania-opacity-25);
|
|
2392
|
+
--component--input-text-counter-default: var(--color-text-defined);
|
|
2393
|
+
--component--input-text-label-default: var(--color-text-strong);
|
|
2394
|
+
--component--input-text-helper-default: var(--color-text-defined);
|
|
2395
|
+
--component--input-text-placeholder-default: var(--color-text-soft);
|
|
2396
|
+
--component--input-text-value-default: var(--color-text-strong);
|
|
2397
|
+
--component--input-text-error-default: var(--color-system-danger-default);
|
|
2398
|
+
}
|
|
2399
|
+
|
|
2400
|
+
.traton .tds-mode-dark,
|
|
2401
|
+
.traton.tds-mode-dark,
|
|
2402
|
+
.traton .tl-mode-dark,
|
|
2403
|
+
.traton.tl-mode-dark {
|
|
2404
|
+
--component--input-background-primary: var(--color-background-layer-01);
|
|
2405
|
+
--component--input-background-secondary: var(--color-background-layer-02);
|
|
2406
|
+
--component--input-border-default: var(--color-border-soft);
|
|
2407
|
+
--component--input-border-hover: var(--color-border-strong);
|
|
2408
|
+
--component--input-border-success-default: var(--color-border-strong);
|
|
2409
|
+
--component--input-border-error-default: var(--color-system-danger-default);
|
|
2410
|
+
--component--input-border-radius-default: var(--traton-unit-4);
|
|
2411
|
+
--component--input-border-radius-none: var(--traton-unit-0);
|
|
2412
|
+
--component--input-border-radius-top-left: var(--component--input-border-radius-default);
|
|
2413
|
+
--component--input-border-radius-top-right: var(--component--input-border-radius-default);
|
|
2414
|
+
--component--input-border-radius-bottom-left: var(--component--input-border-radius-default);
|
|
2415
|
+
--component--input-border-radius-bottom-right: var(--component--input-border-radius-default);
|
|
2416
|
+
--component--input-border-width-default: var(--traton-unit-1);
|
|
2417
|
+
--component--input-border-width-none: var(--traton-unit-0);
|
|
2418
|
+
--component--input-border-width-top: var(--component--input-border-width-default);
|
|
2419
|
+
--component--input-border-width-right: var(--component--input-border-width-default);
|
|
2420
|
+
--component--input-border-width-bottom: var(--component--input-border-width-default);
|
|
2421
|
+
--component--input-border-width-left: var(--component--input-border-width-default);
|
|
2422
|
+
--component--input-icon-prefix-default: var(--color-text-defined);
|
|
2423
|
+
--component--input-icon-suffix-default: var(--color-text-defined);
|
|
2424
|
+
--component--input-icon-error-default: var(--color-system-danger-default);
|
|
2425
|
+
--component--input-icon-control-default: var(--color-icon-subtle);
|
|
2426
|
+
--component--input-icon-control-hover: var(--component--input-icon-control-default);
|
|
2427
|
+
--component--input-opacity-disabled: var(--traton-opacity-25);
|
|
2428
|
+
--component--input-text-counter-default: var(--color-text-defined);
|
|
2429
|
+
--component--input-text-label-default: var(--color-text-strong);
|
|
2430
|
+
--component--input-text-helper-default: var(--color-text-defined);
|
|
2431
|
+
--component--input-text-placeholder-default: var(--color-text-subtle);
|
|
2432
|
+
--component--input-text-value-default: var(--color-text-strong);
|
|
2433
|
+
--component--input-text-error-default: var(--color-system-danger-default);
|
|
2434
|
+
}
|
|
2435
|
+
|
|
2286
2436
|
.tl-datetime {
|
|
2287
|
-
--datetime-background-primary: var(--
|
|
2288
|
-
--datetime-background-secondary: var(--
|
|
2437
|
+
--datetime-background-primary: var(--component--input-background-primary);
|
|
2438
|
+
--datetime-background-secondary: var(--component--input-background-secondary);
|
|
2289
2439
|
--datetime-background: var(--datetime-background-primary);
|
|
2290
|
-
--datetime-text: var(--
|
|
2291
|
-
--datetime-
|
|
2292
|
-
--datetime-
|
|
2293
|
-
--datetime-
|
|
2294
|
-
--datetime-
|
|
2295
|
-
--datetime-
|
|
2296
|
-
--datetime-
|
|
2297
|
-
--datetime-
|
|
2298
|
-
--datetime-label-disabled: var(--color-foreground-text-disabled);
|
|
2299
|
-
--datetime-icon-disabled: var(--color-foreground-text-disabled);
|
|
2300
|
-
--datetime-label: var(--color-foreground-text-strong);
|
|
2301
|
-
--datetime-label-inside: var(--color-foreground-text-strong);
|
|
2302
|
-
--datetime-placeholder-focus: var(--color-text-subtle);
|
|
2303
|
-
--datetime-highlight-bar: var(--color-foreground-border-accent-focus);
|
|
2304
|
-
--datetime-helper: var(--color-foreground-text-defined);
|
|
2305
|
-
--datetime-helper-error: var(--color-system-danger-default);
|
|
2306
|
-
--datetime-icon-error: var(--color-system-danger-default);
|
|
2440
|
+
--datetime-text: var(--component--input-text-value-default);
|
|
2441
|
+
--datetime-placeholder: var(--component--input-text-placeholder-default);
|
|
2442
|
+
--datetime-label: var(--component--input-text-label-default);
|
|
2443
|
+
--datetime-helper: var(--component--input-text-helper-default);
|
|
2444
|
+
--datetime-helper-error: var(--component--input-text-error-default);
|
|
2445
|
+
--datetime-icon: var(--component--input-icon-suffix-default);
|
|
2446
|
+
--datetime-icon-error: var(--component--input-text-error-default);
|
|
2447
|
+
--datetime-opacity-disabled: calc(var(--component--input-opacity-disabled) / 100);
|
|
2307
2448
|
}
|
|
2308
2449
|
.tl-datetime--primary {
|
|
2309
2450
|
--datetime-background: var(--datetime-background-primary);
|
|
2310
|
-
--datetime-background-disabled: var(--datetime-background-disabled-primary);
|
|
2311
2451
|
}
|
|
2312
2452
|
.tl-datetime--secondary {
|
|
2313
2453
|
--datetime-background: var(--datetime-background-secondary);
|
|
2314
|
-
--datetime-background-disabled: var(--datetime-background-disabled-secondary);
|
|
2315
|
-
}
|
|
2316
|
-
|
|
2317
|
-
.tl-datetime,
|
|
2318
|
-
.scania .tl-datetime {
|
|
2319
|
-
/* Datetime: units */
|
|
2320
|
-
--datetime-border-radius: 4px 4px 0 0;
|
|
2321
|
-
/* Datetime: box-shadow */
|
|
2322
|
-
--datetime-box-shadow: 0 -1px 0 0 var(--color-foreground-border-soft);
|
|
2323
|
-
--datetime-box-shadow-hover: 0 -1px 0 0 var(--color-foreground-border-strong);
|
|
2324
|
-
--datetime-box-shadow-focus: 0 -2px 0 0 var(--color-foreground-border-accent-focus);
|
|
2325
|
-
--datetime-box-shadow-disabled: none;
|
|
2326
|
-
--datetime-box-shadow-error: 0 -1px 0 0 var(--color-system-danger-default);
|
|
2327
|
-
--datetime-box-shadow-error-hover: 0 -1px 0 0 var(--color-system-danger-default);
|
|
2328
|
-
--datetime-box-shadow-error-focus: 0 -2px 0 0 var(--color-system-danger-default);
|
|
2329
|
-
--datetime-highlight: var(--datetime-highlight-bar);
|
|
2330
|
-
--datetime-highlight-error: var(--color-system-danger-default);
|
|
2331
|
-
/* Datetime: border colors */
|
|
2332
|
-
--datetime-border-color-left: transparent;
|
|
2333
|
-
--datetime-border-color-right: transparent;
|
|
2334
|
-
--datetime-border-color-bottom: var(--color-foreground-border-soft);
|
|
2335
|
-
--datetime-border-color-top: transparent;
|
|
2336
|
-
/* Datetime: border colors on hover */
|
|
2337
|
-
--datetime-border-color-left-hover: transparent;
|
|
2338
|
-
--datetime-border-color-right-hover: transparent;
|
|
2339
|
-
--datetime-border-color-bottom-hover: var(--color-foreground-border-strong);
|
|
2340
|
-
--datetime-border-color-top-hover: transparent;
|
|
2341
|
-
/* Datetime: border colors on success */
|
|
2342
|
-
--datetime-border-color-left-success: transparent;
|
|
2343
|
-
--datetime-border-color-right-success: transparent;
|
|
2344
|
-
--datetime-border-color-bottom-success: var(--color-foreground-border-strong);
|
|
2345
|
-
--datetime-border-color-top-success: transparent;
|
|
2346
|
-
/* Datetime: border colors on focus */
|
|
2347
|
-
--datetime-border-color-left-focus: transparent;
|
|
2348
|
-
--datetime-border-color-right-focus: transparent;
|
|
2349
|
-
--datetime-border-color-bottom-focus: var(--color-foreground-border-strong);
|
|
2350
|
-
--datetime-border-color-top-focus: transparent;
|
|
2351
|
-
--datetime-outline-color-focus: none;
|
|
2352
|
-
/* Datetime: border colors on error */
|
|
2353
|
-
--datetime-border-color-left-error: transparent;
|
|
2354
|
-
--datetime-border-color-right-error: transparent;
|
|
2355
|
-
--datetime-border-color-bottom-error: var(--color-system-danger-default);
|
|
2356
|
-
--datetime-border-color-top-error: transparent;
|
|
2357
|
-
/* Datetime: bar colors */
|
|
2358
|
-
--datetime-bar-color-focus: var(--color-foreground-border-accent-focus);
|
|
2359
|
-
--datetime-bar-color-error: var(--color-system-danger-default);
|
|
2360
|
-
/* Datetime: disabled */
|
|
2361
|
-
--datetime-disabled-bottom-bar: transparent;
|
|
2362
|
-
}
|
|
2363
|
-
|
|
2364
|
-
.traton .tl-datetime {
|
|
2365
|
-
/* Datetime: units */
|
|
2366
|
-
--datetime-border-radius: 4px 4px 4px 4px;
|
|
2367
|
-
/* Datetime: box-shadow */
|
|
2368
|
-
--datetime-box-shadow: 0 0 0 1px var(--color-foreground-border-soft);
|
|
2369
|
-
--datetime-box-shadow-hover: 0 0 0 1px var(--color-foreground-border-strong);
|
|
2370
|
-
--datetime-box-shadow-focus: 0 0 0 2px var(--color-foreground-border-accent-focus);
|
|
2371
|
-
--datetime-box-shadow-disabled: none;
|
|
2372
|
-
--datetime-box-shadow-error: 0 0 0 1px var(--color-system-danger-default);
|
|
2373
|
-
--datetime-box-shadow-error-hover: 0 0 0 1px var(--color-system-danger-default);
|
|
2374
|
-
--datetime-box-shadow-error-focus: 0 0 0 2px var(--color-system-danger-default);
|
|
2375
|
-
--datetime-highlight: transparent;
|
|
2376
|
-
--datetime-highlight-error: transparent;
|
|
2377
|
-
/* Datetime: border colors */
|
|
2378
|
-
--datetime-border-color-left: var(--color-foreground-border-soft);
|
|
2379
|
-
--datetime-border-color-right: var(--color-foreground-border-soft);
|
|
2380
|
-
--datetime-border-color-bottom: var(--color-foreground-border-soft);
|
|
2381
|
-
--datetime-border-color-top: var(--color-foreground-border-soft);
|
|
2382
|
-
/* Datetime: border colors on hover */
|
|
2383
|
-
--datetime-border-color-left-hover: var(--color-foreground-border-strong);
|
|
2384
|
-
--datetime-border-color-right-hover: var(--color-foreground-border-strong);
|
|
2385
|
-
--datetime-border-color-bottom-hover: var(--color-foreground-border-strong);
|
|
2386
|
-
--datetime-border-color-top-hover: var(--color-foreground-border-strong);
|
|
2387
|
-
/* Datetime: border colors on success */
|
|
2388
|
-
--datetime-border-color-left-success: var(--color-foreground-border-strong);
|
|
2389
|
-
--datetime-border-color-right-success: var(--color-foreground-border-strong);
|
|
2390
|
-
--datetime-border-color-bottom-success: var(--color-foreground-border-strong);
|
|
2391
|
-
--datetime-border-color-top-success: var(--color-foreground-border-strong);
|
|
2392
|
-
/* Datetime: border colors on focus */
|
|
2393
|
-
--datetime-border-color-left-focus: var(--color-foreground-border-accent-focus);
|
|
2394
|
-
--datetime-border-color-right-focus: var(--color-foreground-border-accent-focus);
|
|
2395
|
-
--datetime-border-color-bottom-focus: var(--color-foreground-border-accent-focus);
|
|
2396
|
-
--datetime-border-color-top-focus: var(--color-foreground-border-accent-focus);
|
|
2397
|
-
--datetime-outline-color-focus: var(--color-foreground-border-accent-focus);
|
|
2398
|
-
/* Datetime: border colors on error */
|
|
2399
|
-
--datetime-border-color-left-error: var(--color-system-danger-default);
|
|
2400
|
-
--datetime-border-color-right-error: var(--color-system-danger-default);
|
|
2401
|
-
--datetime-border-color-bottom-error: var(--color-system-danger-default);
|
|
2402
|
-
--datetime-border-color-top-error: var(--color-system-danger-default);
|
|
2403
|
-
/* Datetime: bar colors */
|
|
2404
|
-
--datetime-bar-color-focus: transparent;
|
|
2405
|
-
--datetime-bar-color-error: transparent;
|
|
2406
|
-
/* Datetime: disabled */
|
|
2407
|
-
--datetime-disabled-bottom-bar: none;
|
|
2408
2454
|
}
|
|
2409
2455
|
|
|
2410
2456
|
.tl-datetime {
|
|
@@ -2429,25 +2475,36 @@
|
|
|
2429
2475
|
.tl-datetime input[type=time]::-webkit-calendar-picker-indicator {
|
|
2430
2476
|
opacity: 0;
|
|
2431
2477
|
}
|
|
2478
|
+
@supports selector(input::-webkit-datetime-edit) {
|
|
2479
|
+
.tl-datetime:not(.tl-datetime--success, .tl-datetime--error) .tl-datetime__input-placeholder:not(:focus)::-webkit-datetime-edit, .tl-datetime:not(.tl-datetime--success, .tl-datetime--error) .tl-datetime__input-placeholder:not(:focus)::-webkit-datetime-edit-fields-wrapper {
|
|
2480
|
+
color: var(--datetime-placeholder);
|
|
2481
|
+
-webkit-text-fill-color: var(--datetime-placeholder);
|
|
2482
|
+
}
|
|
2483
|
+
.tl-datetime:not(.tl-datetime--success, .tl-datetime--error) .tl-datetime__input-placeholder:focus::-webkit-datetime-edit, .tl-datetime:not(.tl-datetime--success, .tl-datetime--error) .tl-datetime__input-placeholder:focus::-webkit-datetime-edit-fields-wrapper {
|
|
2484
|
+
color: var(--datetime-text);
|
|
2485
|
+
-webkit-text-fill-color: var(--datetime-text);
|
|
2486
|
+
}
|
|
2487
|
+
}
|
|
2488
|
+
|
|
2489
|
+
.tl-datetime:has(input:disabled) {
|
|
2490
|
+
opacity: var(--datetime-opacity-disabled);
|
|
2491
|
+
}
|
|
2432
2492
|
|
|
2433
2493
|
.tl-datetime__label {
|
|
2434
|
-
font-family: var(--
|
|
2435
|
-
font-size: var(--
|
|
2436
|
-
line-height: var(--
|
|
2437
|
-
font-weight: var(--
|
|
2438
|
-
letter-spacing: var(--
|
|
2439
|
-
text-transform: var(--detail-05-text-transform);
|
|
2494
|
+
font-family: var(--type-system-label-01-font-family);
|
|
2495
|
+
font-size: calc(var(--type-system-label-01-font-size) * 1px);
|
|
2496
|
+
line-height: calc(var(--type-system-label-01-line-height) * 1px);
|
|
2497
|
+
font-weight: var(--type-system-label-01-font-weight);
|
|
2498
|
+
letter-spacing: calc(var(--type-system-label-01-letter-spacing) * 1px);
|
|
2440
2499
|
display: block;
|
|
2441
|
-
margin-bottom: var(--
|
|
2500
|
+
margin-bottom: var(--unit-4);
|
|
2442
2501
|
color: var(--datetime-label);
|
|
2443
2502
|
}
|
|
2444
2503
|
.tl-datetime:has(input:disabled) .tl-datetime__label {
|
|
2445
|
-
color: var(--datetime-label-disabled);
|
|
2446
2504
|
cursor: not-allowed;
|
|
2447
2505
|
}
|
|
2448
2506
|
|
|
2449
2507
|
.tl-datetime__wrapper {
|
|
2450
|
-
border-radius: var(--datetime-border-radius);
|
|
2451
2508
|
position: relative;
|
|
2452
2509
|
height: 56px;
|
|
2453
2510
|
box-sizing: border-box;
|
|
@@ -2477,12 +2534,6 @@
|
|
|
2477
2534
|
display: none;
|
|
2478
2535
|
}
|
|
2479
2536
|
}
|
|
2480
|
-
.tl-datetime--error .tl-datetime__icon {
|
|
2481
|
-
color: var(--datetime-icon-error);
|
|
2482
|
-
}
|
|
2483
|
-
.tl-datetime:has(input:disabled) .tl-datetime__icon {
|
|
2484
|
-
color: var(--datetime-icon-disabled);
|
|
2485
|
-
}
|
|
2486
2537
|
|
|
2487
2538
|
.tl-datetime__input {
|
|
2488
2539
|
box-sizing: border-box;
|
|
@@ -2491,49 +2542,48 @@
|
|
|
2491
2542
|
box-sizing: border-box;
|
|
2492
2543
|
}
|
|
2493
2544
|
.tl-datetime__input {
|
|
2494
|
-
font-family: var(--
|
|
2495
|
-
font-size: var(--
|
|
2496
|
-
line-height: var(--
|
|
2497
|
-
font-weight: var(--
|
|
2498
|
-
letter-spacing: var(--
|
|
2499
|
-
text-transform: var(--
|
|
2500
|
-
border-
|
|
2545
|
+
font-family: var(--type-system-body-01-font-family);
|
|
2546
|
+
font-size: calc(var(--type-system-body-01-font-size) * 1px);
|
|
2547
|
+
line-height: calc(var(--type-system-body-01-line-height) * 1px);
|
|
2548
|
+
font-weight: var(--type-system-body-01-font-weight);
|
|
2549
|
+
letter-spacing: calc(var(--type-system-body-01-letter-spacing) * 1px);
|
|
2550
|
+
text-transform: var(--type-system-body-01-text-transform);
|
|
2551
|
+
border-width: calc(var(--component--input-border-width-top) * 1px) calc(var(--component--input-border-width-right) * 1px) calc(var(--component--input-border-width-bottom) * 1px) calc(var(--component--input-border-width-left) * 1px);
|
|
2552
|
+
border-radius: calc(var(--component--input-border-radius-top-left) * 1px) calc(var(--component--input-border-radius-top-right) * 1px) calc(var(--component--input-border-radius-bottom-right) * 1px) calc(var(--component--input-border-radius-bottom-left) * 1px);
|
|
2553
|
+
border-style: solid;
|
|
2554
|
+
border-color: var(--component--input-border-default);
|
|
2501
2555
|
width: 100%;
|
|
2502
2556
|
box-sizing: border-box;
|
|
2503
2557
|
margin: 0;
|
|
2504
|
-
border: none;
|
|
2505
2558
|
outline: none;
|
|
2506
2559
|
height: 100%;
|
|
2507
2560
|
color: var(--datetime-text);
|
|
2508
2561
|
background-color: var(--datetime-background);
|
|
2509
2562
|
padding: var(--tds-spacing-element-20) var(--tds-spacing-element-16);
|
|
2510
|
-
box-shadow: inset var(--datetime-box-shadow);
|
|
2511
|
-
transition: box-shadow 0.2s;
|
|
2512
2563
|
}
|
|
2513
2564
|
.tl-datetime__input:focus {
|
|
2514
|
-
|
|
2565
|
+
outline: 2px solid var(--component--focus-ring-color-strong);
|
|
2566
|
+
box-shadow: 0 0 0 1px var(--component--focus-ring-color-discrete);
|
|
2567
|
+
outline-offset: 1px;
|
|
2568
|
+
z-index: 1;
|
|
2515
2569
|
}
|
|
2516
|
-
.tl-datetime:hover .tl-datetime__input:not(:focus, :disabled) {
|
|
2517
|
-
|
|
2570
|
+
.tl-datetime:hover .tl-datetime__input:not(:focus, :disabled) :not(.tl-datetime__input--error) {
|
|
2571
|
+
border-width: calc(var(--component--input-border-width-top) * 1px) calc(var(--component--input-border-width-right) * 1px) calc(var(--component--input-border-width-bottom) * 1px) calc(var(--component--input-border-width-left) * 1px);
|
|
2572
|
+
border-radius: calc(var(--component--input-border-radius-top-left) * 1px) calc(var(--component--input-border-radius-top-right) * 1px) calc(var(--component--input-border-radius-bottom-right) * 1px) calc(var(--component--input-border-radius-bottom-left) * 1px);
|
|
2573
|
+
border-style: solid;
|
|
2574
|
+
border-color: var(--component--input-border-hover);
|
|
2518
2575
|
}
|
|
2519
2576
|
.tl-datetime--error .tl-datetime__input {
|
|
2520
|
-
|
|
2521
|
-
|
|
2522
|
-
|
|
2523
|
-
|
|
2524
|
-
}
|
|
2525
|
-
.tl-datetime--error:hover .tl-datetime__input:not(:focus, :disabled) {
|
|
2526
|
-
box-shadow: inset var(--datetime-box-shadow-error-hover);
|
|
2527
|
-
}
|
|
2528
|
-
.tl-datetime--error .tl-datetime__input:disabled {
|
|
2529
|
-
box-shadow: inset var(--datetime-box-shadow-error);
|
|
2530
|
-
}
|
|
2531
|
-
.tl-datetime__input::placeholder {
|
|
2532
|
-
opacity: 1;
|
|
2533
|
-
color: var(--datetime-placeholder);
|
|
2577
|
+
border-width: calc(var(--component--input-border-width-top) * 1px) calc(var(--component--input-border-width-right) * 1px) calc(var(--component--input-border-width-bottom) * 1px) calc(var(--component--input-border-width-left) * 1px);
|
|
2578
|
+
border-radius: calc(var(--component--input-border-radius-top-left) * 1px) calc(var(--component--input-border-radius-top-right) * 1px) calc(var(--component--input-border-radius-bottom-right) * 1px) calc(var(--component--input-border-radius-bottom-left) * 1px);
|
|
2579
|
+
border-style: solid;
|
|
2580
|
+
border-color: var(--component--input-text-error-default);
|
|
2534
2581
|
}
|
|
2535
|
-
.tl-datetime__input
|
|
2536
|
-
|
|
2582
|
+
.tl-datetime--success .tl-datetime__input {
|
|
2583
|
+
border-width: calc(var(--component--input-border-width-top) * 1px) calc(var(--component--input-border-width-right) * 1px) calc(var(--component--input-border-width-bottom) * 1px) calc(var(--component--input-border-width-left) * 1px);
|
|
2584
|
+
border-radius: calc(var(--component--input-border-radius-top-left) * 1px) calc(var(--component--input-border-radius-top-right) * 1px) calc(var(--component--input-border-radius-bottom-right) * 1px) calc(var(--component--input-border-radius-bottom-left) * 1px);
|
|
2585
|
+
border-style: solid;
|
|
2586
|
+
border-color: var(--component--input-border-success-default);
|
|
2537
2587
|
}
|
|
2538
2588
|
.tl-datetime__input {
|
|
2539
2589
|
/*
|
|
@@ -2555,87 +2605,14 @@
|
|
|
2555
2605
|
*/
|
|
2556
2606
|
}
|
|
2557
2607
|
@supports selector(input::-webkit-datetime-edit) {
|
|
2558
|
-
.tl-datetime__input
|
|
2559
|
-
color: var(--datetime-
|
|
2560
|
-
-webkit-text-fill-color: var(--datetime-
|
|
2608
|
+
.tl-datetime__input::-webkit-datetime-edit, .tl-datetime__input::-webkit-datetime-edit-fields-wrapper {
|
|
2609
|
+
color: var(--datetime-text);
|
|
2610
|
+
-webkit-text-fill-color: var(--datetime-text);
|
|
2561
2611
|
}
|
|
2562
|
-
.tl-datetime__input:focus::-webkit-datetime-edit, .tl-datetime__input:focus::-webkit-datetime-edit-fields-wrapper {
|
|
2563
|
-
color: var(--datetime-placeholder-focus);
|
|
2564
|
-
-webkit-text-fill-color: var(--datetime-placeholder-focus);
|
|
2565
|
-
}
|
|
2566
|
-
}
|
|
2567
|
-
.tl-datetime__input {
|
|
2568
|
-
/* WebKit datetime fields */
|
|
2569
|
-
}
|
|
2570
|
-
.tl-datetime__input::-webkit-datetime-edit-text {
|
|
2571
|
-
-webkit-text-fill-color: var(--datetime-text);
|
|
2572
|
-
}
|
|
2573
|
-
.tl-datetime__input::-webkit-datetime-edit-month-field {
|
|
2574
|
-
-webkit-text-fill-color: var(--datetime-text);
|
|
2575
|
-
}
|
|
2576
|
-
.tl-datetime__input::-webkit-datetime-edit-day-field {
|
|
2577
|
-
-webkit-text-fill-color: var(--datetime-text);
|
|
2578
|
-
}
|
|
2579
|
-
.tl-datetime__input::-webkit-datetime-edit-year-field {
|
|
2580
|
-
-webkit-text-fill-color: var(--datetime-text);
|
|
2581
|
-
}
|
|
2582
|
-
.tl-datetime__input::-webkit-datetime-edit-hour-field {
|
|
2583
|
-
-webkit-text-fill-color: var(--datetime-text);
|
|
2584
|
-
}
|
|
2585
|
-
.tl-datetime__input::-webkit-datetime-edit-minute-field {
|
|
2586
|
-
-webkit-text-fill-color: var(--datetime-text);
|
|
2587
|
-
}
|
|
2588
|
-
.tl-datetime__input::-webkit-datetime-edit-second-field {
|
|
2589
|
-
-webkit-text-fill-color: var(--datetime-text);
|
|
2590
|
-
}
|
|
2591
|
-
.tl-datetime__input::-webkit-datetime-edit-millisecond-field {
|
|
2592
|
-
-webkit-text-fill-color: var(--datetime-text);
|
|
2593
|
-
}
|
|
2594
|
-
.tl-datetime__input::-webkit-datetime-edit-meridiem-field {
|
|
2595
|
-
-webkit-text-fill-color: var(--datetime-text);
|
|
2596
2612
|
}
|
|
2597
2613
|
.tl-datetime__input:disabled {
|
|
2598
|
-
background-color: var(--datetime-background-disabled);
|
|
2599
|
-
color: var(--datetime-text-disabled);
|
|
2600
|
-
box-shadow: inset var(--datetime-box-shadow-disabled);
|
|
2601
2614
|
cursor: not-allowed;
|
|
2602
2615
|
}
|
|
2603
|
-
.tl-datetime__input:disabled::placeholder {
|
|
2604
|
-
color: var(--datetime-placeholder-disabled);
|
|
2605
|
-
}
|
|
2606
|
-
.tl-datetime__input:disabled ~ .tl-datetime__label-inside {
|
|
2607
|
-
color: var(--datetime-label-disabled);
|
|
2608
|
-
}
|
|
2609
|
-
.tl-datetime__input:disabled {
|
|
2610
|
-
/* WebKit datetime fields - disabled state */
|
|
2611
|
-
}
|
|
2612
|
-
.tl-datetime__input:disabled::-webkit-datetime-edit-text {
|
|
2613
|
-
-webkit-text-fill-color: var(--datetime-text-disabled);
|
|
2614
|
-
}
|
|
2615
|
-
.tl-datetime__input:disabled::-webkit-datetime-edit-month-field {
|
|
2616
|
-
-webkit-text-fill-color: var(--datetime-text-disabled);
|
|
2617
|
-
}
|
|
2618
|
-
.tl-datetime__input:disabled::-webkit-datetime-edit-day-field {
|
|
2619
|
-
-webkit-text-fill-color: var(--datetime-text-disabled);
|
|
2620
|
-
}
|
|
2621
|
-
.tl-datetime__input:disabled::-webkit-datetime-edit-year-field {
|
|
2622
|
-
-webkit-text-fill-color: var(--datetime-text-disabled);
|
|
2623
|
-
}
|
|
2624
|
-
.tl-datetime__input:disabled::-webkit-datetime-edit-hour-field {
|
|
2625
|
-
-webkit-text-fill-color: var(--datetime-text-disabled);
|
|
2626
|
-
}
|
|
2627
|
-
.tl-datetime__input:disabled::-webkit-datetime-edit-minute-field {
|
|
2628
|
-
-webkit-text-fill-color: var(--datetime-text-disabled);
|
|
2629
|
-
}
|
|
2630
|
-
.tl-datetime__input:disabled::-webkit-datetime-edit-second-field {
|
|
2631
|
-
-webkit-text-fill-color: var(--datetime-text-disabled);
|
|
2632
|
-
}
|
|
2633
|
-
.tl-datetime__input:disabled::-webkit-datetime-edit-millisecond-field {
|
|
2634
|
-
-webkit-text-fill-color: var(--datetime-text-disabled);
|
|
2635
|
-
}
|
|
2636
|
-
.tl-datetime__input:disabled::-webkit-datetime-edit-meridiem-field {
|
|
2637
|
-
-webkit-text-fill-color: var(--datetime-text-disabled);
|
|
2638
|
-
}
|
|
2639
2616
|
.tl-datetime--label-inside .tl-datetime__input {
|
|
2640
2617
|
padding-top: var(--tds-spacing-element-24);
|
|
2641
2618
|
padding-bottom: 15px;
|
|
@@ -2649,12 +2626,11 @@
|
|
|
2649
2626
|
}
|
|
2650
2627
|
|
|
2651
2628
|
.tl-datetime__label-inside {
|
|
2652
|
-
font-family: var(--
|
|
2653
|
-
font-size: var(--
|
|
2654
|
-
line-height: var(--
|
|
2655
|
-
font-weight: var(--
|
|
2656
|
-
letter-spacing: var(--
|
|
2657
|
-
text-transform: var(--detail-07-text-transform);
|
|
2629
|
+
font-family: var(--type-system-label-02-font-family);
|
|
2630
|
+
font-size: calc(var(--type-system-label-02-font-size) * 1px);
|
|
2631
|
+
line-height: calc(var(--type-system-label-02-line-height) * 1px);
|
|
2632
|
+
font-weight: var(--type-system-label-02-font-weight);
|
|
2633
|
+
letter-spacing: calc(var(--type-system-label-02-letter-spacing) * 1px);
|
|
2658
2634
|
position: absolute;
|
|
2659
2635
|
pointer-events: none;
|
|
2660
2636
|
color: var(--datetime-label-inside);
|
|
@@ -2672,12 +2648,11 @@
|
|
|
2672
2648
|
}
|
|
2673
2649
|
|
|
2674
2650
|
.tl-datetime__helper {
|
|
2675
|
-
font-family: var(--
|
|
2676
|
-
font-size: var(--
|
|
2677
|
-
line-height: var(--
|
|
2678
|
-
font-weight: var(--
|
|
2679
|
-
letter-spacing: var(--
|
|
2680
|
-
text-transform: var(--detail-05-text-transform);
|
|
2651
|
+
font-family: var(--type-system-label-01-font-family);
|
|
2652
|
+
font-size: calc(var(--type-system-label-01-font-size) * 1px);
|
|
2653
|
+
line-height: calc(var(--type-system-label-01-line-height) * 1px);
|
|
2654
|
+
font-weight: var(--type-system-label-01-font-weight);
|
|
2655
|
+
letter-spacing: calc(var(--type-system-label-01-letter-spacing) * 1px);
|
|
2681
2656
|
display: inline-flex;
|
|
2682
2657
|
gap: 8px;
|
|
2683
2658
|
padding-top: var(--tds-spacing-element-4);
|
|
@@ -2706,7 +2681,7 @@
|
|
|
2706
2681
|
/* Disabled state (should not override error text/icon color) */
|
|
2707
2682
|
}
|
|
2708
2683
|
.tl-datetime:has(input:disabled):not(.tl-datetime--error) .tl-datetime__helper {
|
|
2709
|
-
color: var(--
|
|
2684
|
+
color: var(--datetime-text);
|
|
2710
2685
|
}
|
|
2711
2686
|
|
|
2712
2687
|
/**
|
|
@@ -2887,156 +2862,6 @@
|
|
|
2887
2862
|
--component-dropdown-opacity-disabled: var(--traton-opacity-25);
|
|
2888
2863
|
}
|
|
2889
2864
|
|
|
2890
|
-
/**
|
|
2891
|
-
* Do not edit directly, this file was auto-generated.
|
|
2892
|
-
*/
|
|
2893
|
-
:root,
|
|
2894
|
-
.tds-mode-light,
|
|
2895
|
-
.scania .tds-mode-light,
|
|
2896
|
-
.scania.tds-mode-light,
|
|
2897
|
-
.scania .tl-mode-light,
|
|
2898
|
-
.scania.tl-mode-light {
|
|
2899
|
-
--component--input-background-primary: var(--color-background-layer-01);
|
|
2900
|
-
--component--input-background-secondary: var(--color-background-layer-02);
|
|
2901
|
-
--component--input-border-default: var(--color-border-soft);
|
|
2902
|
-
--component--input-border-hover: var(--color-border-strong);
|
|
2903
|
-
--component--input-border-success-default: var(--color-border-strong);
|
|
2904
|
-
--component--input-border-error-default: var(--color-system-danger-default);
|
|
2905
|
-
--component--input-border-radius-default: var(--scania-unit-4);
|
|
2906
|
-
--component--input-border-radius-none: var(--scania-unit-0);
|
|
2907
|
-
--component--input-border-radius-top-left: var(--component--input-border-radius-default);
|
|
2908
|
-
--component--input-border-radius-top-right: var(--component--input-border-radius-default);
|
|
2909
|
-
--component--input-border-radius-bottom-left: var(--component--input-border-radius-none);
|
|
2910
|
-
--component--input-border-radius-bottom-right: var(--component--input-border-radius-none);
|
|
2911
|
-
--component--input-border-width-default: var(--scania-unit-1);
|
|
2912
|
-
--component--input-border-width-none: var(--scania-unit-0);
|
|
2913
|
-
--component--input-border-width-top: var(--component--input-border-width-none);
|
|
2914
|
-
--component--input-border-width-right: var(--component--input-border-width-none);
|
|
2915
|
-
--component--input-border-width-bottom: var(--component--input-border-width-default);
|
|
2916
|
-
--component--input-border-width-left: var(--component--input-border-width-none);
|
|
2917
|
-
--component--input-icon-prefix-default: var(--color-text-defined);
|
|
2918
|
-
--component--input-icon-suffix-default: var(--color-text-defined);
|
|
2919
|
-
--component--input-icon-error-default: var(--color-system-danger-default);
|
|
2920
|
-
--component--input-icon-control-default: var(--color-icon-strong);
|
|
2921
|
-
--component--input-icon-control-hover: var(--component--input-icon-control-default);
|
|
2922
|
-
--component--input-opacity-disabled: var(--scania-opacity-25);
|
|
2923
|
-
--component--input-text-counter-default: var(--color-text-defined);
|
|
2924
|
-
--component--input-text-label-default: var(--color-text-strong);
|
|
2925
|
-
--component--input-text-helper-default: var(--color-text-defined);
|
|
2926
|
-
--component--input-text-placeholder-default: var(--color-text-soft);
|
|
2927
|
-
--component--input-text-value-default: var(--color-text-strong);
|
|
2928
|
-
--component--input-text-error-default: var(--color-system-danger-default);
|
|
2929
|
-
}
|
|
2930
|
-
|
|
2931
|
-
.traton .tds-mode-light,
|
|
2932
|
-
.traton.tds-mode-light,
|
|
2933
|
-
.traton .tl-mode-light,
|
|
2934
|
-
.traton.tl-mode-light {
|
|
2935
|
-
--component--input-background-primary: var(--color-background-layer-01);
|
|
2936
|
-
--component--input-background-secondary: var(--color-background-layer-02);
|
|
2937
|
-
--component--input-border-default: var(--color-border-soft);
|
|
2938
|
-
--component--input-border-hover: var(--color-border-strong);
|
|
2939
|
-
--component--input-border-success-default: var(--color-border-strong);
|
|
2940
|
-
--component--input-border-error-default: var(--color-system-danger-default);
|
|
2941
|
-
--component--input-border-radius-default: var(--traton-unit-4);
|
|
2942
|
-
--component--input-border-radius-none: var(--traton-unit-0);
|
|
2943
|
-
--component--input-border-radius-top-left: var(--component--input-border-radius-default);
|
|
2944
|
-
--component--input-border-radius-top-right: var(--component--input-border-radius-default);
|
|
2945
|
-
--component--input-border-radius-bottom-left: var(--component--input-border-radius-default);
|
|
2946
|
-
--component--input-border-radius-bottom-right: var(--component--input-border-radius-default);
|
|
2947
|
-
--component--input-border-width-default: var(--traton-unit-1);
|
|
2948
|
-
--component--input-border-width-none: var(--traton-unit-0);
|
|
2949
|
-
--component--input-border-width-top: var(--component--input-border-width-default);
|
|
2950
|
-
--component--input-border-width-right: var(--component--input-border-width-default);
|
|
2951
|
-
--component--input-border-width-bottom: var(--component--input-border-width-default);
|
|
2952
|
-
--component--input-border-width-left: var(--component--input-border-width-default);
|
|
2953
|
-
--component--input-icon-prefix-default: var(--color-text-defined);
|
|
2954
|
-
--component--input-icon-suffix-default: var(--color-text-defined);
|
|
2955
|
-
--component--input-icon-error-default: var(--color-system-danger-default);
|
|
2956
|
-
--component--input-icon-control-default: var(--color-icon-subtle);
|
|
2957
|
-
--component--input-icon-control-hover: var(--component--input-icon-control-default);
|
|
2958
|
-
--component--input-opacity-disabled: var(--traton-opacity-25);
|
|
2959
|
-
--component--input-text-counter-default: var(--color-text-defined);
|
|
2960
|
-
--component--input-text-label-default: var(--color-text-strong);
|
|
2961
|
-
--component--input-text-helper-default: var(--color-text-defined);
|
|
2962
|
-
--component--input-text-placeholder-default: var(--color-text-subtle);
|
|
2963
|
-
--component--input-text-value-default: var(--color-text-strong);
|
|
2964
|
-
--component--input-text-error-default: var(--color-system-danger-default);
|
|
2965
|
-
}
|
|
2966
|
-
|
|
2967
|
-
.tds-mode-dark,
|
|
2968
|
-
.scania .tds-mode-dark,
|
|
2969
|
-
.scania.tds-mode-dark,
|
|
2970
|
-
.scania .tl-mode-dark,
|
|
2971
|
-
.scania.tl-mode-dark {
|
|
2972
|
-
--component--input-background-primary: var(--color-background-layer-01);
|
|
2973
|
-
--component--input-background-secondary: var(--color-background-layer-02);
|
|
2974
|
-
--component--input-border-default: var(--color-border-soft);
|
|
2975
|
-
--component--input-border-hover: var(--color-border-strong);
|
|
2976
|
-
--component--input-border-success-default: var(--color-border-strong);
|
|
2977
|
-
--component--input-border-error-default: var(--color-system-danger-default);
|
|
2978
|
-
--component--input-border-radius-default: var(--scania-unit-4);
|
|
2979
|
-
--component--input-border-radius-none: var(--scania-unit-0);
|
|
2980
|
-
--component--input-border-radius-top-left: var(--component--input-border-radius-default);
|
|
2981
|
-
--component--input-border-radius-top-right: var(--component--input-border-radius-default);
|
|
2982
|
-
--component--input-border-radius-bottom-left: var(--component--input-border-radius-none);
|
|
2983
|
-
--component--input-border-radius-bottom-right: var(--component--input-border-radius-none);
|
|
2984
|
-
--component--input-border-width-default: var(--scania-unit-1);
|
|
2985
|
-
--component--input-border-width-none: var(--scania-unit-0);
|
|
2986
|
-
--component--input-border-width-top: var(--component--input-border-width-none);
|
|
2987
|
-
--component--input-border-width-right: var(--component--input-border-width-none);
|
|
2988
|
-
--component--input-border-width-bottom: var(--component--input-border-width-default);
|
|
2989
|
-
--component--input-border-width-left: var(--component--input-border-width-none);
|
|
2990
|
-
--component--input-icon-prefix-default: var(--color-text-defined);
|
|
2991
|
-
--component--input-icon-suffix-default: var(--color-text-defined);
|
|
2992
|
-
--component--input-icon-error-default: var(--color-system-danger-default);
|
|
2993
|
-
--component--input-icon-control-default: var(--color-icon-strong);
|
|
2994
|
-
--component--input-icon-control-hover: var(--component--input-icon-control-default);
|
|
2995
|
-
--component--input-opacity-disabled: var(--scania-opacity-25);
|
|
2996
|
-
--component--input-text-counter-default: var(--color-text-defined);
|
|
2997
|
-
--component--input-text-label-default: var(--color-text-strong);
|
|
2998
|
-
--component--input-text-helper-default: var(--color-text-defined);
|
|
2999
|
-
--component--input-text-placeholder-default: var(--color-text-soft);
|
|
3000
|
-
--component--input-text-value-default: var(--color-text-strong);
|
|
3001
|
-
--component--input-text-error-default: var(--color-system-danger-default);
|
|
3002
|
-
}
|
|
3003
|
-
|
|
3004
|
-
.traton .tds-mode-dark,
|
|
3005
|
-
.traton.tds-mode-dark,
|
|
3006
|
-
.traton .tl-mode-dark,
|
|
3007
|
-
.traton.tl-mode-dark {
|
|
3008
|
-
--component--input-background-primary: var(--color-background-layer-01);
|
|
3009
|
-
--component--input-background-secondary: var(--color-background-layer-02);
|
|
3010
|
-
--component--input-border-default: var(--color-border-soft);
|
|
3011
|
-
--component--input-border-hover: var(--color-border-strong);
|
|
3012
|
-
--component--input-border-success-default: var(--color-border-strong);
|
|
3013
|
-
--component--input-border-error-default: var(--color-system-danger-default);
|
|
3014
|
-
--component--input-border-radius-default: var(--traton-unit-4);
|
|
3015
|
-
--component--input-border-radius-none: var(--traton-unit-0);
|
|
3016
|
-
--component--input-border-radius-top-left: var(--component--input-border-radius-default);
|
|
3017
|
-
--component--input-border-radius-top-right: var(--component--input-border-radius-default);
|
|
3018
|
-
--component--input-border-radius-bottom-left: var(--component--input-border-radius-default);
|
|
3019
|
-
--component--input-border-radius-bottom-right: var(--component--input-border-radius-default);
|
|
3020
|
-
--component--input-border-width-default: var(--traton-unit-1);
|
|
3021
|
-
--component--input-border-width-none: var(--traton-unit-0);
|
|
3022
|
-
--component--input-border-width-top: var(--component--input-border-width-default);
|
|
3023
|
-
--component--input-border-width-right: var(--component--input-border-width-default);
|
|
3024
|
-
--component--input-border-width-bottom: var(--component--input-border-width-default);
|
|
3025
|
-
--component--input-border-width-left: var(--component--input-border-width-default);
|
|
3026
|
-
--component--input-icon-prefix-default: var(--color-text-defined);
|
|
3027
|
-
--component--input-icon-suffix-default: var(--color-text-defined);
|
|
3028
|
-
--component--input-icon-error-default: var(--color-system-danger-default);
|
|
3029
|
-
--component--input-icon-control-default: var(--color-icon-subtle);
|
|
3030
|
-
--component--input-icon-control-hover: var(--component--input-icon-control-default);
|
|
3031
|
-
--component--input-opacity-disabled: var(--traton-opacity-25);
|
|
3032
|
-
--component--input-text-counter-default: var(--color-text-defined);
|
|
3033
|
-
--component--input-text-label-default: var(--color-text-strong);
|
|
3034
|
-
--component--input-text-helper-default: var(--color-text-defined);
|
|
3035
|
-
--component--input-text-placeholder-default: var(--color-text-subtle);
|
|
3036
|
-
--component--input-text-value-default: var(--color-text-strong);
|
|
3037
|
-
--component--input-text-error-default: var(--color-system-danger-default);
|
|
3038
|
-
}
|
|
3039
|
-
|
|
3040
2865
|
.tl-dropdown {
|
|
3041
2866
|
--dropdown-background: var(--component--input-background-primary);
|
|
3042
2867
|
--dropdown-text: var(--component--input-text-value-default);
|
|
@@ -3048,16 +2873,6 @@
|
|
|
3048
2873
|
--dropdown-icon: var(--component-dropdown-icon-default);
|
|
3049
2874
|
--dropdown-clear-icon: var(--component--input-icon-control-default);
|
|
3050
2875
|
--dropdown-error: var(--component--input-text-error-default);
|
|
3051
|
-
--dropdown-border-bottom-width: calc(var(--component--input-border-width-bottom) * 1px);
|
|
3052
|
-
--dropdown-border-left-width: calc(var(--component--input-border-width-left) * 1px);
|
|
3053
|
-
--dropdown-border-right-width: calc(var(--component--input-border-width-right) * 1px);
|
|
3054
|
-
--dropdown-border-top-width: calc(var(--component--input-border-width-top) * 1px);
|
|
3055
|
-
--dropdown-border: var(--component--input-border-default);
|
|
3056
|
-
--dropdown-border-hover: var(--component--input-border-hover);
|
|
3057
|
-
--dropdown-border-radius: calc(var(--component--input-border-radius-top-left) * 1px)
|
|
3058
|
-
calc(var(--component--input-border-radius-top-right) * 1px)
|
|
3059
|
-
calc(var(--component--input-border-radius-bottom-right) * 1px)
|
|
3060
|
-
calc(var(--component--input-border-radius-bottom-left) * 1px);
|
|
3061
2876
|
--dropdown-list-border-radius: calc(var(--component-dropdown-border-radius-default) * 1px);
|
|
3062
2877
|
--dropdown-list-box-shadow: 0 2px 3px 0 rgb(0, 0, 0, 0.1);
|
|
3063
2878
|
--dropdown-option-background: var(--component-dropdown-background-item-default);
|
|
@@ -3065,6 +2880,7 @@
|
|
|
3065
2880
|
--dropdown-option-background-selected: var(--component-dropdown-background-item-selected-default);
|
|
3066
2881
|
--dropdown-option-opacity-disabled: calc(var(--component-dropdown-opacity-disabled) / 100);
|
|
3067
2882
|
--dropdown-option-border: var(--component-dropdown-border-item-divider-default);
|
|
2883
|
+
--dropdown-border-color: var(--component--input-text-label-default);
|
|
3068
2884
|
--dropdown-list-background-color: var(--component-dropdown-background-secondary);
|
|
3069
2885
|
}
|
|
3070
2886
|
.tl-dropdown--primary {
|
|
@@ -3129,16 +2945,14 @@ body {
|
|
|
3129
2945
|
font-weight: var(--type-system-body-01-font-weight);
|
|
3130
2946
|
letter-spacing: calc(var(--type-system-body-01-letter-spacing) * 1px);
|
|
3131
2947
|
text-transform: var(--type-system-body-01-text-transform);
|
|
3132
|
-
border-
|
|
3133
|
-
border-
|
|
3134
|
-
border-
|
|
3135
|
-
border-
|
|
3136
|
-
border-radius: var(--dropdown-border-radius);
|
|
2948
|
+
border-width: calc(var(--component--input-border-width-top) * 1px) calc(var(--component--input-border-width-right) * 1px) calc(var(--component--input-border-width-bottom) * 1px) calc(var(--component--input-border-width-left) * 1px);
|
|
2949
|
+
border-radius: calc(var(--component--input-border-radius-top-left) * 1px) calc(var(--component--input-border-radius-top-right) * 1px) calc(var(--component--input-border-radius-bottom-right) * 1px) calc(var(--component--input-border-radius-bottom-left) * 1px);
|
|
2950
|
+
border-style: solid;
|
|
2951
|
+
border-color: var(--component--input-border-default);
|
|
3137
2952
|
width: 100%;
|
|
3138
2953
|
appearance: none;
|
|
3139
2954
|
background: var(--dropdown-background);
|
|
3140
2955
|
color: var(--dropdown-text);
|
|
3141
|
-
border-radius: var(--dropdown-border-radius);
|
|
3142
2956
|
position: relative;
|
|
3143
2957
|
outline: none;
|
|
3144
2958
|
text-align: left;
|
|
@@ -3150,11 +2964,10 @@ body {
|
|
|
3150
2964
|
justify-content: flex-start;
|
|
3151
2965
|
}
|
|
3152
2966
|
:is(.tl-dropdown__button, .tl-dropdown__select, .tl-dropdown__input):hover {
|
|
3153
|
-
border-
|
|
3154
|
-
border-
|
|
3155
|
-
border-
|
|
3156
|
-
border-
|
|
3157
|
-
border-radius: var(--dropdown-border-radius);
|
|
2967
|
+
border-width: calc(var(--component--input-border-width-top) * 1px) calc(var(--component--input-border-width-right) * 1px) calc(var(--component--input-border-width-bottom) * 1px) calc(var(--component--input-border-width-left) * 1px);
|
|
2968
|
+
border-radius: calc(var(--component--input-border-radius-top-left) * 1px) calc(var(--component--input-border-radius-top-right) * 1px) calc(var(--component--input-border-radius-bottom-right) * 1px) calc(var(--component--input-border-radius-bottom-left) * 1px);
|
|
2969
|
+
border-style: solid;
|
|
2970
|
+
border-color: var(--component--input-border-hover);
|
|
3158
2971
|
}
|
|
3159
2972
|
:is(.tl-dropdown__button, .tl-dropdown__select, .tl-dropdown__input):focus {
|
|
3160
2973
|
outline: 2px solid var(--component--focus-ring-color-strong);
|
|
@@ -3163,18 +2976,16 @@ body {
|
|
|
3163
2976
|
z-index: 1;
|
|
3164
2977
|
}
|
|
3165
2978
|
.tl-dropdown--error :is(.tl-dropdown__button, .tl-dropdown__select, .tl-dropdown__input) {
|
|
3166
|
-
border-
|
|
3167
|
-
border-
|
|
3168
|
-
border-
|
|
3169
|
-
border-
|
|
3170
|
-
border-radius: var(--dropdown-border-radius);
|
|
2979
|
+
border-width: calc(var(--component--input-border-width-top) * 1px) calc(var(--component--input-border-width-right) * 1px) calc(var(--component--input-border-width-bottom) * 1px) calc(var(--component--input-border-width-left) * 1px);
|
|
2980
|
+
border-radius: calc(var(--component--input-border-radius-top-left) * 1px) calc(var(--component--input-border-radius-top-right) * 1px) calc(var(--component--input-border-radius-bottom-right) * 1px) calc(var(--component--input-border-radius-bottom-left) * 1px);
|
|
2981
|
+
border-style: solid;
|
|
2982
|
+
border-color: var(--component--input-text-error-default);
|
|
3171
2983
|
}
|
|
3172
2984
|
:is(.tl-dropdown__button, .tl-dropdown__select, .tl-dropdown__input):disabled {
|
|
3173
|
-
border-
|
|
3174
|
-
border-
|
|
3175
|
-
border-
|
|
3176
|
-
border-
|
|
3177
|
-
border-radius: var(--dropdown-border-radius);
|
|
2985
|
+
border-width: calc(var(--component--input-border-width-top) * 1px) calc(var(--component--input-border-width-right) * 1px) calc(var(--component--input-border-width-bottom) * 1px) calc(var(--component--input-border-width-left) * 1px);
|
|
2986
|
+
border-radius: calc(var(--component--input-border-radius-top-left) * 1px) calc(var(--component--input-border-radius-top-right) * 1px) calc(var(--component--input-border-radius-bottom-right) * 1px) calc(var(--component--input-border-radius-bottom-left) * 1px);
|
|
2987
|
+
border-style: solid;
|
|
2988
|
+
border-color: var(--component--input-border-default);
|
|
3178
2989
|
box-shadow: none;
|
|
3179
2990
|
cursor: not-allowed;
|
|
3180
2991
|
pointer-events: none;
|
|
@@ -3639,6 +3450,56 @@ body {
|
|
|
3639
3450
|
transform: translateY(18px) scaleY(1);
|
|
3640
3451
|
}
|
|
3641
3452
|
|
|
3453
|
+
.tl-dropdown__actions {
|
|
3454
|
+
font-family: var(--detail-05-font-family);
|
|
3455
|
+
font-size: var(--detail-05-font-size);
|
|
3456
|
+
line-height: var(--detail-05-line-height);
|
|
3457
|
+
font-weight: var(--detail-05-font-weight);
|
|
3458
|
+
letter-spacing: var(--detail-05-letter-spacing);
|
|
3459
|
+
text-transform: var(--detail-05-text-transform);
|
|
3460
|
+
position: sticky;
|
|
3461
|
+
height: 12px;
|
|
3462
|
+
top: auto;
|
|
3463
|
+
bottom: 0;
|
|
3464
|
+
background-color: var(--dropdown-background);
|
|
3465
|
+
display: flex;
|
|
3466
|
+
flex-direction: row;
|
|
3467
|
+
align-items: center;
|
|
3468
|
+
justify-content: space-between;
|
|
3469
|
+
border-top: 1px solid var(--dropdown-option-border);
|
|
3470
|
+
padding: 16px 8px;
|
|
3471
|
+
}
|
|
3472
|
+
.tl-dropdown__actions--select {
|
|
3473
|
+
all: unset;
|
|
3474
|
+
display: flex;
|
|
3475
|
+
align-items: center;
|
|
3476
|
+
justify-content: start;
|
|
3477
|
+
width: fit-content;
|
|
3478
|
+
height: 24px;
|
|
3479
|
+
padding: 8px;
|
|
3480
|
+
box-sizing: border-box;
|
|
3481
|
+
cursor: pointer;
|
|
3482
|
+
}
|
|
3483
|
+
.tl-dropdown__actions--select:hover:not(.tl-dropdown__actions--select:disabled) {
|
|
3484
|
+
border: 1px solid var(--dropdown-border-color);
|
|
3485
|
+
border-radius: 4px;
|
|
3486
|
+
}
|
|
3487
|
+
.tl-dropdown__actions--clear {
|
|
3488
|
+
all: unset;
|
|
3489
|
+
display: flex;
|
|
3490
|
+
align-items: center;
|
|
3491
|
+
justify-content: end;
|
|
3492
|
+
width: fit-content;
|
|
3493
|
+
height: 24px;
|
|
3494
|
+
padding: 8px;
|
|
3495
|
+
box-sizing: border-box;
|
|
3496
|
+
cursor: pointer;
|
|
3497
|
+
}
|
|
3498
|
+
.tl-dropdown__actions--clear:hover:not(.tl-dropdown__actions--clear:disabled) {
|
|
3499
|
+
border: 1px solid var(--dropdown-border-color);
|
|
3500
|
+
border-radius: 4px;
|
|
3501
|
+
}
|
|
3502
|
+
|
|
3642
3503
|
.tl-dropdown__option {
|
|
3643
3504
|
font-family: var(--type-system-body-01-font-family);
|
|
3644
3505
|
font-size: calc(var(--type-system-body-01-font-size) * 1px);
|
|
@@ -3785,7 +3646,6 @@ body {
|
|
|
3785
3646
|
.tl-dropdown__input::placeholder,
|
|
3786
3647
|
.tl-dropdown:has(.tl-dropdown__select option[value=""]:checked) .tl-dropdown__select {
|
|
3787
3648
|
color: var(--dropdown-placeholder);
|
|
3788
|
-
border-radius: var(--dropdown-border-radius);
|
|
3789
3649
|
box-shadow: none;
|
|
3790
3650
|
transition: box-shadow 0.2s;
|
|
3791
3651
|
}
|
|
@@ -3811,11 +3671,10 @@ body {
|
|
|
3811
3671
|
box-shadow: none;
|
|
3812
3672
|
}
|
|
3813
3673
|
:is(.traton, .scania) .tl-dropdown__select:hover:not(:disabled) {
|
|
3814
|
-
border-
|
|
3815
|
-
border-
|
|
3816
|
-
border-
|
|
3817
|
-
border-
|
|
3818
|
-
border-radius: var(--dropdown-border-radius);
|
|
3674
|
+
border-width: calc(var(--component--input-border-width-top) * 1px) calc(var(--component--input-border-width-right) * 1px) calc(var(--component--input-border-width-bottom) * 1px) calc(var(--component--input-border-width-left) * 1px);
|
|
3675
|
+
border-radius: calc(var(--component--input-border-radius-top-left) * 1px) calc(var(--component--input-border-radius-top-right) * 1px) calc(var(--component--input-border-radius-bottom-right) * 1px) calc(var(--component--input-border-radius-bottom-left) * 1px);
|
|
3676
|
+
border-style: solid;
|
|
3677
|
+
border-color: var(--component--input-border-hover);
|
|
3819
3678
|
}
|
|
3820
3679
|
:is(.traton, .scania) .tl-dropdown__select:focus-visible {
|
|
3821
3680
|
outline: 2px solid var(--component--focus-ring-color-strong);
|
|
@@ -3825,15 +3684,17 @@ body {
|
|
|
3825
3684
|
}
|
|
3826
3685
|
|
|
3827
3686
|
.tl-dropdown__select {
|
|
3828
|
-
border-
|
|
3829
|
-
border-
|
|
3830
|
-
border-
|
|
3831
|
-
border-
|
|
3832
|
-
border-radius: var(--dropdown-border-radius);
|
|
3687
|
+
border-width: calc(var(--component--input-border-width-top) * 1px) calc(var(--component--input-border-width-right) * 1px) calc(var(--component--input-border-width-bottom) * 1px) calc(var(--component--input-border-width-left) * 1px);
|
|
3688
|
+
border-radius: calc(var(--component--input-border-radius-top-left) * 1px) calc(var(--component--input-border-radius-top-right) * 1px) calc(var(--component--input-border-radius-bottom-right) * 1px) calc(var(--component--input-border-radius-bottom-left) * 1px);
|
|
3689
|
+
border-style: solid;
|
|
3690
|
+
border-color: var(--component--input-border-default);
|
|
3833
3691
|
}
|
|
3834
3692
|
|
|
3835
3693
|
:is(.traton, .scania) .tl-dropdown--error .tl-dropdown__select {
|
|
3836
|
-
border-
|
|
3694
|
+
border-width: calc(var(--component--input-border-width-top) * 1px) calc(var(--component--input-border-width-right) * 1px) calc(var(--component--input-border-width-bottom) * 1px) calc(var(--component--input-border-width-left) * 1px);
|
|
3695
|
+
border-radius: calc(var(--component--input-border-radius-top-left) * 1px) calc(var(--component--input-border-radius-top-right) * 1px) calc(var(--component--input-border-radius-bottom-right) * 1px) calc(var(--component--input-border-radius-bottom-left) * 1px);
|
|
3696
|
+
border-style: solid;
|
|
3697
|
+
border-color: var(--component--input-text-error-default);
|
|
3837
3698
|
}
|
|
3838
3699
|
:is(.traton, .scania) .tl-dropdown--error .tl-dropdown__select:disabled {
|
|
3839
3700
|
border-color: transparent;
|
|
@@ -7485,7 +7346,7 @@ body {
|
|
|
7485
7346
|
background-color: var(--popover-menu-background-hover);
|
|
7486
7347
|
}
|
|
7487
7348
|
.tl-popover-menu__item:focus-visible {
|
|
7488
|
-
outline: 2px solid var(--
|
|
7349
|
+
outline: 2px solid var(--component--focus-ring-color-strong);
|
|
7489
7350
|
box-shadow: inset 0 0 0 3px var(--component--focus-ring-color-discrete);
|
|
7490
7351
|
outline-offset: -2px;
|
|
7491
7352
|
z-index: 1;
|
|
@@ -8780,157 +8641,1022 @@ body {
|
|
|
8780
8641
|
right: auto;
|
|
8781
8642
|
width: 10px;
|
|
8782
8643
|
}
|
|
8783
|
-
.tl-stepper--sm.tl-stepper--horizontal.tl-stepper--hide-labels .tl-stepper__step::after {
|
|
8784
|
-
content: " ";
|
|
8785
|
-
position: absolute;
|
|
8786
|
-
background-color: var(--stepper-divider-line);
|
|
8787
|
-
height: 1px;
|
|
8788
|
-
left: calc(50% + 12px + 8px);
|
|
8789
|
-
right: 0;
|
|
8790
|
-
top: 13px;
|
|
8644
|
+
.tl-stepper--sm.tl-stepper--horizontal.tl-stepper--hide-labels .tl-stepper__step::after {
|
|
8645
|
+
content: " ";
|
|
8646
|
+
position: absolute;
|
|
8647
|
+
background-color: var(--stepper-divider-line);
|
|
8648
|
+
height: 1px;
|
|
8649
|
+
left: calc(50% + 12px + 8px);
|
|
8650
|
+
right: 0;
|
|
8651
|
+
top: 13px;
|
|
8652
|
+
}
|
|
8653
|
+
.tl-stepper--sm.tl-stepper--horizontal.tl-stepper--hide-labels .tl-stepper__step::before {
|
|
8654
|
+
content: " ";
|
|
8655
|
+
position: absolute;
|
|
8656
|
+
background-color: var(--stepper-divider-line);
|
|
8657
|
+
height: 1px;
|
|
8658
|
+
right: calc(50% + 12px + 8px);
|
|
8659
|
+
left: 0;
|
|
8660
|
+
top: 13px;
|
|
8661
|
+
}
|
|
8662
|
+
|
|
8663
|
+
.tl-stepper__node {
|
|
8664
|
+
display: flex;
|
|
8665
|
+
align-items: center;
|
|
8666
|
+
justify-content: space-around;
|
|
8667
|
+
border-radius: var(--stepper-border-radius);
|
|
8668
|
+
border-width: 1px;
|
|
8669
|
+
border-style: solid;
|
|
8670
|
+
text-align: center;
|
|
8671
|
+
position: relative;
|
|
8672
|
+
}
|
|
8673
|
+
.tl-stepper--lg .tl-stepper__node {
|
|
8674
|
+
height: 30px;
|
|
8675
|
+
min-width: 30px;
|
|
8676
|
+
}
|
|
8677
|
+
.tl-stepper--sm .tl-stepper__node {
|
|
8678
|
+
height: 24px;
|
|
8679
|
+
min-width: 24px;
|
|
8680
|
+
}
|
|
8681
|
+
.tl-stepper__step--error .tl-stepper__node {
|
|
8682
|
+
border: 1px solid var(--stepper-icon-step-border-warning);
|
|
8683
|
+
color: var(--stepper-icon-step-color-warning);
|
|
8684
|
+
background-color: var(--stepper-icon-step-background-warning);
|
|
8685
|
+
}
|
|
8686
|
+
.tl-stepper__step--success .tl-stepper__node {
|
|
8687
|
+
background-color: var(--stepper-icon-step-background-success);
|
|
8688
|
+
border: 1px solid var(--stepper-icon-step-border-success);
|
|
8689
|
+
color: var(--stepper-icon-step-color-success);
|
|
8690
|
+
}
|
|
8691
|
+
.tl-stepper__step--current .tl-stepper__node {
|
|
8692
|
+
color: var(--stepper-index-color-current);
|
|
8693
|
+
border: 1px solid var(--stepper-border-color-current);
|
|
8694
|
+
background-color: var(--stepper-background-color-current);
|
|
8695
|
+
}
|
|
8696
|
+
.tl-stepper__step--upcoming .tl-stepper__node {
|
|
8697
|
+
border: 1px solid var(--stepper-border-upcoming);
|
|
8698
|
+
color: var(--stepper-index-color-upcoming);
|
|
8699
|
+
background-color: var(--stepper-background-upcoming);
|
|
8700
|
+
}
|
|
8701
|
+
.tl-stepper__step--success .tl-stepper__node, .tl-stepper__step--error .tl-stepper__node {
|
|
8702
|
+
justify-content: center;
|
|
8703
|
+
}
|
|
8704
|
+
.tl-stepper__step--success .tl-stepper__node::after, .tl-stepper__step--error .tl-stepper__node::after {
|
|
8705
|
+
content: "";
|
|
8706
|
+
display: block;
|
|
8707
|
+
width: 20px;
|
|
8708
|
+
height: 20px;
|
|
8709
|
+
mask-repeat: no-repeat;
|
|
8710
|
+
mask-position: center;
|
|
8711
|
+
mask-size: contain;
|
|
8712
|
+
background-color: currentcolor;
|
|
8713
|
+
}
|
|
8714
|
+
.tl-stepper__step--success .tl-stepper__node::after {
|
|
8715
|
+
mask-image: var(--icon-tick-svg);
|
|
8716
|
+
}
|
|
8717
|
+
.tl-stepper__step--error .tl-stepper__node::after {
|
|
8718
|
+
mask-image: var(--icon-warning-svg);
|
|
8719
|
+
}
|
|
8720
|
+
|
|
8721
|
+
.tl-stepper--sm .tl-stepper__step--success .tl-stepper__node::after,
|
|
8722
|
+
.tl-stepper--sm .tl-stepper__step--error .tl-stepper__node::after {
|
|
8723
|
+
width: 16px;
|
|
8724
|
+
height: 16px;
|
|
8725
|
+
}
|
|
8726
|
+
|
|
8727
|
+
.tl-stepper__label {
|
|
8728
|
+
text-align: center;
|
|
8729
|
+
}
|
|
8730
|
+
.tl-stepper__step--error .tl-stepper__label {
|
|
8731
|
+
color: var(--stepper-label-text-color-warning);
|
|
8732
|
+
}
|
|
8733
|
+
.tl-stepper__step--success .tl-stepper__label {
|
|
8734
|
+
color: var(--stepper-label-text-color-success);
|
|
8735
|
+
}
|
|
8736
|
+
.tl-stepper__step--current .tl-stepper__label {
|
|
8737
|
+
color: var(--stepper-label-text-color-current);
|
|
8738
|
+
}
|
|
8739
|
+
.tl-stepper__step--upcoming .tl-stepper__label {
|
|
8740
|
+
color: var(--stepper-label-text-color-upcoming);
|
|
8741
|
+
}
|
|
8742
|
+
.tl-stepper--hide-labels .tl-stepper__label {
|
|
8743
|
+
position: absolute;
|
|
8744
|
+
inline-size: 1px;
|
|
8745
|
+
block-size: 1px;
|
|
8746
|
+
margin: -1px;
|
|
8747
|
+
padding: 0;
|
|
8748
|
+
border: 0;
|
|
8749
|
+
overflow: hidden;
|
|
8750
|
+
clip: rect(0 0 0 0);
|
|
8751
|
+
clip-path: inset(50%);
|
|
8752
|
+
white-space: nowrap;
|
|
8753
|
+
}
|
|
8754
|
+
|
|
8755
|
+
.tl-stepper {
|
|
8756
|
+
box-sizing: border-box;
|
|
8757
|
+
}
|
|
8758
|
+
.tl-stepper * {
|
|
8759
|
+
box-sizing: border-box;
|
|
8760
|
+
}
|
|
8761
|
+
|
|
8762
|
+
.tl-stepper__list {
|
|
8763
|
+
display: flex;
|
|
8764
|
+
justify-content: space-evenly;
|
|
8765
|
+
min-width: 100%;
|
|
8766
|
+
list-style: none;
|
|
8767
|
+
margin: 0;
|
|
8768
|
+
padding: 0;
|
|
8769
|
+
}
|
|
8770
|
+
.tl-stepper:not(.tl-stepper--label-aside) .tl-stepper__list {
|
|
8771
|
+
width: 100%;
|
|
8772
|
+
}
|
|
8773
|
+
.tl-stepper--horizontal:not(.tl-stepper--label-aside) .tl-stepper__list {
|
|
8774
|
+
justify-content: flex-start;
|
|
8775
|
+
}
|
|
8776
|
+
.tl-stepper--horizontal.tl-stepper--label-aside .tl-stepper__list {
|
|
8777
|
+
display: flex;
|
|
8778
|
+
justify-content: flex-start;
|
|
8779
|
+
min-width: 100%;
|
|
8780
|
+
}
|
|
8781
|
+
.tl-stepper--horizontal.tl-stepper--label-aside.tl-stepper--hide-labels .tl-stepper__list {
|
|
8782
|
+
display: flex;
|
|
8783
|
+
justify-content: flex-start;
|
|
8784
|
+
}
|
|
8785
|
+
.tl-stepper--vertical .tl-stepper__list {
|
|
8786
|
+
height: 100%;
|
|
8787
|
+
display: flex;
|
|
8788
|
+
flex-direction: column;
|
|
8789
|
+
justify-content: flex-start;
|
|
8790
|
+
gap: 52px;
|
|
8791
|
+
min-width: 0;
|
|
8792
|
+
}
|
|
8793
|
+
.tl-stepper--vertical.tl-stepper--sm .tl-stepper__list {
|
|
8794
|
+
gap: 36px;
|
|
8795
|
+
}
|
|
8796
|
+
|
|
8797
|
+
/**
|
|
8798
|
+
* Do not edit directly, this file was auto-generated.
|
|
8799
|
+
*/
|
|
8800
|
+
:root,
|
|
8801
|
+
.tds-mode-light,
|
|
8802
|
+
.scania .tds-mode-light,
|
|
8803
|
+
.scania.tds-mode-light,
|
|
8804
|
+
.scania .tl-mode-light,
|
|
8805
|
+
.scania.tl-mode-light {
|
|
8806
|
+
--component-table-background-footer-default: var(--scania-color-grey-150);
|
|
8807
|
+
--component-table-background-header-default: var(--scania-color-grey-150);
|
|
8808
|
+
--component-table-background-header-hover: var(--scania-color-grey-200);
|
|
8809
|
+
--component-table-background-toolbar-default: var(--scania-color-grey-200);
|
|
8810
|
+
--component-table-background-cell-primary-default: var(--scania-color-grey-50);
|
|
8811
|
+
--component-table-background-cell-primary-hover: var(--scania-color-grey-100);
|
|
8812
|
+
--component-table-background-cell-secondary-default: var(--scania-color-base-white);
|
|
8813
|
+
--component-table-background-cell-secondary-hover: var(--scania-color-grey-100);
|
|
8814
|
+
--component-table-background-cell-selected-default: var(--scania-color-grey-150);
|
|
8815
|
+
--component-table-background-cell-selected-hover: var(--scania-color-grey-200);
|
|
8816
|
+
--component-table-background-cell-expanded-default: var(
|
|
8817
|
+
--component-table-background-cell-selected-default
|
|
8818
|
+
);
|
|
8819
|
+
--component-table-border-divider-default: var(--color-border-discrete);
|
|
8820
|
+
--component-table-border-divider-hover: var(--scania-color-transparent-250);
|
|
8821
|
+
--component-table-border-radius-default: var(--scania-unit-4);
|
|
8822
|
+
--component-table-text-cell-default: var(--color-text-strong);
|
|
8823
|
+
--component-table-text-footer-default: var(--color-text-strong);
|
|
8824
|
+
--component-table-text-header-default: var(--color-text-strong);
|
|
8825
|
+
--component-table-text-placeholder-default: var(--color-text-subtle);
|
|
8826
|
+
--component-table-text-toolbar-default: var(--color-text-strong);
|
|
8827
|
+
--component-table-text-value-default: var(--color-text-strong);
|
|
8828
|
+
--component-table-icon-edit-default: var(--color-icon-strong);
|
|
8829
|
+
--component-table-icon-expand-default: var(--color-icon-strong);
|
|
8830
|
+
--component-table-icon-filter-default: var(--color-icon-strong);
|
|
8831
|
+
--component-table-icon-prefix-default: var(--color-icon-strong);
|
|
8832
|
+
--component-table-icon-sort-default: var(--color-icon-strong);
|
|
8833
|
+
}
|
|
8834
|
+
|
|
8835
|
+
.traton .tds-mode-light,
|
|
8836
|
+
.traton.tds-mode-light,
|
|
8837
|
+
.traton .tl-mode-light,
|
|
8838
|
+
.traton.tl-mode-light {
|
|
8839
|
+
--component-table-background-footer-default: var(--traton-color-grey-200);
|
|
8840
|
+
--component-table-background-header-default: var(--traton-color-grey-300);
|
|
8841
|
+
--component-table-background-header-hover: var(--traton-color-grey-400);
|
|
8842
|
+
--component-table-background-toolbar-default: var(--traton-color-grey-400);
|
|
8843
|
+
--component-table-background-cell-primary-default: var(--color-background-layer-01);
|
|
8844
|
+
--component-table-background-cell-primary-hover: var(--traton-color-grey-200);
|
|
8845
|
+
--component-table-background-cell-secondary-default: var(--color-background-layer-02);
|
|
8846
|
+
--component-table-background-cell-secondary-hover: var(--traton-color-grey-200);
|
|
8847
|
+
--component-table-background-cell-selected-default: var(--traton-color-grey-300);
|
|
8848
|
+
--component-table-background-cell-selected-hover: var(--traton-color-grey-400);
|
|
8849
|
+
--component-table-background-cell-expanded-default: var(
|
|
8850
|
+
--component-table-background-cell-selected-default
|
|
8851
|
+
);
|
|
8852
|
+
--component-table-border-divider-default: var(--color-border-discrete);
|
|
8853
|
+
--component-table-border-divider-hover: var(--traton-color-transparent-400);
|
|
8854
|
+
--component-table-border-radius-default: var(--traton-unit-4);
|
|
8855
|
+
--component-table-text-cell-default: var(--color-text-strong);
|
|
8856
|
+
--component-table-text-footer-default: var(--color-text-strong);
|
|
8857
|
+
--component-table-text-header-default: var(--color-text-strong);
|
|
8858
|
+
--component-table-text-placeholder-default: var(--color-text-subtle);
|
|
8859
|
+
--component-table-text-toolbar-default: var(--color-text-strong);
|
|
8860
|
+
--component-table-text-value-default: var(--color-text-strong);
|
|
8861
|
+
--component-table-icon-edit-default: var(--color-icon-strong);
|
|
8862
|
+
--component-table-icon-expand-default: var(--color-icon-strong);
|
|
8863
|
+
--component-table-icon-filter-default: var(--color-icon-strong);
|
|
8864
|
+
--component-table-icon-prefix-default: var(--color-icon-strong);
|
|
8865
|
+
--component-table-icon-sort-default: var(--color-icon-strong);
|
|
8866
|
+
}
|
|
8867
|
+
|
|
8868
|
+
.tds-mode-dark,
|
|
8869
|
+
.scania .tds-mode-dark,
|
|
8870
|
+
.scania.tds-mode-dark,
|
|
8871
|
+
.scania .tl-mode-dark,
|
|
8872
|
+
.scania.tl-mode-dark {
|
|
8873
|
+
--component-table-background-footer-default: var(--scania-color-grey-700);
|
|
8874
|
+
--component-table-background-header-default: var(--scania-color-grey-700);
|
|
8875
|
+
--component-table-background-header-hover: var(--scania-color-grey-650);
|
|
8876
|
+
--component-table-background-toolbar-default: var(--scania-color-grey-650);
|
|
8877
|
+
--component-table-background-cell-primary-default: var(--scania-color-grey-850);
|
|
8878
|
+
--component-table-background-cell-primary-hover: var(--scania-color-grey-750);
|
|
8879
|
+
--component-table-background-cell-secondary-default: var(--scania-color-grey-800);
|
|
8880
|
+
--component-table-background-cell-secondary-hover: var(--scania-color-grey-750);
|
|
8881
|
+
--component-table-background-cell-selected-default: var(--scania-color-grey-700);
|
|
8882
|
+
--component-table-background-cell-selected-hover: var(--scania-color-grey-650);
|
|
8883
|
+
--component-table-background-cell-expanded-default: var(
|
|
8884
|
+
--component-table-background-cell-selected-default
|
|
8885
|
+
);
|
|
8886
|
+
--component-table-border-divider-default: var(--color-border-discrete);
|
|
8887
|
+
--component-table-border-divider-hover: var(--scania-color-transparent-inverse-500);
|
|
8888
|
+
--component-table-border-radius-default: var(--scania-unit-4);
|
|
8889
|
+
--component-table-text-cell-default: var(--color-text-strong);
|
|
8890
|
+
--component-table-text-footer-default: var(--color-text-strong);
|
|
8891
|
+
--component-table-text-header-default: var(--color-text-strong);
|
|
8892
|
+
--component-table-text-placeholder-default: var(--color-text-subtle);
|
|
8893
|
+
--component-table-text-toolbar-default: var(--color-text-strong);
|
|
8894
|
+
--component-table-text-value-default: var(--color-text-strong);
|
|
8895
|
+
--component-table-icon-edit-default: var(--color-icon-strong);
|
|
8896
|
+
--component-table-icon-expand-default: var(--color-icon-strong);
|
|
8897
|
+
--component-table-icon-filter-default: var(--color-icon-strong);
|
|
8898
|
+
--component-table-icon-prefix-default: var(--color-icon-strong);
|
|
8899
|
+
--component-table-icon-sort-default: var(--color-icon-strong);
|
|
8900
|
+
}
|
|
8901
|
+
|
|
8902
|
+
.traton .tds-mode-dark,
|
|
8903
|
+
.traton.tds-mode-dark,
|
|
8904
|
+
.traton .tl-mode-dark,
|
|
8905
|
+
.traton.tl-mode-dark {
|
|
8906
|
+
--component-table-background-footer-default: var(--traton-color-blue-800);
|
|
8907
|
+
--component-table-background-header-default: var(--traton-color-blue-800);
|
|
8908
|
+
--component-table-background-header-hover: var(--traton-color-blue-700);
|
|
8909
|
+
--component-table-background-toolbar-default: var(--traton-color-blue-700);
|
|
8910
|
+
--component-table-background-cell-primary-default: var(--color-background-layer-01);
|
|
8911
|
+
--component-table-background-cell-primary-hover: var(--traton-color-blue-850);
|
|
8912
|
+
--component-table-background-cell-secondary-default: var(--color-background-layer-02);
|
|
8913
|
+
--component-table-background-cell-secondary-hover: var(--traton-color-blue-800);
|
|
8914
|
+
--component-table-background-cell-selected-default: var(--traton-color-blue-800);
|
|
8915
|
+
--component-table-background-cell-selected-hover: var(--traton-color-blue-700);
|
|
8916
|
+
--component-table-background-cell-expanded-default: var(
|
|
8917
|
+
--component-table-background-cell-selected-default
|
|
8918
|
+
);
|
|
8919
|
+
--component-table-border-divider-default: var(--color-border-discrete);
|
|
8920
|
+
--component-table-border-divider-hover: var(--traton-color-transparent-inverse-400);
|
|
8921
|
+
--component-table-border-radius-default: var(--traton-unit-4);
|
|
8922
|
+
--component-table-text-cell-default: var(--color-text-strong);
|
|
8923
|
+
--component-table-text-footer-default: var(--color-text-strong);
|
|
8924
|
+
--component-table-text-header-default: var(--color-text-strong);
|
|
8925
|
+
--component-table-text-placeholder-default: var(--color-text-subtle);
|
|
8926
|
+
--component-table-text-toolbar-default: var(--color-text-strong);
|
|
8927
|
+
--component-table-text-value-default: var(--color-text-strong);
|
|
8928
|
+
--component-table-icon-edit-default: var(--color-icon-strong);
|
|
8929
|
+
--component-table-icon-expand-default: var(--color-icon-strong);
|
|
8930
|
+
--component-table-icon-filter-default: var(--color-icon-strong);
|
|
8931
|
+
--component-table-icon-prefix-default: var(--color-icon-strong);
|
|
8932
|
+
--component-table-icon-sort-default: var(--color-icon-strong);
|
|
8933
|
+
}
|
|
8934
|
+
|
|
8935
|
+
.tl-table {
|
|
8936
|
+
--table-background: var(--table-body-row);
|
|
8937
|
+
--table-cell-background: var(--table-body-row);
|
|
8938
|
+
/* Table-header */
|
|
8939
|
+
--table-header: var(--component-table-background-header-default);
|
|
8940
|
+
--table-header-hover: var(--component-table-background-header-hover);
|
|
8941
|
+
--table-header-text-color: var(--component-table-text-header-default);
|
|
8942
|
+
/* Table-toolbar */
|
|
8943
|
+
--table-toolbar: var(--component-table-background-toolbar-default);
|
|
8944
|
+
--table-toolbar-text-color: var(--component-table-text-toolbar-default);
|
|
8945
|
+
/* Table-footer */
|
|
8946
|
+
--table-footer: var(--component-table-background-footer-default);
|
|
8947
|
+
--table-footer-text-color: var(--component-table-text-footer-default);
|
|
8948
|
+
--table-footer-page-selector-input-background: var(--component--input-background-secondary);
|
|
8949
|
+
/* Divider */
|
|
8950
|
+
--table-divider: var(--component-table-border-divider-default);
|
|
8951
|
+
--table-divider-hover: var(--component-table-border-divider-hover);
|
|
8952
|
+
--table-border-radius: calc(var(--component-table-border-radius-default) * 1px);
|
|
8953
|
+
/* Table-body-cell */
|
|
8954
|
+
--table-body-cell-hover: var(--component-table-background-cell-primary-hover);
|
|
8955
|
+
--table-body-cell-text-color: var(--component-table-text-cell-default);
|
|
8956
|
+
/* Table-body-row */
|
|
8957
|
+
--table-body-row: var(--component-table-background-cell-primary-default);
|
|
8958
|
+
--table-body-row-hover: var(--component-table-background-cell-primary-hover);
|
|
8959
|
+
--table-zebra-mode: var(--component-table-background-cell-secondary-default);
|
|
8960
|
+
--table-body-row-selected: var(--component-table-background-cell-selected-default);
|
|
8961
|
+
--table-body-row-expanded: var(--component-table-background-cell-expanded-default);
|
|
8962
|
+
--table-body-row-selected-hover: var(--component-table-background-cell-selected-hover);
|
|
8963
|
+
/* Table input body */
|
|
8964
|
+
--table-input-placeholder-text-color: var(--component-table-text-placeholder-default);
|
|
8965
|
+
--table-input-value-text-color: var(--component-table-text-value-default);
|
|
8966
|
+
--table-input-opacity-disabled: calc(var(--component--input-opacity-disabled) / 100);
|
|
8967
|
+
/* Table-icons */
|
|
8968
|
+
--table-edit-icon-color: var(--component-table-icon-edit-default);
|
|
8969
|
+
--table-expand-icon-color: var(--component-table-icon-expand-default);
|
|
8970
|
+
--table-filter-icon-color: var(--component-table-icon-filter-default);
|
|
8971
|
+
--table-prefix-icon-color: var(--component-table-icon-prefix-default);
|
|
8972
|
+
--table-sort-icon-color: var(--component-table-icon-sort-default);
|
|
8973
|
+
}
|
|
8974
|
+
.tl-table.tl-table--primary {
|
|
8975
|
+
--table-body-row: var(--component-table-background-cell-primary-default);
|
|
8976
|
+
--table-body-row-hover: var(--component-table-background-cell-primary-hover);
|
|
8977
|
+
--table-body-cell-hover: var(--component-table-background-cell-primary-hover);
|
|
8978
|
+
--table-zebra-mode: var(--component-table-background-cell-secondary-default);
|
|
8979
|
+
}
|
|
8980
|
+
.tl-table.tl-table--secondary {
|
|
8981
|
+
--table-body-row: var(--component-table-background-cell-secondary-default);
|
|
8982
|
+
--table-body-row-hover: var(--component-table-background-cell-secondary-hover);
|
|
8983
|
+
--table-body-cell-hover: var(--component-table-background-cell-secondary-hover);
|
|
8984
|
+
--table-zebra-mode: var(--component-table-background-cell-primary-default);
|
|
8985
|
+
}
|
|
8986
|
+
|
|
8987
|
+
.tl-table__footer {
|
|
8988
|
+
display: table-footer-group;
|
|
8989
|
+
height: var(--unit-48);
|
|
8990
|
+
}
|
|
8991
|
+
.tl-table--compact .tl-table__footer {
|
|
8992
|
+
height: var(--unit-32);
|
|
8993
|
+
}
|
|
8994
|
+
|
|
8995
|
+
.tl-table__footer .tl-dropdown__text {
|
|
8996
|
+
max-width: calc(100% - 20px);
|
|
8997
|
+
}
|
|
8998
|
+
|
|
8999
|
+
.tl-table__footer-row {
|
|
9000
|
+
display: table-row;
|
|
9001
|
+
border-bottom: 1px solid var(--table-divider);
|
|
9002
|
+
background-color: var(--table-footer);
|
|
9003
|
+
color: var(--table-footer-text-color);
|
|
9004
|
+
transition: background-color 200ms ease;
|
|
9005
|
+
}
|
|
9006
|
+
|
|
9007
|
+
.tl-table__footer-cell {
|
|
9008
|
+
padding: 0 var(--unit-16);
|
|
9009
|
+
}
|
|
9010
|
+
|
|
9011
|
+
.tl-table__pagination {
|
|
9012
|
+
height: var(--unit-48);
|
|
9013
|
+
display: flex;
|
|
9014
|
+
align-items: center;
|
|
9015
|
+
justify-content: space-between;
|
|
9016
|
+
}
|
|
9017
|
+
.tl-table__pagination .tl-dropdown__button,
|
|
9018
|
+
.tl-table__pagination .tl-dropdown__select,
|
|
9019
|
+
.tl-table__pagination .tl-dropdown__input {
|
|
9020
|
+
background-color: var(--table-footer-page-selector-input-background);
|
|
9021
|
+
}
|
|
9022
|
+
|
|
9023
|
+
.tl-table__row-selector,
|
|
9024
|
+
.tl-table__page-selector {
|
|
9025
|
+
display: flex;
|
|
9026
|
+
align-items: center;
|
|
9027
|
+
}
|
|
9028
|
+
|
|
9029
|
+
.tl-table__rows-per-page {
|
|
9030
|
+
margin-right: var(--unit-16);
|
|
9031
|
+
display: flex;
|
|
9032
|
+
align-items: center;
|
|
9033
|
+
}
|
|
9034
|
+
.tl-table__rows-per-page .tl-dropdown {
|
|
9035
|
+
width: 77px;
|
|
9036
|
+
}
|
|
9037
|
+
|
|
9038
|
+
.tl-table__rows-per-page-label {
|
|
9039
|
+
font-family: var(--type-system-body-01-font-family);
|
|
9040
|
+
font-size: calc(var(--type-system-body-01-font-size) * 1px);
|
|
9041
|
+
line-height: calc(var(--type-system-body-01-line-height) * 1px);
|
|
9042
|
+
font-weight: var(--type-system-body-01-font-weight);
|
|
9043
|
+
letter-spacing: calc(var(--type-system-body-01-letter-spacing) * 1px);
|
|
9044
|
+
text-transform: var(--type-system-body-01-text-transform);
|
|
9045
|
+
margin-right: var(--unit-8);
|
|
9046
|
+
}
|
|
9047
|
+
|
|
9048
|
+
.tl-table__page-selector .tl-text-field {
|
|
9049
|
+
min-width: unset;
|
|
9050
|
+
width: 87px;
|
|
9051
|
+
}
|
|
9052
|
+
.tl-table__page-selector .tl-text-field .tl-text-field__input {
|
|
9053
|
+
font-family: var(--type-system-body-01-font-family);
|
|
9054
|
+
font-size: calc(var(--type-system-body-01-font-size) * 1px);
|
|
9055
|
+
line-height: calc(var(--type-system-body-01-line-height) * 1px);
|
|
9056
|
+
font-weight: var(--type-system-body-01-font-weight);
|
|
9057
|
+
letter-spacing: calc(var(--type-system-body-01-letter-spacing) * 1px);
|
|
9058
|
+
text-transform: var(--type-system-body-01-text-transform);
|
|
9059
|
+
background-color: var(--table-footer-page-selector-input-background);
|
|
9060
|
+
color: var(--table-footer-text-color);
|
|
9061
|
+
margin-right: var(--unit-10);
|
|
9062
|
+
width: 77px;
|
|
9063
|
+
height: 40px;
|
|
9064
|
+
padding-left: 16px;
|
|
9065
|
+
}
|
|
9066
|
+
.tl-table__page-selector .tl-text-field .tl-text-field__input:hover {
|
|
9067
|
+
background-color: var(--table-footer-page-selector-input-background);
|
|
9068
|
+
}
|
|
9069
|
+
.tl-table__page-selector .tl-text-field .tl-text-field__input:disabled {
|
|
9070
|
+
opacity: var(--table-input-opacity-disabled);
|
|
9071
|
+
}
|
|
9072
|
+
|
|
9073
|
+
.tl-table__footer-text {
|
|
9074
|
+
padding: 1px 10px 0 0;
|
|
9075
|
+
font-family: var(--type-system-body-01-font-family);
|
|
9076
|
+
font-size: calc(var(--type-system-body-01-font-size) * 1px);
|
|
9077
|
+
line-height: calc(var(--type-system-body-01-line-height) * 1px);
|
|
9078
|
+
font-weight: var(--type-system-body-01-font-weight);
|
|
9079
|
+
letter-spacing: calc(var(--type-system-body-01-letter-spacing) * 1px);
|
|
9080
|
+
text-transform: var(--type-system-body-01-text-transform);
|
|
9081
|
+
}
|
|
9082
|
+
|
|
9083
|
+
.tl-table {
|
|
9084
|
+
box-sizing: border-box;
|
|
9085
|
+
}
|
|
9086
|
+
.tl-table * {
|
|
9087
|
+
box-sizing: border-box;
|
|
9088
|
+
}
|
|
9089
|
+
.tl-table {
|
|
9090
|
+
border-collapse: collapse;
|
|
9091
|
+
display: table;
|
|
9092
|
+
color: var(--table-body-cell-text-color);
|
|
9093
|
+
background-color: var(--table-header);
|
|
9094
|
+
border-top-left-radius: var(--table-border-radius);
|
|
9095
|
+
border-top-right-radius: var(--table-border-radius);
|
|
9096
|
+
}
|
|
9097
|
+
.tl-table--responsive {
|
|
9098
|
+
width: 100%;
|
|
9099
|
+
}
|
|
9100
|
+
.tl-table--horizontal-scroll {
|
|
9101
|
+
display: block;
|
|
9102
|
+
overflow-x: auto;
|
|
9103
|
+
white-space: nowrap;
|
|
9104
|
+
}
|
|
9105
|
+
.tl-table--horizontal-scroll::-webkit-scrollbar {
|
|
9106
|
+
height: var(--tl-scrollbar-height);
|
|
9107
|
+
}
|
|
9108
|
+
.tl-table--horizontal-scroll::-webkit-scrollbar-track {
|
|
9109
|
+
background: var(--tl-scrollbar-track-color);
|
|
9110
|
+
}
|
|
9111
|
+
.tl-table--horizontal-scroll::-webkit-scrollbar-thumb {
|
|
9112
|
+
border-radius: var(--tl-scrollbar-thumb-border-radius);
|
|
9113
|
+
background: var(--tl-scrollbar-thumb-color);
|
|
9114
|
+
border-width: var(--tl-scrollbar-thumb-border-width);
|
|
9115
|
+
border-style: solid;
|
|
9116
|
+
border-color: transparent;
|
|
9117
|
+
background-clip: padding-box;
|
|
9118
|
+
}
|
|
9119
|
+
.tl-table--horizontal-scroll::-webkit-scrollbar-thumb:hover {
|
|
9120
|
+
border-width: var(--tl-scrollbar-thumb-border-hover-width);
|
|
9121
|
+
border-radius: var(--tl-scrollbar-hover-thumb-border-radius);
|
|
9122
|
+
}
|
|
9123
|
+
.tl-table--horizontal-scroll::-webkit-scrollbar-button {
|
|
9124
|
+
height: 0;
|
|
9125
|
+
width: 0;
|
|
9126
|
+
}
|
|
9127
|
+
@supports not selector(::-webkit-scrollbar) {
|
|
9128
|
+
.tl-table--horizontal-scroll {
|
|
9129
|
+
scrollbar-color: var(--tl-scrollbar-thumb-color) var(--tl-scrollbar-track-color);
|
|
9130
|
+
scrollbar-width: var(--tl-scrollbar-width-standard);
|
|
9131
|
+
}
|
|
9132
|
+
}
|
|
9133
|
+
|
|
9134
|
+
.tl-table__header {
|
|
9135
|
+
display: table-header-group;
|
|
9136
|
+
}
|
|
9137
|
+
|
|
9138
|
+
.tl-table__body {
|
|
9139
|
+
display: table-row-group;
|
|
9140
|
+
}
|
|
9141
|
+
|
|
9142
|
+
.tl-table__row {
|
|
9143
|
+
display: table-row;
|
|
9144
|
+
background-color: var(--table-background);
|
|
9145
|
+
transition: background-color 200ms ease;
|
|
9146
|
+
color: var(--table-body-cell-text-color);
|
|
9147
|
+
}
|
|
9148
|
+
.tl-table__row:not(.tl-table__row--expanded) {
|
|
9149
|
+
border-bottom: 1px solid var(--table-divider);
|
|
9150
|
+
}
|
|
9151
|
+
.tl-table__row:hover:not(.tl-table__row--expanded, .tl-table__row--selected) {
|
|
9152
|
+
--table-background: var(--table-body-row-hover);
|
|
9153
|
+
--table-cell-background: var(--table-body-row-hover);
|
|
9154
|
+
}
|
|
9155
|
+
.tl-table__row--expanded {
|
|
9156
|
+
--table-cell-background: var(--table-body-row-expanded);
|
|
9157
|
+
}
|
|
9158
|
+
.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) {
|
|
9159
|
+
--table-background: var(--table-zebra-mode);
|
|
9160
|
+
--table-cell-background: var(--table-zebra-mode);
|
|
9161
|
+
}
|
|
9162
|
+
.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) {
|
|
9163
|
+
--table-background: var(--table-zebra-mode);
|
|
9164
|
+
--table-cell-background: var(--table-zebra-mode);
|
|
9165
|
+
}
|
|
9166
|
+
.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) {
|
|
9167
|
+
--table-background: var(--table-zebra-mode);
|
|
9168
|
+
--table-cell-background: var(--table-zebra-mode);
|
|
9169
|
+
}
|
|
9170
|
+
.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) {
|
|
9171
|
+
--table-background: var(--table-zebra-mode);
|
|
9172
|
+
--table-cell-background: var(--table-zebra-mode);
|
|
9173
|
+
}
|
|
9174
|
+
.tl-table__row--selected {
|
|
9175
|
+
--table-background: var(--table-body-row-selected);
|
|
9176
|
+
--table-cell-background: var(--table-body-row-selected);
|
|
9177
|
+
}
|
|
9178
|
+
.tl-table__row--selected:hover {
|
|
9179
|
+
--table-background: var(--table-body-row-selected-hover);
|
|
9180
|
+
--table-cell-background: var(--table-body-row-selected-hover);
|
|
9181
|
+
}
|
|
9182
|
+
.tl-table--clickable .tl-table__row, .tl-table__row--clickable {
|
|
9183
|
+
cursor: pointer;
|
|
9184
|
+
}
|
|
9185
|
+
.tl-table__row--clickable:focus-visible {
|
|
9186
|
+
outline: 2px solid var(--component--focus-ring-color-strong);
|
|
9187
|
+
box-shadow: inset 0 0 0 3px var(--component--focus-ring-color-discrete);
|
|
9188
|
+
outline-offset: -2px;
|
|
9189
|
+
z-index: 1;
|
|
9190
|
+
}
|
|
9191
|
+
.tl-table__header .tl-table__row {
|
|
9192
|
+
background-color: var(--table-header);
|
|
9193
|
+
border-bottom: 1px solid var(--table-divider);
|
|
9194
|
+
}
|
|
9195
|
+
|
|
9196
|
+
.tl-table__header-cell {
|
|
9197
|
+
display: table-cell;
|
|
9198
|
+
padding: 16px;
|
|
9199
|
+
font-family: var(--type-system-title-01-font-family);
|
|
9200
|
+
font-size: calc(var(--type-system-title-01-font-size) * 1px);
|
|
9201
|
+
line-height: calc(var(--type-system-title-01-line-height) * 1px);
|
|
9202
|
+
font-weight: var(--type-system-title-01-font-weight);
|
|
9203
|
+
letter-spacing: calc(var(--type-system-title-01-letter-spacing) * 1px);
|
|
9204
|
+
color: var(--table-header-text-color);
|
|
9205
|
+
text-align: left;
|
|
9206
|
+
transition: background-color 200ms ease;
|
|
9207
|
+
min-width: 192px;
|
|
9208
|
+
}
|
|
9209
|
+
.tl-table__header-cell:hover:not(.tl-table__header-cell--checkbox, .tl-table__header-cell--expand) {
|
|
9210
|
+
background-color: var(--table-header-hover);
|
|
9211
|
+
}
|
|
9212
|
+
.tl-table__header-cell:first-of-type {
|
|
9213
|
+
border-top-left-radius: var(--table-border-radius);
|
|
9214
|
+
}
|
|
9215
|
+
.tl-table__header-cell:last-of-type {
|
|
9216
|
+
border-top-right-radius: var(--table-border-radius);
|
|
9217
|
+
}
|
|
9218
|
+
.tl-table--vertical-dividers .tl-table__header-cell:not(:last-child) {
|
|
9219
|
+
border-right: 1px solid var(--table-divider);
|
|
9220
|
+
}
|
|
9221
|
+
.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 {
|
|
9222
|
+
border-top-left-radius: 0;
|
|
9223
|
+
}
|
|
9224
|
+
.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 {
|
|
9225
|
+
border-top-right-radius: 0;
|
|
9226
|
+
}
|
|
9227
|
+
.tl-table__header-cell:has(.tl-table__header-input-wrapper), .tl-table--no-header-padding .tl-table__header-cell, .tl-table__header-cell--sortable {
|
|
9228
|
+
padding: 0;
|
|
9229
|
+
}
|
|
9230
|
+
.tl-table__header-cell--checkbox, .tl-table__header-cell--expand {
|
|
9231
|
+
min-width: 48px;
|
|
9232
|
+
width: 48px;
|
|
9233
|
+
padding: 0;
|
|
9234
|
+
text-align: center;
|
|
9235
|
+
}
|
|
9236
|
+
.tl-table--compact .tl-table__header-cell {
|
|
9237
|
+
height: 32px;
|
|
9238
|
+
padding: 8px 16px;
|
|
9239
|
+
}
|
|
9240
|
+
.tl-table--compact .tl-table__header-cell--sortable {
|
|
9241
|
+
padding: 0;
|
|
9242
|
+
}
|
|
9243
|
+
.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) {
|
|
9244
|
+
width: 32px;
|
|
9245
|
+
min-width: 32px;
|
|
9246
|
+
padding: 0;
|
|
9247
|
+
}
|
|
9248
|
+
.tl-table--no-min-width .tl-table__header-cell {
|
|
9249
|
+
min-width: unset;
|
|
9250
|
+
}
|
|
9251
|
+
.tl-table--header-text-align-left .tl-table__header-cell {
|
|
9252
|
+
text-align: left;
|
|
9253
|
+
}
|
|
9254
|
+
.tl-table--header-text-align-start .tl-table__header-cell {
|
|
9255
|
+
text-align: start;
|
|
9256
|
+
}
|
|
9257
|
+
.tl-table--header-text-align-center .tl-table__header-cell {
|
|
9258
|
+
text-align: center;
|
|
9259
|
+
}
|
|
9260
|
+
.tl-table--header-text-align-right .tl-table__header-cell {
|
|
9261
|
+
text-align: right;
|
|
9262
|
+
}
|
|
9263
|
+
.tl-table--header-text-align-end .tl-table__header-cell {
|
|
9264
|
+
text-align: end;
|
|
9265
|
+
}
|
|
9266
|
+
|
|
9267
|
+
.tl-table__header-button {
|
|
9268
|
+
display: flex;
|
|
9269
|
+
align-items: center;
|
|
9270
|
+
gap: 8px;
|
|
9271
|
+
justify-content: start;
|
|
9272
|
+
flex-direction: row;
|
|
9273
|
+
width: 100%;
|
|
9274
|
+
height: 100%;
|
|
9275
|
+
padding: 16px;
|
|
9276
|
+
background-color: transparent;
|
|
9277
|
+
border: none;
|
|
9278
|
+
cursor: pointer;
|
|
9279
|
+
transition: background-color 200ms ease;
|
|
9280
|
+
font-family: var(--type-system-title-01-font-family);
|
|
9281
|
+
font-size: calc(var(--type-system-title-01-font-size) * 1px);
|
|
9282
|
+
line-height: calc(var(--type-system-title-01-line-height) * 1px);
|
|
9283
|
+
font-weight: var(--type-system-title-01-font-weight);
|
|
9284
|
+
letter-spacing: calc(var(--type-system-title-01-letter-spacing) * 1px);
|
|
9285
|
+
color: var(--table-header-text-color);
|
|
9286
|
+
text-align: left;
|
|
9287
|
+
}
|
|
9288
|
+
.tl-table__header-button:focus-visible, .tl-table__header-button:focus, .tl-table__header-button:active {
|
|
9289
|
+
outline: 2px solid var(--component--focus-ring-color-strong);
|
|
9290
|
+
box-shadow: inset 0 0 0 3px var(--component--focus-ring-color-discrete);
|
|
9291
|
+
outline-offset: -2px;
|
|
9292
|
+
z-index: 1;
|
|
9293
|
+
}
|
|
9294
|
+
.tl-table--compact .tl-table__header-button {
|
|
9295
|
+
height: 32px;
|
|
9296
|
+
}
|
|
9297
|
+
|
|
9298
|
+
.tl-table__header-button-text {
|
|
9299
|
+
color: var(--table-header-text-color);
|
|
9300
|
+
text-align: left;
|
|
9301
|
+
}
|
|
9302
|
+
|
|
9303
|
+
.tl-table__header-button-icon {
|
|
9304
|
+
flex: 0 0 16px;
|
|
9305
|
+
height: 16px;
|
|
9306
|
+
width: 16px;
|
|
9307
|
+
opacity: 0;
|
|
9308
|
+
transform-origin: center;
|
|
9309
|
+
transition: opacity 200ms ease-in, transform 200ms ease;
|
|
9310
|
+
color: var(--table-sort-icon-color);
|
|
9311
|
+
}
|
|
9312
|
+
|
|
9313
|
+
.tl-table__header-button:focus-visible .tl-table__header-button-icon,
|
|
9314
|
+
.tl-table__header-button:focus .tl-table__header-button-icon,
|
|
9315
|
+
.tl-table__header-button:active .tl-table__header-button-icon,
|
|
9316
|
+
.tl-table__header-button:hover .tl-table__header-button-icon {
|
|
9317
|
+
opacity: 1;
|
|
9318
|
+
}
|
|
9319
|
+
|
|
9320
|
+
.tl-table__header-cell--is-sorted .tl-table__header-button-icon {
|
|
9321
|
+
opacity: 1;
|
|
9322
|
+
}
|
|
9323
|
+
|
|
9324
|
+
.tl-table__header-cell--is-sorted .tl-table__header-button-icon--rotate {
|
|
9325
|
+
transform: rotate(180deg);
|
|
9326
|
+
}
|
|
9327
|
+
|
|
9328
|
+
.tl-table__body-cell {
|
|
9329
|
+
display: table-cell;
|
|
9330
|
+
padding: 16px;
|
|
9331
|
+
background-color: var(--table-cell-background);
|
|
9332
|
+
color: var(--table-body-cell-text-color);
|
|
9333
|
+
font-family: var(--type-system-body-01-font-family);
|
|
9334
|
+
font-size: calc(var(--type-system-body-01-font-size) * 1px);
|
|
9335
|
+
line-height: calc(var(--type-system-body-01-line-height) * 1px);
|
|
9336
|
+
font-weight: var(--type-system-body-01-font-weight);
|
|
9337
|
+
letter-spacing: calc(var(--type-system-body-01-letter-spacing) * 1px);
|
|
9338
|
+
text-transform: var(--type-system-body-01-text-transform);
|
|
9339
|
+
transition: background-color 200ms ease;
|
|
9340
|
+
min-width: 192px;
|
|
9341
|
+
}
|
|
9342
|
+
.tl-table__body-cell:has(.tl-table__expand-control) {
|
|
9343
|
+
min-width: unset;
|
|
9344
|
+
width: 48px;
|
|
9345
|
+
height: 48px;
|
|
9346
|
+
padding: 0;
|
|
9347
|
+
}
|
|
9348
|
+
.tl-table__body-cell:has(.tl-checkbox) {
|
|
9349
|
+
min-width: 48px;
|
|
9350
|
+
width: 48px;
|
|
9351
|
+
padding: 0;
|
|
9352
|
+
text-align: center;
|
|
9353
|
+
padding: 8px 16px;
|
|
9354
|
+
}
|
|
9355
|
+
.tl-table__body-cell:focus {
|
|
9356
|
+
outline: 2px solid var(--component--focus-ring-color-strong);
|
|
9357
|
+
box-shadow: inset 0 0 0 3px var(--component--focus-ring-color-discrete);
|
|
9358
|
+
outline-offset: -2px;
|
|
9359
|
+
z-index: 1;
|
|
9360
|
+
}
|
|
9361
|
+
.tl-table__body-cell--column-highlight {
|
|
9362
|
+
--table-cell-background: var(--table-body-cell-hover);
|
|
9363
|
+
}
|
|
9364
|
+
.tl-table__row--selected .tl-table__body-cell--column-highlight {
|
|
9365
|
+
--table-cell-background: var(--table-body-row-selected-hover);
|
|
9366
|
+
}
|
|
9367
|
+
.tl-table__row--expanded .tl-table__body-cell--column-highlight {
|
|
9368
|
+
--table-cell-background: var(--table-body-row-selected-hover);
|
|
9369
|
+
}
|
|
9370
|
+
.tl-table--compact .tl-table__body-cell {
|
|
9371
|
+
height: 32px;
|
|
9372
|
+
padding: 8px 16px;
|
|
9373
|
+
}
|
|
9374
|
+
.tl-table--compact .tl-table__body-cell:has(.tl-checkbox) {
|
|
9375
|
+
height: 32px;
|
|
9376
|
+
width: 32px;
|
|
9377
|
+
padding: 4px;
|
|
9378
|
+
min-width: unset;
|
|
9379
|
+
}
|
|
9380
|
+
.tl-table--compact .tl-table__body-cell:has(.tl-table__expand-control) {
|
|
9381
|
+
min-width: unset;
|
|
9382
|
+
width: 32px;
|
|
9383
|
+
height: 32px;
|
|
9384
|
+
padding: 0;
|
|
9385
|
+
}
|
|
9386
|
+
.tl-table--no-min-width .tl-table__body-cell {
|
|
9387
|
+
min-width: unset;
|
|
9388
|
+
}
|
|
9389
|
+
.tl-table--vertical-dividers .tl-table__body-cell:not(:last-child) {
|
|
9390
|
+
border-right: 1px solid var(--table-divider);
|
|
9391
|
+
}
|
|
9392
|
+
.tl-table--vertical-dividers .tl-table__row--expanded .tl-table__body-cell:not(:has(.tl-table__expand-control)) {
|
|
9393
|
+
border-bottom: 1px solid var(--table-divider);
|
|
9394
|
+
}
|
|
9395
|
+
.tl-table--cell-text-align-left .tl-table__body-cell {
|
|
9396
|
+
text-align: left;
|
|
9397
|
+
}
|
|
9398
|
+
.tl-table--cell-text-align-start .tl-table__body-cell {
|
|
9399
|
+
text-align: start;
|
|
9400
|
+
}
|
|
9401
|
+
.tl-table--cell-text-align-center .tl-table__body-cell {
|
|
9402
|
+
text-align: center;
|
|
9403
|
+
}
|
|
9404
|
+
.tl-table--cell-text-align-right .tl-table__body-cell {
|
|
9405
|
+
text-align: right;
|
|
9406
|
+
}
|
|
9407
|
+
.tl-table--cell-text-align-end .tl-table__body-cell {
|
|
9408
|
+
text-align: end;
|
|
9409
|
+
}
|
|
9410
|
+
.tl-table--no-padding .tl-table__body-cell {
|
|
9411
|
+
padding: 0;
|
|
9412
|
+
}
|
|
9413
|
+
|
|
9414
|
+
.tl-table__toolbar {
|
|
9415
|
+
box-sizing: border-box;
|
|
9416
|
+
}
|
|
9417
|
+
.tl-table__toolbar * {
|
|
9418
|
+
box-sizing: border-box;
|
|
9419
|
+
}
|
|
9420
|
+
.tl-table__toolbar {
|
|
9421
|
+
display: table-caption;
|
|
9422
|
+
position: relative;
|
|
9423
|
+
background-color: var(--table-toolbar);
|
|
9424
|
+
color: var(--table-toolbar-text-color);
|
|
9425
|
+
padding: 0 var(--unit-16);
|
|
9426
|
+
height: 64px;
|
|
9427
|
+
border-top-left-radius: var(--table-border-radius);
|
|
9428
|
+
border-top-right-radius: var(--table-border-radius);
|
|
9429
|
+
}
|
|
9430
|
+
.tl-table--compact .tl-table__toolbar {
|
|
9431
|
+
height: 56px;
|
|
9432
|
+
}
|
|
9433
|
+
|
|
9434
|
+
.tl-table__upper-bar {
|
|
9435
|
+
width: 100%;
|
|
9436
|
+
height: 100%;
|
|
9437
|
+
display: flex;
|
|
9438
|
+
justify-content: space-between;
|
|
9439
|
+
}
|
|
9440
|
+
|
|
9441
|
+
.tl-table__actionbar-left {
|
|
9442
|
+
display: flex;
|
|
9443
|
+
align-items: center;
|
|
9444
|
+
}
|
|
9445
|
+
|
|
9446
|
+
.tl-table__title {
|
|
9447
|
+
font-family: var(--type-system-title-01-font-family);
|
|
9448
|
+
font-size: calc(var(--type-system-title-01-font-size) * 1px);
|
|
9449
|
+
line-height: calc(var(--type-system-title-01-line-height) * 1px);
|
|
9450
|
+
font-weight: var(--type-system-title-01-font-weight);
|
|
9451
|
+
letter-spacing: calc(var(--type-system-title-01-letter-spacing) * 1px);
|
|
9452
|
+
display: flex;
|
|
9453
|
+
align-self: baseline;
|
|
9454
|
+
text-align: left;
|
|
9455
|
+
padding-top: var(--unit-16);
|
|
9456
|
+
margin-right: var(--unit-8);
|
|
9457
|
+
}
|
|
9458
|
+
|
|
9459
|
+
.tl-table__actionbar-right {
|
|
9460
|
+
display: flex;
|
|
9461
|
+
align-self: center;
|
|
9462
|
+
column-gap: 8px;
|
|
9463
|
+
position: relative;
|
|
9464
|
+
}
|
|
9465
|
+
|
|
9466
|
+
.tl-table__header-input-wrapper {
|
|
9467
|
+
position: relative;
|
|
9468
|
+
width: 100%;
|
|
9469
|
+
height: 100%;
|
|
9470
|
+
}
|
|
9471
|
+
|
|
9472
|
+
.tl-table__header-input-wrapper .tl-icon {
|
|
9473
|
+
color: var(--table-filter-icon-color);
|
|
9474
|
+
position: absolute;
|
|
9475
|
+
left: 15px;
|
|
9476
|
+
top: 50%;
|
|
9477
|
+
transform: translateY(-50%);
|
|
9478
|
+
z-index: 1;
|
|
9479
|
+
pointer-events: none;
|
|
9480
|
+
}
|
|
9481
|
+
|
|
9482
|
+
.tl-table__header-input {
|
|
9483
|
+
box-sizing: border-box;
|
|
9484
|
+
font-family: var(--type-system-body-01-font-family);
|
|
9485
|
+
font-size: calc(var(--type-system-body-01-font-size) * 1px);
|
|
9486
|
+
line-height: calc(var(--type-system-body-01-line-height) * 1px);
|
|
9487
|
+
font-weight: var(--type-system-body-01-font-weight);
|
|
9488
|
+
letter-spacing: calc(var(--type-system-body-01-letter-spacing) * 1px);
|
|
9489
|
+
text-transform: var(--type-system-body-01-text-transform);
|
|
9490
|
+
color: var(--table-input-value-text-color);
|
|
9491
|
+
padding: 0 var(--unit-16);
|
|
9492
|
+
width: 100%;
|
|
9493
|
+
border-radius: 0;
|
|
9494
|
+
background-color: transparent;
|
|
9495
|
+
border: none;
|
|
9496
|
+
outline: none;
|
|
9497
|
+
}
|
|
9498
|
+
.tl-table--compact .tl-table__header-input {
|
|
9499
|
+
height: 32px;
|
|
8791
9500
|
}
|
|
8792
|
-
.tl-
|
|
8793
|
-
|
|
8794
|
-
|
|
8795
|
-
background-color: var(--stepper-divider-line);
|
|
8796
|
-
height: 1px;
|
|
8797
|
-
right: calc(50% + 12px + 8px);
|
|
8798
|
-
left: 0;
|
|
8799
|
-
top: 13px;
|
|
9501
|
+
.tl-table__header-input {
|
|
9502
|
+
padding-left: 35px;
|
|
9503
|
+
height: 48px;
|
|
8800
9504
|
}
|
|
8801
|
-
|
|
8802
|
-
|
|
8803
|
-
display: flex;
|
|
8804
|
-
align-items: center;
|
|
8805
|
-
justify-content: space-around;
|
|
8806
|
-
border-radius: var(--stepper-border-radius);
|
|
8807
|
-
border-width: 1px;
|
|
8808
|
-
border-style: solid;
|
|
8809
|
-
text-align: center;
|
|
8810
|
-
position: relative;
|
|
9505
|
+
.tl-table__header-input::placeholder {
|
|
9506
|
+
color: var(--table-input-placeholder-text-color);
|
|
8811
9507
|
}
|
|
8812
|
-
.tl-
|
|
8813
|
-
|
|
8814
|
-
|
|
9508
|
+
.tl-table__header-input:focus {
|
|
9509
|
+
outline: 2px solid var(--component--focus-ring-color-strong);
|
|
9510
|
+
box-shadow: inset 0 0 0 3px var(--component--focus-ring-color-discrete);
|
|
9511
|
+
outline-offset: -2px;
|
|
9512
|
+
z-index: 1;
|
|
8815
9513
|
}
|
|
8816
|
-
|
|
8817
|
-
|
|
8818
|
-
|
|
9514
|
+
|
|
9515
|
+
.tl-table__body-cell .tl-text-field {
|
|
9516
|
+
height: 48px;
|
|
9517
|
+
min-width: auto;
|
|
9518
|
+
padding-bottom: 0;
|
|
9519
|
+
cursor: pointer;
|
|
8819
9520
|
}
|
|
8820
|
-
|
|
8821
|
-
|
|
8822
|
-
|
|
8823
|
-
background-color: var(--stepper-icon-step-background-warning);
|
|
9521
|
+
|
|
9522
|
+
.tl-table--compact .tl-table__body-cell .tl-text-field {
|
|
9523
|
+
height: 32px;
|
|
8824
9524
|
}
|
|
8825
|
-
|
|
8826
|
-
|
|
8827
|
-
|
|
8828
|
-
|
|
9525
|
+
|
|
9526
|
+
.tl-table__body-cell .tl-text-field .tl-text-field__input:focus {
|
|
9527
|
+
outline: 2px solid var(--component--focus-ring-color-strong);
|
|
9528
|
+
box-shadow: inset 0 0 0 3px var(--component--focus-ring-color-discrete);
|
|
9529
|
+
outline-offset: -2px;
|
|
9530
|
+
z-index: 1;
|
|
8829
9531
|
}
|
|
8830
|
-
|
|
8831
|
-
|
|
8832
|
-
|
|
8833
|
-
background-color: var(--stepper-background-color-current);
|
|
9532
|
+
|
|
9533
|
+
.tl-table--compact .tl-table__body-cell .tl-text-field .tl-text-field__input {
|
|
9534
|
+
height: 32px;
|
|
8834
9535
|
}
|
|
8835
|
-
|
|
8836
|
-
|
|
8837
|
-
|
|
8838
|
-
background-color: var(--stepper-background-upcoming);
|
|
9536
|
+
|
|
9537
|
+
.tl-table__body-cell .tl-text-field .tl-text-field__suffix--icon {
|
|
9538
|
+
display: none;
|
|
8839
9539
|
}
|
|
8840
|
-
|
|
9540
|
+
|
|
9541
|
+
.tl-table__body-cell .tl-text-field:hover:not(.tl-text-field:has(.tl-text-field__input:disabled)) .tl-text-field__suffix--icon,
|
|
9542
|
+
.tl-table__body-cell .tl-text-field:has(.tl-text-field__input:not(:disabled):focus) .tl-text-field__suffix--icon {
|
|
9543
|
+
display: inline-block;
|
|
9544
|
+
}
|
|
9545
|
+
|
|
9546
|
+
.tl-table__expand-control {
|
|
9547
|
+
background-color: transparent;
|
|
9548
|
+
border: none;
|
|
9549
|
+
display: inline-flex;
|
|
9550
|
+
align-items: center;
|
|
8841
9551
|
justify-content: center;
|
|
9552
|
+
box-shadow: none;
|
|
9553
|
+
position: relative;
|
|
9554
|
+
text-decoration: none;
|
|
9555
|
+
cursor: pointer;
|
|
9556
|
+
height: 48px;
|
|
9557
|
+
width: 48px;
|
|
9558
|
+
color: var(--table-expand-icon-color);
|
|
8842
9559
|
}
|
|
8843
|
-
.tl-
|
|
8844
|
-
|
|
8845
|
-
|
|
8846
|
-
width:
|
|
8847
|
-
height: 20px;
|
|
8848
|
-
mask-repeat: no-repeat;
|
|
8849
|
-
mask-position: center;
|
|
8850
|
-
mask-size: contain;
|
|
8851
|
-
background-color: currentcolor;
|
|
9560
|
+
.tl-table--compact .tl-table__expand-control {
|
|
9561
|
+
padding: 0;
|
|
9562
|
+
height: 32px;
|
|
9563
|
+
width: 32px;
|
|
8852
9564
|
}
|
|
8853
|
-
.tl-
|
|
8854
|
-
|
|
9565
|
+
.tl-table__expand-control:focus, .tl-table__expand-control:focus-visible, .tl-table__expand-control:active {
|
|
9566
|
+
outline: 2px solid var(--component--focus-ring-color-strong);
|
|
9567
|
+
box-shadow: inset 0 0 0 3px var(--component--focus-ring-color-discrete);
|
|
9568
|
+
outline-offset: -2px;
|
|
9569
|
+
z-index: 1;
|
|
8855
9570
|
}
|
|
8856
|
-
|
|
8857
|
-
|
|
9571
|
+
|
|
9572
|
+
.tl-table__expand-icon {
|
|
9573
|
+
transition: transform 200ms ease;
|
|
9574
|
+
transform: rotate(0);
|
|
9575
|
+
color: var(--table-expand-icon-color);
|
|
8858
9576
|
}
|
|
8859
9577
|
|
|
8860
|
-
.tl-
|
|
8861
|
-
|
|
8862
|
-
width: 16px;
|
|
8863
|
-
height: 16px;
|
|
9578
|
+
.tl-table__row--expanded .tl-table__expand-icon {
|
|
9579
|
+
transform: rotate(180deg);
|
|
8864
9580
|
}
|
|
8865
9581
|
|
|
8866
|
-
.tl-
|
|
8867
|
-
|
|
9582
|
+
.tl-table__expand-row {
|
|
9583
|
+
display: none;
|
|
9584
|
+
transition: background-color 200ms ease;
|
|
8868
9585
|
}
|
|
8869
|
-
.tl-
|
|
8870
|
-
color: var(--
|
|
9586
|
+
.tl-table__expand-row--expanded {
|
|
9587
|
+
background-color: var(--table-body-row-expanded);
|
|
9588
|
+
border-bottom: 1px solid var(--table-divider);
|
|
9589
|
+
display: table-row;
|
|
8871
9590
|
}
|
|
8872
|
-
|
|
8873
|
-
|
|
9591
|
+
|
|
9592
|
+
.tl-table__expand-row-cell {
|
|
9593
|
+
max-width: 1px;
|
|
9594
|
+
overflow: auto;
|
|
9595
|
+
padding: 16px 16px 16px 66px;
|
|
9596
|
+
color: var(--table-body-cell-text-color);
|
|
8874
9597
|
}
|
|
8875
|
-
.tl-
|
|
8876
|
-
|
|
9598
|
+
.tl-table__expand-row-cell::-webkit-scrollbar {
|
|
9599
|
+
height: var(--tl-scrollbar-height);
|
|
8877
9600
|
}
|
|
8878
|
-
.tl-
|
|
8879
|
-
|
|
9601
|
+
.tl-table__expand-row-cell::-webkit-scrollbar-track {
|
|
9602
|
+
background: var(--tl-scrollbar-track-color);
|
|
8880
9603
|
}
|
|
8881
|
-
.tl-
|
|
8882
|
-
|
|
8883
|
-
|
|
8884
|
-
|
|
8885
|
-
|
|
8886
|
-
|
|
8887
|
-
|
|
8888
|
-
overflow: hidden;
|
|
8889
|
-
clip: rect(0 0 0 0);
|
|
8890
|
-
clip-path: inset(50%);
|
|
8891
|
-
white-space: nowrap;
|
|
9604
|
+
.tl-table__expand-row-cell::-webkit-scrollbar-thumb {
|
|
9605
|
+
border-radius: var(--tl-scrollbar-thumb-border-radius);
|
|
9606
|
+
background: var(--tl-scrollbar-thumb-color);
|
|
9607
|
+
border-width: var(--tl-scrollbar-thumb-border-width);
|
|
9608
|
+
border-style: solid;
|
|
9609
|
+
border-color: transparent;
|
|
9610
|
+
background-clip: padding-box;
|
|
8892
9611
|
}
|
|
8893
|
-
|
|
8894
|
-
|
|
8895
|
-
|
|
9612
|
+
.tl-table__expand-row-cell::-webkit-scrollbar-thumb:hover {
|
|
9613
|
+
border-width: var(--tl-scrollbar-thumb-border-hover-width);
|
|
9614
|
+
border-radius: var(--tl-scrollbar-hover-thumb-border-radius);
|
|
8896
9615
|
}
|
|
8897
|
-
.tl-
|
|
8898
|
-
|
|
9616
|
+
.tl-table__expand-row-cell::-webkit-scrollbar-button {
|
|
9617
|
+
height: 0;
|
|
9618
|
+
width: 0;
|
|
8899
9619
|
}
|
|
8900
|
-
|
|
8901
|
-
.tl-
|
|
8902
|
-
|
|
8903
|
-
|
|
8904
|
-
|
|
8905
|
-
list-style: none;
|
|
8906
|
-
margin: 0;
|
|
8907
|
-
padding: 0;
|
|
9620
|
+
@supports not selector(::-webkit-scrollbar) {
|
|
9621
|
+
.tl-table__expand-row-cell {
|
|
9622
|
+
scrollbar-color: var(--tl-scrollbar-thumb-color) var(--tl-scrollbar-track-color);
|
|
9623
|
+
scrollbar-width: var(--tl-scrollbar-width-standard);
|
|
9624
|
+
}
|
|
8908
9625
|
}
|
|
8909
|
-
.tl-
|
|
8910
|
-
|
|
9626
|
+
.tl-table--compact .tl-table__expand-row-cell {
|
|
9627
|
+
padding: 8px 16px 8px 66px;
|
|
8911
9628
|
}
|
|
8912
|
-
.tl-
|
|
8913
|
-
|
|
9629
|
+
.tl-table__expand-row-cell--overflow-visible {
|
|
9630
|
+
overflow: visible;
|
|
8914
9631
|
}
|
|
8915
|
-
.tl-
|
|
8916
|
-
|
|
8917
|
-
justify-content: flex-start;
|
|
8918
|
-
min-width: 100%;
|
|
9632
|
+
.tl-table__expand-row-cell--overflow-hidden {
|
|
9633
|
+
overflow: hidden;
|
|
8919
9634
|
}
|
|
8920
|
-
|
|
8921
|
-
|
|
8922
|
-
|
|
9635
|
+
|
|
9636
|
+
.tl-table__body .tl-text-field__input {
|
|
9637
|
+
border: none;
|
|
9638
|
+
border-radius: 0;
|
|
9639
|
+
background-color: var(--table-cell-background);
|
|
8923
9640
|
}
|
|
8924
|
-
.tl-
|
|
8925
|
-
|
|
8926
|
-
display: flex;
|
|
8927
|
-
flex-direction: column;
|
|
8928
|
-
justify-content: flex-start;
|
|
8929
|
-
gap: 52px;
|
|
8930
|
-
min-width: 0;
|
|
9641
|
+
.tl-table__body .tl-text-field__input:disabled {
|
|
9642
|
+
background-color: var(--table-cell-background);
|
|
8931
9643
|
}
|
|
8932
|
-
.tl-
|
|
8933
|
-
|
|
9644
|
+
.tl-table__body .tl-text-field__input:hover {
|
|
9645
|
+
border: none;
|
|
9646
|
+
border-radius: 0;
|
|
9647
|
+
}
|
|
9648
|
+
|
|
9649
|
+
.tl-table__body .tl-text-field:hover .tl-text-field__input {
|
|
9650
|
+
border: none !important;
|
|
9651
|
+
border-radius: 0;
|
|
9652
|
+
}
|
|
9653
|
+
|
|
9654
|
+
.tl-table--compact .tl-table__header-cell--checkbox {
|
|
9655
|
+
padding: 4px;
|
|
9656
|
+
}
|
|
9657
|
+
|
|
9658
|
+
.tl-table__header-cell--checkbox {
|
|
9659
|
+
padding: 8px 16px;
|
|
8934
9660
|
}
|
|
8935
9661
|
|
|
8936
9662
|
/* tl-folder-tabs.scss (overlay buttons, no JS) */
|
|
@@ -9080,7 +9806,6 @@ body {
|
|
|
9080
9806
|
--folder-tab-background-selected: var(--component-tabs-background-item-secondary-current-default);
|
|
9081
9807
|
}
|
|
9082
9808
|
|
|
9083
|
-
/* tl-folder-tabs.scss (overlay buttons, no JS) */
|
|
9084
9809
|
.tl-folder-tabs__tab {
|
|
9085
9810
|
all: unset;
|
|
9086
9811
|
font-family: var(--type-system-title-01-font-family);
|
|
@@ -9578,7 +10303,7 @@ body {
|
|
|
9578
10303
|
--text-field-label-disabled: var(--color-text-disabled);
|
|
9579
10304
|
--text-field-affix-disabled: var(--color-text-disabled);
|
|
9580
10305
|
--text-field-textcounter: var(--component--input-text-counter-default);
|
|
9581
|
-
--text-field-opacity-disabled: var(--component--input-opacity-disabled);
|
|
10306
|
+
--text-field-opacity-disabled: calc(var(--component--input-opacity-disabled) / 100);
|
|
9582
10307
|
--text-field-border-radius: calc(var(--component--input-border-radius-top-left) * 1px)
|
|
9583
10308
|
calc(var(--component--input-border-radius-top-right) * 1px)
|
|
9584
10309
|
calc(var(--component--input-border-radius-bottom-right) * 1px)
|
|
@@ -9615,7 +10340,7 @@ body {
|
|
|
9615
10340
|
.tl-text-field:has(.tl-text-field__input:disabled) {
|
|
9616
10341
|
cursor: not-allowed;
|
|
9617
10342
|
}
|
|
9618
|
-
.tl-text-field:has(.tl-text-field__input:disabled) .tl-text-field__input-wrapper, .tl-text-field:has(.tl-text-field__input:disabled) .tl-text-field__label {
|
|
10343
|
+
.tl-text-field:has(.tl-text-field__input:disabled) .tl-text-field__input-wrapper, .tl-text-field:has(.tl-text-field__input:disabled) .tl-text-field__label, .tl-text-field:has(.tl-text-field__input:disabled) .tl-text-field__bottom {
|
|
9619
10344
|
opacity: var(--text-field-opacity-disabled);
|
|
9620
10345
|
}
|
|
9621
10346
|
.tl-text-field .tl-icon {
|
|
@@ -9625,7 +10350,8 @@ body {
|
|
|
9625
10350
|
.tl-text-field__input-wrapper {
|
|
9626
10351
|
position: relative;
|
|
9627
10352
|
}
|
|
9628
|
-
.tl-text-field:has(.tl-text-field__input[readonly]):not(:has(.tl-text-field__input:disabled)
|
|
10353
|
+
.tl-text-field:has(.tl-text-field__input[readonly]):not(:has(.tl-text-field__input:disabled),
|
|
10354
|
+
.tl-text-field--hide-readonly-icon) .tl-text-field__input-wrapper::before {
|
|
9629
10355
|
content: "";
|
|
9630
10356
|
position: absolute;
|
|
9631
10357
|
top: 50%;
|
|
@@ -9685,11 +10411,17 @@ body {
|
|
|
9685
10411
|
outline-offset: 1px;
|
|
9686
10412
|
z-index: 1;
|
|
9687
10413
|
}
|
|
9688
|
-
.tl-text-field:hover .tl-text-field__input:not(:focus
|
|
9689
|
-
border-
|
|
10414
|
+
.tl-text-field:hover .tl-text-field__input:not(:focus, :disabled) {
|
|
10415
|
+
border-width: calc(var(--component--input-border-width-top) * 1px) calc(var(--component--input-border-width-right) * 1px) calc(var(--component--input-border-width-bottom) * 1px) calc(var(--component--input-border-width-left) * 1px);
|
|
10416
|
+
border-radius: calc(var(--component--input-border-radius-top-left) * 1px) calc(var(--component--input-border-radius-top-right) * 1px) calc(var(--component--input-border-radius-bottom-right) * 1px) calc(var(--component--input-border-radius-bottom-left) * 1px);
|
|
10417
|
+
border-style: solid;
|
|
10418
|
+
border-color: var(--component--input-border-hover);
|
|
9690
10419
|
}
|
|
9691
10420
|
.tl-text-field--error .tl-text-field__input {
|
|
9692
|
-
border-
|
|
10421
|
+
border-width: calc(var(--component--input-border-width-top) * 1px) calc(var(--component--input-border-width-right) * 1px) calc(var(--component--input-border-width-bottom) * 1px) calc(var(--component--input-border-width-left) * 1px);
|
|
10422
|
+
border-radius: calc(var(--component--input-border-radius-top-left) * 1px) calc(var(--component--input-border-radius-top-right) * 1px) calc(var(--component--input-border-radius-bottom-right) * 1px) calc(var(--component--input-border-radius-bottom-left) * 1px);
|
|
10423
|
+
border-style: solid;
|
|
10424
|
+
border-color: var(--component--input-text-error-default);
|
|
9693
10425
|
}
|
|
9694
10426
|
.tl-text-field--error .tl-text-field__input:focus {
|
|
9695
10427
|
outline: 2px solid var(--component--focus-ring-color-strong);
|
|
@@ -9697,18 +10429,28 @@ body {
|
|
|
9697
10429
|
outline-offset: 1px;
|
|
9698
10430
|
z-index: 1;
|
|
9699
10431
|
}
|
|
9700
|
-
.tl-text-field--error:hover .tl-text-field__input:not(:focus
|
|
9701
|
-
border-
|
|
10432
|
+
.tl-text-field--error:hover .tl-text-field__input:not(:focus, :disabled) {
|
|
10433
|
+
border-width: calc(var(--component--input-border-width-top) * 1px) calc(var(--component--input-border-width-right) * 1px) calc(var(--component--input-border-width-bottom) * 1px) calc(var(--component--input-border-width-left) * 1px);
|
|
10434
|
+
border-radius: calc(var(--component--input-border-radius-top-left) * 1px) calc(var(--component--input-border-radius-top-right) * 1px) calc(var(--component--input-border-radius-bottom-right) * 1px) calc(var(--component--input-border-radius-bottom-left) * 1px);
|
|
10435
|
+
border-style: solid;
|
|
10436
|
+
border-color: var(--component--input-text-error-default);
|
|
9702
10437
|
}
|
|
9703
|
-
.tl-text-field--success:not(:has(.tl-text-field__input[readonly])
|
|
9704
|
-
|
|
10438
|
+
.tl-text-field--success:not(:has(.tl-text-field__input[readonly]),
|
|
10439
|
+
:has(.tl-text-field__input:disabled)) .tl-text-field__input:not(:focus) {
|
|
10440
|
+
border-width: calc(var(--component--input-border-width-top) * 1px) calc(var(--component--input-border-width-right) * 1px) calc(var(--component--input-border-width-bottom) * 1px) calc(var(--component--input-border-width-left) * 1px);
|
|
10441
|
+
border-radius: calc(var(--component--input-border-radius-top-left) * 1px) calc(var(--component--input-border-radius-top-right) * 1px) calc(var(--component--input-border-radius-bottom-right) * 1px) calc(var(--component--input-border-radius-bottom-left) * 1px);
|
|
10442
|
+
border-style: solid;
|
|
10443
|
+
border-color: var(--component--input-border-success-default);
|
|
9705
10444
|
}
|
|
9706
10445
|
.tl-text-field__input:disabled {
|
|
9707
10446
|
cursor: not-allowed;
|
|
9708
10447
|
pointer-events: none;
|
|
9709
10448
|
}
|
|
9710
10449
|
:has(.tl-text-field__input[readonly]):not(:has(.tl-text-field__input:disabled)) .tl-text-field__input {
|
|
9711
|
-
border-
|
|
10450
|
+
border-width: calc(var(--component--input-border-width-top) * 1px) calc(var(--component--input-border-width-right) * 1px) calc(var(--component--input-border-width-bottom) * 1px) calc(var(--component--input-border-width-left) * 1px);
|
|
10451
|
+
border-radius: calc(var(--component--input-border-radius-top-left) * 1px) calc(var(--component--input-border-radius-top-right) * 1px) calc(var(--component--input-border-radius-bottom-right) * 1px) calc(var(--component--input-border-radius-bottom-left) * 1px);
|
|
10452
|
+
border-style: solid;
|
|
10453
|
+
border-color: var(--color-border-defined);
|
|
9712
10454
|
}
|
|
9713
10455
|
:has(.tl-text-field__input[readonly]):not(:has(.tl-text-field__input:disabled)) .tl-text-field__input:focus {
|
|
9714
10456
|
outline: 2px solid var(--component--focus-ring-color-strong);
|
|
@@ -9717,7 +10459,10 @@ body {
|
|
|
9717
10459
|
z-index: 1;
|
|
9718
10460
|
}
|
|
9719
10461
|
:has(.tl-text-field__input[readonly]):not(:has(.tl-text-field__input:disabled)):hover .tl-text-field__input:not(:focus) {
|
|
9720
|
-
border-
|
|
10462
|
+
border-width: calc(var(--component--input-border-width-top) * 1px) calc(var(--component--input-border-width-right) * 1px) calc(var(--component--input-border-width-bottom) * 1px) calc(var(--component--input-border-width-left) * 1px);
|
|
10463
|
+
border-radius: calc(var(--component--input-border-radius-top-left) * 1px) calc(var(--component--input-border-radius-top-right) * 1px) calc(var(--component--input-border-radius-bottom-right) * 1px) calc(var(--component--input-border-radius-bottom-left) * 1px);
|
|
10464
|
+
border-style: solid;
|
|
10465
|
+
border-color: var(--component--input-border-hover);
|
|
9721
10466
|
}
|
|
9722
10467
|
:has(.tl-text-field__input[readonly]):not(:has(.tl-text-field__input:disabled)) .tl-text-field__input {
|
|
9723
10468
|
user-select: auto;
|
|
@@ -9725,31 +10470,32 @@ body {
|
|
|
9725
10470
|
cursor: default;
|
|
9726
10471
|
pointer-events: none;
|
|
9727
10472
|
}
|
|
9728
|
-
.tl-text-field:has(.tl-text-field__input[readonly]):not(:has(.tl-text-field__input:disabled)
|
|
10473
|
+
.tl-text-field:has(.tl-text-field__input[readonly]):not(:has(.tl-text-field__input:disabled),
|
|
10474
|
+
.tl-text-field--hide-readonly-icon) .tl-text-field__input {
|
|
9729
10475
|
padding-right: 54px;
|
|
9730
10476
|
}
|
|
9731
10477
|
.tl-text-field--lg .tl-text-field__input {
|
|
9732
|
-
padding: var(--
|
|
10478
|
+
padding: var(--unit-20) var(--unit-16);
|
|
9733
10479
|
height: 56px;
|
|
9734
10480
|
}
|
|
9735
10481
|
.tl-text-field--md .tl-text-field__input {
|
|
9736
|
-
padding: var(--
|
|
10482
|
+
padding: var(--unit-16);
|
|
9737
10483
|
height: 48px;
|
|
9738
10484
|
}
|
|
9739
10485
|
.tl-text-field--sm .tl-text-field__input {
|
|
9740
|
-
padding: var(--
|
|
10486
|
+
padding: var(--unit-12) var(--unit-16);
|
|
9741
10487
|
height: 40px;
|
|
9742
10488
|
}
|
|
9743
10489
|
.tl-text-field--label-inside.tl-text-field--lg .tl-text-field__input {
|
|
9744
|
-
padding-top: var(--
|
|
10490
|
+
padding-top: var(--unit-24);
|
|
9745
10491
|
padding-bottom: 15px;
|
|
9746
10492
|
}
|
|
9747
10493
|
.tl-text-field--label-inside.tl-text-field--md .tl-text-field__input {
|
|
9748
|
-
padding-top: var(--
|
|
10494
|
+
padding-top: var(--unit-20);
|
|
9749
10495
|
padding-bottom: 11px;
|
|
9750
10496
|
}
|
|
9751
10497
|
.tl-text-field--label-inside.tl-text-field--sm .tl-text-field__input:not(:focus):placeholder-shown {
|
|
9752
|
-
padding-top: var(--
|
|
10498
|
+
padding-top: var(--unit-16);
|
|
9753
10499
|
padding-bottom: 7px;
|
|
9754
10500
|
}
|
|
9755
10501
|
.tl-text-field:has(.tl-text-field__prefix--icon) .tl-text-field__input {
|
|
@@ -9767,9 +10513,6 @@ body {
|
|
|
9767
10513
|
.tl-text-field--label-inside .tl-text-field__input::placeholder {
|
|
9768
10514
|
color: transparent !important;
|
|
9769
10515
|
}
|
|
9770
|
-
.tl-text-field:not(.tl-text-field--label-inside) .tl-text-field__input:disabled::placeholder {
|
|
9771
|
-
color: var(--text-field-placeholder-disabled) !important;
|
|
9772
|
-
}
|
|
9773
10516
|
|
|
9774
10517
|
.tl-text-field:not(.tl-text-field--label-inside) .tl-text-field__label {
|
|
9775
10518
|
font-family: var(--detail-05-font-family);
|
|
@@ -9779,7 +10522,7 @@ body {
|
|
|
9779
10522
|
letter-spacing: var(--detail-05-letter-spacing);
|
|
9780
10523
|
text-transform: var(--detail-05-text-transform);
|
|
9781
10524
|
display: block;
|
|
9782
|
-
margin-bottom:
|
|
10525
|
+
margin-bottom: 4px;
|
|
9783
10526
|
color: var(--text-field-label);
|
|
9784
10527
|
}
|
|
9785
10528
|
.tl-text-field--label-inside .tl-text-field__label {
|
|
@@ -9826,12 +10569,6 @@ body {
|
|
|
9826
10569
|
opacity: 0;
|
|
9827
10570
|
visibility: hidden;
|
|
9828
10571
|
}
|
|
9829
|
-
.tl-text-field--label-inside:has(.tl-text-field__input:disabled) .tl-text-field__label {
|
|
9830
|
-
color: var(--text-field-label-disabled);
|
|
9831
|
-
}
|
|
9832
|
-
.tl-text-field:not(.tl-text-field--label-inside):has(.tl-text-field__input:disabled) .tl-text-field__label {
|
|
9833
|
-
color: var(--text-field-label-disabled);
|
|
9834
|
-
}
|
|
9835
10572
|
|
|
9836
10573
|
.tl-text-field__bottom {
|
|
9837
10574
|
display: flex;
|
|
@@ -9849,9 +10586,6 @@ body {
|
|
|
9849
10586
|
color: var(--text-field-helper);
|
|
9850
10587
|
position: relative;
|
|
9851
10588
|
}
|
|
9852
|
-
:has(.tl-text-field__input:disabled) .tl-text-field__helper {
|
|
9853
|
-
color: var(--color-text-disabled);
|
|
9854
|
-
}
|
|
9855
10589
|
.tl-text-field--error .tl-text-field__helper {
|
|
9856
10590
|
padding-left: 24px;
|
|
9857
10591
|
}
|
|
@@ -9874,12 +10608,10 @@ body {
|
|
|
9874
10608
|
.tl-text-field--error:has(.tl-text-field__input[readonly]) .tl-text-field__helper::before {
|
|
9875
10609
|
display: none;
|
|
9876
10610
|
}
|
|
9877
|
-
.tl-text-field--error:not(:has(.tl-text-field__input[readonly])
|
|
10611
|
+
.tl-text-field--error:not(:has(.tl-text-field__input[readonly]),
|
|
10612
|
+
:has(.tl-text-field__input:disabled)) .tl-text-field__helper {
|
|
9878
10613
|
color: var(--text-field-error);
|
|
9879
10614
|
}
|
|
9880
|
-
.tl-text-field--error:has(.tl-text-field__input:disabled) .tl-text-field__helper::before {
|
|
9881
|
-
background-color: var(--color-text-disabled);
|
|
9882
|
-
}
|
|
9883
10615
|
|
|
9884
10616
|
.tl-text-field__charcounter {
|
|
9885
10617
|
font-family: var(--detail-05-font-family);
|
|
@@ -9891,20 +10623,15 @@ body {
|
|
|
9891
10623
|
margin-left: auto;
|
|
9892
10624
|
color: var(--text-field-textcounter);
|
|
9893
10625
|
}
|
|
9894
|
-
|
|
9895
|
-
|
|
9896
|
-
}
|
|
9897
|
-
.tl-text-field--error:not(:has(.tl-text-field__input[readonly])):not(:has(.tl-text-field__input:disabled)) .tl-text-field__charcounter {
|
|
10626
|
+
.tl-text-field--error:not(:has(.tl-text-field__input[readonly]),
|
|
10627
|
+
:has(.tl-text-field__input:disabled)) .tl-text-field__charcounter {
|
|
9898
10628
|
color: var(--text-field-error);
|
|
9899
10629
|
}
|
|
9900
|
-
.tl-text-field--error:not(:has(.tl-text-field__input[readonly])
|
|
10630
|
+
.tl-text-field--error:not(:has(.tl-text-field__input[readonly]),
|
|
10631
|
+
:has(.tl-text-field__input:disabled)) .tl-text-field__charcounter .tl-text-field__charcounter-divider {
|
|
9901
10632
|
color: var(--text-field-error);
|
|
9902
10633
|
}
|
|
9903
10634
|
|
|
9904
|
-
.tl-text-field__charcounter-divider {
|
|
9905
|
-
color: var(--color-text-disabled);
|
|
9906
|
-
}
|
|
9907
|
-
|
|
9908
10635
|
.tl-text-field__prefix {
|
|
9909
10636
|
font-family: var(--detail-02-font-family);
|
|
9910
10637
|
font-size: var(--detail-02-font-size);
|
|
@@ -9926,18 +10653,6 @@ body {
|
|
|
9926
10653
|
transform: translateY(-50%);
|
|
9927
10654
|
z-index: 1;
|
|
9928
10655
|
}
|
|
9929
|
-
:has(.tl-text-field__input:disabled) .tl-text-field__prefix--text, :has(.tl-text-field__input:disabled) .tl-text-field__prefix--icon {
|
|
9930
|
-
color: var(--text-field-affix-disabled);
|
|
9931
|
-
}
|
|
9932
|
-
:has(.tl-text-field__input:disabled) .tl-text-field__prefix--text > *, :has(.tl-text-field__input:disabled) .tl-text-field__prefix--icon > * {
|
|
9933
|
-
color: var(--text-field-affix-disabled);
|
|
9934
|
-
}
|
|
9935
|
-
:has(.tl-text-field__input:disabled) .tl-text-field__prefix--text .tl-icon, :has(.tl-text-field__input:disabled) .tl-text-field__prefix--icon .tl-icon {
|
|
9936
|
-
background-color: var(--text-field-affix-disabled);
|
|
9937
|
-
}
|
|
9938
|
-
:has(.tl-text-field__input:disabled) .tl-text-field__prefix--icon.tl-icon {
|
|
9939
|
-
background-color: var(--text-field-affix-disabled);
|
|
9940
|
-
}
|
|
9941
10656
|
|
|
9942
10657
|
.tl-text-field__suffix {
|
|
9943
10658
|
font-family: var(--detail-02-font-family);
|
|
@@ -9964,20 +10679,6 @@ body {
|
|
|
9964
10679
|
transform: translateY(-50%);
|
|
9965
10680
|
z-index: 1;
|
|
9966
10681
|
}
|
|
9967
|
-
:has(.tl-text-field__input:disabled) .tl-text-field__suffix--text, :has(.tl-text-field__input:disabled) .tl-text-field__suffix--icon {
|
|
9968
|
-
color: var(--text-field-affix-disabled);
|
|
9969
|
-
}
|
|
9970
|
-
:has(.tl-text-field__input:disabled) .tl-text-field__suffix--text > *, :has(.tl-text-field__input:disabled) .tl-text-field__suffix--icon > * {
|
|
9971
|
-
color: var(--text-field-affix-disabled);
|
|
9972
|
-
}
|
|
9973
|
-
:has(.tl-text-field__input:disabled) .tl-text-field__suffix--text .tl-icon,
|
|
9974
|
-
:has(.tl-text-field__input:disabled) .tl-text-field__suffix--text > .tl-icon, :has(.tl-text-field__input:disabled) .tl-text-field__suffix--icon .tl-icon,
|
|
9975
|
-
:has(.tl-text-field__input:disabled) .tl-text-field__suffix--icon > .tl-icon {
|
|
9976
|
-
background-color: var(--text-field-affix-disabled) !important;
|
|
9977
|
-
}
|
|
9978
|
-
:has(.tl-text-field__input:disabled) .tl-text-field__suffix--icon.tl-icon {
|
|
9979
|
-
background-color: var(--text-field-affix-disabled);
|
|
9980
|
-
}
|
|
9981
10682
|
|
|
9982
10683
|
.tl-text-field--label-inside:has(.tl-text-field__input:focus) .tl-text-field__label,
|
|
9983
10684
|
.tl-text-field--label-inside:has(.tl-text-field__input:not(:placeholder-shown)) .tl-text-field__label {
|
|
@@ -10072,16 +10773,7 @@ body {
|
|
|
10072
10773
|
--textarea-error-icon: var(--component--input-icon-error-default);
|
|
10073
10774
|
--textarea-textcounter: var(--component--input-text-counter-default);
|
|
10074
10775
|
--textarea-resize-icon: var(--component-textarea-icon-resize-default);
|
|
10075
|
-
--textarea-opacity-disabled: var(--component--input-opacity-disabled);
|
|
10076
|
-
--textarea-border-radius: calc(var(--component--input-border-radius-top-left) * 1px)
|
|
10077
|
-
calc(var(--component--input-border-radius-top-right) * 1px)
|
|
10078
|
-
calc(var(--component--input-border-radius-bottom-right) * 1px)
|
|
10079
|
-
calc(var(--component--input-border-radius-bottom-left) * 1px);
|
|
10080
|
-
--textarea-border-color: var(--component--input-border-default);
|
|
10081
|
-
--textarea-border-color-hover: var(--component--input-border-hover);
|
|
10082
|
-
--textarea-border-color-success: var(--component--input-border-success-default);
|
|
10083
|
-
--textarea-border-color-error: var(--component--input-border-error-default);
|
|
10084
|
-
--textarea-border-color-readonly: var(--color-border-strong);
|
|
10776
|
+
--textarea-opacity-disabled: calc(var(--component--input-opacity-disabled) / 100);
|
|
10085
10777
|
--textarea-focus-ring-radius: var(--component-textarea-focus-ring-radius-primary);
|
|
10086
10778
|
}
|
|
10087
10779
|
.tl-textarea--primary {
|
|
@@ -10211,10 +10903,14 @@ body {
|
|
|
10211
10903
|
font-weight: var(--detail-02-font-weight);
|
|
10212
10904
|
letter-spacing: var(--detail-02-letter-spacing);
|
|
10213
10905
|
text-transform: var(--detail-02-text-transform);
|
|
10906
|
+
border-width: calc(var(--component--input-border-width-top) * 1px) calc(var(--component--input-border-width-right) * 1px) calc(var(--component--input-border-width-bottom) * 1px) calc(var(--component--input-border-width-left) * 1px);
|
|
10907
|
+
border-radius: calc(var(--component--input-border-radius-top-left) * 1px) calc(var(--component--input-border-radius-top-right) * 1px) calc(var(--component--input-border-radius-bottom-right) * 1px) calc(var(--component--input-border-radius-bottom-left) * 1px);
|
|
10908
|
+
border-style: solid;
|
|
10909
|
+
border-color: var(--component--input-border-default);
|
|
10214
10910
|
display: block;
|
|
10215
10911
|
position: relative;
|
|
10216
10912
|
width: 100%;
|
|
10217
|
-
padding: var(--
|
|
10913
|
+
padding: var(--unit-20) var(--unit-16);
|
|
10218
10914
|
color: var(--textarea-text);
|
|
10219
10915
|
resize: vertical;
|
|
10220
10916
|
z-index: 0;
|
|
@@ -10232,10 +10928,16 @@ body {
|
|
|
10232
10928
|
display: none;
|
|
10233
10929
|
}
|
|
10234
10930
|
.tl-textarea:hover .tl-textarea__input:not(:focus, :disabled) {
|
|
10235
|
-
border-
|
|
10931
|
+
border-width: calc(var(--component--input-border-width-top) * 1px) calc(var(--component--input-border-width-right) * 1px) calc(var(--component--input-border-width-bottom) * 1px) calc(var(--component--input-border-width-left) * 1px);
|
|
10932
|
+
border-radius: calc(var(--component--input-border-radius-top-left) * 1px) calc(var(--component--input-border-radius-top-right) * 1px) calc(var(--component--input-border-radius-bottom-right) * 1px) calc(var(--component--input-border-radius-bottom-left) * 1px);
|
|
10933
|
+
border-style: solid;
|
|
10934
|
+
border-color: var(--component--input-border-hover);
|
|
10236
10935
|
}
|
|
10237
10936
|
.tl-textarea--error .tl-textarea__input {
|
|
10238
|
-
border-
|
|
10937
|
+
border-width: calc(var(--component--input-border-width-top) * 1px) calc(var(--component--input-border-width-right) * 1px) calc(var(--component--input-border-width-bottom) * 1px) calc(var(--component--input-border-width-left) * 1px);
|
|
10938
|
+
border-radius: calc(var(--component--input-border-radius-top-left) * 1px) calc(var(--component--input-border-radius-top-right) * 1px) calc(var(--component--input-border-radius-bottom-right) * 1px) calc(var(--component--input-border-radius-bottom-left) * 1px);
|
|
10939
|
+
border-style: solid;
|
|
10940
|
+
border-color: var(--component--input-text-error-default);
|
|
10239
10941
|
}
|
|
10240
10942
|
.tl-textarea--error .tl-textarea__input:focus {
|
|
10241
10943
|
outline: 2px solid var(--component--focus-ring-color-strong);
|
|
@@ -10244,17 +10946,26 @@ body {
|
|
|
10244
10946
|
z-index: 1;
|
|
10245
10947
|
}
|
|
10246
10948
|
.tl-textarea--error:hover .tl-textarea__input:not(:focus, :disabled) {
|
|
10247
|
-
border-
|
|
10949
|
+
border-width: calc(var(--component--input-border-width-top) * 1px) calc(var(--component--input-border-width-right) * 1px) calc(var(--component--input-border-width-bottom) * 1px) calc(var(--component--input-border-width-left) * 1px);
|
|
10950
|
+
border-radius: calc(var(--component--input-border-radius-top-left) * 1px) calc(var(--component--input-border-radius-top-right) * 1px) calc(var(--component--input-border-radius-bottom-right) * 1px) calc(var(--component--input-border-radius-bottom-left) * 1px);
|
|
10951
|
+
border-style: solid;
|
|
10952
|
+
border-color: var(--component--input-text-error-default);
|
|
10248
10953
|
}
|
|
10249
10954
|
.tl-textarea--success:not(:has(.tl-textarea__input[readonly]), :has(.tl-textarea__input:disabled)) .tl-textarea__input:not(:focus) {
|
|
10250
|
-
border-
|
|
10955
|
+
border-width: calc(var(--component--input-border-width-top) * 1px) calc(var(--component--input-border-width-right) * 1px) calc(var(--component--input-border-width-bottom) * 1px) calc(var(--component--input-border-width-left) * 1px);
|
|
10956
|
+
border-radius: calc(var(--component--input-border-radius-top-left) * 1px) calc(var(--component--input-border-radius-top-right) * 1px) calc(var(--component--input-border-radius-bottom-right) * 1px) calc(var(--component--input-border-radius-bottom-left) * 1px);
|
|
10957
|
+
border-style: solid;
|
|
10958
|
+
border-color: var(--component--input-border-success-default);
|
|
10251
10959
|
}
|
|
10252
10960
|
.tl-textarea__input:disabled {
|
|
10253
10961
|
cursor: not-allowed;
|
|
10254
10962
|
pointer-events: none;
|
|
10255
10963
|
}
|
|
10256
10964
|
:has(.tl-textarea__input[readonly]):not(:has(.tl-textarea__input:disabled)) .tl-textarea__input {
|
|
10257
|
-
border-
|
|
10965
|
+
border-width: calc(var(--component--input-border-width-top) * 1px) calc(var(--component--input-border-width-right) * 1px) calc(var(--component--input-border-width-bottom) * 1px) calc(var(--component--input-border-width-left) * 1px);
|
|
10966
|
+
border-radius: calc(var(--component--input-border-radius-top-left) * 1px) calc(var(--component--input-border-radius-top-right) * 1px) calc(var(--component--input-border-radius-bottom-right) * 1px) calc(var(--component--input-border-radius-bottom-left) * 1px);
|
|
10967
|
+
border-style: solid;
|
|
10968
|
+
border-color: var(--color-border-defined);
|
|
10258
10969
|
}
|
|
10259
10970
|
:has(.tl-textarea__input[readonly]):not(:has(.tl-textarea__input:disabled)) .tl-textarea__input:focus {
|
|
10260
10971
|
outline: 2px solid var(--component--focus-ring-color-strong);
|
|
@@ -10263,7 +10974,10 @@ body {
|
|
|
10263
10974
|
z-index: 1;
|
|
10264
10975
|
}
|
|
10265
10976
|
:has(.tl-textarea__input[readonly]):not(:has(.tl-textarea__input:disabled)):hover .tl-textarea__input:not(:focus) {
|
|
10266
|
-
border-
|
|
10977
|
+
border-width: calc(var(--component--input-border-width-top) * 1px) calc(var(--component--input-border-width-right) * 1px) calc(var(--component--input-border-width-bottom) * 1px) calc(var(--component--input-border-width-left) * 1px);
|
|
10978
|
+
border-radius: calc(var(--component--input-border-radius-top-left) * 1px) calc(var(--component--input-border-radius-top-right) * 1px) calc(var(--component--input-border-radius-bottom-right) * 1px) calc(var(--component--input-border-radius-bottom-left) * 1px);
|
|
10979
|
+
border-style: solid;
|
|
10980
|
+
border-color: var(--component--input-border-hover);
|
|
10267
10981
|
}
|
|
10268
10982
|
.tl-textarea--label-inside .tl-textarea__input {
|
|
10269
10983
|
padding-top: 26px;
|
|
@@ -10273,9 +10987,6 @@ body {
|
|
|
10273
10987
|
color: transparent;
|
|
10274
10988
|
transform: translateY(1px);
|
|
10275
10989
|
}
|
|
10276
|
-
.tl-textarea--label-inside .tl-textarea__input:disabled::placeholder {
|
|
10277
|
-
color: var(--textarea-placeholder-disabled) !important;
|
|
10278
|
-
}
|
|
10279
10990
|
:has(.tl-textarea__input[readonly]):not(:has(.tl-textarea__input:disabled)) .tl-textarea__input {
|
|
10280
10991
|
user-select: auto;
|
|
10281
10992
|
caret-color: transparent;
|
|
@@ -10322,12 +11033,8 @@ body {
|
|
|
10322
11033
|
letter-spacing: var(--detail-07-letter-spacing);
|
|
10323
11034
|
text-transform: var(--detail-07-text-transform);
|
|
10324
11035
|
top: 8px;
|
|
10325
|
-
color: var(--textarea-label-disabled);
|
|
10326
11036
|
transform: translateY(0);
|
|
10327
11037
|
}
|
|
10328
|
-
.tl-textarea:not(.tl-textarea--label-inside):has(.tl-textarea__input:disabled) .tl-textarea__label {
|
|
10329
|
-
color: var(--textarea-label-disabled);
|
|
10330
|
-
}
|
|
10331
11038
|
|
|
10332
11039
|
.tl-textarea__bottom {
|
|
10333
11040
|
display: flex;
|
|
@@ -10345,9 +11052,6 @@ body {
|
|
|
10345
11052
|
color: var(--textarea-helper);
|
|
10346
11053
|
position: relative;
|
|
10347
11054
|
}
|
|
10348
|
-
:has(.tl-textarea__input:disabled) .tl-textarea__helper {
|
|
10349
|
-
color: var(--color-text-disabled);
|
|
10350
|
-
}
|
|
10351
11055
|
.tl-textarea--error .tl-textarea__helper {
|
|
10352
11056
|
padding-left: 24px;
|
|
10353
11057
|
}
|
|
@@ -10373,9 +11077,6 @@ body {
|
|
|
10373
11077
|
.tl-textarea--error:not(:has(.tl-textarea__input[readonly]), :has(.tl-textarea__input:disabled)) .tl-textarea__helper {
|
|
10374
11078
|
color: var(--textarea-error);
|
|
10375
11079
|
}
|
|
10376
|
-
.tl-textarea--error:has(.tl-textarea__input:disabled) .tl-textarea__helper::before {
|
|
10377
|
-
background-color: var(--color-text-disabled);
|
|
10378
|
-
}
|
|
10379
11080
|
|
|
10380
11081
|
.tl-textarea__charcounter {
|
|
10381
11082
|
font-family: var(--detail-05-font-family);
|
|
@@ -10387,9 +11088,6 @@ body {
|
|
|
10387
11088
|
margin-left: auto;
|
|
10388
11089
|
color: var(--textarea-textcounter);
|
|
10389
11090
|
}
|
|
10390
|
-
:has(.tl-textarea__input:disabled) .tl-textarea__charcounter {
|
|
10391
|
-
color: var(--color-text-disabled);
|
|
10392
|
-
}
|
|
10393
11091
|
.tl-textarea--error:not(:has(.tl-textarea__input[readonly]), :has(.tl-textarea__input:disabled)) .tl-textarea__charcounter {
|
|
10394
11092
|
color: var(--textarea-error);
|
|
10395
11093
|
}
|
|
@@ -10397,10 +11095,6 @@ body {
|
|
|
10397
11095
|
color: var(--textarea-error);
|
|
10398
11096
|
}
|
|
10399
11097
|
|
|
10400
|
-
.tl-textarea__charcounter-divider {
|
|
10401
|
-
color: var(--color-text-disabled);
|
|
10402
|
-
}
|
|
10403
|
-
|
|
10404
11098
|
.tl-textarea--label-inside:has(.tl-textarea__input:focus) .tl-textarea__label,
|
|
10405
11099
|
.tl-textarea--label-inside:has(.tl-textarea__input:not(:placeholder-shown)) .tl-textarea__label {
|
|
10406
11100
|
font-family: var(--detail-07-font-family);
|