npm - @greghowe79/the-lib - Versions diffs - 2.3.0 → 2.3.2 - Mend

@greghowe79/the-lib 2.3.0 → 2.3.2

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 (5) hide show

package/lib/components/button/styles.css.qwik.cjs CHANGED Viewed

@@ -1,3 +1,3 @@
 "use strict";
-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/* 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  background: #000;\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  /* width: 100%; */\r\n  max-width: 8rem;\r\n}\r\n\r\n.button-primary.button-md,\r\n.button-secondary.button-md {\r\n  width: 100%;\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  width: 100%;\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\r\n/* NUOVO CODICE DA TESTARE */\r\n\r\n/* Variante Tab */\r\nbutton.button-tab {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 0.5rem;\r\n  padding: 1rem 1.5rem;\r\n  background: none;\r\n  border: none;\r\n  border-bottom: 3px solid transparent;\r\n  color: #6b7280;\r\n  font-size: 1rem;\r\n  font-weight: 500;\r\n  cursor: pointer;\r\n  transition: all 0.2s ease;\r\n  margin-bottom: -2px;\r\n  border-radius: 0;\r\n  height: auto;\r\n  max-width: none;\r\n}\r\n\r\nbutton.button-tab:not(:disabled):not(.button-active):hover {\r\n  color: #111827;\r\n  border-bottom-color: #d1d5db;\r\n  background: none;\r\n  border-left: none;\r\n  border-right: none;\r\n  border-top: none;\r\n}\r\n\r\nbutton.button-tab.button-active {\r\n  color: #06c;\r\n  border-bottom-color: #06c;\r\n}\r\n\r\nbutton.button-tab .button__icon {\r\n  width: 20px;\r\n  height: 20px;\r\n}\r\n";
+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  transition: background 0.1s ease-out 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  transition: background 0.1s ease-out 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  background: #000;\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  transition: background 0.1s ease-out 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  /* width: 100%; */\r\n  max-width: 8rem;\r\n}\r\n\r\n.button-primary.button-md,\r\n.button-secondary.button-md {\r\n  width: 100%;\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  width: 100%;\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\r\n/* NUOVO CODICE DA TESTARE */\r\n\r\n/* Variante Tab */\r\nbutton.button-tab {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 0.5rem;\r\n  padding: 1rem 1.5rem;\r\n  background: none;\r\n  border: none;\r\n  border-bottom: 3px solid transparent;\r\n  color: #6b7280;\r\n  font-size: 1rem;\r\n  font-weight: 500;\r\n  cursor: pointer;\r\n  transition: all 0.2s ease;\r\n  margin-bottom: -2px;\r\n  border-radius: 0;\r\n  height: auto;\r\n  max-width: none;\r\n}\r\n\r\nbutton.button-tab:not(:disabled):not(.button-active):hover {\r\n  color: #111827;\r\n  border-bottom-color: #d1d5db;\r\n  background: none;\r\n  border-left: none;\r\n  border-right: none;\r\n  border-top: none;\r\n}\r\n\r\nbutton.button-tab.button-active {\r\n  color: #06c;\r\n  border-bottom-color: #06c;\r\n}\r\n\r\nbutton.button-tab .button__icon {\r\n  width: 20px;\r\n  height: 20px;\r\n}\r\n";
 module.exports = styles;

package/lib/components/button/styles.css.qwik.mjs CHANGED Viewed

@@ -1,4 +1,4 @@
-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/* 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  background: #000;\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  /* width: 100%; */\r\n  max-width: 8rem;\r\n}\r\n\r\n.button-primary.button-md,\r\n.button-secondary.button-md {\r\n  width: 100%;\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  width: 100%;\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\r\n/* NUOVO CODICE DA TESTARE */\r\n\r\n/* Variante Tab */\r\nbutton.button-tab {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 0.5rem;\r\n  padding: 1rem 1.5rem;\r\n  background: none;\r\n  border: none;\r\n  border-bottom: 3px solid transparent;\r\n  color: #6b7280;\r\n  font-size: 1rem;\r\n  font-weight: 500;\r\n  cursor: pointer;\r\n  transition: all 0.2s ease;\r\n  margin-bottom: -2px;\r\n  border-radius: 0;\r\n  height: auto;\r\n  max-width: none;\r\n}\r\n\r\nbutton.button-tab:not(:disabled):not(.button-active):hover {\r\n  color: #111827;\r\n  border-bottom-color: #d1d5db;\r\n  background: none;\r\n  border-left: none;\r\n  border-right: none;\r\n  border-top: none;\r\n}\r\n\r\nbutton.button-tab.button-active {\r\n  color: #06c;\r\n  border-bottom-color: #06c;\r\n}\r\n\r\nbutton.button-tab .button__icon {\r\n  width: 20px;\r\n  height: 20px;\r\n}\r\n";
+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  transition: background 0.1s ease-out 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  transition: background 0.1s ease-out 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  background: #000;\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  transition: background 0.1s ease-out 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  /* width: 100%; */\r\n  max-width: 8rem;\r\n}\r\n\r\n.button-primary.button-md,\r\n.button-secondary.button-md {\r\n  width: 100%;\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  width: 100%;\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\r\n/* NUOVO CODICE DA TESTARE */\r\n\r\n/* Variante Tab */\r\nbutton.button-tab {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 0.5rem;\r\n  padding: 1rem 1.5rem;\r\n  background: none;\r\n  border: none;\r\n  border-bottom: 3px solid transparent;\r\n  color: #6b7280;\r\n  font-size: 1rem;\r\n  font-weight: 500;\r\n  cursor: pointer;\r\n  transition: all 0.2s ease;\r\n  margin-bottom: -2px;\r\n  border-radius: 0;\r\n  height: auto;\r\n  max-width: none;\r\n}\r\n\r\nbutton.button-tab:not(:disabled):not(.button-active):hover {\r\n  color: #111827;\r\n  border-bottom-color: #d1d5db;\r\n  background: none;\r\n  border-left: none;\r\n  border-right: none;\r\n  border-top: none;\r\n}\r\n\r\nbutton.button-tab.button-active {\r\n  color: #06c;\r\n  border-bottom-color: #06c;\r\n}\r\n\r\nbutton.button-tab .button__icon {\r\n  width: 20px;\r\n  height: 20px;\r\n}\r\n";
 export {
   styles as default
 };

package/lib/components/navigationmenu/styles.css.qwik.cjs CHANGED Viewed

@@ -1,3 +1,3 @@
 "use strict";
-const styles = ".menu {\r\n  background-color: rgba(255, 255, 255, 0.8);\r\n  backdrop-filter: saturate(180%) blur(20px);\r\n  -webkit-backdrop-filter: saturate(180%) blur(20px);\r\n  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);\r\n  width: 100%;\r\n  position: fixed;\r\n  top: 0;\r\n  z-index: 2;\r\n  height: 5.75rem;\r\n}\r\n\r\n.menu::before {\r\n  content: '';\r\n  position: absolute;\r\n  inset: 0;\r\n  backdrop-filter: saturate(180%) blur(20px);\r\n  -webkit-backdrop-filter: none;\r\n  pointer-events: none;\r\n  z-index: -1;\r\n  transition: opacity 0.25s ease;\r\n}\r\n\r\n.menu.open {\r\n  background-color: rgba(255, 255, 255, 1);\r\n  box-shadow: none;\r\n}\r\n\r\n.menu.open::before {\r\n  opacity: 0;\r\n}\r\n\r\n.menu-container {\r\n  max-width: 75rem;\r\n  padding: 1rem;\r\n  margin: 0 auto;\r\n  display: flex;\r\n  justify-content: space-between;\r\n  align-items: center;\r\n  height: 100%;\r\n}\r\n.menu-left {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 2rem;\r\n  height: 100%;\r\n}\r\n.menu-list {\r\n  display: flex;\r\n  list-style: none;\r\n  gap: 1.5rem;\r\n  margin: 0;\r\n  padding: 0;\r\n}\r\n\r\n.menu-link {\r\n  display: inline-block;\r\n  padding: 0.5rem 1rem;\r\n  color: #333;\r\n  text-decoration: none;\r\n  border-radius: 4px;\r\n  font-family: 'Roboto Condensed', sans-serif;\r\n  font-weight: 500;\r\n  transition:\r\n    background-color 0.2s,\r\n    color 0.2s;\r\n}\r\n\r\n.active {\r\n  background-color: #f0f0f0;\r\n  color: #333;\r\n  display: inline-block;\r\n  padding: 0.5rem 1rem;\r\n  text-decoration: none;\r\n  border-radius: 4px;\r\n  font-family: 'Roboto Condensed', sans-serif;\r\n  font-weight: 500;\r\n  transition:\r\n    background-color 0.2s,\r\n    color 0.2s;\r\n}\r\n\r\n.menu-link:hover {\r\n  background-color: #f0f0f0;\r\n  color: #333;\r\n}\r\n\r\n.menu-right {\r\n  display: flex;\r\n  gap: 0.75rem;\r\n  align-items: center;\r\n  justify-content: center;\r\n}\r\n\r\n/* Hamburger button */\r\n.menu-toggle {\r\n  display: none;\r\n  flex-direction: column;\r\n  justify-content: center;\r\n  gap: 5px;\r\n  background: none;\r\n  border: none;\r\n  cursor: pointer;\r\n  padding: 0.5rem;\r\n}\r\n\r\n.menu-toggle .bar {\r\n  width: 25px;\r\n  height: 3px;\r\n  background-color: #333;\r\n  border-radius: 2px;\r\n  transition: all 0.3s ease;\r\n  transform-origin: center;\r\n}\r\n\r\n.menu-toggle.open .bar:nth-child(1) {\r\n  transform: rotate(45deg) translate(5px, 5px);\r\n}\r\n\r\n.menu-toggle.open .bar:nth-child(2) {\r\n  opacity: 0;\r\n}\r\n\r\n.menu-toggle.open .bar:nth-child(3) {\r\n  transform: rotate(-45deg) translate(5px, -5px);\r\n}\r\n\r\n.desktop-only {\r\n  display: flex;\r\n}\r\n\r\n.mobile-only {\r\n  display: none;\r\n}\r\n\r\n@media (max-width: 949px) {\r\n  .menu {\r\n    height: 5.75rem;\r\n  }\r\n  .menu-container {\r\n    height: 100%;\r\n    padding: 0;\r\n  }\r\n\r\n  .menu-toggle {\r\n    display: flex;\r\n  }\r\n\r\n  .menu-left {\r\n    justify-content: space-between;\r\n    width: 100%;\r\n    padding: 1rem;\r\n  }\r\n\r\n  .menu-list {\r\n    max-height: 0;\r\n    opacity: 0;\r\n    overflow-y: auto;\r\n    transition:\r\n      max-height 0.5s cubic-bezier(0.25, 0.8, 0.25, 1),\r\n      opacity 0.4s ease-in-out;\r\n    position: fixed;\r\n    top: 5.75rem;\r\n    left: 0;\r\n    right: 0;\r\n    background-color: #fff;\r\n    flex-direction: column;\r\n    padding: 1rem;\r\n    z-index: 999;\r\n    height: calc(100vh - 5.75rem);\r\n  }\r\n\r\n  .menu-list.open {\r\n    max-height: calc(100vh - 5.75rem);\r\n    opacity: 1;\r\n  }\r\n\r\n  .desktop-only {\r\n    display: none;\r\n  }\r\n\r\n  .mobile-only {\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: 0.75rem;\r\n    margin-top: 1rem;\r\n    width: 100%;\r\n  }\r\n}\r\n";
+const styles = ".menu {\r\n  background-color: rgba(255, 255, 255, 0.8);\r\n  backdrop-filter: saturate(180%) blur(20px);\r\n  -webkit-backdrop-filter: saturate(180%) blur(20px);\r\n  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);\r\n  width: 100%;\r\n  position: fixed;\r\n  top: 0;\r\n  z-index: 2;\r\n  height: 5.75rem;\r\n  transition:\r\n    box-shadow 0.2s ease,\r\n    background-color 0.2s ease;\r\n}\r\n\r\n.menu::before {\r\n  content: '';\r\n  position: absolute;\r\n  inset: 0;\r\n  backdrop-filter: saturate(180%) blur(20px);\r\n  -webkit-backdrop-filter: none;\r\n  pointer-events: none;\r\n  z-index: -1;\r\n  transition: opacity 0.25s ease;\r\n}\r\n\r\n.menu.open {\r\n  background-color: rgba(255, 255, 255, 1);\r\n  box-shadow: none;\r\n}\r\n\r\n.menu.open::before {\r\n  opacity: 0;\r\n}\r\n\r\n.menu-container {\r\n  max-width: 75rem;\r\n  padding: 1rem;\r\n  margin: 0 auto;\r\n  display: flex;\r\n  justify-content: space-between;\r\n  align-items: center;\r\n  height: 100%;\r\n}\r\n.menu-left {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 2rem;\r\n  height: 100%;\r\n}\r\n.menu-list {\r\n  display: flex;\r\n  list-style: none;\r\n  gap: 1.5rem;\r\n  margin: 0;\r\n  padding: 0;\r\n}\r\n\r\n.menu-link {\r\n  display: inline-block;\r\n  padding: 0.5rem 1rem;\r\n  color: #333;\r\n  text-decoration: none;\r\n  border-radius: 4px;\r\n  font-family: 'Roboto Condensed', sans-serif;\r\n  font-weight: 500;\r\n  transition:\r\n    background-color 0.2s,\r\n    color 0.2s;\r\n}\r\n\r\n.active {\r\n  background-color: #f0f0f0;\r\n  color: #333;\r\n  display: inline-block;\r\n  padding: 0.5rem 1rem;\r\n  text-decoration: none;\r\n  border-radius: 4px;\r\n  font-family: 'Roboto Condensed', sans-serif;\r\n  font-weight: 500;\r\n  transition:\r\n    background-color 0.2s,\r\n    color 0.2s;\r\n}\r\n\r\n.menu-link:hover {\r\n  background-color: #f0f0f0;\r\n  color: #333;\r\n}\r\n\r\n.menu-right {\r\n  display: flex;\r\n  gap: 0.75rem;\r\n  align-items: center;\r\n  justify-content: center;\r\n}\r\n\r\n/* Hamburger button */\r\n.menu-toggle {\r\n  display: none;\r\n  flex-direction: column;\r\n  justify-content: center;\r\n  gap: 5px;\r\n  background: none;\r\n  border: none;\r\n  cursor: pointer;\r\n  padding: 0.5rem;\r\n}\r\n\r\n.menu-toggle .bar {\r\n  width: 25px;\r\n  height: 3px;\r\n  background-color: #333;\r\n  border-radius: 2px;\r\n  transition: all 0.3s ease;\r\n  transform-origin: center;\r\n}\r\n\r\n.menu-toggle.open .bar:nth-child(1) {\r\n  transform: rotate(45deg) translate(5px, 5px);\r\n}\r\n\r\n.menu-toggle.open .bar:nth-child(2) {\r\n  opacity: 0;\r\n}\r\n\r\n.menu-toggle.open .bar:nth-child(3) {\r\n  transform: rotate(-45deg) translate(5px, -5px);\r\n}\r\n\r\n.desktop-only {\r\n  display: flex;\r\n}\r\n\r\n.mobile-only {\r\n  display: none;\r\n}\r\n\r\n@media (max-width: 949px) {\r\n  .menu {\r\n    height: 5.75rem;\r\n  }\r\n  .menu-container {\r\n    height: 100%;\r\n    padding: 0;\r\n  }\r\n\r\n  .menu-toggle {\r\n    display: flex;\r\n  }\r\n\r\n  .menu-left {\r\n    justify-content: space-between;\r\n    width: 100%;\r\n    padding: 1rem;\r\n  }\r\n\r\n  .menu-list {\r\n    max-height: 0;\r\n    opacity: 0;\r\n    overflow-y: auto;\r\n    transition:\r\n      max-height 0.5s cubic-bezier(0.25, 0.8, 0.25, 1),\r\n      opacity 0.4s ease-in-out;\r\n    position: fixed;\r\n    top: 5.75rem;\r\n    left: 0;\r\n    right: 0;\r\n    background-color: #fff;\r\n    flex-direction: column;\r\n    padding: 1rem;\r\n    z-index: 999;\r\n    height: calc(100vh - 5.75rem);\r\n  }\r\n\r\n  .menu-list.open {\r\n    max-height: calc(100vh - 5.75rem);\r\n    opacity: 1;\r\n  }\r\n\r\n  .desktop-only {\r\n    display: none;\r\n  }\r\n\r\n  .mobile-only {\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: 0.75rem;\r\n    margin-top: 1rem;\r\n    width: 100%;\r\n  }\r\n}\r\n";
 module.exports = styles;

package/lib/components/navigationmenu/styles.css.qwik.mjs CHANGED Viewed

@@ -1,4 +1,4 @@
-const styles = ".menu {\r\n  background-color: rgba(255, 255, 255, 0.8);\r\n  backdrop-filter: saturate(180%) blur(20px);\r\n  -webkit-backdrop-filter: saturate(180%) blur(20px);\r\n  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);\r\n  width: 100%;\r\n  position: fixed;\r\n  top: 0;\r\n  z-index: 2;\r\n  height: 5.75rem;\r\n}\r\n\r\n.menu::before {\r\n  content: '';\r\n  position: absolute;\r\n  inset: 0;\r\n  backdrop-filter: saturate(180%) blur(20px);\r\n  -webkit-backdrop-filter: none;\r\n  pointer-events: none;\r\n  z-index: -1;\r\n  transition: opacity 0.25s ease;\r\n}\r\n\r\n.menu.open {\r\n  background-color: rgba(255, 255, 255, 1);\r\n  box-shadow: none;\r\n}\r\n\r\n.menu.open::before {\r\n  opacity: 0;\r\n}\r\n\r\n.menu-container {\r\n  max-width: 75rem;\r\n  padding: 1rem;\r\n  margin: 0 auto;\r\n  display: flex;\r\n  justify-content: space-between;\r\n  align-items: center;\r\n  height: 100%;\r\n}\r\n.menu-left {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 2rem;\r\n  height: 100%;\r\n}\r\n.menu-list {\r\n  display: flex;\r\n  list-style: none;\r\n  gap: 1.5rem;\r\n  margin: 0;\r\n  padding: 0;\r\n}\r\n\r\n.menu-link {\r\n  display: inline-block;\r\n  padding: 0.5rem 1rem;\r\n  color: #333;\r\n  text-decoration: none;\r\n  border-radius: 4px;\r\n  font-family: 'Roboto Condensed', sans-serif;\r\n  font-weight: 500;\r\n  transition:\r\n    background-color 0.2s,\r\n    color 0.2s;\r\n}\r\n\r\n.active {\r\n  background-color: #f0f0f0;\r\n  color: #333;\r\n  display: inline-block;\r\n  padding: 0.5rem 1rem;\r\n  text-decoration: none;\r\n  border-radius: 4px;\r\n  font-family: 'Roboto Condensed', sans-serif;\r\n  font-weight: 500;\r\n  transition:\r\n    background-color 0.2s,\r\n    color 0.2s;\r\n}\r\n\r\n.menu-link:hover {\r\n  background-color: #f0f0f0;\r\n  color: #333;\r\n}\r\n\r\n.menu-right {\r\n  display: flex;\r\n  gap: 0.75rem;\r\n  align-items: center;\r\n  justify-content: center;\r\n}\r\n\r\n/* Hamburger button */\r\n.menu-toggle {\r\n  display: none;\r\n  flex-direction: column;\r\n  justify-content: center;\r\n  gap: 5px;\r\n  background: none;\r\n  border: none;\r\n  cursor: pointer;\r\n  padding: 0.5rem;\r\n}\r\n\r\n.menu-toggle .bar {\r\n  width: 25px;\r\n  height: 3px;\r\n  background-color: #333;\r\n  border-radius: 2px;\r\n  transition: all 0.3s ease;\r\n  transform-origin: center;\r\n}\r\n\r\n.menu-toggle.open .bar:nth-child(1) {\r\n  transform: rotate(45deg) translate(5px, 5px);\r\n}\r\n\r\n.menu-toggle.open .bar:nth-child(2) {\r\n  opacity: 0;\r\n}\r\n\r\n.menu-toggle.open .bar:nth-child(3) {\r\n  transform: rotate(-45deg) translate(5px, -5px);\r\n}\r\n\r\n.desktop-only {\r\n  display: flex;\r\n}\r\n\r\n.mobile-only {\r\n  display: none;\r\n}\r\n\r\n@media (max-width: 949px) {\r\n  .menu {\r\n    height: 5.75rem;\r\n  }\r\n  .menu-container {\r\n    height: 100%;\r\n    padding: 0;\r\n  }\r\n\r\n  .menu-toggle {\r\n    display: flex;\r\n  }\r\n\r\n  .menu-left {\r\n    justify-content: space-between;\r\n    width: 100%;\r\n    padding: 1rem;\r\n  }\r\n\r\n  .menu-list {\r\n    max-height: 0;\r\n    opacity: 0;\r\n    overflow-y: auto;\r\n    transition:\r\n      max-height 0.5s cubic-bezier(0.25, 0.8, 0.25, 1),\r\n      opacity 0.4s ease-in-out;\r\n    position: fixed;\r\n    top: 5.75rem;\r\n    left: 0;\r\n    right: 0;\r\n    background-color: #fff;\r\n    flex-direction: column;\r\n    padding: 1rem;\r\n    z-index: 999;\r\n    height: calc(100vh - 5.75rem);\r\n  }\r\n\r\n  .menu-list.open {\r\n    max-height: calc(100vh - 5.75rem);\r\n    opacity: 1;\r\n  }\r\n\r\n  .desktop-only {\r\n    display: none;\r\n  }\r\n\r\n  .mobile-only {\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: 0.75rem;\r\n    margin-top: 1rem;\r\n    width: 100%;\r\n  }\r\n}\r\n";
+const styles = ".menu {\r\n  background-color: rgba(255, 255, 255, 0.8);\r\n  backdrop-filter: saturate(180%) blur(20px);\r\n  -webkit-backdrop-filter: saturate(180%) blur(20px);\r\n  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);\r\n  width: 100%;\r\n  position: fixed;\r\n  top: 0;\r\n  z-index: 2;\r\n  height: 5.75rem;\r\n  transition:\r\n    box-shadow 0.2s ease,\r\n    background-color 0.2s ease;\r\n}\r\n\r\n.menu::before {\r\n  content: '';\r\n  position: absolute;\r\n  inset: 0;\r\n  backdrop-filter: saturate(180%) blur(20px);\r\n  -webkit-backdrop-filter: none;\r\n  pointer-events: none;\r\n  z-index: -1;\r\n  transition: opacity 0.25s ease;\r\n}\r\n\r\n.menu.open {\r\n  background-color: rgba(255, 255, 255, 1);\r\n  box-shadow: none;\r\n}\r\n\r\n.menu.open::before {\r\n  opacity: 0;\r\n}\r\n\r\n.menu-container {\r\n  max-width: 75rem;\r\n  padding: 1rem;\r\n  margin: 0 auto;\r\n  display: flex;\r\n  justify-content: space-between;\r\n  align-items: center;\r\n  height: 100%;\r\n}\r\n.menu-left {\r\n  display: flex;\r\n  align-items: center;\r\n  gap: 2rem;\r\n  height: 100%;\r\n}\r\n.menu-list {\r\n  display: flex;\r\n  list-style: none;\r\n  gap: 1.5rem;\r\n  margin: 0;\r\n  padding: 0;\r\n}\r\n\r\n.menu-link {\r\n  display: inline-block;\r\n  padding: 0.5rem 1rem;\r\n  color: #333;\r\n  text-decoration: none;\r\n  border-radius: 4px;\r\n  font-family: 'Roboto Condensed', sans-serif;\r\n  font-weight: 500;\r\n  transition:\r\n    background-color 0.2s,\r\n    color 0.2s;\r\n}\r\n\r\n.active {\r\n  background-color: #f0f0f0;\r\n  color: #333;\r\n  display: inline-block;\r\n  padding: 0.5rem 1rem;\r\n  text-decoration: none;\r\n  border-radius: 4px;\r\n  font-family: 'Roboto Condensed', sans-serif;\r\n  font-weight: 500;\r\n  transition:\r\n    background-color 0.2s,\r\n    color 0.2s;\r\n}\r\n\r\n.menu-link:hover {\r\n  background-color: #f0f0f0;\r\n  color: #333;\r\n}\r\n\r\n.menu-right {\r\n  display: flex;\r\n  gap: 0.75rem;\r\n  align-items: center;\r\n  justify-content: center;\r\n}\r\n\r\n/* Hamburger button */\r\n.menu-toggle {\r\n  display: none;\r\n  flex-direction: column;\r\n  justify-content: center;\r\n  gap: 5px;\r\n  background: none;\r\n  border: none;\r\n  cursor: pointer;\r\n  padding: 0.5rem;\r\n}\r\n\r\n.menu-toggle .bar {\r\n  width: 25px;\r\n  height: 3px;\r\n  background-color: #333;\r\n  border-radius: 2px;\r\n  transition: all 0.3s ease;\r\n  transform-origin: center;\r\n}\r\n\r\n.menu-toggle.open .bar:nth-child(1) {\r\n  transform: rotate(45deg) translate(5px, 5px);\r\n}\r\n\r\n.menu-toggle.open .bar:nth-child(2) {\r\n  opacity: 0;\r\n}\r\n\r\n.menu-toggle.open .bar:nth-child(3) {\r\n  transform: rotate(-45deg) translate(5px, -5px);\r\n}\r\n\r\n.desktop-only {\r\n  display: flex;\r\n}\r\n\r\n.mobile-only {\r\n  display: none;\r\n}\r\n\r\n@media (max-width: 949px) {\r\n  .menu {\r\n    height: 5.75rem;\r\n  }\r\n  .menu-container {\r\n    height: 100%;\r\n    padding: 0;\r\n  }\r\n\r\n  .menu-toggle {\r\n    display: flex;\r\n  }\r\n\r\n  .menu-left {\r\n    justify-content: space-between;\r\n    width: 100%;\r\n    padding: 1rem;\r\n  }\r\n\r\n  .menu-list {\r\n    max-height: 0;\r\n    opacity: 0;\r\n    overflow-y: auto;\r\n    transition:\r\n      max-height 0.5s cubic-bezier(0.25, 0.8, 0.25, 1),\r\n      opacity 0.4s ease-in-out;\r\n    position: fixed;\r\n    top: 5.75rem;\r\n    left: 0;\r\n    right: 0;\r\n    background-color: #fff;\r\n    flex-direction: column;\r\n    padding: 1rem;\r\n    z-index: 999;\r\n    height: calc(100vh - 5.75rem);\r\n  }\r\n\r\n  .menu-list.open {\r\n    max-height: calc(100vh - 5.75rem);\r\n    opacity: 1;\r\n  }\r\n\r\n  .desktop-only {\r\n    display: none;\r\n  }\r\n\r\n  .mobile-only {\r\n    display: flex;\r\n    flex-direction: column;\r\n    gap: 0.75rem;\r\n    margin-top: 1rem;\r\n    width: 100%;\r\n  }\r\n}\r\n";
 export {
   styles as default
 };

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@greghowe79/the-lib",
-  "version": "2.3.0",
+  "version": "2.3.2",
   "description": "Collection of fast components for Qwik",
   "main": "./lib/index.qwik.mjs",
   "qwik": "./lib/index.qwik.mjs",