lightning-base-components 1.28.7-alpha → 1.28.8-alpha
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/package.json +17 -8
- package/src/lightning/accordionSection/accordionSection.d.ts +1 -1
- package/src/lightning/accordionSection/accordionSection.d.ts.map +1 -1
- package/src/lightning/accordionSection/button.slds.css +28 -28
- package/src/lightning/avatar/avatar.d.ts +0 -1
- package/src/lightning/avatar/avatar.d.ts.map +1 -1
- package/src/lightning/baseCombobox/baseCombobox.d.ts.map +1 -1
- package/src/lightning/baseCombobox/baseCombobox.js +5 -0
- package/src/lightning/baseCombobox/baseComboboxEvents.d.ts.map +1 -1
- package/src/lightning/baseCombobox/baseComboboxEvents.js +6 -0
- package/src/lightning/baseCombobox/input-text.slds.css +44 -50
- package/src/lightning/button/button.slds.css +28 -28
- package/src/lightning/buttonIcon/button-icon.slds.css +28 -28
- package/src/lightning/buttonIconStateful/button-icon.slds.css +28 -28
- package/src/lightning/buttonIconStateful/button.slds.css +28 -28
- package/src/lightning/buttonMenu/button-icon.slds.css +28 -28
- package/src/lightning/buttonMenu/button.slds.css +28 -28
- package/src/lightning/buttonStateful/button.slds.css +28 -28
- package/src/lightning/carousel/button.slds.css +28 -28
- package/src/lightning/checkboxGroup/checkboxGroup.d.ts +1 -0
- package/src/lightning/checkboxGroup/checkboxGroup.d.ts.map +1 -1
- package/src/lightning/checkboxGroup/checkboxGroup.html +23 -2
- package/src/lightning/checkboxGroup/checkboxGroup.js +5 -1
- package/src/lightning/colorPickerCustom/input-text.slds.css +44 -50
- package/src/lightning/datatable/button-icon.slds.css +28 -28
- package/src/lightning/datatable/datatable.d.ts.map +1 -1
- package/src/lightning/datatable/datatable.js +3 -0
- package/src/lightning/datatable/icon.slds.css +11 -11
- package/src/lightning/datatable/input-checkbox.slds.css +20 -20
- package/src/lightning/datepicker/datepicker.d.ts +0 -1
- package/src/lightning/datepicker/datepicker.d.ts.map +1 -1
- package/src/lightning/datepicker/input-text.slds.css +44 -50
- package/src/lightning/datetimepicker/datetimepicker.d.ts.map +1 -1
- package/src/lightning/datetimepicker/datetimepicker.js +9 -0
- package/src/lightning/datetimepicker/input-text.slds.css +44 -50
- package/src/lightning/features/gates/imports.d.ts +1 -37
- package/src/lightning/features/gates/imports.js +4 -2
- package/src/lightning/formattedRichText/formattedRichText.d.ts +2 -0
- package/src/lightning/formattedRichText/formattedRichText.d.ts.map +1 -1
- package/src/lightning/formattedRichText/formattedRichText.html +13 -4
- package/src/lightning/formattedRichText/formattedRichText.js +15 -0
- package/src/lightning/groupedCombobox/groupedCombobox.d.ts +0 -1
- package/src/lightning/groupedCombobox/groupedCombobox.d.ts.map +1 -1
- package/src/lightning/groupedCombobox/input-text.slds.css +44 -50
- package/src/lightning/helptext/button-icon.slds.css +28 -28
- package/src/lightning/icon/icon.slds.css +11 -11
- package/src/lightning/input/input.d.ts.map +1 -1
- package/src/lightning/input/input.js +3 -0
- package/src/lightning/inputAddress/input-text.slds.css +44 -50
- package/src/lightning/inputLocation/input-text.slds.css +44 -50
- package/src/lightning/inputName/input-text.slds.css +44 -50
- package/src/lightning/inputName/inputName.d.ts.map +1 -1
- package/src/lightning/inputName/inputName.js +4 -0
- package/src/lightning/interactiveDialogBase/button.slds.css +28 -28
- package/src/lightning/layout/styleUtils.d.ts +0 -1
- package/src/lightning/layout/styleUtils.d.ts.map +1 -1
- package/src/lightning/layoutItem/styleUtils.d.ts +0 -1
- package/src/lightning/layoutItem/styleUtils.d.ts.map +1 -1
- package/src/lightning/modalBase/modalBase.d.ts +0 -1
- package/src/lightning/modalBase/modalBase.d.ts.map +1 -1
- package/src/lightning/multiColumnSortingModal/multiColumnSortingModal.d.ts +1 -4
- package/src/lightning/multiColumnSortingModal/multiColumnSortingModal.d.ts.map +1 -1
- package/src/lightning/pillContainer/button.slds.css +28 -28
- package/src/lightning/positionLibrary/__examples__/playground/playground.d.ts +0 -1
- package/src/lightning/positionLibrary/__examples__/playground/playground.d.ts.map +1 -1
- package/src/lightning/positionLibrary/elementProxy.d.ts +2 -1
- package/src/lightning/positionLibrary/elementProxy.d.ts.map +1 -1
- package/src/lightning/positionLibrary/elementProxy.js +32 -3
- package/src/lightning/primitiveCellCheckbox/input-checkbox.slds.css +20 -20
- package/src/lightning/primitiveCellFactory/button-icon.slds.css +28 -28
- package/src/lightning/primitiveCoordinateItem/button.slds.css +28 -28
- package/src/lightning/primitiveDatatableStatusBar/button.slds.css +28 -28
- package/src/lightning/primitiveDatatableTooltip/button-icon.slds.css +28 -28
- package/src/lightning/primitiveDatatableTooltip/button.slds.css +28 -28
- package/src/lightning/primitiveFigure/primitiveFigure.css +64 -0
- package/src/lightning/primitiveFigure/primitiveFigure.d.ts +33 -0
- package/src/lightning/primitiveFigure/primitiveFigure.d.ts.map +1 -0
- package/src/lightning/primitiveFigure/primitiveFigure.html +5 -0
- package/src/lightning/primitiveFigure/primitiveFigure.js +155 -0
- package/src/lightning/primitiveFigure/primitiveFigure.js-meta.xml +4 -0
- package/src/lightning/primitiveHeaderFactory/input-checkbox.slds.css +20 -20
- package/src/lightning/primitiveIcon/icon.slds.css +11 -11
- package/src/lightning/primitiveInputCheckbox/input-checkbox.slds.css +20 -20
- package/src/lightning/primitiveInputCheckbox/primitiveInputCheckbox.d.ts.map +1 -1
- package/src/lightning/primitiveInputCheckbox/primitiveInputCheckbox.js +1 -11
- package/src/lightning/primitiveInputCheckboxButton/primitiveInputCheckboxButton.d.ts.map +1 -1
- package/src/lightning/primitiveInputCheckboxButton/primitiveInputCheckboxButton.js +12 -0
- package/src/lightning/primitiveInputColor/input-text.slds.css +44 -50
- package/src/lightning/primitiveInputColor/primitiveInputColor.d.ts +0 -1
- package/src/lightning/primitiveInputColor/primitiveInputColor.d.ts.map +1 -1
- package/src/lightning/primitiveInputColor/primitiveInputColor.js +12 -0
- package/src/lightning/primitiveInputFile/button.slds.css +28 -28
- package/src/lightning/primitiveInputSimple/input-text.slds.css +44 -50
- package/src/lightning/primitiveInputSimple/primitiveInputSimple.d.ts.map +1 -1
- package/src/lightning/primitiveInputSimple/primitiveInputSimple.js +8 -0
- package/src/lightning/primitiveInputToggle/primitiveInputToggle.d.ts.map +1 -1
- package/src/lightning/primitiveInputToggle/primitiveInputToggle.js +12 -0
- package/src/lightning/primitiveTreegridCellToggle/button-icon.slds.css +28 -28
- package/src/lightning/progressIndicator/progressIndicator.d.ts +0 -1
- package/src/lightning/progressIndicator/progressIndicator.d.ts.map +1 -1
- package/src/lightning/progressStep/progressStep.d.ts +0 -1
- package/src/lightning/progressStep/progressStep.d.ts.map +1 -1
- package/src/lightning/prompt/input-text.slds.css +44 -50
- package/src/lightning/toast/button-icon.slds.css +28 -28
- package/src/lightning/toast/icon.slds.css +11 -11
- package/src/lightning/toast/toast.d.ts +0 -1
- package/src/lightning/toast/toast.d.ts.map +1 -1
- package/src/lightning/toastContainer/toastContainer.d.ts +0 -1
- package/src/lightning/toastContainer/toastContainer.d.ts.map +1 -1
- package/src/lightning/tree/treeData.d.ts.map +1 -1
- package/src/lightning/tree/treeData.js +18 -0
- package/src/lightning/utilsPrivate/normalize.d.ts +1 -1
- package/src/lightning/utilsPrivate/normalize.d.ts.map +1 -1
- package/src/lightning/verticalNavigationOverflow/button.slds.css +28 -28
|
@@ -9,63 +9,57 @@
|
|
|
9
9
|
:host([data-render-mode="shadow"]) [part~='input-container'] {
|
|
10
10
|
display: flex;
|
|
11
11
|
align-items: center;
|
|
12
|
-
gap: var(--sds-c-inputtext-spacing-gap, var(--
|
|
13
|
-
min-height: var(--sds-c-inputtext-sizing-height, var(--
|
|
12
|
+
gap: var(--sds-c-inputtext-spacing-gap, var(--slds-s-input-spacing-gap));
|
|
13
|
+
min-height: var(--sds-c-inputtext-sizing-height, var(--slds-s-input-sizing-height));
|
|
14
14
|
padding-inline-start: var(
|
|
15
15
|
--sds-c-inputtext-spacing-inlinestart,
|
|
16
|
-
var(--sds-c-inputtext-spacing-inline, var(--
|
|
16
|
+
var(--sds-c-inputtext-spacing-inline, var(--slds-s-input-spacing))
|
|
17
17
|
);
|
|
18
18
|
padding-inline-end: var(
|
|
19
19
|
--sds-c-inputtext-spacing-inlineend,
|
|
20
|
-
var(--sds-c-inputtext-spacing-inline, var(--
|
|
20
|
+
var(--sds-c-inputtext-spacing-inline, var(--slds-s-input-spacing))
|
|
21
21
|
);
|
|
22
22
|
padding-block-start: var(
|
|
23
23
|
--sds-c-inputtext-spacing-blockstart,
|
|
24
|
-
var(--sds-c-inputtext-spacing-block, var(--
|
|
24
|
+
var(--sds-c-inputtext-spacing-block, var(--slds-s-input-spacing))
|
|
25
25
|
);
|
|
26
26
|
padding-block-end: var(
|
|
27
27
|
--sds-c-inputtext-spacing-blockend,
|
|
28
|
-
var(--sds-c-inputtext-spacing-block, var(--
|
|
28
|
+
var(--sds-c-inputtext-spacing-block, var(--slds-s-input-spacing))
|
|
29
29
|
);
|
|
30
|
-
background: var(--sds-c-inputtext-color-background, var(--
|
|
30
|
+
background: var(--sds-c-inputtext-color-background, var(--slds-s-input-color-background));
|
|
31
31
|
border-block-start: var(
|
|
32
32
|
--sds-c-inputtext-sizing-border-blockstart,
|
|
33
|
-
var(--sds-c-inputtext-sizing-border,
|
|
33
|
+
var(--sds-c-inputtext-sizing-border, 1px)
|
|
34
34
|
)
|
|
35
35
|
solid
|
|
36
36
|
var(
|
|
37
37
|
--sds-c-inputtext-color-border-blockstart,
|
|
38
|
-
var(--sds-c-inputtext-color-border, var(--
|
|
38
|
+
var(--sds-c-inputtext-color-border, var(--slds-s-input-color-border, currentColor))
|
|
39
39
|
);
|
|
40
40
|
border-inline-start: var(
|
|
41
41
|
--sds-c-inputtext-sizing-border-inlinestart,
|
|
42
|
-
var(--sds-c-inputtext-sizing-border,
|
|
42
|
+
var(--sds-c-inputtext-sizing-border, 1px)
|
|
43
43
|
)
|
|
44
44
|
solid
|
|
45
45
|
var(
|
|
46
46
|
--sds-c-inputtext-color-border-inlinestart,
|
|
47
|
-
var(--sds-c-inputtext-color-border, var(--
|
|
47
|
+
var(--sds-c-inputtext-color-border, var(--slds-s-input-color-border, currentColor))
|
|
48
48
|
);
|
|
49
|
-
border-inline-end: var(
|
|
50
|
-
--sds-c-inputtext-sizing-border-inlineend,
|
|
51
|
-
var(--sds-c-inputtext-sizing-border, var(--sds-g-sizing-border-1))
|
|
52
|
-
)
|
|
49
|
+
border-inline-end: var(--sds-c-inputtext-sizing-border-inlineend, var(--sds-c-inputtext-sizing-border, 1px))
|
|
53
50
|
solid
|
|
54
51
|
var(
|
|
55
52
|
--sds-c-inputtext-color-border-inlineend,
|
|
56
|
-
var(--sds-c-inputtext-color-border, var(--
|
|
53
|
+
var(--sds-c-inputtext-color-border, var(--slds-s-input-color-border, currentColor))
|
|
57
54
|
);
|
|
58
|
-
border-block-end: var(
|
|
59
|
-
--sds-c-inputtext-sizing-border-blockend,
|
|
60
|
-
var(--sds-c-inputtext-sizing-border, var(--sds-g-sizing-border-1))
|
|
61
|
-
)
|
|
55
|
+
border-block-end: var(--sds-c-inputtext-sizing-border-blockend, var(--sds-c-inputtext-sizing-border, 1px))
|
|
62
56
|
solid
|
|
63
57
|
var(
|
|
64
58
|
--sds-c-inputtext-color-border-blockend,
|
|
65
|
-
var(--sds-c-inputtext-color-border, var(--
|
|
59
|
+
var(--sds-c-inputtext-color-border, var(--slds-s-input-color-border, currentColor))
|
|
66
60
|
);
|
|
67
|
-
border-radius: var(--sds-c-inputtext-radius-border, var(--
|
|
68
|
-
box-shadow: var(--sds-c-inputtext-shadow, var(--
|
|
61
|
+
border-radius: var(--sds-c-inputtext-radius-border, var(--slds-s-input-radius-border));
|
|
62
|
+
box-shadow: var(--sds-c-inputtext-shadow, var(--slds-s-input-shadow));
|
|
69
63
|
}
|
|
70
64
|
/**
|
|
71
65
|
* Input Control
|
|
@@ -77,8 +71,8 @@
|
|
|
77
71
|
width: 100%;
|
|
78
72
|
height: 100%;
|
|
79
73
|
padding: 0;
|
|
80
|
-
font-size: var(--sds-c-inputtext-font-size, var(--
|
|
81
|
-
color: var(--sds-c-inputtext-text-color, var(--
|
|
74
|
+
font-size: var(--sds-c-inputtext-font-size, var(--slds-s-input-font-size));
|
|
75
|
+
color: var(--sds-c-inputtext-text-color, var(--slds-s-input-text-color));
|
|
82
76
|
line-height: 1;
|
|
83
77
|
border: none;
|
|
84
78
|
background: transparent;
|
|
@@ -92,20 +86,20 @@
|
|
|
92
86
|
:host([data-render-mode="shadow"][active]) [part~='input-container'] {
|
|
93
87
|
--sds-c-inputtext-color-background: var(
|
|
94
88
|
--sds-c-inputtext-color-background-active,
|
|
95
|
-
var(--
|
|
89
|
+
var(--slds-s-input-color-background-active)
|
|
96
90
|
);
|
|
97
91
|
--sds-c-inputtext-color-border: var(
|
|
98
92
|
--sds-c-inputtext-color-border-active,
|
|
99
|
-
var(--
|
|
93
|
+
var(--slds-s-input-color-border-active)
|
|
100
94
|
);
|
|
101
|
-
--sds-c-inputtext-shadow: var(--sds-c-inputtext-shadow-active, var(--
|
|
95
|
+
--sds-c-inputtext-shadow: var(--sds-c-inputtext-shadow-active, var(--slds-s-input-shadow-active));
|
|
102
96
|
}
|
|
103
97
|
/**
|
|
104
98
|
* Placeholder text
|
|
105
99
|
*/
|
|
106
100
|
:host([data-render-mode="shadow"]) [part~='input']::placeholder {
|
|
107
|
-
color: var(--sds-c-inputtext-text-color-placeholder, var(--
|
|
108
|
-
font-style: var(--sds-c-inputtext-font-style-placeholder, var(--
|
|
101
|
+
color: var(--sds-c-inputtext-text-color-placeholder, var(--slds-s-input-text-color-placeholder));
|
|
102
|
+
font-style: var(--sds-c-inputtext-font-style-placeholder, var(--slds-s-input-font-style-placeholder));
|
|
109
103
|
}
|
|
110
104
|
/**
|
|
111
105
|
* Input container when it receives focus-within
|
|
@@ -115,16 +109,16 @@
|
|
|
115
109
|
:host([data-render-mode="shadow"]) [part~='input-container']:focus-within {
|
|
116
110
|
--sds-c-inputtext-color-border: var(
|
|
117
111
|
--sds-c-inputtext-color-border-focus,
|
|
118
|
-
var(--
|
|
112
|
+
var(--slds-s-input-color-border-focus, revert)
|
|
119
113
|
);
|
|
120
|
-
--sds-c-inputtext-shadow: var(--sds-c-inputtext-shadow-focus, var(--
|
|
114
|
+
--sds-c-inputtext-shadow: var(--sds-c-inputtext-shadow-focus, var(--slds-s-input-shadow-focus));
|
|
121
115
|
--sds-c-inputtext-color-background: var(
|
|
122
116
|
--sds-c-inputtext-color-background-focus,
|
|
123
|
-
var(--
|
|
117
|
+
var(--slds-s-input-color-background-focus, revert)
|
|
124
118
|
);
|
|
125
119
|
--sds-c-inputtext-text-color: var(
|
|
126
120
|
--sds-c-inputtext-text-color-focus,
|
|
127
|
-
var(--
|
|
121
|
+
var(--slds-s-input-text-color-focus, revert)
|
|
128
122
|
);
|
|
129
123
|
}
|
|
130
124
|
/**
|
|
@@ -143,28 +137,28 @@
|
|
|
143
137
|
align-items: center;
|
|
144
138
|
|
|
145
139
|
/* Need to tweak stylelint to merge new shared groups into existing set, label is not available */
|
|
146
|
-
gap: var(--sds-c-inputtext-label-spacing-gap, var(--
|
|
140
|
+
gap: var(--sds-c-inputtext-label-spacing-gap, var(--slds-s-label-spacing-gap));
|
|
147
141
|
padding-inline-start: var(
|
|
148
142
|
--sds-c-inputtext-label-spacing-inlinestart,
|
|
149
|
-
var(--sds-c-inputtext-label-spacing-inline, var(--
|
|
143
|
+
var(--sds-c-inputtext-label-spacing-inline, var(--slds-s-label-spacing))
|
|
150
144
|
);
|
|
151
145
|
padding-inline-end: var(
|
|
152
146
|
--sds-c-inputtext-label-spacing-inlineend,
|
|
153
|
-
var(--sds-c-inputtext-label-spacing-inline, var(--
|
|
147
|
+
var(--sds-c-inputtext-label-spacing-inline, var(--slds-s-label-spacing))
|
|
154
148
|
);
|
|
155
149
|
padding-block-start: var(
|
|
156
150
|
--sds-c-inputtext-label-spacing-blockstart,
|
|
157
|
-
var(--sds-c-inputtext-label-spacing-block, var(--
|
|
151
|
+
var(--sds-c-inputtext-label-spacing-block, var(--slds-s-label-spacing))
|
|
158
152
|
);
|
|
159
153
|
padding-block-end: var(
|
|
160
154
|
--sds-c-inputtext-label-spacing-blockend,
|
|
161
|
-
var(--sds-c-inputtext-label-spacing-block, var(--
|
|
155
|
+
var(--sds-c-inputtext-label-spacing-block, var(--slds-s-label-spacing))
|
|
162
156
|
);
|
|
163
|
-
color: var(--sds-c-inputtext-label-color, var(--
|
|
157
|
+
color: var(--sds-c-inputtext-label-color, var(--slds-s-label-color));
|
|
164
158
|
}
|
|
165
159
|
:host([data-render-mode="shadow"]) [part='label'] {
|
|
166
|
-
font-size: var(--sds-c-inputtext-label-font-size, var(--
|
|
167
|
-
font-weight: var(--sds-c-inputtext-label-font-weight, var(--
|
|
160
|
+
font-size: var(--sds-c-inputtext-label-font-size, var(--slds-s-label-font-size));
|
|
161
|
+
font-weight: var(--sds-c-inputtext-label-font-weight, var(--slds-s-label-font-weight));
|
|
168
162
|
}
|
|
169
163
|
/**
|
|
170
164
|
* Help text
|
|
@@ -174,23 +168,23 @@
|
|
|
174
168
|
*/
|
|
175
169
|
:host([data-render-mode="shadow"]) [part='help-text visible'] {
|
|
176
170
|
/* Need to tweak stylelint to merge new shared groups into existing set, helptext is not available */
|
|
177
|
-
font-size: var(--sds-c-inputtext-helptext-font-size, var(--
|
|
178
|
-
color: var(--sds-c-inputtext-helptext-text-color, var(--
|
|
171
|
+
font-size: var(--sds-c-inputtext-helptext-font-size, var(--slds-s-helptext-font-size));
|
|
172
|
+
color: var(--sds-c-inputtext-helptext-text-color, var(--slds-s-helptext-text-color));
|
|
179
173
|
padding-inline-start: var(
|
|
180
174
|
--sds-c-inputtext-helptext-spacing-inlinestart,
|
|
181
|
-
var(--sds-c-inputtext-helptext-spacing-inline, var(--
|
|
175
|
+
var(--sds-c-inputtext-helptext-spacing-inline, var(--slds-s-helptext-spacing))
|
|
182
176
|
);
|
|
183
177
|
padding-inline-end: var(
|
|
184
178
|
--sds-c-inputtext-helptext-spacing-inlineend,
|
|
185
|
-
var(--sds-c-inputtext-helptext-spacing-inline, var(--
|
|
179
|
+
var(--sds-c-inputtext-helptext-spacing-inline, var(--slds-s-helptext-spacing))
|
|
186
180
|
);
|
|
187
181
|
padding-block-start: var(
|
|
188
182
|
--sds-c-inputtext-helptext-spacing-blockstart,
|
|
189
|
-
var(--sds-c-inputtext-helptext-spacing-block, var(--
|
|
183
|
+
var(--sds-c-inputtext-helptext-spacing-block, var(--slds-s-helptext-spacing))
|
|
190
184
|
);
|
|
191
185
|
padding-block-end: var(
|
|
192
186
|
--sds-c-inputtext-helptext-spacing-blockend,
|
|
193
|
-
var(--sds-c-inputtext-helptext-spacing-block, var(--
|
|
187
|
+
var(--sds-c-inputtext-helptext-spacing-block, var(--slds-s-helptext-spacing))
|
|
194
188
|
);
|
|
195
189
|
}
|
|
196
190
|
/**
|
|
@@ -199,11 +193,11 @@
|
|
|
199
193
|
:host([data-render-mode="shadow"][disabled]) {
|
|
200
194
|
--sds-c-inputtext-color-background: var(
|
|
201
195
|
--sds-c-inputtext-color-background-disabled,
|
|
202
|
-
var(--
|
|
196
|
+
var(--slds-s-input-color-background-disabled)
|
|
203
197
|
);
|
|
204
198
|
--sds-c-inputtext-color-border: var(
|
|
205
199
|
--sds-c-inputtext-color-border-disabled,
|
|
206
|
-
var(--
|
|
200
|
+
var(--slds-s-input-color-border-disabled)
|
|
207
201
|
);
|
|
208
202
|
}
|
|
209
203
|
/**
|
|
@@ -9,63 +9,57 @@
|
|
|
9
9
|
:host([data-render-mode="shadow"]) [part~='input-container'] {
|
|
10
10
|
display: flex;
|
|
11
11
|
align-items: center;
|
|
12
|
-
gap: var(--sds-c-inputtext-spacing-gap, var(--
|
|
13
|
-
min-height: var(--sds-c-inputtext-sizing-height, var(--
|
|
12
|
+
gap: var(--sds-c-inputtext-spacing-gap, var(--slds-s-input-spacing-gap));
|
|
13
|
+
min-height: var(--sds-c-inputtext-sizing-height, var(--slds-s-input-sizing-height));
|
|
14
14
|
padding-inline-start: var(
|
|
15
15
|
--sds-c-inputtext-spacing-inlinestart,
|
|
16
|
-
var(--sds-c-inputtext-spacing-inline, var(--
|
|
16
|
+
var(--sds-c-inputtext-spacing-inline, var(--slds-s-input-spacing))
|
|
17
17
|
);
|
|
18
18
|
padding-inline-end: var(
|
|
19
19
|
--sds-c-inputtext-spacing-inlineend,
|
|
20
|
-
var(--sds-c-inputtext-spacing-inline, var(--
|
|
20
|
+
var(--sds-c-inputtext-spacing-inline, var(--slds-s-input-spacing))
|
|
21
21
|
);
|
|
22
22
|
padding-block-start: var(
|
|
23
23
|
--sds-c-inputtext-spacing-blockstart,
|
|
24
|
-
var(--sds-c-inputtext-spacing-block, var(--
|
|
24
|
+
var(--sds-c-inputtext-spacing-block, var(--slds-s-input-spacing))
|
|
25
25
|
);
|
|
26
26
|
padding-block-end: var(
|
|
27
27
|
--sds-c-inputtext-spacing-blockend,
|
|
28
|
-
var(--sds-c-inputtext-spacing-block, var(--
|
|
28
|
+
var(--sds-c-inputtext-spacing-block, var(--slds-s-input-spacing))
|
|
29
29
|
);
|
|
30
|
-
background: var(--sds-c-inputtext-color-background, var(--
|
|
30
|
+
background: var(--sds-c-inputtext-color-background, var(--slds-s-input-color-background));
|
|
31
31
|
border-block-start: var(
|
|
32
32
|
--sds-c-inputtext-sizing-border-blockstart,
|
|
33
|
-
var(--sds-c-inputtext-sizing-border,
|
|
33
|
+
var(--sds-c-inputtext-sizing-border, 1px)
|
|
34
34
|
)
|
|
35
35
|
solid
|
|
36
36
|
var(
|
|
37
37
|
--sds-c-inputtext-color-border-blockstart,
|
|
38
|
-
var(--sds-c-inputtext-color-border, var(--
|
|
38
|
+
var(--sds-c-inputtext-color-border, var(--slds-s-input-color-border, currentColor))
|
|
39
39
|
);
|
|
40
40
|
border-inline-start: var(
|
|
41
41
|
--sds-c-inputtext-sizing-border-inlinestart,
|
|
42
|
-
var(--sds-c-inputtext-sizing-border,
|
|
42
|
+
var(--sds-c-inputtext-sizing-border, 1px)
|
|
43
43
|
)
|
|
44
44
|
solid
|
|
45
45
|
var(
|
|
46
46
|
--sds-c-inputtext-color-border-inlinestart,
|
|
47
|
-
var(--sds-c-inputtext-color-border, var(--
|
|
47
|
+
var(--sds-c-inputtext-color-border, var(--slds-s-input-color-border, currentColor))
|
|
48
48
|
);
|
|
49
|
-
border-inline-end: var(
|
|
50
|
-
--sds-c-inputtext-sizing-border-inlineend,
|
|
51
|
-
var(--sds-c-inputtext-sizing-border, var(--sds-g-sizing-border-1))
|
|
52
|
-
)
|
|
49
|
+
border-inline-end: var(--sds-c-inputtext-sizing-border-inlineend, var(--sds-c-inputtext-sizing-border, 1px))
|
|
53
50
|
solid
|
|
54
51
|
var(
|
|
55
52
|
--sds-c-inputtext-color-border-inlineend,
|
|
56
|
-
var(--sds-c-inputtext-color-border, var(--
|
|
53
|
+
var(--sds-c-inputtext-color-border, var(--slds-s-input-color-border, currentColor))
|
|
57
54
|
);
|
|
58
|
-
border-block-end: var(
|
|
59
|
-
--sds-c-inputtext-sizing-border-blockend,
|
|
60
|
-
var(--sds-c-inputtext-sizing-border, var(--sds-g-sizing-border-1))
|
|
61
|
-
)
|
|
55
|
+
border-block-end: var(--sds-c-inputtext-sizing-border-blockend, var(--sds-c-inputtext-sizing-border, 1px))
|
|
62
56
|
solid
|
|
63
57
|
var(
|
|
64
58
|
--sds-c-inputtext-color-border-blockend,
|
|
65
|
-
var(--sds-c-inputtext-color-border, var(--
|
|
59
|
+
var(--sds-c-inputtext-color-border, var(--slds-s-input-color-border, currentColor))
|
|
66
60
|
);
|
|
67
|
-
border-radius: var(--sds-c-inputtext-radius-border, var(--
|
|
68
|
-
box-shadow: var(--sds-c-inputtext-shadow, var(--
|
|
61
|
+
border-radius: var(--sds-c-inputtext-radius-border, var(--slds-s-input-radius-border));
|
|
62
|
+
box-shadow: var(--sds-c-inputtext-shadow, var(--slds-s-input-shadow));
|
|
69
63
|
}
|
|
70
64
|
/**
|
|
71
65
|
* Input Control
|
|
@@ -77,8 +71,8 @@
|
|
|
77
71
|
width: 100%;
|
|
78
72
|
height: 100%;
|
|
79
73
|
padding: 0;
|
|
80
|
-
font-size: var(--sds-c-inputtext-font-size, var(--
|
|
81
|
-
color: var(--sds-c-inputtext-text-color, var(--
|
|
74
|
+
font-size: var(--sds-c-inputtext-font-size, var(--slds-s-input-font-size));
|
|
75
|
+
color: var(--sds-c-inputtext-text-color, var(--slds-s-input-text-color));
|
|
82
76
|
line-height: 1;
|
|
83
77
|
border: none;
|
|
84
78
|
background: transparent;
|
|
@@ -92,20 +86,20 @@
|
|
|
92
86
|
:host([data-render-mode="shadow"][active]) [part~='input-container'] {
|
|
93
87
|
--sds-c-inputtext-color-background: var(
|
|
94
88
|
--sds-c-inputtext-color-background-active,
|
|
95
|
-
var(--
|
|
89
|
+
var(--slds-s-input-color-background-active)
|
|
96
90
|
);
|
|
97
91
|
--sds-c-inputtext-color-border: var(
|
|
98
92
|
--sds-c-inputtext-color-border-active,
|
|
99
|
-
var(--
|
|
93
|
+
var(--slds-s-input-color-border-active)
|
|
100
94
|
);
|
|
101
|
-
--sds-c-inputtext-shadow: var(--sds-c-inputtext-shadow-active, var(--
|
|
95
|
+
--sds-c-inputtext-shadow: var(--sds-c-inputtext-shadow-active, var(--slds-s-input-shadow-active));
|
|
102
96
|
}
|
|
103
97
|
/**
|
|
104
98
|
* Placeholder text
|
|
105
99
|
*/
|
|
106
100
|
:host([data-render-mode="shadow"]) [part~='input']::placeholder {
|
|
107
|
-
color: var(--sds-c-inputtext-text-color-placeholder, var(--
|
|
108
|
-
font-style: var(--sds-c-inputtext-font-style-placeholder, var(--
|
|
101
|
+
color: var(--sds-c-inputtext-text-color-placeholder, var(--slds-s-input-text-color-placeholder));
|
|
102
|
+
font-style: var(--sds-c-inputtext-font-style-placeholder, var(--slds-s-input-font-style-placeholder));
|
|
109
103
|
}
|
|
110
104
|
/**
|
|
111
105
|
* Input container when it receives focus-within
|
|
@@ -115,16 +109,16 @@
|
|
|
115
109
|
:host([data-render-mode="shadow"]) [part~='input-container']:focus-within {
|
|
116
110
|
--sds-c-inputtext-color-border: var(
|
|
117
111
|
--sds-c-inputtext-color-border-focus,
|
|
118
|
-
var(--
|
|
112
|
+
var(--slds-s-input-color-border-focus, revert)
|
|
119
113
|
);
|
|
120
|
-
--sds-c-inputtext-shadow: var(--sds-c-inputtext-shadow-focus, var(--
|
|
114
|
+
--sds-c-inputtext-shadow: var(--sds-c-inputtext-shadow-focus, var(--slds-s-input-shadow-focus));
|
|
121
115
|
--sds-c-inputtext-color-background: var(
|
|
122
116
|
--sds-c-inputtext-color-background-focus,
|
|
123
|
-
var(--
|
|
117
|
+
var(--slds-s-input-color-background-focus, revert)
|
|
124
118
|
);
|
|
125
119
|
--sds-c-inputtext-text-color: var(
|
|
126
120
|
--sds-c-inputtext-text-color-focus,
|
|
127
|
-
var(--
|
|
121
|
+
var(--slds-s-input-text-color-focus, revert)
|
|
128
122
|
);
|
|
129
123
|
}
|
|
130
124
|
/**
|
|
@@ -143,28 +137,28 @@
|
|
|
143
137
|
align-items: center;
|
|
144
138
|
|
|
145
139
|
/* Need to tweak stylelint to merge new shared groups into existing set, label is not available */
|
|
146
|
-
gap: var(--sds-c-inputtext-label-spacing-gap, var(--
|
|
140
|
+
gap: var(--sds-c-inputtext-label-spacing-gap, var(--slds-s-label-spacing-gap));
|
|
147
141
|
padding-inline-start: var(
|
|
148
142
|
--sds-c-inputtext-label-spacing-inlinestart,
|
|
149
|
-
var(--sds-c-inputtext-label-spacing-inline, var(--
|
|
143
|
+
var(--sds-c-inputtext-label-spacing-inline, var(--slds-s-label-spacing))
|
|
150
144
|
);
|
|
151
145
|
padding-inline-end: var(
|
|
152
146
|
--sds-c-inputtext-label-spacing-inlineend,
|
|
153
|
-
var(--sds-c-inputtext-label-spacing-inline, var(--
|
|
147
|
+
var(--sds-c-inputtext-label-spacing-inline, var(--slds-s-label-spacing))
|
|
154
148
|
);
|
|
155
149
|
padding-block-start: var(
|
|
156
150
|
--sds-c-inputtext-label-spacing-blockstart,
|
|
157
|
-
var(--sds-c-inputtext-label-spacing-block, var(--
|
|
151
|
+
var(--sds-c-inputtext-label-spacing-block, var(--slds-s-label-spacing))
|
|
158
152
|
);
|
|
159
153
|
padding-block-end: var(
|
|
160
154
|
--sds-c-inputtext-label-spacing-blockend,
|
|
161
|
-
var(--sds-c-inputtext-label-spacing-block, var(--
|
|
155
|
+
var(--sds-c-inputtext-label-spacing-block, var(--slds-s-label-spacing))
|
|
162
156
|
);
|
|
163
|
-
color: var(--sds-c-inputtext-label-color, var(--
|
|
157
|
+
color: var(--sds-c-inputtext-label-color, var(--slds-s-label-color));
|
|
164
158
|
}
|
|
165
159
|
:host([data-render-mode="shadow"]) [part='label'] {
|
|
166
|
-
font-size: var(--sds-c-inputtext-label-font-size, var(--
|
|
167
|
-
font-weight: var(--sds-c-inputtext-label-font-weight, var(--
|
|
160
|
+
font-size: var(--sds-c-inputtext-label-font-size, var(--slds-s-label-font-size));
|
|
161
|
+
font-weight: var(--sds-c-inputtext-label-font-weight, var(--slds-s-label-font-weight));
|
|
168
162
|
}
|
|
169
163
|
/**
|
|
170
164
|
* Help text
|
|
@@ -174,23 +168,23 @@
|
|
|
174
168
|
*/
|
|
175
169
|
:host([data-render-mode="shadow"]) [part='help-text visible'] {
|
|
176
170
|
/* Need to tweak stylelint to merge new shared groups into existing set, helptext is not available */
|
|
177
|
-
font-size: var(--sds-c-inputtext-helptext-font-size, var(--
|
|
178
|
-
color: var(--sds-c-inputtext-helptext-text-color, var(--
|
|
171
|
+
font-size: var(--sds-c-inputtext-helptext-font-size, var(--slds-s-helptext-font-size));
|
|
172
|
+
color: var(--sds-c-inputtext-helptext-text-color, var(--slds-s-helptext-text-color));
|
|
179
173
|
padding-inline-start: var(
|
|
180
174
|
--sds-c-inputtext-helptext-spacing-inlinestart,
|
|
181
|
-
var(--sds-c-inputtext-helptext-spacing-inline, var(--
|
|
175
|
+
var(--sds-c-inputtext-helptext-spacing-inline, var(--slds-s-helptext-spacing))
|
|
182
176
|
);
|
|
183
177
|
padding-inline-end: var(
|
|
184
178
|
--sds-c-inputtext-helptext-spacing-inlineend,
|
|
185
|
-
var(--sds-c-inputtext-helptext-spacing-inline, var(--
|
|
179
|
+
var(--sds-c-inputtext-helptext-spacing-inline, var(--slds-s-helptext-spacing))
|
|
186
180
|
);
|
|
187
181
|
padding-block-start: var(
|
|
188
182
|
--sds-c-inputtext-helptext-spacing-blockstart,
|
|
189
|
-
var(--sds-c-inputtext-helptext-spacing-block, var(--
|
|
183
|
+
var(--sds-c-inputtext-helptext-spacing-block, var(--slds-s-helptext-spacing))
|
|
190
184
|
);
|
|
191
185
|
padding-block-end: var(
|
|
192
186
|
--sds-c-inputtext-helptext-spacing-blockend,
|
|
193
|
-
var(--sds-c-inputtext-helptext-spacing-block, var(--
|
|
187
|
+
var(--sds-c-inputtext-helptext-spacing-block, var(--slds-s-helptext-spacing))
|
|
194
188
|
);
|
|
195
189
|
}
|
|
196
190
|
/**
|
|
@@ -199,11 +193,11 @@
|
|
|
199
193
|
:host([data-render-mode="shadow"][disabled]) {
|
|
200
194
|
--sds-c-inputtext-color-background: var(
|
|
201
195
|
--sds-c-inputtext-color-background-disabled,
|
|
202
|
-
var(--
|
|
196
|
+
var(--slds-s-input-color-background-disabled)
|
|
203
197
|
);
|
|
204
198
|
--sds-c-inputtext-color-border: var(
|
|
205
199
|
--sds-c-inputtext-color-border-disabled,
|
|
206
|
-
var(--
|
|
200
|
+
var(--slds-s-input-color-border-disabled)
|
|
207
201
|
);
|
|
208
202
|
}
|
|
209
203
|
/**
|
|
@@ -9,63 +9,57 @@
|
|
|
9
9
|
:host([data-render-mode="shadow"]) [part~='input-container'] {
|
|
10
10
|
display: flex;
|
|
11
11
|
align-items: center;
|
|
12
|
-
gap: var(--sds-c-inputtext-spacing-gap, var(--
|
|
13
|
-
min-height: var(--sds-c-inputtext-sizing-height, var(--
|
|
12
|
+
gap: var(--sds-c-inputtext-spacing-gap, var(--slds-s-input-spacing-gap));
|
|
13
|
+
min-height: var(--sds-c-inputtext-sizing-height, var(--slds-s-input-sizing-height));
|
|
14
14
|
padding-inline-start: var(
|
|
15
15
|
--sds-c-inputtext-spacing-inlinestart,
|
|
16
|
-
var(--sds-c-inputtext-spacing-inline, var(--
|
|
16
|
+
var(--sds-c-inputtext-spacing-inline, var(--slds-s-input-spacing))
|
|
17
17
|
);
|
|
18
18
|
padding-inline-end: var(
|
|
19
19
|
--sds-c-inputtext-spacing-inlineend,
|
|
20
|
-
var(--sds-c-inputtext-spacing-inline, var(--
|
|
20
|
+
var(--sds-c-inputtext-spacing-inline, var(--slds-s-input-spacing))
|
|
21
21
|
);
|
|
22
22
|
padding-block-start: var(
|
|
23
23
|
--sds-c-inputtext-spacing-blockstart,
|
|
24
|
-
var(--sds-c-inputtext-spacing-block, var(--
|
|
24
|
+
var(--sds-c-inputtext-spacing-block, var(--slds-s-input-spacing))
|
|
25
25
|
);
|
|
26
26
|
padding-block-end: var(
|
|
27
27
|
--sds-c-inputtext-spacing-blockend,
|
|
28
|
-
var(--sds-c-inputtext-spacing-block, var(--
|
|
28
|
+
var(--sds-c-inputtext-spacing-block, var(--slds-s-input-spacing))
|
|
29
29
|
);
|
|
30
|
-
background: var(--sds-c-inputtext-color-background, var(--
|
|
30
|
+
background: var(--sds-c-inputtext-color-background, var(--slds-s-input-color-background));
|
|
31
31
|
border-block-start: var(
|
|
32
32
|
--sds-c-inputtext-sizing-border-blockstart,
|
|
33
|
-
var(--sds-c-inputtext-sizing-border,
|
|
33
|
+
var(--sds-c-inputtext-sizing-border, 1px)
|
|
34
34
|
)
|
|
35
35
|
solid
|
|
36
36
|
var(
|
|
37
37
|
--sds-c-inputtext-color-border-blockstart,
|
|
38
|
-
var(--sds-c-inputtext-color-border, var(--
|
|
38
|
+
var(--sds-c-inputtext-color-border, var(--slds-s-input-color-border, currentColor))
|
|
39
39
|
);
|
|
40
40
|
border-inline-start: var(
|
|
41
41
|
--sds-c-inputtext-sizing-border-inlinestart,
|
|
42
|
-
var(--sds-c-inputtext-sizing-border,
|
|
42
|
+
var(--sds-c-inputtext-sizing-border, 1px)
|
|
43
43
|
)
|
|
44
44
|
solid
|
|
45
45
|
var(
|
|
46
46
|
--sds-c-inputtext-color-border-inlinestart,
|
|
47
|
-
var(--sds-c-inputtext-color-border, var(--
|
|
47
|
+
var(--sds-c-inputtext-color-border, var(--slds-s-input-color-border, currentColor))
|
|
48
48
|
);
|
|
49
|
-
border-inline-end: var(
|
|
50
|
-
--sds-c-inputtext-sizing-border-inlineend,
|
|
51
|
-
var(--sds-c-inputtext-sizing-border, var(--sds-g-sizing-border-1))
|
|
52
|
-
)
|
|
49
|
+
border-inline-end: var(--sds-c-inputtext-sizing-border-inlineend, var(--sds-c-inputtext-sizing-border, 1px))
|
|
53
50
|
solid
|
|
54
51
|
var(
|
|
55
52
|
--sds-c-inputtext-color-border-inlineend,
|
|
56
|
-
var(--sds-c-inputtext-color-border, var(--
|
|
53
|
+
var(--sds-c-inputtext-color-border, var(--slds-s-input-color-border, currentColor))
|
|
57
54
|
);
|
|
58
|
-
border-block-end: var(
|
|
59
|
-
--sds-c-inputtext-sizing-border-blockend,
|
|
60
|
-
var(--sds-c-inputtext-sizing-border, var(--sds-g-sizing-border-1))
|
|
61
|
-
)
|
|
55
|
+
border-block-end: var(--sds-c-inputtext-sizing-border-blockend, var(--sds-c-inputtext-sizing-border, 1px))
|
|
62
56
|
solid
|
|
63
57
|
var(
|
|
64
58
|
--sds-c-inputtext-color-border-blockend,
|
|
65
|
-
var(--sds-c-inputtext-color-border, var(--
|
|
59
|
+
var(--sds-c-inputtext-color-border, var(--slds-s-input-color-border, currentColor))
|
|
66
60
|
);
|
|
67
|
-
border-radius: var(--sds-c-inputtext-radius-border, var(--
|
|
68
|
-
box-shadow: var(--sds-c-inputtext-shadow, var(--
|
|
61
|
+
border-radius: var(--sds-c-inputtext-radius-border, var(--slds-s-input-radius-border));
|
|
62
|
+
box-shadow: var(--sds-c-inputtext-shadow, var(--slds-s-input-shadow));
|
|
69
63
|
}
|
|
70
64
|
/**
|
|
71
65
|
* Input Control
|
|
@@ -77,8 +71,8 @@
|
|
|
77
71
|
width: 100%;
|
|
78
72
|
height: 100%;
|
|
79
73
|
padding: 0;
|
|
80
|
-
font-size: var(--sds-c-inputtext-font-size, var(--
|
|
81
|
-
color: var(--sds-c-inputtext-text-color, var(--
|
|
74
|
+
font-size: var(--sds-c-inputtext-font-size, var(--slds-s-input-font-size));
|
|
75
|
+
color: var(--sds-c-inputtext-text-color, var(--slds-s-input-text-color));
|
|
82
76
|
line-height: 1;
|
|
83
77
|
border: none;
|
|
84
78
|
background: transparent;
|
|
@@ -92,20 +86,20 @@
|
|
|
92
86
|
:host([data-render-mode="shadow"][active]) [part~='input-container'] {
|
|
93
87
|
--sds-c-inputtext-color-background: var(
|
|
94
88
|
--sds-c-inputtext-color-background-active,
|
|
95
|
-
var(--
|
|
89
|
+
var(--slds-s-input-color-background-active)
|
|
96
90
|
);
|
|
97
91
|
--sds-c-inputtext-color-border: var(
|
|
98
92
|
--sds-c-inputtext-color-border-active,
|
|
99
|
-
var(--
|
|
93
|
+
var(--slds-s-input-color-border-active)
|
|
100
94
|
);
|
|
101
|
-
--sds-c-inputtext-shadow: var(--sds-c-inputtext-shadow-active, var(--
|
|
95
|
+
--sds-c-inputtext-shadow: var(--sds-c-inputtext-shadow-active, var(--slds-s-input-shadow-active));
|
|
102
96
|
}
|
|
103
97
|
/**
|
|
104
98
|
* Placeholder text
|
|
105
99
|
*/
|
|
106
100
|
:host([data-render-mode="shadow"]) [part~='input']::placeholder {
|
|
107
|
-
color: var(--sds-c-inputtext-text-color-placeholder, var(--
|
|
108
|
-
font-style: var(--sds-c-inputtext-font-style-placeholder, var(--
|
|
101
|
+
color: var(--sds-c-inputtext-text-color-placeholder, var(--slds-s-input-text-color-placeholder));
|
|
102
|
+
font-style: var(--sds-c-inputtext-font-style-placeholder, var(--slds-s-input-font-style-placeholder));
|
|
109
103
|
}
|
|
110
104
|
/**
|
|
111
105
|
* Input container when it receives focus-within
|
|
@@ -115,16 +109,16 @@
|
|
|
115
109
|
:host([data-render-mode="shadow"]) [part~='input-container']:focus-within {
|
|
116
110
|
--sds-c-inputtext-color-border: var(
|
|
117
111
|
--sds-c-inputtext-color-border-focus,
|
|
118
|
-
var(--
|
|
112
|
+
var(--slds-s-input-color-border-focus, revert)
|
|
119
113
|
);
|
|
120
|
-
--sds-c-inputtext-shadow: var(--sds-c-inputtext-shadow-focus, var(--
|
|
114
|
+
--sds-c-inputtext-shadow: var(--sds-c-inputtext-shadow-focus, var(--slds-s-input-shadow-focus));
|
|
121
115
|
--sds-c-inputtext-color-background: var(
|
|
122
116
|
--sds-c-inputtext-color-background-focus,
|
|
123
|
-
var(--
|
|
117
|
+
var(--slds-s-input-color-background-focus, revert)
|
|
124
118
|
);
|
|
125
119
|
--sds-c-inputtext-text-color: var(
|
|
126
120
|
--sds-c-inputtext-text-color-focus,
|
|
127
|
-
var(--
|
|
121
|
+
var(--slds-s-input-text-color-focus, revert)
|
|
128
122
|
);
|
|
129
123
|
}
|
|
130
124
|
/**
|
|
@@ -143,28 +137,28 @@
|
|
|
143
137
|
align-items: center;
|
|
144
138
|
|
|
145
139
|
/* Need to tweak stylelint to merge new shared groups into existing set, label is not available */
|
|
146
|
-
gap: var(--sds-c-inputtext-label-spacing-gap, var(--
|
|
140
|
+
gap: var(--sds-c-inputtext-label-spacing-gap, var(--slds-s-label-spacing-gap));
|
|
147
141
|
padding-inline-start: var(
|
|
148
142
|
--sds-c-inputtext-label-spacing-inlinestart,
|
|
149
|
-
var(--sds-c-inputtext-label-spacing-inline, var(--
|
|
143
|
+
var(--sds-c-inputtext-label-spacing-inline, var(--slds-s-label-spacing))
|
|
150
144
|
);
|
|
151
145
|
padding-inline-end: var(
|
|
152
146
|
--sds-c-inputtext-label-spacing-inlineend,
|
|
153
|
-
var(--sds-c-inputtext-label-spacing-inline, var(--
|
|
147
|
+
var(--sds-c-inputtext-label-spacing-inline, var(--slds-s-label-spacing))
|
|
154
148
|
);
|
|
155
149
|
padding-block-start: var(
|
|
156
150
|
--sds-c-inputtext-label-spacing-blockstart,
|
|
157
|
-
var(--sds-c-inputtext-label-spacing-block, var(--
|
|
151
|
+
var(--sds-c-inputtext-label-spacing-block, var(--slds-s-label-spacing))
|
|
158
152
|
);
|
|
159
153
|
padding-block-end: var(
|
|
160
154
|
--sds-c-inputtext-label-spacing-blockend,
|
|
161
|
-
var(--sds-c-inputtext-label-spacing-block, var(--
|
|
155
|
+
var(--sds-c-inputtext-label-spacing-block, var(--slds-s-label-spacing))
|
|
162
156
|
);
|
|
163
|
-
color: var(--sds-c-inputtext-label-color, var(--
|
|
157
|
+
color: var(--sds-c-inputtext-label-color, var(--slds-s-label-color));
|
|
164
158
|
}
|
|
165
159
|
:host([data-render-mode="shadow"]) [part='label'] {
|
|
166
|
-
font-size: var(--sds-c-inputtext-label-font-size, var(--
|
|
167
|
-
font-weight: var(--sds-c-inputtext-label-font-weight, var(--
|
|
160
|
+
font-size: var(--sds-c-inputtext-label-font-size, var(--slds-s-label-font-size));
|
|
161
|
+
font-weight: var(--sds-c-inputtext-label-font-weight, var(--slds-s-label-font-weight));
|
|
168
162
|
}
|
|
169
163
|
/**
|
|
170
164
|
* Help text
|
|
@@ -174,23 +168,23 @@
|
|
|
174
168
|
*/
|
|
175
169
|
:host([data-render-mode="shadow"]) [part='help-text visible'] {
|
|
176
170
|
/* Need to tweak stylelint to merge new shared groups into existing set, helptext is not available */
|
|
177
|
-
font-size: var(--sds-c-inputtext-helptext-font-size, var(--
|
|
178
|
-
color: var(--sds-c-inputtext-helptext-text-color, var(--
|
|
171
|
+
font-size: var(--sds-c-inputtext-helptext-font-size, var(--slds-s-helptext-font-size));
|
|
172
|
+
color: var(--sds-c-inputtext-helptext-text-color, var(--slds-s-helptext-text-color));
|
|
179
173
|
padding-inline-start: var(
|
|
180
174
|
--sds-c-inputtext-helptext-spacing-inlinestart,
|
|
181
|
-
var(--sds-c-inputtext-helptext-spacing-inline, var(--
|
|
175
|
+
var(--sds-c-inputtext-helptext-spacing-inline, var(--slds-s-helptext-spacing))
|
|
182
176
|
);
|
|
183
177
|
padding-inline-end: var(
|
|
184
178
|
--sds-c-inputtext-helptext-spacing-inlineend,
|
|
185
|
-
var(--sds-c-inputtext-helptext-spacing-inline, var(--
|
|
179
|
+
var(--sds-c-inputtext-helptext-spacing-inline, var(--slds-s-helptext-spacing))
|
|
186
180
|
);
|
|
187
181
|
padding-block-start: var(
|
|
188
182
|
--sds-c-inputtext-helptext-spacing-blockstart,
|
|
189
|
-
var(--sds-c-inputtext-helptext-spacing-block, var(--
|
|
183
|
+
var(--sds-c-inputtext-helptext-spacing-block, var(--slds-s-helptext-spacing))
|
|
190
184
|
);
|
|
191
185
|
padding-block-end: var(
|
|
192
186
|
--sds-c-inputtext-helptext-spacing-blockend,
|
|
193
|
-
var(--sds-c-inputtext-helptext-spacing-block, var(--
|
|
187
|
+
var(--sds-c-inputtext-helptext-spacing-block, var(--slds-s-helptext-spacing))
|
|
194
188
|
);
|
|
195
189
|
}
|
|
196
190
|
/**
|
|
@@ -199,11 +193,11 @@
|
|
|
199
193
|
:host([data-render-mode="shadow"][disabled]) {
|
|
200
194
|
--sds-c-inputtext-color-background: var(
|
|
201
195
|
--sds-c-inputtext-color-background-disabled,
|
|
202
|
-
var(--
|
|
196
|
+
var(--slds-s-input-color-background-disabled)
|
|
203
197
|
);
|
|
204
198
|
--sds-c-inputtext-color-border: var(
|
|
205
199
|
--sds-c-inputtext-color-border-disabled,
|
|
206
|
-
var(--
|
|
200
|
+
var(--slds-s-input-color-border-disabled)
|
|
207
201
|
);
|
|
208
202
|
}
|
|
209
203
|
/**
|