Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

VOTE-2240: Main navigation menu styles - high contrast #822

Merged
merged 19 commits into from
Jul 20, 2024
Merged

VOTE-2240: Main navigation menu styles - high contrast #822

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
19 commits
Select commit Hold shift + click to select a range
514fc5a
VOTE-2240: add high contrast variables for main nav butons - desktop
mlloydbixal Jul 2, 2024
e6bcb1e
VOTE-2240: add high contrast vairables for submenu - desktop
mlloydbixal Jul 2, 2024
3cc52ab
mobile high contrast variables
mlloydbixal Jul 5, 2024
c75072d
fix variable
mlloydbixal Jul 5, 2024
78330e5
use mask for mobile icon
mlloydbixal Jul 7, 2024
32b4b6c
remove important
mlloydbixal Jul 9, 2024
7a0d5d9
desktop revisions
mlloydbixal Jul 11, 2024
cb95ee3
revisions mobile
mlloydbixal Jul 11, 2024
66f0a44
rm important
mlloydbixal Jul 11, 2024
a577038
fix variable
mlloydbixal Jul 11, 2024
22a3377
rm important again
mlloydbixal Jul 12, 2024
a2748ed
Merge remote-tracking branch 'origin/dev' into feature/VOTE-2240/px-h…
rayestrada Jul 15, 2024
07a99aa
Re-add variable
rayestrada Jul 15, 2024
d372cca
Hide mobile menu button when there is no menu
rayestrada Jul 15, 2024
f7125f6
Merge branch 'dev' into feature/VOTE-2240/px-hc-nav-menu
mlloydbixal Jul 18, 2024
4c898ff
Merge branch 'feature/VOTE-2240/px-hc-nav-menu' of github.com:usagov/…
mlloydbixal Jul 18, 2024
622b090
fix specificity of selectors and adjust high contrast variables
mlloydbixal Jul 18, 2024
5ba795d
Merge remote-tracking branch 'origin/dev' into feature/VOTE-2240/px-h…
rayestrada Jul 19, 2024
6aab5d9
refinements
rayestrada Jul 20, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions web/themes/custom/votegov/src/sass/_variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
12 changes: 9 additions & 3 deletions web/themes/custom/votegov/src/sass/uswds-overrides/usa-header.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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');
Expand All @@ -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');
Expand All @@ -44,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"] {
Expand Down
107 changes: 86 additions & 21 deletions web/themes/custom/votegov/src/sass/uswds-overrides/usa-nav.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,14 @@

.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};

[data-theme="contrast"] & {
--usa-nav--primary-item-text: #{$link-high-contrast};
--usa-nav--primary-item-bg: #{$bg-high-contrast-light-cool};
}

border-top-color: $bg-light-medium;

&:first-child {
Expand All @@ -46,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 {
Expand All @@ -65,23 +73,35 @@
}

@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');
@include u-padding-x(2);
@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 {
Expand All @@ -100,26 +120,52 @@
@include after {
@include u-left(0);
@include u-right(0);
background-color: $ac-warm;
background-color: var(--usa-current-bg);
}
}
}
}
}

.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;
}

@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 {
@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};
}
}

@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 {
opacity: 0.6;
}
Expand All @@ -140,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);
}
}
}
Expand All @@ -158,7 +205,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) !important;
rayestrada marked this conversation as resolved.
Show resolved Hide resolved

@include hover {
color: var(--usa-nav--submenu-item-text-hover) !important;
}
}
}
}
Expand All @@ -182,20 +233,27 @@
}

.usa-nav__link--parent {
--usa-nav--parent-after-color: #{$base-white};

[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 {
@include u-width(2);
@include u-display('inline-block');
margin-inline-start: 0.5rem;
height: 0.75rem;
background-color: $base-dark;
mask: url('../../img/svg/arrow-white.svg') no-repeat;
mask-size: contain;

@include at-media('tablet-lg') {
background-color: $base-white;
}
}
}

Expand All @@ -204,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');
Expand All @@ -218,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');
Expand All @@ -229,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') {
Expand Down