@scania/tegel-lite 0.1.0-var-batch-4-beta.4 → 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 +1052 -450
- package/dist/global.css +26 -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-card.css +1 -0
- package/dist/tl-checkbox-vars.css +142 -31
- package/dist/tl-checkbox.css +194 -115
- package/dist/tl-modal.css +2 -2
- 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 {
|
|
@@ -1613,6 +1719,7 @@
|
|
|
1613
1719
|
block-size: 36px;
|
|
1614
1720
|
border-radius: 100%;
|
|
1615
1721
|
margin-right: 16px;
|
|
1722
|
+
background-color: var(--color-background-layer-03);
|
|
1616
1723
|
}
|
|
1617
1724
|
|
|
1618
1725
|
.tl-card__headings {
|
|
@@ -1701,43 +1808,154 @@
|
|
|
1701
1808
|
color: var(--card-icon-color);
|
|
1702
1809
|
}
|
|
1703
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
|
+
|
|
1704
1933
|
.tl-checkbox {
|
|
1705
|
-
--checkbox-
|
|
1706
|
-
--checkbox-
|
|
1707
|
-
--checkbox-
|
|
1708
|
-
--checkbox-
|
|
1709
|
-
--checkbox-
|
|
1710
|
-
--checkbox-
|
|
1711
|
-
--checkbox-
|
|
1712
|
-
--checkbox-
|
|
1713
|
-
--checkbox-border
|
|
1714
|
-
--checkbox-
|
|
1715
|
-
--checkbox-
|
|
1716
|
-
--checkbox-
|
|
1717
|
-
--checkbox-
|
|
1718
|
-
--checkbox-
|
|
1719
|
-
--checkbox-
|
|
1720
|
-
|
|
1721
|
-
|
|
1722
|
-
|
|
1723
|
-
--checkbox-
|
|
1724
|
-
--checkbox-
|
|
1725
|
-
--checkbox-
|
|
1726
|
-
--checkbox-
|
|
1727
|
-
|
|
1728
|
-
|
|
1729
|
-
.
|
|
1730
|
-
--checkbox-focus-width: 20px;
|
|
1731
|
-
--checkbox-focus-height: 20px;
|
|
1732
|
-
--checkbox-focus-left: 2px;
|
|
1733
|
-
--checkbox-focus-top: 2px;
|
|
1734
|
-
}
|
|
1735
|
-
|
|
1736
|
-
.traton .tl-checkbox {
|
|
1737
|
-
--checkbox-focus-width: 22px;
|
|
1738
|
-
--checkbox-focus-height: 22px;
|
|
1739
|
-
--checkbox-focus-left: 1px;
|
|
1740
|
-
--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>");
|
|
1741
1959
|
}
|
|
1742
1960
|
|
|
1743
1961
|
.tl-checkbox {
|
|
@@ -1755,7 +1973,7 @@
|
|
|
1755
1973
|
text-transform: var(--detail-02-text-transform);
|
|
1756
1974
|
display: flex;
|
|
1757
1975
|
align-items: center;
|
|
1758
|
-
color: var(--checkbox-
|
|
1976
|
+
color: var(--checkbox-text);
|
|
1759
1977
|
}
|
|
1760
1978
|
.tl-checkbox:has(:disabled) {
|
|
1761
1979
|
cursor: not-allowed;
|
|
@@ -1766,7 +1984,6 @@
|
|
|
1766
1984
|
outline: none;
|
|
1767
1985
|
margin: 0;
|
|
1768
1986
|
border: 0;
|
|
1769
|
-
border-radius: 2px;
|
|
1770
1987
|
width: 24px;
|
|
1771
1988
|
height: 24px;
|
|
1772
1989
|
position: relative;
|
|
@@ -1778,90 +1995,76 @@
|
|
|
1778
1995
|
content: "";
|
|
1779
1996
|
position: absolute;
|
|
1780
1997
|
box-sizing: border-box;
|
|
1781
|
-
}
|
|
1782
|
-
.tl-checkbox__input::before {
|
|
1783
|
-
width: 20px;
|
|
1784
|
-
height: 20px;
|
|
1785
|
-
left: 2px;
|
|
1786
|
-
top: 2px;
|
|
1787
|
-
border-radius: 4px;
|
|
1788
|
-
}
|
|
1789
|
-
.tl-checkbox__input::after {
|
|
1790
|
-
border: 1px solid var(--checkbox-border);
|
|
1791
|
-
background-color: var(--checkbox-fill);
|
|
1792
1998
|
width: 16px;
|
|
1793
1999
|
height: 16px;
|
|
1794
2000
|
left: 4px;
|
|
1795
2001
|
top: 4px;
|
|
1796
|
-
border-radius: 2px;
|
|
1797
2002
|
}
|
|
1798
|
-
.tl-checkbox__input
|
|
1799
|
-
|
|
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;
|
|
1800
2009
|
}
|
|
1801
|
-
.tl-checkbox__input
|
|
1802
|
-
background-color: var(--checkbox-
|
|
1803
|
-
|
|
1804
|
-
|
|
1805
|
-
|
|
1806
|
-
|
|
1807
|
-
top: var(--checkbox-focus-top);
|
|
1808
|
-
}
|
|
1809
|
-
.tl-checkbox__input:hover:focus-visible::before {
|
|
1810
|
-
width: 20px;
|
|
1811
|
-
height: 20px;
|
|
1812
|
-
left: 2px;
|
|
1813
|
-
top: 2px;
|
|
1814
|
-
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;
|
|
1815
2016
|
}
|
|
1816
|
-
.tl-checkbox__input:disabled {
|
|
1817
|
-
|
|
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);
|
|
1818
2021
|
}
|
|
1819
|
-
.tl-checkbox__input:
|
|
1820
|
-
|
|
1821
|
-
|
|
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);
|
|
1822
2028
|
}
|
|
1823
|
-
.tl-checkbox__input:
|
|
1824
|
-
|
|
2029
|
+
.tl-checkbox__input:checked::before {
|
|
2030
|
+
border-color: var(--checkbox-border-selected);
|
|
2031
|
+
background-color: var(--checkbox-background-selected);
|
|
1825
2032
|
}
|
|
1826
2033
|
.tl-checkbox__input:checked::after {
|
|
1827
|
-
background-
|
|
1828
|
-
|
|
1829
|
-
background-repeat: no-repeat;
|
|
1830
|
-
background-position: center;
|
|
1831
|
-
border-color: var(--checkbox-border);
|
|
2034
|
+
background-color: var(--checkbox-icon-selected);
|
|
2035
|
+
opacity: 1;
|
|
1832
2036
|
}
|
|
1833
|
-
.tl-checkbox__input:checked:not(:disabled):hover::
|
|
1834
|
-
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);
|
|
1835
2040
|
}
|
|
1836
|
-
.tl-checkbox__input:checked:disabled::after {
|
|
1837
|
-
background-
|
|
1838
|
-
background-color: var(--checkbox-fill-disabled);
|
|
1839
|
-
border-color: var(--checkbox-border-disabled);
|
|
2041
|
+
.tl-checkbox__input:checked:not(:disabled):hover::after {
|
|
2042
|
+
background-color: var(--checkbox-icon-selected-hover);
|
|
1840
2043
|
}
|
|
1841
|
-
.tl-checkbox__input
|
|
1842
|
-
|
|
2044
|
+
.tl-checkbox__input--indeterminate::before {
|
|
2045
|
+
border-color: var(--checkbox-border-indeterminate);
|
|
2046
|
+
background-color: var(--checkbox-background-indeterminate);
|
|
1843
2047
|
}
|
|
1844
2048
|
.tl-checkbox__input--indeterminate::after {
|
|
1845
|
-
background-
|
|
1846
|
-
|
|
1847
|
-
|
|
1848
|
-
|
|
1849
|
-
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;
|
|
1850
2053
|
}
|
|
1851
|
-
.tl-checkbox__input--indeterminate:not(:disabled):hover::
|
|
1852
|
-
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);
|
|
1853
2057
|
}
|
|
1854
|
-
.tl-checkbox__input--indeterminate:disabled::after {
|
|
1855
|
-
background-
|
|
1856
|
-
background-color: var(--checkbox-fill-disabled);
|
|
1857
|
-
border-color: var(--checkbox-border-disabled);
|
|
2058
|
+
.tl-checkbox__input--indeterminate:not(:disabled):hover::after {
|
|
2059
|
+
background-color: var(--checkbox-icon-indeterminate-hover);
|
|
1858
2060
|
}
|
|
1859
|
-
.tl-checkbox__input
|
|
1860
|
-
|
|
2061
|
+
.tl-checkbox__input:disabled {
|
|
2062
|
+
cursor: not-allowed;
|
|
2063
|
+
opacity: var(--checkbox-opacity-disabled);
|
|
1861
2064
|
}
|
|
1862
2065
|
|
|
1863
2066
|
.tl-checkbox__label {
|
|
1864
|
-
color: var(--checkbox-
|
|
2067
|
+
color: var(--checkbox-text);
|
|
1865
2068
|
padding-left: var(--tds-spacing-element-4);
|
|
1866
2069
|
padding-top: var(--tds-spacing-element-4);
|
|
1867
2070
|
padding-bottom: var(--tds-spacing-element-4);
|
|
@@ -1870,30 +2073,13 @@
|
|
|
1870
2073
|
position: relative;
|
|
1871
2074
|
cursor: pointer;
|
|
1872
2075
|
}
|
|
2076
|
+
.tl-checkbox__input:not(:disabled):hover + .tl-checkbox__label {
|
|
2077
|
+
color: var(--checkbox-text-hover);
|
|
2078
|
+
}
|
|
1873
2079
|
.tl-checkbox:has(:disabled) .tl-checkbox__label {
|
|
1874
|
-
color: var(--checkbox-label-disabled);
|
|
1875
2080
|
cursor: not-allowed;
|
|
1876
2081
|
}
|
|
1877
2082
|
|
|
1878
|
-
.tl-checkbox__input--indeterminate::after {
|
|
1879
|
-
background-image: var(--checkbox-background-img-indeterminate);
|
|
1880
|
-
background-color: var(--checkbox-border);
|
|
1881
|
-
background-repeat: no-repeat;
|
|
1882
|
-
background-position: center;
|
|
1883
|
-
border-color: var(--checkbox-border);
|
|
1884
|
-
}
|
|
1885
|
-
.tl-checkbox__input--indeterminate:not(:disabled):hover::after {
|
|
1886
|
-
border-color: var(--checkbox-border-hover);
|
|
1887
|
-
}
|
|
1888
|
-
.tl-checkbox__input--indeterminate:disabled::after {
|
|
1889
|
-
background-image: var(--checkbox-background-img-indeterminate-disabled);
|
|
1890
|
-
background-color: var(--checkbox-fill-disabled);
|
|
1891
|
-
border-color: var(--checkbox-border-disabled);
|
|
1892
|
-
}
|
|
1893
|
-
.tl-checkbox__input--indeterminate:focus-visible::before {
|
|
1894
|
-
background-color: var(--checkbox-border-focus);
|
|
1895
|
-
}
|
|
1896
|
-
|
|
1897
2083
|
.tl-chip {
|
|
1898
2084
|
--chip-text: var(--component-chip-text-standard-default);
|
|
1899
2085
|
--chip-text-active: var(--component-chip-text-selected-default);
|
|
@@ -6522,8 +6708,8 @@ body {
|
|
|
6522
6708
|
--modal-text: var(--component-modal-text-title-default);
|
|
6523
6709
|
--modal-body-text: var(--component-modal-text-body-default);
|
|
6524
6710
|
--modal-cross-svg: var(--component-modal-icon-dismiss-default);
|
|
6525
|
-
--modal-shadow: 0
|
|
6526
|
-
|
|
6711
|
+
--modal-shadow: 0 3px 3px 0 var(--component-shadow-default, rgba(0, 0, 0, 0.15)),
|
|
6712
|
+
0 -1px 1px 0 var(--component-shadow-base-modifier, rgba(0, 0, 0, 0.10));
|
|
6527
6713
|
}
|
|
6528
6714
|
|
|
6529
6715
|
/* MIXINS */
|
|
@@ -6971,28 +7157,122 @@ body {
|
|
|
6971
7157
|
margin: 6px;
|
|
6972
7158
|
}
|
|
6973
7159
|
|
|
6974
|
-
|
|
6975
|
-
|
|
6976
|
-
|
|
6977
|
-
|
|
6978
|
-
|
|
6979
|
-
|
|
6980
|
-
|
|
6981
|
-
|
|
6982
|
-
|
|
6983
|
-
--radio-button-
|
|
6984
|
-
--radio-button-
|
|
6985
|
-
|
|
6986
|
-
--radio-button-
|
|
6987
|
-
--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);
|
|
6988
7209
|
}
|
|
6989
7210
|
|
|
6990
|
-
.
|
|
6991
|
-
|
|
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);
|
|
6992
7233
|
}
|
|
6993
7234
|
|
|
6994
|
-
.traton .
|
|
6995
|
-
|
|
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);
|
|
6996
7276
|
}
|
|
6997
7277
|
|
|
6998
7278
|
/* Block */
|
|
@@ -7009,10 +7289,9 @@ body {
|
|
|
7009
7289
|
font-weight: var(--detail-02-font-weight);
|
|
7010
7290
|
letter-spacing: var(--detail-02-letter-spacing);
|
|
7011
7291
|
text-transform: var(--detail-02-text-transform);
|
|
7012
|
-
color: var(--radio-button-
|
|
7292
|
+
color: var(--radio-button-text);
|
|
7013
7293
|
display: flex;
|
|
7014
7294
|
align-items: center;
|
|
7015
|
-
gap: var(--radio-button-spacing-8);
|
|
7016
7295
|
}
|
|
7017
7296
|
.tl-radio-button:has(:disabled) {
|
|
7018
7297
|
cursor: not-allowed;
|
|
@@ -7030,113 +7309,83 @@ body {
|
|
|
7030
7309
|
position: relative;
|
|
7031
7310
|
cursor: pointer;
|
|
7032
7311
|
flex-shrink: 0;
|
|
7033
|
-
border-radius: 50%;
|
|
7034
7312
|
}
|
|
7035
7313
|
.tl-radio-button__input::before, .tl-radio-button__input::after {
|
|
7036
7314
|
content: "";
|
|
7037
7315
|
position: absolute;
|
|
7038
|
-
border-radius: 50%;
|
|
7039
7316
|
box-sizing: border-box;
|
|
7317
|
+
border-radius: var(--radio-button-border-radius);
|
|
7318
|
+
left: 50%;
|
|
7319
|
+
top: 50%;
|
|
7320
|
+
transform: translate(-50%, -50%);
|
|
7040
7321
|
}
|
|
7041
7322
|
.tl-radio-button__input {
|
|
7042
|
-
/*
|
|
7323
|
+
/* The outer circle: border + fill, plus the (transparent by default) hover indicator halo. */
|
|
7043
7324
|
}
|
|
7044
7325
|
.tl-radio-button__input::before {
|
|
7045
|
-
inline-size: 22px;
|
|
7046
|
-
block-size: 22px;
|
|
7047
|
-
left: 1px;
|
|
7048
|
-
top: 1px;
|
|
7049
|
-
}
|
|
7050
|
-
.tl-radio-button__input {
|
|
7051
|
-
/* base inner circle + ring */
|
|
7052
|
-
}
|
|
7053
|
-
.tl-radio-button__input::after {
|
|
7054
|
-
background-color: var(--radio-button-background-inverse);
|
|
7055
|
-
border: 1px solid var(--radio-button-border);
|
|
7056
7326
|
inline-size: 16px;
|
|
7057
7327
|
block-size: 16px;
|
|
7058
|
-
|
|
7059
|
-
|
|
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;
|
|
7060
7332
|
}
|
|
7061
7333
|
.tl-radio-button__input {
|
|
7062
|
-
/*
|
|
7334
|
+
/* The inner dot, colour driven by the icon token. Hidden until selected. */
|
|
7063
7335
|
}
|
|
7064
|
-
.tl-radio-button__input
|
|
7065
|
-
|
|
7066
|
-
|
|
7067
|
-
|
|
7068
|
-
|
|
7069
|
-
|
|
7070
|
-
|
|
7071
|
-
.tl-radio-button__input {
|
|
7072
|
-
/* Checked */
|
|
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;
|
|
7073
7343
|
}
|
|
7074
|
-
.tl-radio-button__input:
|
|
7075
|
-
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);
|
|
7076
7348
|
}
|
|
7077
|
-
.tl-radio-button__input {
|
|
7078
|
-
|
|
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);
|
|
7079
7355
|
}
|
|
7080
|
-
.tl-radio-button__input:checked
|
|
7081
|
-
|
|
7356
|
+
.tl-radio-button__input:checked::before {
|
|
7357
|
+
border-color: var(--radio-button-border-selected);
|
|
7358
|
+
background-color: var(--radio-button-background-selected);
|
|
7082
7359
|
}
|
|
7083
|
-
.tl-radio-button__input {
|
|
7084
|
-
|
|
7360
|
+
.tl-radio-button__input:checked::after {
|
|
7361
|
+
background-color: var(--radio-button-icon-selected);
|
|
7362
|
+
opacity: 1;
|
|
7085
7363
|
}
|
|
7086
|
-
.tl-radio-
|
|
7087
|
-
|
|
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);
|
|
7088
7367
|
}
|
|
7089
|
-
.tl-radio-button__input {
|
|
7090
|
-
|
|
7368
|
+
.tl-radio-button__input:checked:not(:disabled):hover::after {
|
|
7369
|
+
background-color: var(--radio-button-icon-selected-hover);
|
|
7091
7370
|
}
|
|
7092
7371
|
.tl-radio-button__input:disabled {
|
|
7093
7372
|
cursor: not-allowed;
|
|
7094
|
-
|
|
7095
|
-
.tl-radio-button__input:disabled::before {
|
|
7096
|
-
outline: 1px solid var(--radio-button-border-disabled);
|
|
7097
|
-
outline-offset: -4px;
|
|
7098
|
-
}
|
|
7099
|
-
.tl-radio-button__input:disabled::after {
|
|
7100
|
-
background-color: var(--radio-button-background-disabled);
|
|
7101
|
-
border-color: var(--radio-button-background-disabled);
|
|
7102
|
-
outline: none;
|
|
7103
|
-
}
|
|
7104
|
-
.tl-radio-button__input:disabled:checked::before {
|
|
7105
|
-
border: 1px solid var(--radio-button-border-disabled);
|
|
7106
|
-
display: block;
|
|
7107
|
-
inline-size: 16px;
|
|
7108
|
-
block-size: 16px;
|
|
7109
|
-
left: 3px;
|
|
7110
|
-
top: 3px;
|
|
7111
|
-
box-sizing: content-box;
|
|
7112
|
-
}
|
|
7113
|
-
.tl-radio-button__input:disabled:checked::after {
|
|
7114
|
-
border: 4px solid var(--radio-button-background-disabled);
|
|
7115
|
-
background-color: var(--radio-button-checked-disabled);
|
|
7116
|
-
left: 4px;
|
|
7117
|
-
top: 4px;
|
|
7373
|
+
opacity: var(--radio-button-opacity-disabled);
|
|
7118
7374
|
}
|
|
7119
7375
|
|
|
7120
7376
|
/* LABEL — text only */
|
|
7121
7377
|
.tl-radio-button__label {
|
|
7122
7378
|
cursor: pointer;
|
|
7123
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);
|
|
7124
7384
|
}
|
|
7125
7385
|
.tl-radio-button:has(:disabled) .tl-radio-button__label {
|
|
7126
7386
|
cursor: not-allowed;
|
|
7127
|
-
color: var(--radio-button-label-disabled);
|
|
7128
7387
|
}
|
|
7129
7388
|
|
|
7130
|
-
/* Focus animation */
|
|
7131
|
-
@keyframes rb-focus {
|
|
7132
|
-
0% {
|
|
7133
|
-
transform: scale(0);
|
|
7134
|
-
opacity: 0;
|
|
7135
|
-
}
|
|
7136
|
-
100% {
|
|
7137
|
-
transform: scale(1);
|
|
7138
|
-
}
|
|
7139
|
-
}
|
|
7140
7389
|
/**
|
|
7141
7390
|
* Do not edit directly, this file was auto-generated.
|
|
7142
7391
|
*/
|
|
@@ -8580,6 +8829,10 @@ body {
|
|
|
8580
8829
|
.scania.tl-mode-light {
|
|
8581
8830
|
--component-table-cell: var(--color-background-layer-01);
|
|
8582
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);
|
|
8583
8836
|
--component-table-pagination-base: #e0e5eb;
|
|
8584
8837
|
--component-table-pagination-dropdown: var(--color-background-base);
|
|
8585
8838
|
--component-table-secondary-cell: var(--color-background-layer-02);
|
|
@@ -8591,6 +8844,10 @@ body {
|
|
|
8591
8844
|
.traton.tl-mode-light {
|
|
8592
8845
|
--component-table-cell: var(--color-background-layer-01);
|
|
8593
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);
|
|
8594
8851
|
--component-table-pagination-base: #d6d4c9;
|
|
8595
8852
|
--component-table-pagination-dropdown: var(--color-background-base);
|
|
8596
8853
|
--component-table-secondary-cell: var(--color-background-layer-02);
|
|
@@ -8603,6 +8860,10 @@ body {
|
|
|
8603
8860
|
.scania.tl-mode-dark {
|
|
8604
8861
|
--component-table-cell: var(--color-background-layer-01);
|
|
8605
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);
|
|
8606
8867
|
--component-table-pagination-base: #242c37;
|
|
8607
8868
|
--component-table-pagination-dropdown: var(--color-background-layer-01);
|
|
8608
8869
|
--component-table-secondary-cell: var(--color-background-layer-02);
|
|
@@ -8614,6 +8875,10 @@ body {
|
|
|
8614
8875
|
.traton.tl-mode-dark {
|
|
8615
8876
|
--component-table-cell: var(--color-background-layer-01);
|
|
8616
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);
|
|
8617
8882
|
--component-table-pagination-base: #004852;
|
|
8618
8883
|
--component-table-pagination-dropdown: var(--color-background-layer-01);
|
|
8619
8884
|
--component-table-secondary-cell: var(--color-background-layer-02);
|
|
@@ -9909,67 +10174,232 @@ body {
|
|
|
9909
10174
|
fill: var(--navigation-tabs-scroll-button-color);
|
|
9910
10175
|
}
|
|
9911
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
|
+
|
|
9912
10361
|
.tl-text-field {
|
|
9913
|
-
--text-field-background: var(--
|
|
9914
|
-
--text-field-text: var(--
|
|
9915
|
-
--text-field-placeholder: var(--
|
|
9916
|
-
--text-field-affix: var(--
|
|
9917
|
-
--text-field-
|
|
9918
|
-
--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);
|
|
9919
10369
|
--text-field-label-inside-left: 16px;
|
|
9920
10370
|
--text-field-affix-width-icon: 35px;
|
|
9921
10371
|
--text-field-affix-width-text: 8px;
|
|
9922
|
-
--text-field-
|
|
9923
|
-
--text-field-
|
|
9924
|
-
--text-field-error: var(--
|
|
9925
|
-
--text-field-affix-error: var(--
|
|
9926
|
-
--text-field-background-disabled: var(--
|
|
9927
|
-
--text-field-text-disabled: var(--color-
|
|
9928
|
-
--text-field-placeholder-disabled: var(--color-
|
|
9929
|
-
--text-field-label-disabled: var(--color-
|
|
9930
|
-
--text-field-affix-disabled: var(--color-
|
|
9931
|
-
--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);
|
|
9932
10393
|
}
|
|
9933
10394
|
.tl-text-field--primary {
|
|
9934
|
-
--text-field-background: var(--
|
|
9935
|
-
--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);
|
|
9936
10398
|
}
|
|
9937
10399
|
.tl-text-field--secondary {
|
|
9938
|
-
--text-field-background: var(--
|
|
9939
|
-
--text-field-background-disabled: var(--
|
|
9940
|
-
|
|
9941
|
-
|
|
9942
|
-
.tl-text-field,
|
|
9943
|
-
.scania .tl-text-field {
|
|
9944
|
-
--text-field-border-radius: 4px 4px 0 0;
|
|
9945
|
-
--text-field-box-shadow: 0 -1px 0 0 var(--color-foreground-border-soft);
|
|
9946
|
-
--text-field-box-shadow-hover: 0 -1px 0 0 var(--color-foreground-border-strong);
|
|
9947
|
-
--text-field-box-shadow-focus: 0 -2px 0 0 var(--color-foreground-border-accent-focus);
|
|
9948
|
-
--text-field-box-shadow-error: 0 -1px 0 0 var(--color-system-danger-default);
|
|
9949
|
-
--text-field-box-shadow-error-hover: 0 -1px 0 0 var(--color-system-danger-default);
|
|
9950
|
-
--text-field-box-shadow-error-focus: 0 -2px 0 0 var(--color-system-danger-default);
|
|
9951
|
-
--text-field-box-shadow-success: 0 -1px 0 0 var(--color-foreground-border-strong);
|
|
9952
|
-
--text-field-bar-focus: var(--color-foreground-border-accent-focus);
|
|
9953
|
-
--text-field-bar-error: var(--color-system-danger-default);
|
|
9954
|
-
--text-field-focus-outline: none;
|
|
9955
|
-
--text-field-focus-outline-error: none;
|
|
9956
|
-
--text-field-focus-outline-offset: 0;
|
|
9957
|
-
}
|
|
9958
|
-
|
|
9959
|
-
.traton .tl-text-field {
|
|
9960
|
-
--text-field-border-radius: 4px 4px 4px 4px;
|
|
9961
|
-
--text-field-box-shadow: 0 0 0 1px var(--color-foreground-border-soft);
|
|
9962
|
-
--text-field-box-shadow-hover: 0 0 0 1px var(--color-foreground-border-strong);
|
|
9963
|
-
--text-field-box-shadow-focus: 0 0 0 2px var(--color-foreground-border-accent-focus);
|
|
9964
|
-
--text-field-box-shadow-success: 0 0 0 1px var(--color-foreground-border-strong);
|
|
9965
|
-
--text-field-box-shadow-error: 0 0 0 1px var(--color-system-danger-default);
|
|
9966
|
-
--text-field-box-shadow-error-hover: 0 0 0 1px var(--color-system-danger-default);
|
|
9967
|
-
--text-field-box-shadow-error-focus: 0 0 0 2px var(--color-system-danger-default);
|
|
9968
|
-
--text-field-focus-outline: 2px solid var(--color-foreground-border-accent-focus);
|
|
9969
|
-
--text-field-focus-outline-error: 2px solid var(--color-system-danger-default);
|
|
9970
|
-
--text-field-focus-outline-offset: 0;
|
|
9971
|
-
--text-field-bar-focus: transparent;
|
|
9972
|
-
--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);
|
|
9973
10403
|
}
|
|
9974
10404
|
|
|
9975
10405
|
.tl-text-field {
|
|
@@ -9986,12 +10416,12 @@ body {
|
|
|
9986
10416
|
.tl-text-field:has(.tl-text-field__input:disabled) {
|
|
9987
10417
|
cursor: not-allowed;
|
|
9988
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
|
+
}
|
|
9989
10422
|
.tl-text-field .tl-icon {
|
|
9990
10423
|
background-color: var(--text-field-affix);
|
|
9991
10424
|
}
|
|
9992
|
-
:has(.tl-text-field__input:disabled) .tl-text-field .tl-icon {
|
|
9993
|
-
background-color: var(--text-field-affix-disabled);
|
|
9994
|
-
}
|
|
9995
10425
|
|
|
9996
10426
|
.tl-text-field__input-wrapper {
|
|
9997
10427
|
position: relative;
|
|
@@ -10020,8 +10450,11 @@ body {
|
|
|
10020
10450
|
width: 100%;
|
|
10021
10451
|
box-sizing: border-box;
|
|
10022
10452
|
margin: 0;
|
|
10023
|
-
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);
|
|
10024
10456
|
outline: none;
|
|
10457
|
+
transition: border-color 200ms ease;
|
|
10025
10458
|
}
|
|
10026
10459
|
.tl-text-field__input::placeholder {
|
|
10027
10460
|
color: var(--text-field-placeholder);
|
|
@@ -10046,42 +10479,46 @@ body {
|
|
|
10046
10479
|
color: var(--text-field-text);
|
|
10047
10480
|
flex: 1;
|
|
10048
10481
|
order: 2;
|
|
10049
|
-
box-shadow: inset var(--text-field-box-shadow);
|
|
10050
|
-
transition: box-shadow 0.2s;
|
|
10051
10482
|
}
|
|
10052
10483
|
.tl-text-field__input:focus {
|
|
10053
|
-
|
|
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;
|
|
10054
10488
|
}
|
|
10055
10489
|
.tl-text-field:hover .tl-text-field__input:not(:focus):not(:disabled) {
|
|
10056
|
-
|
|
10490
|
+
border-color: var(--text-field-border-color-hover);
|
|
10057
10491
|
}
|
|
10058
10492
|
.tl-text-field--error .tl-text-field__input {
|
|
10059
|
-
|
|
10493
|
+
border-color: var(--text-field-border-color-error);
|
|
10060
10494
|
}
|
|
10061
10495
|
.tl-text-field--error .tl-text-field__input:focus {
|
|
10062
|
-
|
|
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;
|
|
10063
10500
|
}
|
|
10064
10501
|
.tl-text-field--error:hover .tl-text-field__input:not(:focus):not(:disabled) {
|
|
10065
|
-
|
|
10502
|
+
border-color: var(--text-field-border-color-error);
|
|
10066
10503
|
}
|
|
10067
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) {
|
|
10068
|
-
|
|
10505
|
+
border-color: var(--text-field-border-color-success);
|
|
10069
10506
|
}
|
|
10070
10507
|
.tl-text-field__input:disabled {
|
|
10071
|
-
box-shadow: none;
|
|
10072
|
-
background-color: var(--text-field-background-disabled);
|
|
10073
|
-
color: var(--text-field-text-disabled);
|
|
10074
10508
|
cursor: not-allowed;
|
|
10075
10509
|
pointer-events: none;
|
|
10076
10510
|
}
|
|
10077
10511
|
:has(.tl-text-field__input[readonly]):not(:has(.tl-text-field__input:disabled)) .tl-text-field__input {
|
|
10078
|
-
|
|
10512
|
+
border-color: var(--text-field-border-color-readonly);
|
|
10079
10513
|
}
|
|
10080
10514
|
:has(.tl-text-field__input[readonly]):not(:has(.tl-text-field__input:disabled)) .tl-text-field__input:focus {
|
|
10081
|
-
|
|
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;
|
|
10082
10519
|
}
|
|
10083
10520
|
:has(.tl-text-field__input[readonly]):not(:has(.tl-text-field__input:disabled)):hover .tl-text-field__input:not(:focus) {
|
|
10084
|
-
|
|
10521
|
+
border-color: var(--text-field-border-color-hover);
|
|
10085
10522
|
}
|
|
10086
10523
|
:has(.tl-text-field__input[readonly]):not(:has(.tl-text-field__input:disabled)) .tl-text-field__input {
|
|
10087
10524
|
user-select: auto;
|
|
@@ -10214,7 +10651,7 @@ body {
|
|
|
10214
10651
|
position: relative;
|
|
10215
10652
|
}
|
|
10216
10653
|
:has(.tl-text-field__input:disabled) .tl-text-field__helper {
|
|
10217
|
-
color: var(--color-
|
|
10654
|
+
color: var(--color-text-disabled);
|
|
10218
10655
|
}
|
|
10219
10656
|
.tl-text-field--error .tl-text-field__helper {
|
|
10220
10657
|
padding-left: 24px;
|
|
@@ -10226,7 +10663,7 @@ body {
|
|
|
10226
10663
|
top: 0;
|
|
10227
10664
|
width: 16px;
|
|
10228
10665
|
height: 16px;
|
|
10229
|
-
background-color: var(--text-field-error);
|
|
10666
|
+
background-color: var(--text-field-error-icon);
|
|
10230
10667
|
mask-image: var(--icon-error-svg);
|
|
10231
10668
|
mask-size: contain;
|
|
10232
10669
|
mask-repeat: no-repeat;
|
|
@@ -10242,7 +10679,7 @@ body {
|
|
|
10242
10679
|
color: var(--text-field-error);
|
|
10243
10680
|
}
|
|
10244
10681
|
.tl-text-field--error:has(.tl-text-field__input:disabled) .tl-text-field__helper::before {
|
|
10245
|
-
background-color: var(--color-
|
|
10682
|
+
background-color: var(--color-text-disabled);
|
|
10246
10683
|
}
|
|
10247
10684
|
|
|
10248
10685
|
.tl-text-field__charcounter {
|
|
@@ -10256,7 +10693,7 @@ body {
|
|
|
10256
10693
|
color: var(--text-field-textcounter);
|
|
10257
10694
|
}
|
|
10258
10695
|
:has(.tl-text-field__input:disabled) .tl-text-field__charcounter {
|
|
10259
|
-
color: var(--color-
|
|
10696
|
+
color: var(--color-text-disabled);
|
|
10260
10697
|
}
|
|
10261
10698
|
.tl-text-field--error:not(:has(.tl-text-field__input[readonly])):not(:has(.tl-text-field__input:disabled)) .tl-text-field__charcounter {
|
|
10262
10699
|
color: var(--text-field-error);
|
|
@@ -10266,7 +10703,7 @@ body {
|
|
|
10266
10703
|
}
|
|
10267
10704
|
|
|
10268
10705
|
.tl-text-field__charcounter-divider {
|
|
10269
|
-
color: var(--color-
|
|
10706
|
+
color: var(--color-text-disabled);
|
|
10270
10707
|
}
|
|
10271
10708
|
|
|
10272
10709
|
.tl-text-field__prefix {
|
|
@@ -10316,6 +10753,10 @@ body {
|
|
|
10316
10753
|
align-items: center;
|
|
10317
10754
|
z-index: 1;
|
|
10318
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);
|
|
10319
10760
|
}
|
|
10320
10761
|
.tl-text-field__suffix--text, .tl-text-field__suffix--icon {
|
|
10321
10762
|
position: absolute;
|
|
@@ -10360,54 +10801,99 @@ body {
|
|
|
10360
10801
|
left: calc(16px + var(--text-field-affix-width-text) + 8px);
|
|
10361
10802
|
}
|
|
10362
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
|
+
|
|
10363
10858
|
.tl-textarea {
|
|
10364
|
-
--textarea-background-primary: var(--
|
|
10365
|
-
--textarea-background-secondary: var(--
|
|
10859
|
+
--textarea-background-primary: var(--component--input-background-primary);
|
|
10860
|
+
--textarea-background-secondary: var(--component--input-background-secondary);
|
|
10366
10861
|
--textarea-background: var(--textarea-background-primary);
|
|
10367
|
-
--textarea-text: var(--
|
|
10862
|
+
--textarea-text: var(--component--input-text-value-default);
|
|
10368
10863
|
--textarea-background-disabled: var(--textarea-background-primary);
|
|
10369
|
-
--textarea-text-disabled: var(--color-
|
|
10370
|
-
--textarea-placeholder-disabled: var(--color-
|
|
10371
|
-
--textarea-label-disabled: var(--color-
|
|
10372
|
-
--textarea-label: var(--
|
|
10373
|
-
--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);
|
|
10374
10869
|
--textarea-label-inside-left: 16px;
|
|
10375
|
-
--textarea-placeholder: var(--
|
|
10376
|
-
--textarea-helper: var(--
|
|
10377
|
-
--textarea-error: var(--
|
|
10378
|
-
--textarea-
|
|
10379
|
-
--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);
|
|
10380
10887
|
}
|
|
10381
10888
|
.tl-textarea--primary {
|
|
10382
10889
|
--textarea-background: var(--textarea-background-primary);
|
|
10383
10890
|
--textarea-background-disabled: var(--textarea-background-primary);
|
|
10891
|
+
--textarea-focus-ring-radius: var(--component-textarea-focus-ring-radius-primary);
|
|
10384
10892
|
}
|
|
10385
10893
|
.tl-textarea--secondary {
|
|
10386
10894
|
--textarea-background: var(--textarea-background-secondary);
|
|
10387
10895
|
--textarea-background-disabled: var(--textarea-background-secondary);
|
|
10388
|
-
|
|
10389
|
-
|
|
10390
|
-
.tl-textarea,
|
|
10391
|
-
.scania .tl-textarea {
|
|
10392
|
-
--textarea-border-radius: 4px 4px 0 0;
|
|
10393
|
-
--textarea-box-shadow: 0 -1px 0 0 var(--color-foreground-border-soft);
|
|
10394
|
-
--textarea-box-shadow-hover: 0 -1px 0 0 var(--color-foreground-border-strong);
|
|
10395
|
-
--textarea-box-shadow-focus: 0 -2px 0 0 var(--color-foreground-border-accent-focus);
|
|
10396
|
-
--textarea-box-shadow-error: 0 -1px 0 0 var(--color-system-danger-default);
|
|
10397
|
-
--textarea-box-shadow-error-hover: 0 -1px 0 0 var(--color-system-danger-default);
|
|
10398
|
-
--textarea-box-shadow-error-focus: 0 -2px 0 0 var(--color-system-danger-default);
|
|
10399
|
-
--textarea-box-shadow-success: 0 -1px 0 0 var(--color-foreground-border-strong);
|
|
10400
|
-
}
|
|
10401
|
-
|
|
10402
|
-
.traton .tl-textarea {
|
|
10403
|
-
--textarea-border-radius: 4px;
|
|
10404
|
-
--textarea-box-shadow: 0 0 0 1px var(--color-foreground-border-soft);
|
|
10405
|
-
--textarea-box-shadow-hover: 0 0 0 1px var(--color-foreground-border-strong);
|
|
10406
|
-
--textarea-box-shadow-focus: 0 0 0 2px var(--color-foreground-border-accent-focus);
|
|
10407
|
-
--textarea-box-shadow-error: 0 0 0 1px var(--color-system-danger-default);
|
|
10408
|
-
--textarea-box-shadow-error-hover: 0 0 0 1px var(--color-system-danger-default);
|
|
10409
|
-
--textarea-box-shadow-error-focus: 0 0 0 2px var(--color-system-danger-default);
|
|
10410
|
-
--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);
|
|
10411
10897
|
}
|
|
10412
10898
|
|
|
10413
10899
|
.tl-textarea {
|
|
@@ -10425,7 +10911,13 @@ body {
|
|
|
10425
10911
|
.tl-textarea:has(.tl-textarea__input:disabled) {
|
|
10426
10912
|
cursor: not-allowed;
|
|
10427
10913
|
}
|
|
10428
|
-
.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 {
|
|
10429
10921
|
content: "";
|
|
10430
10922
|
position: absolute;
|
|
10431
10923
|
top: 18px;
|
|
@@ -10437,22 +10929,22 @@ body {
|
|
|
10437
10929
|
mask-size: contain;
|
|
10438
10930
|
mask-repeat: no-repeat;
|
|
10439
10931
|
mask-position: center;
|
|
10440
|
-
z-index:
|
|
10932
|
+
z-index: 2;
|
|
10441
10933
|
}
|
|
10442
|
-
.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 {
|
|
10443
10935
|
top: 20px;
|
|
10444
10936
|
right: 16px;
|
|
10445
10937
|
}
|
|
10446
|
-
.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 {
|
|
10447
10939
|
top: 42px;
|
|
10448
10940
|
}
|
|
10449
|
-
.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 {
|
|
10450
10942
|
top: 44px;
|
|
10451
10943
|
}
|
|
10452
|
-
.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 {
|
|
10453
10945
|
top: 17px;
|
|
10454
10946
|
}
|
|
10455
|
-
.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 {
|
|
10456
10948
|
top: 19px;
|
|
10457
10949
|
}
|
|
10458
10950
|
.tl-textarea::after {
|
|
@@ -10460,15 +10952,15 @@ body {
|
|
|
10460
10952
|
position: absolute;
|
|
10461
10953
|
bottom: 3px;
|
|
10462
10954
|
right: 3px;
|
|
10463
|
-
width:
|
|
10464
|
-
height:
|
|
10955
|
+
width: calc(var(--component-textarea-size-resize-width) * 1px);
|
|
10956
|
+
height: calc(var(--component-textarea-size-resize-height) * 1px);
|
|
10465
10957
|
background-color: var(--textarea-resize-icon);
|
|
10466
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");
|
|
10467
10959
|
mask-size: contain;
|
|
10468
10960
|
mask-repeat: no-repeat;
|
|
10469
10961
|
mask-position: center;
|
|
10470
10962
|
pointer-events: none;
|
|
10471
|
-
z-index:
|
|
10963
|
+
z-index: 2;
|
|
10472
10964
|
}
|
|
10473
10965
|
.traton .tl-textarea::after {
|
|
10474
10966
|
bottom: 5px;
|
|
@@ -10486,9 +10978,6 @@ body {
|
|
|
10486
10978
|
.traton .tl-textarea:has(.tl-textarea__bottom)::after {
|
|
10487
10979
|
bottom: 27px;
|
|
10488
10980
|
}
|
|
10489
|
-
.tl-textarea :has(.tl-textarea__input:disabled)::after {
|
|
10490
|
-
background-color: var(--color-foreground-text-disabled);
|
|
10491
|
-
}
|
|
10492
10981
|
|
|
10493
10982
|
.tl-textarea__input {
|
|
10494
10983
|
all: unset;
|
|
@@ -10498,8 +10987,11 @@ body {
|
|
|
10498
10987
|
width: 100%;
|
|
10499
10988
|
box-sizing: border-box;
|
|
10500
10989
|
margin: 0;
|
|
10501
|
-
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);
|
|
10502
10993
|
outline: none;
|
|
10994
|
+
transition: border-color 200ms ease;
|
|
10503
10995
|
}
|
|
10504
10996
|
.tl-textarea__input::placeholder {
|
|
10505
10997
|
color: var(--textarea-placeholder);
|
|
@@ -10526,48 +11018,53 @@ body {
|
|
|
10526
11018
|
padding: var(--tds-spacing-element-20) var(--tds-spacing-element-16);
|
|
10527
11019
|
color: var(--textarea-text);
|
|
10528
11020
|
resize: vertical;
|
|
10529
|
-
box-shadow: inset var(--textarea-box-shadow);
|
|
10530
|
-
transition: box-shadow 0.2s;
|
|
10531
11021
|
z-index: 0;
|
|
10532
11022
|
}
|
|
10533
11023
|
.tl-textarea__input::placeholder {
|
|
10534
11024
|
transform: translateY(1px);
|
|
10535
11025
|
}
|
|
10536
11026
|
.tl-textarea__input:focus {
|
|
10537
|
-
|
|
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;
|
|
10538
11031
|
}
|
|
10539
11032
|
.tl-textarea__input::-webkit-resizer {
|
|
10540
11033
|
display: none;
|
|
10541
11034
|
}
|
|
10542
|
-
.tl-textarea:hover .tl-textarea__input:not(:focus
|
|
10543
|
-
|
|
11035
|
+
.tl-textarea:hover .tl-textarea__input:not(:focus, :disabled) {
|
|
11036
|
+
border-color: var(--textarea-border-color-hover);
|
|
10544
11037
|
}
|
|
10545
11038
|
.tl-textarea--error .tl-textarea__input {
|
|
10546
|
-
|
|
11039
|
+
border-color: var(--textarea-border-color-error);
|
|
10547
11040
|
}
|
|
10548
11041
|
.tl-textarea--error .tl-textarea__input:focus {
|
|
10549
|
-
|
|
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;
|
|
10550
11046
|
}
|
|
10551
|
-
.tl-textarea--error:hover .tl-textarea__input:not(:focus
|
|
10552
|
-
|
|
11047
|
+
.tl-textarea--error:hover .tl-textarea__input:not(:focus, :disabled) {
|
|
11048
|
+
border-color: var(--textarea-border-color-error);
|
|
10553
11049
|
}
|
|
10554
|
-
.tl-textarea--success:not(:has(.tl-textarea__input[readonly])
|
|
10555
|
-
|
|
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);
|
|
10556
11052
|
}
|
|
10557
11053
|
.tl-textarea__input:disabled {
|
|
10558
|
-
box-shadow: none;
|
|
10559
|
-
color: var(--textarea-text-disabled);
|
|
10560
11054
|
cursor: not-allowed;
|
|
10561
11055
|
pointer-events: none;
|
|
10562
11056
|
}
|
|
10563
11057
|
:has(.tl-textarea__input[readonly]):not(:has(.tl-textarea__input:disabled)) .tl-textarea__input {
|
|
10564
|
-
|
|
11058
|
+
border-color: var(--textarea-border-color-readonly);
|
|
10565
11059
|
}
|
|
10566
11060
|
:has(.tl-textarea__input[readonly]):not(:has(.tl-textarea__input:disabled)) .tl-textarea__input:focus {
|
|
10567
|
-
|
|
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;
|
|
10568
11065
|
}
|
|
10569
11066
|
:has(.tl-textarea__input[readonly]):not(:has(.tl-textarea__input:disabled)):hover .tl-textarea__input:not(:focus) {
|
|
10570
|
-
|
|
11067
|
+
border-color: var(--textarea-border-color-hover);
|
|
10571
11068
|
}
|
|
10572
11069
|
.tl-textarea--label-inside .tl-textarea__input {
|
|
10573
11070
|
padding-top: 26px;
|
|
@@ -10586,7 +11083,7 @@ body {
|
|
|
10586
11083
|
cursor: default;
|
|
10587
11084
|
pointer-events: none;
|
|
10588
11085
|
}
|
|
10589
|
-
: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 {
|
|
10590
11087
|
padding-right: 50px;
|
|
10591
11088
|
}
|
|
10592
11089
|
|
|
@@ -10616,7 +11113,7 @@ body {
|
|
|
10616
11113
|
transform: none;
|
|
10617
11114
|
transform-origin: top left;
|
|
10618
11115
|
transition: transform 0.15s, font-size 0.15s, color 0.15s, top 0.15s;
|
|
10619
|
-
z-index:
|
|
11116
|
+
z-index: 2;
|
|
10620
11117
|
}
|
|
10621
11118
|
.tl-textarea--label-inside:has(.tl-textarea__input:disabled) .tl-textarea__label {
|
|
10622
11119
|
font-family: var(--detail-07-font-family);
|
|
@@ -10650,7 +11147,7 @@ body {
|
|
|
10650
11147
|
position: relative;
|
|
10651
11148
|
}
|
|
10652
11149
|
:has(.tl-textarea__input:disabled) .tl-textarea__helper {
|
|
10653
|
-
color: var(--color-
|
|
11150
|
+
color: var(--color-text-disabled);
|
|
10654
11151
|
}
|
|
10655
11152
|
.tl-textarea--error .tl-textarea__helper {
|
|
10656
11153
|
padding-left: 24px;
|
|
@@ -10662,7 +11159,7 @@ body {
|
|
|
10662
11159
|
top: 0;
|
|
10663
11160
|
width: 16px;
|
|
10664
11161
|
height: 16px;
|
|
10665
|
-
background-color: var(--textarea-error);
|
|
11162
|
+
background-color: var(--textarea-error-icon);
|
|
10666
11163
|
mask-image: var(--icon-error-svg);
|
|
10667
11164
|
mask-size: contain;
|
|
10668
11165
|
mask-repeat: no-repeat;
|
|
@@ -10674,11 +11171,11 @@ body {
|
|
|
10674
11171
|
.tl-textarea--error:has(.tl-textarea__input[readonly]) .tl-textarea__helper::before {
|
|
10675
11172
|
display: none;
|
|
10676
11173
|
}
|
|
10677
|
-
.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 {
|
|
10678
11175
|
color: var(--textarea-error);
|
|
10679
11176
|
}
|
|
10680
11177
|
.tl-textarea--error:has(.tl-textarea__input:disabled) .tl-textarea__helper::before {
|
|
10681
|
-
background-color: var(--color-
|
|
11178
|
+
background-color: var(--color-text-disabled);
|
|
10682
11179
|
}
|
|
10683
11180
|
|
|
10684
11181
|
.tl-textarea__charcounter {
|
|
@@ -10692,17 +11189,17 @@ body {
|
|
|
10692
11189
|
color: var(--textarea-textcounter);
|
|
10693
11190
|
}
|
|
10694
11191
|
:has(.tl-textarea__input:disabled) .tl-textarea__charcounter {
|
|
10695
|
-
color: var(--color-
|
|
11192
|
+
color: var(--color-text-disabled);
|
|
10696
11193
|
}
|
|
10697
|
-
.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 {
|
|
10698
11195
|
color: var(--textarea-error);
|
|
10699
11196
|
}
|
|
10700
|
-
.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 {
|
|
10701
11198
|
color: var(--textarea-error);
|
|
10702
11199
|
}
|
|
10703
11200
|
|
|
10704
11201
|
.tl-textarea__charcounter-divider {
|
|
10705
|
-
color: var(--color-
|
|
11202
|
+
color: var(--color-text-disabled);
|
|
10706
11203
|
}
|
|
10707
11204
|
|
|
10708
11205
|
.tl-textarea--label-inside:has(.tl-textarea__input:focus) .tl-textarea__label,
|
|
@@ -10937,13 +11434,117 @@ body {
|
|
|
10937
11434
|
text-decoration: none;
|
|
10938
11435
|
}
|
|
10939
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
|
+
|
|
10940
11531
|
.tl-toggle {
|
|
10941
|
-
--toggle-
|
|
10942
|
-
--toggle-
|
|
10943
|
-
--toggle-
|
|
10944
|
-
--toggle-
|
|
10945
|
-
--toggle-
|
|
10946
|
-
--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);
|
|
10947
11548
|
}
|
|
10948
11549
|
|
|
10949
11550
|
.tl-toggle:has(input[type=checkbox]:disabled) {
|
|
@@ -10966,60 +11567,70 @@ body {
|
|
|
10966
11567
|
position: absolute;
|
|
10967
11568
|
box-sizing: border-box;
|
|
10968
11569
|
}
|
|
11570
|
+
.tl-toggle__input {
|
|
11571
|
+
/* Track */
|
|
11572
|
+
}
|
|
10969
11573
|
.tl-toggle__input::before {
|
|
10970
|
-
|
|
10971
|
-
|
|
10972
|
-
border:
|
|
10973
|
-
border-radius: 16px;
|
|
11574
|
+
background-color: var(--toggle-off);
|
|
11575
|
+
border: 1px solid transparent;
|
|
11576
|
+
border-radius: var(--toggle-border-radius);
|
|
10974
11577
|
left: 0;
|
|
10975
11578
|
height: 24px;
|
|
10976
11579
|
width: 44px;
|
|
10977
11580
|
}
|
|
10978
11581
|
.tl-toggle__input {
|
|
10979
|
-
/*
|
|
11582
|
+
/* Knob */
|
|
10980
11583
|
}
|
|
10981
11584
|
.tl-toggle__input::after {
|
|
10982
|
-
background-color: var(--toggle-
|
|
11585
|
+
background-color: var(--toggle-knob);
|
|
10983
11586
|
border-radius: 50%;
|
|
10984
11587
|
left: 4px;
|
|
10985
11588
|
top: 4px;
|
|
10986
11589
|
width: 16px;
|
|
10987
11590
|
height: 16px;
|
|
10988
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
|
+
}
|
|
10989
11604
|
.tl-toggle__input:focus-visible {
|
|
10990
11605
|
outline: 2px solid var(--component--focus-ring-color-strong);
|
|
10991
11606
|
box-shadow: 0 0 0 1px var(--component--focus-ring-color-discrete);
|
|
10992
11607
|
outline-offset: 1px;
|
|
10993
11608
|
z-index: 1;
|
|
10994
|
-
border-radius:
|
|
10995
|
-
}
|
|
10996
|
-
.tl-toggle__input:focus-visible::before {
|
|
10997
|
-
background-color: var(--toggle-disabled);
|
|
10998
|
-
}
|
|
10999
|
-
.tl-toggle__input:hover::before {
|
|
11000
|
-
background-color: var(--toggle-background-off);
|
|
11609
|
+
border-radius: var(--toggle-focus-ring-radius);
|
|
11001
11610
|
}
|
|
11002
11611
|
.tl-toggle__input:checked::before {
|
|
11003
|
-
background-color: var(--toggle-
|
|
11612
|
+
background-color: var(--toggle-on);
|
|
11004
11613
|
}
|
|
11005
11614
|
.tl-toggle__input:checked::after {
|
|
11615
|
+
background-color: var(--toggle-knob-on);
|
|
11006
11616
|
left: 24px;
|
|
11007
11617
|
}
|
|
11008
|
-
.tl-toggle__input:disabled {
|
|
11009
|
-
|
|
11010
|
-
cursor: not-allowed;
|
|
11618
|
+
.tl-toggle__input:checked:not(:disabled):hover::before {
|
|
11619
|
+
background-color: var(--toggle-on-hover);
|
|
11011
11620
|
}
|
|
11012
|
-
.tl-toggle__input:disabled::
|
|
11013
|
-
background-color: var(--toggle-
|
|
11621
|
+
.tl-toggle__input:checked:not(:disabled):hover::after {
|
|
11622
|
+
background-color: var(--toggle-knob-on-hover);
|
|
11014
11623
|
}
|
|
11015
|
-
.tl-toggle__input:disabled::
|
|
11016
|
-
background-color: var(--toggle-
|
|
11624
|
+
.tl-toggle__input:checked:not(:disabled):active::before {
|
|
11625
|
+
background-color: var(--toggle-on-active);
|
|
11017
11626
|
}
|
|
11018
|
-
.tl-toggle__input:disabled:
|
|
11019
|
-
background-color: var(--toggle-
|
|
11627
|
+
.tl-toggle__input:checked:not(:disabled):active::after {
|
|
11628
|
+
background-color: var(--toggle-knob-on-active);
|
|
11020
11629
|
}
|
|
11021
|
-
.tl-toggle__input:disabled
|
|
11022
|
-
|
|
11630
|
+
.tl-toggle__input:disabled {
|
|
11631
|
+
pointer-events: none;
|
|
11632
|
+
cursor: not-allowed;
|
|
11633
|
+
opacity: var(--toggle-opacity-disabled);
|
|
11023
11634
|
}
|
|
11024
11635
|
.tl-toggle__input--sm {
|
|
11025
11636
|
width: 28px;
|
|
@@ -11033,18 +11644,9 @@ body {
|
|
|
11033
11644
|
width: 8px;
|
|
11034
11645
|
height: 8px;
|
|
11035
11646
|
}
|
|
11036
|
-
.tl-toggle__input--sm:checked::before {
|
|
11037
|
-
background-color: var(--toggle-background-on);
|
|
11038
|
-
}
|
|
11039
11647
|
.tl-toggle__input--sm:checked::after {
|
|
11040
11648
|
left: 16px;
|
|
11041
11649
|
}
|
|
11042
|
-
.tl-toggle__input--sm:disabled::before {
|
|
11043
|
-
background-color: var(--toggle-disabled);
|
|
11044
|
-
}
|
|
11045
|
-
.tl-toggle__input--sm:disabled::after {
|
|
11046
|
-
background-color: var(--toggle-switch);
|
|
11047
|
-
}
|
|
11048
11650
|
|
|
11049
11651
|
.tl-toggle__headline {
|
|
11050
11652
|
font-family: var(--detail-02-font-family);
|
|
@@ -11057,7 +11659,7 @@ body {
|
|
|
11057
11659
|
margin-bottom: 12px;
|
|
11058
11660
|
}
|
|
11059
11661
|
.tl-toggle:has(input[type=checkbox]:disabled) .tl-toggle__headline {
|
|
11060
|
-
|
|
11662
|
+
opacity: var(--toggle-opacity-disabled);
|
|
11061
11663
|
user-select: none;
|
|
11062
11664
|
cursor: not-allowed;
|
|
11063
11665
|
}
|
|
@@ -11077,7 +11679,7 @@ body {
|
|
|
11077
11679
|
padding-left: 8px;
|
|
11078
11680
|
}
|
|
11079
11681
|
input[type=checkbox]:disabled ~ .tl-toggle__label {
|
|
11080
|
-
|
|
11682
|
+
opacity: var(--toggle-opacity-disabled);
|
|
11081
11683
|
pointer-events: none;
|
|
11082
11684
|
cursor: not-allowed;
|
|
11083
11685
|
}
|