@greghowe79/the-lib 1.6.6 → 1.6.8

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 -1
  2. package/lib/components/input/styles.css.qwik.mjs +1 -1
  3. package/package.json +1 -1
package/lib/components/input/styles.css.qwik.cjs CHANGED
@@ -1,3 +1,3 @@
1
1
  "use strict";
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}\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/* Stili per l'autofill di Chrome - Mantengono il tuo design originale */\r\n\r\n/* Autofill per background bianco (bg_light) */\r\n.input-label.bg_light .input-wrapper .input:-webkit-autofill,\r\n.input-label.bg_light .input-wrapper .input:-webkit-autofill:hover,\r\n.input-label.bg_light .input-wrapper .input:-webkit-autofill:active {\r\n -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;\r\n -webkit-text-fill-color: #333 !important;\r\n transition: background-color 5000s ease-in-out 0s !important;\r\n}\r\n\r\n/* Rimuovi il box-shadow quando in focus per mostrare il bordo blu */\r\n.input-label.bg_light .input-wrapper .input:-webkit-autofill:focus {\r\n -webkit-box-shadow: none !important;\r\n -webkit-text-fill-color: #333 !important;\r\n background-color: #ffffff !important;\r\n}\r\n\r\n/* Autofill per background grigio chiaro (default) */\r\n.input-label:not(.bg_light) .input-wrapper .input:-webkit-autofill,\r\n.input-label:not(.bg_light) .input-wrapper .input:-webkit-autofill:hover,\r\n.input-label:not(.bg_light) .input-wrapper .input:-webkit-autofill:active {\r\n -webkit-box-shadow: 0 0 0 1000px #f5f5f5 inset !important;\r\n -webkit-text-fill-color: #333 !important;\r\n transition: background-color 5000s ease-in-out 0s !important;\r\n}\r\n\r\n.input-label:not(.bg_light) .input-wrapper .input:-webkit-autofill:focus {\r\n -webkit-box-shadow: none !important;\r\n -webkit-text-fill-color: #333 !important;\r\n background-color: rgba(0, 0, 0, 0.04) !important;\r\n}\r\n\r\n/* Autofill per input senza wrapper (caso .no_icon) */\r\n.input-label.bg_light .input:-webkit-autofill,\r\n.input-label.bg_light .input:-webkit-autofill:hover,\r\n.input-label.bg_light .input:-webkit-autofill:active {\r\n -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;\r\n -webkit-text-fill-color: #333 !important;\r\n transition: background-color 5000s ease-in-out 0s !important;\r\n}\r\n\r\n.input-label.bg_light .input:-webkit-autofill:focus {\r\n -webkit-box-shadow: none !important;\r\n -webkit-text-fill-color: #333 !important;\r\n background-color: #ffffff !important;\r\n}\r\n\r\n.input-label:not(.bg_light) .input:-webkit-autofill,\r\n.input-label:not(.bg_light) .input:-webkit-autofill:hover,\r\n.input-label:not(.bg_light) .input:-webkit-autofill:active {\r\n -webkit-box-shadow: 0 0 0 1000px #f5f5f5 inset !important;\r\n -webkit-text-fill-color: #333 !important;\r\n transition: background-color 5000s ease-in-out 0s !important;\r\n}\r\n\r\n.input-label:not(.bg_light) .input:-webkit-autofill:focus {\r\n -webkit-box-shadow: none !important;\r\n -webkit-text-fill-color: #333 !important;\r\n background-color: rgba(0, 0, 0, 0.04) !important;\r\n}\r\n";
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/* Stili per l'autofill di Chrome - VERSIONE FINALE ULTRA-POTENTE */\r\n\r\n/* Background bianco (bg_light) con input-wrapper - quando NON ha focus */\r\n.input-label.bg_light:not(:focus-within) .input-wrapper input.input:-webkit-autofill,\r\n.input-label.bg_light:not(:focus-within) .input-wrapper input.input:-webkit-autofill:hover,\r\n.input-label.bg_light:not(:focus-within) .input-wrapper input.input:-webkit-autofill:active {\r\n -webkit-box-shadow: 0 0 0 9999px #ffffff inset !important;\r\n box-shadow: 0 0 0 9999px #ffffff inset !important;\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 color: #333 !important;\r\n background-color: transparent !important;\r\n background-image: none !important;\r\n transition:\r\n background-color 5000s ease-in-out 0s,\r\n color 5000s ease-in-out 0s !important;\r\n}\r\n\r\n/* Background bianco - quando HA focus (click su input O icona) */\r\n.input-label.bg_light:focus-within .input-wrapper input.input:-webkit-autofill,\r\n.input-label.bg_light:focus-within .input-wrapper input.input:-webkit-autofill:hover,\r\n.input-label.bg_light:focus-within .input-wrapper input.input:-webkit-autofill:active {\r\n -webkit-box-shadow: none !important;\r\n box-shadow: none !important;\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 color: #333 !important;\r\n background-color: transparent !important;\r\n background-image: none !important;\r\n}\r\n\r\n/* Background grigio (default) con input-wrapper - quando NON ha focus */\r\n.input-label:not(.bg_light):not(:focus-within) .input-wrapper input.input:-webkit-autofill,\r\n.input-label:not(.bg_light):not(:focus-within) .input-wrapper input.input:-webkit-autofill:hover,\r\n.input-label:not(.bg_light):not(:focus-within) .input-wrapper input.input:-webkit-autofill:active {\r\n -webkit-box-shadow: 0 0 0 9999px #f5f5f5 inset !important;\r\n box-shadow: 0 0 0 9999px #f5f5f5 inset !important;\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 color: #333 !important;\r\n background-color: transparent !important;\r\n background-image: none !important;\r\n transition:\r\n background-color 5000s ease-in-out 0s,\r\n color 5000s ease-in-out 0s !important;\r\n}\r\n\r\n/* Background grigio - quando HA focus */\r\n.input-label:not(.bg_light):focus-within .input-wrapper input.input:-webkit-autofill,\r\n.input-label:not(.bg_light):focus-within .input-wrapper input.input:-webkit-autofill:hover,\r\n.input-label:not(.bg_light):focus-within .input-wrapper input.input:-webkit-autofill:active {\r\n -webkit-box-shadow: none !important;\r\n box-shadow: none !important;\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 color: #333 !important;\r\n background-color: transparent !important;\r\n background-image: none !important;\r\n}\r\n\r\n/* Input senza wrapper (caso .no_icon) - bg_light - quando NON ha focus */\r\n.input-label.bg_light:not(:focus-within) input.input:-webkit-autofill,\r\n.input-label.bg_light:not(:focus-within) input.input:-webkit-autofill:hover,\r\n.input-label.bg_light:not(:focus-within) input.input:-webkit-autofill:active {\r\n -webkit-box-shadow: 0 0 0 9999px #ffffff inset !important;\r\n box-shadow: 0 0 0 9999px #ffffff inset !important;\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 color: #333 !important;\r\n background-color: transparent !important;\r\n background-image: none !important;\r\n transition:\r\n background-color 5000s ease-in-out 0s,\r\n color 5000s ease-in-out 0s !important;\r\n}\r\n\r\n/* Input senza wrapper - bg_light - quando HA focus */\r\n.input-label.bg_light:focus-within input.input:-webkit-autofill,\r\n.input-label.bg_light:focus-within input.input:-webkit-autofill:hover,\r\n.input-label.bg_light:focus-within input.input:-webkit-autofill:active {\r\n -webkit-box-shadow: none !important;\r\n box-shadow: none !important;\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 color: #333 !important;\r\n background-color: transparent !important;\r\n background-image: none !important;\r\n}\r\n\r\n/* Input senza wrapper (caso .no_icon) - default - quando NON ha focus */\r\n.input-label:not(.bg_light):not(:focus-within) input.input:-webkit-autofill,\r\n.input-label:not(.bg_light):not(:focus-within) input.input:-webkit-autofill:hover,\r\n.input-label:not(.bg_light):not(:focus-within) input.input:-webkit-autofill:active {\r\n -webkit-box-shadow: 0 0 0 9999px #f5f5f5 inset !important;\r\n box-shadow: 0 0 0 9999px #f5f5f5 inset !important;\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 color: #333 !important;\r\n background-color: transparent !important;\r\n background-image: none !important;\r\n transition:\r\n background-color 5000s ease-in-out 0s,\r\n color 5000s ease-in-out 0s !important;\r\n}\r\n\r\n/* Input senza wrapper - default - quando HA focus */\r\n.input-label:not(.bg_light):focus-within input.input:-webkit-autofill,\r\n.input-label:not(.bg_light):focus-within input.input:-webkit-autofill:hover,\r\n.input-label:not(.bg_light):focus-within input.input:-webkit-autofill:active {\r\n -webkit-box-shadow: none !important;\r\n box-shadow: none !important;\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 color: #333 !important;\r\n background-color: transparent !important;\r\n background-image: none !important;\r\n}\r\n";
3
3
  module.exports = styles;
package/lib/components/input/styles.css.qwik.mjs CHANGED
@@ -1,4 +1,4 @@
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}\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/* Stili per l'autofill di Chrome - Mantengono il tuo design originale */\r\n\r\n/* Autofill per background bianco (bg_light) */\r\n.input-label.bg_light .input-wrapper .input:-webkit-autofill,\r\n.input-label.bg_light .input-wrapper .input:-webkit-autofill:hover,\r\n.input-label.bg_light .input-wrapper .input:-webkit-autofill:active {\r\n -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;\r\n -webkit-text-fill-color: #333 !important;\r\n transition: background-color 5000s ease-in-out 0s !important;\r\n}\r\n\r\n/* Rimuovi il box-shadow quando in focus per mostrare il bordo blu */\r\n.input-label.bg_light .input-wrapper .input:-webkit-autofill:focus {\r\n -webkit-box-shadow: none !important;\r\n -webkit-text-fill-color: #333 !important;\r\n background-color: #ffffff !important;\r\n}\r\n\r\n/* Autofill per background grigio chiaro (default) */\r\n.input-label:not(.bg_light) .input-wrapper .input:-webkit-autofill,\r\n.input-label:not(.bg_light) .input-wrapper .input:-webkit-autofill:hover,\r\n.input-label:not(.bg_light) .input-wrapper .input:-webkit-autofill:active {\r\n -webkit-box-shadow: 0 0 0 1000px #f5f5f5 inset !important;\r\n -webkit-text-fill-color: #333 !important;\r\n transition: background-color 5000s ease-in-out 0s !important;\r\n}\r\n\r\n.input-label:not(.bg_light) .input-wrapper .input:-webkit-autofill:focus {\r\n -webkit-box-shadow: none !important;\r\n -webkit-text-fill-color: #333 !important;\r\n background-color: rgba(0, 0, 0, 0.04) !important;\r\n}\r\n\r\n/* Autofill per input senza wrapper (caso .no_icon) */\r\n.input-label.bg_light .input:-webkit-autofill,\r\n.input-label.bg_light .input:-webkit-autofill:hover,\r\n.input-label.bg_light .input:-webkit-autofill:active {\r\n -webkit-box-shadow: 0 0 0 1000px #ffffff inset !important;\r\n -webkit-text-fill-color: #333 !important;\r\n transition: background-color 5000s ease-in-out 0s !important;\r\n}\r\n\r\n.input-label.bg_light .input:-webkit-autofill:focus {\r\n -webkit-box-shadow: none !important;\r\n -webkit-text-fill-color: #333 !important;\r\n background-color: #ffffff !important;\r\n}\r\n\r\n.input-label:not(.bg_light) .input:-webkit-autofill,\r\n.input-label:not(.bg_light) .input:-webkit-autofill:hover,\r\n.input-label:not(.bg_light) .input:-webkit-autofill:active {\r\n -webkit-box-shadow: 0 0 0 1000px #f5f5f5 inset !important;\r\n -webkit-text-fill-color: #333 !important;\r\n transition: background-color 5000s ease-in-out 0s !important;\r\n}\r\n\r\n.input-label:not(.bg_light) .input:-webkit-autofill:focus {\r\n -webkit-box-shadow: none !important;\r\n -webkit-text-fill-color: #333 !important;\r\n background-color: rgba(0, 0, 0, 0.04) !important;\r\n}\r\n";
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/* Stili per l'autofill di Chrome - VERSIONE FINALE ULTRA-POTENTE */\r\n\r\n/* Background bianco (bg_light) con input-wrapper - quando NON ha focus */\r\n.input-label.bg_light:not(:focus-within) .input-wrapper input.input:-webkit-autofill,\r\n.input-label.bg_light:not(:focus-within) .input-wrapper input.input:-webkit-autofill:hover,\r\n.input-label.bg_light:not(:focus-within) .input-wrapper input.input:-webkit-autofill:active {\r\n -webkit-box-shadow: 0 0 0 9999px #ffffff inset !important;\r\n box-shadow: 0 0 0 9999px #ffffff inset !important;\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 color: #333 !important;\r\n background-color: transparent !important;\r\n background-image: none !important;\r\n transition:\r\n background-color 5000s ease-in-out 0s,\r\n color 5000s ease-in-out 0s !important;\r\n}\r\n\r\n/* Background bianco - quando HA focus (click su input O icona) */\r\n.input-label.bg_light:focus-within .input-wrapper input.input:-webkit-autofill,\r\n.input-label.bg_light:focus-within .input-wrapper input.input:-webkit-autofill:hover,\r\n.input-label.bg_light:focus-within .input-wrapper input.input:-webkit-autofill:active {\r\n -webkit-box-shadow: none !important;\r\n box-shadow: none !important;\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 color: #333 !important;\r\n background-color: transparent !important;\r\n background-image: none !important;\r\n}\r\n\r\n/* Background grigio (default) con input-wrapper - quando NON ha focus */\r\n.input-label:not(.bg_light):not(:focus-within) .input-wrapper input.input:-webkit-autofill,\r\n.input-label:not(.bg_light):not(:focus-within) .input-wrapper input.input:-webkit-autofill:hover,\r\n.input-label:not(.bg_light):not(:focus-within) .input-wrapper input.input:-webkit-autofill:active {\r\n -webkit-box-shadow: 0 0 0 9999px #f5f5f5 inset !important;\r\n box-shadow: 0 0 0 9999px #f5f5f5 inset !important;\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 color: #333 !important;\r\n background-color: transparent !important;\r\n background-image: none !important;\r\n transition:\r\n background-color 5000s ease-in-out 0s,\r\n color 5000s ease-in-out 0s !important;\r\n}\r\n\r\n/* Background grigio - quando HA focus */\r\n.input-label:not(.bg_light):focus-within .input-wrapper input.input:-webkit-autofill,\r\n.input-label:not(.bg_light):focus-within .input-wrapper input.input:-webkit-autofill:hover,\r\n.input-label:not(.bg_light):focus-within .input-wrapper input.input:-webkit-autofill:active {\r\n -webkit-box-shadow: none !important;\r\n box-shadow: none !important;\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 color: #333 !important;\r\n background-color: transparent !important;\r\n background-image: none !important;\r\n}\r\n\r\n/* Input senza wrapper (caso .no_icon) - bg_light - quando NON ha focus */\r\n.input-label.bg_light:not(:focus-within) input.input:-webkit-autofill,\r\n.input-label.bg_light:not(:focus-within) input.input:-webkit-autofill:hover,\r\n.input-label.bg_light:not(:focus-within) input.input:-webkit-autofill:active {\r\n -webkit-box-shadow: 0 0 0 9999px #ffffff inset !important;\r\n box-shadow: 0 0 0 9999px #ffffff inset !important;\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 color: #333 !important;\r\n background-color: transparent !important;\r\n background-image: none !important;\r\n transition:\r\n background-color 5000s ease-in-out 0s,\r\n color 5000s ease-in-out 0s !important;\r\n}\r\n\r\n/* Input senza wrapper - bg_light - quando HA focus */\r\n.input-label.bg_light:focus-within input.input:-webkit-autofill,\r\n.input-label.bg_light:focus-within input.input:-webkit-autofill:hover,\r\n.input-label.bg_light:focus-within input.input:-webkit-autofill:active {\r\n -webkit-box-shadow: none !important;\r\n box-shadow: none !important;\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 color: #333 !important;\r\n background-color: transparent !important;\r\n background-image: none !important;\r\n}\r\n\r\n/* Input senza wrapper (caso .no_icon) - default - quando NON ha focus */\r\n.input-label:not(.bg_light):not(:focus-within) input.input:-webkit-autofill,\r\n.input-label:not(.bg_light):not(:focus-within) input.input:-webkit-autofill:hover,\r\n.input-label:not(.bg_light):not(:focus-within) input.input:-webkit-autofill:active {\r\n -webkit-box-shadow: 0 0 0 9999px #f5f5f5 inset !important;\r\n box-shadow: 0 0 0 9999px #f5f5f5 inset !important;\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 color: #333 !important;\r\n background-color: transparent !important;\r\n background-image: none !important;\r\n transition:\r\n background-color 5000s ease-in-out 0s,\r\n color 5000s ease-in-out 0s !important;\r\n}\r\n\r\n/* Input senza wrapper - default - quando HA focus */\r\n.input-label:not(.bg_light):focus-within input.input:-webkit-autofill,\r\n.input-label:not(.bg_light):focus-within input.input:-webkit-autofill:hover,\r\n.input-label:not(.bg_light):focus-within input.input:-webkit-autofill:active {\r\n -webkit-box-shadow: none !important;\r\n box-shadow: none !important;\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 color: #333 !important;\r\n background-color: transparent !important;\r\n background-image: none !important;\r\n}\r\n";
2
2
  export {
3
3
  styles as default
4
4
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@greghowe79/the-lib",
3
- "version": "1.6.6",
3
+ "version": "1.6.8",
4
4
  "description": "Collection of fast components for Qwik",
5
5
  "main": "./lib/index.qwik.mjs",
6
6
  "qwik": "./lib/index.qwik.mjs",