@greghowe79/the-lib 1.1.4 → 1.1.6
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.
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
const styles = "/* .button-primary {\r\n display: inline-block;\r\n outline: none;\r\n border: 2px solid transparent;\r\n border-radius: 3px;\r\n box-sizing: border-box;\r\n font-weight: 500;\r\n max-width: 100%;\r\n text-align: center;\r\n text-decoration: none;\r\n transition:\r\n background 0.1s ease-out 0s,\r\n box-shadow 0.15s cubic-bezier(0.47, 0.03, 0.49, 1.38) 0s;\r\n background: #333;\r\n cursor: pointer;\r\n height: 32px;\r\n line-height: 32px;\r\n padding: 0px 12px;\r\n vertical-align: middle;\r\n width: auto;\r\n font-size: 14px;\r\n color: rgb(255, 255, 255);\r\n}\r\n\r\n.button-primary:hover {\r\n background: #0095ae;\r\n text-decoration: inherit;\r\n transition-duration: 0s, 0.15s;\r\n color: rgb(255, 255, 255);\r\n border: 2px solid #0095ae;\r\n}\r\n\r\n.button-secondary {\r\n display: inline-block;\r\n outline: none;\r\n border: 2px solid transparent;\r\n border-radius: 3px;\r\n box-sizing: border-box;\r\n font-weight: 500;\r\n max-width: 100%;\r\n text-align: center;\r\n text-decoration: none;\r\n transition:\r\n background 0.1s ease-out 0s,\r\n box-shadow 0.15s cubic-bezier(0.47, 0.03, 0.49, 1.38) 0s;\r\n background: linear-gradient(to right, rgb(59, 65, 71), rgb(48, 54, 59));\r\n cursor: pointer;\r\n height: 32px;\r\n line-height: 32px;\r\n padding: 0px 12px;\r\n vertical-align: middle;\r\n width: auto;\r\n font-size: 14px;\r\n color: white;\r\n}\r\n\r\n.button-secondary:hover {\r\n background: linear-gradient(to right, #5a6268, #4e555b);\r\n text-decoration: inherit;\r\n transition-duration: 0s, 0.15s;\r\n color: white;\r\n}\r\n\r\n.button-danger {\r\n display: inline-block;\r\n outline: none;\r\n border: 2px solid transparent;\r\n border-radius: 3px;\r\n box-sizing: border-box;\r\n font-weight: 500;\r\n max-width: 100%;\r\n text-align: center;\r\n text-decoration: none;\r\n transition:\r\n background 0.1s ease-out 0s,\r\n box-shadow 0.15s cubic-bezier(0.47, 0.03, 0.49, 1.38) 0s;\r\n background: linear-gradient(to right, rgb(153, 31, 43), rgb(130, 27, 37));\r\n cursor: pointer;\r\n height: 32px;\r\n line-height: 32px;\r\n padding: 0px 12px;\r\n vertical-align: middle;\r\n width: auto;\r\n font-size: 14px;\r\n color: white;\r\n}\r\n\r\n.button-danger:hover {\r\n background: linear-gradient(to right, #c82333, #bd2130);\r\n text-decoration: inherit;\r\n transition-duration: 0s, 0.15s;\r\n color: white;\r\n}\r\n\r\n\r\n.button-sm {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n gap: 0.313rem;\r\n font-size: 1rem;\r\n height: 100%;\r\n line-height: 1.25rem;\r\n padding: 0.75rem 1.5rem;\r\n border-radius: 2rem;\r\n width: 100%;\r\n}\r\n\r\n.button-md {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n gap: 0.313rem;\r\n font-size: 1rem;\r\n height: 100%;\r\n line-height: 1.25rem;\r\n padding: 0.75rem 1.5rem;\r\n border-radius: 2rem;\r\n max-width: 8rem;\r\n}\r\n\r\n.button-lg {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n gap: 0.313rem;\r\n font-size: 1rem;\r\n height: 100%;\r\n line-height: 1.25rem;\r\n padding: 0.75rem 1.5rem;\r\n border-radius: 2rem;\r\n max-width: 12rem;\r\n}\r\n.button__icon {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n}\r\n\r\n.button__text {\r\n font-family: 'Roboto Condensed', sans-serif;\r\n white-space: nowrap;\r\n}\r\n\r\n\r\n.button-disabled {\r\n opacity: 0.6;\r\n cursor: not-allowed;\r\n}\r\n\r\nbutton.button-icon {\r\n gap: 0;\r\n background: none;\r\n border: none;\r\n outline: none;\r\n cursor: pointer;\r\n}\r\n\r\nbutton.button-icon:hover {\r\n background: #f0f0f0;\r\n}\r\n\r\nbutton.button-tertiary {\r\n background: transparent;\r\n font-weight: 500;\r\n border: 2px solid #333;\r\n outline: none;\r\n cursor: pointer;\r\n color: #333;\r\n} */\r\n\r\n/* Stile base del pulsante */\r\n.button-primary {\r\n display: inline-block;\r\n outline: none;\r\n border: 2px solid transparent;\r\n border-radius: 3px;\r\n box-sizing: border-box;\r\n font-weight: 500;\r\n max-width: 100%;\r\n text-align: center;\r\n text-decoration: none;\r\n transition:\r\n background 0.1s ease-out 0s,\r\n box-shadow 0.15s cubic-bezier(0.47, 0.03, 0.49, 1.38) 0s;\r\n background: #333;\r\n cursor: pointer;\r\n height: 32px;\r\n line-height: 32px;\r\n padding: 0px 12px;\r\n vertical-align: middle;\r\n width: auto;\r\n font-size: 14px;\r\n color: rgb(255, 255, 255);\r\n}\r\n\r\n/* Stile hover del pulsante */\r\n.button-primary:not(:disabled):hover {\r\n background: #0095ae;\r\n text-decoration: inherit;\r\n transition-duration: 0s, 0.15s;\r\n color: rgb(255, 255, 255);\r\n border: 2px solid #0095ae;\r\n}\r\n\r\n/* Stile del pulsante secondario */\r\n.button-secondary {\r\n display: inline-block;\r\n outline: none;\r\n border: 2px solid transparent;\r\n border-radius: 3px;\r\n box-sizing: border-box;\r\n font-weight: 500;\r\n max-width: 100%;\r\n text-align: center;\r\n text-decoration: none;\r\n transition:\r\n background 0.1s ease-out 0s,\r\n box-shadow 0.15s cubic-bezier(0.47, 0.03, 0.49, 1.38) 0s;\r\n background: linear-gradient(to right, rgb(59, 65, 71), rgb(48, 54, 59));\r\n cursor: pointer;\r\n height: 32px;\r\n line-height: 32px;\r\n padding: 0px 12px;\r\n vertical-align: middle;\r\n width: auto;\r\n font-size: 14px;\r\n color: white;\r\n}\r\n\r\n/* Stile hover del pulsante secondario */\r\n.button-secondary:not(:disabled):hover {\r\n background: linear-gradient(to right, #5a6268, #4e555b);\r\n text-decoration: inherit;\r\n transition-duration: 0s, 0.15s;\r\n color: white;\r\n}\r\n\r\n/* Stile del pulsante di pericolo */\r\n.button-danger {\r\n display: inline-block;\r\n outline: none;\r\n border: 2px solid transparent;\r\n border-radius: 3px;\r\n box-sizing: border-box;\r\n font-weight: 500;\r\n max-width: 100%;\r\n text-align: center;\r\n text-decoration: none;\r\n transition:\r\n background 0.1s ease-out 0s,\r\n box-shadow 0.15s cubic-bezier(0.47, 0.03, 0.49, 1.38) 0s;\r\n background: linear-gradient(to right, rgb(153, 31, 43), rgb(130, 27, 37));\r\n cursor: pointer;\r\n height: 32px;\r\n line-height: 32px;\r\n padding: 0px 12px;\r\n vertical-align: middle;\r\n width: auto;\r\n font-size: 14px;\r\n color: white;\r\n}\r\n\r\n/* Stile hover del pulsante di pericolo */\r\n.button-danger:not(:disabled):hover {\r\n background: linear-gradient(to right, #c82333, #bd2130);\r\n text-decoration: inherit;\r\n transition-duration: 0s, 0.15s;\r\n color: white;\r\n}\r\n\r\n/* Stile del pulsante disabilitato */\r\n.button-primary:disabled,\r\n.button-secondary:disabled,\r\n.button-danger:disabled,\r\n.button-disabled {\r\n background-color: #cccccc;\r\n color: #
|
|
2
|
+
const styles = "/* .button-primary {\r\n display: inline-block;\r\n outline: none;\r\n border: 2px solid transparent;\r\n border-radius: 3px;\r\n box-sizing: border-box;\r\n font-weight: 500;\r\n max-width: 100%;\r\n text-align: center;\r\n text-decoration: none;\r\n transition:\r\n background 0.1s ease-out 0s,\r\n box-shadow 0.15s cubic-bezier(0.47, 0.03, 0.49, 1.38) 0s;\r\n background: #333;\r\n cursor: pointer;\r\n height: 32px;\r\n line-height: 32px;\r\n padding: 0px 12px;\r\n vertical-align: middle;\r\n width: auto;\r\n font-size: 14px;\r\n color: rgb(255, 255, 255);\r\n}\r\n\r\n.button-primary:hover {\r\n background: #0095ae;\r\n text-decoration: inherit;\r\n transition-duration: 0s, 0.15s;\r\n color: rgb(255, 255, 255);\r\n border: 2px solid #0095ae;\r\n}\r\n\r\n.button-secondary {\r\n display: inline-block;\r\n outline: none;\r\n border: 2px solid transparent;\r\n border-radius: 3px;\r\n box-sizing: border-box;\r\n font-weight: 500;\r\n max-width: 100%;\r\n text-align: center;\r\n text-decoration: none;\r\n transition:\r\n background 0.1s ease-out 0s,\r\n box-shadow 0.15s cubic-bezier(0.47, 0.03, 0.49, 1.38) 0s;\r\n background: linear-gradient(to right, rgb(59, 65, 71), rgb(48, 54, 59));\r\n cursor: pointer;\r\n height: 32px;\r\n line-height: 32px;\r\n padding: 0px 12px;\r\n vertical-align: middle;\r\n width: auto;\r\n font-size: 14px;\r\n color: white;\r\n}\r\n\r\n.button-secondary:hover {\r\n background: linear-gradient(to right, #5a6268, #4e555b);\r\n text-decoration: inherit;\r\n transition-duration: 0s, 0.15s;\r\n color: white;\r\n}\r\n\r\n.button-danger {\r\n display: inline-block;\r\n outline: none;\r\n border: 2px solid transparent;\r\n border-radius: 3px;\r\n box-sizing: border-box;\r\n font-weight: 500;\r\n max-width: 100%;\r\n text-align: center;\r\n text-decoration: none;\r\n transition:\r\n background 0.1s ease-out 0s,\r\n box-shadow 0.15s cubic-bezier(0.47, 0.03, 0.49, 1.38) 0s;\r\n background: linear-gradient(to right, rgb(153, 31, 43), rgb(130, 27, 37));\r\n cursor: pointer;\r\n height: 32px;\r\n line-height: 32px;\r\n padding: 0px 12px;\r\n vertical-align: middle;\r\n width: auto;\r\n font-size: 14px;\r\n color: white;\r\n}\r\n\r\n.button-danger:hover {\r\n background: linear-gradient(to right, #c82333, #bd2130);\r\n text-decoration: inherit;\r\n transition-duration: 0s, 0.15s;\r\n color: white;\r\n}\r\n\r\n\r\n.button-sm {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n gap: 0.313rem;\r\n font-size: 1rem;\r\n height: 100%;\r\n line-height: 1.25rem;\r\n padding: 0.75rem 1.5rem;\r\n border-radius: 2rem;\r\n width: 100%;\r\n}\r\n\r\n.button-md {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n gap: 0.313rem;\r\n font-size: 1rem;\r\n height: 100%;\r\n line-height: 1.25rem;\r\n padding: 0.75rem 1.5rem;\r\n border-radius: 2rem;\r\n max-width: 8rem;\r\n}\r\n\r\n.button-lg {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n gap: 0.313rem;\r\n font-size: 1rem;\r\n height: 100%;\r\n line-height: 1.25rem;\r\n padding: 0.75rem 1.5rem;\r\n border-radius: 2rem;\r\n max-width: 12rem;\r\n}\r\n.button__icon {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n}\r\n\r\n.button__text {\r\n font-family: 'Roboto Condensed', sans-serif;\r\n white-space: nowrap;\r\n}\r\n\r\n\r\n.button-disabled {\r\n opacity: 0.6;\r\n cursor: not-allowed;\r\n}\r\n\r\nbutton.button-icon {\r\n gap: 0;\r\n background: none;\r\n border: none;\r\n outline: none;\r\n cursor: pointer;\r\n}\r\n\r\nbutton.button-icon:hover {\r\n background: #f0f0f0;\r\n}\r\n\r\nbutton.button-tertiary {\r\n background: transparent;\r\n font-weight: 500;\r\n border: 2px solid #333;\r\n outline: none;\r\n cursor: pointer;\r\n color: #333;\r\n} */\r\n\r\n/* Stile base del pulsante */\r\n.button-primary {\r\n display: inline-block;\r\n outline: none;\r\n border: 2px solid transparent;\r\n border-radius: 3px;\r\n box-sizing: border-box;\r\n font-weight: 500;\r\n max-width: 100%;\r\n text-align: center;\r\n text-decoration: none;\r\n transition:\r\n background 0.1s ease-out 0s,\r\n box-shadow 0.15s cubic-bezier(0.47, 0.03, 0.49, 1.38) 0s;\r\n background: #333;\r\n cursor: pointer;\r\n height: 32px;\r\n line-height: 32px;\r\n padding: 0px 12px;\r\n vertical-align: middle;\r\n width: auto;\r\n font-size: 14px;\r\n color: rgb(255, 255, 255);\r\n}\r\n\r\n/* Stile hover del pulsante */\r\n.button-primary:not(:disabled):hover {\r\n background: #0095ae;\r\n text-decoration: inherit;\r\n transition-duration: 0s, 0.15s;\r\n color: rgb(255, 255, 255);\r\n border: 2px solid #0095ae;\r\n}\r\n\r\n/* Stile del pulsante secondario */\r\n.button-secondary {\r\n display: inline-block;\r\n outline: none;\r\n border: 2px solid transparent;\r\n border-radius: 3px;\r\n box-sizing: border-box;\r\n font-weight: 500;\r\n max-width: 100%;\r\n text-align: center;\r\n text-decoration: none;\r\n transition:\r\n background 0.1s ease-out 0s,\r\n box-shadow 0.15s cubic-bezier(0.47, 0.03, 0.49, 1.38) 0s;\r\n background: linear-gradient(to right, rgb(59, 65, 71), rgb(48, 54, 59));\r\n cursor: pointer;\r\n height: 32px;\r\n line-height: 32px;\r\n padding: 0px 12px;\r\n vertical-align: middle;\r\n width: auto;\r\n font-size: 14px;\r\n color: white;\r\n}\r\n\r\n/* Stile hover del pulsante secondario */\r\n.button-secondary:not(:disabled):hover {\r\n background: linear-gradient(to right, #5a6268, #4e555b);\r\n text-decoration: inherit;\r\n transition-duration: 0s, 0.15s;\r\n color: white;\r\n}\r\n\r\n/* Stile del pulsante di pericolo */\r\n.button-danger {\r\n display: inline-block;\r\n outline: none;\r\n border: 2px solid transparent;\r\n border-radius: 3px;\r\n box-sizing: border-box;\r\n font-weight: 500;\r\n max-width: 100%;\r\n text-align: center;\r\n text-decoration: none;\r\n transition:\r\n background 0.1s ease-out 0s,\r\n box-shadow 0.15s cubic-bezier(0.47, 0.03, 0.49, 1.38) 0s;\r\n background: linear-gradient(to right, rgb(153, 31, 43), rgb(130, 27, 37));\r\n cursor: pointer;\r\n height: 32px;\r\n line-height: 32px;\r\n padding: 0px 12px;\r\n vertical-align: middle;\r\n width: auto;\r\n font-size: 14px;\r\n color: white;\r\n}\r\n\r\n/* Stile hover del pulsante di pericolo */\r\n.button-danger:not(:disabled):hover {\r\n background: linear-gradient(to right, #c82333, #bd2130);\r\n text-decoration: inherit;\r\n transition-duration: 0s, 0.15s;\r\n color: white;\r\n}\r\n\r\n/* Stile del pulsante disabilitato */\r\n.button-primary:disabled,\r\n.button-secondary:disabled,\r\n.button-danger:disabled,\r\n.button-disabled {\r\n background-color: #cccccc;\r\n color: #000000;\r\n cursor: default; /* Usa il cursore a freccia */\r\n opacity: 0.6;\r\n}\r\n\r\n/* Assicurati che l'hover non funzioni quando il pulsante è disabilitato */\r\n.button-primary:disabled:hover,\r\n.button-secondary:disabled:hover,\r\n.button-danger:disabled:hover,\r\n.button-disabled:hover {\r\n background-color: #cccccc;\r\n border: 2px solid transparent;\r\n}\r\n\r\n/* Button sizes */\r\n.button-sm {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n gap: 0.313rem;\r\n font-size: 1rem;\r\n height: 100%;\r\n line-height: 1.25rem;\r\n padding: 0.75rem 1.5rem;\r\n border-radius: 2rem;\r\n width: 100%;\r\n}\r\n\r\n.button-md {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n gap: 0.313rem;\r\n font-size: 1rem;\r\n height: 100%;\r\n line-height: 1.25rem;\r\n padding: 0.75rem 1.5rem;\r\n border-radius: 2rem;\r\n max-width: 8rem;\r\n}\r\n\r\n.button-lg {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n gap: 0.313rem;\r\n font-size: 1rem;\r\n height: 100%;\r\n line-height: 1.25rem;\r\n padding: 0.75rem 1.5rem;\r\n border-radius: 2rem;\r\n max-width: 12rem;\r\n}\r\n\r\n.button__icon {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n}\r\n\r\n.button__text {\r\n font-family: 'Roboto Condensed', sans-serif;\r\n white-space: nowrap;\r\n}\r\n\r\nbutton.button-icon {\r\n gap: 0;\r\n background: none;\r\n border: none;\r\n outline: none;\r\n cursor: pointer;\r\n}\r\n\r\nbutton.button-icon:not(:disabled):hover {\r\n background: #f0f0f0;\r\n}\r\n\r\nbutton.button-tertiary {\r\n background: transparent;\r\n font-weight: 500;\r\n border: 2px solid #333;\r\n outline: none;\r\n cursor: pointer;\r\n color: #333;\r\n}\r\n\r\nbutton.button-tertiary:not(:disabled):hover {\r\n background: #f0f0f0;\r\n}\r\n";
|
|
3
3
|
module.exports = styles;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
const styles = "/* .button-primary {\r\n display: inline-block;\r\n outline: none;\r\n border: 2px solid transparent;\r\n border-radius: 3px;\r\n box-sizing: border-box;\r\n font-weight: 500;\r\n max-width: 100%;\r\n text-align: center;\r\n text-decoration: none;\r\n transition:\r\n background 0.1s ease-out 0s,\r\n box-shadow 0.15s cubic-bezier(0.47, 0.03, 0.49, 1.38) 0s;\r\n background: #333;\r\n cursor: pointer;\r\n height: 32px;\r\n line-height: 32px;\r\n padding: 0px 12px;\r\n vertical-align: middle;\r\n width: auto;\r\n font-size: 14px;\r\n color: rgb(255, 255, 255);\r\n}\r\n\r\n.button-primary:hover {\r\n background: #0095ae;\r\n text-decoration: inherit;\r\n transition-duration: 0s, 0.15s;\r\n color: rgb(255, 255, 255);\r\n border: 2px solid #0095ae;\r\n}\r\n\r\n.button-secondary {\r\n display: inline-block;\r\n outline: none;\r\n border: 2px solid transparent;\r\n border-radius: 3px;\r\n box-sizing: border-box;\r\n font-weight: 500;\r\n max-width: 100%;\r\n text-align: center;\r\n text-decoration: none;\r\n transition:\r\n background 0.1s ease-out 0s,\r\n box-shadow 0.15s cubic-bezier(0.47, 0.03, 0.49, 1.38) 0s;\r\n background: linear-gradient(to right, rgb(59, 65, 71), rgb(48, 54, 59));\r\n cursor: pointer;\r\n height: 32px;\r\n line-height: 32px;\r\n padding: 0px 12px;\r\n vertical-align: middle;\r\n width: auto;\r\n font-size: 14px;\r\n color: white;\r\n}\r\n\r\n.button-secondary:hover {\r\n background: linear-gradient(to right, #5a6268, #4e555b);\r\n text-decoration: inherit;\r\n transition-duration: 0s, 0.15s;\r\n color: white;\r\n}\r\n\r\n.button-danger {\r\n display: inline-block;\r\n outline: none;\r\n border: 2px solid transparent;\r\n border-radius: 3px;\r\n box-sizing: border-box;\r\n font-weight: 500;\r\n max-width: 100%;\r\n text-align: center;\r\n text-decoration: none;\r\n transition:\r\n background 0.1s ease-out 0s,\r\n box-shadow 0.15s cubic-bezier(0.47, 0.03, 0.49, 1.38) 0s;\r\n background: linear-gradient(to right, rgb(153, 31, 43), rgb(130, 27, 37));\r\n cursor: pointer;\r\n height: 32px;\r\n line-height: 32px;\r\n padding: 0px 12px;\r\n vertical-align: middle;\r\n width: auto;\r\n font-size: 14px;\r\n color: white;\r\n}\r\n\r\n.button-danger:hover {\r\n background: linear-gradient(to right, #c82333, #bd2130);\r\n text-decoration: inherit;\r\n transition-duration: 0s, 0.15s;\r\n color: white;\r\n}\r\n\r\n\r\n.button-sm {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n gap: 0.313rem;\r\n font-size: 1rem;\r\n height: 100%;\r\n line-height: 1.25rem;\r\n padding: 0.75rem 1.5rem;\r\n border-radius: 2rem;\r\n width: 100%;\r\n}\r\n\r\n.button-md {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n gap: 0.313rem;\r\n font-size: 1rem;\r\n height: 100%;\r\n line-height: 1.25rem;\r\n padding: 0.75rem 1.5rem;\r\n border-radius: 2rem;\r\n max-width: 8rem;\r\n}\r\n\r\n.button-lg {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n gap: 0.313rem;\r\n font-size: 1rem;\r\n height: 100%;\r\n line-height: 1.25rem;\r\n padding: 0.75rem 1.5rem;\r\n border-radius: 2rem;\r\n max-width: 12rem;\r\n}\r\n.button__icon {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n}\r\n\r\n.button__text {\r\n font-family: 'Roboto Condensed', sans-serif;\r\n white-space: nowrap;\r\n}\r\n\r\n\r\n.button-disabled {\r\n opacity: 0.6;\r\n cursor: not-allowed;\r\n}\r\n\r\nbutton.button-icon {\r\n gap: 0;\r\n background: none;\r\n border: none;\r\n outline: none;\r\n cursor: pointer;\r\n}\r\n\r\nbutton.button-icon:hover {\r\n background: #f0f0f0;\r\n}\r\n\r\nbutton.button-tertiary {\r\n background: transparent;\r\n font-weight: 500;\r\n border: 2px solid #333;\r\n outline: none;\r\n cursor: pointer;\r\n color: #333;\r\n} */\r\n\r\n/* Stile base del pulsante */\r\n.button-primary {\r\n display: inline-block;\r\n outline: none;\r\n border: 2px solid transparent;\r\n border-radius: 3px;\r\n box-sizing: border-box;\r\n font-weight: 500;\r\n max-width: 100%;\r\n text-align: center;\r\n text-decoration: none;\r\n transition:\r\n background 0.1s ease-out 0s,\r\n box-shadow 0.15s cubic-bezier(0.47, 0.03, 0.49, 1.38) 0s;\r\n background: #333;\r\n cursor: pointer;\r\n height: 32px;\r\n line-height: 32px;\r\n padding: 0px 12px;\r\n vertical-align: middle;\r\n width: auto;\r\n font-size: 14px;\r\n color: rgb(255, 255, 255);\r\n}\r\n\r\n/* Stile hover del pulsante */\r\n.button-primary:not(:disabled):hover {\r\n background: #0095ae;\r\n text-decoration: inherit;\r\n transition-duration: 0s, 0.15s;\r\n color: rgb(255, 255, 255);\r\n border: 2px solid #0095ae;\r\n}\r\n\r\n/* Stile del pulsante secondario */\r\n.button-secondary {\r\n display: inline-block;\r\n outline: none;\r\n border: 2px solid transparent;\r\n border-radius: 3px;\r\n box-sizing: border-box;\r\n font-weight: 500;\r\n max-width: 100%;\r\n text-align: center;\r\n text-decoration: none;\r\n transition:\r\n background 0.1s ease-out 0s,\r\n box-shadow 0.15s cubic-bezier(0.47, 0.03, 0.49, 1.38) 0s;\r\n background: linear-gradient(to right, rgb(59, 65, 71), rgb(48, 54, 59));\r\n cursor: pointer;\r\n height: 32px;\r\n line-height: 32px;\r\n padding: 0px 12px;\r\n vertical-align: middle;\r\n width: auto;\r\n font-size: 14px;\r\n color: white;\r\n}\r\n\r\n/* Stile hover del pulsante secondario */\r\n.button-secondary:not(:disabled):hover {\r\n background: linear-gradient(to right, #5a6268, #4e555b);\r\n text-decoration: inherit;\r\n transition-duration: 0s, 0.15s;\r\n color: white;\r\n}\r\n\r\n/* Stile del pulsante di pericolo */\r\n.button-danger {\r\n display: inline-block;\r\n outline: none;\r\n border: 2px solid transparent;\r\n border-radius: 3px;\r\n box-sizing: border-box;\r\n font-weight: 500;\r\n max-width: 100%;\r\n text-align: center;\r\n text-decoration: none;\r\n transition:\r\n background 0.1s ease-out 0s,\r\n box-shadow 0.15s cubic-bezier(0.47, 0.03, 0.49, 1.38) 0s;\r\n background: linear-gradient(to right, rgb(153, 31, 43), rgb(130, 27, 37));\r\n cursor: pointer;\r\n height: 32px;\r\n line-height: 32px;\r\n padding: 0px 12px;\r\n vertical-align: middle;\r\n width: auto;\r\n font-size: 14px;\r\n color: white;\r\n}\r\n\r\n/* Stile hover del pulsante di pericolo */\r\n.button-danger:not(:disabled):hover {\r\n background: linear-gradient(to right, #c82333, #bd2130);\r\n text-decoration: inherit;\r\n transition-duration: 0s, 0.15s;\r\n color: white;\r\n}\r\n\r\n/* Stile del pulsante disabilitato */\r\n.button-primary:disabled,\r\n.button-secondary:disabled,\r\n.button-danger:disabled,\r\n.button-disabled {\r\n background-color: #cccccc;\r\n color: #
|
|
1
|
+
const styles = "/* .button-primary {\r\n display: inline-block;\r\n outline: none;\r\n border: 2px solid transparent;\r\n border-radius: 3px;\r\n box-sizing: border-box;\r\n font-weight: 500;\r\n max-width: 100%;\r\n text-align: center;\r\n text-decoration: none;\r\n transition:\r\n background 0.1s ease-out 0s,\r\n box-shadow 0.15s cubic-bezier(0.47, 0.03, 0.49, 1.38) 0s;\r\n background: #333;\r\n cursor: pointer;\r\n height: 32px;\r\n line-height: 32px;\r\n padding: 0px 12px;\r\n vertical-align: middle;\r\n width: auto;\r\n font-size: 14px;\r\n color: rgb(255, 255, 255);\r\n}\r\n\r\n.button-primary:hover {\r\n background: #0095ae;\r\n text-decoration: inherit;\r\n transition-duration: 0s, 0.15s;\r\n color: rgb(255, 255, 255);\r\n border: 2px solid #0095ae;\r\n}\r\n\r\n.button-secondary {\r\n display: inline-block;\r\n outline: none;\r\n border: 2px solid transparent;\r\n border-radius: 3px;\r\n box-sizing: border-box;\r\n font-weight: 500;\r\n max-width: 100%;\r\n text-align: center;\r\n text-decoration: none;\r\n transition:\r\n background 0.1s ease-out 0s,\r\n box-shadow 0.15s cubic-bezier(0.47, 0.03, 0.49, 1.38) 0s;\r\n background: linear-gradient(to right, rgb(59, 65, 71), rgb(48, 54, 59));\r\n cursor: pointer;\r\n height: 32px;\r\n line-height: 32px;\r\n padding: 0px 12px;\r\n vertical-align: middle;\r\n width: auto;\r\n font-size: 14px;\r\n color: white;\r\n}\r\n\r\n.button-secondary:hover {\r\n background: linear-gradient(to right, #5a6268, #4e555b);\r\n text-decoration: inherit;\r\n transition-duration: 0s, 0.15s;\r\n color: white;\r\n}\r\n\r\n.button-danger {\r\n display: inline-block;\r\n outline: none;\r\n border: 2px solid transparent;\r\n border-radius: 3px;\r\n box-sizing: border-box;\r\n font-weight: 500;\r\n max-width: 100%;\r\n text-align: center;\r\n text-decoration: none;\r\n transition:\r\n background 0.1s ease-out 0s,\r\n box-shadow 0.15s cubic-bezier(0.47, 0.03, 0.49, 1.38) 0s;\r\n background: linear-gradient(to right, rgb(153, 31, 43), rgb(130, 27, 37));\r\n cursor: pointer;\r\n height: 32px;\r\n line-height: 32px;\r\n padding: 0px 12px;\r\n vertical-align: middle;\r\n width: auto;\r\n font-size: 14px;\r\n color: white;\r\n}\r\n\r\n.button-danger:hover {\r\n background: linear-gradient(to right, #c82333, #bd2130);\r\n text-decoration: inherit;\r\n transition-duration: 0s, 0.15s;\r\n color: white;\r\n}\r\n\r\n\r\n.button-sm {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n gap: 0.313rem;\r\n font-size: 1rem;\r\n height: 100%;\r\n line-height: 1.25rem;\r\n padding: 0.75rem 1.5rem;\r\n border-radius: 2rem;\r\n width: 100%;\r\n}\r\n\r\n.button-md {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n gap: 0.313rem;\r\n font-size: 1rem;\r\n height: 100%;\r\n line-height: 1.25rem;\r\n padding: 0.75rem 1.5rem;\r\n border-radius: 2rem;\r\n max-width: 8rem;\r\n}\r\n\r\n.button-lg {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n gap: 0.313rem;\r\n font-size: 1rem;\r\n height: 100%;\r\n line-height: 1.25rem;\r\n padding: 0.75rem 1.5rem;\r\n border-radius: 2rem;\r\n max-width: 12rem;\r\n}\r\n.button__icon {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n}\r\n\r\n.button__text {\r\n font-family: 'Roboto Condensed', sans-serif;\r\n white-space: nowrap;\r\n}\r\n\r\n\r\n.button-disabled {\r\n opacity: 0.6;\r\n cursor: not-allowed;\r\n}\r\n\r\nbutton.button-icon {\r\n gap: 0;\r\n background: none;\r\n border: none;\r\n outline: none;\r\n cursor: pointer;\r\n}\r\n\r\nbutton.button-icon:hover {\r\n background: #f0f0f0;\r\n}\r\n\r\nbutton.button-tertiary {\r\n background: transparent;\r\n font-weight: 500;\r\n border: 2px solid #333;\r\n outline: none;\r\n cursor: pointer;\r\n color: #333;\r\n} */\r\n\r\n/* Stile base del pulsante */\r\n.button-primary {\r\n display: inline-block;\r\n outline: none;\r\n border: 2px solid transparent;\r\n border-radius: 3px;\r\n box-sizing: border-box;\r\n font-weight: 500;\r\n max-width: 100%;\r\n text-align: center;\r\n text-decoration: none;\r\n transition:\r\n background 0.1s ease-out 0s,\r\n box-shadow 0.15s cubic-bezier(0.47, 0.03, 0.49, 1.38) 0s;\r\n background: #333;\r\n cursor: pointer;\r\n height: 32px;\r\n line-height: 32px;\r\n padding: 0px 12px;\r\n vertical-align: middle;\r\n width: auto;\r\n font-size: 14px;\r\n color: rgb(255, 255, 255);\r\n}\r\n\r\n/* Stile hover del pulsante */\r\n.button-primary:not(:disabled):hover {\r\n background: #0095ae;\r\n text-decoration: inherit;\r\n transition-duration: 0s, 0.15s;\r\n color: rgb(255, 255, 255);\r\n border: 2px solid #0095ae;\r\n}\r\n\r\n/* Stile del pulsante secondario */\r\n.button-secondary {\r\n display: inline-block;\r\n outline: none;\r\n border: 2px solid transparent;\r\n border-radius: 3px;\r\n box-sizing: border-box;\r\n font-weight: 500;\r\n max-width: 100%;\r\n text-align: center;\r\n text-decoration: none;\r\n transition:\r\n background 0.1s ease-out 0s,\r\n box-shadow 0.15s cubic-bezier(0.47, 0.03, 0.49, 1.38) 0s;\r\n background: linear-gradient(to right, rgb(59, 65, 71), rgb(48, 54, 59));\r\n cursor: pointer;\r\n height: 32px;\r\n line-height: 32px;\r\n padding: 0px 12px;\r\n vertical-align: middle;\r\n width: auto;\r\n font-size: 14px;\r\n color: white;\r\n}\r\n\r\n/* Stile hover del pulsante secondario */\r\n.button-secondary:not(:disabled):hover {\r\n background: linear-gradient(to right, #5a6268, #4e555b);\r\n text-decoration: inherit;\r\n transition-duration: 0s, 0.15s;\r\n color: white;\r\n}\r\n\r\n/* Stile del pulsante di pericolo */\r\n.button-danger {\r\n display: inline-block;\r\n outline: none;\r\n border: 2px solid transparent;\r\n border-radius: 3px;\r\n box-sizing: border-box;\r\n font-weight: 500;\r\n max-width: 100%;\r\n text-align: center;\r\n text-decoration: none;\r\n transition:\r\n background 0.1s ease-out 0s,\r\n box-shadow 0.15s cubic-bezier(0.47, 0.03, 0.49, 1.38) 0s;\r\n background: linear-gradient(to right, rgb(153, 31, 43), rgb(130, 27, 37));\r\n cursor: pointer;\r\n height: 32px;\r\n line-height: 32px;\r\n padding: 0px 12px;\r\n vertical-align: middle;\r\n width: auto;\r\n font-size: 14px;\r\n color: white;\r\n}\r\n\r\n/* Stile hover del pulsante di pericolo */\r\n.button-danger:not(:disabled):hover {\r\n background: linear-gradient(to right, #c82333, #bd2130);\r\n text-decoration: inherit;\r\n transition-duration: 0s, 0.15s;\r\n color: white;\r\n}\r\n\r\n/* Stile del pulsante disabilitato */\r\n.button-primary:disabled,\r\n.button-secondary:disabled,\r\n.button-danger:disabled,\r\n.button-disabled {\r\n background-color: #cccccc;\r\n color: #000000;\r\n cursor: default; /* Usa il cursore a freccia */\r\n opacity: 0.6;\r\n}\r\n\r\n/* Assicurati che l'hover non funzioni quando il pulsante è disabilitato */\r\n.button-primary:disabled:hover,\r\n.button-secondary:disabled:hover,\r\n.button-danger:disabled:hover,\r\n.button-disabled:hover {\r\n background-color: #cccccc;\r\n border: 2px solid transparent;\r\n}\r\n\r\n/* Button sizes */\r\n.button-sm {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n gap: 0.313rem;\r\n font-size: 1rem;\r\n height: 100%;\r\n line-height: 1.25rem;\r\n padding: 0.75rem 1.5rem;\r\n border-radius: 2rem;\r\n width: 100%;\r\n}\r\n\r\n.button-md {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n gap: 0.313rem;\r\n font-size: 1rem;\r\n height: 100%;\r\n line-height: 1.25rem;\r\n padding: 0.75rem 1.5rem;\r\n border-radius: 2rem;\r\n max-width: 8rem;\r\n}\r\n\r\n.button-lg {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n gap: 0.313rem;\r\n font-size: 1rem;\r\n height: 100%;\r\n line-height: 1.25rem;\r\n padding: 0.75rem 1.5rem;\r\n border-radius: 2rem;\r\n max-width: 12rem;\r\n}\r\n\r\n.button__icon {\r\n display: flex;\r\n justify-content: center;\r\n align-items: center;\r\n}\r\n\r\n.button__text {\r\n font-family: 'Roboto Condensed', sans-serif;\r\n white-space: nowrap;\r\n}\r\n\r\nbutton.button-icon {\r\n gap: 0;\r\n background: none;\r\n border: none;\r\n outline: none;\r\n cursor: pointer;\r\n}\r\n\r\nbutton.button-icon:not(:disabled):hover {\r\n background: #f0f0f0;\r\n}\r\n\r\nbutton.button-tertiary {\r\n background: transparent;\r\n font-weight: 500;\r\n border: 2px solid #333;\r\n outline: none;\r\n cursor: pointer;\r\n color: #333;\r\n}\r\n\r\nbutton.button-tertiary:not(:disabled):hover {\r\n background: #f0f0f0;\r\n}\r\n";
|
|
2
2
|
export {
|
|
3
3
|
styles as default
|
|
4
4
|
};
|
|
@@ -26,7 +26,7 @@ const uploadImage = qwik.$(async (_event, input, currentFile, selectedFile, imag
|
|
|
26
26
|
if (selectedFile) selectedFile.value = file.name;
|
|
27
27
|
}
|
|
28
28
|
});
|
|
29
|
-
const Input = qwik.component$(({ id, type, placeholder, value, error, onValidate$, onInput$, bgLight, currentFile, selectedFile, icon, prefix, required = false, color, nameAttribute, label, selectedValue }) => {
|
|
29
|
+
const Input = qwik.component$(({ id, type, placeholder, value, error, onValidate$, onInput$, bgLight, currentFile, selectedFile, icon, prefix, required = false, color, nameAttribute, label, selectedValue, autocomplete }) => {
|
|
30
30
|
qwik.useStylesScoped$(styles);
|
|
31
31
|
const internalError = qwik.useSignal(null);
|
|
32
32
|
const showError = error ?? internalError;
|
|
@@ -115,7 +115,8 @@ const Input = qwik.component$(({ id, type, placeholder, value, error, onValidate
|
|
|
115
115
|
onInput$: inputHandler,
|
|
116
116
|
onBlur$: inputHandler,
|
|
117
117
|
maxLength: 14,
|
|
118
|
-
required
|
|
118
|
+
required,
|
|
119
|
+
autocomplete
|
|
119
120
|
})
|
|
120
121
|
]
|
|
121
122
|
})
|
|
@@ -163,7 +164,8 @@ const Input = qwik.component$(({ id, type, placeholder, value, error, onValidate
|
|
|
163
164
|
"bind:value": value,
|
|
164
165
|
onInput$: inputHandler,
|
|
165
166
|
onBlur$: inputHandler,
|
|
166
|
-
required
|
|
167
|
+
required,
|
|
168
|
+
autocomplete
|
|
167
169
|
})
|
|
168
170
|
]
|
|
169
171
|
})
|
|
@@ -24,7 +24,7 @@ const uploadImage = $(async (_event, input, currentFile, selectedFile, imageUrl)
|
|
|
24
24
|
if (selectedFile) selectedFile.value = file.name;
|
|
25
25
|
}
|
|
26
26
|
});
|
|
27
|
-
const Input = component$(({ id, type, placeholder, value, error, onValidate$, onInput$, bgLight, currentFile, selectedFile, icon, prefix, required = false, color, nameAttribute, label, selectedValue }) => {
|
|
27
|
+
const Input = component$(({ id, type, placeholder, value, error, onValidate$, onInput$, bgLight, currentFile, selectedFile, icon, prefix, required = false, color, nameAttribute, label, selectedValue, autocomplete }) => {
|
|
28
28
|
useStylesScoped$(styles);
|
|
29
29
|
const internalError = useSignal(null);
|
|
30
30
|
const showError = error ?? internalError;
|
|
@@ -113,7 +113,8 @@ const Input = component$(({ id, type, placeholder, value, error, onValidate$, on
|
|
|
113
113
|
onInput$: inputHandler,
|
|
114
114
|
onBlur$: inputHandler,
|
|
115
115
|
maxLength: 14,
|
|
116
|
-
required
|
|
116
|
+
required,
|
|
117
|
+
autocomplete
|
|
117
118
|
})
|
|
118
119
|
]
|
|
119
120
|
})
|
|
@@ -161,7 +162,8 @@ const Input = component$(({ id, type, placeholder, value, error, onValidate$, on
|
|
|
161
162
|
"bind:value": value,
|
|
162
163
|
onInput$: inputHandler,
|
|
163
164
|
onBlur$: inputHandler,
|
|
164
|
-
required
|
|
165
|
+
required,
|
|
166
|
+
autocomplete
|
|
165
167
|
})
|
|
166
168
|
]
|
|
167
169
|
})
|
|
@@ -21,6 +21,7 @@ export interface InputProps {
|
|
|
21
21
|
nameAttribute?: string;
|
|
22
22
|
label?: string;
|
|
23
23
|
selectedValue?: Signal<string>;
|
|
24
|
+
autocomplete?: AutoFill;
|
|
24
25
|
}
|
|
25
26
|
export declare const displayLocalImage: QRL<(file: File, imageUrl?: Signal<string>) => void>;
|
|
26
27
|
export declare const uploadImage: QRL<(_event: Event, input: HTMLInputElement, currentFile?: Signal<any>, selectedFile?: Signal<string>, imageUrl?: Signal<string>) => Promise<void>>;
|