diff --git a/media/css/m24/components/footer-newsletter.scss b/media/css/m24/components/footer-newsletter.scss index e6e048623de..7dc9d2c9e5c 100644 --- a/media/css/m24/components/footer-newsletter.scss +++ b/media/css/m24/components/footer-newsletter.scss @@ -4,8 +4,6 @@ @use '../vars/lib' as *; -$max-footer-content-width: $content-max; - @mixin divider-line { border-bottom: $border-width solid $m24-color-light-gray; } diff --git a/media/css/m24/components/footer-refresh.scss b/media/css/m24/components/footer-refresh.scss index 852d1355d02..1977ab6f5cb 100644 --- a/media/css/m24/components/footer-refresh.scss +++ b/media/css/m24/components/footer-refresh.scss @@ -4,8 +4,6 @@ @use '../vars/lib' as *; -$max-footer-content-width: $content-max; - @mixin divider-line { border-bottom: $border-width solid $m24-color-light-gray; } @@ -127,7 +125,6 @@ $max-footer-content-width: $content-max; background-size: 16px 16px; background-position: center center; opacity: .45; - border-bottom: 1px solid rgba(0,0,0,0); display: block; height: 24px; width: 24px; @@ -139,7 +136,6 @@ $max-footer-content-width: $content-max; &:hover, &:focus { opacity: 1; - border-bottom-color: transparent; } &.linkedin { @@ -183,40 +179,16 @@ $max-footer-content-width: $content-max; padding-bottom: $spacer-xs; } - a, a:link, a:visited { text-decoration: none; - position: relative; - color: $m24-color-black; - font-weight: 400; - } - - a:hover, - a:link:hover, - a:visited:hover { - color: $m24-color-black; - - &::after { - display: block; - content: ""; - position: absolute; - width: 100%; - height: 1px; - left: 0; - bottom: 1px; - background: $m24-color-black; - } - } - - a:focus-visible, - a:link:focus-visible, - a:active, - a:link:active { color: $m24-color-black; - &::after { - display: none; + &:hover { + text-decoration: underline; + text-decoration-thickness: 1px; + text-underline-offset: 0.1em; + color: $m24-color-black; } } } @@ -382,15 +354,11 @@ $max-footer-content-width: $content-max; margin-bottom: 0; } - a { - display: inline-block; - } - - a, a:link, a:visited { color: $m24-color-black; font-weight: 600; + display: inline-block; } } @@ -411,7 +379,6 @@ $max-footer-content-width: $content-max; } } - a, a:link, a:visited { color: $m24-color-black; diff --git a/media/css/m24/components/navigation-refresh.scss b/media/css/m24/components/navigation-refresh.scss index 351d26f112a..c939f57ae66 100644 --- a/media/css/m24/components/navigation-refresh.scss +++ b/media/css/m24/components/navigation-refresh.scss @@ -115,8 +115,8 @@ $margin-top: 54px; // top margin offset for mobile navigation menu padding: 0; position: relative; text-decoration: underline; - text-underline-offset: 2px; text-decoration-thickness: 1px; + text-underline-offset: 0.1em; &.mzp-is-active { background: transparent url('/media/protocol/img/icons/close.svg') center center no-repeat; @@ -285,10 +285,6 @@ $margin-top: 54px; // top margin offset for mobile navigation menu } } - &::after { - background: $m24-color-dark-green; - } - .m24-c-menu-panel { @include bidi(((animation, none, none),)); } @@ -331,33 +327,20 @@ $margin-top: 54px; // top margin offset for mobile navigation menu .m24-c-menu-title-icon { @include bidi(((margin, 0 8px 0 0, 0 0 0 8px),)); } - - .m24-c-menu-title { - @media #{$mq-md} { - &:hover::after { - bottom: 1px; - width: calc(100% - 24px); - @include bidi(((left, 24px, right, auto),)); - } - } - } } } .m24-c-menu-title { align-items: center; border: none; - color: $color-black; display: flex; font-family: $primary-font; font-size: $text-body-md; font-weight: 600; padding: 0; position: relative; - text-decoration: none; width: 100%; - // extra specificity to override link colors on some Firefox pages &:link, &:visited { color: $color-black; @@ -369,15 +352,10 @@ $margin-top: 54px; // top margin offset for mobile navigation menu } @media #{$mq-md} { - &:hover::after { - background: $color-black; - bottom: 1px; - content: ""; - display: block; - height: 1px; - left: 0; - position: absolute; - width: 100%; + &:hover { + text-decoration: underline; + text-decoration-thickness: 1px; + text-underline-offset: 0.15em; } } } @@ -451,56 +429,31 @@ $margin-top: 54px; // top margin offset for mobile navigation menu align-items: center; display: flex; padding: 8px 0; - text-decoration: none; width: 100%; &:link, &:visited { text-decoration: none; - } - .m24-c-menu-item-title { - border: none; - position: relative; + svg path { + fill: $color-black; + } } - } -} -.m24-c-menu-item .m24-c-menu-item-link -.m24-c-menu-item .m24-c-menu-item-link:link, -.m24-c-menu-item .m24-c-menu-item-link:visited { - text-decoration: none; - - .m24-c-menu-item-title { - border: none; - } - - svg path { - fill: $color-black; - } -} - -.m24-c-menu-item .m24-c-menu-item-link:hover, -.m24-c-menu-item .m24-c-menu-item-link:visited:hover { - .m24-c-menu-item-title { - color: $m24-color-dark-green; - border: none; + &:link:hover, + &:visited:hover { + .m24-c-menu-item-title { + color: $m24-color-dark-green; + text-decoration: underline; + text-decoration-thickness: 1px; + text-underline-offset: 0.1em; + } - &::after { - background: $m24-color-dark-green; - bottom: 1px; - content: ""; - display: block; - height: 1px; - left: 0; - position: absolute; - width: 100%; + svg path { + fill: $m24-color-dark-green; + } } } - - svg path { - fill: $m24-color-dark-green; - } } .m24-c-menu-panel-content.multi-column { @@ -553,24 +506,17 @@ $margin-top: 54px; // top margin offset for mobile navigation menu } .m24-c-menu-panel .m24-c-menu-category-link { - border: none; display: flex; font-family: $primary-font; font-size: $text-body-md; justify-content: flex-end; margin: $spacer-lg $spacer-lg 0; - padding: 0; } -.m24-c-menu-panel .m24-c-menu-category-link a, -.m24-c-menu-panel .m24-c-menu-category-link a:visited, -.m24-c-menu-panel .m24-c-menu-category-link a:link { - border: none; +.m24-c-menu-panel .m24-c-menu-category-link a:link, +.m24-c-menu-panel .m24-c-menu-category-link a:visited { color: $color-black; display: flex; - font-family: $primary-font; - font-weight: 600; - position: relative; text-decoration: none; width: fit-content; @@ -614,31 +560,6 @@ $margin-top: 54px; // top margin offset for mobile navigation menu } } -.mzp-has-icon.m24-c-menu-item .m24-c-menu-item-link, -.mzp-has-icon.m24-c-menu-item .m24-c-menu-item-link:link, -.mzp-has-icon.m24-c-menu-item .m24-c-menu-item-link:active, -.mzp-has-icon.m24-c-menu-item .m24-c-menu-item-link:visited { - .m24-c-menu-item-title { - border: none; - font-weight: 600; - position: relative; - text-decoration: none; - } -} - -.mzp-has-icon.m24-c-menu-item .m24-c-menu-item-link:hover, -.mzp-has-icon.m24-c-menu-item .m24-c-menu-item-link:visited:hover { - .m24-c-menu-item-title { - border: none; - text-decoration: none; - - &::after { - background: $m24-color-dark-green; - } - } -} - -// Menu panel close button shown on desktop sized view ports. .m24-c-menu-button-close { @include bidi(((right, 15px, left, auto), (left, auto, right, 15px))); @include image-replaced;