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

Jump to bottom

USWDS - Side navigation: Fix current color link color. #4163

Merged
merged 6 commits into from Apr 27, 2021
Merged

USWDS - Side navigation: Fix current color link color. #4163

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
452a0cc
Create test for sidenav current links and buttons.
mejiaj Apr 21, 2021
5201e3c
Only style basic links (not current or button).
mejiaj Apr 21, 2021
a0d62fe
Remove extra return.
mejiaj Apr 21, 2021
850e6ce
Merge branch 'develop' into jm-sidenav-current-color
thisisdano Apr 23, 2021
2c3b7e0
Use link color setting for sidenav highlight
thisisdano Apr 26, 2021
6d9e89f
Remove stray debug code
thisisdano Apr 26, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
50 changes: 50 additions & 0 deletions src/components/test/sidenav-button.njk
View file
Open in desktop
@@ -0,0 +1,50 @@
<div class="grid-container padding-x-2 tablet-padding-x-4 padding-y-4">
<h2>Incorrect text color on current items in sidenav</h2>
<p class="usa-intro">
Based on this <a href="https://github.com/uswds/uswds/issues/4073">issue</a>. Added buttons to make sure there are no regressions related to <a href="https://github.com/uswds/uswds/issues/3838">buttons</a>.
</p>
<nav aria-label="Secondary navigation">
<ul class="usa-sidenav">
<li class="usa-sidenav__item">
<a class="usa-button" href="javascript:void(0);">Parent button link</a>
</li>
<li class="usa-sidenav__item">
<a href="javascript:void(0);" class="usa-current">Current page</a>
<ul class="usa-sidenav__sublist">
<li class="usa-sidenav__item">
<a href="javascript:void(0);">Child link</a>
</li>
<li class="usa-sidenav__item">
<a href="javascript:void(0);" class="usa-current">Child link</a>
<ul class="usa-sidenav__sublist">
<li class="usa-sidenav__item">
<a href="javascript:void(0);">Grandchild link</a>
</li>
<li class="usa-sidenav__item">
<a href="javascript:void(0);">Grandchild link</a>
</li>
<li class="usa-sidenav__item">
<a href="javascript:void(0);" class="usa-current">Grandchild link</a>
</li>
<li class="usa-sidenav__item">
<a href="javascript:void(0);">Grandchild link</a>
</li>
</ul>
</li>
<li class="usa-sidenav__item">
<a href="javascript:void(0);">Child link</a>
</li>
<li class="usa-sidenav__item">
<button class="usa-button usa-button--accent-warm">Child button</button>
</li>
<li class="usa-sidenav__item">
<a href="javascript:void(0);">Child link</a>
</li>
</ul>
</li>
<li class="usa-sidenav__item">
<a href="javascript:void(0);">Parent link</a>
</li>
</ul>
</nav>
</div>
17 changes: 11 additions & 6 deletions src/stylesheets/core/mixins/_nav-list.scss
View file
Open in desktop
Expand Up @@ -19,16 +19,22 @@ $sidenav-level-4-inset: 8;
}

a:not(.usa-button) {
color: color("base-dark");
display: block;
padding: units(1) units($sidenav-level-1-inset);
text-decoration: none;

&:hover {
background-color: color("base-lightest");
color: color("primary");
text-decoration: none;
}
}

a:not(.usa-button):not(.usa-current) {
color: color("base-dark");

&:hover {
color: color($theme-link-color);
}

&:focus {
outline-offset: 0;
Expand All @@ -38,19 +44,19 @@ $sidenav-level-4-inset: 8;
.usa-current {
@include add-bar(
$theme-sidenav-current-border-width,
"primary",
$theme-link-color,
"left",
"pill",
0.5,
0.5
);
color: color("primary");
color: color($theme-link-color);
font-weight: font-weight("bold");

@include at-media("tablet") {
@include add-bar(
$theme-sidenav-current-border-width,
"primary",
$theme-link-color,
"left",
"pill",
0,
Expand Down Expand Up @@ -89,7 +95,6 @@ $sidenav-level-4-inset: 8;

// level 4+
& & & a:not(.usa-button) {
content: "foobar";
padding-left: units($sidenav-level-4-inset);
}
}