@zanichelli/albe-web-components 9.2.0 → 9.2.2-beta

package/dist/collection/components/notification/z-toast-notification/styles.css

@@ -1,254 +1,254 @@
-:host {
-  display: inline-block;
-  width: 100vw;
-  min-width: 200px;
-
-  --percentuale: 0;
-}
-
-:host(.slide-in-left) {
-  animation: slideinleft 1s cubic-bezier(0.25, 0.1, 0.25, 0.1);
-  animation-fill-mode: forwards;
-}
-
-:host(.slide-in-right) {
-  animation: slideinright 1s cubic-bezier(0.25, 0.1, 0.25, 0.1);
-  animation-fill-mode: forwards;
-}
-
-:host(.slide-in-down) {
-  animation: slideindown 1s cubic-bezier(0.25, 0.1, 0.25, 0.1);
-  animation-fill-mode: forwards;
-}
-
-:host(.slide-in-up) {
-  animation: slideinup 1s cubic-bezier(0.25, 0.1, 0.25, 0.1);
-  animation-fill-mode: forwards;
-}
-
-:host(.slide-out-left) {
-  animation: slideoutleft 0.5s cubic-bezier(0.25, 0.1, 0.25, 0.1);
-  animation-fill-mode: forwards;
-}
-
-:host(.slide-out-right) {
-  animation: slideoutright 0.5s cubic-bezier(0.25, 0.1, 0.25, 0.1);
-  animation-fill-mode: forwards;
-}
-
-:host(.slide-out-down) {
-  animation: slideoutdown 0.5s cubic-bezier(0.25, 0.1, 0.25, 0.1);
-  animation-fill-mode: forwards;
-}
-
-:host(.slide-out-up) {
-  animation: slideoutup 0.5s cubic-bezier(0.25, 0.1, 0.25, 0.1);
-  animation-fill-mode: forwards;
-}
-
-@keyframes slideinleft {
-  0% {
-    transform: translateX(100%);
-  }
-
-  100% {
-    transform: translateX(0);
-  }
-}
-
-@keyframes slideinright {
-  0% {
-    transform: translateX(-100%);
-  }
-
-  100% {
-    transform: translateX(0);
-  }
-}
-
-@keyframes slideinup {
-  0% {
-    opacity: 0;
-    transform: translateY(100%);
-  }
-
-  100% {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-@keyframes slideindown {
-  0% {
-    opacity: 0;
-    transform: translateY(-100%);
-  }
-
-  100% {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-@keyframes slideoutleft {
-  0% {
-    /* stylelint-disable-next-line alpha-value-notation */
-    opacity: calc(100% - var(--percentuale));
-    transform: translateX(var(--percentuale));
-  }
-
-  100% {
-    opacity: 0;
-    transform: translateX(-100%);
-  }
-}
-
-@keyframes slideoutright {
-  0% {
-    /* stylelint-disable-next-line alpha-value-notation */
-    opacity: calc(100% - var(--percentuale));
-    transform: translateX(var(--percentuale));
-  }
-
-  100% {
-    opacity: 0;
-    transform: translateX(100%);
-  }
-}
-
-@keyframes slideoutup {
-  0% {
-    opacity: 1;
-    transform: translateY(var(--percentuale));
-  }
-
-  100% {
-    opacity: 0;
-    transform: translateY(-100%);
-  }
-}
-
-@keyframes slideoutdown {
-  0% {
-    opacity: 1;
-    transform: translateY(var(--percentuale));
-  }
-
-  100% {
-    opacity: 0;
-    transform: translateY(100%);
-  }
-}
-
-:host > #external-container {
-  display: flex;
-  min-height: 52px;
-  box-sizing: border-box;
-  align-items: center;
-  justify-content: space-between;
-  padding: calc(var(--space-unit) * 1) calc(var(--space-unit) * 2);
-  border-radius: 4px;
-  box-shadow: var(--shadow-3);
-  font-family: var(--font-family-sans);
-  font-size: 14px;
-  font-weight: var(--font-rg);
-  letter-spacing: 0.16px;
-}
-
-:host > #external-container.mobile-wrapped > #icon {
-  align-self: flex-start;
-}
-
-:host > #external-container.several-lines-padding {
-  padding: calc(var(--space-unit) * 2);
-}
-
-:host > #external-container > #flex-container {
-  display: flex;
-  width: 100%;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: space-between;
-}
-
-:host > #external-container #text {
-  margin-right: calc(var(--space-unit) * 2);
-  color: var(--color-white);
-  letter-spacing: 0.16px;
-  line-height: 20px;
-  text-align: left;
-}
-
-:host > #external-container #text > .title {
-  margin-right: 4px;
-  font-weight: 600;
-}
-
-:host > #external-container.mobile-wrapped #button ::slotted(z-button) {
-  margin-top: calc(var(--space-unit) * 2);
-}
-
-:host > #external-container #icon {
-  margin-left: calc(var(--space-unit) * 2);
-  cursor: pointer;
-  fill: var(--color-white);
-}
-
-:host > #external-container.dark {
-  background: var(--gray800);
-}
-
-:host > #external-container.light {
-  background: var(--color-background);
-}
-
-:host > #external-container.light #icon,
-:host > #external-container.warning #text,
-:host > #external-container.warning #icon {
-  fill: var(--color-icon01);
-}
-
-:host > #external-container.light #text,
-:host > #external-container.warning #text {
-  color: var(--gray800);
-}
-
-:host > #external-container.accent {
-  background: var(--color-primary01);
-}
-
-:host > #external-container.error {
-  background: var(--color-error-default);
-}
-
-:host > #external-container.success {
-  background: var(--color-success-default);
-}
-
-:host > #external-container.warning {
-  background: var(--color-warning-default);
-}
-
-/* Tablet breakpoint */
-@media only screen and (min-width: 768px) {
-  :host {
-    width: unset;
-    max-width: 50vw;
-  }
-
-  :host > #external-container > #flex-container {
-    flex-wrap: nowrap;
-  }
-
-  :host > #external-container #text {
-    width: 100%;
-  }
-}
-
-/* Wide breakpoint */
-@media only screen and (min-width: 1366px) {
-  :host {
-    width: unset;
-    max-width: 33vw;
-  }
-}
+:host {
+  display: inline-block;
+  width: 100vw;
+  min-width: 200px;
+
+  --percentuale: 0;
+}
+
+:host(.slide-in-left) {
+  animation: slideinleft 1s cubic-bezier(0.25, 0.1, 0.25, 0.1);
+  animation-fill-mode: forwards;
+}
+
+:host(.slide-in-right) {
+  animation: slideinright 1s cubic-bezier(0.25, 0.1, 0.25, 0.1);
+  animation-fill-mode: forwards;
+}
+
+:host(.slide-in-down) {
+  animation: slideindown 1s cubic-bezier(0.25, 0.1, 0.25, 0.1);
+  animation-fill-mode: forwards;
+}
+
+:host(.slide-in-up) {
+  animation: slideinup 1s cubic-bezier(0.25, 0.1, 0.25, 0.1);
+  animation-fill-mode: forwards;
+}
+
+:host(.slide-out-left) {
+  animation: slideoutleft 0.5s cubic-bezier(0.25, 0.1, 0.25, 0.1);
+  animation-fill-mode: forwards;
+}
+
+:host(.slide-out-right) {
+  animation: slideoutright 0.5s cubic-bezier(0.25, 0.1, 0.25, 0.1);
+  animation-fill-mode: forwards;
+}
+
+:host(.slide-out-down) {
+  animation: slideoutdown 0.5s cubic-bezier(0.25, 0.1, 0.25, 0.1);
+  animation-fill-mode: forwards;
+}
+
+:host(.slide-out-up) {
+  animation: slideoutup 0.5s cubic-bezier(0.25, 0.1, 0.25, 0.1);
+  animation-fill-mode: forwards;
+}
+
+@keyframes slideinleft {
+  0% {
+    transform: translateX(100%);
+  }
+
+  100% {
+    transform: translateX(0);
+  }
+}
+
+@keyframes slideinright {
+  0% {
+    transform: translateX(-100%);
+  }
+
+  100% {
+    transform: translateX(0);
+  }
+}
+
+@keyframes slideinup {
+  0% {
+    opacity: 0;
+    transform: translateY(100%);
+  }
+
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes slideindown {
+  0% {
+    opacity: 0;
+    transform: translateY(-100%);
+  }
+
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes slideoutleft {
+  0% {
+    /* stylelint-disable-next-line alpha-value-notation */
+    opacity: calc(100% - var(--percentuale));
+    transform: translateX(var(--percentuale));
+  }
+
+  100% {
+    opacity: 0;
+    transform: translateX(-100%);
+  }
+}
+
+@keyframes slideoutright {
+  0% {
+    /* stylelint-disable-next-line alpha-value-notation */
+    opacity: calc(100% - var(--percentuale));
+    transform: translateX(var(--percentuale));
+  }
+
+  100% {
+    opacity: 0;
+    transform: translateX(100%);
+  }
+}
+
+@keyframes slideoutup {
+  0% {
+    opacity: 1;
+    transform: translateY(var(--percentuale));
+  }
+
+  100% {
+    opacity: 0;
+    transform: translateY(-100%);
+  }
+}
+
+@keyframes slideoutdown {
+  0% {
+    opacity: 1;
+    transform: translateY(var(--percentuale));
+  }
+
+  100% {
+    opacity: 0;
+    transform: translateY(100%);
+  }
+}
+
+:host > #external-container {
+  display: flex;
+  min-height: 52px;
+  box-sizing: border-box;
+  align-items: center;
+  justify-content: space-between;
+  padding: calc(var(--space-unit) * 1) calc(var(--space-unit) * 2);
+  border-radius: 4px;
+  box-shadow: var(--shadow-3);
+  font-family: var(--font-family-sans);
+  font-size: 14px;
+  font-weight: var(--font-rg);
+  letter-spacing: 0.16px;
+}
+
+:host > #external-container.mobile-wrapped > #icon {
+  align-self: flex-start;
+}
+
+:host > #external-container.several-lines-padding {
+  padding: calc(var(--space-unit) * 2);
+}
+
+:host > #external-container > #flex-container {
+  display: flex;
+  width: 100%;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+}
+
+:host > #external-container #text {
+  margin-right: calc(var(--space-unit) * 2);
+  color: var(--color-white);
+  letter-spacing: 0.16px;
+  line-height: 20px;
+  text-align: left;
+}
+
+:host > #external-container #text > .title {
+  margin-right: 4px;
+  font-weight: 600;
+}
+
+:host > #external-container.mobile-wrapped #button ::slotted(z-button) {
+  margin-top: calc(var(--space-unit) * 2);
+}
+
+:host > #external-container #icon {
+  margin-left: calc(var(--space-unit) * 2);
+  cursor: pointer;
+  fill: var(--color-white);
+}
+
+:host > #external-container.dark {
+  background: var(--gray800);
+}
+
+:host > #external-container.light {
+  background: var(--color-background);
+}
+
+:host > #external-container.light #icon,
+:host > #external-container.warning #text,
+:host > #external-container.warning #icon {
+  fill: var(--color-icon01);
+}
+
+:host > #external-container.light #text,
+:host > #external-container.warning #text {
+  color: var(--gray800);
+}
+
+:host > #external-container.accent {
+  background: var(--color-primary01);
+}
+
+:host > #external-container.error {
+  background: var(--color-error-default);
+}
+
+:host > #external-container.success {
+  background: var(--color-success-default);
+}
+
+:host > #external-container.warning {
+  background: var(--color-warning-default);
+}
+
+/* Tablet breakpoint */
+@media only screen and (min-width: 768px) {
+  :host {
+    width: unset;
+    max-width: 50vw;
+  }
+
+  :host > #external-container > #flex-container {
+    flex-wrap: nowrap;
+  }
+
+  :host > #external-container #text {
+    width: 100%;
+  }
+}
+
+/* Wide breakpoint */
+@media only screen and (min-width: 1366px) {
+  :host {
+    width: unset;
+    max-width: 33vw;
+  }
+}