From 514fc5af323ebeb414b98846a7247bba50af741d Mon Sep 17 00:00:00 2001 From: mlloydbixal Date: Tue, 2 Jul 2024 14:23:25 -0400 Subject: [PATCH 01/15] VOTE-2240: add high contrast variables for main nav butons - desktop --- .../src/sass/uswds-overrides/usa-nav.scss | 28 ++++++++++++++----- 1 file changed, 21 insertions(+), 7 deletions(-) diff --git a/web/themes/custom/votegov/src/sass/uswds-overrides/usa-nav.scss b/web/themes/custom/votegov/src/sass/uswds-overrides/usa-nav.scss index f983e02e3..c2d722ee6 100644 --- a/web/themes/custom/votegov/src/sass/uswds-overrides/usa-nav.scss +++ b/web/themes/custom/votegov/src/sass/uswds-overrides/usa-nav.scss @@ -32,6 +32,20 @@ } .usa-nav__primary-item { + --usa-nav--primary-item-bg: #{$base-white}; + --usa-nav--primary-item-text: #{$base-dark}; + --usa-nav--primary-item-bg-hover: #{$base-dark}; + --usa-nav--primary-item-text-hover: #{$base-white}; + --usa-current-bg: #{$ac-warm}; + + [data-theme="contrast"] & { + --usa-nav--primary-item-bg: #{$bg-high-contrast}; + --usa-nav--primary-item-text: #{$bg-high-contrast}; + --usa-nav--primary-item-bg-hover: #{$bg-high-contrast}; + --usa-nav--primary-item-text-hover: #{$base-white}; + --usa-current-bg: #{$link-high-contrast-hover-blue}; + } + @include at-media-max('tablet-lg') { border-top-color: $bg-light-medium; @@ -72,20 +86,20 @@ @include u-padding-y(2.5); @include u-font-size('sans', 5); @include u-line-height('sans', 4); - color: $base-dark; + color: var(--usa-nav--primary-item-text); &[aria-expanded="true"] { - background-color: $base-dark; - color: $base-white; + background-color: var(--usa-nav--primary-item-bg-hover); + color: var(--usa-nav--primary-item-text-hover); } @include hover { - background-color: $base-dark; - color: $base-white; + background-color: var(--usa-nav--primary-item-bg-hover); + color: var(--usa-nav--primary-item-text-hover); &[aria-expanded="false"] { span::after { - background-color: $base-white; + background-color: var(--usa-nav--primary-item-bg-hover); } } @@ -100,7 +114,7 @@ @include after { @include u-left(0); @include u-right(0); - background-color: $ac-warm; + background-color: var(--usa-current-bg); } } } From e6bcb1ee5c5944f830edc15b7a7fbf69cf11904d Mon Sep 17 00:00:00 2001 From: mlloydbixal Date: Tue, 2 Jul 2024 16:23:52 -0400 Subject: [PATCH 02/15] VOTE-2240: add high contrast vairables for submenu - desktop --- .../src/sass/uswds-overrides/usa-nav.scss | 44 ++++++++++++++----- 1 file changed, 34 insertions(+), 10 deletions(-) diff --git a/web/themes/custom/votegov/src/sass/uswds-overrides/usa-nav.scss b/web/themes/custom/votegov/src/sass/uswds-overrides/usa-nav.scss index c2d722ee6..29e29d21e 100644 --- a/web/themes/custom/votegov/src/sass/uswds-overrides/usa-nav.scss +++ b/web/themes/custom/votegov/src/sass/uswds-overrides/usa-nav.scss @@ -32,14 +32,12 @@ } .usa-nav__primary-item { - --usa-nav--primary-item-bg: #{$base-white}; --usa-nav--primary-item-text: #{$base-dark}; --usa-nav--primary-item-bg-hover: #{$base-dark}; --usa-nav--primary-item-text-hover: #{$base-white}; --usa-current-bg: #{$ac-warm}; [data-theme="contrast"] & { - --usa-nav--primary-item-bg: #{$bg-high-contrast}; --usa-nav--primary-item-text: #{$bg-high-contrast}; --usa-nav--primary-item-bg-hover: #{$bg-high-contrast}; --usa-nav--primary-item-text-hover: #{$base-white}; @@ -99,7 +97,7 @@ &[aria-expanded="false"] { span::after { - background-color: var(--usa-nav--primary-item-bg-hover); + background-color: $base-white; } } @@ -122,6 +120,12 @@ } .usa-nav__submenu { + --usa-nav--submenu-bg: #{$base-dark}; + + [data-theme="contrast"] & { + --usa-nav--submenu-bg: #{$bg-high-contrast}; + } + @include at-media-max('tablet-lg') { border-top: 1px solid $bg-light-medium; } @@ -129,11 +133,19 @@ @include at-media('tablet-lg') { @include u-width('auto'); @include u-padding-top(0); - background-color: $base-dark; + background-color: var(--usa-nav--submenu-bg); } } .usa-nav__submenu-item { + --usa-nav--submenu-item-text: #{$base-dark}; + --usa-nav--submenu-item-text-hover: #{$base-white}; + + [data-theme="contrast"] & { + --usa-nav--submenu-item-text: #{$bg-high-contrast}; + --usa-nav--submenu-item-text-hover: #{$btn-secondary-bg-high-contrast-hover}; + } + > span { opacity: 0.6; } @@ -172,7 +184,11 @@ @include u-padding-x(2); @include u-padding-y(1); @include u-display('block'); - color: $base-white; + color: var(--usa-nav--submenu-item-text); + + @include hover { + color: var(--usa-nav--submenu-item-text-hover); + } } } } @@ -196,6 +212,18 @@ } .usa-nav__link--parent { + --usa-nav--parent-after-color: #{$base-dark}; + + [data-theme="contrast"] & { + @include at-media('tablet-lg') { + --usa-nav--parent-after-color: #{$base-white}; + + @include hover { + --usa-nav--parent-after-color: #{$btn-secondary-bg-high-contrast-hover}; + } + } + } + @include u-font-weight('bold'); @include after { @@ -203,13 +231,9 @@ @include u-display('inline-block'); margin-inline-start: 0.5rem; height: 0.75rem; - background-color: $base-dark; + background-color: var(--usa-nav--parent-after-color); mask: url('../../img/svg/arrow-white.svg') no-repeat; mask-size: contain; - - @include at-media('tablet-lg') { - background-color: $base-white; - } } } From 3cc52ab5187eed3ad24568425ecd8d3fb65012f5 Mon Sep 17 00:00:00 2001 From: mlloydbixal Date: Fri, 5 Jul 2024 18:45:30 -0400 Subject: [PATCH 03/15] mobile high contrast variables --- .../custom/votegov/src/sass/_variables.scss | 1 + .../src/sass/uswds-overrides/usa-header.scss | 8 ++- .../src/sass/uswds-overrides/usa-nav.scss | 67 ++++++++++++------- 3 files changed, 52 insertions(+), 24 deletions(-) diff --git a/web/themes/custom/votegov/src/sass/_variables.scss b/web/themes/custom/votegov/src/sass/_variables.scss index e8c3f470f..bafbee038 100644 --- a/web/themes/custom/votegov/src/sass/_variables.scss +++ b/web/themes/custom/votegov/src/sass/_variables.scss @@ -30,3 +30,4 @@ $btn-bg-high-contrast: $link-high-contrast; $btn-bg-high-contrast-hover: $link-high-contrast-hover; $section-bg-high-contrast: $bg-light; $btn-secondary-bg-high-contrast-hover: #FFFF00; +$bg-high-contrast-light-cool: #F5F5F5; diff --git a/web/themes/custom/votegov/src/sass/uswds-overrides/usa-header.scss b/web/themes/custom/votegov/src/sass/uswds-overrides/usa-header.scss index 6f88a09af..6ce3aba17 100644 --- a/web/themes/custom/votegov/src/sass/uswds-overrides/usa-header.scss +++ b/web/themes/custom/votegov/src/sass/uswds-overrides/usa-header.scss @@ -25,6 +25,12 @@ @include grid-container(); .usa-menu-btn { + --usa-menu-btn: #{$base-dark}; + + [data-theme="contrast"] & { + --usa-menu-btn: #{$link-high-contrast}; + } + @include u-height('auto'); @include u-font-size('sans', 6); @include u-font-weight('medium'); @@ -33,7 +39,7 @@ text-transform: none; cursor: pointer; background-color: transparent; - color: $base-dark; + color: var(--usa-menu-btn); @include hover { @include u-text-decoration('underline'); diff --git a/web/themes/custom/votegov/src/sass/uswds-overrides/usa-nav.scss b/web/themes/custom/votegov/src/sass/uswds-overrides/usa-nav.scss index 29e29d21e..0500123e3 100644 --- a/web/themes/custom/votegov/src/sass/uswds-overrides/usa-nav.scss +++ b/web/themes/custom/votegov/src/sass/uswds-overrides/usa-nav.scss @@ -32,19 +32,15 @@ } .usa-nav__primary-item { - --usa-nav--primary-item-text: #{$base-dark}; - --usa-nav--primary-item-bg-hover: #{$base-dark}; - --usa-nav--primary-item-text-hover: #{$base-white}; - --usa-current-bg: #{$ac-warm}; + @include at-media-max('tablet-lg') { + --usa-nav--primary-item-text: #{$base-dark}; + --usa-nav--primary-item-bg: #{$bg-light-cool}; - [data-theme="contrast"] & { - --usa-nav--primary-item-text: #{$bg-high-contrast}; - --usa-nav--primary-item-bg-hover: #{$bg-high-contrast}; - --usa-nav--primary-item-text-hover: #{$base-white}; - --usa-current-bg: #{$link-high-contrast-hover-blue}; - } + [data-theme="contrast"] & { + --usa-nav--primary-item-text: #{$link-high-contrast}; + --usa-nav--primary-item-bg: #{$bg-high-contrast-light-cool}; + } - @include at-media-max('tablet-lg') { border-top-color: $bg-light-medium; &:first-child { @@ -58,14 +54,14 @@ @include u-font-weight('bold'); @include u-padding(2); @include u-width('full'); - color: $base-dark; + color: var(--usa-nav--primary-item-text); @include hover { - background-color: $bg-light-cool; + background-color: var(--usa-nav--primary-item-bg); } &:not(.usa-button):not(.usa-current) { - color: $base-dark; + color: var(--usa-nav--primary-item-text); } &.usa-current { @@ -77,6 +73,18 @@ } @include at-media('tablet-lg') { + --usa-nav--primary-item-text: #{$base-dark}; + --usa-nav--primary-item-bg-hover: #{$base-dark}; + --usa-nav--primary-item-text-hover: #{$base-white}; + --usa-current-bg: #{$ac-warm}; + + [data-theme="contrast"] & { + --usa-nav--primary-item-text: #{$bg-high-contrast}; + --usa-nav--primary-item-bg-hover: #{$bg-high-contrast}; + --usa-nav--primary-item-text-hover: #{$base-white}; + --usa-current-bg: #{$link-high-contrast-hover-blue}; + } + > button.usa-nav__link, > a.usa-nav__link { @include u-font-weight('bold'); @@ -138,12 +146,24 @@ } .usa-nav__submenu-item { - --usa-nav--submenu-item-text: #{$base-dark}; - --usa-nav--submenu-item-text-hover: #{$base-white}; + @include at-media-max('tablet-lg') { + --usa-nav--submenu-item-text: #{$base-dark}; + --usa-nav--submenu-item-bg-hover: #{$bg-light-cool}; - [data-theme="contrast"] & { - --usa-nav--submenu-item-text: #{$bg-high-contrast}; - --usa-nav--submenu-item-text-hover: #{$btn-secondary-bg-high-contrast-hover}; + [data-theme="contrast"] & { + --usa-nav--submenu-item-text: #{$link-high-contrast}; + --usa-nav--submenu-item-bg-hover: #{$bg-high-contrast-light-cool}; + } + } + + @include at-media('tablet-lg') { + --usa-nav--submenu-item-text: #{$base-white}; + --usa-nav--submenu-item-text-hover: #{$base-white}; + + [data-theme="contrast"] & { + --usa-nav--submenu-item-text: #{$base-white}; + --usa-nav--submenu-item-text-hover: #{$btn-secondary-bg-high-contrast-hover}; + } } > span { @@ -166,14 +186,15 @@ @include u-padding-x(1); @include u-padding-y(1.5); @include u-display('block'); - color: $base-dark; + color: var(--usa-nav--submenu-item-text); } > a.usa-nav__Link, > a.usa-current, > a:not(.usa-button):not(.usa-current) { @include hover { - background-color: $bg-light-cool; + background-color: var(--usa-nav--submenu-item-bg-hover); + color: var(--usa-nav--submenu-item-text); } } } @@ -184,10 +205,10 @@ @include u-padding-x(2); @include u-padding-y(1); @include u-display('block'); - color: var(--usa-nav--submenu-item-text); + color: var(--usa-nav--submenu-item-text) !important; @include hover { - color: var(--usa-nav--submenu-item-text-hover); + color: var(--usa-nav--submenu-item-text-hover) !important; } } } From c75072d7c20db93beac6b7a7ffd98aa258b4ee80 Mon Sep 17 00:00:00 2001 From: mlloydbixal Date: Fri, 5 Jul 2024 18:57:06 -0400 Subject: [PATCH 04/15] fix variable --- .../custom/votegov/src/sass/uswds-overrides/usa-nav.scss | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/web/themes/custom/votegov/src/sass/uswds-overrides/usa-nav.scss b/web/themes/custom/votegov/src/sass/uswds-overrides/usa-nav.scss index 0500123e3..9d20e339a 100644 --- a/web/themes/custom/votegov/src/sass/uswds-overrides/usa-nav.scss +++ b/web/themes/custom/votegov/src/sass/uswds-overrides/usa-nav.scss @@ -233,7 +233,7 @@ } .usa-nav__link--parent { - --usa-nav--parent-after-color: #{$base-dark}; + --usa-nav--parent-after-color: #{$base-white}; [data-theme="contrast"] & { @include at-media('tablet-lg') { @@ -252,7 +252,6 @@ @include u-display('inline-block'); margin-inline-start: 0.5rem; height: 0.75rem; - background-color: var(--usa-nav--parent-after-color); mask: url('../../img/svg/arrow-white.svg') no-repeat; mask-size: contain; } From 78330e572b526cc99abad14101d3307897095e21 Mon Sep 17 00:00:00 2001 From: mlloydbixal Date: Sun, 7 Jul 2024 15:09:53 -0400 Subject: [PATCH 05/15] use mask for mobile icon --- .../src/sass/uswds-overrides/usa-header.scss | 4 ++-- .../votegov/src/sass/uswds-overrides/usa-nav.scss | 13 ++++++++++--- 2 files changed, 12 insertions(+), 5 deletions(-) diff --git a/web/themes/custom/votegov/src/sass/uswds-overrides/usa-header.scss b/web/themes/custom/votegov/src/sass/uswds-overrides/usa-header.scss index 6ce3aba17..c911a8c1a 100644 --- a/web/themes/custom/votegov/src/sass/uswds-overrides/usa-header.scss +++ b/web/themes/custom/votegov/src/sass/uswds-overrides/usa-header.scss @@ -50,8 +50,8 @@ @include u-display('inline-block'); margin-inline-start: 0.5rem; height: 0.75rem; - background: url( '../../img/svg/menu.svg' ) no-repeat; - background-size: contain; + mask: url( '../../img/svg/menu.svg' ) no-repeat; + background-color: var(--usa-menu-btn); } &[aria-hidden="true"] { diff --git a/web/themes/custom/votegov/src/sass/uswds-overrides/usa-nav.scss b/web/themes/custom/votegov/src/sass/uswds-overrides/usa-nav.scss index 9d20e339a..ab5540efd 100644 --- a/web/themes/custom/votegov/src/sass/uswds-overrides/usa-nav.scss +++ b/web/themes/custom/votegov/src/sass/uswds-overrides/usa-nav.scss @@ -262,6 +262,12 @@ } .usa-nav__close { + --usa-nav--close: #{$base-dark}; + + [data-theme="contrast"] & { + --usa-nav--close: #{$link-high-contrast}; + } + @include u-margin(0); @include u-width('auto'); @include u-height('auto'); @@ -276,7 +282,7 @@ transform: translateY(-3.75rem); cursor: pointer; background-color: transparent; - color: $base-dark; + color: var(--usa-nav--close); @include hover { @include u-text-decoration('underline'); @@ -287,8 +293,9 @@ @include u-display('inline-block'); margin-inline-start: 0.5rem; height: 0.75rem; - background: url('../../img/svg/close.svg') no-repeat; - background-size: contain; + mask: url('../../img/svg/close.svg') no-repeat; + background-color: var(--usa-nav--close); + mask-size: 70%; } @include at-media-max('tablet-lg') { From 32b4b6cc80763f6f4b290fa38ea8ad000aa5d560 Mon Sep 17 00:00:00 2001 From: mlloydbixal Date: Tue, 9 Jul 2024 11:58:47 -0400 Subject: [PATCH 06/15] remove important --- .../custom/votegov/src/sass/uswds-overrides/usa-nav.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/web/themes/custom/votegov/src/sass/uswds-overrides/usa-nav.scss b/web/themes/custom/votegov/src/sass/uswds-overrides/usa-nav.scss index ab5540efd..9809d31c0 100644 --- a/web/themes/custom/votegov/src/sass/uswds-overrides/usa-nav.scss +++ b/web/themes/custom/votegov/src/sass/uswds-overrides/usa-nav.scss @@ -205,10 +205,10 @@ @include u-padding-x(2); @include u-padding-y(1); @include u-display('block'); - color: var(--usa-nav--submenu-item-text) !important; + color: var(--usa-nav--submenu-item-text); @include hover { - color: var(--usa-nav--submenu-item-text-hover) !important; + color: var(--usa-nav--submenu-item-text-hover); } } } From 7a0d5d954ec2f30d2657bba418bf25b53836b6a5 Mon Sep 17 00:00:00 2001 From: mlloydbixal Date: Thu, 11 Jul 2024 12:39:34 -0400 Subject: [PATCH 07/15] desktop revisions --- .../src/sass/uswds-overrides/usa-nav.scss | 99 ++++++++++++------- 1 file changed, 61 insertions(+), 38 deletions(-) diff --git a/web/themes/custom/votegov/src/sass/uswds-overrides/usa-nav.scss b/web/themes/custom/votegov/src/sass/uswds-overrides/usa-nav.scss index 9809d31c0..74a4e82fd 100644 --- a/web/themes/custom/votegov/src/sass/uswds-overrides/usa-nav.scss +++ b/web/themes/custom/votegov/src/sass/uswds-overrides/usa-nav.scss @@ -39,6 +39,10 @@ [data-theme="contrast"] & { --usa-nav--primary-item-text: #{$link-high-contrast}; --usa-nav--primary-item-bg: #{$bg-high-contrast-light-cool}; + + // @include hover { + // --usa-nav--primary-item-bg: #{$bg-high-contrast-light-cool}; + // } } border-top-color: $bg-light-medium; @@ -55,10 +59,11 @@ @include u-padding(2); @include u-width('full'); color: var(--usa-nav--primary-item-text); + // background-color: var(--usa-nav--primary-item-bg); - @include hover { - background-color: var(--usa-nav--primary-item-bg); - } + // @include hover { + // background-color: var(--usa-nav--primary-item-bg); + // } &:not(.usa-button):not(.usa-current) { color: var(--usa-nav--primary-item-text); @@ -74,15 +79,23 @@ @include at-media('tablet-lg') { --usa-nav--primary-item-text: #{$base-dark}; - --usa-nav--primary-item-bg-hover: #{$base-dark}; - --usa-nav--primary-item-text-hover: #{$base-white}; + --usa-nav--primary-item-bg: #{$base-white}; --usa-current-bg: #{$ac-warm}; + @include hover { + --usa-nav--primary-item-text: #{$base-white}; + --usa-nav--primary-item-bg: #{$base-dark}; + } + [data-theme="contrast"] & { --usa-nav--primary-item-text: #{$bg-high-contrast}; - --usa-nav--primary-item-bg-hover: #{$bg-high-contrast}; - --usa-nav--primary-item-text-hover: #{$base-white}; + --usa-nav--primary-item-bg: #{$base-white}; --usa-current-bg: #{$link-high-contrast-hover-blue}; + + @include hover { + --usa-nav--primary-item-text: #{$btn-secondary-bg-high-contrast-hover}; + --usa-nav--primary-item-bg: #{$bg-high-contrast}; + } } > button.usa-nav__link, @@ -93,26 +106,14 @@ @include u-font-size('sans', 5); @include u-line-height('sans', 4); color: var(--usa-nav--primary-item-text); + background-color: var(--usa-nav--primary-item-bg); - &[aria-expanded="true"] { - background-color: var(--usa-nav--primary-item-bg-hover); - color: var(--usa-nav--primary-item-text-hover); - } - - @include hover { - background-color: var(--usa-nav--primary-item-bg-hover); - color: var(--usa-nav--primary-item-text-hover); + &[aria-expanded="true"], &[aria-expanded="false"] { + color: var(--usa-nav--primary-item-text); + background-color: var(--usa-nav--primary-item-bg); - &[aria-expanded="false"] { - span::after { - background-color: $base-white; - } - } - - .usa-header--extended & { - &:after { - background-color: transparent; - } + span::after { + background-color: var(--usa-nav--primary-item-text); } } @@ -123,6 +124,16 @@ background-color: var(--usa-current-bg); } } + + @include hover { + color: var(--usa-nav--primary-item-text); + + .usa-header--extended & { + &:after { + background-color: transparent; + } + } + } } } } @@ -158,11 +169,17 @@ @include at-media('tablet-lg') { --usa-nav--submenu-item-text: #{$base-white}; - --usa-nav--submenu-item-text-hover: #{$base-white}; + + @include hover { + --usa-nav--submenu-item-text: #{$base-white}; + } [data-theme="contrast"] & { --usa-nav--submenu-item-text: #{$base-white}; - --usa-nav--submenu-item-text-hover: #{$btn-secondary-bg-high-contrast-hover}; + + @include hover { + --usa-nav--submenu-item-text: #{$btn-secondary-bg-high-contrast-hover}; + } } } @@ -178,6 +195,7 @@ @include u-border-top(0); } + > a, > a.usa-nav__Link, > a.usa-current, > a:not(.usa-button):not(.usa-current), @@ -189,13 +207,16 @@ color: var(--usa-nav--submenu-item-text); } + > a, > a.usa-nav__Link, > a.usa-current, > a:not(.usa-button):not(.usa-current) { - @include hover { - background-color: var(--usa-nav--submenu-item-bg-hover); - color: var(--usa-nav--submenu-item-text); - } + // background-color: ; + color: var(--usa-nav--submenu-item-text); + // @include hover { + // background-color: var(--usa-nav--submenu-item-bg-hover); + // color: var(--usa-nav--submenu-item-text); + // } } } @@ -205,11 +226,11 @@ @include u-padding-x(2); @include u-padding-y(1); @include u-display('block'); - color: var(--usa-nav--submenu-item-text); + color: var(--usa-nav--submenu-item-text) !important; - @include hover { - color: var(--usa-nav--submenu-item-text-hover); - } + // @include hover { + // --usa-nav--submenu-item-text: #{$btn-secondary-bg-high-contrast-hover}; + // } } } } @@ -233,19 +254,20 @@ } .usa-nav__link--parent { - --usa-nav--parent-after-color: #{$base-white}; + --usa-nav--parent-color: #{$base-white}; [data-theme="contrast"] & { @include at-media('tablet-lg') { - --usa-nav--parent-after-color: #{$base-white}; + --usa-nav--parent-color: #{$base-white}; @include hover { - --usa-nav--parent-after-color: #{$btn-secondary-bg-high-contrast-hover}; + --usa-nav--parent-color: #{$btn-secondary-bg-high-contrast-hover}; } } } @include u-font-weight('bold'); + color: var(--usa-nav--parent-color); @include after { @include u-width(2); @@ -254,6 +276,7 @@ height: 0.75rem; mask: url('../../img/svg/arrow-white.svg') no-repeat; mask-size: contain; + background-color: var(--usa-nav--parent-color); } } From cb95ee3588ab81abe2a204f5aecf464a3677e550 Mon Sep 17 00:00:00 2001 From: mlloydbixal Date: Thu, 11 Jul 2024 13:39:17 -0400 Subject: [PATCH 08/15] revisions mobile --- .../src/sass/uswds-overrides/usa-nav.scss | 91 ++++++++++--------- 1 file changed, 50 insertions(+), 41 deletions(-) diff --git a/web/themes/custom/votegov/src/sass/uswds-overrides/usa-nav.scss b/web/themes/custom/votegov/src/sass/uswds-overrides/usa-nav.scss index 74a4e82fd..577ffefff 100644 --- a/web/themes/custom/votegov/src/sass/uswds-overrides/usa-nav.scss +++ b/web/themes/custom/votegov/src/sass/uswds-overrides/usa-nav.scss @@ -16,6 +16,12 @@ } .usa-nav__primary { + --usa-nav--primary-after: #{$base-dark}; + + [data-theme="contrast"] & { + --usa-nav--primary-after: #{$link-high-contrast}; + } + &.usa-accordion { @include u-margin-top(0); } @@ -29,20 +35,29 @@ @include u-margin-left(0); } } + + button[aria-expanded=false] span::after, + button[aria-expanded=true] span::after { + background-color: var(--usa-nav--primary-after); + } } .usa-nav__primary-item { @include at-media-max('tablet-lg') { --usa-nav--primary-item-text: #{$base-dark}; - --usa-nav--primary-item-bg: #{$bg-light-cool}; + --usa-nav--primary-item-bg: #{$base-white}; + + @include hover { + --usa-nav--primary-item-bg: #{$bg-light-cool}; + } [data-theme="contrast"] & { --usa-nav--primary-item-text: #{$link-high-contrast}; - --usa-nav--primary-item-bg: #{$bg-high-contrast-light-cool}; + --usa-nav--primary-item-bg: #{$base-white}; - // @include hover { - // --usa-nav--primary-item-bg: #{$bg-high-contrast-light-cool}; - // } + @include hover { + --usa-nav--primary-item-bg: #{$bg-high-contrast-light-cool}; + } } border-top-color: $bg-light-medium; @@ -58,12 +73,8 @@ @include u-font-weight('bold'); @include u-padding(2); @include u-width('full'); + background-color: var(--usa-nav--primary-item-bg); color: var(--usa-nav--primary-item-text); - // background-color: var(--usa-nav--primary-item-bg); - - // @include hover { - // background-color: var(--usa-nav--primary-item-bg); - // } &:not(.usa-button):not(.usa-current) { color: var(--usa-nav--primary-item-text); @@ -157,37 +168,27 @@ } .usa-nav__submenu-item { - @include at-media-max('tablet-lg') { - --usa-nav--submenu-item-text: #{$base-dark}; - --usa-nav--submenu-item-bg-hover: #{$bg-light-cool}; - - [data-theme="contrast"] & { - --usa-nav--submenu-item-text: #{$link-high-contrast}; - --usa-nav--submenu-item-bg-hover: #{$bg-high-contrast-light-cool}; - } + > span { + opacity: 0.6; } - @include at-media('tablet-lg') { - --usa-nav--submenu-item-text: #{$base-white}; + @include at-media-max('tablet-lg') { + --usa-nav--submenu-item-text: #{$base-dark}; + --usa-nav--submenu-item-bg: #{$base-white}; @include hover { - --usa-nav--submenu-item-text: #{$base-white}; + --usa-nav--submenu-item-bg: #{$bg-light-cool}; } [data-theme="contrast"] & { - --usa-nav--submenu-item-text: #{$base-white}; + --usa-nav--submenu-item-text: #{$link-high-contrast}; + --usa-nav--submenu-item-bg: #{$base-white}; @include hover { - --usa-nav--submenu-item-text: #{$btn-secondary-bg-high-contrast-hover}; + --usa-nav--submenu-item-bg: #{$bg-high-contrast-light-cool}; } } - } - - > span { - opacity: 0.6; - } - @include at-media-max('tablet-lg') { margin-inline-start: 1rem; border-top-color: $bg-light-medium; @@ -204,33 +205,41 @@ @include u-padding-x(1); @include u-padding-y(1.5); @include u-display('block'); - color: var(--usa-nav--submenu-item-text); + background-color: var(--usa-nav--submenu-item-bg) !important; + color: var(--usa-nav--submenu-item-text) !important; } > a, > a.usa-nav__Link, > a.usa-current, - > a:not(.usa-button):not(.usa-current) { - // background-color: ; - color: var(--usa-nav--submenu-item-text); - // @include hover { - // background-color: var(--usa-nav--submenu-item-bg-hover); - // color: var(--usa-nav--submenu-item-text); - // } + > a:not(.usa-button):not(.usa-current), + > button.usa-nav__Link { + background-color: var(--usa-nav--submenu-item-bg) !important; + color: var(--usa-nav--submenu-item-text) !important; } } @include at-media('tablet-lg') { + --usa-nav--submenu-item-text: #{$base-white}; + + @include hover { + --usa-nav--submenu-item-text: #{$base-white}; + } + + [data-theme="contrast"] & { + --usa-nav--submenu-item-text: #{$base-white}; + + @include hover { + --usa-nav--submenu-item-text: #{$btn-secondary-bg-high-contrast-hover}; + } + } + > a, > span { @include u-padding-x(2); @include u-padding-y(1); @include u-display('block'); color: var(--usa-nav--submenu-item-text) !important; - - // @include hover { - // --usa-nav--submenu-item-text: #{$btn-secondary-bg-high-contrast-hover}; - // } } } } From 66f0a441ff09721e2761ebc393f5820983fef930 Mon Sep 17 00:00:00 2001 From: mlloydbixal Date: Thu, 11 Jul 2024 14:38:41 -0400 Subject: [PATCH 09/15] rm important --- .../custom/votegov/src/sass/_variables.scss | 1 + .../src/sass/uswds-overrides/usa-nav.scss | 32 ++++++++++++++++--- 2 files changed, 29 insertions(+), 4 deletions(-) diff --git a/web/themes/custom/votegov/src/sass/_variables.scss b/web/themes/custom/votegov/src/sass/_variables.scss index bafbee038..13acc55e3 100644 --- a/web/themes/custom/votegov/src/sass/_variables.scss +++ b/web/themes/custom/votegov/src/sass/_variables.scss @@ -4,6 +4,7 @@ $base-dark: #11385B; // blue-warm-80v $base-primary: #345D96; // blue-warm-50 $base-primary-hover: #2E598A; // blue-60 $base-primary-active: $base-dark; +$base-secondary-hover: #005ea2; // Accent Colors. $ac-warm: #992E30; diff --git a/web/themes/custom/votegov/src/sass/uswds-overrides/usa-nav.scss b/web/themes/custom/votegov/src/sass/uswds-overrides/usa-nav.scss index 577ffefff..b6549aa1b 100644 --- a/web/themes/custom/votegov/src/sass/uswds-overrides/usa-nav.scss +++ b/web/themes/custom/votegov/src/sass/uswds-overrides/usa-nav.scss @@ -56,6 +56,7 @@ --usa-nav--primary-item-bg: #{$base-white}; @include hover { + --usa-nav--primary-item-text: #{$link-high-contrast}; --usa-nav--primary-item-bg: #{$bg-high-contrast-light-cool}; } } @@ -177,6 +178,7 @@ --usa-nav--submenu-item-bg: #{$base-white}; @include hover { + --usa-nav--submenu-item-text: #{$base-secondary-hover}; --usa-nav--submenu-item-bg: #{$bg-light-cool}; } @@ -185,6 +187,7 @@ --usa-nav--submenu-item-bg: #{$base-white}; @include hover { + --usa-nav--submenu-item-text: #{$link-high-contrast}; --usa-nav--submenu-item-bg: #{$bg-high-contrast-light-cool}; } } @@ -205,7 +208,7 @@ @include u-padding-x(1); @include u-padding-y(1.5); @include u-display('block'); - background-color: var(--usa-nav--submenu-item-bg) !important; + background-color: var(--usa-nav--submenu-item-bg); color: var(--usa-nav--submenu-item-text) !important; } @@ -214,8 +217,9 @@ > a.usa-current, > a:not(.usa-button):not(.usa-current), > button.usa-nav__Link { - background-color: var(--usa-nav--submenu-item-bg) !important; + background-color: var(--usa-nav--submenu-item-bg); color: var(--usa-nav--submenu-item-text) !important; + } } @@ -263,17 +267,37 @@ } .usa-nav__link--parent { + @include at-media-max('tablet-lg') { + --usa-nav--parent-color: #{$base-dark}; + + @include hover { + --usa-nav--parent-color: #{$base-secondary-hover}; + } + + [data-theme="contrast"] & { + --usa-nav--parent-color: #{$link-high-contrast}; + + @include hover { + --usa-nav--parent-color: #{$link-high-contrast}; + } + } + } + + @include at-media('tablet-lg') { --usa-nav--parent-color: #{$base-white}; + @include hover { + --usa-nav--parent-color: #{$base-white}; + } + [data-theme="contrast"] & { - @include at-media('tablet-lg') { --usa-nav--parent-color: #{$base-white}; @include hover { --usa-nav--parent-color: #{$btn-secondary-bg-high-contrast-hover}; } - } } +} @include u-font-weight('bold'); color: var(--usa-nav--parent-color); From a577038f1131c89ab2c9bea67dd17fff4e06e58a Mon Sep 17 00:00:00 2001 From: mlloydbixal Date: Thu, 11 Jul 2024 16:38:19 -0400 Subject: [PATCH 10/15] fix variable --- .../src/sass/uswds-overrides/usa-nav.scss | 20 +++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/web/themes/custom/votegov/src/sass/uswds-overrides/usa-nav.scss b/web/themes/custom/votegov/src/sass/uswds-overrides/usa-nav.scss index b6549aa1b..e204907f3 100644 --- a/web/themes/custom/votegov/src/sass/uswds-overrides/usa-nav.scss +++ b/web/themes/custom/votegov/src/sass/uswds-overrides/usa-nav.scss @@ -275,29 +275,29 @@ } [data-theme="contrast"] & { - --usa-nav--parent-color: #{$link-high-contrast}; + --usa-nav--parent-color: #{$link-high-contrast}; - @include hover { - --usa-nav--parent-color: #{$link-high-contrast}; - } + @include hover { + --usa-nav--parent-color: #{$link-high-contrast}; + } } } @include at-media('tablet-lg') { --usa-nav--parent-color: #{$base-white}; - @include hover { - --usa-nav--parent-color: #{$base-white}; - } + @include hover { + --usa-nav--parent-color: #{$base-white}; + } - [data-theme="contrast"] & { + [data-theme="contrast"] & { --usa-nav--parent-color: #{$base-white}; @include hover { --usa-nav--parent-color: #{$btn-secondary-bg-high-contrast-hover}; } + } } -} @include u-font-weight('bold'); color: var(--usa-nav--parent-color); @@ -309,7 +309,7 @@ height: 0.75rem; mask: url('../../img/svg/arrow-white.svg') no-repeat; mask-size: contain; - background-color: var(--usa-nav--parent-color); + background-color: var(--usa-nav--parent-color) !important; } } From 22a337749526fbfccc305e5446a95598832623b7 Mon Sep 17 00:00:00 2001 From: mlloydbixal Date: Fri, 12 Jul 2024 10:49:40 -0400 Subject: [PATCH 11/15] rm important again --- .../custom/votegov/src/sass/uswds-overrides/usa-nav.scss | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/web/themes/custom/votegov/src/sass/uswds-overrides/usa-nav.scss b/web/themes/custom/votegov/src/sass/uswds-overrides/usa-nav.scss index e204907f3..9fa31b98b 100644 --- a/web/themes/custom/votegov/src/sass/uswds-overrides/usa-nav.scss +++ b/web/themes/custom/votegov/src/sass/uswds-overrides/usa-nav.scss @@ -209,7 +209,7 @@ @include u-padding-y(1.5); @include u-display('block'); background-color: var(--usa-nav--submenu-item-bg); - color: var(--usa-nav--submenu-item-text) !important; + color: var(--usa-nav--submenu-item-text); } > a, @@ -218,7 +218,7 @@ > a:not(.usa-button):not(.usa-current), > button.usa-nav__Link { background-color: var(--usa-nav--submenu-item-bg); - color: var(--usa-nav--submenu-item-text) !important; + color: var(--usa-nav--submenu-item-text); } } @@ -243,7 +243,7 @@ @include u-padding-x(2); @include u-padding-y(1); @include u-display('block'); - color: var(--usa-nav--submenu-item-text) !important; + color: var(--usa-nav--submenu-item-text); } } } @@ -309,7 +309,7 @@ height: 0.75rem; mask: url('../../img/svg/arrow-white.svg') no-repeat; mask-size: contain; - background-color: var(--usa-nav--parent-color) !important; + background-color: var(--usa-nav--parent-color); } } From 07a99aab4208789010fff8ed4f3c0eccc9783966 Mon Sep 17 00:00:00 2001 From: Ray Estrada Date: Mon, 15 Jul 2024 10:25:20 -0700 Subject: [PATCH 12/15] Re-add variable --- web/themes/custom/votegov/src/sass/_variables.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/web/themes/custom/votegov/src/sass/_variables.scss b/web/themes/custom/votegov/src/sass/_variables.scss index f48afaa8d..f5c03dbdb 100644 --- a/web/themes/custom/votegov/src/sass/_variables.scss +++ b/web/themes/custom/votegov/src/sass/_variables.scss @@ -23,6 +23,7 @@ $bg-high-contrast: #0A0A2A; $text-high-contrast: $bg-high-contrast; $link-high-contrast: #0000FF; $link-high-contrast-hover: #010156; +$link-high-contrast-hover-blue: #00FFFF; $btn-bg-high-contrast: $link-high-contrast; $btn-bg-high-contrast-hover: $link-high-contrast-hover; $section-bg-high-contrast: $bg-light; From d372cca6de24e29a4e1ac6f6440a7041b69294f5 Mon Sep 17 00:00:00 2001 From: Ray Estrada Date: Mon, 15 Jul 2024 11:01:35 -0700 Subject: [PATCH 13/15] Hide mobile menu button when there is no menu Fix container overlaying logo on desktop in rtl --- .../src/sass/uswds-overrides/usa-nav.scss | 6 ++++++ .../votegov/templates/layout/page.html.twig | 17 ++++++++++------- 2 files changed, 16 insertions(+), 7 deletions(-) diff --git a/web/themes/custom/votegov/src/sass/uswds-overrides/usa-nav.scss b/web/themes/custom/votegov/src/sass/uswds-overrides/usa-nav.scss index ddf9fa173..f6ef5afa1 100644 --- a/web/themes/custom/votegov/src/sass/uswds-overrides/usa-nav.scss +++ b/web/themes/custom/votegov/src/sass/uswds-overrides/usa-nav.scss @@ -262,6 +262,12 @@ } .usa-nav__secondary { + @include at-media('tablet-lg') { + [dir="rtl"] & { + right: unset; + } + } + @include at-media-max('tablet-lg') { @include u-margin(0); @include grid-container; diff --git a/web/themes/custom/votegov/templates/layout/page.html.twig b/web/themes/custom/votegov/templates/layout/page.html.twig index 1d505d062..0aefdfd63 100644 --- a/web/themes/custom/votegov/templates/layout/page.html.twig +++ b/web/themes/custom/votegov/templates/layout/page.html.twig @@ -80,17 +80,20 @@ {{ drupal_view('sitewide_alert', 'block_1') }}
-
+ {% set mainmenu = drupal_entity('block', 'votegov_mainnavigation') | render %} +
- {# Site branding component #} - {{ drupal_entity('block', 'votegov_sitebranding') }} + {# Site branding component #} + {{ drupal_entity('block', 'votegov_sitebranding') }} - + {% if mainmenu %} + + {% endif %} -
+
- {# Main navigation component #} - {{ drupal_entity('block', 'votegov_mainnavigation') }} + {# Main navigation component #} + {{ mainmenu }}
{{ page.admin }} From 622b09007bc94d31f6a9efc1ee3b3c8c9e015c7f Mon Sep 17 00:00:00 2001 From: mlloydbixal Date: Thu, 18 Jul 2024 17:30:46 -0400 Subject: [PATCH 14/15] fix specificity of selectors and adjust high contrast variables --- .../src/sass/uswds-overrides/usa-nav.scss | 218 +++++++++--------- 1 file changed, 115 insertions(+), 103 deletions(-) diff --git a/web/themes/custom/votegov/src/sass/uswds-overrides/usa-nav.scss b/web/themes/custom/votegov/src/sass/uswds-overrides/usa-nav.scss index f6ef5afa1..f48545740 100644 --- a/web/themes/custom/votegov/src/sass/uswds-overrides/usa-nav.scss +++ b/web/themes/custom/votegov/src/sass/uswds-overrides/usa-nav.scss @@ -44,31 +44,30 @@ .usa-nav__primary-item { @include at-media-max('tablet-lg') { - --usa-nav--primary-item-text: #{$base-dark}; - --usa-nav--primary-item-bg: #{$base-white}; + border-top-color: $bg-light-medium; - @include hover { - --usa-nav--primary-item-bg: #{$bg-light-cool}; + &:first-child { + @include u-border-top(0); } - [data-theme="contrast"] & { - --usa-nav--primary-item-text: #{$link-high-contrast}; + >a.usa-nav__link, >button.usa-nav__link { + --usa-nav--primary-item-text: #{$base-dark}; --usa-nav--primary-item-bg: #{$base-white}; @include hover { - --usa-nav--primary-item-text: #{$link-high-contrast}; - --usa-nav--primary-item-bg: #{$bg-high-contrast-light-cool}; + --usa-nav--primary-item-bg: #{$bg-light-cool}; } - } - border-top-color: $bg-light-medium; + [data-theme="contrast"] & { + --usa-nav--primary-item-text: #{$link-high-contrast}; + --usa-nav--primary-item-bg: #{$base-white}; - &:first-child { - @include u-border-top(0); - } + @include hover { + --usa-nav--primary-item-text: #{$link-high-contrast}; + --usa-nav--primary-item-bg: #{$bg-high-contrast-light-cool}; + } + } - >a.usa-nav__link, - >button.usa-nav__link { @include u-font-size('serif', 6); @include u-font-family('serif'); @include u-font-weight('bold'); @@ -86,41 +85,44 @@ @include u-display('none'); } } - } - >button { - text-align: start; + >button { + text-align: start; - span:after { - right: unset; - inset-inline-end: 0; + span:after { + right: unset; + inset-inline-end: 0; + } } } } @include at-media('tablet-lg') { - --usa-nav--primary-item-text: #{$base-dark}; - --usa-nav--primary-item-bg: #{$base-white}; - --usa-current-bg: #{$ac-warm}; - - @include hover { - --usa-nav--primary-item-text: #{$base-white}; - --usa-nav--primary-item-bg: #{$base-dark}; - } - - [data-theme="contrast"] & { - --usa-nav--primary-item-text: #{$bg-high-contrast}; + >a.usa-nav__link, >button.usa-nav__link { + --usa-nav--primary-item-text: #{$base-dark}; --usa-nav--primary-item-bg: #{$base-white}; - --usa-current-bg: #{$link-high-contrast-hover-blue}; + --usa-nav--primary-item-text-expanded: #{$base-white}; + --usa-nav--primary-item-bg-expanded: #{$base-dark}; + --usa-current-bg: #{$ac-warm}; @include hover { - --usa-nav--primary-item-text: #{$btn-secondary-bg-high-contrast-hover}; - --usa-nav--primary-item-bg: #{$bg-high-contrast}; + --usa-nav--primary-item-text: #{$base-white}; + --usa-nav--primary-item-bg: #{$base-dark}; + } + + [data-theme="contrast"] & { + --usa-nav--primary-item-text: #{$bg-high-contrast}; + --usa-nav--primary-item-bg: #{$base-white}; + --usa-nav--primary-item-text-expanded: #{$btn-secondary-bg-high-contrast-hover}; + --usa-nav--primary-item-bg-expanded: #{$bg-high-contrast}; + --usa-current-bg: #{$link-high-contrast-hover-blue}; + + @include hover { + --usa-nav--primary-item-text: #{$btn-secondary-bg-high-contrast-hover}; + --usa-nav--primary-item-bg: #{$bg-high-contrast}; + } } - } - > button.usa-nav__link, - > a.usa-nav__link { @include u-font-weight('bold'); @include u-padding-x(2); @include u-padding-y(2.5); @@ -129,15 +131,21 @@ color: var(--usa-nav--primary-item-text); background-color: var(--usa-nav--primary-item-bg); - &[aria-expanded="true"], &[aria-expanded="false"] { - color: var(--usa-nav--primary-item-text); - background-color: var(--usa-nav--primary-item-bg); - - span::after { + &[aria-expanded="false"] { + > span::after { background-color: var(--usa-nav--primary-item-text); } } + &[aria-expanded="true"] { + color: var(--usa-nav--primary-item-text-expanded); + background-color: var(--usa-nav--primary-item-bg-expanded); + + > span::after { + background-color: var(--usa-nav--primary-item-text-expanded); + } + } + &.usa-current { @include after { @include u-left(0); @@ -187,87 +195,87 @@ } @include at-media-max('tablet-lg') { - --usa-nav--submenu-item-text: #{$base-dark}; - --usa-nav--submenu-item-bg: #{$base-white}; + margin-inline-start: 1rem; + border-top-color: $bg-light-medium; - @include hover { - --usa-nav--submenu-item-text: #{$base-secondary-hover}; - --usa-nav--submenu-item-bg: #{$bg-light-cool}; + &:first-child { + @include u-border-top(0); } - [data-theme="contrast"] & { - --usa-nav--submenu-item-text: #{$link-high-contrast}; + >a { + --usa-nav--submenu-item-text: #{$base-dark}; --usa-nav--submenu-item-bg: #{$base-white}; @include hover { - --usa-nav--submenu-item-text: #{$link-high-contrast}; - --usa-nav--submenu-item-bg: #{$bg-high-contrast-light-cool}; + --usa-nav--submenu-item-text: #{$base-secondary-hover}; + --usa-nav--submenu-item-bg: #{$bg-light-cool}; } - } - - margin-inline-start: 1rem; - border-top-color: $bg-light-medium; - &:first-child { - @include u-border-top(0); - } + [data-theme="contrast"] & { + --usa-nav--submenu-item-text: #{$link-high-contrast}; + --usa-nav--submenu-item-bg: #{$base-white}; - > a, - > a.usa-nav__Link, - > a.usa-current, - > a:not(.usa-button):not(.usa-current), - > span { - @include u-font-size('sans', 5); - @include u-padding-x(1); - @include u-padding-y(1.5); - @include u-display('block'); - background-color: var(--usa-nav--submenu-item-bg); - color: var(--usa-nav--submenu-item-text); - } + @include hover { + --usa-nav--submenu-item-text: #{$link-high-contrast}; + --usa-nav--submenu-item-bg: #{$bg-high-contrast-light-cool}; + } + } - > a, - > a.usa-nav__Link, - > a.usa-current, - > a:not(.usa-button):not(.usa-current), - > button.usa-nav__Link { - background-color: var(--usa-nav--submenu-item-bg); - color: var(--usa-nav--submenu-item-text); + &.usa-nav__Link, + &.usa-current, + &:not(.usa-button):not(.usa-current), + span { + @include u-font-size('sans', 5); + @include u-padding-x(1); + @include u-padding-y(1.5); + @include u-display('block'); + background-color: var(--usa-nav--submenu-item-bg); + color: var(--usa-nav--submenu-item-text); + } + &.usa-nav__Link, + &.usa-current, + &:not(.usa-button):not(.usa-current), + >button.usa-nav__Link { + background-color: var(--usa-nav--submenu-item-bg) !important; + color: var(--usa-nav--submenu-item-text) !important; + } } } @include at-media('tablet-lg') { - --usa-nav--submenu-item-text: #{$base-white}; - - @include hover { - --usa-nav--submenu-item-text: #{$base-white}; - } - - [data-theme="contrast"] & { + >a { --usa-nav--submenu-item-text: #{$base-white}; @include hover { - --usa-nav--submenu-item-text: #{$btn-secondary-bg-high-contrast-hover}; + --usa-nav--submenu-item-text: #{$base-white}; } - } - > a, - > span { - @include u-padding-x(2); - @include u-padding-y(1); - @include u-display('block'); - color: var(--usa-nav--submenu-item-text); + [data-theme="contrast"] & { + --usa-nav--submenu-item-text: #{$base-white}; + + @include hover { + --usa-nav--submenu-item-text: #{$btn-secondary-bg-high-contrast-hover}; + } + } + + color: var(--usa-nav--submenu-item-text) !important; + + >span { + @include u-padding-x(2); + @include u-padding-y(1); + @include u-display('block'); + color: var(--usa-nav--submenu-item-text); + } + + @include hover { + @include u-text-decoration('underline'); + } } } } .usa-nav__secondary { - @include at-media('tablet-lg') { - [dir="rtl"] & { - right: unset; - } - } - @include at-media-max('tablet-lg') { @include u-margin(0); @include grid-container; @@ -279,6 +287,10 @@ } @include at-media('tablet-lg') { + [dir="rtl"] & { + right: unset; + } + @include u-right(0); bottom: 5.5rem; inset-inline-end: 5rem; @@ -289,9 +301,9 @@ @include at-media-max('tablet-lg') { --usa-nav--parent-color: #{$base-dark}; - @include hover { - --usa-nav--parent-color: #{$base-secondary-hover}; - } + @include hover { + --usa-nav--parent-color: #{$base-secondary-hover}; + } [data-theme="contrast"] & { --usa-nav--parent-color: #{$link-high-contrast}; @@ -303,7 +315,7 @@ } @include at-media('tablet-lg') { - --usa-nav--parent-color: #{$base-white}; + --usa-nav--parent-color: #{$base-white}; @include hover { --usa-nav--parent-color: #{$base-white}; From 6aab5d9765d0990e28ef7ce013d1e91a781421bb Mon Sep 17 00:00:00 2001 From: Ray Estrada Date: Fri, 19 Jul 2024 17:31:43 -0700 Subject: [PATCH 15/15] refinements --- .../custom/votegov/src/sass/base/link.scss | 4 +++ .../src/sass/uswds-overrides/usa-nav.scss | 28 ++++++++----------- 2 files changed, 16 insertions(+), 16 deletions(-) diff --git a/web/themes/custom/votegov/src/sass/base/link.scss b/web/themes/custom/votegov/src/sass/base/link.scss index cee1e5f12..d39615dbc 100644 --- a/web/themes/custom/votegov/src/sass/base/link.scss +++ b/web/themes/custom/votegov/src/sass/base/link.scss @@ -9,4 +9,8 @@ a { [href]:focus { outline-offset: 0.25rem; + + &.usa-nav__link { + outline-offset: 0; + } } diff --git a/web/themes/custom/votegov/src/sass/uswds-overrides/usa-nav.scss b/web/themes/custom/votegov/src/sass/uswds-overrides/usa-nav.scss index f48545740..d59df66bf 100644 --- a/web/themes/custom/votegov/src/sass/uswds-overrides/usa-nav.scss +++ b/web/themes/custom/votegov/src/sass/uswds-overrides/usa-nav.scss @@ -52,20 +52,12 @@ >a.usa-nav__link, >button.usa-nav__link { --usa-nav--primary-item-text: #{$base-dark}; - --usa-nav--primary-item-bg: #{$base-white}; - - @include hover { - --usa-nav--primary-item-bg: #{$bg-light-cool}; - } + --usa-nav--primary-item-bg: transparent; + --usa-nav--primary-item-bg--hover: #{$bg-light-cool}; [data-theme="contrast"] & { --usa-nav--primary-item-text: #{$link-high-contrast}; - --usa-nav--primary-item-bg: #{$base-white}; - - @include hover { - --usa-nav--primary-item-text: #{$link-high-contrast}; - --usa-nav--primary-item-bg: #{$bg-high-contrast-light-cool}; - } + --usa-nav--primary-item-bg--hover: #{$bg-high-contrast-light-cool}; } @include u-font-size('serif', 6); @@ -80,6 +72,10 @@ color: var(--usa-nav--primary-item-text); } + @include hover { + background-color: var(--usa-nav--primary-item-bg--hover); + } + &.usa-current { @include after { @include u-display('none'); @@ -100,7 +96,7 @@ @include at-media('tablet-lg') { >a.usa-nav__link, >button.usa-nav__link { --usa-nav--primary-item-text: #{$base-dark}; - --usa-nav--primary-item-bg: #{$base-white}; + --usa-nav--primary-item-bg: transparent; --usa-nav--primary-item-text-expanded: #{$base-white}; --usa-nav--primary-item-bg-expanded: #{$base-dark}; --usa-current-bg: #{$ac-warm}; @@ -112,8 +108,7 @@ [data-theme="contrast"] & { --usa-nav--primary-item-text: #{$bg-high-contrast}; - --usa-nav--primary-item-bg: #{$base-white}; - --usa-nav--primary-item-text-expanded: #{$btn-secondary-bg-high-contrast-hover}; + --usa-nav--primary-item-text-expanded: #{$base-white}; --usa-nav--primary-item-bg-expanded: #{$bg-high-contrast}; --usa-current-bg: #{$link-high-contrast-hover-blue}; @@ -366,13 +361,14 @@ @include u-float('none'); @include u-text-decoration('no-underline'); margin-inline-start: auto; - transform: translateY(-3.75rem); + transform: translateY(-3.95rem); cursor: pointer; background-color: transparent; color: var(--usa-nav--close); @include hover { @include u-text-decoration('underline'); + color: var(--usa-nav--close); } @include after { @@ -381,8 +377,8 @@ margin-inline-start: 0.5rem; height: 0.75rem; mask: url('../../img/svg/close.svg') no-repeat; + mask-size: contain; background-color: var(--usa-nav--close); - mask-size: 70%; } @include at-media-max('tablet-lg') {