diff --git a/media/css/m24/components/navigation-refresh.scss b/media/css/m24/components/navigation-refresh.scss index d9b2fc7980a..67ed1e5b5c8 100644 --- a/media/css/m24/components/navigation-refresh.scss +++ b/media/css/m24/components/navigation-refresh.scss @@ -22,11 +22,37 @@ left: 0; box-shadow: none; + @media (prefers-reduced-motion: reduce) { + position: static; + } + @media #{$mq-md} { display: block; } } +// * -------------------------------------------------------------------------- */ +// Sticky navigation styles +@supports (position: sticky) { + html.mzp-has-sticky-navigation { + .m24-navigation-refresh.m24-mzp-is-sticky { + @include transition(transform 300ms ease-in-out); + position: sticky; + z-index: 1000; + + &.mzp-is-scrolling { + // Shadow colors are equivalent to $color-ink-90, $color-blue-90, $color-ink-90 + // We can't use a $box-shadow token here because it needs a different size and offset + box-shadow: 0 0 6px 1px rgba(29, 17, 51, 0.04), 0 0 8px 2px rgba(9, 32, 77, 0.12), 0 0 5px -3px rgba(29, 17, 51, 0.12); + } + + &.mzp-is-hidden { + @include transform(translate(0, -110%)); + } + } + } +} + // Common navigation styles .m24-c-navigation-l-content { position: relative; @@ -121,6 +147,10 @@ overflow: hidden auto; animation: nav-slide-in 0.45s ease; + @media (prefers-reduced-motion: reduce) { + animation: none; + } + .m24-c-menu-category-list:has(.m24-c-menu-category.mzp-is-selected) { margin-bottom: 0; @@ -211,6 +241,10 @@ margin-top: 98px; animation: nav-slide-in 0.45s ease; + @media (prefers-reduced-motion: reduce) { + animation: none; + } + @media #{$mq-md} { display: block; margin-top: 64px; @@ -532,31 +566,6 @@ } } -// * -------------------------------------------------------------------------- */ -// Sticky navigation styles - -@supports (position: sticky) { - html.mzp-has-sticky-navigation { - .m24-navigation-refresh.m24-mzp-is-sticky { - @media #{$mq-md} { - @include transition(transform 300ms ease-in-out); - position: sticky; - z-index: 1000; - - &.mzp-is-scrolling { - // Shadow colors are equivalent to $color-ink-90, $color-blue-90, $color-ink-90 - // We can't use a $box-shadow token here because it needs a different size and offset - box-shadow: 0 0 6px 1px rgba(29, 17, 51, 0.04), 0 0 8px 2px rgba(9, 32, 77, 0.12), 0 0 5px -3px rgba(29, 17, 51, 0.12); - } - - &.mzp-is-hidden { - @include transform(translate(0, -110%)); - } - } - } - } -} - // page content - hide all content except for the nav when mobile nav menu is open // This is not part of Protocol, it is specifc to Bedrock; should be documented in future body:has(.m24-c-navigation-items.mzp-is-open) {