fix: nested drawer components bug

saadeghi · Mar 3, 2021 · 7cc8443 · 7cc8443
1 parent 3095240
commit 7cc8443
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 13 deletions.
diff --git a/src/base/components/drawer.css b/src/base/components/drawer.css
@@ -1,26 +1,26 @@
 .drawer{
-  @apply grid;
+  @apply grid overflow-hidden;
 }
 .drawer-toggle{
   @apply appearance-none opacity-0 w-0 h-0 absolute;
   & ~ .drawer-content{
-    @apply row-start-1 col-start-1 transform;
+    @apply row-start-1 col-start-1 transform overflow-y-auto;
   }
   & ~ .drawer-side{
     @apply row-start-1 col-start-1 grid;
-    & .drawer-overlay{
+    &>.drawer-overlay{
       @apply row-start-1 col-start-1 invisible opacity-0;
     }
-    & .drawer-overlay + *{
+    &>.drawer-overlay + *{
       @apply z-10 row-start-1 col-start-1 transform -translate-x-full;
     }
   }
   &:checked{
     & ~ .drawer-side{
-      & .drawer-overlay{
+      &>.drawer-overlay{
         @apply visible;
       }
-      & .drawer-overlay + *{
+      &>.drawer-overlay + *{
         @apply translate-x-0;
       }
     }
@@ -29,15 +29,15 @@
 @media (min-width: 1024px) {
   .drawer-mobile{
     grid-auto-columns: max-content auto;
-    .drawer-toggle{
+    &>.drawer-toggle{
       & ~ .drawer-content{
         @apply lg:col-start-2;
       }
       & ~ .drawer-side{
-        & .drawer-overlay{
+        &>.drawer-overlay{
           @apply lg:visible;
         }
-        & .drawer-overlay + *{
+        &>.drawer-overlay + *{
           @apply lg:translate-x-0;
         }
       }

diff --git a/src/styled/components/drawer.css b/src/styled/components/drawer.css
@@ -3,10 +3,10 @@
     @apply transition-all ease-in-out duration-300;
   }
   & ~ .drawer-side{
-    & .drawer-overlay{
+    &>.drawer-overlay{
       @apply cursor-pointer transition-all ease-in-out duration-300 bg-neutral-focus;
     }
-    & .drawer-overlay + *{
+    &>.drawer-overlay + *{
       @apply transition-all ease-in-out duration-300;
     }
   }
@@ -15,7 +15,7 @@
       @apply translate-x-2;
     }
     & ~ .drawer-side{
-      & .drawer-overlay{
+      &>.drawer-overlay{
         @apply opacity-40;
       }
     }
@@ -75,7 +75,7 @@
 }
 @media (min-width: 1024px) {
   .drawer-mobile{
-    .drawer-toggle{
+    &>.drawer-toggle{
       &:checked{
         & ~ .drawer-content{
           @apply translate-x-0;