@zanichelli/albe-web-components 6.6.2 → 6.6.3

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

@@ -1,186 +1,186 @@
-:host {
-  --z-offcanvas--container-width: 375px;
-  --z-offcanvas--top-space: 0;
-
-  display: none;
-  min-width: 100%;
-  height: 100%;
-  justify-content: end;
-  font-family: var(--font-family-sans);
-  font-weight: var(--font-rg);
-}
-
-.canvas-container {
-  display: flex;
-  overflow: -moz-scrollbars-none;
-  overflow: hidden;
-  min-width: 100%;
-  height: 100%;
-  flex-direction: column;
-  background: var(--color-surface01);
-  transform: translateX(100%);
-}
-
-@keyframes enter-right {
-  from {
-    transform: translateX(100%);
-  }
-
-  to {
-    transform: translateX(0);
-  }
-}
-
-:host([open]) > .canvas-container {
-  animation-duration: 0.4s;
-  animation-name: enter-right;
-  animation-timing-function: ease-out;
-  transform: translateX(0);
-}
-
-@keyframes exit-right {
-  from {
-    transform: translateX(0);
-  }
-
-  to {
-    transform: translateX(100%);
-  }
-}
-
-:host(:not([open])[variant="overlay"]) > .canvas-container {
-  animation-duration: 0.4s;
-  animation-name: exit-right;
-  animation-timing-function: ease-out;
-  transform: translateX(100%);
-}
-
-:host([variant="overlay"]) {
-  position: fixed;
-  z-index: 1000;
-  top: var(--z-offcanvas--top-space);
-  right: 0;
-  bottom: 0;
-  left: 0;
-  height: calc(100% - var(--z-offcanvas--top-space));
-}
-
-: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;
-}
-
-:host([transitiondirection="right"]) {
-  justify-content: start;
-}
-
-:host([transitiondirection="right"]) > .canvas-container {
-  transform: translateX(-100%);
-}
-
-@keyframes enter-left {
-  from {
-    transform: translateX(-100%);
-  }
-
-  to {
-    transform: translateX(0);
-  }
-}
-
-:host([transitiondirection="right"][open]) > .canvas-container {
-  animation-duration: 0.4s;
-  animation-name: enter-left;
-  animation-timing-function: ease-out;
-  transform: translateX(0);
-}
-
-@keyframes exit-left {
-  from {
-    transform: translateX(0);
-  }
-
-  to {
-    transform: translateX(-100%);
-  }
-}
-
-:host(:not([open])[variant="overlay"][transitiondirection="right"]) > .canvas-container {
-  animation-duration: 0.4s;
-  animation-name: exit-left;
-  animation-timing-function: ease-out;
-  transform: translateX(-100%);
-}
-
-.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;
-}
-
-.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;
-}
-
-/* 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);
-  }
-
-  @keyframes grow {
-    from {
-      width: 0;
-    }
-
-    to {
-      width: max(var(--z-offcanvas--container-width), 375px);
-    }
-  }
-
-  :host(:not([variant="overlay"])[open]) {
-    width: auto;
-    animation-duration: 0.4s;
-    animation-name: grow;
-    animation-timing-function: ease-out;
-  }
-}
+:host {
+  --z-offcanvas--container-width: 375px;
+  --z-offcanvas--top-space: 0;
+
+  display: none;
+  min-width: 100%;
+  height: 100%;
+  justify-content: end;
+  font-family: var(--font-family-sans);
+  font-weight: var(--font-rg);
+}
+
+.canvas-container {
+  display: flex;
+  overflow: -moz-scrollbars-none;
+  overflow: hidden;
+  min-width: 100%;
+  height: 100%;
+  flex-direction: column;
+  background: var(--color-surface01);
+  transform: translateX(100%);
+}
+
+@keyframes enter-right {
+  from {
+    transform: translateX(100%);
+  }
+
+  to {
+    transform: translateX(0);
+  }
+}
+
+:host([open]) > .canvas-container {
+  animation-duration: 0.4s;
+  animation-name: enter-right;
+  animation-timing-function: ease-out;
+  transform: translateX(0);
+}
+
+@keyframes exit-right {
+  from {
+    transform: translateX(0);
+  }
+
+  to {
+    transform: translateX(100%);
+  }
+}
+
+:host(:not([open])[variant="overlay"]) > .canvas-container {
+  animation-duration: 0.4s;
+  animation-name: exit-right;
+  animation-timing-function: ease-out;
+  transform: translateX(100%);
+}
+
+:host([variant="overlay"]) {
+  position: fixed;
+  z-index: 1000;
+  top: var(--z-offcanvas--top-space);
+  right: 0;
+  bottom: 0;
+  left: 0;
+  height: calc(100% - var(--z-offcanvas--top-space));
+}
+
+: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;
+}
+
+:host([transitiondirection="right"]) {
+  justify-content: start;
+}
+
+:host([transitiondirection="right"]) > .canvas-container {
+  transform: translateX(-100%);
+}
+
+@keyframes enter-left {
+  from {
+    transform: translateX(-100%);
+  }
+
+  to {
+    transform: translateX(0);
+  }
+}
+
+:host([transitiondirection="right"][open]) > .canvas-container {
+  animation-duration: 0.4s;
+  animation-name: enter-left;
+  animation-timing-function: ease-out;
+  transform: translateX(0);
+}
+
+@keyframes exit-left {
+  from {
+    transform: translateX(0);
+  }
+
+  to {
+    transform: translateX(-100%);
+  }
+}
+
+:host(:not([open])[variant="overlay"][transitiondirection="right"]) > .canvas-container {
+  animation-duration: 0.4s;
+  animation-name: exit-left;
+  animation-timing-function: ease-out;
+  transform: translateX(-100%);
+}
+
+.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;
+}
+
+.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;
+}
+
+/* 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);
+  }
+
+  @keyframes grow {
+    from {
+      width: 0;
+    }
+
+    to {
+      width: max(var(--z-offcanvas--container-width), 375px);
+    }
+  }
+
+  :host(:not([variant="overlay"])[open]) {
+    width: auto;
+    animation-duration: 0.4s;
+    animation-name: grow;
+    animation-timing-function: ease-out;
+  }
+}