@nuralyui/input 0.0.10 → 0.0.12
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/bundle.js +528 -457
- package/input.component.d.ts +1 -1
- package/input.component.js +1 -1
- package/input.component.js.map +1 -1
- package/input.style.js +292 -141
- package/input.style.js.map +1 -1
- package/package.json +1 -1
- package/input.style.variable.d.ts +0 -2
- package/input.style.variable.js +0 -193
- package/input.style.variable.js.map +0 -1
package/input.style.js
CHANGED
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import { css } from 'lit';
|
|
2
|
-
import { styleVariables } from './input.style.variable.js';
|
|
3
2
|
/**
|
|
4
3
|
* Input component styles for the Hybrid UI Library
|
|
5
4
|
*
|
|
@@ -8,10 +7,42 @@ import { styleVariables } from './input.style.variable.js';
|
|
|
8
7
|
* - Multiple input states (default, warning, error)
|
|
9
8
|
* - Size variations (small, medium, large)
|
|
10
9
|
* - Different input types (text, password, number, calendar)
|
|
11
|
-
* - Icon positioning and styling
|
|
10
|
+
* - Icon positioning and styling with comprehensive CSS variable overrides
|
|
12
11
|
* - Focus, disabled, and validation states
|
|
13
12
|
* - Dark theme support
|
|
14
13
|
*
|
|
14
|
+
* Icon Color Customization:
|
|
15
|
+
* The input component provides multiple levels of CSS variable overrides for icon colors:
|
|
16
|
+
*
|
|
17
|
+
* Global Level:
|
|
18
|
+
* - --nuraly-color-input-icon: Controls all icons in input components
|
|
19
|
+
* - --nuraly-size-input-icon: Controls size of all icons in input components
|
|
20
|
+
* - --nuraly-color-input-icon-hover: Hover state for all icons
|
|
21
|
+
* - --nuraly-color-input-icon-active: Active state for all icons
|
|
22
|
+
* - --nuraly-color-input-icon-disabled: Disabled state for all icons
|
|
23
|
+
*
|
|
24
|
+
* Specific Icon Types:
|
|
25
|
+
* - --nuraly-color-input-warning-icon: Warning state icons
|
|
26
|
+
* - --nuraly-color-input-error-icon: Error state icons
|
|
27
|
+
* - --nuraly-color-input-calendar-icon: Calendar input type icons
|
|
28
|
+
* - --nuraly-color-input-password-icon: Password toggle icons
|
|
29
|
+
* - --nuraly-color-input-copy-icon: Copy functionality icons
|
|
30
|
+
* - --nuraly-color-input-clear-icon: Clear functionality icons
|
|
31
|
+
* - --nuraly-color-input-number-icons: Number input increment/decrement icons
|
|
32
|
+
*
|
|
33
|
+
* Usage Examples:
|
|
34
|
+
* ```css
|
|
35
|
+
* :root {
|
|
36
|
+
* --nuraly-color-input-icon: #0066cc;
|
|
37
|
+
* --nuraly-color-input-error-icon: #cc0000;
|
|
38
|
+
* --nuraly-size-input-icon: 20px;
|
|
39
|
+
* }
|
|
40
|
+
*
|
|
41
|
+
* .custom-input {
|
|
42
|
+
* --nuraly-color-input-icon: #purple;
|
|
43
|
+
* }
|
|
44
|
+
* ```
|
|
45
|
+
*
|
|
15
46
|
* The styling system uses CSS custom properties with fallbacks to allow
|
|
16
47
|
* for both global and local customization of input appearance.
|
|
17
48
|
*/
|
|
@@ -23,21 +54,34 @@ const inputStyle = css `
|
|
|
23
54
|
:host {
|
|
24
55
|
display: flex;
|
|
25
56
|
flex-direction: column;
|
|
26
|
-
font-family: var(--
|
|
57
|
+
font-family: var(--nuraly-font-family-input, 'IBM Plex Sans', ui-sans-serif, system-ui);
|
|
27
58
|
}
|
|
28
59
|
|
|
29
60
|
/*
|
|
30
61
|
* Base input wrapper and input element styles
|
|
31
62
|
* Background applied to wrapper to cover entire container including addons
|
|
32
|
-
* Uses CSS custom properties
|
|
33
|
-
* Properties follow the pattern: --hybrid-input-{property}, --hybrid-input-local-{property}
|
|
63
|
+
* Uses theme CSS custom properties for comprehensive theming support
|
|
34
64
|
*/
|
|
35
65
|
.input-wrapper {
|
|
36
|
-
background-color: var(--
|
|
66
|
+
background-color: var(--nuraly-color-input-background, var(--nuraly-color-input-background-fallback, #ffffff));
|
|
37
67
|
}
|
|
38
68
|
|
|
69
|
+
|
|
39
70
|
#input-container > input {
|
|
40
71
|
background-color: transparent;
|
|
72
|
+
border: var(--nuraly-input-border, none);
|
|
73
|
+
outline: var(--nuraly-input-outline, none);
|
|
74
|
+
flex: 1;
|
|
75
|
+
min-width: 0;
|
|
76
|
+
width: 100%;
|
|
77
|
+
|
|
78
|
+
/* Typography from theme */
|
|
79
|
+
font-family: var(--nuraly-font-family-input, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto);
|
|
80
|
+
font-size: var(--nuraly-font-size-input, 14px);
|
|
81
|
+
color: var(--nuraly-color-input-text, var(--nuraly-color-input-text-fallback, rgba(0, 0, 0, 0.88)));
|
|
82
|
+
|
|
83
|
+
/* Padding from theme */
|
|
84
|
+
padding: var(--nuraly-spacing-input-medium-vertical, 4px) var(--nuraly-spacing-input-medium-horizontal, 11px);
|
|
41
85
|
}
|
|
42
86
|
|
|
43
87
|
/*
|
|
@@ -45,21 +89,34 @@ const inputStyle = css `
|
|
|
45
89
|
* Applied when input is disabled - removes interactivity and applies muted colors
|
|
46
90
|
*/
|
|
47
91
|
:host([disabled]) .input-wrapper {
|
|
48
|
-
background-color: var(--
|
|
92
|
+
background-color: var(--nuraly-color-input-disabled-background, var(--nuraly-color-input-disabled-background-fallback, #f4f4f4));
|
|
49
93
|
}
|
|
50
94
|
|
|
51
95
|
:host([disabled]) #input-container > input {
|
|
52
96
|
background-color: transparent;
|
|
53
|
-
cursor: not-allowed;
|
|
97
|
+
cursor: var(--nuraly-cursor-disabled, not-allowed);
|
|
98
|
+
color: var(--nuraly-color-input-disabled-text, var(--nuraly-color-input-disabled-text-fallback, rgba(0, 0, 0, 0.25)));
|
|
54
99
|
}
|
|
55
100
|
|
|
56
101
|
/*
|
|
57
102
|
* Icon base styles
|
|
58
103
|
* Common styling for all icons within the input component
|
|
104
|
+
* Provides comprehensive CSS variable override system
|
|
59
105
|
*/
|
|
60
|
-
|
|
106
|
+
nr-icon {
|
|
61
107
|
display: flex;
|
|
62
108
|
align-items: center;
|
|
109
|
+
|
|
110
|
+
/* Global icon color override - applies to all icons in input */
|
|
111
|
+
--nuraly-color-icon: var(--nuraly-color-input-icon, var(--nuraly-color-icon, var(--nuraly-color-icon-fallback, #161616)));
|
|
112
|
+
|
|
113
|
+
/* Size override for input icons */
|
|
114
|
+
--nuraly-icon-size: var(--nuraly-size-input-icon, var(--nuraly-icon-size, var(--nuraly-icon-size-fallback, 18px)));
|
|
115
|
+
|
|
116
|
+
/* Interactive state overrides */
|
|
117
|
+
--nuraly-color-icon-hover: var(--nuraly-color-input-icon-hover, var(--nuraly-color-icon-hover, var(--nuraly-color-icon-hover-fallback, #0f62fe)));
|
|
118
|
+
--nuraly-color-icon-active: var(--nuraly-color-input-icon-active, var(--nuraly-color-icon-active, var(--nuraly-color-icon-active-fallback, #054ada)));
|
|
119
|
+
--nuraly-color-icon-disabled: var(--nuraly-color-input-icon-disabled, var(--nuraly-color-icon-disabled, var(--nuraly-color-icon-disabled-fallback, #c6c6c6)));
|
|
63
120
|
}
|
|
64
121
|
|
|
65
122
|
/*
|
|
@@ -67,9 +124,9 @@ const inputStyle = css `
|
|
|
67
124
|
* Customizable placeholder text appearance
|
|
68
125
|
*/
|
|
69
126
|
::placeholder {
|
|
70
|
-
color: var(--
|
|
71
|
-
font-size: var(--
|
|
72
|
-
font-family: var(--
|
|
127
|
+
color: var(--nuraly-color-input-placeholder, var(--nuraly-color-input-placeholder-fallback, #a8a8a8));
|
|
128
|
+
font-size: var(--nuraly-font-size-input-placeholder, 14px);
|
|
129
|
+
font-family: var(--nuraly-font-family-input, 'IBM Plex Sans', ui-sans-serif, system-ui);
|
|
73
130
|
}
|
|
74
131
|
|
|
75
132
|
/*
|
|
@@ -77,7 +134,7 @@ const inputStyle = css `
|
|
|
77
134
|
* Applied when input is disabled
|
|
78
135
|
*/
|
|
79
136
|
:host([disabled]) ::placeholder {
|
|
80
|
-
color: var(--
|
|
137
|
+
color: var(--nuraly-color-input-disabled-placeholder, var(--nuraly-color-input-disabled-placeholder-fallback, #c6c6c6));
|
|
81
138
|
}
|
|
82
139
|
|
|
83
140
|
/* ========================================
|
|
@@ -86,39 +143,39 @@ const inputStyle = css `
|
|
|
86
143
|
|
|
87
144
|
/* Warning state icon */
|
|
88
145
|
#warning-icon {
|
|
89
|
-
--
|
|
146
|
+
--nuraly-color-icon: var(--nuraly-color-input-warning-icon, #f1c21b);
|
|
90
147
|
}
|
|
91
148
|
|
|
92
149
|
/* Error state icon */
|
|
93
150
|
#error-icon {
|
|
94
|
-
--
|
|
151
|
+
--nuraly-color-icon: var(--nuraly-color-input-error-icon, #da1e28);
|
|
95
152
|
}
|
|
96
153
|
|
|
97
154
|
/* Calendar input type icon */
|
|
98
155
|
#calendar-icon {
|
|
99
|
-
--
|
|
156
|
+
--nuraly-color-icon: var(--nuraly-color-input-calendar-icon, #161616);
|
|
100
157
|
}
|
|
101
158
|
|
|
102
159
|
/* Password toggle icon */
|
|
103
160
|
#password-icon {
|
|
104
|
-
padding-left: var(--
|
|
105
|
-
padding-right: var(--
|
|
106
|
-
cursor: pointer;
|
|
107
|
-
--
|
|
161
|
+
padding-left: var(--nuraly-input-password-icon-padding-left, var(--nuraly-password-icon-padding-left, 8px));
|
|
162
|
+
padding-right: var(--nuraly-input-password-icon-padding-right, var(--nuraly-password-icon-padding-right, 8px));
|
|
163
|
+
cursor: var(--nuraly-cursor-interactive, pointer);
|
|
164
|
+
--nuraly-color-icon: var(--nuraly-color-input-password-icon, #161616);
|
|
108
165
|
}
|
|
109
166
|
|
|
110
167
|
/* Copy functionality icon */
|
|
111
168
|
#copy-icon {
|
|
112
|
-
padding-right: var(--
|
|
113
|
-
--
|
|
114
|
-
cursor: pointer;
|
|
169
|
+
padding-right: var(--nuraly-input-copy-icon-padding-right, var(--nuraly-copy-icon-padding-right, 8px));
|
|
170
|
+
--nuraly-color-icon: var(--nuraly-color-input-copy-icon, #161616);
|
|
171
|
+
cursor: var(--nuraly-cursor-interactive, pointer);
|
|
115
172
|
}
|
|
116
173
|
|
|
117
174
|
/* Clear functionality icon */
|
|
118
175
|
#clear-icon {
|
|
119
|
-
padding-right: var(--
|
|
120
|
-
--
|
|
121
|
-
cursor: pointer;
|
|
176
|
+
padding-right: var(--nuraly-input-clear-icon-padding-right, var(--nuraly-clear-icon-padding-right, 8px));
|
|
177
|
+
--nuraly-color-icon: var(--nuraly-color-input-clear-icon, #161616);
|
|
178
|
+
cursor: var(--nuraly-cursor-interactive, pointer);
|
|
122
179
|
}
|
|
123
180
|
|
|
124
181
|
/*
|
|
@@ -129,30 +186,30 @@ const inputStyle = css `
|
|
|
129
186
|
display: flex;
|
|
130
187
|
justify-content: space-between;
|
|
131
188
|
align-items: center;
|
|
132
|
-
cursor: pointer;
|
|
189
|
+
cursor: var(--nuraly-cursor-interactive, pointer);
|
|
133
190
|
position: absolute;
|
|
134
191
|
right: 0;
|
|
135
192
|
top: 0;
|
|
136
193
|
height: 100%;
|
|
137
|
-
width: var(--
|
|
138
|
-
padding-right: var(--
|
|
194
|
+
width: var(--nuraly-input-number-icons-container-width, var(--nuraly-number-icons-container-width, 50px));
|
|
195
|
+
padding-right: var(--nuraly-input-number-icons-container-padding-right, var(--nuraly-number-icons-container-padding-right, 8px));
|
|
139
196
|
}
|
|
140
197
|
|
|
141
198
|
/* Individual number icons styling */
|
|
142
|
-
#number-icons
|
|
143
|
-
--
|
|
144
|
-
padding-left: var(--
|
|
145
|
-
padding-right: var(--
|
|
146
|
-
width: var(--
|
|
147
|
-
height: var(--
|
|
199
|
+
#number-icons nr-icon {
|
|
200
|
+
--nuraly-color-icon: var(--nuraly-color-input-number-icons, #161616);
|
|
201
|
+
padding-left: var(--nuraly-input-number-icons-padding-left, var(--nuraly-number-icons-padding-left, 4px));
|
|
202
|
+
padding-right: var(--nuraly-input-number-icons-padding-right, var(--nuraly-number-icons-padding-right, 4px));
|
|
203
|
+
width: var(--nuraly-input-number-icons-width, var(--nuraly-number-icons-width, 24px));
|
|
204
|
+
height: var(--nuraly-input-number-icons-height, var(--nuraly-number-icons-height, 24px));
|
|
148
205
|
}
|
|
149
206
|
|
|
150
207
|
/* Number icons separator styling */
|
|
151
208
|
#icons-separator {
|
|
152
|
-
color: var(--
|
|
153
|
-
padding-bottom: var(--
|
|
154
|
-
padding-left: var(--
|
|
155
|
-
padding-right: var(--
|
|
209
|
+
color: var(--nuraly-input-number-icons-separator-color, var(--nuraly-number-icons-separator-color));
|
|
210
|
+
padding-bottom: var(--nuraly-input-number-icons-separator-padding-bottom, var(--nuraly-number-icons-separator-padding-bottom));
|
|
211
|
+
padding-left: var(--nuraly-input-number-icons-separator-padding-left, var(--nuraly-number-icons-separator-padding-left));
|
|
212
|
+
padding-right: var(--nuraly-input-number-icons-separator-padding-right, var(--nuraly-number-icons-separator-padding-right));
|
|
156
213
|
}
|
|
157
214
|
|
|
158
215
|
/*
|
|
@@ -166,7 +223,7 @@ const inputStyle = css `
|
|
|
166
223
|
:host([disabled]) #calendar-icon,
|
|
167
224
|
:host([disabled]) #copy-icon,
|
|
168
225
|
:host([disabled]) #clear-icon {
|
|
169
|
-
opacity: var(--
|
|
226
|
+
opacity: var(--nuraly-input-disabled-icon-opacity, var(--nuraly-disabled-icon-opacity));
|
|
170
227
|
}
|
|
171
228
|
|
|
172
229
|
/* Disabled icons cursor override */
|
|
@@ -196,16 +253,16 @@ const inputStyle = css `
|
|
|
196
253
|
* Styled to visually connect with input
|
|
197
254
|
*/
|
|
198
255
|
.input-addon-before {
|
|
199
|
-
background-color: var(--
|
|
200
|
-
border: var(--
|
|
256
|
+
background-color: var(--nuraly-input-addon-background-color, var(--nuraly-addon-background-color));
|
|
257
|
+
border: var(--nuraly-input-border, var(--nuraly-border));
|
|
201
258
|
border-right: none;
|
|
202
|
-
border-top-left-radius: var(--
|
|
203
|
-
border-bottom-left-radius: var(--
|
|
204
|
-
padding: var(--
|
|
259
|
+
border-top-left-radius: var(--nuraly-input-border-radius, var(--nuraly-border-radius));
|
|
260
|
+
border-bottom-left-radius: var(--nuraly-input-border-radius, var(--nuraly-border-radius));
|
|
261
|
+
padding: var(--nuraly-input-addon-padding, var(--nuraly-addon-padding));
|
|
205
262
|
display: flex;
|
|
206
263
|
align-items: center;
|
|
207
|
-
color: var(--
|
|
208
|
-
font-size: var(--
|
|
264
|
+
color: var(--nuraly-input-addon-color, var(--nuraly-addon-color));
|
|
265
|
+
font-size: var(--nuraly-input-font-size, var(--nuraly-font-size));
|
|
209
266
|
white-space: nowrap;
|
|
210
267
|
min-width: 0; /* Allow shrinking */
|
|
211
268
|
flex-shrink: 0; /* Prevent shrinking */
|
|
@@ -216,16 +273,16 @@ const inputStyle = css `
|
|
|
216
273
|
* Styled to visually connect with input
|
|
217
274
|
*/
|
|
218
275
|
.input-addon-after {
|
|
219
|
-
background-color: var(--
|
|
220
|
-
border: var(--
|
|
276
|
+
background-color: var(--nuraly-input-addon-background-color, var(--nuraly-addon-background-color));
|
|
277
|
+
border: var(--nuraly-input-border, var(--nuraly-border));
|
|
221
278
|
border-left: none;
|
|
222
|
-
border-top-right-radius: var(--
|
|
223
|
-
border-bottom-right-radius: var(--
|
|
224
|
-
padding: var(--
|
|
279
|
+
border-top-right-radius: var(--nuraly-input-border-radius, var(--nuraly-border-radius));
|
|
280
|
+
border-bottom-right-radius: var(--nuraly-input-border-radius, var(--nuraly-border-radius));
|
|
281
|
+
padding: var(--nuraly-input-addon-padding, var(--nuraly-addon-padding));
|
|
225
282
|
display: flex;
|
|
226
283
|
align-items: center;
|
|
227
|
-
color: var(--
|
|
228
|
-
font-size: var(--
|
|
284
|
+
color: var(--nuraly-input-addon-color, var(--nuraly-addon-color));
|
|
285
|
+
font-size: var(--nuraly-input-font-size, var(--nuraly-font-size));
|
|
229
286
|
white-space: nowrap;
|
|
230
287
|
min-width: 0; /* Allow shrinking */
|
|
231
288
|
flex-shrink: 0; /* Prevent shrinking */
|
|
@@ -249,39 +306,106 @@ const inputStyle = css `
|
|
|
249
306
|
|
|
250
307
|
/*
|
|
251
308
|
* Main input container element
|
|
252
|
-
* Uses CSS custom properties for comprehensive border and layout control
|
|
309
|
+
* Uses theme CSS custom properties for comprehensive border and layout control
|
|
253
310
|
*/
|
|
254
311
|
#input-container {
|
|
255
|
-
/*
|
|
256
|
-
border
|
|
257
|
-
border-
|
|
258
|
-
border-left: var(--hybrid-input-border-left, var(--hybrid-input-local-border-left));
|
|
259
|
-
border-right: var(--hybrid-input-border-right, var(--hybrid-input-local-border-right));
|
|
312
|
+
/* Default outlined style */
|
|
313
|
+
border: var(--nuraly-border-width-input, 1px) solid var(--nuraly-color-input-border, #d9d9d9);
|
|
314
|
+
border-radius: var(--nuraly-border-radius-input, 6px);
|
|
260
315
|
|
|
261
|
-
/*
|
|
262
|
-
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
border-bottom-right-radius: var(--hybrid-input-border-bottom-right-radius, var(--hybrid-input-local-border-bottom-right-radius));
|
|
316
|
+
/* Background and text styling */
|
|
317
|
+
background-color: var(--nuraly-color-input-background, #ffffff);
|
|
318
|
+
color: var(--nuraly-color-input-text, rgba(0, 0, 0, 0.88));
|
|
319
|
+
font-family: var(--nuraly-font-family-input, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto);
|
|
320
|
+
font-size: var(--nuraly-font-size-input, 14px);
|
|
267
321
|
|
|
268
322
|
/* Layout */
|
|
269
323
|
display: flex;
|
|
270
324
|
position: relative;
|
|
271
325
|
flex: 1; /* Take available space in wrapper */
|
|
272
326
|
min-width: 0; /* Allow shrinking below content size */
|
|
327
|
+
|
|
328
|
+
/* Transitions for smooth theme changes */
|
|
329
|
+
transition: var(--nuraly-transition-input, border-color 0.2s, box-shadow 0.2s);
|
|
330
|
+
}
|
|
331
|
+
|
|
332
|
+
/* Carbon Design System override - Carbon specific styles */
|
|
333
|
+
html[data-theme^="carbon"] nr-input #input-container,
|
|
334
|
+
body[data-theme^="carbon"] nr-input #input-container,
|
|
335
|
+
[data-theme^="carbon"] nr-input #input-container,
|
|
336
|
+
.input-wrapper[data-theme^="carbon"] #input-container {
|
|
337
|
+
border: var(--nuraly-border-width-input, 1px) solid var(--nuraly-color-input-border, transparent) !important;
|
|
338
|
+
border-bottom: var(--nuraly-border-width-input, 2px) solid var(--nuraly-color-input-border-bottom, #8d8d8d) !important;
|
|
339
|
+
border-radius: var(--nuraly-border-radius-input, 0) !important;
|
|
340
|
+
background-color: var(--nuraly-color-input-background, #f4f4f4) !important;
|
|
341
|
+
color: var(--nuraly-color-input-text, #161616) !important;
|
|
342
|
+
}
|
|
343
|
+
|
|
344
|
+
/* Default theme override - Default specific styles */
|
|
345
|
+
html[data-theme^="default"] nr-input #input-container,
|
|
346
|
+
body[data-theme^="default"] nr-input #input-container,
|
|
347
|
+
[data-theme^="default"] nr-input #input-container,
|
|
348
|
+
.input-wrapper[data-theme^="default"] #input-container {
|
|
349
|
+
border: var(--nuraly-border-width-input, 1px) solid var(--nuraly-color-input-border, #d9d9d9) !important;
|
|
350
|
+
border-radius: var(--nuraly-border-radius-input, 6px) !important;
|
|
351
|
+
background-color: var(--nuraly-color-input-background, #ffffff) !important;
|
|
352
|
+
color: var(--nuraly-color-input-text, rgba(0, 0, 0, 0.88)) !important;
|
|
353
|
+
}
|
|
354
|
+
|
|
355
|
+
/* Carbon input element padding override */
|
|
356
|
+
html[data-theme^="carbon"] nr-input #input-container > input,
|
|
357
|
+
body[data-theme^="carbon"] nr-input #input-container > input,
|
|
358
|
+
[data-theme^="carbon"] nr-input #input-container > input,
|
|
359
|
+
.input-wrapper[data-theme^="carbon"] #input-container > input {
|
|
360
|
+
padding: 7px 16px !important;
|
|
361
|
+
}
|
|
362
|
+
|
|
363
|
+
/* Default input element padding override */
|
|
364
|
+
html[data-theme^="default"] nr-input #input-container > input,
|
|
365
|
+
body[data-theme^="default"] nr-input #input-container > input,
|
|
366
|
+
[data-theme^="default"] nr-input #input-container > input,
|
|
367
|
+
.input-wrapper[data-theme^="default"] #input-container > input {
|
|
368
|
+
padding: var(--nuraly-spacing-input-medium-vertical, 4px) var(--nuraly-spacing-input-medium-horizontal, 11px) !important;
|
|
369
|
+
}
|
|
370
|
+
|
|
371
|
+
/* Focus state for input container */
|
|
372
|
+
#input-container:focus-within {
|
|
373
|
+
border-color: var(--nuraly-color-input-border-focus, #1890ff);
|
|
374
|
+
box-shadow: var(--nuraly-shadow-input-focus, 0 0 0 2px rgba(24, 144, 255, 0.2));
|
|
375
|
+
outline: none;
|
|
376
|
+
}
|
|
377
|
+
|
|
378
|
+
/* Carbon focus override */
|
|
379
|
+
html[data-theme^="carbon"] nr-input #input-container:focus-within,
|
|
380
|
+
body[data-theme^="carbon"] nr-input #input-container:focus-within,
|
|
381
|
+
[data-theme^="carbon"] nr-input #input-container:focus-within,
|
|
382
|
+
.input-wrapper[data-theme^="carbon"] #input-container:focus-within {
|
|
383
|
+
border: var(--nuraly-border-width-input, 2px) solid var(--nuraly-color-input-border-focus, #0f62fe) !important;
|
|
384
|
+
border-radius: var(--nuraly-border-radius-input, 0) !important;
|
|
385
|
+
box-shadow: var(--nuraly-shadow-input-focus, none) !important;
|
|
386
|
+
outline: none !important;
|
|
387
|
+
}
|
|
388
|
+
|
|
389
|
+
/* Default focus override */
|
|
390
|
+
html[data-theme^="default"] nr-input #input-container:focus-within,
|
|
391
|
+
body[data-theme^="default"] nr-input #input-container:focus-within,
|
|
392
|
+
[data-theme^="default"] nr-input #input-container:focus-within,
|
|
393
|
+
.input-wrapper[data-theme^="default"] #input-container:focus-within {
|
|
394
|
+
border-color: var(--nuraly-color-input-border-focus, #1890ff) !important;
|
|
395
|
+
border-radius: var(--nuraly-border-radius-input, 6px) !important;
|
|
396
|
+
box-shadow: var(--nuraly-shadow-input-focus, 0 0 0 2px rgba(24, 144, 255, 0.2)) !important;
|
|
397
|
+
outline: none !important;
|
|
273
398
|
}
|
|
274
399
|
|
|
275
400
|
/*
|
|
276
|
-
* Disabled container
|
|
401
|
+
* Disabled container styles
|
|
277
402
|
* Applied when input is disabled
|
|
278
403
|
*/
|
|
279
404
|
:host([disabled]) #input-container {
|
|
280
|
-
|
|
281
|
-
border-
|
|
282
|
-
|
|
283
|
-
|
|
284
|
-
opacity: 0.6;
|
|
405
|
+
background-color: var(--nuraly-color-input-disabled-background, #f5f5f5);
|
|
406
|
+
border-color: var(--nuraly-color-input-disabled-border, #d9d9d9);
|
|
407
|
+
color: var(--nuraly-color-input-disabled-text, rgba(0, 0, 0, 0.25));
|
|
408
|
+
cursor: not-allowed;
|
|
285
409
|
}
|
|
286
410
|
|
|
287
411
|
/* ========================================
|
|
@@ -293,9 +417,9 @@ const inputStyle = css `
|
|
|
293
417
|
* Default: light border, focus: blue border
|
|
294
418
|
*/
|
|
295
419
|
:host([variant='outlined']) #input-container {
|
|
296
|
-
border: var(--
|
|
297
|
-
border-radius: var(--
|
|
298
|
-
background-color: var(--
|
|
420
|
+
border: var(--nuraly-input-outlined-border, var(--nuraly-outlined-border));
|
|
421
|
+
border-radius: var(--nuraly-input-outlined-border-radius, var(--nuraly-outlined-border-radius));
|
|
422
|
+
background-color: var(--nuraly-input-outlined-background, var(--nuraly-outlined-background));
|
|
299
423
|
}
|
|
300
424
|
|
|
301
425
|
:host([variant='outlined']) .input-wrapper {
|
|
@@ -303,7 +427,7 @@ const inputStyle = css `
|
|
|
303
427
|
}
|
|
304
428
|
|
|
305
429
|
:host([variant='outlined']:not([state='error'])) #input-container:focus-within {
|
|
306
|
-
border: var(--
|
|
430
|
+
border: var(--nuraly-input-outlined-focus-border, var(--nuraly-outlined-focus-border));
|
|
307
431
|
}
|
|
308
432
|
|
|
309
433
|
/*
|
|
@@ -311,9 +435,9 @@ const inputStyle = css `
|
|
|
311
435
|
* Subtle background with bottom border indication
|
|
312
436
|
*/
|
|
313
437
|
:host([variant='filled']) #input-container {
|
|
314
|
-
background-color: var(--
|
|
315
|
-
border-radius: var(--
|
|
316
|
-
border-bottom: var(--
|
|
438
|
+
background-color: var(--nuraly-input-filled-background, var(--nuraly-filled-background));
|
|
439
|
+
border-radius: var(--nuraly-input-filled-border-radius, var(--nuraly-filled-border-radius));
|
|
440
|
+
border-bottom: var(--nuraly-input-filled-border-bottom, var(--nuraly-filled-border-bottom));
|
|
317
441
|
border-top: none;
|
|
318
442
|
border-left: none;
|
|
319
443
|
border-right: none;
|
|
@@ -324,7 +448,7 @@ const inputStyle = css `
|
|
|
324
448
|
}
|
|
325
449
|
|
|
326
450
|
:host([variant='filled']:not([state='error'])) #input-container:focus-within {
|
|
327
|
-
border-bottom: var(--
|
|
451
|
+
border-bottom: var(--nuraly-input-filled-focus-border-bottom, var(--nuraly-filled-focus-border-bottom));
|
|
328
452
|
border-top: none;
|
|
329
453
|
border-left: none;
|
|
330
454
|
border-right: none;
|
|
@@ -335,9 +459,9 @@ const inputStyle = css `
|
|
|
335
459
|
* Clean appearance with focus indication via outline
|
|
336
460
|
*/
|
|
337
461
|
:host([variant='borderless']) #input-container {
|
|
338
|
-
background-color: var(--
|
|
462
|
+
background-color: var(--nuraly-input-borderless-background, var(--nuraly-borderless-background));
|
|
339
463
|
border: none;
|
|
340
|
-
border-radius: var(--
|
|
464
|
+
border-radius: var(--nuraly-input-borderless-border-radius, var(--nuraly-borderless-border-radius));
|
|
341
465
|
}
|
|
342
466
|
|
|
343
467
|
:host([variant='borderless']) .input-wrapper {
|
|
@@ -345,7 +469,7 @@ const inputStyle = css `
|
|
|
345
469
|
}
|
|
346
470
|
|
|
347
471
|
:host([variant='borderless']:not([state='error'])) #input-container:focus-within {
|
|
348
|
-
outline: var(--
|
|
472
|
+
outline: var(--nuraly-input-borderless-focus-outline, var(--nuraly-borderless-focus-outline));
|
|
349
473
|
border: none;
|
|
350
474
|
}
|
|
351
475
|
|
|
@@ -354,7 +478,7 @@ const inputStyle = css `
|
|
|
354
478
|
* Maintains existing behavior as default
|
|
355
479
|
*/
|
|
356
480
|
:host([variant='underlined']) #input-container {
|
|
357
|
-
border-bottom: var(--
|
|
481
|
+
border-bottom: var(--nuraly-input-underlined-border-bottom, var(--nuraly-underlined-border-bottom));
|
|
358
482
|
border-top: none;
|
|
359
483
|
border-left: none;
|
|
360
484
|
border-right: none;
|
|
@@ -362,7 +486,7 @@ const inputStyle = css `
|
|
|
362
486
|
}
|
|
363
487
|
|
|
364
488
|
:host([variant='underlined']:not([state='error'])) #input-container:focus-within {
|
|
365
|
-
border-bottom: var(--
|
|
489
|
+
border-bottom: var(--nuraly-input-underlined-focus-border-bottom, var(--nuraly-underlined-focus-border-bottom));
|
|
366
490
|
border-top: none;
|
|
367
491
|
border-left: none;
|
|
368
492
|
border-right: none;
|
|
@@ -380,9 +504,9 @@ const inputStyle = css `
|
|
|
380
504
|
width: 100%;
|
|
381
505
|
border: none;
|
|
382
506
|
outline: none;
|
|
383
|
-
color: var(--
|
|
384
|
-
font-family: var(--
|
|
385
|
-
font-size: var(--
|
|
507
|
+
color: var(--nuraly-input-text-color, var(--nuraly-text-color));
|
|
508
|
+
font-family: var(--nuraly-input-font-family, var(--nuraly-font-family));
|
|
509
|
+
font-size: var(--nuraly-input-font-size, var(--nuraly-font-size));
|
|
386
510
|
}
|
|
387
511
|
|
|
388
512
|
/* Remove default number input spinners */
|
|
@@ -406,13 +530,13 @@ const inputStyle = css `
|
|
|
406
530
|
* Applied when state='error' and not disabled
|
|
407
531
|
*/
|
|
408
532
|
:host(:not([disabled])[state='error']) #input-container {
|
|
409
|
-
border: var(--
|
|
533
|
+
border: var(--nuraly-input-error-border, var(--nuraly-error-border)) !important;
|
|
410
534
|
outline: none !important;
|
|
411
535
|
}
|
|
412
536
|
|
|
413
537
|
/* Override variant-specific error state styling */
|
|
414
538
|
:host([variant='borderless'][state='error']) #input-container {
|
|
415
|
-
border: var(--
|
|
539
|
+
border: var(--nuraly-input-error-border, var(--nuraly-error-border)) !important;
|
|
416
540
|
outline: none !important;
|
|
417
541
|
}
|
|
418
542
|
|
|
@@ -421,7 +545,7 @@ const inputStyle = css `
|
|
|
421
545
|
border-top: none !important;
|
|
422
546
|
border-left: none !important;
|
|
423
547
|
border-right: none !important;
|
|
424
|
-
border-bottom: var(--
|
|
548
|
+
border-bottom: var(--nuraly-input-error-border, var(--nuraly-error-border)) !important;
|
|
425
549
|
}
|
|
426
550
|
|
|
427
551
|
/*
|
|
@@ -431,7 +555,7 @@ const inputStyle = css `
|
|
|
431
555
|
:host([state='error']) input[type='number'] ~ #number-icons,
|
|
432
556
|
:host([state='warning']) input[type='number'] ~ #number-icons {
|
|
433
557
|
position: static;
|
|
434
|
-
padding-left: var(--
|
|
558
|
+
padding-left: var(--nuraly-input-number-icons-container-padding-left, var(--nuraly-number-icons-container-padding-left));
|
|
435
559
|
}
|
|
436
560
|
|
|
437
561
|
/* ========================================
|
|
@@ -443,9 +567,9 @@ const inputStyle = css `
|
|
|
443
567
|
* Applied to slotted label elements
|
|
444
568
|
*/
|
|
445
569
|
::slotted([slot='label']) {
|
|
446
|
-
color: var(--
|
|
447
|
-
font-size: var(--
|
|
448
|
-
padding-bottom: var(--
|
|
570
|
+
color: var(--nuraly-input-label-color, var(--nuraly-label-color));
|
|
571
|
+
font-size: var(--nuraly-input-label-font-size, var(--nuraly-label-font-size));
|
|
572
|
+
padding-bottom: var(--nuraly-input-label-padding-bottom, var(--nuraly-label-padding-bottom));
|
|
449
573
|
}
|
|
450
574
|
|
|
451
575
|
/*
|
|
@@ -453,9 +577,9 @@ const inputStyle = css `
|
|
|
453
577
|
* Applied to slotted helper text elements
|
|
454
578
|
*/
|
|
455
579
|
::slotted([slot='helper-text']) {
|
|
456
|
-
color: var(--
|
|
457
|
-
font-size: var(--
|
|
458
|
-
padding-top: var(--
|
|
580
|
+
color: var(--nuraly-input-helper-text-color, var(--nuraly-helper-text-color));
|
|
581
|
+
font-size: var(--nuraly-input-helper-text-font-size, var(--nuraly-helper-text-font-size));
|
|
582
|
+
padding-top: var(--nuraly-input-helper-text-padding-top, var(--nuraly-helper-text-padding-top));
|
|
459
583
|
|
|
460
584
|
/* Prevent text overflow and ensure proper wrapping without affecting parent width */
|
|
461
585
|
word-wrap: break-word;
|
|
@@ -475,11 +599,11 @@ const inputStyle = css `
|
|
|
475
599
|
* Override helper text color based on validation state
|
|
476
600
|
*/
|
|
477
601
|
:host([state='error']) ::slotted([slot='helper-text']) {
|
|
478
|
-
color: var(--
|
|
602
|
+
color: var(--nuraly-input-error-helper-text-color, var(--nuraly-error-helper-text-color));
|
|
479
603
|
}
|
|
480
604
|
|
|
481
605
|
:host([state='warning']) ::slotted([slot='helper-text']) {
|
|
482
|
-
color: var(--
|
|
606
|
+
color: var(--nuraly-input-warning-helper-text-color, var(--nuraly-warning-helper-text-color));
|
|
483
607
|
}
|
|
484
608
|
|
|
485
609
|
/*
|
|
@@ -487,11 +611,21 @@ const inputStyle = css `
|
|
|
487
611
|
* Applied when input is disabled
|
|
488
612
|
*/
|
|
489
613
|
:host([disabled]) ::slotted([slot='helper-text']) {
|
|
490
|
-
color: var(--
|
|
614
|
+
color: var(--nuraly-input-disabled-helper-text-color, var(--nuraly-disabled-helper-text-color));
|
|
491
615
|
}
|
|
492
616
|
|
|
493
617
|
:host([disabled]) ::slotted([slot='label']) {
|
|
494
|
-
color: var(--
|
|
618
|
+
color: var(--nuraly-input-disabled-label-color, var(--nuraly-disabled-label-color));
|
|
619
|
+
}
|
|
620
|
+
|
|
621
|
+
/*
|
|
622
|
+
* Input prefix wrapper styling
|
|
623
|
+
* Centers the prefix content vertically and horizontally
|
|
624
|
+
*/
|
|
625
|
+
.input-prefix {
|
|
626
|
+
display: flex;
|
|
627
|
+
align-items: center;
|
|
628
|
+
justify-content: center;
|
|
495
629
|
}
|
|
496
630
|
|
|
497
631
|
/*
|
|
@@ -501,12 +635,22 @@ const inputStyle = css `
|
|
|
501
635
|
::slotted([slot='prefix']) {
|
|
502
636
|
display: flex;
|
|
503
637
|
align-items: center;
|
|
504
|
-
padding-right: var(--
|
|
505
|
-
color: var(--
|
|
506
|
-
font-size: var(--
|
|
638
|
+
padding-right: var(--nuraly-input-prefix-padding-right, var(--nuraly-prefix-padding-right));
|
|
639
|
+
color: var(--nuraly-input-prefix-color, var(--nuraly-prefix-color));
|
|
640
|
+
font-size: var(--nuraly-input-prefix-font-size, var(--nuraly-prefix-font-size));
|
|
507
641
|
flex-shrink: 0;
|
|
508
642
|
}
|
|
509
643
|
|
|
644
|
+
/*
|
|
645
|
+
* Input suffix wrapper styling
|
|
646
|
+
* Centers the suffix content vertically and horizontally
|
|
647
|
+
*/
|
|
648
|
+
.input-suffix {
|
|
649
|
+
display: flex;
|
|
650
|
+
align-items: center;
|
|
651
|
+
justify-content: center;
|
|
652
|
+
}
|
|
653
|
+
|
|
510
654
|
/*
|
|
511
655
|
* Suffix slot styling
|
|
512
656
|
* Applied to slotted suffix content (icons, text, etc.)
|
|
@@ -514,9 +658,9 @@ const inputStyle = css `
|
|
|
514
658
|
::slotted([slot='suffix']) {
|
|
515
659
|
display: flex;
|
|
516
660
|
align-items: center;
|
|
517
|
-
padding-left: var(--
|
|
518
|
-
color: var(--
|
|
519
|
-
font-size: var(--
|
|
661
|
+
padding-left: var(--nuraly-input-suffix-padding-left, var(--nuraly-suffix-padding-left));
|
|
662
|
+
color: var(--nuraly-input-suffix-color, var(--nuraly-suffix-color));
|
|
663
|
+
font-size: var(--nuraly-input-suffix-font-size, var(--nuraly-suffix-font-size));
|
|
520
664
|
flex-shrink: 0;
|
|
521
665
|
}
|
|
522
666
|
|
|
@@ -526,8 +670,8 @@ const inputStyle = css `
|
|
|
526
670
|
*/
|
|
527
671
|
:host([disabled]) ::slotted([slot='prefix']),
|
|
528
672
|
:host([disabled]) ::slotted([slot='suffix']) {
|
|
529
|
-
opacity: var(--
|
|
530
|
-
color: var(--
|
|
673
|
+
opacity: var(--nuraly-input-disabled-icon-opacity, var(--nuraly-disabled-icon-opacity));
|
|
674
|
+
color: var(--nuraly-input-disabled-prefix-suffix-color, var(--nuraly-disabled-prefix-suffix-color));
|
|
531
675
|
}
|
|
532
676
|
`;
|
|
533
677
|
/**
|
|
@@ -541,26 +685,33 @@ const sizeInputStyle = css `
|
|
|
541
685
|
|
|
542
686
|
/* Large input size variant */
|
|
543
687
|
div[data-size='large'] {
|
|
544
|
-
padding-top: var(--
|
|
545
|
-
padding-bottom: var(--
|
|
546
|
-
padding-left: var(--
|
|
547
|
-
padding-right: var(--
|
|
688
|
+
padding-top: var(--nuraly-input-large-padding-top, var(--nuraly-large-padding-top));
|
|
689
|
+
padding-bottom: var(--nuraly-input-large-padding-bottom, var(--nuraly-large-padding-bottom));
|
|
690
|
+
padding-left: var(--nuraly-input-large-padding-left, var(--nuraly-large-padding-left));
|
|
691
|
+
padding-right: var(--nuraly-input-large-padding-right, var(--nuraly-large-padding-right));
|
|
548
692
|
}
|
|
549
693
|
|
|
550
694
|
/* Medium input size variant (default) */
|
|
551
695
|
div[data-size='medium'] {
|
|
552
|
-
padding-top: var(--
|
|
553
|
-
padding-bottom: var(--
|
|
554
|
-
padding-left: var(--
|
|
555
|
-
padding-right: var(--
|
|
696
|
+
padding-top: var(--nuraly-input-medium-padding-top, var(--nuraly-medium-padding-top));
|
|
697
|
+
padding-bottom: var(--nuraly-input-medium-padding-bottom, var(--nuraly-medium-padding-bottom));
|
|
698
|
+
padding-left: var(--nuraly-input-medium-padding-left, var(--nuraly-medium-padding-left));
|
|
699
|
+
padding-right: var(--nuraly-input-medium-padding-right, var(--nuraly-medium-padding-right));
|
|
556
700
|
}
|
|
557
701
|
|
|
558
702
|
/* Small input size variant */
|
|
559
703
|
div[data-size='small'] {
|
|
560
|
-
padding-top: var(--
|
|
561
|
-
padding-bottom: var(--
|
|
562
|
-
padding-left: var(--
|
|
563
|
-
padding-right: var(--
|
|
704
|
+
padding-top: var(--nuraly-input-small-padding-top, var(--nuraly-small-padding-top));
|
|
705
|
+
padding-bottom: var(--nuraly-input-small-padding-bottom, var(--nuraly-small-padding-bottom));
|
|
706
|
+
padding-left: var(--nuraly-input-small-padding-left, var(--nuraly-small-padding-left));
|
|
707
|
+
padding-right: var(--nuraly-input-small-padding-right, var(--nuraly-small-padding-right));
|
|
708
|
+
}
|
|
709
|
+
|
|
710
|
+
/* Carbon Design System - Size-specific padding overrides */
|
|
711
|
+
html[data-theme^="carbon"] nr-input div[data-size='medium'],
|
|
712
|
+
body[data-theme^="carbon"] nr-input div[data-size='medium'],
|
|
713
|
+
[data-theme^="carbon"] div[data-size='medium'] {
|
|
714
|
+
padding: 4px 8px !important;
|
|
564
715
|
}
|
|
565
716
|
|
|
566
717
|
/*
|
|
@@ -568,16 +719,16 @@ const sizeInputStyle = css `
|
|
|
568
719
|
* Shows character count and limit information
|
|
569
720
|
*/
|
|
570
721
|
.character-count {
|
|
571
|
-
font-size: var(--
|
|
572
|
-
color: var(--
|
|
722
|
+
font-size: var(--nuraly-input-character-count-font-size, var(--nuraly-character-count-font-size));
|
|
723
|
+
color: var(--nuraly-input-character-count-color, var(--nuraly-character-count-color));
|
|
573
724
|
text-align: right;
|
|
574
|
-
margin-top: var(--
|
|
575
|
-
font-family: var(--
|
|
725
|
+
margin-top: var(--nuraly-input-character-count-margin-top, var(--nuraly-character-count-margin-top));
|
|
726
|
+
font-family: var(--nuraly-input-font-family, var(--nuraly-font-family));
|
|
576
727
|
}
|
|
577
728
|
|
|
578
729
|
/* Character count over limit styling */
|
|
579
730
|
.character-count[data-over-limit] {
|
|
580
|
-
color: var(--
|
|
731
|
+
color: var(--nuraly-input-character-count-over-limit-color, var(--nuraly-character-count-over-limit-color));
|
|
581
732
|
}
|
|
582
733
|
|
|
583
734
|
/* ========================================
|
|
@@ -589,10 +740,10 @@ const sizeInputStyle = css `
|
|
|
589
740
|
* Common styles for error and warning messages
|
|
590
741
|
*/
|
|
591
742
|
.validation-message {
|
|
592
|
-
font-size: var(--
|
|
593
|
-
font-family: var(--
|
|
594
|
-
margin-top: var(--
|
|
595
|
-
padding: var(--
|
|
743
|
+
font-size: var(--nuraly-input-validation-message-font-size, var(--nuraly-validation-message-font-size, 0.875rem));
|
|
744
|
+
font-family: var(--nuraly-input-font-family, var(--nuraly-font-family));
|
|
745
|
+
margin-top: var(--nuraly-input-validation-message-margin-top, var(--nuraly-validation-message-margin-top, 0.25rem));
|
|
746
|
+
padding: var(--nuraly-input-validation-message-padding, var(--nuraly-validation-message-padding, 0));
|
|
596
747
|
|
|
597
748
|
/* Prevent text overflow and ensure proper wrapping without affecting parent width */
|
|
598
749
|
word-wrap: break-word;
|
|
@@ -604,7 +755,7 @@ const sizeInputStyle = css `
|
|
|
604
755
|
width: 0;
|
|
605
756
|
min-width: 100%;
|
|
606
757
|
box-sizing: border-box;
|
|
607
|
-
line-height: var(--
|
|
758
|
+
line-height: var(--nuraly-input-validation-message-line-height, var(--nuraly-validation-message-line-height, 1.4));
|
|
608
759
|
}
|
|
609
760
|
|
|
610
761
|
/*
|
|
@@ -612,7 +763,7 @@ const sizeInputStyle = css `
|
|
|
612
763
|
* Applied when validation message has error class
|
|
613
764
|
*/
|
|
614
765
|
.validation-message.error {
|
|
615
|
-
color: var(--
|
|
766
|
+
color: var(--nuraly-input-error-message-color, var(--nuraly-error-message-color, var(--nuraly-input-error-color, var(--nuraly-error-color, #dc2626))));
|
|
616
767
|
}
|
|
617
768
|
|
|
618
769
|
/*
|
|
@@ -620,7 +771,7 @@ const sizeInputStyle = css `
|
|
|
620
771
|
* Applied when validation message has warning class
|
|
621
772
|
*/
|
|
622
773
|
.validation-message.warning {
|
|
623
|
-
color: var(--
|
|
774
|
+
color: var(--nuraly-input-warning-message-color, var(--nuraly-warning-message-color, var(--nuraly-input-warning-color, var(--nuraly-warning-color, #d97706))));
|
|
624
775
|
}
|
|
625
776
|
|
|
626
777
|
/*
|
|
@@ -628,8 +779,8 @@ const sizeInputStyle = css `
|
|
|
628
779
|
* Applied when input is disabled
|
|
629
780
|
*/
|
|
630
781
|
:host([disabled]) .validation-message {
|
|
631
|
-
opacity: var(--
|
|
632
|
-
color: var(--
|
|
782
|
+
opacity: var(--nuraly-input-disabled-validation-message-opacity, var(--nuraly-disabled-validation-message-opacity, 0.6));
|
|
783
|
+
color: var(--nuraly-input-disabled-validation-message-color, var(--nuraly-disabled-validation-message-color));
|
|
633
784
|
}
|
|
634
785
|
|
|
635
786
|
/*
|
|
@@ -649,7 +800,7 @@ const sizeInputStyle = css `
|
|
|
649
800
|
* Applied when async validation is in progress
|
|
650
801
|
*/
|
|
651
802
|
.validation-icon.validation-loading {
|
|
652
|
-
color: var(--
|
|
803
|
+
color: var(--nuraly-input-primary-color, var(--nuraly-primary-color, #3b82f6));
|
|
653
804
|
animation: validation-hourglass 2s ease-in-out infinite;
|
|
654
805
|
transform-origin: center;
|
|
655
806
|
}
|
|
@@ -659,7 +810,7 @@ const sizeInputStyle = css `
|
|
|
659
810
|
* Applied when validation fails
|
|
660
811
|
*/
|
|
661
812
|
.validation-icon.validation-error {
|
|
662
|
-
color: var(--
|
|
813
|
+
color: var(--nuraly-input-error-color, var(--nuraly-error-color, #dc2626));
|
|
663
814
|
}
|
|
664
815
|
|
|
665
816
|
/*
|
|
@@ -667,7 +818,7 @@ const sizeInputStyle = css `
|
|
|
667
818
|
* Applied when validation has warnings
|
|
668
819
|
*/
|
|
669
820
|
.validation-icon.validation-warning {
|
|
670
|
-
color: var(--
|
|
821
|
+
color: var(--nuraly-input-warning-color, var(--nuraly-warning-color, #d97706));
|
|
671
822
|
}
|
|
672
823
|
|
|
673
824
|
/*
|
|
@@ -675,7 +826,7 @@ const sizeInputStyle = css `
|
|
|
675
826
|
* Applied when validation passes
|
|
676
827
|
*/
|
|
677
828
|
.validation-icon.validation-success {
|
|
678
|
-
color: var(--
|
|
829
|
+
color: var(--nuraly-input-success-color, var(--nuraly-success-color, #16a34a));
|
|
679
830
|
}
|
|
680
831
|
|
|
681
832
|
/*
|
|
@@ -722,5 +873,5 @@ const sizeInputStyle = css `
|
|
|
722
873
|
}
|
|
723
874
|
*/
|
|
724
875
|
`;
|
|
725
|
-
export const styles = [inputStyle, sizeInputStyle
|
|
876
|
+
export const styles = [inputStyle, sizeInputStyle];
|
|
726
877
|
//# sourceMappingURL=input.style.js.map
|