Skip to content

Commit

Permalink
Use new GOV.UK Frontend link styles
Browse files Browse the repository at this point in the history
GOV.UK Frontend v3.12.0 comes with new (optional) link styles that are
designed to be easier to read and to have a clearer hover state [[1]].

This commit opts-in to the new link styles for the tech-docs-gem
stylesheet, and refactors the table of contents navigation and search
results links to use new the new link style mixins [[2]] so that they
are styled consistently with other links.

Note that this commit makes a small design change; search result links
are now underlined when not hovered.

[[1]]: https://github.com/alphagov/govuk-frontend/blob/main/CHANGELOG.md#links-are-easier-to-read-and-have-a-clearer-hover-state-opt-in
[[2]]: https://frontend.design-system.service.gov.uk/sass-api-reference/#helpers-links
  • Loading branch information
lfdebrux committed May 17, 2021
1 parent e222a88 commit b074563
Show file tree
Hide file tree
Showing 3 changed files with 15 additions and 26 deletions.
1 change: 1 addition & 0 deletions lib/assets/stylesheets/_govuk_tech_docs.scss
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
$govuk-assets-path: "/assets/govuk/assets/";

// Include only the bits of GOV.UK Frontend we need
$govuk-new-link-styles: true;
@import "govuk/settings/all";
@import "govuk/tools/all";
@import "govuk/helpers/all";
Expand Down
18 changes: 3 additions & 15 deletions lib/assets/stylesheets/modules/_search.scss
Original file line number Diff line number Diff line change
Expand Up @@ -87,21 +87,9 @@ html.has-search-results-open {
min-height: auto;
}

a:link, a:visited {
text-decoration: none;
color: $govuk-link-colour;
}

a:hover {
text-decoration: underline;

&:focus {
text-decoration: none;
}
}
a:focus {
outline: none;
@include govuk-focused-text;
a {
@include govuk-link-common;
@include govuk-link-style-no-visited-state;
}
}
.search-results__inner {
Expand Down
22 changes: 11 additions & 11 deletions lib/assets/stylesheets/modules/_toc.scss
Original file line number Diff line number Diff line change
Expand Up @@ -15,14 +15,18 @@

&__list {
li {
a {
@include govuk-link-decoration;
@include govuk-link-style-no-visited-state;
@include govuk-link-style-no-underline;
}

a:link, a:visited {
display: block;
position: relative;
padding: 8px govuk-spacing(6) 8px govuk-spacing(2);
margin: 0 -1 * govuk-spacing(3);
border-left: 5px solid transparent;
text-decoration: none;
color: $govuk-link-colour;

@include govuk-media-query(tablet) {
&.toc-link--in-view {
Expand All @@ -33,21 +37,17 @@
}
}

a:hover {
@include govuk-link-hover-decoration;
}

a:focus {
outline: none;
text-decoration: none;

span {
@include govuk-focused-text;
}
}

a:hover {
text-decoration: underline;

&:focus {
text-decoration: none;
}
}
}

// Top level
Expand Down

0 comments on commit b074563

Please sign in to comment.