Closes #1467 (#1469)

undp · Dec 24, 2024 · 7fcb05e · 7fcb05e
1 parent 4a56edc
commit 7fcb05e
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 39 deletions.
diff --git a/docs/css/components/mega-menu.min.css b/docs/css/components/mega-menu.min.css
diff --git a/stories/Components/Navigationcomponents/Mainnavigation/MegaMenu/mega-menu.scss b/stories/Components/Navigationcomponents/Mainnavigation/MegaMenu/mega-menu.scss
@@ -220,106 +220,106 @@
 @keyframes circle-square-transition {
   0% {
     border-radius: 50%;
-    height: $spacing-50;
-    margin-top: -$spacing-70;
+    height: 50px;
+    margin-top: -70px;
     opacity: 0.4;
-    width: $spacing-100;
+    width: 100px;
   }
 
   15% {
     border-radius: 50%;
-    height: $width-150;
-    margin-top: -$spacing-70;
+    height: 150px;
+    margin-top: -70px;
     opacity: 0.25;
-    width: $width-180;
+    width: 180px;
   }
 
   30% {
     border-radius: 50%;
-    height: $width-600;
-    margin-top: -$spacing-330;
+    height: 300px;
+    margin-top: -330px;
     opacity: 0.5;
-    width: $width-600;
+    width: 600px;
   }
 
   45% {
     border-radius: 45%;
-    height: $width-705;
-    margin-top: -$spacing-330;
-    width: $width-705;
+    height: 405px;
+    margin-top: -330px;
+    width: 705px;
   }
 
   60% {
     border-radius: 0 0 80% 80%/0 0 70% 70%;
-    height: $width-840;
-    margin-top: -$spacing-330;
-    width: $width-900;
+    height: 540px;
+    margin-top: -330px;
+    width: 900px;
   }
 
   75% {
     border-radius: 0 0 50% 50%/0 0 20% 20%;
-    height: $width-900;
-    margin-top: -$spacing-330;
-    max-width: $width-1096;
+    height: 600px;
+    margin-top: -330px;
+    max-width: 1096px;
   }
 
   to {
     border-radius: 0;
-    height: $width-900;
+    height: 600px;
     opacity: 1;
   }
 }
 
 @keyframes circle-square-transition-back {
   0% {
     border-radius: 0;
-    height: $width-900;
+    height: 600px;
     opacity: 1;
   }
 
   15% {
     border-radius: 0 0 50% 50%/0 0 20% 20%;
-    height: $width-900;
-    margin-top: -$spacing-330;
-    max-width: $width-1096;
+    height: 600px;
+    margin-top: -330px;
+    max-width: 1096px;
   }
 
   30% {
     border-radius: 0 0 80% 80%/0 0 70% 70%;
-    height: $width-840;
-    margin-top: -$spacing-330;
-    width: $width-900;
+    height: 540px;
+    margin-top: -330px;
+    width: 900px;
   }
 
   45% {
     border-radius: 45%;
-    height: $width-705;
-    margin-top: -$spacing-330;
-    width: $width-705;
+    height: 405px;
+    margin-top: -330px;
+    width: 705px;
   }
 
   60% {
     border-radius: 50%;
-    height: $width-600;
-    margin-top: -$spacing-330;
+    height: 300px;
+    margin-top: -330px;
     opacity: 0.5;
-    width: $width-600;
+    width: 600px;
   }
 
   75% {
     border-radius: 50%;
-    height: $width-150;
-    margin-top: -$spacing-70;
+    height: 150px;
+    margin-top: -70px;
     opacity: 0.25;
-    width: $width-180;
+    width: 180px;
   }
 
   to {
     border-radius: 50%;
-    height: $spacing-50;
-    margin-top: -$spacing-70;
+    height: 50px;
+    margin-top: -70px;
     opacity: 0.4;
-    width: $spacing-100;
+    width: 100px;
   }
 }