@greghowe79/the-lib 1.7.2 → 1.7.4

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.
Files changed (3) hide show
  1. package/lib/components/input/styles.css.qwik.cjs +1 -414
  2. package/lib/components/input/styles.css.qwik.mjs +1 -414
  3. package/package.json +1 -1
package/lib/components/input/styles.css.qwik.cjs CHANGED
@@ -1,416 +1,3 @@
1
1
  "use strict";
2
- const styles = `.input-container {\r
3
- font-family: 'Roboto Condensed', sans-serif;\r
4
- }\r
5
- \r
6
- .input-label:not([type='checkbox']) {\r
7
- font-size: 0.8125rem;\r
8
- line-height: 1.85;\r
9
- letter-spacing: 0.0625rem;\r
10
- color: #333;\r
11
- position: relative;\r
12
- height: 3.29412rem;\r
13
- display: flex;\r
14
- min-width: 0;\r
15
- background: rgba(0, 0, 0, 0.04);\r
16
- transition:\r
17
- color 0.15s ease,\r
18
- box-shadow 0.15s ease,\r
19
- background 0.15s ease;\r
20
- }\r
21
- \r
22
- .input-label.bg_light:not([type='checkbox']) {\r
23
- background: white;\r
24
- box-shadow: inset 0 0 0 1px #86868b;\r
25
- }\r
26
- \r
27
- .input-label.bg_light:not([type='checkbox']):focus-within {\r
28
- box-shadow: inset 0 0 0 1.5px #007aff;\r
29
- }\r
30
- \r
31
- .input {\r
32
- background: transparent;\r
33
- padding: 0 0.9375rem;\r
34
- flex: 1;\r
35
- font-size: 1rem;\r
36
- font-family: 'Roboto Condensed', sans-serif;\r
37
- font-weight: 100;\r
38
- letter-spacing: inherit;\r
39
- color: inherit;\r
40
- height: 100%;\r
41
- border: none;\r
42
- -webkit-appearance: none;\r
43
- -moz-appearance: none;\r
44
- appearance: none;\r
45
- white-space: nowrap;\r
46
- text-overflow: ellipsis;\r
47
- overflow: hidden;\r
48
- width: calc(100% - 0.9375rem * 2);\r
49
- border-radius: 0.75rem;\r
50
- }\r
51
- \r
52
- .input::placeholder {\r
53
- color: #6e6e73;\r
54
- }\r
55
- \r
56
- .input:focus {\r
57
- outline: none;\r
58
- opacity: 1;\r
59
- }\r
60
- \r
61
- .input-label {\r
62
- border-radius: 0.75rem;\r
63
- transition: box-shadow 0.15s ease;\r
64
- }\r
65
- \r
66
- .input-label:focus-within {\r
67
- box-shadow: inset 0 0 0 1.5px #007aff;\r
68
- }\r
69
- \r
70
- .error-message {\r
71
- color: #e74c3c;\r
72
- font-size: 0.875rem;\r
73
- margin-top: 0.25rem;\r
74
- font-size: 1rem;\r
75
- font-family: 'Roboto Condensed', sans-serif;\r
76
- }\r
77
- \r
78
- .flex_wrapper {\r
79
- display: flex;\r
80
- justify-content: flex-start;\r
81
- align-items: center;\r
82
- }\r
83
- \r
84
- .label_wrapper {\r
85
- display: inline-flex;\r
86
- align-items: center;\r
87
- border-radius: 0.75rem 0 0 0.75rem;\r
88
- height: 3.29412rem;\r
89
- background-color: #0095ae;\r
90
- }\r
91
- \r
92
- .preview_container {\r
93
- height: 3.29412rem;\r
94
- display: flex;\r
95
- align-items: center;\r
96
- background: rgba(0, 0, 0, 0.04);\r
97
- border-radius: 0 0.75rem 0.75rem 0;\r
98
- color: #333;\r
99
- letter-spacing: 0.0625rem;\r
100
- font-size: 0.875rem;\r
101
- width: calc(100% - 3.4375rem);\r
102
- }\r
103
- \r
104
- .prev_wrap {\r
105
- display: flex;\r
106
- align-items: center;\r
107
- justify-content: center;\r
108
- width: calc(100% - 6.25rem);\r
109
- }\r
110
- \r
111
- .preview {\r
112
- margin: 0;\r
113
- border: none;\r
114
- }\r
115
- \r
116
- .input[type='file'] {\r
117
- position: absolute;\r
118
- width: 0.0625rem;\r
119
- height: 0.0625rem;\r
120
- padding: 0;\r
121
- margin: -0.0625rem;\r
122
- overflow: hidden;\r
123
- clip: rect(0, 0, 0, 0);\r
124
- border: 0;\r
125
- }\r
126
- \r
127
- .input-label {\r
128
- cursor: pointer;\r
129
- }\r
130
- \r
131
- .input-label-upload {\r
132
- cursor: pointer;\r
133
- width: 6.25rem;\r
134
- color: #fff;\r
135
- display: flex;\r
136
- align-items: center;\r
137
- justify-content: center;\r
138
- height: 3.4375rem;\r
139
- }\r
140
- \r
141
- .input-label:hover {\r
142
- background-color: rgba(0, 0, 0, 0.1);\r
143
- }\r
144
- \r
145
- .input-wrapper {\r
146
- position: relative;\r
147
- display: flex;\r
148
- align-items: center;\r
149
- width: 100%;\r
150
- padding: 0 0.9375rem;\r
151
- }\r
152
- \r
153
- .input-icon {\r
154
- display: flex;\r
155
- align-items: center;\r
156
- justify-content: center;\r
157
- pointer-events: none;\r
158
- }\r
159
- \r
160
- .input.with-icon {\r
161
- padding-left: 2.5rem;\r
162
- }\r
163
- .no_icon {\r
164
- width: 100%;\r
165
- }\r
166
- \r
167
- .sr-only {\r
168
- position: absolute;\r
169
- width: 1px;\r
170
- height: 1px;\r
171
- padding: 0;\r
172
- margin: -1px;\r
173
- overflow: hidden;\r
174
- clip: rect(0, 0, 0, 0);\r
175
- white-space: nowrap;\r
176
- border: 0;\r
177
- }\r
178
- \r
179
- input[type='number']::-webkit-outer-spin-button,\r
180
- input[type='number']::-webkit-inner-spin-button {\r
181
- -webkit-appearance: none;\r
182
- margin: 0;\r
183
- }\r
184
- \r
185
- input[type='number'] {\r
186
- -moz-appearance: textfield;\r
187
- appearance: textfield;\r
188
- }\r
189
- \r
190
- .password-toggle-btn {\r
191
- position: absolute;\r
192
- right: 12px;\r
193
- top: 50%;\r
194
- transform: translateY(-50%);\r
195
- background: none;\r
196
- border: none;\r
197
- cursor: pointer;\r
198
- padding: 4px;\r
199
- display: flex;\r
200
- align-items: center;\r
201
- justify-content: center;\r
202
- color: inherit;\r
203
- opacity: 0.6;\r
204
- transition: opacity 0.2s;\r
205
- }\r
206
- \r
207
- .password-toggle-btn:focus {\r
208
- outline: none;\r
209
- }\r
210
- \r
211
- .input-wrapper {\r
212
- position: relative;\r
213
- }\r
214
- \r
215
- .input-label.bg_light:not(:focus-within) .input-wrapper input.input:-webkit-autofill,\r
216
- .input-label.bg_light:not(:focus-within) .input-wrapper input.input:-webkit-autofill:hover,\r
217
- .input-label.bg_light:not(:focus-within) .input-wrapper input.input:-webkit-autofill:active {\r
218
- -webkit-box-shadow: 0 0 0 9999px #ffffff inset !important;\r
219
- box-shadow: 0 0 0 9999px #ffffff inset !important;\r
220
- -webkit-text-fill-color: #333 !important;\r
221
- font-family: 'Roboto Condensed', sans-serif !important;\r
222
- font-size: 1rem !important;\r
223
- font-weight: 100 !important;\r
224
- color: #333 !important;\r
225
- background-color: transparent !important;\r
226
- background-image: none !important;\r
227
- transition:\r
228
- background-color 5000s ease-in-out 0s,\r
229
- color 5000s ease-in-out 0s !important;\r
230
- }\r
231
- \r
232
- .input-label.bg_light:focus-within .input-wrapper input.input:-webkit-autofill,\r
233
- .input-label.bg_light:focus-within .input-wrapper input.input:-webkit-autofill:hover,\r
234
- .input-label.bg_light:focus-within .input-wrapper input.input:-webkit-autofill:active {\r
235
- -webkit-box-shadow: none !important;\r
236
- box-shadow: none !important;\r
237
- -webkit-text-fill-color: #333 !important;\r
238
- font-family: 'Roboto Condensed', sans-serif !important;\r
239
- font-size: 1rem !important;\r
240
- font-weight: 100 !important;\r
241
- color: #333 !important;\r
242
- background-color: transparent !important;\r
243
- background-image: none !important;\r
244
- }\r
245
- \r
246
- .input-label:not(.bg_light):not(:focus-within) .input-wrapper input.input:-webkit-autofill,\r
247
- .input-label:not(.bg_light):not(:focus-within) .input-wrapper input.input:-webkit-autofill:hover,\r
248
- .input-label:not(.bg_light):not(:focus-within) .input-wrapper input.input:-webkit-autofill:active {\r
249
- -webkit-box-shadow: 0 0 0 9999px #f5f5f5 inset !important;\r
250
- box-shadow: 0 0 0 9999px #f5f5f5 inset !important;\r
251
- -webkit-text-fill-color: #333 !important;\r
252
- font-family: 'Roboto Condensed', sans-serif !important;\r
253
- font-size: 1rem !important;\r
254
- font-weight: 100 !important;\r
255
- color: #333 !important;\r
256
- background-color: transparent !important;\r
257
- background-image: none !important;\r
258
- transition:\r
259
- background-color 5000s ease-in-out 0s,\r
260
- color 5000s ease-in-out 0s !important;\r
261
- }\r
262
- \r
263
- .input-label:not(.bg_light):focus-within .input-wrapper input.input:-webkit-autofill,\r
264
- .input-label:not(.bg_light):focus-within .input-wrapper input.input:-webkit-autofill:hover,\r
265
- .input-label:not(.bg_light):focus-within .input-wrapper input.input:-webkit-autofill:active {\r
266
- -webkit-box-shadow: none !important;\r
267
- box-shadow: none !important;\r
268
- -webkit-text-fill-color: #333 !important;\r
269
- font-family: 'Roboto Condensed', sans-serif !important;\r
270
- font-size: 1rem !important;\r
271
- font-weight: 100 !important;\r
272
- color: #333 !important;\r
273
- background-color: transparent !important;\r
274
- background-image: none !important;\r
275
- }\r
276
- \r
277
- .input-label.bg_light:not(:focus-within) input.input:-webkit-autofill,\r
278
- .input-label.bg_light:not(:focus-within) input.input:-webkit-autofill:hover,\r
279
- .input-label.bg_light:not(:focus-within) input.input:-webkit-autofill:active {\r
280
- -webkit-box-shadow: 0 0 0 9999px #ffffff inset !important;\r
281
- box-shadow: 0 0 0 9999px #ffffff inset !important;\r
282
- -webkit-text-fill-color: #333 !important;\r
283
- font-family: 'Roboto Condensed', sans-serif !important;\r
284
- font-size: 1rem !important;\r
285
- font-weight: 100 !important;\r
286
- color: #333 !important;\r
287
- background-color: transparent !important;\r
288
- background-image: none !important;\r
289
- transition:\r
290
- background-color 5000s ease-in-out 0s,\r
291
- color 5000s ease-in-out 0s !important;\r
292
- }\r
293
- \r
294
- .input-label.bg_light:focus-within input.input:-webkit-autofill,\r
295
- .input-label.bg_light:focus-within input.input:-webkit-autofill:hover,\r
296
- .input-label.bg_light:focus-within input.input:-webkit-autofill:active {\r
297
- -webkit-box-shadow: none !important;\r
298
- box-shadow: none !important;\r
299
- -webkit-text-fill-color: #333 !important;\r
300
- font-family: 'Roboto Condensed', sans-serif !important;\r
301
- font-size: 1rem !important;\r
302
- font-weight: 100 !important;\r
303
- color: #333 !important;\r
304
- background-color: transparent !important;\r
305
- background-image: none !important;\r
306
- }\r
307
- \r
308
- .input-label:not(.bg_light):not(:focus-within) input.input:-webkit-autofill,\r
309
- .input-label:not(.bg_light):not(:focus-within) input.input:-webkit-autofill:hover,\r
310
- .input-label:not(.bg_light):not(:focus-within) input.input:-webkit-autofill:active {\r
311
- /* -webkit-box-shadow: 0 0 0 9999px #f5f5f5 inset !important;\r
312
- box-shadow: 0 0 0 9999px #f5f5f5 inset !important; */\r
313
- -webkit-text-fill-color: #333 !important;\r
314
- font-family: 'Roboto Condensed', sans-serif !important;\r
315
- font-size: 1rem !important;\r
316
- font-weight: 100 !important;\r
317
- color: #333 !important;\r
318
- background-color: transparent !important;\r
319
- background-image: none !important;\r
320
- transition:\r
321
- background-color 5000s ease-in-out 0s,\r
322
- color 5000s ease-in-out 0s !important;\r
323
- }\r
324
- \r
325
- .input-label:not(.bg_light):focus-within input.input:-webkit-autofill,\r
326
- .input-label:not(.bg_light):focus-within input.input:-webkit-autofill:hover,\r
327
- .input-label:not(.bg_light):focus-within input.input:-webkit-autofill:active {\r
328
- -webkit-box-shadow: none !important;\r
329
- box-shadow: none !important;\r
330
- -webkit-text-fill-color: #333 !important;\r
331
- font-family: 'Roboto Condensed', sans-serif !important;\r
332
- font-size: 1rem !important;\r
333
- font-weight: 100 !important;\r
334
- color: #333 !important;\r
335
- background-color: transparent !important;\r
336
- background-image: none !important;\r
337
- }\r
338
- \r
339
- /* NUOVO CODICE */\r
340
- \r
341
- /* ==========================\r
342
- PATCH MIRATA - Mantieni il tuo CSS originale,\r
343
- previeni il background user-agent al focus e\r
344
- conserva il bordo blu personalizzato anche quando\r
345
- clicchi l'icona / toggle password.\r
346
- Appendere in fondo al file.\r
347
- ========================== */\r
348
- \r
349
- /* 1) Quando Chrome applica autofill + focus, forza uno shadow inset trasparente\r
350
- così il layer user-agent non "sbuca" sopra il wrapper. */\r
351
- input.input:-webkit-autofill:focus,\r
352
- input.input:-webkit-autofill:active {\r
353
- -webkit-box-shadow: 0 0 0 9999px transparent inset !important;\r
354
- box-shadow: 0 0 0 9999px transparent inset !important;\r
355
- background-color: transparent !important;\r
356
- background-image: none !important;\r
357
- -webkit-text-fill-color: #333 !important;\r
358
- background-clip: padding-box !important;\r
359
- -webkit-background-clip: padding-box !important;\r
360
- }\r
361
- \r
362
- /* 2) Ripristina esplicitamente lo stato di autofill coerente con i due temi\r
363
- (bg_light / default) anche quando il campo ha focus o viene ri-renderizzato */\r
364
- .input-label.bg_light input.input:-webkit-autofill,\r
365
- .input-label.bg_light input.input:-webkit-autofill:hover,\r
366
- .input-label.bg_light input.input:-webkit-autofill:focus,\r
367
- .input-label.bg_light input.input:-webkit-autofill:active {\r
368
- -webkit-box-shadow: 0 0 0 9999px #ffffff inset !important;\r
369
- box-shadow: 0 0 0 9999px #ffffff inset !important;\r
370
- -webkit-text-fill-color: #333 !important;\r
371
- background-color: transparent !important;\r
372
- background-image: none !important;\r
373
- background-clip: padding-box !important;\r
374
- -webkit-background-clip: padding-box !important;\r
375
- }\r
376
- \r
377
- .input-label:not(.bg_light) input.input:-webkit-autofill,\r
378
- .input-label:not(.bg_light) input.input:-webkit-autofill:hover,\r
379
- .input-label:not(.bg_light) input.input:-webkit-autofill:focus,\r
380
- .input-label:not(.bg_light) input.input:-webkit-autofill:active {\r
381
- /* -webkit-box-shadow: 0 0 0 9999px #f5f5f5 inset !important;\r
382
- box-shadow: 0 0 0 9999px #f5f5f5 inset !important; */\r
383
- -webkit-text-fill-color: #333 !important;\r
384
- background-color: transparent !important;\r
385
- background-image: none !important;\r
386
- background-clip: padding-box !important;\r
387
- -webkit-background-clip: padding-box !important;\r
388
- }\r
389
- \r
390
- /* 3) Forza il bordo blu del wrapper anche se il focus passa al bottone/alla icona.\r
391
- La regola esistente .input-label:focus-within c'è già, ma qui la rinforziamo. */\r
392
- .input-label:focus-within {\r
393
- box-shadow: inset 0 0 0 1.5px #007aff !important;\r
394
- -webkit-box-shadow: inset 0 0 0 1.5px #007aff !important;\r
395
- background-color: inherit !important;\r
396
- }\r
397
- \r
398
- /* 4) Micro-fix per il toggle password: evita che rimuova styling ereditato\r
399
- (manteniamo il comportamento visivo ma assicuriamo che non interrompa il :focus-within) */\r
400
- .password-toggle-btn {\r
401
- pointer-events: auto !important;\r
402
- background: none !important;\r
403
- border: none !important;\r
404
- -webkit-appearance: none !important;\r
405
- appearance: none !important;\r
406
- }\r
407
- \r
408
- /* 5) Ulteriore sicurezza: assicurati che gli input password non ricevano lo sfondo UA */\r
409
- input[type='password']:-webkit-autofill,\r
410
- input[type='password']:-webkit-autofill:focus {\r
411
- -webkit-box-shadow: 0 0 0 9999px transparent inset !important;\r
412
- box-shadow: 0 0 0 9999px transparent inset !important;\r
413
- background-color: transparent !important;\r
414
- }\r
415
- `;
2
+ const styles = ".input-container {\r\n font-family: 'Roboto Condensed', sans-serif;\r\n}\r\n\r\n.input-label:not([type='checkbox']) {\r\n font-size: 0.8125rem;\r\n line-height: 1.85;\r\n letter-spacing: 0.0625rem;\r\n color: #333;\r\n position: relative;\r\n height: 3.29412rem;\r\n display: flex;\r\n min-width: 0;\r\n background: rgba(0, 0, 0, 0.04);\r\n transition:\r\n color 0.15s ease,\r\n box-shadow 0.15s ease,\r\n background 0.15s ease;\r\n}\r\n\r\n.input-label.bg_light:not([type='checkbox']) {\r\n background: white;\r\n box-shadow: inset 0 0 0 1px #86868b;\r\n}\r\n\r\n.input-label.bg_light:not([type='checkbox']):focus-within {\r\n box-shadow: inset 0 0 0 1.5px #007aff;\r\n}\r\n\r\n.input {\r\n background: transparent;\r\n padding: 0 0.9375rem;\r\n flex: 1;\r\n font-size: 1rem;\r\n font-family: 'Roboto Condensed', sans-serif;\r\n font-weight: 100;\r\n letter-spacing: inherit;\r\n color: inherit;\r\n height: 100%;\r\n border: none;\r\n -webkit-appearance: none;\r\n -moz-appearance: none;\r\n appearance: none;\r\n white-space: nowrap;\r\n text-overflow: ellipsis;\r\n overflow: hidden;\r\n width: calc(100% - 0.9375rem * 2);\r\n border-radius: 0.75rem;\r\n}\r\n\r\n.input::placeholder {\r\n color: #6e6e73;\r\n}\r\n\r\n.input:focus {\r\n outline: none;\r\n opacity: 1;\r\n}\r\n\r\n.input-label {\r\n border-radius: 0.75rem;\r\n transition: box-shadow 0.15s ease;\r\n}\r\n\r\n.input-label:focus-within {\r\n box-shadow: inset 0 0 0 1.5px #007aff;\r\n}\r\n\r\n.error-message {\r\n color: #e74c3c;\r\n font-size: 0.875rem;\r\n margin-top: 0.25rem;\r\n font-size: 1rem;\r\n font-family: 'Roboto Condensed', sans-serif;\r\n}\r\n\r\n.flex_wrapper {\r\n display: flex;\r\n justify-content: flex-start;\r\n align-items: center;\r\n}\r\n\r\n.label_wrapper {\r\n display: inline-flex;\r\n align-items: center;\r\n border-radius: 0.75rem 0 0 0.75rem;\r\n height: 3.29412rem;\r\n background-color: #0095ae;\r\n}\r\n\r\n.preview_container {\r\n height: 3.29412rem;\r\n display: flex;\r\n align-items: center;\r\n background: rgba(0, 0, 0, 0.04);\r\n border-radius: 0 0.75rem 0.75rem 0;\r\n color: #333;\r\n letter-spacing: 0.0625rem;\r\n font-size: 0.875rem;\r\n width: calc(100% - 3.4375rem);\r\n}\r\n\r\n.prev_wrap {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n width: calc(100% - 6.25rem);\r\n}\r\n\r\n.preview {\r\n margin: 0;\r\n border: none;\r\n}\r\n\r\n.input[type='file'] {\r\n position: absolute;\r\n width: 0.0625rem;\r\n height: 0.0625rem;\r\n padding: 0;\r\n margin: -0.0625rem;\r\n overflow: hidden;\r\n clip: rect(0, 0, 0, 0);\r\n border: 0;\r\n}\r\n\r\n.input-label {\r\n cursor: pointer;\r\n}\r\n\r\n.input-label-upload {\r\n cursor: pointer;\r\n width: 6.25rem;\r\n color: #fff;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n height: 3.4375rem;\r\n}\r\n\r\n.input-label:hover {\r\n background-color: rgba(0, 0, 0, 0.1);\r\n}\r\n\r\n.input-wrapper {\r\n position: relative;\r\n display: flex;\r\n align-items: center;\r\n width: 100%;\r\n padding: 0 0.9375rem;\r\n}\r\n\r\n.input-icon {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n pointer-events: none;\r\n}\r\n\r\n.input.with-icon {\r\n padding-left: 2.5rem;\r\n}\r\n.no_icon {\r\n width: 100%;\r\n}\r\n\r\n.sr-only {\r\n position: absolute;\r\n width: 1px;\r\n height: 1px;\r\n padding: 0;\r\n margin: -1px;\r\n overflow: hidden;\r\n clip: rect(0, 0, 0, 0);\r\n white-space: nowrap;\r\n border: 0;\r\n}\r\n\r\ninput[type='number']::-webkit-outer-spin-button,\r\ninput[type='number']::-webkit-inner-spin-button {\r\n -webkit-appearance: none;\r\n margin: 0;\r\n}\r\n\r\ninput[type='number'] {\r\n -moz-appearance: textfield;\r\n appearance: textfield;\r\n}\r\n\r\n.password-toggle-btn {\r\n position: absolute;\r\n right: 12px;\r\n top: 50%;\r\n transform: translateY(-50%);\r\n background: none;\r\n border: none;\r\n cursor: pointer;\r\n padding: 4px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n color: inherit;\r\n opacity: 0.6;\r\n transition: opacity 0.2s;\r\n}\r\n\r\n.password-toggle-btn:focus {\r\n outline: none;\r\n}\r\n\r\n.input-wrapper {\r\n position: relative;\r\n}\r\n\r\n/* Versione finale CSS puro - CON I TUOI COLORI ESATTI */\r\n\r\ninput:-webkit-autofill,\r\ninput:-webkit-autofill:hover,\r\ninput:-webkit-autofill:focus,\r\ninput:-webkit-autofill:active {\r\n -webkit-text-fill-color: #333 !important;\r\n font-family: 'Roboto Condensed', sans-serif !important;\r\n font-size: 1rem !important;\r\n font-weight: 100 !important;\r\n letter-spacing: inherit !important;\r\n color: #333 !important;\r\n transition:\r\n background-color 600000s 0s,\r\n color 600000s 0s !important;\r\n}\r\n\r\n/* Background BIANCO per bg_light - il tuo colore originale */\r\n.input-label.bg_light input:-webkit-autofill,\r\n.input-label.bg_light .input-wrapper input:-webkit-autofill {\r\n -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;\r\n}\r\n\r\n/* Background GRIGIO CHIARO per default - il tuo colore originale rgba(0, 0, 0, 0.04) */\r\n.input-label:not(.bg_light) input:-webkit-autofill,\r\n.input-label:not(.bg_light) .input-wrapper input:-webkit-autofill {\r\n -webkit-box-shadow: 0 0 0 1000px rgba(0, 0, 0, 0.04) inset !important;\r\n}\r\n\r\n/* Focus - rimuovi box-shadow per mostrare il BORDO BLU (#007aff) */\r\n.input-label:focus-within input:-webkit-autofill,\r\n.input-label:focus-within .input-wrapper input:-webkit-autofill {\r\n -webkit-box-shadow: none !important;\r\n}\r\n";
416
3
  module.exports = styles;
package/lib/components/input/styles.css.qwik.mjs CHANGED
@@ -1,417 +1,4 @@
1
- const styles = `.input-container {\r
2
- font-family: 'Roboto Condensed', sans-serif;\r
3
- }\r
4
- \r
5
- .input-label:not([type='checkbox']) {\r
6
- font-size: 0.8125rem;\r
7
- line-height: 1.85;\r
8
- letter-spacing: 0.0625rem;\r
9
- color: #333;\r
10
- position: relative;\r
11
- height: 3.29412rem;\r
12
- display: flex;\r
13
- min-width: 0;\r
14
- background: rgba(0, 0, 0, 0.04);\r
15
- transition:\r
16
- color 0.15s ease,\r
17
- box-shadow 0.15s ease,\r
18
- background 0.15s ease;\r
19
- }\r
20
- \r
21
- .input-label.bg_light:not([type='checkbox']) {\r
22
- background: white;\r
23
- box-shadow: inset 0 0 0 1px #86868b;\r
24
- }\r
25
- \r
26
- .input-label.bg_light:not([type='checkbox']):focus-within {\r
27
- box-shadow: inset 0 0 0 1.5px #007aff;\r
28
- }\r
29
- \r
30
- .input {\r
31
- background: transparent;\r
32
- padding: 0 0.9375rem;\r
33
- flex: 1;\r
34
- font-size: 1rem;\r
35
- font-family: 'Roboto Condensed', sans-serif;\r
36
- font-weight: 100;\r
37
- letter-spacing: inherit;\r
38
- color: inherit;\r
39
- height: 100%;\r
40
- border: none;\r
41
- -webkit-appearance: none;\r
42
- -moz-appearance: none;\r
43
- appearance: none;\r
44
- white-space: nowrap;\r
45
- text-overflow: ellipsis;\r
46
- overflow: hidden;\r
47
- width: calc(100% - 0.9375rem * 2);\r
48
- border-radius: 0.75rem;\r
49
- }\r
50
- \r
51
- .input::placeholder {\r
52
- color: #6e6e73;\r
53
- }\r
54
- \r
55
- .input:focus {\r
56
- outline: none;\r
57
- opacity: 1;\r
58
- }\r
59
- \r
60
- .input-label {\r
61
- border-radius: 0.75rem;\r
62
- transition: box-shadow 0.15s ease;\r
63
- }\r
64
- \r
65
- .input-label:focus-within {\r
66
- box-shadow: inset 0 0 0 1.5px #007aff;\r
67
- }\r
68
- \r
69
- .error-message {\r
70
- color: #e74c3c;\r
71
- font-size: 0.875rem;\r
72
- margin-top: 0.25rem;\r
73
- font-size: 1rem;\r
74
- font-family: 'Roboto Condensed', sans-serif;\r
75
- }\r
76
- \r
77
- .flex_wrapper {\r
78
- display: flex;\r
79
- justify-content: flex-start;\r
80
- align-items: center;\r
81
- }\r
82
- \r
83
- .label_wrapper {\r
84
- display: inline-flex;\r
85
- align-items: center;\r
86
- border-radius: 0.75rem 0 0 0.75rem;\r
87
- height: 3.29412rem;\r
88
- background-color: #0095ae;\r
89
- }\r
90
- \r
91
- .preview_container {\r
92
- height: 3.29412rem;\r
93
- display: flex;\r
94
- align-items: center;\r
95
- background: rgba(0, 0, 0, 0.04);\r
96
- border-radius: 0 0.75rem 0.75rem 0;\r
97
- color: #333;\r
98
- letter-spacing: 0.0625rem;\r
99
- font-size: 0.875rem;\r
100
- width: calc(100% - 3.4375rem);\r
101
- }\r
102
- \r
103
- .prev_wrap {\r
104
- display: flex;\r
105
- align-items: center;\r
106
- justify-content: center;\r
107
- width: calc(100% - 6.25rem);\r
108
- }\r
109
- \r
110
- .preview {\r
111
- margin: 0;\r
112
- border: none;\r
113
- }\r
114
- \r
115
- .input[type='file'] {\r
116
- position: absolute;\r
117
- width: 0.0625rem;\r
118
- height: 0.0625rem;\r
119
- padding: 0;\r
120
- margin: -0.0625rem;\r
121
- overflow: hidden;\r
122
- clip: rect(0, 0, 0, 0);\r
123
- border: 0;\r
124
- }\r
125
- \r
126
- .input-label {\r
127
- cursor: pointer;\r
128
- }\r
129
- \r
130
- .input-label-upload {\r
131
- cursor: pointer;\r
132
- width: 6.25rem;\r
133
- color: #fff;\r
134
- display: flex;\r
135
- align-items: center;\r
136
- justify-content: center;\r
137
- height: 3.4375rem;\r
138
- }\r
139
- \r
140
- .input-label:hover {\r
141
- background-color: rgba(0, 0, 0, 0.1);\r
142
- }\r
143
- \r
144
- .input-wrapper {\r
145
- position: relative;\r
146
- display: flex;\r
147
- align-items: center;\r
148
- width: 100%;\r
149
- padding: 0 0.9375rem;\r
150
- }\r
151
- \r
152
- .input-icon {\r
153
- display: flex;\r
154
- align-items: center;\r
155
- justify-content: center;\r
156
- pointer-events: none;\r
157
- }\r
158
- \r
159
- .input.with-icon {\r
160
- padding-left: 2.5rem;\r
161
- }\r
162
- .no_icon {\r
163
- width: 100%;\r
164
- }\r
165
- \r
166
- .sr-only {\r
167
- position: absolute;\r
168
- width: 1px;\r
169
- height: 1px;\r
170
- padding: 0;\r
171
- margin: -1px;\r
172
- overflow: hidden;\r
173
- clip: rect(0, 0, 0, 0);\r
174
- white-space: nowrap;\r
175
- border: 0;\r
176
- }\r
177
- \r
178
- input[type='number']::-webkit-outer-spin-button,\r
179
- input[type='number']::-webkit-inner-spin-button {\r
180
- -webkit-appearance: none;\r
181
- margin: 0;\r
182
- }\r
183
- \r
184
- input[type='number'] {\r
185
- -moz-appearance: textfield;\r
186
- appearance: textfield;\r
187
- }\r
188
- \r
189
- .password-toggle-btn {\r
190
- position: absolute;\r
191
- right: 12px;\r
192
- top: 50%;\r
193
- transform: translateY(-50%);\r
194
- background: none;\r
195
- border: none;\r
196
- cursor: pointer;\r
197
- padding: 4px;\r
198
- display: flex;\r
199
- align-items: center;\r
200
- justify-content: center;\r
201
- color: inherit;\r
202
- opacity: 0.6;\r
203
- transition: opacity 0.2s;\r
204
- }\r
205
- \r
206
- .password-toggle-btn:focus {\r
207
- outline: none;\r
208
- }\r
209
- \r
210
- .input-wrapper {\r
211
- position: relative;\r
212
- }\r
213
- \r
214
- .input-label.bg_light:not(:focus-within) .input-wrapper input.input:-webkit-autofill,\r
215
- .input-label.bg_light:not(:focus-within) .input-wrapper input.input:-webkit-autofill:hover,\r
216
- .input-label.bg_light:not(:focus-within) .input-wrapper input.input:-webkit-autofill:active {\r
217
- -webkit-box-shadow: 0 0 0 9999px #ffffff inset !important;\r
218
- box-shadow: 0 0 0 9999px #ffffff inset !important;\r
219
- -webkit-text-fill-color: #333 !important;\r
220
- font-family: 'Roboto Condensed', sans-serif !important;\r
221
- font-size: 1rem !important;\r
222
- font-weight: 100 !important;\r
223
- color: #333 !important;\r
224
- background-color: transparent !important;\r
225
- background-image: none !important;\r
226
- transition:\r
227
- background-color 5000s ease-in-out 0s,\r
228
- color 5000s ease-in-out 0s !important;\r
229
- }\r
230
- \r
231
- .input-label.bg_light:focus-within .input-wrapper input.input:-webkit-autofill,\r
232
- .input-label.bg_light:focus-within .input-wrapper input.input:-webkit-autofill:hover,\r
233
- .input-label.bg_light:focus-within .input-wrapper input.input:-webkit-autofill:active {\r
234
- -webkit-box-shadow: none !important;\r
235
- box-shadow: none !important;\r
236
- -webkit-text-fill-color: #333 !important;\r
237
- font-family: 'Roboto Condensed', sans-serif !important;\r
238
- font-size: 1rem !important;\r
239
- font-weight: 100 !important;\r
240
- color: #333 !important;\r
241
- background-color: transparent !important;\r
242
- background-image: none !important;\r
243
- }\r
244
- \r
245
- .input-label:not(.bg_light):not(:focus-within) .input-wrapper input.input:-webkit-autofill,\r
246
- .input-label:not(.bg_light):not(:focus-within) .input-wrapper input.input:-webkit-autofill:hover,\r
247
- .input-label:not(.bg_light):not(:focus-within) .input-wrapper input.input:-webkit-autofill:active {\r
248
- -webkit-box-shadow: 0 0 0 9999px #f5f5f5 inset !important;\r
249
- box-shadow: 0 0 0 9999px #f5f5f5 inset !important;\r
250
- -webkit-text-fill-color: #333 !important;\r
251
- font-family: 'Roboto Condensed', sans-serif !important;\r
252
- font-size: 1rem !important;\r
253
- font-weight: 100 !important;\r
254
- color: #333 !important;\r
255
- background-color: transparent !important;\r
256
- background-image: none !important;\r
257
- transition:\r
258
- background-color 5000s ease-in-out 0s,\r
259
- color 5000s ease-in-out 0s !important;\r
260
- }\r
261
- \r
262
- .input-label:not(.bg_light):focus-within .input-wrapper input.input:-webkit-autofill,\r
263
- .input-label:not(.bg_light):focus-within .input-wrapper input.input:-webkit-autofill:hover,\r
264
- .input-label:not(.bg_light):focus-within .input-wrapper input.input:-webkit-autofill:active {\r
265
- -webkit-box-shadow: none !important;\r
266
- box-shadow: none !important;\r
267
- -webkit-text-fill-color: #333 !important;\r
268
- font-family: 'Roboto Condensed', sans-serif !important;\r
269
- font-size: 1rem !important;\r
270
- font-weight: 100 !important;\r
271
- color: #333 !important;\r
272
- background-color: transparent !important;\r
273
- background-image: none !important;\r
274
- }\r
275
- \r
276
- .input-label.bg_light:not(:focus-within) input.input:-webkit-autofill,\r
277
- .input-label.bg_light:not(:focus-within) input.input:-webkit-autofill:hover,\r
278
- .input-label.bg_light:not(:focus-within) input.input:-webkit-autofill:active {\r
279
- -webkit-box-shadow: 0 0 0 9999px #ffffff inset !important;\r
280
- box-shadow: 0 0 0 9999px #ffffff inset !important;\r
281
- -webkit-text-fill-color: #333 !important;\r
282
- font-family: 'Roboto Condensed', sans-serif !important;\r
283
- font-size: 1rem !important;\r
284
- font-weight: 100 !important;\r
285
- color: #333 !important;\r
286
- background-color: transparent !important;\r
287
- background-image: none !important;\r
288
- transition:\r
289
- background-color 5000s ease-in-out 0s,\r
290
- color 5000s ease-in-out 0s !important;\r
291
- }\r
292
- \r
293
- .input-label.bg_light:focus-within input.input:-webkit-autofill,\r
294
- .input-label.bg_light:focus-within input.input:-webkit-autofill:hover,\r
295
- .input-label.bg_light:focus-within input.input:-webkit-autofill:active {\r
296
- -webkit-box-shadow: none !important;\r
297
- box-shadow: none !important;\r
298
- -webkit-text-fill-color: #333 !important;\r
299
- font-family: 'Roboto Condensed', sans-serif !important;\r
300
- font-size: 1rem !important;\r
301
- font-weight: 100 !important;\r
302
- color: #333 !important;\r
303
- background-color: transparent !important;\r
304
- background-image: none !important;\r
305
- }\r
306
- \r
307
- .input-label:not(.bg_light):not(:focus-within) input.input:-webkit-autofill,\r
308
- .input-label:not(.bg_light):not(:focus-within) input.input:-webkit-autofill:hover,\r
309
- .input-label:not(.bg_light):not(:focus-within) input.input:-webkit-autofill:active {\r
310
- /* -webkit-box-shadow: 0 0 0 9999px #f5f5f5 inset !important;\r
311
- box-shadow: 0 0 0 9999px #f5f5f5 inset !important; */\r
312
- -webkit-text-fill-color: #333 !important;\r
313
- font-family: 'Roboto Condensed', sans-serif !important;\r
314
- font-size: 1rem !important;\r
315
- font-weight: 100 !important;\r
316
- color: #333 !important;\r
317
- background-color: transparent !important;\r
318
- background-image: none !important;\r
319
- transition:\r
320
- background-color 5000s ease-in-out 0s,\r
321
- color 5000s ease-in-out 0s !important;\r
322
- }\r
323
- \r
324
- .input-label:not(.bg_light):focus-within input.input:-webkit-autofill,\r
325
- .input-label:not(.bg_light):focus-within input.input:-webkit-autofill:hover,\r
326
- .input-label:not(.bg_light):focus-within input.input:-webkit-autofill:active {\r
327
- -webkit-box-shadow: none !important;\r
328
- box-shadow: none !important;\r
329
- -webkit-text-fill-color: #333 !important;\r
330
- font-family: 'Roboto Condensed', sans-serif !important;\r
331
- font-size: 1rem !important;\r
332
- font-weight: 100 !important;\r
333
- color: #333 !important;\r
334
- background-color: transparent !important;\r
335
- background-image: none !important;\r
336
- }\r
337
- \r
338
- /* NUOVO CODICE */\r
339
- \r
340
- /* ==========================\r
341
- PATCH MIRATA - Mantieni il tuo CSS originale,\r
342
- previeni il background user-agent al focus e\r
343
- conserva il bordo blu personalizzato anche quando\r
344
- clicchi l'icona / toggle password.\r
345
- Appendere in fondo al file.\r
346
- ========================== */\r
347
- \r
348
- /* 1) Quando Chrome applica autofill + focus, forza uno shadow inset trasparente\r
349
- così il layer user-agent non "sbuca" sopra il wrapper. */\r
350
- input.input:-webkit-autofill:focus,\r
351
- input.input:-webkit-autofill:active {\r
352
- -webkit-box-shadow: 0 0 0 9999px transparent inset !important;\r
353
- box-shadow: 0 0 0 9999px transparent inset !important;\r
354
- background-color: transparent !important;\r
355
- background-image: none !important;\r
356
- -webkit-text-fill-color: #333 !important;\r
357
- background-clip: padding-box !important;\r
358
- -webkit-background-clip: padding-box !important;\r
359
- }\r
360
- \r
361
- /* 2) Ripristina esplicitamente lo stato di autofill coerente con i due temi\r
362
- (bg_light / default) anche quando il campo ha focus o viene ri-renderizzato */\r
363
- .input-label.bg_light input.input:-webkit-autofill,\r
364
- .input-label.bg_light input.input:-webkit-autofill:hover,\r
365
- .input-label.bg_light input.input:-webkit-autofill:focus,\r
366
- .input-label.bg_light input.input:-webkit-autofill:active {\r
367
- -webkit-box-shadow: 0 0 0 9999px #ffffff inset !important;\r
368
- box-shadow: 0 0 0 9999px #ffffff inset !important;\r
369
- -webkit-text-fill-color: #333 !important;\r
370
- background-color: transparent !important;\r
371
- background-image: none !important;\r
372
- background-clip: padding-box !important;\r
373
- -webkit-background-clip: padding-box !important;\r
374
- }\r
375
- \r
376
- .input-label:not(.bg_light) input.input:-webkit-autofill,\r
377
- .input-label:not(.bg_light) input.input:-webkit-autofill:hover,\r
378
- .input-label:not(.bg_light) input.input:-webkit-autofill:focus,\r
379
- .input-label:not(.bg_light) input.input:-webkit-autofill:active {\r
380
- /* -webkit-box-shadow: 0 0 0 9999px #f5f5f5 inset !important;\r
381
- box-shadow: 0 0 0 9999px #f5f5f5 inset !important; */\r
382
- -webkit-text-fill-color: #333 !important;\r
383
- background-color: transparent !important;\r
384
- background-image: none !important;\r
385
- background-clip: padding-box !important;\r
386
- -webkit-background-clip: padding-box !important;\r
387
- }\r
388
- \r
389
- /* 3) Forza il bordo blu del wrapper anche se il focus passa al bottone/alla icona.\r
390
- La regola esistente .input-label:focus-within c'è già, ma qui la rinforziamo. */\r
391
- .input-label:focus-within {\r
392
- box-shadow: inset 0 0 0 1.5px #007aff !important;\r
393
- -webkit-box-shadow: inset 0 0 0 1.5px #007aff !important;\r
394
- background-color: inherit !important;\r
395
- }\r
396
- \r
397
- /* 4) Micro-fix per il toggle password: evita che rimuova styling ereditato\r
398
- (manteniamo il comportamento visivo ma assicuriamo che non interrompa il :focus-within) */\r
399
- .password-toggle-btn {\r
400
- pointer-events: auto !important;\r
401
- background: none !important;\r
402
- border: none !important;\r
403
- -webkit-appearance: none !important;\r
404
- appearance: none !important;\r
405
- }\r
406
- \r
407
- /* 5) Ulteriore sicurezza: assicurati che gli input password non ricevano lo sfondo UA */\r
408
- input[type='password']:-webkit-autofill,\r
409
- input[type='password']:-webkit-autofill:focus {\r
410
- -webkit-box-shadow: 0 0 0 9999px transparent inset !important;\r
411
- box-shadow: 0 0 0 9999px transparent inset !important;\r
412
- background-color: transparent !important;\r
413
- }\r
414
- `;
1
+ const styles = ".input-container {\r\n font-family: 'Roboto Condensed', sans-serif;\r\n}\r\n\r\n.input-label:not([type='checkbox']) {\r\n font-size: 0.8125rem;\r\n line-height: 1.85;\r\n letter-spacing: 0.0625rem;\r\n color: #333;\r\n position: relative;\r\n height: 3.29412rem;\r\n display: flex;\r\n min-width: 0;\r\n background: rgba(0, 0, 0, 0.04);\r\n transition:\r\n color 0.15s ease,\r\n box-shadow 0.15s ease,\r\n background 0.15s ease;\r\n}\r\n\r\n.input-label.bg_light:not([type='checkbox']) {\r\n background: white;\r\n box-shadow: inset 0 0 0 1px #86868b;\r\n}\r\n\r\n.input-label.bg_light:not([type='checkbox']):focus-within {\r\n box-shadow: inset 0 0 0 1.5px #007aff;\r\n}\r\n\r\n.input {\r\n background: transparent;\r\n padding: 0 0.9375rem;\r\n flex: 1;\r\n font-size: 1rem;\r\n font-family: 'Roboto Condensed', sans-serif;\r\n font-weight: 100;\r\n letter-spacing: inherit;\r\n color: inherit;\r\n height: 100%;\r\n border: none;\r\n -webkit-appearance: none;\r\n -moz-appearance: none;\r\n appearance: none;\r\n white-space: nowrap;\r\n text-overflow: ellipsis;\r\n overflow: hidden;\r\n width: calc(100% - 0.9375rem * 2);\r\n border-radius: 0.75rem;\r\n}\r\n\r\n.input::placeholder {\r\n color: #6e6e73;\r\n}\r\n\r\n.input:focus {\r\n outline: none;\r\n opacity: 1;\r\n}\r\n\r\n.input-label {\r\n border-radius: 0.75rem;\r\n transition: box-shadow 0.15s ease;\r\n}\r\n\r\n.input-label:focus-within {\r\n box-shadow: inset 0 0 0 1.5px #007aff;\r\n}\r\n\r\n.error-message {\r\n color: #e74c3c;\r\n font-size: 0.875rem;\r\n margin-top: 0.25rem;\r\n font-size: 1rem;\r\n font-family: 'Roboto Condensed', sans-serif;\r\n}\r\n\r\n.flex_wrapper {\r\n display: flex;\r\n justify-content: flex-start;\r\n align-items: center;\r\n}\r\n\r\n.label_wrapper {\r\n display: inline-flex;\r\n align-items: center;\r\n border-radius: 0.75rem 0 0 0.75rem;\r\n height: 3.29412rem;\r\n background-color: #0095ae;\r\n}\r\n\r\n.preview_container {\r\n height: 3.29412rem;\r\n display: flex;\r\n align-items: center;\r\n background: rgba(0, 0, 0, 0.04);\r\n border-radius: 0 0.75rem 0.75rem 0;\r\n color: #333;\r\n letter-spacing: 0.0625rem;\r\n font-size: 0.875rem;\r\n width: calc(100% - 3.4375rem);\r\n}\r\n\r\n.prev_wrap {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n width: calc(100% - 6.25rem);\r\n}\r\n\r\n.preview {\r\n margin: 0;\r\n border: none;\r\n}\r\n\r\n.input[type='file'] {\r\n position: absolute;\r\n width: 0.0625rem;\r\n height: 0.0625rem;\r\n padding: 0;\r\n margin: -0.0625rem;\r\n overflow: hidden;\r\n clip: rect(0, 0, 0, 0);\r\n border: 0;\r\n}\r\n\r\n.input-label {\r\n cursor: pointer;\r\n}\r\n\r\n.input-label-upload {\r\n cursor: pointer;\r\n width: 6.25rem;\r\n color: #fff;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n height: 3.4375rem;\r\n}\r\n\r\n.input-label:hover {\r\n background-color: rgba(0, 0, 0, 0.1);\r\n}\r\n\r\n.input-wrapper {\r\n position: relative;\r\n display: flex;\r\n align-items: center;\r\n width: 100%;\r\n padding: 0 0.9375rem;\r\n}\r\n\r\n.input-icon {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n pointer-events: none;\r\n}\r\n\r\n.input.with-icon {\r\n padding-left: 2.5rem;\r\n}\r\n.no_icon {\r\n width: 100%;\r\n}\r\n\r\n.sr-only {\r\n position: absolute;\r\n width: 1px;\r\n height: 1px;\r\n padding: 0;\r\n margin: -1px;\r\n overflow: hidden;\r\n clip: rect(0, 0, 0, 0);\r\n white-space: nowrap;\r\n border: 0;\r\n}\r\n\r\ninput[type='number']::-webkit-outer-spin-button,\r\ninput[type='number']::-webkit-inner-spin-button {\r\n -webkit-appearance: none;\r\n margin: 0;\r\n}\r\n\r\ninput[type='number'] {\r\n -moz-appearance: textfield;\r\n appearance: textfield;\r\n}\r\n\r\n.password-toggle-btn {\r\n position: absolute;\r\n right: 12px;\r\n top: 50%;\r\n transform: translateY(-50%);\r\n background: none;\r\n border: none;\r\n cursor: pointer;\r\n padding: 4px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n color: inherit;\r\n opacity: 0.6;\r\n transition: opacity 0.2s;\r\n}\r\n\r\n.password-toggle-btn:focus {\r\n outline: none;\r\n}\r\n\r\n.input-wrapper {\r\n position: relative;\r\n}\r\n\r\n/* Versione finale CSS puro - CON I TUOI COLORI ESATTI */\r\n\r\ninput:-webkit-autofill,\r\ninput:-webkit-autofill:hover,\r\ninput:-webkit-autofill:focus,\r\ninput:-webkit-autofill:active {\r\n -webkit-text-fill-color: #333 !important;\r\n font-family: 'Roboto Condensed', sans-serif !important;\r\n font-size: 1rem !important;\r\n font-weight: 100 !important;\r\n letter-spacing: inherit !important;\r\n color: #333 !important;\r\n transition:\r\n background-color 600000s 0s,\r\n color 600000s 0s !important;\r\n}\r\n\r\n/* Background BIANCO per bg_light - il tuo colore originale */\r\n.input-label.bg_light input:-webkit-autofill,\r\n.input-label.bg_light .input-wrapper input:-webkit-autofill {\r\n -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;\r\n}\r\n\r\n/* Background GRIGIO CHIARO per default - il tuo colore originale rgba(0, 0, 0, 0.04) */\r\n.input-label:not(.bg_light) input:-webkit-autofill,\r\n.input-label:not(.bg_light) .input-wrapper input:-webkit-autofill {\r\n -webkit-box-shadow: 0 0 0 1000px rgba(0, 0, 0, 0.04) inset !important;\r\n}\r\n\r\n/* Focus - rimuovi box-shadow per mostrare il BORDO BLU (#007aff) */\r\n.input-label:focus-within input:-webkit-autofill,\r\n.input-label:focus-within .input-wrapper input:-webkit-autofill {\r\n -webkit-box-shadow: none !important;\r\n}\r\n";
415
2
  export {
416
3
  styles as default
417
4
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@greghowe79/the-lib",
3
- "version": "1.7.2",
3
+ "version": "1.7.4",
4
4
  "description": "Collection of fast components for Qwik",
5
5
  "main": "./lib/index.qwik.mjs",
6
6
  "qwik": "./lib/index.qwik.mjs",