Nav bug fix (#15171)

mozilla · Sep 20, 2024 · 2179c6e · 2179c6e
1 parent 278e58f
commit 2179c6e
Showing 1 changed file with 36 additions and 18 deletions.
diff --git a/media/css/m24/components/navigation-refresh.scss b/media/css/m24/components/navigation-refresh.scss
@@ -115,7 +115,7 @@
             }
         }
 
-        @media(min-width: $screen-lg) {
+        @media #{$mq-lg} {
             &::after {
                 bottom: 7px;
                 left: 0;
@@ -161,6 +161,7 @@
         color: $color-black;
         position: relative;
         font-family: $primary-font;
+        font-weight: 600;
 
         &::after {
             display: block;
@@ -185,7 +186,7 @@
             width: fit-content;
         }
 
-        @media (min-width: $screen-md) {
+        @media #{$mq-md} {
             margin: 24px 0;
         }
     }
@@ -195,7 +196,7 @@
             background-color: $color-white;
             color: $color-black;
 
-            @media (min-width: $screen-md) {
+            @media #{$mq-md} {
                 left: 0;
                 right: auto;
                 top: 64px;
@@ -210,7 +211,7 @@
         max-width: unset;
         box-shadow: none;
 
-        @media (min-width: $screen-md) {
+        @media #{$mq-md} {
             border-radius: 0;
             padding: $spacer-lg 0;
         }
@@ -221,7 +222,7 @@
         border: transparent;
         padding: 8px 16px;
 
-        @media (min-width: $screen-md) {
+        @media #{$mq-md} {
             padding: 0;
         }
 
@@ -233,7 +234,7 @@
             min-width: 100%;
             background-color: $color-white;
 
-            @media (min-width: $screen-md) {
+            @media #{$mq-md} {
                 position: unset;
                 min-width: unset;
             }
@@ -242,7 +243,7 @@
                 border-bottom: transparent;
                 padding: 0 0 0 48px;
 
-                @media (min-width: $screen-md) {
+                @media #{$mq-md} {
                     color: $m24-color-dark-green;
                     border-bottom: transparent;
                     padding: 0;
@@ -276,9 +277,10 @@
                 margin-top: 98px;
                 animation: nav-slide-in 0.45s ease;
 
-                @media (min-width: $screen-md) {
+                @media #{$mq-md} {
                     margin-top: 64px;
                     animation: none;
+                    max-height: calc(100vh - 64px);
                 }
             }
         }
@@ -290,7 +292,7 @@
             display: none;
         }
 
-        @media (min-width: $screen-md) {
+        @media #{$mq-md} {
             padding: 0;
         }
     }
@@ -306,7 +308,7 @@
         min-width: unset;
         padding: $spacer-md 0;
 
-        @media (min-width: $screen-md) {
+        @media #{$mq-md} {
             padding: 0;
         }
     }
@@ -316,7 +318,7 @@
         max-width: 100%;
         padding: 0;
 
-        @media (min-width: $screen-md) {
+        @media #{$mq-md} {
             min-width: 216px;
             width: auto;
         }
@@ -395,15 +397,15 @@
         margin: 0 auto;
         padding: $spacer-md $grid-margin;
 
-        @media (min-width: $screen-md) {
+        @media #{$mq-md} {
             padding: 0 $grid-margin;
         }
 
         & > li {
             border-bottom: 2px solid transparent;
             width: 100%;
 
-            @media (min-width: $screen-md) {
+            @media #{$mq-md} {
                 border-bottom: 2px solid $token-color-light-gray;
             }
 
@@ -456,6 +458,8 @@
     }
 
     .mzp-has-icon .c-menu-item-link {
+        @include bidi(((padding-right, 0, 0), (padding-left, 0, 0)));
+
         .c-menu-item-icon {
             height: 16px;
             width: 16px;
@@ -497,26 +501,40 @@
         }
     }
 
+    .c-menu-button-close {
+        @media #{$mq-md} {
+            display: block;
+            top: 15px;
+            @include bidi(((right, 15px, left, auto), (left, auto, right, 15px)));
+
+            &:hover,
+            &:focus,
+            &:active {
+                top: 15px;
+            }
+        }
+    }
+
     .c-menu.mzp-is-enhanced .c-menu-category.c-menu-category-has-icon {
         .c-menu-title-icon {
-            margin-right: 8px;
+            @include bidi(((margin-right, 8px, 0), (margin-left, 0, 8px)));
         }
 
         .c-menu-title::after {
             bottom: 7px;
-            left: 24px;
+            @include bidi(((left, 24px, right, auto), (right, auto, left, 24px)));
             width: calc(100% - 24px);
         }
     }
 }
 
 // page content
-// page content here is not part of Protocol, it is specifc to Bedrock; should be documented in future
+// This is not part of Protocol, it is specifc to Bedrock; should be documented in future
 body:has(.c-navigation-items.mzp-is-open) {
     #outer-wrapper {
         display: none;
 
-        @media (min-width: $screen-md) {
+        @media #{$mq-md} {
             display: block;
         }
     }
@@ -525,7 +543,7 @@ body:has(.c-navigation-items.mzp-is-open) {
 #outer-wrapper {
     margin-top: 48px;
 
-    @media (min-width: $screen-md) {
+    @media #{$mq-md} {
         margin-top: 0;
     }
 }