fixup! Feat(web): Introduce Drawer component #DS-1580

lmc-eu · Dec 30, 2024 · 5e54e4a · 5e54e4a
1 parent 0c0f43b
commit 5e54e4a
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 4 deletions.
diff --git a/packages/web/src/scss/components/Drawer/_Drawer.scss b/packages/web/src/scss/components/Drawer/_Drawer.scss
@@ -29,8 +29,7 @@
     overflow: hidden;
 }
 
-.Drawer--center,
-.Drawer:not(.Drawer--left, .Drawer--right) {
+.Drawer--center {
     justify-content: center;
 }
 
@@ -48,6 +47,6 @@
 
     visibility: visible;
     opacity: 1;
-    user-select: text; // 6.
+    user-select: text;
     pointer-events: auto;
 }
diff --git a/packages/web/src/scss/components/Drawer/_DrawerDialog.scss b/packages/web/src/scss/components/Drawer/_DrawerDialog.scss
@@ -12,6 +12,8 @@
 .DrawerDialog {
     @include typography.generate(theme.$typography);
 
+    --drawer-translate-x: 0%;
+    --drawer-translate-y: 0%;
     --scroll-view-vertical-height: auto;
 
     display: flex;
@@ -26,12 +28,31 @@
     color: theme.$dialog-text-color;
     background-color: theme.$dialog-background-color;
     box-shadow: theme.$dialog-shadow;
-    transform: translateY(var(--drawer-translate-y)) scale(var(--drawer-scale));
+    transform: translateX(var(--drawer-translate-x)) translateY(var(--drawer-translate-y)) scale(var(--drawer-scale));
     transform-origin: var(--drawer-transform-origin);
     overscroll-behavior: contain;
 
     @media (prefers-reduced-motion: no-preference) {
         transition-property: width, height, max-height, border-radius, transform;
         transition-duration: inherit;
+        transition-timing-function: ease-in-out;
     }
 }
+
+.Drawer--left .DrawerDialog {
+    --drawer-translate-x: -100%;
+}
+
+.Drawer--right .DrawerDialog {
+    --drawer-translate-x: 100%;
+}
+
+.Drawer--center .DrawerDialog {
+    --drawer-translate-x: 0%;
+}
+
+.Drawer[open] .DrawerDialog {
+    --drawer-translate-x: 0%;
+    --drawer-translate-y: 0%;
+    --drawer-scale: 1;
+}