category, brand, product popular, product category in desktop home page

1 files changed, 41 insertions, 8 deletions

diff --git a/src/styles/globals.css b/src/styles/globals.css
index 12589e7d..b482aa30 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -134,6 +134,7 @@ button {
     .btn-yellow {
         @apply bg-yellow_r-9
             border-yellow_r-9
+            hover:bg-yellow_r-10
             disabled:text-gray_r-10
             disabled:bg-yellow_r-7
             disabled:border-yellow_r-7;
@@ -381,8 +382,34 @@ button {
     @apply !border-yellow_r-9;
 }
 
+.category-mega-box-wrapper {
+    @apply absolute
+        opacity-0
+        left-0
+        top-[125%]
+        flex
+        w-full
+        z-10
+        transition-all
+        ease-in
+        duration-200
+        pointer-events-none;
+}
+
+.category-mega-box-wrapper.show {
+    @apply top-[100%]
+        opacity-100
+        pointer-events-auto;
+}
+
 .category-mega-box {
-    @apply relative py-2 border border-gray_r-6 h-full;
+    @apply relative
+        py-2
+        border
+        border-t-0
+        border-gray_r-6
+        h-full
+        w-full;
 }
 
 .category-mega-box > div {
@@ -394,29 +421,34 @@ button {
 }
 
 .category-mega-box > div:hover .category-mega-box__child-wrapper {
-    @apply block;
+    @apply opacity-100
+        top-0
+        pointer-events-auto;
 }
 
 .category-mega-box .category-mega-box__parent {
     @apply py-2.5
         px-4
-        idt-transition
         text-gray_r-12/80
-        font-normal
+        font-normal;
 }
 
 .category-mega-box__child-wrapper {
     @apply absolute 
         left-[100%] 
-        top-0 
-        w-[50vw] 
+        top-12
+        w-[40vw] 
         bg-gray_r-1/90
         backdrop-blur-md
         border 
         border-gray_r-6 
         p-6 
-        hidden 
-        h-full
+        opacity-0
+        h-full 
+        transition-all
+        ease-in
+        duration-200
+        pointer-events-none
         z-50;
 }
 
@@ -437,3 +469,4 @@ button {
         duration-100 
         font-normal;
 }
+