@scania/tegel-lite 0.1.0-var-pre-beta.0 → 0.1.0-var-batch-8-beta
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 +1049 -448
- package/dist/global.css +24 -16
- package/dist/scania-variables.css +0 -1
- package/dist/tl-accordion.css +83 -32
- package/dist/tl-block.css +62 -7
- package/dist/tl-checkbox-vars.css +142 -31
- package/dist/tl-checkbox.css +194 -115
- package/dist/tl-radio-button.css +158 -96
- package/dist/tl-table.css +16 -0
- package/dist/tl-text-field.css +252 -76
- package/dist/tl-textarea.css +274 -76
- package/dist/tl-toggle.css +147 -42
- package/dist/traton-variables.css +4 -1
- package/package.json +1 -1
package/dist/components.css
CHANGED
|
@@ -11,48 +11,99 @@
|
|
|
11
11
|
* <link rel="stylesheet" href="node_modules/@scania/tegel-lite/dist/global.css">
|
|
12
12
|
* <link rel="stylesheet" href="node_modules/@scania/tegel-lite/dist/components.css">
|
|
13
13
|
*/
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
--accordion-background-
|
|
24
|
-
--accordion-background-
|
|
25
|
-
|
|
26
|
-
--accordion-
|
|
27
|
-
--accordion-
|
|
28
|
-
|
|
29
|
-
--accordion-
|
|
30
|
-
--accordion-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
/* Mode variants */
|
|
34
|
-
.tl-mode-light .tl-accordion--primary,
|
|
35
|
-
.tl-mode-light .tl-accordion .tl-accordion--primary {
|
|
36
|
-
background-color: var(--accordion-background-hover-secondary);
|
|
37
|
-
--accordion-background-hover: var(--accordion-background-hover-primary);
|
|
14
|
+
/**
|
|
15
|
+
* Do not edit directly, this file was auto-generated.
|
|
16
|
+
*/
|
|
17
|
+
:root,
|
|
18
|
+
.tds-mode-light,
|
|
19
|
+
.scania .tds-mode-light,
|
|
20
|
+
.scania.tds-mode-light,
|
|
21
|
+
.scania .tl-mode-light,
|
|
22
|
+
.scania.tl-mode-light {
|
|
23
|
+
--component-accordion-background-primary-default: var(--color-background-none);
|
|
24
|
+
--component-accordion-background-primary-hover: var(--color-background-layer-01);
|
|
25
|
+
--component-accordion-background-primary-active: var(--scania-color-grey-100);
|
|
26
|
+
--component-accordion-background-secondary-default: var(--color-background-none);
|
|
27
|
+
--component-accordion-background-secondary-hover: var(--scania-color-grey-100);
|
|
28
|
+
--component-accordion-background-secondary-active: var(--scania-color-grey-150);
|
|
29
|
+
--component-accordion-text-default: var(--color-text-strong);
|
|
30
|
+
--component-accordion-icon-default: var(--color-icon-strong);
|
|
31
|
+
--component-accordion-opacity-disabled: var(--scania-opacity-25);
|
|
38
32
|
}
|
|
39
33
|
|
|
40
|
-
.
|
|
41
|
-
.
|
|
42
|
-
|
|
43
|
-
|
|
34
|
+
.traton .tds-mode-light,
|
|
35
|
+
.traton.tds-mode-light,
|
|
36
|
+
.traton .tl-mode-light,
|
|
37
|
+
.traton.tl-mode-light {
|
|
38
|
+
--component-accordion-background-primary-default: var(--color-background-none);
|
|
39
|
+
--component-accordion-background-primary-hover: var(--color-background-layer-01);
|
|
40
|
+
--component-accordion-background-primary-active: var(--traton-color-grey-150);
|
|
41
|
+
--component-accordion-background-secondary-default: var(--color-background-none);
|
|
42
|
+
--component-accordion-background-secondary-hover: var(--traton-color-grey-150);
|
|
43
|
+
--component-accordion-background-secondary-active: var(--traton-color-grey-200);
|
|
44
|
+
--component-accordion-text-default: var(--color-text-strong);
|
|
45
|
+
--component-accordion-icon-default: var(--color-icon-strong);
|
|
46
|
+
--component-accordion-opacity-disabled: var(--traton-opacity-25);
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
.tds-mode-dark,
|
|
50
|
+
.scania .tds-mode-dark,
|
|
51
|
+
.scania.tds-mode-dark,
|
|
52
|
+
.scania .tl-mode-dark,
|
|
53
|
+
.scania.tl-mode-dark {
|
|
54
|
+
--component-accordion-background-primary-default: var(--color-background-none);
|
|
55
|
+
--component-accordion-background-primary-hover: var(--color-background-layer-01);
|
|
56
|
+
--component-accordion-background-primary-active: var(--scania-color-grey-850);
|
|
57
|
+
--component-accordion-background-secondary-default: var(--color-background-none);
|
|
58
|
+
--component-accordion-background-secondary-hover: var(--scania-color-grey-800);
|
|
59
|
+
--component-accordion-background-secondary-active: var(--scania-color-grey-750);
|
|
60
|
+
--component-accordion-text-default: var(--color-text-strong);
|
|
61
|
+
--component-accordion-icon-default: var(--color-icon-strong);
|
|
62
|
+
--component-accordion-opacity-disabled: var(--scania-opacity-25);
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
.traton .tds-mode-dark,
|
|
66
|
+
.traton.tds-mode-dark,
|
|
67
|
+
.traton .tl-mode-dark,
|
|
68
|
+
.traton.tl-mode-dark {
|
|
69
|
+
--component-accordion-background-primary-default: var(--color-background-none);
|
|
70
|
+
--component-accordion-background-primary-hover: var(--color-background-layer-01);
|
|
71
|
+
--component-accordion-background-primary-active: var(--traton-color-blue-900);
|
|
72
|
+
--component-accordion-background-secondary-default: var(--color-background-none);
|
|
73
|
+
--component-accordion-background-secondary-hover: var(--traton-color-blue-900);
|
|
74
|
+
--component-accordion-background-secondary-active: var(--traton-color-blue-850);
|
|
75
|
+
--component-accordion-text-default: var(--color-text-strong);
|
|
76
|
+
--component-accordion-icon-default: var(--color-icon-strong);
|
|
77
|
+
--component-accordion-opacity-disabled: var(--traton-opacity-25);
|
|
44
78
|
}
|
|
45
79
|
|
|
46
|
-
|
|
47
|
-
.tl-
|
|
48
|
-
background
|
|
80
|
+
/* Component variables */
|
|
81
|
+
.tl-accordion {
|
|
82
|
+
--accordion-background: var(--component-accordion-background-primary-default);
|
|
83
|
+
--accordion-background-hover-primary: var(--component-accordion-background-primary-hover);
|
|
84
|
+
--accordion-background-hover-secondary: var(--component-accordion-background-secondary-hover);
|
|
85
|
+
--accordion-background-hover: var(--accordion-background-hover-primary);
|
|
86
|
+
--accordion-background-focus: var(--color-background-none);
|
|
87
|
+
--accordion-background-active: var(--component-accordion-background-primary-active);
|
|
88
|
+
--accordion-text: var(--component-accordion-text-default);
|
|
89
|
+
--accordion-icon: var(--component-accordion-icon-default);
|
|
90
|
+
--accordion-text-disabled: var(--color-text-disabled);
|
|
91
|
+
--accordion-border: var(--color-border-subtle);
|
|
92
|
+
--accordion-opacity-disabled: calc(var(--component-accordion-opacity-disabled) / 100);
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
.tl-accordion--primary,
|
|
96
|
+
.tl-accordion .tl-accordion--primary {
|
|
97
|
+
--accordion-background: var(--component-accordion-background-primary-default);
|
|
49
98
|
--accordion-background-hover: var(--accordion-background-hover-primary);
|
|
99
|
+
--accordion-background-active: var(--component-accordion-background-primary-active);
|
|
50
100
|
}
|
|
51
101
|
|
|
52
|
-
.tl-
|
|
53
|
-
.tl-
|
|
54
|
-
background
|
|
102
|
+
.tl-accordion--secondary,
|
|
103
|
+
.tl-accordion .tl-accordion--secondary {
|
|
104
|
+
--accordion-background: var(--component-accordion-background-secondary-default);
|
|
55
105
|
--accordion-background-hover: var(--accordion-background-hover-secondary);
|
|
106
|
+
--accordion-background-active: var(--component-accordion-background-secondary-active);
|
|
56
107
|
}
|
|
57
108
|
|
|
58
109
|
/* Typography Usage mixins */
|
|
@@ -486,15 +537,70 @@
|
|
|
486
537
|
text-decoration: none;
|
|
487
538
|
}
|
|
488
539
|
|
|
540
|
+
/**
|
|
541
|
+
* Do not edit directly, this file was auto-generated.
|
|
542
|
+
*/
|
|
543
|
+
:root,
|
|
544
|
+
.tds-mode-light,
|
|
545
|
+
.scania .tds-mode-light,
|
|
546
|
+
.scania.tds-mode-light,
|
|
547
|
+
.scania .tl-mode-light,
|
|
548
|
+
.scania.tl-mode-light {
|
|
549
|
+
--component-block-background-primary: var(--color-background-layer-01);
|
|
550
|
+
--component-block-background-secondary: var(--color-background-layer-02);
|
|
551
|
+
--component-block-background-nested-even: var(--component-block-background-primary);
|
|
552
|
+
--component-block-background-nested-odd: var(--component-block-background-secondary);
|
|
553
|
+
--component-block-border-radius-default: var(--scania-unit-4);
|
|
554
|
+
--component-block-border-radius-none: var(--scania-unit-0);
|
|
555
|
+
}
|
|
556
|
+
|
|
557
|
+
.traton .tds-mode-light,
|
|
558
|
+
.traton.tds-mode-light,
|
|
559
|
+
.traton .tl-mode-light,
|
|
560
|
+
.traton.tl-mode-light {
|
|
561
|
+
--component-block-background-primary: var(--color-background-layer-01);
|
|
562
|
+
--component-block-background-secondary: var(--color-background-layer-02);
|
|
563
|
+
--component-block-background-nested-even: var(--component-block-background-primary);
|
|
564
|
+
--component-block-background-nested-odd: var(--component-block-background-secondary);
|
|
565
|
+
--component-block-border-radius-default: var(--traton-unit-4);
|
|
566
|
+
--component-block-border-radius-none: var(--traton-unit-0);
|
|
567
|
+
}
|
|
568
|
+
|
|
569
|
+
.tds-mode-dark,
|
|
570
|
+
.scania .tds-mode-dark,
|
|
571
|
+
.scania.tds-mode-dark,
|
|
572
|
+
.scania .tl-mode-dark,
|
|
573
|
+
.scania.tl-mode-dark {
|
|
574
|
+
--component-block-background-primary: var(--color-background-layer-01);
|
|
575
|
+
--component-block-background-secondary: var(--color-background-layer-02);
|
|
576
|
+
--component-block-background-nested-even: var(--component-block-background-primary);
|
|
577
|
+
--component-block-background-nested-odd: var(--component-block-background-secondary);
|
|
578
|
+
--component-block-border-radius-default: var(--scania-unit-4);
|
|
579
|
+
--component-block-border-radius-none: var(--scania-unit-0);
|
|
580
|
+
}
|
|
581
|
+
|
|
582
|
+
.traton .tds-mode-dark,
|
|
583
|
+
.traton.tds-mode-dark,
|
|
584
|
+
.traton .tl-mode-dark,
|
|
585
|
+
.traton.tl-mode-dark {
|
|
586
|
+
--component-block-background-primary: var(--color-background-layer-01);
|
|
587
|
+
--component-block-background-secondary: var(--color-background-layer-02);
|
|
588
|
+
--component-block-background-nested-even: var(--component-block-background-primary);
|
|
589
|
+
--component-block-background-nested-odd: var(--component-block-background-secondary);
|
|
590
|
+
--component-block-border-radius-default: var(--traton-unit-4);
|
|
591
|
+
--component-block-border-radius-none: var(--traton-unit-0);
|
|
592
|
+
}
|
|
593
|
+
|
|
594
|
+
/* Component variables */
|
|
489
595
|
.tl-block {
|
|
490
|
-
--block-background: var(--
|
|
491
|
-
--block-text-color: var(--color-
|
|
492
|
-
--block-background-mode-primary: var(--
|
|
493
|
-
--block-background-mode-secondary: var(--
|
|
494
|
-
--block-background-even: var(--
|
|
495
|
-
--block-background-odd: var(--
|
|
596
|
+
--block-background: var(--component-block-background-primary);
|
|
597
|
+
--block-text-color: var(--color-text-strong);
|
|
598
|
+
--block-background-mode-primary: var(--component-block-background-primary);
|
|
599
|
+
--block-background-mode-secondary: var(--component-block-background-secondary);
|
|
600
|
+
--block-background-even: var(--component-block-background-nested-even);
|
|
601
|
+
--block-background-odd: var(--component-block-background-nested-odd);
|
|
496
602
|
--block-padding: 16px;
|
|
497
|
-
--block-border-radius:
|
|
603
|
+
--block-border-radius: calc(var(--component-block-border-radius-default) * 1px);
|
|
498
604
|
}
|
|
499
605
|
|
|
500
606
|
.tl-block {
|
|
@@ -1702,43 +1808,154 @@
|
|
|
1702
1808
|
color: var(--card-icon-color);
|
|
1703
1809
|
}
|
|
1704
1810
|
|
|
1811
|
+
/**
|
|
1812
|
+
* Do not edit directly, this file was auto-generated.
|
|
1813
|
+
*/
|
|
1814
|
+
:root,
|
|
1815
|
+
.tds-mode-light,
|
|
1816
|
+
.scania .tds-mode-light,
|
|
1817
|
+
.scania.tds-mode-light,
|
|
1818
|
+
.scania .tl-mode-light,
|
|
1819
|
+
.scania.tl-mode-light {
|
|
1820
|
+
--component-checkbox-background-standard-default: var(--color-background-none);
|
|
1821
|
+
--component-checkbox-background-standard-hover: var(--color-background-none);
|
|
1822
|
+
--component-checkbox-background-selected-default: var(--scania-color-grey-950);
|
|
1823
|
+
--component-checkbox-background-selected-hover: var(--scania-color-grey-950);
|
|
1824
|
+
--component-checkbox-background-indeterminate-default: var(--scania-color-grey-950);
|
|
1825
|
+
--component-checkbox-background-indeterminate-hover: var(--scania-color-grey-950);
|
|
1826
|
+
--component-checkbox-border-standard-default: var(--color-border-strong);
|
|
1827
|
+
--component-checkbox-border-standard-hover: var(--color-border-strong);
|
|
1828
|
+
--component-checkbox-border-selected-default: var(--color-border-none);
|
|
1829
|
+
--component-checkbox-border-selected-hover: var(--color-border-none);
|
|
1830
|
+
--component-checkbox-border-indeterminate-default: var(--color-border-none);
|
|
1831
|
+
--component-checkbox-border-indeterminate-hover: var(--color-border-none);
|
|
1832
|
+
--component-checkbox-border-indicator-default: var(--color-border-none);
|
|
1833
|
+
--component-checkbox-border-indicator-hover: var(--color-border-subtle);
|
|
1834
|
+
--component-checkbox-border-radius-default: var(--scania-unit-2);
|
|
1835
|
+
--component-checkbox-focus-ring-radius-default: var(--component--focus-ring-radius-medium);
|
|
1836
|
+
--component-checkbox-icon-selected-default: var(--color-icon-inverse-strong);
|
|
1837
|
+
--component-checkbox-icon-selected-hover: var(--color-icon-inverse-strong);
|
|
1838
|
+
--component-checkbox-icon-indeterminate-default: var(--color-icon-inverse-strong);
|
|
1839
|
+
--component-checkbox-icon-indeterminate-hover: var(--color-icon-inverse-strong);
|
|
1840
|
+
--component-checkbox-opacity-disabled: var(--scania-opacity-25);
|
|
1841
|
+
--component-checkbox-text-default: var(--color-text-strong);
|
|
1842
|
+
--component-checkbox-text-hover: var(--color-text-strong);
|
|
1843
|
+
}
|
|
1844
|
+
|
|
1845
|
+
.traton .tds-mode-light,
|
|
1846
|
+
.traton.tds-mode-light,
|
|
1847
|
+
.traton .tl-mode-light,
|
|
1848
|
+
.traton.tl-mode-light {
|
|
1849
|
+
--component-checkbox-background-standard-default: var(--color-background-none);
|
|
1850
|
+
--component-checkbox-background-standard-hover: var(--color-background-none);
|
|
1851
|
+
--component-checkbox-background-selected-default: var(--traton-color-blue-950);
|
|
1852
|
+
--component-checkbox-background-selected-hover: var(--traton-color-blue-950);
|
|
1853
|
+
--component-checkbox-background-indeterminate-default: var(--traton-color-blue-950);
|
|
1854
|
+
--component-checkbox-background-indeterminate-hover: var(--traton-color-blue-950);
|
|
1855
|
+
--component-checkbox-border-standard-default: var(--color-border-strong);
|
|
1856
|
+
--component-checkbox-border-standard-hover: var(--color-border-strong);
|
|
1857
|
+
--component-checkbox-border-selected-default: var(--color-border-none);
|
|
1858
|
+
--component-checkbox-border-selected-hover: var(--color-border-none);
|
|
1859
|
+
--component-checkbox-border-indeterminate-default: var(--color-border-none);
|
|
1860
|
+
--component-checkbox-border-indeterminate-hover: var(--color-border-none);
|
|
1861
|
+
--component-checkbox-border-indicator-default: var(--color-border-none);
|
|
1862
|
+
--component-checkbox-border-indicator-hover: var(--color-border-subtle);
|
|
1863
|
+
--component-checkbox-border-radius-default: var(--traton-unit-2);
|
|
1864
|
+
--component-checkbox-focus-ring-radius-default: var(--component--focus-ring-radius-medium);
|
|
1865
|
+
--component-checkbox-icon-selected-default: var(--color-icon-inverse-strong);
|
|
1866
|
+
--component-checkbox-icon-selected-hover: var(--color-icon-inverse-strong);
|
|
1867
|
+
--component-checkbox-icon-indeterminate-default: var(--color-icon-inverse-strong);
|
|
1868
|
+
--component-checkbox-icon-indeterminate-hover: var(--color-icon-inverse-strong);
|
|
1869
|
+
--component-checkbox-opacity-disabled: var(--traton-opacity-25);
|
|
1870
|
+
--component-checkbox-text-default: var(--color-text-strong);
|
|
1871
|
+
--component-checkbox-text-hover: var(--color-text-strong);
|
|
1872
|
+
}
|
|
1873
|
+
|
|
1874
|
+
.tds-mode-dark,
|
|
1875
|
+
.scania .tds-mode-dark,
|
|
1876
|
+
.scania.tds-mode-dark,
|
|
1877
|
+
.scania .tl-mode-dark,
|
|
1878
|
+
.scania.tl-mode-dark {
|
|
1879
|
+
--component-checkbox-background-standard-default: var(--color-background-none);
|
|
1880
|
+
--component-checkbox-background-standard-hover: var(--color-background-none);
|
|
1881
|
+
--component-checkbox-background-selected-default: var(--scania-color-grey-50);
|
|
1882
|
+
--component-checkbox-background-selected-hover: var(--scania-color-grey-50);
|
|
1883
|
+
--component-checkbox-background-indeterminate-default: var(--scania-color-grey-50);
|
|
1884
|
+
--component-checkbox-background-indeterminate-hover: var(--scania-color-grey-50);
|
|
1885
|
+
--component-checkbox-border-standard-default: var(--color-border-strong);
|
|
1886
|
+
--component-checkbox-border-standard-hover: var(--color-border-strong);
|
|
1887
|
+
--component-checkbox-border-selected-default: var(--color-border-none);
|
|
1888
|
+
--component-checkbox-border-selected-hover: var(--color-border-none);
|
|
1889
|
+
--component-checkbox-border-indeterminate-default: var(--color-border-none);
|
|
1890
|
+
--component-checkbox-border-indeterminate-hover: var(--color-border-none);
|
|
1891
|
+
--component-checkbox-border-indicator-default: var(--color-border-none);
|
|
1892
|
+
--component-checkbox-border-indicator-hover: var(--color-border-subtle);
|
|
1893
|
+
--component-checkbox-border-radius-default: var(--scania-unit-2);
|
|
1894
|
+
--component-checkbox-focus-ring-radius-default: var(--component--focus-ring-radius-medium);
|
|
1895
|
+
--component-checkbox-icon-selected-default: var(--color-icon-inverse-strong);
|
|
1896
|
+
--component-checkbox-icon-selected-hover: var(--color-icon-inverse-strong);
|
|
1897
|
+
--component-checkbox-icon-indeterminate-default: var(--color-icon-inverse-strong);
|
|
1898
|
+
--component-checkbox-icon-indeterminate-hover: var(--color-icon-inverse-strong);
|
|
1899
|
+
--component-checkbox-opacity-disabled: var(--scania-opacity-25);
|
|
1900
|
+
--component-checkbox-text-default: var(--color-text-strong);
|
|
1901
|
+
--component-checkbox-text-hover: var(--color-text-strong);
|
|
1902
|
+
}
|
|
1903
|
+
|
|
1904
|
+
.traton .tds-mode-dark,
|
|
1905
|
+
.traton.tds-mode-dark,
|
|
1906
|
+
.traton .tl-mode-dark,
|
|
1907
|
+
.traton.tl-mode-dark {
|
|
1908
|
+
--component-checkbox-background-standard-default: var(--color-background-none);
|
|
1909
|
+
--component-checkbox-background-standard-hover: var(--color-background-none);
|
|
1910
|
+
--component-checkbox-background-selected-default: var(--traton-color-base-white);
|
|
1911
|
+
--component-checkbox-background-selected-hover: var(--traton-color-base-white);
|
|
1912
|
+
--component-checkbox-background-indeterminate-default: var(--traton-color-base-white);
|
|
1913
|
+
--component-checkbox-background-indeterminate-hover: var(--traton-color-base-white);
|
|
1914
|
+
--component-checkbox-border-standard-default: var(--color-border-strong);
|
|
1915
|
+
--component-checkbox-border-standard-hover: var(--color-border-strong);
|
|
1916
|
+
--component-checkbox-border-selected-default: var(--color-border-none);
|
|
1917
|
+
--component-checkbox-border-selected-hover: var(--color-border-none);
|
|
1918
|
+
--component-checkbox-border-indeterminate-default: var(--color-border-none);
|
|
1919
|
+
--component-checkbox-border-indeterminate-hover: var(--color-border-none);
|
|
1920
|
+
--component-checkbox-border-indicator-default: var(--color-border-none);
|
|
1921
|
+
--component-checkbox-border-indicator-hover: var(--color-border-subtle);
|
|
1922
|
+
--component-checkbox-border-radius-default: var(--traton-unit-2);
|
|
1923
|
+
--component-checkbox-focus-ring-radius-default: var(--component--focus-ring-radius-medium);
|
|
1924
|
+
--component-checkbox-icon-selected-default: var(--color-icon-inverse-strong);
|
|
1925
|
+
--component-checkbox-icon-selected-hover: var(--color-icon-inverse-strong);
|
|
1926
|
+
--component-checkbox-icon-indeterminate-default: var(--color-icon-inverse-strong);
|
|
1927
|
+
--component-checkbox-icon-indeterminate-hover: var(--color-icon-inverse-strong);
|
|
1928
|
+
--component-checkbox-opacity-disabled: var(--traton-opacity-25);
|
|
1929
|
+
--component-checkbox-text-default: var(--color-text-strong);
|
|
1930
|
+
--component-checkbox-text-hover: var(--color-text-strong);
|
|
1931
|
+
}
|
|
1932
|
+
|
|
1705
1933
|
.tl-checkbox {
|
|
1706
|
-
--checkbox-
|
|
1707
|
-
--checkbox-
|
|
1708
|
-
--checkbox-
|
|
1709
|
-
--checkbox-
|
|
1710
|
-
--checkbox-
|
|
1711
|
-
--checkbox-
|
|
1712
|
-
--checkbox-
|
|
1713
|
-
--checkbox-
|
|
1714
|
-
--checkbox-border
|
|
1715
|
-
--checkbox-
|
|
1716
|
-
--checkbox-
|
|
1717
|
-
--checkbox-
|
|
1718
|
-
--checkbox-
|
|
1719
|
-
--checkbox-
|
|
1720
|
-
--checkbox-
|
|
1721
|
-
|
|
1722
|
-
|
|
1723
|
-
|
|
1724
|
-
--checkbox-
|
|
1725
|
-
--checkbox-
|
|
1726
|
-
--checkbox-
|
|
1727
|
-
--checkbox-
|
|
1728
|
-
|
|
1729
|
-
|
|
1730
|
-
.
|
|
1731
|
-
--checkbox-focus-width: 20px;
|
|
1732
|
-
--checkbox-focus-height: 20px;
|
|
1733
|
-
--checkbox-focus-left: 2px;
|
|
1734
|
-
--checkbox-focus-top: 2px;
|
|
1735
|
-
}
|
|
1736
|
-
|
|
1737
|
-
.traton .tl-checkbox {
|
|
1738
|
-
--checkbox-focus-width: 22px;
|
|
1739
|
-
--checkbox-focus-height: 22px;
|
|
1740
|
-
--checkbox-focus-left: 1px;
|
|
1741
|
-
--checkbox-focus-top: 1px;
|
|
1934
|
+
--checkbox-text: var(--component-checkbox-text-default);
|
|
1935
|
+
--checkbox-text-hover: var(--component-checkbox-text-hover);
|
|
1936
|
+
--checkbox-background: var(--component-checkbox-background-standard-default);
|
|
1937
|
+
--checkbox-background-hover: var(--component-checkbox-background-standard-hover);
|
|
1938
|
+
--checkbox-background-selected: var(--component-checkbox-background-selected-default);
|
|
1939
|
+
--checkbox-background-selected-hover: var(--component-checkbox-background-selected-hover);
|
|
1940
|
+
--checkbox-background-indeterminate: var(--component-checkbox-background-indeterminate-default);
|
|
1941
|
+
--checkbox-background-indeterminate-hover: var(--component-checkbox-background-indeterminate-hover);
|
|
1942
|
+
--checkbox-border: var(--component-checkbox-border-standard-default);
|
|
1943
|
+
--checkbox-border-hover: var(--component-checkbox-border-standard-hover);
|
|
1944
|
+
--checkbox-border-selected: var(--component-checkbox-border-selected-default);
|
|
1945
|
+
--checkbox-border-selected-hover: var(--component-checkbox-border-selected-hover);
|
|
1946
|
+
--checkbox-border-indeterminate: var(--component-checkbox-border-indeterminate-default);
|
|
1947
|
+
--checkbox-border-indeterminate-hover: var(--component-checkbox-border-indeterminate-hover);
|
|
1948
|
+
--checkbox-indicator: var(--component-checkbox-border-indicator-default);
|
|
1949
|
+
--checkbox-indicator-hover: var(--component-checkbox-border-indicator-hover);
|
|
1950
|
+
--checkbox-icon-selected: var(--component-checkbox-icon-selected-default);
|
|
1951
|
+
--checkbox-icon-selected-hover: var(--component-checkbox-icon-selected-hover);
|
|
1952
|
+
--checkbox-icon-indeterminate: var(--component-checkbox-icon-indeterminate-default);
|
|
1953
|
+
--checkbox-icon-indeterminate-hover: var(--component-checkbox-icon-indeterminate-hover);
|
|
1954
|
+
--checkbox-border-radius: calc(var(--component-checkbox-border-radius-default) * 1px);
|
|
1955
|
+
--checkbox-focus-ring-radius: calc(var(--component-checkbox-focus-ring-radius-default) * 1px);
|
|
1956
|
+
--checkbox-opacity-disabled: calc(var(--component-checkbox-opacity-disabled) / 100);
|
|
1957
|
+
--checkbox-icon-mask: url("data:image/svg+xml;utf8,<svg width='8' height='6' viewBox='0 0 8 6' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M1 2.33333L3.4 5C4.80589 3.4379 5.59411 2.5621 7 1' stroke='%23000' stroke-linecap='round' stroke-linejoin='round'/></svg>");
|
|
1958
|
+
--checkbox-icon-mask-indeterminate: url("data:image/svg+xml;utf8,<svg width='8' height='2' viewBox='0 0 8 2' fill='none' xmlns='http://www.w3.org/2000/svg'><rect y='0.5' width='8' height='1' rx='0.5' fill='%23000'/></svg>");
|
|
1742
1959
|
}
|
|
1743
1960
|
|
|
1744
1961
|
.tl-checkbox {
|
|
@@ -1756,7 +1973,7 @@
|
|
|
1756
1973
|
text-transform: var(--detail-02-text-transform);
|
|
1757
1974
|
display: flex;
|
|
1758
1975
|
align-items: center;
|
|
1759
|
-
color: var(--checkbox-
|
|
1976
|
+
color: var(--checkbox-text);
|
|
1760
1977
|
}
|
|
1761
1978
|
.tl-checkbox:has(:disabled) {
|
|
1762
1979
|
cursor: not-allowed;
|
|
@@ -1767,7 +1984,6 @@
|
|
|
1767
1984
|
outline: none;
|
|
1768
1985
|
margin: 0;
|
|
1769
1986
|
border: 0;
|
|
1770
|
-
border-radius: 2px;
|
|
1771
1987
|
width: 24px;
|
|
1772
1988
|
height: 24px;
|
|
1773
1989
|
position: relative;
|
|
@@ -1779,90 +1995,76 @@
|
|
|
1779
1995
|
content: "";
|
|
1780
1996
|
position: absolute;
|
|
1781
1997
|
box-sizing: border-box;
|
|
1782
|
-
}
|
|
1783
|
-
.tl-checkbox__input::before {
|
|
1784
|
-
width: 20px;
|
|
1785
|
-
height: 20px;
|
|
1786
|
-
left: 2px;
|
|
1787
|
-
top: 2px;
|
|
1788
|
-
border-radius: 4px;
|
|
1789
|
-
}
|
|
1790
|
-
.tl-checkbox__input::after {
|
|
1791
|
-
border: 1px solid var(--checkbox-border);
|
|
1792
|
-
background-color: var(--checkbox-fill);
|
|
1793
1998
|
width: 16px;
|
|
1794
1999
|
height: 16px;
|
|
1795
2000
|
left: 4px;
|
|
1796
2001
|
top: 4px;
|
|
1797
|
-
border-radius: 2px;
|
|
1798
2002
|
}
|
|
1799
|
-
.tl-checkbox__input
|
|
1800
|
-
|
|
2003
|
+
.tl-checkbox__input::before {
|
|
2004
|
+
border: 1px solid var(--checkbox-border);
|
|
2005
|
+
background-color: var(--checkbox-background);
|
|
2006
|
+
border-radius: var(--checkbox-border-radius);
|
|
2007
|
+
box-shadow: 0 0 0 2px var(--checkbox-indicator);
|
|
2008
|
+
transition: box-shadow 0.2s ease-in-out;
|
|
1801
2009
|
}
|
|
1802
|
-
.tl-checkbox__input
|
|
1803
|
-
background-color: var(--checkbox-
|
|
1804
|
-
|
|
1805
|
-
|
|
1806
|
-
|
|
1807
|
-
|
|
1808
|
-
top: var(--checkbox-focus-top);
|
|
1809
|
-
}
|
|
1810
|
-
.tl-checkbox__input:hover:focus-visible::before {
|
|
1811
|
-
width: 20px;
|
|
1812
|
-
height: 20px;
|
|
1813
|
-
left: 2px;
|
|
1814
|
-
top: 2px;
|
|
1815
|
-
background-color: var(--checkbox-border-hover);
|
|
2010
|
+
.tl-checkbox__input::after {
|
|
2011
|
+
background-color: var(--checkbox-icon-selected);
|
|
2012
|
+
mask: var(--checkbox-icon-mask) no-repeat center;
|
|
2013
|
+
-webkit-mask: var(--checkbox-icon-mask) no-repeat center;
|
|
2014
|
+
opacity: 0;
|
|
2015
|
+
z-index: 1;
|
|
1816
2016
|
}
|
|
1817
|
-
.tl-checkbox__input:disabled {
|
|
1818
|
-
|
|
2017
|
+
.tl-checkbox__input:not(:disabled):hover::before {
|
|
2018
|
+
border-color: var(--checkbox-border-hover);
|
|
2019
|
+
background-color: var(--checkbox-background-hover);
|
|
2020
|
+
box-shadow: 0 0 0 2px var(--checkbox-indicator-hover);
|
|
1819
2021
|
}
|
|
1820
|
-
.tl-checkbox__input:
|
|
1821
|
-
|
|
1822
|
-
|
|
2022
|
+
.tl-checkbox__input:focus-visible::before {
|
|
2023
|
+
outline: 2px solid var(--component--focus-ring-color-strong);
|
|
2024
|
+
box-shadow: 0 0 0 1px var(--component--focus-ring-color-discrete);
|
|
2025
|
+
outline-offset: 1px;
|
|
2026
|
+
z-index: 1;
|
|
2027
|
+
border-radius: var(--checkbox-focus-ring-radius);
|
|
1823
2028
|
}
|
|
1824
|
-
.tl-checkbox__input:
|
|
1825
|
-
|
|
2029
|
+
.tl-checkbox__input:checked::before {
|
|
2030
|
+
border-color: var(--checkbox-border-selected);
|
|
2031
|
+
background-color: var(--checkbox-background-selected);
|
|
1826
2032
|
}
|
|
1827
2033
|
.tl-checkbox__input:checked::after {
|
|
1828
|
-
background-
|
|
1829
|
-
|
|
1830
|
-
background-repeat: no-repeat;
|
|
1831
|
-
background-position: center;
|
|
1832
|
-
border-color: var(--checkbox-border);
|
|
2034
|
+
background-color: var(--checkbox-icon-selected);
|
|
2035
|
+
opacity: 1;
|
|
1833
2036
|
}
|
|
1834
|
-
.tl-checkbox__input:checked:not(:disabled):hover::
|
|
1835
|
-
border-color: var(--checkbox-border-hover);
|
|
2037
|
+
.tl-checkbox__input:checked:not(:disabled):hover::before {
|
|
2038
|
+
border-color: var(--checkbox-border-selected-hover);
|
|
2039
|
+
background-color: var(--checkbox-background-selected-hover);
|
|
1836
2040
|
}
|
|
1837
|
-
.tl-checkbox__input:checked:disabled::after {
|
|
1838
|
-
background-
|
|
1839
|
-
background-color: var(--checkbox-fill-disabled);
|
|
1840
|
-
border-color: var(--checkbox-border-disabled);
|
|
2041
|
+
.tl-checkbox__input:checked:not(:disabled):hover::after {
|
|
2042
|
+
background-color: var(--checkbox-icon-selected-hover);
|
|
1841
2043
|
}
|
|
1842
|
-
.tl-checkbox__input
|
|
1843
|
-
|
|
2044
|
+
.tl-checkbox__input--indeterminate::before {
|
|
2045
|
+
border-color: var(--checkbox-border-indeterminate);
|
|
2046
|
+
background-color: var(--checkbox-background-indeterminate);
|
|
1844
2047
|
}
|
|
1845
2048
|
.tl-checkbox__input--indeterminate::after {
|
|
1846
|
-
background-
|
|
1847
|
-
|
|
1848
|
-
|
|
1849
|
-
|
|
1850
|
-
border-color: var(--checkbox-border);
|
|
2049
|
+
background-color: var(--checkbox-icon-indeterminate);
|
|
2050
|
+
mask: var(--checkbox-icon-mask-indeterminate) no-repeat center;
|
|
2051
|
+
-webkit-mask: var(--checkbox-icon-mask-indeterminate) no-repeat center;
|
|
2052
|
+
opacity: 1;
|
|
1851
2053
|
}
|
|
1852
|
-
.tl-checkbox__input--indeterminate:not(:disabled):hover::
|
|
1853
|
-
border-color: var(--checkbox-border-hover);
|
|
2054
|
+
.tl-checkbox__input--indeterminate:not(:disabled):hover::before {
|
|
2055
|
+
border-color: var(--checkbox-border-indeterminate-hover);
|
|
2056
|
+
background-color: var(--checkbox-background-indeterminate-hover);
|
|
1854
2057
|
}
|
|
1855
|
-
.tl-checkbox__input--indeterminate:disabled::after {
|
|
1856
|
-
background-
|
|
1857
|
-
background-color: var(--checkbox-fill-disabled);
|
|
1858
|
-
border-color: var(--checkbox-border-disabled);
|
|
2058
|
+
.tl-checkbox__input--indeterminate:not(:disabled):hover::after {
|
|
2059
|
+
background-color: var(--checkbox-icon-indeterminate-hover);
|
|
1859
2060
|
}
|
|
1860
|
-
.tl-checkbox__input
|
|
1861
|
-
|
|
2061
|
+
.tl-checkbox__input:disabled {
|
|
2062
|
+
cursor: not-allowed;
|
|
2063
|
+
opacity: var(--checkbox-opacity-disabled);
|
|
1862
2064
|
}
|
|
1863
2065
|
|
|
1864
2066
|
.tl-checkbox__label {
|
|
1865
|
-
color: var(--checkbox-
|
|
2067
|
+
color: var(--checkbox-text);
|
|
1866
2068
|
padding-left: var(--tds-spacing-element-4);
|
|
1867
2069
|
padding-top: var(--tds-spacing-element-4);
|
|
1868
2070
|
padding-bottom: var(--tds-spacing-element-4);
|
|
@@ -1871,30 +2073,13 @@
|
|
|
1871
2073
|
position: relative;
|
|
1872
2074
|
cursor: pointer;
|
|
1873
2075
|
}
|
|
2076
|
+
.tl-checkbox__input:not(:disabled):hover + .tl-checkbox__label {
|
|
2077
|
+
color: var(--checkbox-text-hover);
|
|
2078
|
+
}
|
|
1874
2079
|
.tl-checkbox:has(:disabled) .tl-checkbox__label {
|
|
1875
|
-
color: var(--checkbox-label-disabled);
|
|
1876
2080
|
cursor: not-allowed;
|
|
1877
2081
|
}
|
|
1878
2082
|
|
|
1879
|
-
.tl-checkbox__input--indeterminate::after {
|
|
1880
|
-
background-image: var(--checkbox-background-img-indeterminate);
|
|
1881
|
-
background-color: var(--checkbox-border);
|
|
1882
|
-
background-repeat: no-repeat;
|
|
1883
|
-
background-position: center;
|
|
1884
|
-
border-color: var(--checkbox-border);
|
|
1885
|
-
}
|
|
1886
|
-
.tl-checkbox__input--indeterminate:not(:disabled):hover::after {
|
|
1887
|
-
border-color: var(--checkbox-border-hover);
|
|
1888
|
-
}
|
|
1889
|
-
.tl-checkbox__input--indeterminate:disabled::after {
|
|
1890
|
-
background-image: var(--checkbox-background-img-indeterminate-disabled);
|
|
1891
|
-
background-color: var(--checkbox-fill-disabled);
|
|
1892
|
-
border-color: var(--checkbox-border-disabled);
|
|
1893
|
-
}
|
|
1894
|
-
.tl-checkbox__input--indeterminate:focus-visible::before {
|
|
1895
|
-
background-color: var(--checkbox-border-focus);
|
|
1896
|
-
}
|
|
1897
|
-
|
|
1898
2083
|
.tl-chip {
|
|
1899
2084
|
--chip-text: var(--component-chip-text-standard-default);
|
|
1900
2085
|
--chip-text-active: var(--component-chip-text-selected-default);
|
|
@@ -6972,28 +7157,122 @@ body {
|
|
|
6972
7157
|
margin: 6px;
|
|
6973
7158
|
}
|
|
6974
7159
|
|
|
6975
|
-
|
|
6976
|
-
|
|
6977
|
-
|
|
6978
|
-
|
|
6979
|
-
|
|
6980
|
-
|
|
6981
|
-
|
|
6982
|
-
|
|
6983
|
-
|
|
6984
|
-
--radio-button-
|
|
6985
|
-
--radio-button-
|
|
6986
|
-
|
|
6987
|
-
--radio-button-
|
|
6988
|
-
--radio-button-
|
|
7160
|
+
/**
|
|
7161
|
+
* Do not edit directly, this file was auto-generated.
|
|
7162
|
+
*/
|
|
7163
|
+
:root,
|
|
7164
|
+
.tds-mode-light,
|
|
7165
|
+
.scania .tds-mode-light,
|
|
7166
|
+
.scania.tds-mode-light,
|
|
7167
|
+
.scania .tl-mode-light,
|
|
7168
|
+
.scania.tl-mode-light {
|
|
7169
|
+
--component-radio-button-background-standard-default: var(--color-background-none);
|
|
7170
|
+
--component-radio-button-background-standard-hover: var(--color-background-none);
|
|
7171
|
+
--component-radio-button-background-selected-default: var(--scania-color-grey-950);
|
|
7172
|
+
--component-radio-button-background-selected-hover: var(--scania-color-grey-950);
|
|
7173
|
+
--component-radio-button-border-standard-default: var(--color-border-strong);
|
|
7174
|
+
--component-radio-button-border-standard-hover: var(--color-border-strong);
|
|
7175
|
+
--component-radio-button-border-selected-default: var(--color-border-none);
|
|
7176
|
+
--component-radio-button-border-selected-hover: var(--color-border-none);
|
|
7177
|
+
--component-radio-button-border-indicator-default: var(--color-border-none);
|
|
7178
|
+
--component-radio-button-border-indicator-hover: var(--color-border-subtle);
|
|
7179
|
+
--component-radio-button-border-radius-default: var(--scania-unit-9999);
|
|
7180
|
+
--component-radio-button-focus-ring-radius-default: var(--component--focus-ring-radius-full);
|
|
7181
|
+
--component-radio-button-icon-selected-default: var(--color-icon-inverse-strong);
|
|
7182
|
+
--component-radio-button-icon-selected-hover: var(--color-icon-inverse-strong);
|
|
7183
|
+
--component-radio-button-opacity-disabled: var(--scania-opacity-25);
|
|
7184
|
+
--component-radio-button-text-default: var(--color-text-strong);
|
|
7185
|
+
--component-radio-button-text-hover: var(--color-text-strong);
|
|
7186
|
+
}
|
|
7187
|
+
|
|
7188
|
+
.traton .tds-mode-light,
|
|
7189
|
+
.traton.tds-mode-light,
|
|
7190
|
+
.traton .tl-mode-light,
|
|
7191
|
+
.traton.tl-mode-light {
|
|
7192
|
+
--component-radio-button-background-standard-default: var(--color-background-none);
|
|
7193
|
+
--component-radio-button-background-standard-hover: var(--color-background-none);
|
|
7194
|
+
--component-radio-button-background-selected-default: var(--traton-color-blue-950);
|
|
7195
|
+
--component-radio-button-background-selected-hover: var(--traton-color-blue-950);
|
|
7196
|
+
--component-radio-button-border-standard-default: var(--color-border-strong);
|
|
7197
|
+
--component-radio-button-border-standard-hover: var(--color-border-strong);
|
|
7198
|
+
--component-radio-button-border-selected-default: var(--color-border-none);
|
|
7199
|
+
--component-radio-button-border-selected-hover: var(--color-border-none);
|
|
7200
|
+
--component-radio-button-border-indicator-default: var(--color-border-none);
|
|
7201
|
+
--component-radio-button-border-indicator-hover: var(--color-border-subtle);
|
|
7202
|
+
--component-radio-button-border-radius-default: var(--traton-unit-9999);
|
|
7203
|
+
--component-radio-button-focus-ring-radius-default: var(--component--focus-ring-radius-full);
|
|
7204
|
+
--component-radio-button-icon-selected-default: var(--color-icon-inverse-strong);
|
|
7205
|
+
--component-radio-button-icon-selected-hover: var(--color-icon-inverse-strong);
|
|
7206
|
+
--component-radio-button-opacity-disabled: var(--traton-opacity-25);
|
|
7207
|
+
--component-radio-button-text-default: var(--color-text-strong);
|
|
7208
|
+
--component-radio-button-text-hover: var(--color-text-strong);
|
|
6989
7209
|
}
|
|
6990
7210
|
|
|
6991
|
-
.
|
|
6992
|
-
|
|
7211
|
+
.tds-mode-dark,
|
|
7212
|
+
.scania .tds-mode-dark,
|
|
7213
|
+
.scania.tds-mode-dark,
|
|
7214
|
+
.scania .tl-mode-dark,
|
|
7215
|
+
.scania.tl-mode-dark {
|
|
7216
|
+
--component-radio-button-background-standard-default: var(--color-background-none);
|
|
7217
|
+
--component-radio-button-background-standard-hover: var(--color-background-none);
|
|
7218
|
+
--component-radio-button-background-selected-default: var(--scania-color-grey-50);
|
|
7219
|
+
--component-radio-button-background-selected-hover: var(--scania-color-grey-50);
|
|
7220
|
+
--component-radio-button-border-standard-default: var(--color-border-strong);
|
|
7221
|
+
--component-radio-button-border-standard-hover: var(--color-border-strong);
|
|
7222
|
+
--component-radio-button-border-selected-default: var(--color-border-none);
|
|
7223
|
+
--component-radio-button-border-selected-hover: var(--color-border-none);
|
|
7224
|
+
--component-radio-button-border-indicator-default: var(--color-border-none);
|
|
7225
|
+
--component-radio-button-border-indicator-hover: var(--color-border-subtle);
|
|
7226
|
+
--component-radio-button-border-radius-default: var(--scania-unit-9999);
|
|
7227
|
+
--component-radio-button-focus-ring-radius-default: var(--component--focus-ring-radius-full);
|
|
7228
|
+
--component-radio-button-icon-selected-default: var(--color-icon-inverse-strong);
|
|
7229
|
+
--component-radio-button-icon-selected-hover: var(--color-icon-inverse-strong);
|
|
7230
|
+
--component-radio-button-opacity-disabled: var(--scania-opacity-25);
|
|
7231
|
+
--component-radio-button-text-default: var(--color-text-strong);
|
|
7232
|
+
--component-radio-button-text-hover: var(--color-text-strong);
|
|
6993
7233
|
}
|
|
6994
7234
|
|
|
6995
|
-
.traton .
|
|
6996
|
-
|
|
7235
|
+
.traton .tds-mode-dark,
|
|
7236
|
+
.traton.tds-mode-dark,
|
|
7237
|
+
.traton .tl-mode-dark,
|
|
7238
|
+
.traton.tl-mode-dark {
|
|
7239
|
+
--component-radio-button-background-standard-default: var(--color-background-none);
|
|
7240
|
+
--component-radio-button-background-standard-hover: var(--color-background-none);
|
|
7241
|
+
--component-radio-button-background-selected-default: var(--traton-color-base-white);
|
|
7242
|
+
--component-radio-button-background-selected-hover: var(--traton-color-base-white);
|
|
7243
|
+
--component-radio-button-border-standard-default: var(--color-border-strong);
|
|
7244
|
+
--component-radio-button-border-standard-hover: var(--color-border-strong);
|
|
7245
|
+
--component-radio-button-border-selected-default: var(--color-border-none);
|
|
7246
|
+
--component-radio-button-border-selected-hover: var(--color-border-none);
|
|
7247
|
+
--component-radio-button-border-indicator-default: var(--color-border-none);
|
|
7248
|
+
--component-radio-button-border-indicator-hover: var(--color-border-subtle);
|
|
7249
|
+
--component-radio-button-border-radius-default: var(--traton-unit-9999);
|
|
7250
|
+
--component-radio-button-focus-ring-radius-default: var(--component--focus-ring-radius-full);
|
|
7251
|
+
--component-radio-button-icon-selected-default: var(--color-icon-inverse-strong);
|
|
7252
|
+
--component-radio-button-icon-selected-hover: var(--color-icon-inverse-strong);
|
|
7253
|
+
--component-radio-button-opacity-disabled: var(--traton-opacity-25);
|
|
7254
|
+
--component-radio-button-text-default: var(--color-text-strong);
|
|
7255
|
+
--component-radio-button-text-hover: var(--color-text-strong);
|
|
7256
|
+
}
|
|
7257
|
+
|
|
7258
|
+
.tl-radio-button {
|
|
7259
|
+
--radio-button-text: var(--component-radio-button-text-default);
|
|
7260
|
+
--radio-button-text-hover: var(--component-radio-button-text-hover);
|
|
7261
|
+
--radio-button-background: var(--component-radio-button-background-standard-default);
|
|
7262
|
+
--radio-button-background-hover: var(--component-radio-button-background-standard-hover);
|
|
7263
|
+
--radio-button-background-selected: var(--component-radio-button-background-selected-default);
|
|
7264
|
+
--radio-button-background-selected-hover: var(--component-radio-button-background-selected-hover);
|
|
7265
|
+
--radio-button-border: var(--component-radio-button-border-standard-default);
|
|
7266
|
+
--radio-button-border-hover: var(--component-radio-button-border-standard-hover);
|
|
7267
|
+
--radio-button-border-selected: var(--component-radio-button-border-selected-default);
|
|
7268
|
+
--radio-button-border-selected-hover: var(--component-radio-button-border-selected-hover);
|
|
7269
|
+
--radio-button-indicator: var(--component-radio-button-border-indicator-default);
|
|
7270
|
+
--radio-button-indicator-hover: var(--component-radio-button-border-indicator-hover);
|
|
7271
|
+
--radio-button-icon-selected: var(--component-radio-button-icon-selected-default);
|
|
7272
|
+
--radio-button-icon-selected-hover: var(--component-radio-button-icon-selected-hover);
|
|
7273
|
+
--radio-button-border-radius: calc(var(--component-radio-button-border-radius-default) * 1px);
|
|
7274
|
+
--radio-button-focus-ring-radius: calc(var(--component-radio-button-focus-ring-radius-default) * 1px);
|
|
7275
|
+
--radio-button-opacity-disabled: calc(var(--component-radio-button-opacity-disabled) / 100);
|
|
6997
7276
|
}
|
|
6998
7277
|
|
|
6999
7278
|
/* Block */
|
|
@@ -7010,10 +7289,9 @@ body {
|
|
|
7010
7289
|
font-weight: var(--detail-02-font-weight);
|
|
7011
7290
|
letter-spacing: var(--detail-02-letter-spacing);
|
|
7012
7291
|
text-transform: var(--detail-02-text-transform);
|
|
7013
|
-
color: var(--radio-button-
|
|
7292
|
+
color: var(--radio-button-text);
|
|
7014
7293
|
display: flex;
|
|
7015
7294
|
align-items: center;
|
|
7016
|
-
gap: var(--radio-button-spacing-8);
|
|
7017
7295
|
}
|
|
7018
7296
|
.tl-radio-button:has(:disabled) {
|
|
7019
7297
|
cursor: not-allowed;
|
|
@@ -7031,113 +7309,83 @@ body {
|
|
|
7031
7309
|
position: relative;
|
|
7032
7310
|
cursor: pointer;
|
|
7033
7311
|
flex-shrink: 0;
|
|
7034
|
-
border-radius: 50%;
|
|
7035
7312
|
}
|
|
7036
7313
|
.tl-radio-button__input::before, .tl-radio-button__input::after {
|
|
7037
7314
|
content: "";
|
|
7038
7315
|
position: absolute;
|
|
7039
|
-
border-radius: 50%;
|
|
7040
7316
|
box-sizing: border-box;
|
|
7317
|
+
border-radius: var(--radio-button-border-radius);
|
|
7318
|
+
left: 50%;
|
|
7319
|
+
top: 50%;
|
|
7320
|
+
transform: translate(-50%, -50%);
|
|
7041
7321
|
}
|
|
7042
7322
|
.tl-radio-button__input {
|
|
7043
|
-
/*
|
|
7323
|
+
/* The outer circle: border + fill, plus the (transparent by default) hover indicator halo. */
|
|
7044
7324
|
}
|
|
7045
7325
|
.tl-radio-button__input::before {
|
|
7046
|
-
inline-size: 22px;
|
|
7047
|
-
block-size: 22px;
|
|
7048
|
-
left: 1px;
|
|
7049
|
-
top: 1px;
|
|
7050
|
-
}
|
|
7051
|
-
.tl-radio-button__input {
|
|
7052
|
-
/* base inner circle + ring */
|
|
7053
|
-
}
|
|
7054
|
-
.tl-radio-button__input::after {
|
|
7055
|
-
background-color: var(--radio-button-background-inverse);
|
|
7056
|
-
border: 1px solid var(--radio-button-border);
|
|
7057
7326
|
inline-size: 16px;
|
|
7058
7327
|
block-size: 16px;
|
|
7059
|
-
|
|
7060
|
-
|
|
7328
|
+
border: 1px solid var(--radio-button-border);
|
|
7329
|
+
background-color: var(--radio-button-background);
|
|
7330
|
+
box-shadow: 0 0 0 2px var(--radio-button-indicator);
|
|
7331
|
+
transition: box-shadow 0.2s ease-in-out;
|
|
7061
7332
|
}
|
|
7062
7333
|
.tl-radio-button__input {
|
|
7063
|
-
/*
|
|
7064
|
-
}
|
|
7065
|
-
.tl-radio-button__input:focus::before {
|
|
7066
|
-
background-color: var(--radio-button-focus);
|
|
7067
|
-
animation: rb-focus 0.4s cubic-bezier(0.65, 0.05, 0.38, 0.95) forwards;
|
|
7334
|
+
/* The inner dot, colour driven by the icon token. Hidden until selected. */
|
|
7068
7335
|
}
|
|
7069
|
-
.tl-radio-button__input
|
|
7070
|
-
|
|
7071
|
-
|
|
7072
|
-
|
|
7073
|
-
|
|
7336
|
+
.tl-radio-button__input::after {
|
|
7337
|
+
inline-size: 6px;
|
|
7338
|
+
block-size: 6px;
|
|
7339
|
+
background-color: var(--radio-button-icon-selected);
|
|
7340
|
+
opacity: 0;
|
|
7341
|
+
/* Keep the dot above the circle fill, which gets z-index: 1 from the focus ring. */
|
|
7342
|
+
z-index: 1;
|
|
7074
7343
|
}
|
|
7075
|
-
.tl-radio-button__input:
|
|
7076
|
-
border:
|
|
7344
|
+
.tl-radio-button__input:not(:disabled):hover::before {
|
|
7345
|
+
border-color: var(--radio-button-border-hover);
|
|
7346
|
+
background-color: var(--radio-button-background-hover);
|
|
7347
|
+
box-shadow: 0 0 0 2px var(--radio-button-indicator-hover);
|
|
7077
7348
|
}
|
|
7078
|
-
.tl-radio-button__input {
|
|
7079
|
-
|
|
7349
|
+
.tl-radio-button__input:focus-visible::before {
|
|
7350
|
+
outline: 2px solid var(--component--focus-ring-color-strong);
|
|
7351
|
+
box-shadow: 0 0 0 1px var(--component--focus-ring-color-discrete);
|
|
7352
|
+
outline-offset: 1px;
|
|
7353
|
+
z-index: 1;
|
|
7354
|
+
border-radius: var(--radio-button-focus-ring-radius);
|
|
7080
7355
|
}
|
|
7081
|
-
.tl-radio-button__input:checked
|
|
7082
|
-
|
|
7356
|
+
.tl-radio-button__input:checked::before {
|
|
7357
|
+
border-color: var(--radio-button-border-selected);
|
|
7358
|
+
background-color: var(--radio-button-background-selected);
|
|
7083
7359
|
}
|
|
7084
|
-
.tl-radio-button__input {
|
|
7085
|
-
|
|
7360
|
+
.tl-radio-button__input:checked::after {
|
|
7361
|
+
background-color: var(--radio-button-icon-selected);
|
|
7362
|
+
opacity: 1;
|
|
7086
7363
|
}
|
|
7087
|
-
.tl-radio-
|
|
7088
|
-
|
|
7364
|
+
.tl-radio-button__input:checked:not(:disabled):hover::before {
|
|
7365
|
+
border-color: var(--radio-button-border-selected-hover);
|
|
7366
|
+
background-color: var(--radio-button-background-selected-hover);
|
|
7089
7367
|
}
|
|
7090
|
-
.tl-radio-button__input {
|
|
7091
|
-
|
|
7368
|
+
.tl-radio-button__input:checked:not(:disabled):hover::after {
|
|
7369
|
+
background-color: var(--radio-button-icon-selected-hover);
|
|
7092
7370
|
}
|
|
7093
7371
|
.tl-radio-button__input:disabled {
|
|
7094
7372
|
cursor: not-allowed;
|
|
7095
|
-
|
|
7096
|
-
.tl-radio-button__input:disabled::before {
|
|
7097
|
-
outline: 1px solid var(--radio-button-border-disabled);
|
|
7098
|
-
outline-offset: -4px;
|
|
7099
|
-
}
|
|
7100
|
-
.tl-radio-button__input:disabled::after {
|
|
7101
|
-
background-color: var(--radio-button-background-disabled);
|
|
7102
|
-
border-color: var(--radio-button-background-disabled);
|
|
7103
|
-
outline: none;
|
|
7104
|
-
}
|
|
7105
|
-
.tl-radio-button__input:disabled:checked::before {
|
|
7106
|
-
border: 1px solid var(--radio-button-border-disabled);
|
|
7107
|
-
display: block;
|
|
7108
|
-
inline-size: 16px;
|
|
7109
|
-
block-size: 16px;
|
|
7110
|
-
left: 3px;
|
|
7111
|
-
top: 3px;
|
|
7112
|
-
box-sizing: content-box;
|
|
7113
|
-
}
|
|
7114
|
-
.tl-radio-button__input:disabled:checked::after {
|
|
7115
|
-
border: 4px solid var(--radio-button-background-disabled);
|
|
7116
|
-
background-color: var(--radio-button-checked-disabled);
|
|
7117
|
-
left: 4px;
|
|
7118
|
-
top: 4px;
|
|
7373
|
+
opacity: var(--radio-button-opacity-disabled);
|
|
7119
7374
|
}
|
|
7120
7375
|
|
|
7121
7376
|
/* LABEL — text only */
|
|
7122
7377
|
.tl-radio-button__label {
|
|
7123
7378
|
cursor: pointer;
|
|
7124
7379
|
padding-left: 4px;
|
|
7380
|
+
color: var(--radio-button-text);
|
|
7381
|
+
}
|
|
7382
|
+
.tl-radio-button__input:not(:disabled):hover + .tl-radio-button__label {
|
|
7383
|
+
color: var(--radio-button-text-hover);
|
|
7125
7384
|
}
|
|
7126
7385
|
.tl-radio-button:has(:disabled) .tl-radio-button__label {
|
|
7127
7386
|
cursor: not-allowed;
|
|
7128
|
-
color: var(--radio-button-label-disabled);
|
|
7129
7387
|
}
|
|
7130
7388
|
|
|
7131
|
-
/* Focus animation */
|
|
7132
|
-
@keyframes rb-focus {
|
|
7133
|
-
0% {
|
|
7134
|
-
transform: scale(0);
|
|
7135
|
-
opacity: 0;
|
|
7136
|
-
}
|
|
7137
|
-
100% {
|
|
7138
|
-
transform: scale(1);
|
|
7139
|
-
}
|
|
7140
|
-
}
|
|
7141
7389
|
/**
|
|
7142
7390
|
* Do not edit directly, this file was auto-generated.
|
|
7143
7391
|
*/
|
|
@@ -8581,6 +8829,10 @@ body {
|
|
|
8581
8829
|
.scania.tl-mode-light {
|
|
8582
8830
|
--component-table-cell: var(--color-background-layer-01);
|
|
8583
8831
|
--component-table-cell-hover: #edeff3;
|
|
8832
|
+
--component-table-icon-accent-default: var(--traton-color-blue-700);
|
|
8833
|
+
--component-table-icon-accent-hover: var(--traton-color-blue-700);
|
|
8834
|
+
--component-table-icon-accent-active: var(--traton-color-blue-950);
|
|
8835
|
+
--component-table-icon-accent-visited: var(--traton-color-blue-950);
|
|
8584
8836
|
--component-table-pagination-base: #e0e5eb;
|
|
8585
8837
|
--component-table-pagination-dropdown: var(--color-background-base);
|
|
8586
8838
|
--component-table-secondary-cell: var(--color-background-layer-02);
|
|
@@ -8592,6 +8844,10 @@ body {
|
|
|
8592
8844
|
.traton.tl-mode-light {
|
|
8593
8845
|
--component-table-cell: var(--color-background-layer-01);
|
|
8594
8846
|
--component-table-cell-hover: #d6d4c9;
|
|
8847
|
+
--component-table-icon-accent-default: var(--traton-color-blue-700);
|
|
8848
|
+
--component-table-icon-accent-hover: var(--traton-color-blue-700);
|
|
8849
|
+
--component-table-icon-accent-active: var(--traton-color-blue-950);
|
|
8850
|
+
--component-table-icon-accent-visited: var(--traton-color-blue-950);
|
|
8595
8851
|
--component-table-pagination-base: #d6d4c9;
|
|
8596
8852
|
--component-table-pagination-dropdown: var(--color-background-base);
|
|
8597
8853
|
--component-table-secondary-cell: var(--color-background-layer-02);
|
|
@@ -8604,6 +8860,10 @@ body {
|
|
|
8604
8860
|
.scania.tl-mode-dark {
|
|
8605
8861
|
--component-table-cell: var(--color-background-layer-01);
|
|
8606
8862
|
--component-table-cell-hover: #1c222b;
|
|
8863
|
+
--component-table-icon-accent-default: var(--traton-color-blue-400);
|
|
8864
|
+
--component-table-icon-accent-hover: var(--traton-color-blue-400);
|
|
8865
|
+
--component-table-icon-accent-active: var(--traton-color-blue-150);
|
|
8866
|
+
--component-table-icon-accent-visited: var(--traton-color-blue-150);
|
|
8607
8867
|
--component-table-pagination-base: #242c37;
|
|
8608
8868
|
--component-table-pagination-dropdown: var(--color-background-layer-01);
|
|
8609
8869
|
--component-table-secondary-cell: var(--color-background-layer-02);
|
|
@@ -8615,6 +8875,10 @@ body {
|
|
|
8615
8875
|
.traton.tl-mode-dark {
|
|
8616
8876
|
--component-table-cell: var(--color-background-layer-01);
|
|
8617
8877
|
--component-table-cell-hover: #003137;
|
|
8878
|
+
--component-table-icon-accent-default: var(--traton-color-blue-400);
|
|
8879
|
+
--component-table-icon-accent-hover: var(--traton-color-blue-400);
|
|
8880
|
+
--component-table-icon-accent-active: var(--traton-color-blue-150);
|
|
8881
|
+
--component-table-icon-accent-visited: var(--traton-color-blue-150);
|
|
8618
8882
|
--component-table-pagination-base: #004852;
|
|
8619
8883
|
--component-table-pagination-dropdown: var(--color-background-layer-01);
|
|
8620
8884
|
--component-table-secondary-cell: var(--color-background-layer-02);
|
|
@@ -9910,67 +10174,232 @@ body {
|
|
|
9910
10174
|
fill: var(--navigation-tabs-scroll-button-color);
|
|
9911
10175
|
}
|
|
9912
10176
|
|
|
10177
|
+
/**
|
|
10178
|
+
* Do not edit directly, this file was auto-generated.
|
|
10179
|
+
*/
|
|
10180
|
+
:root,
|
|
10181
|
+
.tds-mode-light,
|
|
10182
|
+
.scania .tds-mode-light,
|
|
10183
|
+
.scania.tds-mode-light,
|
|
10184
|
+
.scania .tl-mode-light,
|
|
10185
|
+
.scania.tl-mode-light {
|
|
10186
|
+
--component--input-background-primary: var(--color-background-layer-01);
|
|
10187
|
+
--component--input-background-secondary: var(--color-background-layer-02);
|
|
10188
|
+
--component--input-border-default: var(--color-border-soft);
|
|
10189
|
+
--component--input-border-hover: var(--color-border-strong);
|
|
10190
|
+
--component--input-border-success-default: var(--color-border-strong);
|
|
10191
|
+
--component--input-border-error-default: var(--color-system-danger-default);
|
|
10192
|
+
--component--input-border-radius-default: var(--scania-unit-4);
|
|
10193
|
+
--component--input-border-radius-none: var(--scania-unit-0);
|
|
10194
|
+
--component--input-border-radius-top-left: var(--component--input-border-radius-default);
|
|
10195
|
+
--component--input-border-radius-top-right: var(--component--input-border-radius-default);
|
|
10196
|
+
--component--input-border-radius-bottom-left: var(--component--input-border-radius-none);
|
|
10197
|
+
--component--input-border-radius-bottom-right: var(--component--input-border-radius-none);
|
|
10198
|
+
--component--input-border-width-default: var(--scania-unit-1);
|
|
10199
|
+
--component--input-border-width-none: var(--scania-unit-0);
|
|
10200
|
+
--component--input-border-width-top: var(--component--input-border-width-none);
|
|
10201
|
+
--component--input-border-width-right: var(--component--input-border-width-none);
|
|
10202
|
+
--component--input-border-width-bottom: var(--component--input-border-width-default);
|
|
10203
|
+
--component--input-border-width-left: var(--component--input-border-width-none);
|
|
10204
|
+
--component--input-icon-prefix-default: var(--color-text-defined);
|
|
10205
|
+
--component--input-icon-suffix-default: var(--color-text-defined);
|
|
10206
|
+
--component--input-icon-error-default: var(--color-system-danger-default);
|
|
10207
|
+
--component--input-opacity-disabled: var(--scania-opacity-25);
|
|
10208
|
+
--component--input-text-counter-default: var(--color-text-defined);
|
|
10209
|
+
--component--input-text-label-default: var(--color-text-strong);
|
|
10210
|
+
--component--input-text-helper-default: var(--color-text-defined);
|
|
10211
|
+
--component--input-text-placeholder-default: var(--color-text-soft);
|
|
10212
|
+
--component--input-text-value-default: var(--color-text-strong);
|
|
10213
|
+
--component--input-text-error-default: var(--color-system-danger-default);
|
|
10214
|
+
}
|
|
10215
|
+
|
|
10216
|
+
.traton .tds-mode-light,
|
|
10217
|
+
.traton.tds-mode-light,
|
|
10218
|
+
.traton .tl-mode-light,
|
|
10219
|
+
.traton.tl-mode-light {
|
|
10220
|
+
--component--input-background-primary: var(--color-background-layer-01);
|
|
10221
|
+
--component--input-background-secondary: var(--color-background-layer-02);
|
|
10222
|
+
--component--input-border-default: var(--color-border-soft);
|
|
10223
|
+
--component--input-border-hover: var(--color-border-strong);
|
|
10224
|
+
--component--input-border-success-default: var(--color-border-strong);
|
|
10225
|
+
--component--input-border-error-default: var(--color-system-danger-default);
|
|
10226
|
+
--component--input-border-radius-default: var(--traton-unit-4);
|
|
10227
|
+
--component--input-border-radius-none: var(--traton-unit-0);
|
|
10228
|
+
--component--input-border-radius-top-left: var(--component--input-border-radius-default);
|
|
10229
|
+
--component--input-border-radius-top-right: var(--component--input-border-radius-default);
|
|
10230
|
+
--component--input-border-radius-bottom-left: var(--component--input-border-radius-default);
|
|
10231
|
+
--component--input-border-radius-bottom-right: var(--component--input-border-radius-default);
|
|
10232
|
+
--component--input-border-width-default: var(--traton-unit-1);
|
|
10233
|
+
--component--input-border-width-none: var(--traton-unit-0);
|
|
10234
|
+
--component--input-border-width-top: var(--component--input-border-width-default);
|
|
10235
|
+
--component--input-border-width-right: var(--component--input-border-width-default);
|
|
10236
|
+
--component--input-border-width-bottom: var(--component--input-border-width-default);
|
|
10237
|
+
--component--input-border-width-left: var(--component--input-border-width-default);
|
|
10238
|
+
--component--input-icon-prefix-default: var(--color-text-defined);
|
|
10239
|
+
--component--input-icon-suffix-default: var(--color-text-defined);
|
|
10240
|
+
--component--input-icon-error-default: var(--color-system-danger-default);
|
|
10241
|
+
--component--input-opacity-disabled: var(--traton-opacity-25);
|
|
10242
|
+
--component--input-text-counter-default: var(--color-text-defined);
|
|
10243
|
+
--component--input-text-label-default: var(--color-text-strong);
|
|
10244
|
+
--component--input-text-helper-default: var(--color-text-defined);
|
|
10245
|
+
--component--input-text-placeholder-default: var(--color-text-subtle);
|
|
10246
|
+
--component--input-text-value-default: var(--color-text-strong);
|
|
10247
|
+
--component--input-text-error-default: var(--color-system-danger-default);
|
|
10248
|
+
}
|
|
10249
|
+
|
|
10250
|
+
.tds-mode-dark,
|
|
10251
|
+
.scania .tds-mode-dark,
|
|
10252
|
+
.scania.tds-mode-dark,
|
|
10253
|
+
.scania .tl-mode-dark,
|
|
10254
|
+
.scania.tl-mode-dark {
|
|
10255
|
+
--component--input-background-primary: var(--color-background-layer-01);
|
|
10256
|
+
--component--input-background-secondary: var(--color-background-layer-02);
|
|
10257
|
+
--component--input-border-default: var(--color-border-soft);
|
|
10258
|
+
--component--input-border-hover: var(--color-border-strong);
|
|
10259
|
+
--component--input-border-success-default: var(--color-border-strong);
|
|
10260
|
+
--component--input-border-error-default: var(--color-system-danger-default);
|
|
10261
|
+
--component--input-border-radius-default: var(--scania-unit-4);
|
|
10262
|
+
--component--input-border-radius-none: var(--scania-unit-0);
|
|
10263
|
+
--component--input-border-radius-top-left: var(--component--input-border-radius-default);
|
|
10264
|
+
--component--input-border-radius-top-right: var(--component--input-border-radius-default);
|
|
10265
|
+
--component--input-border-radius-bottom-left: var(--component--input-border-radius-none);
|
|
10266
|
+
--component--input-border-radius-bottom-right: var(--component--input-border-radius-none);
|
|
10267
|
+
--component--input-border-width-default: var(--scania-unit-1);
|
|
10268
|
+
--component--input-border-width-none: var(--scania-unit-0);
|
|
10269
|
+
--component--input-border-width-top: var(--component--input-border-width-none);
|
|
10270
|
+
--component--input-border-width-right: var(--component--input-border-width-none);
|
|
10271
|
+
--component--input-border-width-bottom: var(--component--input-border-width-default);
|
|
10272
|
+
--component--input-border-width-left: var(--component--input-border-width-none);
|
|
10273
|
+
--component--input-icon-prefix-default: var(--color-text-defined);
|
|
10274
|
+
--component--input-icon-suffix-default: var(--color-text-defined);
|
|
10275
|
+
--component--input-icon-error-default: var(--color-system-danger-default);
|
|
10276
|
+
--component--input-opacity-disabled: var(--scania-opacity-25);
|
|
10277
|
+
--component--input-text-counter-default: var(--color-text-defined);
|
|
10278
|
+
--component--input-text-label-default: var(--color-text-strong);
|
|
10279
|
+
--component--input-text-helper-default: var(--color-text-defined);
|
|
10280
|
+
--component--input-text-placeholder-default: var(--color-text-soft);
|
|
10281
|
+
--component--input-text-value-default: var(--color-text-strong);
|
|
10282
|
+
--component--input-text-error-default: var(--color-system-danger-default);
|
|
10283
|
+
}
|
|
10284
|
+
|
|
10285
|
+
.traton .tds-mode-dark,
|
|
10286
|
+
.traton.tds-mode-dark,
|
|
10287
|
+
.traton .tl-mode-dark,
|
|
10288
|
+
.traton.tl-mode-dark {
|
|
10289
|
+
--component--input-background-primary: var(--color-background-layer-01);
|
|
10290
|
+
--component--input-background-secondary: var(--color-background-layer-02);
|
|
10291
|
+
--component--input-border-default: var(--color-border-soft);
|
|
10292
|
+
--component--input-border-hover: var(--color-border-strong);
|
|
10293
|
+
--component--input-border-success-default: var(--color-border-strong);
|
|
10294
|
+
--component--input-border-error-default: var(--color-system-danger-default);
|
|
10295
|
+
--component--input-border-radius-default: var(--traton-unit-4);
|
|
10296
|
+
--component--input-border-radius-none: var(--traton-unit-0);
|
|
10297
|
+
--component--input-border-radius-top-left: var(--component--input-border-radius-default);
|
|
10298
|
+
--component--input-border-radius-top-right: var(--component--input-border-radius-default);
|
|
10299
|
+
--component--input-border-radius-bottom-left: var(--component--input-border-radius-default);
|
|
10300
|
+
--component--input-border-radius-bottom-right: var(--component--input-border-radius-default);
|
|
10301
|
+
--component--input-border-width-default: var(--traton-unit-1);
|
|
10302
|
+
--component--input-border-width-none: var(--traton-unit-0);
|
|
10303
|
+
--component--input-border-width-top: var(--component--input-border-width-default);
|
|
10304
|
+
--component--input-border-width-right: var(--component--input-border-width-default);
|
|
10305
|
+
--component--input-border-width-bottom: var(--component--input-border-width-default);
|
|
10306
|
+
--component--input-border-width-left: var(--component--input-border-width-default);
|
|
10307
|
+
--component--input-icon-prefix-default: var(--color-text-defined);
|
|
10308
|
+
--component--input-icon-suffix-default: var(--color-text-defined);
|
|
10309
|
+
--component--input-icon-error-default: var(--color-system-danger-default);
|
|
10310
|
+
--component--input-opacity-disabled: var(--traton-opacity-25);
|
|
10311
|
+
--component--input-text-counter-default: var(--color-text-defined);
|
|
10312
|
+
--component--input-text-label-default: var(--color-text-strong);
|
|
10313
|
+
--component--input-text-helper-default: var(--color-text-defined);
|
|
10314
|
+
--component--input-text-placeholder-default: var(--color-text-subtle);
|
|
10315
|
+
--component--input-text-value-default: var(--color-text-strong);
|
|
10316
|
+
--component--input-text-error-default: var(--color-system-danger-default);
|
|
10317
|
+
}
|
|
10318
|
+
|
|
10319
|
+
/**
|
|
10320
|
+
* Do not edit directly, this file was auto-generated.
|
|
10321
|
+
*/
|
|
10322
|
+
:root,
|
|
10323
|
+
.tds-mode-light,
|
|
10324
|
+
.scania .tds-mode-light,
|
|
10325
|
+
.scania.tds-mode-light,
|
|
10326
|
+
.scania .tl-mode-light,
|
|
10327
|
+
.scania.tl-mode-light {
|
|
10328
|
+
--component-text-field-focus-ring-radius-primary: var(--component--focus-ring-radius-extra-large);
|
|
10329
|
+
--component-text-field-focus-ring-radius-secondary: var(--component--focus-ring-radius-none);
|
|
10330
|
+
}
|
|
10331
|
+
|
|
10332
|
+
.traton .tds-mode-light,
|
|
10333
|
+
.traton.tds-mode-light,
|
|
10334
|
+
.traton .tl-mode-light,
|
|
10335
|
+
.traton.tl-mode-light {
|
|
10336
|
+
--component-text-field-focus-ring-radius-primary: var(--component--focus-ring-radius-extra-large);
|
|
10337
|
+
--component-text-field-focus-ring-radius-secondary: var(
|
|
10338
|
+
--component--focus-ring-radius-extra-large
|
|
10339
|
+
);
|
|
10340
|
+
}
|
|
10341
|
+
|
|
10342
|
+
.tds-mode-dark,
|
|
10343
|
+
.scania .tds-mode-dark,
|
|
10344
|
+
.scania.tds-mode-dark,
|
|
10345
|
+
.scania .tl-mode-dark,
|
|
10346
|
+
.scania.tl-mode-dark {
|
|
10347
|
+
--component-text-field-focus-ring-radius-primary: var(--component--focus-ring-radius-extra-large);
|
|
10348
|
+
--component-text-field-focus-ring-radius-secondary: var(--component--focus-ring-radius-none);
|
|
10349
|
+
}
|
|
10350
|
+
|
|
10351
|
+
.traton .tds-mode-dark,
|
|
10352
|
+
.traton.tds-mode-dark,
|
|
10353
|
+
.traton .tl-mode-dark,
|
|
10354
|
+
.traton.tl-mode-dark {
|
|
10355
|
+
--component-text-field-focus-ring-radius-primary: var(--component--focus-ring-radius-extra-large);
|
|
10356
|
+
--component-text-field-focus-ring-radius-secondary: var(
|
|
10357
|
+
--component--focus-ring-radius-extra-large
|
|
10358
|
+
);
|
|
10359
|
+
}
|
|
10360
|
+
|
|
9913
10361
|
.tl-text-field {
|
|
9914
|
-
--text-field-background: var(--
|
|
9915
|
-
--text-field-text: var(--
|
|
9916
|
-
--text-field-placeholder: var(--
|
|
9917
|
-
--text-field-affix: var(--
|
|
9918
|
-
--text-field-
|
|
9919
|
-
--text-field-label
|
|
10362
|
+
--text-field-background: var(--component--input-background-primary);
|
|
10363
|
+
--text-field-text: var(--component--input-text-value-default);
|
|
10364
|
+
--text-field-placeholder: var(--component--input-text-placeholder-default);
|
|
10365
|
+
--text-field-affix: var(--component--input-icon-prefix-default);
|
|
10366
|
+
--text-field-affix-suffix: var(--component--input-icon-suffix-default);
|
|
10367
|
+
--text-field-label: var(--component--input-text-label-default);
|
|
10368
|
+
--text-field-label-inside: var(--component--input-text-label-default);
|
|
9920
10369
|
--text-field-label-inside-left: 16px;
|
|
9921
10370
|
--text-field-affix-width-icon: 35px;
|
|
9922
10371
|
--text-field-affix-width-text: 8px;
|
|
9923
|
-
--text-field-
|
|
9924
|
-
--text-field-
|
|
9925
|
-
--text-field-error: var(--
|
|
9926
|
-
--text-field-affix-error: var(--
|
|
9927
|
-
--text-field-background-disabled: var(--
|
|
9928
|
-
--text-field-text-disabled: var(--color-
|
|
9929
|
-
--text-field-placeholder-disabled: var(--color-
|
|
9930
|
-
--text-field-label-disabled: var(--color-
|
|
9931
|
-
--text-field-affix-disabled: var(--color-
|
|
9932
|
-
--text-field-textcounter: var(--
|
|
10372
|
+
--text-field-helper: var(--component--input-text-helper-default);
|
|
10373
|
+
--text-field-error: var(--component--input-text-error-default);
|
|
10374
|
+
--text-field-error-icon: var(--component--input-icon-error-default);
|
|
10375
|
+
--text-field-affix-error: var(--component--input-icon-error-default);
|
|
10376
|
+
--text-field-background-disabled: var(--component--input-background-primary);
|
|
10377
|
+
--text-field-text-disabled: var(--color-text-disabled);
|
|
10378
|
+
--text-field-placeholder-disabled: var(--color-text-disabled);
|
|
10379
|
+
--text-field-label-disabled: var(--color-text-disabled);
|
|
10380
|
+
--text-field-affix-disabled: var(--color-text-disabled);
|
|
10381
|
+
--text-field-textcounter: var(--component--input-text-counter-default);
|
|
10382
|
+
--text-field-opacity-disabled: var(--component--input-opacity-disabled);
|
|
10383
|
+
--text-field-border-radius: calc(var(--component--input-border-radius-top-left) * 1px)
|
|
10384
|
+
calc(var(--component--input-border-radius-top-right) * 1px)
|
|
10385
|
+
calc(var(--component--input-border-radius-bottom-right) * 1px)
|
|
10386
|
+
calc(var(--component--input-border-radius-bottom-left) * 1px);
|
|
10387
|
+
--text-field-border-color: var(--component--input-border-default);
|
|
10388
|
+
--text-field-border-color-hover: var(--component--input-border-hover);
|
|
10389
|
+
--text-field-border-color-success: var(--component--input-border-success-default);
|
|
10390
|
+
--text-field-border-color-error: var(--component--input-border-error-default);
|
|
10391
|
+
--text-field-border-color-readonly: var(--color-border-strong);
|
|
10392
|
+
--text-field-focus-ring-radius: var(--component-text-field-focus-ring-radius-primary);
|
|
9933
10393
|
}
|
|
9934
10394
|
.tl-text-field--primary {
|
|
9935
|
-
--text-field-background: var(--
|
|
9936
|
-
--text-field-background-disabled: var(--
|
|
10395
|
+
--text-field-background: var(--component--input-background-primary);
|
|
10396
|
+
--text-field-background-disabled: var(--component--input-background-primary);
|
|
10397
|
+
--text-field-focus-ring-radius: var(--component-text-field-focus-ring-radius-primary);
|
|
9937
10398
|
}
|
|
9938
10399
|
.tl-text-field--secondary {
|
|
9939
|
-
--text-field-background: var(--
|
|
9940
|
-
--text-field-background-disabled: var(--
|
|
9941
|
-
|
|
9942
|
-
|
|
9943
|
-
.tl-text-field,
|
|
9944
|
-
.scania .tl-text-field {
|
|
9945
|
-
--text-field-border-radius: 4px 4px 0 0;
|
|
9946
|
-
--text-field-box-shadow: 0 -1px 0 0 var(--color-foreground-border-soft);
|
|
9947
|
-
--text-field-box-shadow-hover: 0 -1px 0 0 var(--color-foreground-border-strong);
|
|
9948
|
-
--text-field-box-shadow-focus: 0 -2px 0 0 var(--color-foreground-border-accent-focus);
|
|
9949
|
-
--text-field-box-shadow-error: 0 -1px 0 0 var(--color-system-danger-default);
|
|
9950
|
-
--text-field-box-shadow-error-hover: 0 -1px 0 0 var(--color-system-danger-default);
|
|
9951
|
-
--text-field-box-shadow-error-focus: 0 -2px 0 0 var(--color-system-danger-default);
|
|
9952
|
-
--text-field-box-shadow-success: 0 -1px 0 0 var(--color-foreground-border-strong);
|
|
9953
|
-
--text-field-bar-focus: var(--color-foreground-border-accent-focus);
|
|
9954
|
-
--text-field-bar-error: var(--color-system-danger-default);
|
|
9955
|
-
--text-field-focus-outline: none;
|
|
9956
|
-
--text-field-focus-outline-error: none;
|
|
9957
|
-
--text-field-focus-outline-offset: 0;
|
|
9958
|
-
}
|
|
9959
|
-
|
|
9960
|
-
.traton .tl-text-field {
|
|
9961
|
-
--text-field-border-radius: 4px 4px 4px 4px;
|
|
9962
|
-
--text-field-box-shadow: 0 0 0 1px var(--color-foreground-border-soft);
|
|
9963
|
-
--text-field-box-shadow-hover: 0 0 0 1px var(--color-foreground-border-strong);
|
|
9964
|
-
--text-field-box-shadow-focus: 0 0 0 2px var(--color-foreground-border-accent-focus);
|
|
9965
|
-
--text-field-box-shadow-success: 0 0 0 1px var(--color-foreground-border-strong);
|
|
9966
|
-
--text-field-box-shadow-error: 0 0 0 1px var(--color-system-danger-default);
|
|
9967
|
-
--text-field-box-shadow-error-hover: 0 0 0 1px var(--color-system-danger-default);
|
|
9968
|
-
--text-field-box-shadow-error-focus: 0 0 0 2px var(--color-system-danger-default);
|
|
9969
|
-
--text-field-focus-outline: 2px solid var(--color-foreground-border-accent-focus);
|
|
9970
|
-
--text-field-focus-outline-error: 2px solid var(--color-system-danger-default);
|
|
9971
|
-
--text-field-focus-outline-offset: 0;
|
|
9972
|
-
--text-field-bar-focus: transparent;
|
|
9973
|
-
--text-field-bar-error: transparent;
|
|
10400
|
+
--text-field-background: var(--component--input-background-secondary);
|
|
10401
|
+
--text-field-background-disabled: var(--component--input-background-secondary);
|
|
10402
|
+
--text-field-focus-ring-radius: var(--component-text-field-focus-ring-radius-secondary);
|
|
9974
10403
|
}
|
|
9975
10404
|
|
|
9976
10405
|
.tl-text-field {
|
|
@@ -9987,12 +10416,12 @@ body {
|
|
|
9987
10416
|
.tl-text-field:has(.tl-text-field__input:disabled) {
|
|
9988
10417
|
cursor: not-allowed;
|
|
9989
10418
|
}
|
|
10419
|
+
.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 {
|
|
10420
|
+
opacity: var(--text-field-opacity-disabled);
|
|
10421
|
+
}
|
|
9990
10422
|
.tl-text-field .tl-icon {
|
|
9991
10423
|
background-color: var(--text-field-affix);
|
|
9992
10424
|
}
|
|
9993
|
-
:has(.tl-text-field__input:disabled) .tl-text-field .tl-icon {
|
|
9994
|
-
background-color: var(--text-field-affix-disabled);
|
|
9995
|
-
}
|
|
9996
10425
|
|
|
9997
10426
|
.tl-text-field__input-wrapper {
|
|
9998
10427
|
position: relative;
|
|
@@ -10021,8 +10450,11 @@ body {
|
|
|
10021
10450
|
width: 100%;
|
|
10022
10451
|
box-sizing: border-box;
|
|
10023
10452
|
margin: 0;
|
|
10024
|
-
border:
|
|
10453
|
+
border-style: solid;
|
|
10454
|
+
border-color: var(--text-field-border-color);
|
|
10455
|
+
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);
|
|
10025
10456
|
outline: none;
|
|
10457
|
+
transition: border-color 200ms ease;
|
|
10026
10458
|
}
|
|
10027
10459
|
.tl-text-field__input::placeholder {
|
|
10028
10460
|
color: var(--text-field-placeholder);
|
|
@@ -10047,42 +10479,46 @@ body {
|
|
|
10047
10479
|
color: var(--text-field-text);
|
|
10048
10480
|
flex: 1;
|
|
10049
10481
|
order: 2;
|
|
10050
|
-
box-shadow: inset var(--text-field-box-shadow);
|
|
10051
|
-
transition: box-shadow 0.2s;
|
|
10052
10482
|
}
|
|
10053
10483
|
.tl-text-field__input:focus {
|
|
10054
|
-
|
|
10484
|
+
outline: 2px solid var(--component--focus-ring-color-strong);
|
|
10485
|
+
box-shadow: 0 0 0 1px var(--component--focus-ring-color-discrete);
|
|
10486
|
+
outline-offset: 1px;
|
|
10487
|
+
z-index: 1;
|
|
10055
10488
|
}
|
|
10056
10489
|
.tl-text-field:hover .tl-text-field__input:not(:focus):not(:disabled) {
|
|
10057
|
-
|
|
10490
|
+
border-color: var(--text-field-border-color-hover);
|
|
10058
10491
|
}
|
|
10059
10492
|
.tl-text-field--error .tl-text-field__input {
|
|
10060
|
-
|
|
10493
|
+
border-color: var(--text-field-border-color-error);
|
|
10061
10494
|
}
|
|
10062
10495
|
.tl-text-field--error .tl-text-field__input:focus {
|
|
10063
|
-
|
|
10496
|
+
outline: 2px solid var(--component--focus-ring-color-strong);
|
|
10497
|
+
box-shadow: 0 0 0 1px var(--component--focus-ring-color-discrete);
|
|
10498
|
+
outline-offset: 1px;
|
|
10499
|
+
z-index: 1;
|
|
10064
10500
|
}
|
|
10065
10501
|
.tl-text-field--error:hover .tl-text-field__input:not(:focus):not(:disabled) {
|
|
10066
|
-
|
|
10502
|
+
border-color: var(--text-field-border-color-error);
|
|
10067
10503
|
}
|
|
10068
10504
|
.tl-text-field--success:not(:has(.tl-text-field__input[readonly])):not(:has(.tl-text-field__input:disabled)) .tl-text-field__input:not(:focus) {
|
|
10069
|
-
|
|
10505
|
+
border-color: var(--text-field-border-color-success);
|
|
10070
10506
|
}
|
|
10071
10507
|
.tl-text-field__input:disabled {
|
|
10072
|
-
box-shadow: none;
|
|
10073
|
-
background-color: var(--text-field-background-disabled);
|
|
10074
|
-
color: var(--text-field-text-disabled);
|
|
10075
10508
|
cursor: not-allowed;
|
|
10076
10509
|
pointer-events: none;
|
|
10077
10510
|
}
|
|
10078
10511
|
:has(.tl-text-field__input[readonly]):not(:has(.tl-text-field__input:disabled)) .tl-text-field__input {
|
|
10079
|
-
|
|
10512
|
+
border-color: var(--text-field-border-color-readonly);
|
|
10080
10513
|
}
|
|
10081
10514
|
:has(.tl-text-field__input[readonly]):not(:has(.tl-text-field__input:disabled)) .tl-text-field__input:focus {
|
|
10082
|
-
|
|
10515
|
+
outline: 2px solid var(--component--focus-ring-color-strong);
|
|
10516
|
+
box-shadow: 0 0 0 1px var(--component--focus-ring-color-discrete);
|
|
10517
|
+
outline-offset: 1px;
|
|
10518
|
+
z-index: 1;
|
|
10083
10519
|
}
|
|
10084
10520
|
:has(.tl-text-field__input[readonly]):not(:has(.tl-text-field__input:disabled)):hover .tl-text-field__input:not(:focus) {
|
|
10085
|
-
|
|
10521
|
+
border-color: var(--text-field-border-color-hover);
|
|
10086
10522
|
}
|
|
10087
10523
|
:has(.tl-text-field__input[readonly]):not(:has(.tl-text-field__input:disabled)) .tl-text-field__input {
|
|
10088
10524
|
user-select: auto;
|
|
@@ -10215,7 +10651,7 @@ body {
|
|
|
10215
10651
|
position: relative;
|
|
10216
10652
|
}
|
|
10217
10653
|
:has(.tl-text-field__input:disabled) .tl-text-field__helper {
|
|
10218
|
-
color: var(--color-
|
|
10654
|
+
color: var(--color-text-disabled);
|
|
10219
10655
|
}
|
|
10220
10656
|
.tl-text-field--error .tl-text-field__helper {
|
|
10221
10657
|
padding-left: 24px;
|
|
@@ -10227,7 +10663,7 @@ body {
|
|
|
10227
10663
|
top: 0;
|
|
10228
10664
|
width: 16px;
|
|
10229
10665
|
height: 16px;
|
|
10230
|
-
background-color: var(--text-field-error);
|
|
10666
|
+
background-color: var(--text-field-error-icon);
|
|
10231
10667
|
mask-image: var(--icon-error-svg);
|
|
10232
10668
|
mask-size: contain;
|
|
10233
10669
|
mask-repeat: no-repeat;
|
|
@@ -10243,7 +10679,7 @@ body {
|
|
|
10243
10679
|
color: var(--text-field-error);
|
|
10244
10680
|
}
|
|
10245
10681
|
.tl-text-field--error:has(.tl-text-field__input:disabled) .tl-text-field__helper::before {
|
|
10246
|
-
background-color: var(--color-
|
|
10682
|
+
background-color: var(--color-text-disabled);
|
|
10247
10683
|
}
|
|
10248
10684
|
|
|
10249
10685
|
.tl-text-field__charcounter {
|
|
@@ -10257,7 +10693,7 @@ body {
|
|
|
10257
10693
|
color: var(--text-field-textcounter);
|
|
10258
10694
|
}
|
|
10259
10695
|
:has(.tl-text-field__input:disabled) .tl-text-field__charcounter {
|
|
10260
|
-
color: var(--color-
|
|
10696
|
+
color: var(--color-text-disabled);
|
|
10261
10697
|
}
|
|
10262
10698
|
.tl-text-field--error:not(:has(.tl-text-field__input[readonly])):not(:has(.tl-text-field__input:disabled)) .tl-text-field__charcounter {
|
|
10263
10699
|
color: var(--text-field-error);
|
|
@@ -10267,7 +10703,7 @@ body {
|
|
|
10267
10703
|
}
|
|
10268
10704
|
|
|
10269
10705
|
.tl-text-field__charcounter-divider {
|
|
10270
|
-
color: var(--color-
|
|
10706
|
+
color: var(--color-text-disabled);
|
|
10271
10707
|
}
|
|
10272
10708
|
|
|
10273
10709
|
.tl-text-field__prefix {
|
|
@@ -10317,6 +10753,10 @@ body {
|
|
|
10317
10753
|
align-items: center;
|
|
10318
10754
|
z-index: 1;
|
|
10319
10755
|
position: relative;
|
|
10756
|
+
color: var(--text-field-affix-suffix);
|
|
10757
|
+
}
|
|
10758
|
+
.tl-text-field__suffix--icon.tl-icon {
|
|
10759
|
+
background-color: var(--text-field-affix-suffix);
|
|
10320
10760
|
}
|
|
10321
10761
|
.tl-text-field__suffix--text, .tl-text-field__suffix--icon {
|
|
10322
10762
|
position: absolute;
|
|
@@ -10361,54 +10801,99 @@ body {
|
|
|
10361
10801
|
left: calc(16px + var(--text-field-affix-width-text) + 8px);
|
|
10362
10802
|
}
|
|
10363
10803
|
|
|
10804
|
+
/**
|
|
10805
|
+
* Do not edit directly, this file was auto-generated.
|
|
10806
|
+
*/
|
|
10807
|
+
:root,
|
|
10808
|
+
.tds-mode-light,
|
|
10809
|
+
.scania .tds-mode-light,
|
|
10810
|
+
.scania.tds-mode-light,
|
|
10811
|
+
.scania .tl-mode-light,
|
|
10812
|
+
.scania.tl-mode-light {
|
|
10813
|
+
--component-textarea-focus-ring-radius-primary: var(--component--focus-ring-radius-extra-large);
|
|
10814
|
+
--component-textarea-focus-ring-radius-secondary: var(--component--focus-ring-radius-none);
|
|
10815
|
+
--component-textarea-icon-resize-default: var(--color-icon-subtle);
|
|
10816
|
+
--component-textarea-icon-readonly-default: var(--color-icon-strong);
|
|
10817
|
+
--component-textarea-size-resize-height: var(--scania-unit-12);
|
|
10818
|
+
--component-textarea-size-resize-width: var(--scania-unit-12);
|
|
10819
|
+
}
|
|
10820
|
+
|
|
10821
|
+
.traton .tds-mode-light,
|
|
10822
|
+
.traton.tds-mode-light,
|
|
10823
|
+
.traton .tl-mode-light,
|
|
10824
|
+
.traton.tl-mode-light {
|
|
10825
|
+
--component-textarea-focus-ring-radius-primary: var(--component--focus-ring-radius-extra-large);
|
|
10826
|
+
--component-textarea-focus-ring-radius-secondary: var(--component--focus-ring-radius-extra-large);
|
|
10827
|
+
--component-textarea-icon-resize-default: var(--color-icon-subtle);
|
|
10828
|
+
--component-textarea-icon-readonly-default: var(--color-icon-strong);
|
|
10829
|
+
--component-textarea-size-resize-height: var(--traton-unit-12);
|
|
10830
|
+
--component-textarea-size-resize-width: var(--traton-unit-12);
|
|
10831
|
+
}
|
|
10832
|
+
|
|
10833
|
+
.tds-mode-dark,
|
|
10834
|
+
.scania .tds-mode-dark,
|
|
10835
|
+
.scania.tds-mode-dark,
|
|
10836
|
+
.scania .tl-mode-dark,
|
|
10837
|
+
.scania.tl-mode-dark {
|
|
10838
|
+
--component-textarea-focus-ring-radius-primary: var(--component--focus-ring-radius-extra-large);
|
|
10839
|
+
--component-textarea-focus-ring-radius-secondary: var(--component--focus-ring-radius-none);
|
|
10840
|
+
--component-textarea-icon-resize-default: var(--color-icon-subtle);
|
|
10841
|
+
--component-textarea-icon-readonly-default: var(--color-icon-strong);
|
|
10842
|
+
--component-textarea-size-resize-height: var(--scania-unit-12);
|
|
10843
|
+
--component-textarea-size-resize-width: var(--scania-unit-12);
|
|
10844
|
+
}
|
|
10845
|
+
|
|
10846
|
+
.traton .tds-mode-dark,
|
|
10847
|
+
.traton.tds-mode-dark,
|
|
10848
|
+
.traton .tl-mode-dark,
|
|
10849
|
+
.traton.tl-mode-dark {
|
|
10850
|
+
--component-textarea-focus-ring-radius-primary: var(--component--focus-ring-radius-extra-large);
|
|
10851
|
+
--component-textarea-focus-ring-radius-secondary: var(--component--focus-ring-radius-extra-large);
|
|
10852
|
+
--component-textarea-icon-resize-default: var(--color-icon-subtle);
|
|
10853
|
+
--component-textarea-icon-readonly-default: var(--color-icon-strong);
|
|
10854
|
+
--component-textarea-size-resize-height: var(--traton-unit-12);
|
|
10855
|
+
--component-textarea-size-resize-width: var(--traton-unit-12);
|
|
10856
|
+
}
|
|
10857
|
+
|
|
10364
10858
|
.tl-textarea {
|
|
10365
|
-
--textarea-background-primary: var(--
|
|
10366
|
-
--textarea-background-secondary: var(--
|
|
10859
|
+
--textarea-background-primary: var(--component--input-background-primary);
|
|
10860
|
+
--textarea-background-secondary: var(--component--input-background-secondary);
|
|
10367
10861
|
--textarea-background: var(--textarea-background-primary);
|
|
10368
|
-
--textarea-text: var(--
|
|
10862
|
+
--textarea-text: var(--component--input-text-value-default);
|
|
10369
10863
|
--textarea-background-disabled: var(--textarea-background-primary);
|
|
10370
|
-
--textarea-text-disabled: var(--color-
|
|
10371
|
-
--textarea-placeholder-disabled: var(--color-
|
|
10372
|
-
--textarea-label-disabled: var(--color-
|
|
10373
|
-
--textarea-label: var(--
|
|
10374
|
-
--textarea-label-inside: var(--
|
|
10864
|
+
--textarea-text-disabled: var(--color-text-disabled);
|
|
10865
|
+
--textarea-placeholder-disabled: var(--color-text-disabled);
|
|
10866
|
+
--textarea-label-disabled: var(--color-text-disabled);
|
|
10867
|
+
--textarea-label: var(--component--input-text-label-default);
|
|
10868
|
+
--textarea-label-inside: var(--component--input-text-label-default);
|
|
10375
10869
|
--textarea-label-inside-left: 16px;
|
|
10376
|
-
--textarea-placeholder: var(--
|
|
10377
|
-
--textarea-helper: var(--
|
|
10378
|
-
--textarea-error: var(--
|
|
10379
|
-
--textarea-
|
|
10380
|
-
--textarea-
|
|
10870
|
+
--textarea-placeholder: var(--component--input-text-placeholder-default);
|
|
10871
|
+
--textarea-helper: var(--component--input-text-helper-default);
|
|
10872
|
+
--textarea-error: var(--component--input-text-error-default);
|
|
10873
|
+
--textarea-error-icon: var(--component--input-icon-error-default);
|
|
10874
|
+
--textarea-textcounter: var(--component--input-text-counter-default);
|
|
10875
|
+
--textarea-resize-icon: var(--component-textarea-icon-resize-default);
|
|
10876
|
+
--textarea-opacity-disabled: var(--component--input-opacity-disabled);
|
|
10877
|
+
--textarea-border-radius: calc(var(--component--input-border-radius-top-left) * 1px)
|
|
10878
|
+
calc(var(--component--input-border-radius-top-right) * 1px)
|
|
10879
|
+
calc(var(--component--input-border-radius-bottom-right) * 1px)
|
|
10880
|
+
calc(var(--component--input-border-radius-bottom-left) * 1px);
|
|
10881
|
+
--textarea-border-color: var(--component--input-border-default);
|
|
10882
|
+
--textarea-border-color-hover: var(--component--input-border-hover);
|
|
10883
|
+
--textarea-border-color-success: var(--component--input-border-success-default);
|
|
10884
|
+
--textarea-border-color-error: var(--component--input-border-error-default);
|
|
10885
|
+
--textarea-border-color-readonly: var(--color-border-strong);
|
|
10886
|
+
--textarea-focus-ring-radius: var(--component-textarea-focus-ring-radius-primary);
|
|
10381
10887
|
}
|
|
10382
10888
|
.tl-textarea--primary {
|
|
10383
10889
|
--textarea-background: var(--textarea-background-primary);
|
|
10384
10890
|
--textarea-background-disabled: var(--textarea-background-primary);
|
|
10891
|
+
--textarea-focus-ring-radius: var(--component-textarea-focus-ring-radius-primary);
|
|
10385
10892
|
}
|
|
10386
10893
|
.tl-textarea--secondary {
|
|
10387
10894
|
--textarea-background: var(--textarea-background-secondary);
|
|
10388
10895
|
--textarea-background-disabled: var(--textarea-background-secondary);
|
|
10389
|
-
|
|
10390
|
-
|
|
10391
|
-
.tl-textarea,
|
|
10392
|
-
.scania .tl-textarea {
|
|
10393
|
-
--textarea-border-radius: 4px 4px 0 0;
|
|
10394
|
-
--textarea-box-shadow: 0 -1px 0 0 var(--color-foreground-border-soft);
|
|
10395
|
-
--textarea-box-shadow-hover: 0 -1px 0 0 var(--color-foreground-border-strong);
|
|
10396
|
-
--textarea-box-shadow-focus: 0 -2px 0 0 var(--color-foreground-border-accent-focus);
|
|
10397
|
-
--textarea-box-shadow-error: 0 -1px 0 0 var(--color-system-danger-default);
|
|
10398
|
-
--textarea-box-shadow-error-hover: 0 -1px 0 0 var(--color-system-danger-default);
|
|
10399
|
-
--textarea-box-shadow-error-focus: 0 -2px 0 0 var(--color-system-danger-default);
|
|
10400
|
-
--textarea-box-shadow-success: 0 -1px 0 0 var(--color-foreground-border-strong);
|
|
10401
|
-
}
|
|
10402
|
-
|
|
10403
|
-
.traton .tl-textarea {
|
|
10404
|
-
--textarea-border-radius: 4px;
|
|
10405
|
-
--textarea-box-shadow: 0 0 0 1px var(--color-foreground-border-soft);
|
|
10406
|
-
--textarea-box-shadow-hover: 0 0 0 1px var(--color-foreground-border-strong);
|
|
10407
|
-
--textarea-box-shadow-focus: 0 0 0 2px var(--color-foreground-border-accent-focus);
|
|
10408
|
-
--textarea-box-shadow-error: 0 0 0 1px var(--color-system-danger-default);
|
|
10409
|
-
--textarea-box-shadow-error-hover: 0 0 0 1px var(--color-system-danger-default);
|
|
10410
|
-
--textarea-box-shadow-error-focus: 0 0 0 2px var(--color-system-danger-default);
|
|
10411
|
-
--textarea-box-shadow-success: 0 0 0 1px var(--color-foreground-border-strong);
|
|
10896
|
+
--textarea-focus-ring-radius: var(--component-textarea-focus-ring-radius-secondary);
|
|
10412
10897
|
}
|
|
10413
10898
|
|
|
10414
10899
|
.tl-textarea {
|
|
@@ -10426,7 +10911,13 @@ body {
|
|
|
10426
10911
|
.tl-textarea:has(.tl-textarea__input:disabled) {
|
|
10427
10912
|
cursor: not-allowed;
|
|
10428
10913
|
}
|
|
10429
|
-
.tl-textarea:has(.tl-textarea__input
|
|
10914
|
+
.tl-textarea:has(.tl-textarea__input:disabled) .tl-textarea__input, .tl-textarea:has(.tl-textarea__input:disabled) .tl-textarea__label {
|
|
10915
|
+
opacity: var(--textarea-opacity-disabled);
|
|
10916
|
+
}
|
|
10917
|
+
.tl-textarea:has(.tl-textarea__input:disabled)::after {
|
|
10918
|
+
opacity: var(--textarea-opacity-disabled);
|
|
10919
|
+
}
|
|
10920
|
+
.tl-textarea:has(.tl-textarea__input[readonly]):not(:has(.tl-textarea__input:disabled), .tl-textarea--hide-readonly-icon)::before {
|
|
10430
10921
|
content: "";
|
|
10431
10922
|
position: absolute;
|
|
10432
10923
|
top: 18px;
|
|
@@ -10438,22 +10929,22 @@ body {
|
|
|
10438
10929
|
mask-size: contain;
|
|
10439
10930
|
mask-repeat: no-repeat;
|
|
10440
10931
|
mask-position: center;
|
|
10441
|
-
z-index:
|
|
10932
|
+
z-index: 2;
|
|
10442
10933
|
}
|
|
10443
|
-
.traton .tl-textarea:has(.tl-textarea__input[readonly]):not(:has(.tl-textarea__input:disabled)
|
|
10934
|
+
.traton .tl-textarea:has(.tl-textarea__input[readonly]):not(:has(.tl-textarea__input:disabled), .tl-textarea--hide-readonly-icon)::before {
|
|
10444
10935
|
top: 20px;
|
|
10445
10936
|
right: 16px;
|
|
10446
10937
|
}
|
|
10447
|
-
.tl-textarea:not(.tl-textarea--label-inside):has(.tl-textarea__label):has(.tl-textarea__input[readonly]):not(:has(.tl-textarea__input:disabled)
|
|
10938
|
+
.tl-textarea:not(.tl-textarea--label-inside):has(.tl-textarea__label):has(.tl-textarea__input[readonly]):not(:has(.tl-textarea__input:disabled), .tl-textarea--hide-readonly-icon)::before {
|
|
10448
10939
|
top: 42px;
|
|
10449
10940
|
}
|
|
10450
|
-
.traton .tl-textarea:not(.tl-textarea--label-inside):has(.tl-textarea__label):has(.tl-textarea__input[readonly]):not(:has(.tl-textarea__input:disabled)
|
|
10941
|
+
.traton .tl-textarea:not(.tl-textarea--label-inside):has(.tl-textarea__label):has(.tl-textarea__input[readonly]):not(:has(.tl-textarea__input:disabled), .tl-textarea--hide-readonly-icon)::before {
|
|
10451
10942
|
top: 44px;
|
|
10452
10943
|
}
|
|
10453
|
-
.tl-textarea:not(.tl-textarea--label-inside
|
|
10944
|
+
.tl-textarea:not(.tl-textarea--label-inside, :has(.tl-textarea__label)):has(.tl-textarea__input[readonly]):not(:has(.tl-textarea__input:disabled), .tl-textarea--hide-readonly-icon)::before {
|
|
10454
10945
|
top: 17px;
|
|
10455
10946
|
}
|
|
10456
|
-
.traton .tl-textarea:not(.tl-textarea--label-inside
|
|
10947
|
+
.traton .tl-textarea:not(.tl-textarea--label-inside, :has(.tl-textarea__label)):has(.tl-textarea__input[readonly]):not(:has(.tl-textarea__input:disabled), .tl-textarea--hide-readonly-icon)::before {
|
|
10457
10948
|
top: 19px;
|
|
10458
10949
|
}
|
|
10459
10950
|
.tl-textarea::after {
|
|
@@ -10461,15 +10952,15 @@ body {
|
|
|
10461
10952
|
position: absolute;
|
|
10462
10953
|
bottom: 3px;
|
|
10463
10954
|
right: 3px;
|
|
10464
|
-
width:
|
|
10465
|
-
height:
|
|
10955
|
+
width: calc(var(--component-textarea-size-resize-width) * 1px);
|
|
10956
|
+
height: calc(var(--component-textarea-size-resize-height) * 1px);
|
|
10466
10957
|
background-color: var(--textarea-resize-icon);
|
|
10467
10958
|
mask-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 12 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M11.8536 0.853553C12.0488 0.658291 12.0488 0.341709 11.8536 0.146447C11.6583 -0.0488155 11.3417 -0.0488155 11.1464 0.146447L0.146447 11.1464C-0.0488155 11.3417 -0.0488155 11.6583 0.146447 11.8536C0.341709 12.0488 0.658291 12.0488 0.853553 11.8536L11.8536 0.853553ZM11.8536 4.64645C12.0488 4.84171 12.0488 5.15829 11.8536 5.35355L5.35355 11.8536C5.15829 12.0488 4.84171 12.0488 4.64645 11.8536C4.45118 11.6583 4.45118 11.3417 4.64645 11.1464L11.1464 4.64645C11.3417 4.45118 11.6583 4.45118 11.8536 4.64645ZM11.8536 8.64645C12.0488 8.84171 12.0488 9.15829 11.8536 9.35355L9.35355 11.8536C9.15829 12.0488 8.84171 12.0488 8.64645 11.8536C8.45118 11.6583 8.45118 11.3417 8.64645 11.1464L11.1464 8.64645C11.3417 8.45118 11.6583 8.45118 11.8536 8.64645Z' fill='currentColor'/%3E%3C/svg%3E");
|
|
10468
10959
|
mask-size: contain;
|
|
10469
10960
|
mask-repeat: no-repeat;
|
|
10470
10961
|
mask-position: center;
|
|
10471
10962
|
pointer-events: none;
|
|
10472
|
-
z-index:
|
|
10963
|
+
z-index: 2;
|
|
10473
10964
|
}
|
|
10474
10965
|
.traton .tl-textarea::after {
|
|
10475
10966
|
bottom: 5px;
|
|
@@ -10487,9 +10978,6 @@ body {
|
|
|
10487
10978
|
.traton .tl-textarea:has(.tl-textarea__bottom)::after {
|
|
10488
10979
|
bottom: 27px;
|
|
10489
10980
|
}
|
|
10490
|
-
.tl-textarea :has(.tl-textarea__input:disabled)::after {
|
|
10491
|
-
background-color: var(--color-foreground-text-disabled);
|
|
10492
|
-
}
|
|
10493
10981
|
|
|
10494
10982
|
.tl-textarea__input {
|
|
10495
10983
|
all: unset;
|
|
@@ -10499,8 +10987,11 @@ body {
|
|
|
10499
10987
|
width: 100%;
|
|
10500
10988
|
box-sizing: border-box;
|
|
10501
10989
|
margin: 0;
|
|
10502
|
-
border:
|
|
10990
|
+
border-style: solid;
|
|
10991
|
+
border-color: var(--textarea-border-color);
|
|
10992
|
+
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);
|
|
10503
10993
|
outline: none;
|
|
10994
|
+
transition: border-color 200ms ease;
|
|
10504
10995
|
}
|
|
10505
10996
|
.tl-textarea__input::placeholder {
|
|
10506
10997
|
color: var(--textarea-placeholder);
|
|
@@ -10527,48 +11018,53 @@ body {
|
|
|
10527
11018
|
padding: var(--tds-spacing-element-20) var(--tds-spacing-element-16);
|
|
10528
11019
|
color: var(--textarea-text);
|
|
10529
11020
|
resize: vertical;
|
|
10530
|
-
box-shadow: inset var(--textarea-box-shadow);
|
|
10531
|
-
transition: box-shadow 0.2s;
|
|
10532
11021
|
z-index: 0;
|
|
10533
11022
|
}
|
|
10534
11023
|
.tl-textarea__input::placeholder {
|
|
10535
11024
|
transform: translateY(1px);
|
|
10536
11025
|
}
|
|
10537
11026
|
.tl-textarea__input:focus {
|
|
10538
|
-
|
|
11027
|
+
outline: 2px solid var(--component--focus-ring-color-strong);
|
|
11028
|
+
box-shadow: 0 0 0 1px var(--component--focus-ring-color-discrete);
|
|
11029
|
+
outline-offset: 1px;
|
|
11030
|
+
z-index: 1;
|
|
10539
11031
|
}
|
|
10540
11032
|
.tl-textarea__input::-webkit-resizer {
|
|
10541
11033
|
display: none;
|
|
10542
11034
|
}
|
|
10543
|
-
.tl-textarea:hover .tl-textarea__input:not(:focus
|
|
10544
|
-
|
|
11035
|
+
.tl-textarea:hover .tl-textarea__input:not(:focus, :disabled) {
|
|
11036
|
+
border-color: var(--textarea-border-color-hover);
|
|
10545
11037
|
}
|
|
10546
11038
|
.tl-textarea--error .tl-textarea__input {
|
|
10547
|
-
|
|
11039
|
+
border-color: var(--textarea-border-color-error);
|
|
10548
11040
|
}
|
|
10549
11041
|
.tl-textarea--error .tl-textarea__input:focus {
|
|
10550
|
-
|
|
11042
|
+
outline: 2px solid var(--component--focus-ring-color-strong);
|
|
11043
|
+
box-shadow: 0 0 0 1px var(--component--focus-ring-color-discrete);
|
|
11044
|
+
outline-offset: 1px;
|
|
11045
|
+
z-index: 1;
|
|
10551
11046
|
}
|
|
10552
|
-
.tl-textarea--error:hover .tl-textarea__input:not(:focus
|
|
10553
|
-
|
|
11047
|
+
.tl-textarea--error:hover .tl-textarea__input:not(:focus, :disabled) {
|
|
11048
|
+
border-color: var(--textarea-border-color-error);
|
|
10554
11049
|
}
|
|
10555
|
-
.tl-textarea--success:not(:has(.tl-textarea__input[readonly])
|
|
10556
|
-
|
|
11050
|
+
.tl-textarea--success:not(:has(.tl-textarea__input[readonly]), :has(.tl-textarea__input:disabled)) .tl-textarea__input:not(:focus) {
|
|
11051
|
+
border-color: var(--textarea-border-color-success);
|
|
10557
11052
|
}
|
|
10558
11053
|
.tl-textarea__input:disabled {
|
|
10559
|
-
box-shadow: none;
|
|
10560
|
-
color: var(--textarea-text-disabled);
|
|
10561
11054
|
cursor: not-allowed;
|
|
10562
11055
|
pointer-events: none;
|
|
10563
11056
|
}
|
|
10564
11057
|
:has(.tl-textarea__input[readonly]):not(:has(.tl-textarea__input:disabled)) .tl-textarea__input {
|
|
10565
|
-
|
|
11058
|
+
border-color: var(--textarea-border-color-readonly);
|
|
10566
11059
|
}
|
|
10567
11060
|
:has(.tl-textarea__input[readonly]):not(:has(.tl-textarea__input:disabled)) .tl-textarea__input:focus {
|
|
10568
|
-
|
|
11061
|
+
outline: 2px solid var(--component--focus-ring-color-strong);
|
|
11062
|
+
box-shadow: 0 0 0 1px var(--component--focus-ring-color-discrete);
|
|
11063
|
+
outline-offset: 1px;
|
|
11064
|
+
z-index: 1;
|
|
10569
11065
|
}
|
|
10570
11066
|
:has(.tl-textarea__input[readonly]):not(:has(.tl-textarea__input:disabled)):hover .tl-textarea__input:not(:focus) {
|
|
10571
|
-
|
|
11067
|
+
border-color: var(--textarea-border-color-hover);
|
|
10572
11068
|
}
|
|
10573
11069
|
.tl-textarea--label-inside .tl-textarea__input {
|
|
10574
11070
|
padding-top: 26px;
|
|
@@ -10587,7 +11083,7 @@ body {
|
|
|
10587
11083
|
cursor: default;
|
|
10588
11084
|
pointer-events: none;
|
|
10589
11085
|
}
|
|
10590
|
-
:has(.tl-textarea__input[readonly]):not(:has(.tl-textarea__input:disabled)
|
|
11086
|
+
:has(.tl-textarea__input[readonly]):not(:has(.tl-textarea__input:disabled), .tl-textarea__input--hide-readonly-icon) .tl-textarea__input {
|
|
10591
11087
|
padding-right: 50px;
|
|
10592
11088
|
}
|
|
10593
11089
|
|
|
@@ -10617,7 +11113,7 @@ body {
|
|
|
10617
11113
|
transform: none;
|
|
10618
11114
|
transform-origin: top left;
|
|
10619
11115
|
transition: transform 0.15s, font-size 0.15s, color 0.15s, top 0.15s;
|
|
10620
|
-
z-index:
|
|
11116
|
+
z-index: 2;
|
|
10621
11117
|
}
|
|
10622
11118
|
.tl-textarea--label-inside:has(.tl-textarea__input:disabled) .tl-textarea__label {
|
|
10623
11119
|
font-family: var(--detail-07-font-family);
|
|
@@ -10651,7 +11147,7 @@ body {
|
|
|
10651
11147
|
position: relative;
|
|
10652
11148
|
}
|
|
10653
11149
|
:has(.tl-textarea__input:disabled) .tl-textarea__helper {
|
|
10654
|
-
color: var(--color-
|
|
11150
|
+
color: var(--color-text-disabled);
|
|
10655
11151
|
}
|
|
10656
11152
|
.tl-textarea--error .tl-textarea__helper {
|
|
10657
11153
|
padding-left: 24px;
|
|
@@ -10663,7 +11159,7 @@ body {
|
|
|
10663
11159
|
top: 0;
|
|
10664
11160
|
width: 16px;
|
|
10665
11161
|
height: 16px;
|
|
10666
|
-
background-color: var(--textarea-error);
|
|
11162
|
+
background-color: var(--textarea-error-icon);
|
|
10667
11163
|
mask-image: var(--icon-error-svg);
|
|
10668
11164
|
mask-size: contain;
|
|
10669
11165
|
mask-repeat: no-repeat;
|
|
@@ -10675,11 +11171,11 @@ body {
|
|
|
10675
11171
|
.tl-textarea--error:has(.tl-textarea__input[readonly]) .tl-textarea__helper::before {
|
|
10676
11172
|
display: none;
|
|
10677
11173
|
}
|
|
10678
|
-
.tl-textarea--error:not(:has(.tl-textarea__input[readonly])
|
|
11174
|
+
.tl-textarea--error:not(:has(.tl-textarea__input[readonly]), :has(.tl-textarea__input:disabled)) .tl-textarea__helper {
|
|
10679
11175
|
color: var(--textarea-error);
|
|
10680
11176
|
}
|
|
10681
11177
|
.tl-textarea--error:has(.tl-textarea__input:disabled) .tl-textarea__helper::before {
|
|
10682
|
-
background-color: var(--color-
|
|
11178
|
+
background-color: var(--color-text-disabled);
|
|
10683
11179
|
}
|
|
10684
11180
|
|
|
10685
11181
|
.tl-textarea__charcounter {
|
|
@@ -10693,17 +11189,17 @@ body {
|
|
|
10693
11189
|
color: var(--textarea-textcounter);
|
|
10694
11190
|
}
|
|
10695
11191
|
:has(.tl-textarea__input:disabled) .tl-textarea__charcounter {
|
|
10696
|
-
color: var(--color-
|
|
11192
|
+
color: var(--color-text-disabled);
|
|
10697
11193
|
}
|
|
10698
|
-
.tl-textarea--error:not(:has(.tl-textarea__input[readonly])
|
|
11194
|
+
.tl-textarea--error:not(:has(.tl-textarea__input[readonly]), :has(.tl-textarea__input:disabled)) .tl-textarea__charcounter {
|
|
10699
11195
|
color: var(--textarea-error);
|
|
10700
11196
|
}
|
|
10701
|
-
.tl-textarea--error:not(:has(.tl-textarea__input[readonly])
|
|
11197
|
+
.tl-textarea--error:not(:has(.tl-textarea__input[readonly]), :has(.tl-textarea__input:disabled)) .tl-textarea__charcounter .tl-textarea__charcounter-divider {
|
|
10702
11198
|
color: var(--textarea-error);
|
|
10703
11199
|
}
|
|
10704
11200
|
|
|
10705
11201
|
.tl-textarea__charcounter-divider {
|
|
10706
|
-
color: var(--color-
|
|
11202
|
+
color: var(--color-text-disabled);
|
|
10707
11203
|
}
|
|
10708
11204
|
|
|
10709
11205
|
.tl-textarea--label-inside:has(.tl-textarea__input:focus) .tl-textarea__label,
|
|
@@ -10938,13 +11434,117 @@ body {
|
|
|
10938
11434
|
text-decoration: none;
|
|
10939
11435
|
}
|
|
10940
11436
|
|
|
11437
|
+
/**
|
|
11438
|
+
* Do not edit directly, this file was auto-generated.
|
|
11439
|
+
*/
|
|
11440
|
+
:root,
|
|
11441
|
+
.tds-mode-light,
|
|
11442
|
+
.scania .tds-mode-light,
|
|
11443
|
+
.scania.tds-mode-light,
|
|
11444
|
+
.scania .tl-mode-light,
|
|
11445
|
+
.scania.tl-mode-light {
|
|
11446
|
+
--component-toggle-background-selected-default: var(--scania-color-green-300);
|
|
11447
|
+
--component-toggle-background-standard-default: var(--scania-color-grey-350);
|
|
11448
|
+
--component-toggle-background-selected-hover: var(--scania-color-green-400);
|
|
11449
|
+
--component-toggle-background-standard-hover: var(--scania-color-grey-500);
|
|
11450
|
+
--component-toggle-background-selected-active: var(--scania-color-green-500);
|
|
11451
|
+
--component-toggle-background-standard-active: var(--scania-color-grey-600);
|
|
11452
|
+
--component-toggle-border-radius-default: var(--scania-unit-9999);
|
|
11453
|
+
--component-toggle-focus-ring-radius-default: var(--component--focus-ring-radius-full);
|
|
11454
|
+
--component-toggle-icon-standard-default: var(--scania-color-base-white);
|
|
11455
|
+
--component-toggle-icon-standard-hover: var(--scania-color-base-white);
|
|
11456
|
+
--component-toggle-icon-standard-active: var(--scania-color-base-white);
|
|
11457
|
+
--component-toggle-icon-selected-default: var(--scania-color-base-white);
|
|
11458
|
+
--component-toggle-icon-selected-hover: var(--scania-color-base-white);
|
|
11459
|
+
--component-toggle-icon-selected-active: var(--scania-color-base-white);
|
|
11460
|
+
--component-toggle-opacity-disabled: var(--scania-opacity-25);
|
|
11461
|
+
--component-toggle-text-default: var(--color-text-strong);
|
|
11462
|
+
}
|
|
11463
|
+
|
|
11464
|
+
.traton .tds-mode-light,
|
|
11465
|
+
.traton.tds-mode-light,
|
|
11466
|
+
.traton .tl-mode-light,
|
|
11467
|
+
.traton.tl-mode-light {
|
|
11468
|
+
--component-toggle-background-selected-default: var(--traton-color-green-300);
|
|
11469
|
+
--component-toggle-background-standard-default: var(--traton-color-grey-400);
|
|
11470
|
+
--component-toggle-background-selected-hover: var(--traton-color-green-400);
|
|
11471
|
+
--component-toggle-background-standard-hover: var(--traton-color-grey-500);
|
|
11472
|
+
--component-toggle-background-selected-active: var(--traton-color-green-500);
|
|
11473
|
+
--component-toggle-background-standard-active: var(--traton-color-grey-600);
|
|
11474
|
+
--component-toggle-border-radius-default: var(--traton-unit-9999);
|
|
11475
|
+
--component-toggle-focus-ring-radius-default: var(--component--focus-ring-radius-full);
|
|
11476
|
+
--component-toggle-icon-standard-default: var(--traton-color-base-white);
|
|
11477
|
+
--component-toggle-icon-standard-hover: var(--traton-color-base-white);
|
|
11478
|
+
--component-toggle-icon-standard-active: var(--traton-color-base-white);
|
|
11479
|
+
--component-toggle-icon-selected-default: var(--traton-color-base-white);
|
|
11480
|
+
--component-toggle-icon-selected-hover: var(--traton-color-base-white);
|
|
11481
|
+
--component-toggle-icon-selected-active: var(--traton-color-base-white);
|
|
11482
|
+
--component-toggle-opacity-disabled: var(--traton-opacity-25);
|
|
11483
|
+
--component-toggle-text-default: var(--color-text-strong);
|
|
11484
|
+
}
|
|
11485
|
+
|
|
11486
|
+
.tds-mode-dark,
|
|
11487
|
+
.scania .tds-mode-dark,
|
|
11488
|
+
.scania.tds-mode-dark,
|
|
11489
|
+
.scania .tl-mode-dark,
|
|
11490
|
+
.scania.tl-mode-dark {
|
|
11491
|
+
--component-toggle-background-selected-default: var(--scania-color-green-300);
|
|
11492
|
+
--component-toggle-background-standard-default: var(--scania-color-grey-350);
|
|
11493
|
+
--component-toggle-background-selected-hover: var(--scania-color-green-400);
|
|
11494
|
+
--component-toggle-background-standard-hover: var(--scania-color-grey-500);
|
|
11495
|
+
--component-toggle-background-selected-active: var(--scania-color-green-500);
|
|
11496
|
+
--component-toggle-background-standard-active: var(--scania-color-grey-600);
|
|
11497
|
+
--component-toggle-border-radius-default: var(--scania-unit-9999);
|
|
11498
|
+
--component-toggle-focus-ring-radius-default: var(--component--focus-ring-radius-full);
|
|
11499
|
+
--component-toggle-icon-standard-default: var(--scania-color-base-white);
|
|
11500
|
+
--component-toggle-icon-standard-hover: var(--scania-color-base-white);
|
|
11501
|
+
--component-toggle-icon-standard-active: var(--scania-color-base-white);
|
|
11502
|
+
--component-toggle-icon-selected-default: var(--scania-color-base-white);
|
|
11503
|
+
--component-toggle-icon-selected-hover: var(--scania-color-base-white);
|
|
11504
|
+
--component-toggle-icon-selected-active: var(--scania-color-base-white);
|
|
11505
|
+
--component-toggle-opacity-disabled: var(--scania-opacity-25);
|
|
11506
|
+
--component-toggle-text-default: var(--color-text-strong);
|
|
11507
|
+
}
|
|
11508
|
+
|
|
11509
|
+
.traton .tds-mode-dark,
|
|
11510
|
+
.traton.tds-mode-dark,
|
|
11511
|
+
.traton .tl-mode-dark,
|
|
11512
|
+
.traton.tl-mode-dark {
|
|
11513
|
+
--component-toggle-background-selected-default: var(--traton-color-green-300);
|
|
11514
|
+
--component-toggle-background-standard-default: var(--traton-color-grey-400);
|
|
11515
|
+
--component-toggle-background-selected-hover: var(--traton-color-green-400);
|
|
11516
|
+
--component-toggle-background-standard-hover: var(--traton-color-grey-500);
|
|
11517
|
+
--component-toggle-background-selected-active: var(--traton-color-green-500);
|
|
11518
|
+
--component-toggle-background-standard-active: var(--traton-color-grey-600);
|
|
11519
|
+
--component-toggle-border-radius-default: var(--traton-unit-9999);
|
|
11520
|
+
--component-toggle-focus-ring-radius-default: var(--component--focus-ring-radius-full);
|
|
11521
|
+
--component-toggle-icon-standard-default: var(--traton-color-base-white);
|
|
11522
|
+
--component-toggle-icon-standard-hover: var(--traton-color-base-white);
|
|
11523
|
+
--component-toggle-icon-standard-active: var(--traton-color-base-white);
|
|
11524
|
+
--component-toggle-icon-selected-default: var(--traton-color-base-white);
|
|
11525
|
+
--component-toggle-icon-selected-hover: var(--traton-color-base-white);
|
|
11526
|
+
--component-toggle-icon-selected-active: var(--traton-color-base-white);
|
|
11527
|
+
--component-toggle-opacity-disabled: var(--traton-opacity-25);
|
|
11528
|
+
--component-toggle-text-default: var(--color-text-strong);
|
|
11529
|
+
}
|
|
11530
|
+
|
|
10941
11531
|
.tl-toggle {
|
|
10942
|
-
--toggle-
|
|
10943
|
-
--toggle-
|
|
10944
|
-
--toggle-
|
|
10945
|
-
--toggle-
|
|
10946
|
-
--toggle-
|
|
10947
|
-
--toggle-
|
|
11532
|
+
--toggle-text: var(--component-toggle-text-default);
|
|
11533
|
+
--toggle-off: var(--component-toggle-background-standard-default);
|
|
11534
|
+
--toggle-off-hover: var(--component-toggle-background-standard-hover);
|
|
11535
|
+
--toggle-off-active: var(--component-toggle-background-standard-active);
|
|
11536
|
+
--toggle-on: var(--component-toggle-background-selected-default);
|
|
11537
|
+
--toggle-on-hover: var(--component-toggle-background-selected-hover);
|
|
11538
|
+
--toggle-on-active: var(--component-toggle-background-selected-active);
|
|
11539
|
+
--toggle-knob: var(--component-toggle-icon-standard-default);
|
|
11540
|
+
--toggle-knob-hover: var(--component-toggle-icon-standard-hover);
|
|
11541
|
+
--toggle-knob-active: var(--component-toggle-icon-standard-active);
|
|
11542
|
+
--toggle-knob-on: var(--component-toggle-icon-selected-default);
|
|
11543
|
+
--toggle-knob-on-hover: var(--component-toggle-icon-selected-hover);
|
|
11544
|
+
--toggle-knob-on-active: var(--component-toggle-icon-selected-active);
|
|
11545
|
+
--toggle-border-radius: calc(var(--component-toggle-border-radius-default) * 1px);
|
|
11546
|
+
--toggle-focus-ring-radius: calc(var(--component-toggle-focus-ring-radius-default) * 1px);
|
|
11547
|
+
--toggle-opacity-disabled: calc(var(--component-toggle-opacity-disabled) / 100);
|
|
10948
11548
|
}
|
|
10949
11549
|
|
|
10950
11550
|
.tl-toggle:has(input[type=checkbox]:disabled) {
|
|
@@ -10967,60 +11567,70 @@ body {
|
|
|
10967
11567
|
position: absolute;
|
|
10968
11568
|
box-sizing: border-box;
|
|
10969
11569
|
}
|
|
11570
|
+
.tl-toggle__input {
|
|
11571
|
+
/* Track */
|
|
11572
|
+
}
|
|
10970
11573
|
.tl-toggle__input::before {
|
|
10971
|
-
|
|
10972
|
-
|
|
10973
|
-
border:
|
|
10974
|
-
border-radius: 16px;
|
|
11574
|
+
background-color: var(--toggle-off);
|
|
11575
|
+
border: 1px solid transparent;
|
|
11576
|
+
border-radius: var(--toggle-border-radius);
|
|
10975
11577
|
left: 0;
|
|
10976
11578
|
height: 24px;
|
|
10977
11579
|
width: 44px;
|
|
10978
11580
|
}
|
|
10979
11581
|
.tl-toggle__input {
|
|
10980
|
-
/*
|
|
11582
|
+
/* Knob */
|
|
10981
11583
|
}
|
|
10982
11584
|
.tl-toggle__input::after {
|
|
10983
|
-
background-color: var(--toggle-
|
|
11585
|
+
background-color: var(--toggle-knob);
|
|
10984
11586
|
border-radius: 50%;
|
|
10985
11587
|
left: 4px;
|
|
10986
11588
|
top: 4px;
|
|
10987
11589
|
width: 16px;
|
|
10988
11590
|
height: 16px;
|
|
10989
11591
|
}
|
|
11592
|
+
.tl-toggle__input:not(:disabled):hover::before {
|
|
11593
|
+
background-color: var(--toggle-off-hover);
|
|
11594
|
+
}
|
|
11595
|
+
.tl-toggle__input:not(:disabled):hover::after {
|
|
11596
|
+
background-color: var(--toggle-knob-hover);
|
|
11597
|
+
}
|
|
11598
|
+
.tl-toggle__input:not(:disabled):active::before {
|
|
11599
|
+
background-color: var(--toggle-off-active);
|
|
11600
|
+
}
|
|
11601
|
+
.tl-toggle__input:not(:disabled):active::after {
|
|
11602
|
+
background-color: var(--toggle-knob-active);
|
|
11603
|
+
}
|
|
10990
11604
|
.tl-toggle__input:focus-visible {
|
|
10991
11605
|
outline: 2px solid var(--component--focus-ring-color-strong);
|
|
10992
11606
|
box-shadow: 0 0 0 1px var(--component--focus-ring-color-discrete);
|
|
10993
11607
|
outline-offset: 1px;
|
|
10994
11608
|
z-index: 1;
|
|
10995
|
-
border-radius:
|
|
10996
|
-
}
|
|
10997
|
-
.tl-toggle__input:focus-visible::before {
|
|
10998
|
-
background-color: var(--toggle-disabled);
|
|
10999
|
-
}
|
|
11000
|
-
.tl-toggle__input:hover::before {
|
|
11001
|
-
background-color: var(--toggle-background-off);
|
|
11609
|
+
border-radius: var(--toggle-focus-ring-radius);
|
|
11002
11610
|
}
|
|
11003
11611
|
.tl-toggle__input:checked::before {
|
|
11004
|
-
background-color: var(--toggle-
|
|
11612
|
+
background-color: var(--toggle-on);
|
|
11005
11613
|
}
|
|
11006
11614
|
.tl-toggle__input:checked::after {
|
|
11615
|
+
background-color: var(--toggle-knob-on);
|
|
11007
11616
|
left: 24px;
|
|
11008
11617
|
}
|
|
11009
|
-
.tl-toggle__input:disabled {
|
|
11010
|
-
|
|
11011
|
-
cursor: not-allowed;
|
|
11618
|
+
.tl-toggle__input:checked:not(:disabled):hover::before {
|
|
11619
|
+
background-color: var(--toggle-on-hover);
|
|
11012
11620
|
}
|
|
11013
|
-
.tl-toggle__input:disabled::
|
|
11014
|
-
background-color: var(--toggle-
|
|
11621
|
+
.tl-toggle__input:checked:not(:disabled):hover::after {
|
|
11622
|
+
background-color: var(--toggle-knob-on-hover);
|
|
11015
11623
|
}
|
|
11016
|
-
.tl-toggle__input:disabled::
|
|
11017
|
-
background-color: var(--toggle-
|
|
11624
|
+
.tl-toggle__input:checked:not(:disabled):active::before {
|
|
11625
|
+
background-color: var(--toggle-on-active);
|
|
11018
11626
|
}
|
|
11019
|
-
.tl-toggle__input:disabled:
|
|
11020
|
-
background-color: var(--toggle-
|
|
11627
|
+
.tl-toggle__input:checked:not(:disabled):active::after {
|
|
11628
|
+
background-color: var(--toggle-knob-on-active);
|
|
11021
11629
|
}
|
|
11022
|
-
.tl-toggle__input:disabled
|
|
11023
|
-
|
|
11630
|
+
.tl-toggle__input:disabled {
|
|
11631
|
+
pointer-events: none;
|
|
11632
|
+
cursor: not-allowed;
|
|
11633
|
+
opacity: var(--toggle-opacity-disabled);
|
|
11024
11634
|
}
|
|
11025
11635
|
.tl-toggle__input--sm {
|
|
11026
11636
|
width: 28px;
|
|
@@ -11034,18 +11644,9 @@ body {
|
|
|
11034
11644
|
width: 8px;
|
|
11035
11645
|
height: 8px;
|
|
11036
11646
|
}
|
|
11037
|
-
.tl-toggle__input--sm:checked::before {
|
|
11038
|
-
background-color: var(--toggle-background-on);
|
|
11039
|
-
}
|
|
11040
11647
|
.tl-toggle__input--sm:checked::after {
|
|
11041
11648
|
left: 16px;
|
|
11042
11649
|
}
|
|
11043
|
-
.tl-toggle__input--sm:disabled::before {
|
|
11044
|
-
background-color: var(--toggle-disabled);
|
|
11045
|
-
}
|
|
11046
|
-
.tl-toggle__input--sm:disabled::after {
|
|
11047
|
-
background-color: var(--toggle-switch);
|
|
11048
|
-
}
|
|
11049
11650
|
|
|
11050
11651
|
.tl-toggle__headline {
|
|
11051
11652
|
font-family: var(--detail-02-font-family);
|
|
@@ -11058,7 +11659,7 @@ body {
|
|
|
11058
11659
|
margin-bottom: 12px;
|
|
11059
11660
|
}
|
|
11060
11661
|
.tl-toggle:has(input[type=checkbox]:disabled) .tl-toggle__headline {
|
|
11061
|
-
|
|
11662
|
+
opacity: var(--toggle-opacity-disabled);
|
|
11062
11663
|
user-select: none;
|
|
11063
11664
|
cursor: not-allowed;
|
|
11064
11665
|
}
|
|
@@ -11078,7 +11679,7 @@ body {
|
|
|
11078
11679
|
padding-left: 8px;
|
|
11079
11680
|
}
|
|
11080
11681
|
input[type=checkbox]:disabled ~ .tl-toggle__label {
|
|
11081
|
-
|
|
11682
|
+
opacity: var(--toggle-opacity-disabled);
|
|
11082
11683
|
pointer-events: none;
|
|
11083
11684
|
cursor: not-allowed;
|
|
11084
11685
|
}
|