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

package/dist/collection/components/z-offcanvas/styles.css

@@ -1,182 +1,182 @@
-:host {
-  --z-offcanvas--container-width: 375px;
-  --z-offcanvas--top-space: 0;
-
-  min-width: 100%;
-  height: 100%;
-  font-family: var(--font-family-sans);
-  font-weight: var(--font-rg);
-  visibility: hidden;
-}
-
-.canvas-container {
-  display: flex;
-  overflow: -moz-scrollbars-none;
-  overflow: hidden;
-  min-width: 100%;
-  height: 100%;
-  flex-direction: column;
-  background: var(--color-surface01);
-}
-
-:host([variant="pushcontent"]) {
-  display: none;
-}
-
-:host([open]) {
-  display: flex;
-  visibility: visible;
-}
-
-:host([variant="overlay"]) {
-  position: fixed;
-  z-index: 1000;
-  top: var(--z-offcanvas--top-space);
-  right: 0;
-  bottom: 0;
-  left: 0;
-  display: flex;
-  height: calc(100% - var(--z-offcanvas--top-space));
-}
-
-:host([variant="overlay"][transitiondirection="left"]) {
-  justify-content: end;
-}
-
-:host([variant="overlay"]) > .canvas-container {
-  z-index: 1010;
-}
-
-:host([variant="overlay"]) .canvas-background {
-  position: absolute;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  background-color: var(--gray900);
-  opacity: 0.7;
-}
-
-.canvas-container > .canvas-content {
-  overflow: auto;
-  flex: 1 auto;
-  padding: 0 calc(var(--space-unit) * 2);
-  margin: calc(var(--space-unit) * 2) calc(var(--space-unit) / 2) calc(var(--space-unit) * 2) 0;
-  overflow-x: hidden;
-}
-
-:host([variant="overlay"]) > .canvas-container > .canvas-content {
-  padding: 0 calc(var(--space-unit) * 2) calc(var(--space-unit) * 2) calc(var(--space-unit) * 2);
-  margin: calc(var(--space-unit) * 2) calc(var(--space-unit) / 2) 0 0;
-}
-
-/* Webkit Scrollbar */
-.canvas-container .canvas-content::-webkit-scrollbar {
-  width: 10px;
-  background: linear-gradient(to right, transparent 0 3px, var(--gray200) 3px 7px, transparent 7px 10px);
-  border-radius: var(--border-radius);
-}
-
-.canvas-container .canvas-content::-webkit-scrollbar-track {
-  background-color: transparent;
-}
-
-.canvas-container .canvas-content::-webkit-scrollbar-thumb {
-  width: 10px;
-  background-color: var(--color-primary01);
-  border-radius: var(--border-radius);
-}
-
-.canvas-container .canvas-content::-webkit-scrollbar-thumb:hover {
-  background-color: var(--color-hover-primary);
-}
-
-/* Firefox */
-.canvas-container .canvas-content {
-  scrollbar-color: var(--color-primary01) transparent;
-}
-
-/* Mobile */
-@media only screen and (max-width: 768px) {
-  :host([open][transitiondirection="left"]:not(.skip-animation)) > .canvas-container {
-    animation: enter-right 0.4s ease-out;
-  }
-
-  :host([open][transitiondirection="right"]:not(.skip-animation)) > .canvas-container {
-    animation: enter-left 0.4s ease-out;
-  }
-}
-
-/* Tablet / Desktop */
-@media only screen and (min-width: 768px) {
-  :host {
-    min-width: auto;
-  }
-
-  .canvas-container {
-    width: auto;
-    min-width: max(var(--z-offcanvas--container-width), 375px);
-    max-width: max(var(--z-offcanvas--container-width), 375px);
-    height: auto;
-    min-height: calc(var(--space-unit) * 40);
-  }
-
-  :host(:not([variant="overlay"])[open]:not(.skip-animation)) {
-    width: auto;
-    animation: grow 0.4s ease-out;
-  }
-}
-
-/* ANIMATION */
-
-@keyframes grow {
-  from {
-    width: 0;
-  }
-
-  to {
-    width: max(var(--z-offcanvas--container-width), 375px);
-  }
-}
-
-@keyframes enter-left {
-  from {
-    transform: translateX(-100%);
-  }
-
-  to {
-    transform: translateX(0);
-  }
-}
-
-@keyframes enter-right {
-  from {
-    transform: translateX(100%);
-  }
-
-  to {
-    transform: translateX(0);
-  }
-}
-
-:host([open][variant="overlay"][transitiondirection="left"]:not(.skip-animation)) > .canvas-container {
-  animation: enter-right 0.4s ease-out;
-}
-
-:host([open][transitiondirection="right"]:not(.skip-animation)) > .canvas-container {
-  animation: enter-left 0.4s ease-out;
-}
-
-:host(:not([open])[variant="overlay"][transitiondirection="right"]) > .canvas-container {
-  transform: translateX(-100%);
-  transition: visibility 0.4s ease-out, transform 0.4s ease-out;
-}
-
-:host(:not([open])[variant="overlay"][transitiondirection="left"]) > .canvas-container {
-  transform: translateX(100%);
-  transition: visibility 0.4s ease-out, transform 0.4s ease-out;
-}
-
-:host(:not([open])[variant="overlay"]) .canvas-background {
-  transition: visibility 0.4s ease-out;
-  visibility: hidden;
-}
+:host {
+  --z-offcanvas--container-width: 375px;
+  --z-offcanvas--top-space: 0;
+
+  min-width: 100%;
+  height: 100%;
+  font-family: var(--font-family-sans);
+  font-weight: var(--font-rg);
+  visibility: hidden;
+}
+
+.canvas-container {
+  display: flex;
+  overflow: -moz-scrollbars-none;
+  overflow: hidden;
+  min-width: 100%;
+  height: 100%;
+  flex-direction: column;
+  background: var(--color-surface01);
+}
+
+:host([variant="pushcontent"]) {
+  display: none;
+}
+
+:host([open]) {
+  display: flex;
+  visibility: visible;
+}
+
+:host([variant="overlay"]) {
+  position: fixed;
+  z-index: 1000;
+  top: var(--z-offcanvas--top-space);
+  right: 0;
+  bottom: 0;
+  left: 0;
+  display: flex;
+  height: calc(100% - var(--z-offcanvas--top-space));
+}
+
+:host([variant="overlay"][transitiondirection="left"]) {
+  justify-content: end;
+}
+
+:host([variant="overlay"]) > .canvas-container {
+  z-index: 1010;
+}
+
+:host([variant="overlay"]) .canvas-background {
+  position: absolute;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: var(--gray900);
+  opacity: 0.7;
+}
+
+.canvas-container > .canvas-content {
+  overflow: auto;
+  flex: 1 auto;
+  padding: 0 calc(var(--space-unit) * 2);
+  margin: calc(var(--space-unit) * 2) calc(var(--space-unit) / 2) calc(var(--space-unit) * 2) 0;
+  overflow-x: hidden;
+}
+
+:host([variant="overlay"]) > .canvas-container > .canvas-content {
+  padding: 0 calc(var(--space-unit) * 2) calc(var(--space-unit) * 2) calc(var(--space-unit) * 2);
+  margin: calc(var(--space-unit) * 2) calc(var(--space-unit) / 2) 0 0;
+}
+
+/* Webkit Scrollbar */
+.canvas-container .canvas-content::-webkit-scrollbar {
+  width: 10px;
+  background: linear-gradient(to right, transparent 0 3px, var(--gray200) 3px 7px, transparent 7px 10px);
+  border-radius: var(--border-radius);
+}
+
+.canvas-container .canvas-content::-webkit-scrollbar-track {
+  background-color: transparent;
+}
+
+.canvas-container .canvas-content::-webkit-scrollbar-thumb {
+  width: 10px;
+  background-color: var(--color-primary01);
+  border-radius: var(--border-radius);
+}
+
+.canvas-container .canvas-content::-webkit-scrollbar-thumb:hover {
+  background-color: var(--color-hover-primary);
+}
+
+/* Firefox */
+.canvas-container .canvas-content {
+  scrollbar-color: var(--color-primary01) transparent;
+}
+
+/* Mobile */
+@media only screen and (max-width: 768px) {
+  :host([open][transitiondirection="left"]:not(.skip-animation)) > .canvas-container {
+    animation: enter-right 0.4s ease-out;
+  }
+
+  :host([open][transitiondirection="right"]:not(.skip-animation)) > .canvas-container {
+    animation: enter-left 0.4s ease-out;
+  }
+}
+
+/* Tablet / Desktop */
+@media only screen and (min-width: 768px) {
+  :host {
+    min-width: auto;
+  }
+
+  .canvas-container {
+    width: auto;
+    min-width: max(var(--z-offcanvas--container-width), 375px);
+    max-width: max(var(--z-offcanvas--container-width), 375px);
+    height: auto;
+    min-height: calc(var(--space-unit) * 40);
+  }
+
+  :host(:not([variant="overlay"])[open]:not(.skip-animation)) {
+    width: auto;
+    animation: grow 0.4s ease-out;
+  }
+}
+
+/* ANIMATION */
+
+@keyframes grow {
+  from {
+    width: 0;
+  }
+
+  to {
+    width: max(var(--z-offcanvas--container-width), 375px);
+  }
+}
+
+@keyframes enter-left {
+  from {
+    transform: translateX(-100%);
+  }
+
+  to {
+    transform: translateX(0);
+  }
+}
+
+@keyframes enter-right {
+  from {
+    transform: translateX(100%);
+  }
+
+  to {
+    transform: translateX(0);
+  }
+}
+
+:host([open][variant="overlay"][transitiondirection="left"]:not(.skip-animation)) > .canvas-container {
+  animation: enter-right 0.4s ease-out;
+}
+
+:host([open][transitiondirection="right"]:not(.skip-animation)) > .canvas-container {
+  animation: enter-left 0.4s ease-out;
+}
+
+:host(:not([open])[variant="overlay"][transitiondirection="right"]) > .canvas-container {
+  transform: translateX(-100%);
+  transition: visibility 0.4s ease-out, transform 0.4s ease-out;
+}
+
+:host(:not([open])[variant="overlay"][transitiondirection="left"]) > .canvas-container {
+  transform: translateX(100%);
+  transition: visibility 0.4s ease-out, transform 0.4s ease-out;
+}
+
+:host(:not([open])[variant="overlay"]) .canvas-background {
+  transition: visibility 0.4s ease-out;
+  visibility: hidden;
+}