diff --git a/media/css/m24/components/navigation-refresh.scss b/media/css/m24/components/navigation-refresh.scss index c2402a2f4ef..85168bda064 100644 --- 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,7 +397,7 @@ margin: 0 auto; padding: $spacer-md $grid-margin; - @media (min-width: $screen-md) { + @media #{$mq-md} { padding: 0 $grid-margin; } @@ -403,7 +405,7 @@ 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; } }