Skip to content

Commit

Permalink
Improve pagination print styles
Browse files Browse the repository at this point in the history
By default `.govuk-link` print styles will output the `href` attribute
in brackets after the link. For example: "Home (/homepage)".

This is done with the `::after` pseudo selector.
So when this was styled to increase the touch area of the pagination link
it resulted in the bracketed information overlapping the component in
a difficult to read way.

By only applying this touch area improvement in the `screen` media context
we avoid overwriting this inherited print style and allow the default
`.govuk-link` behaviour to apply as usual.
  • Loading branch information
NickColley committed Aug 19, 2022
1 parent 25ffbc9 commit f3ef6e9
Showing 1 changed file with 10 additions and 7 deletions.
17 changes: 10 additions & 7 deletions src/govuk/components/pagination/_index.scss
Original file line number Diff line number Diff line change
Expand Up @@ -106,13 +106,16 @@
display: block;
min-width: govuk-spacing(3);

&:after {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
// Increase the touch area for the link to the parent element.
@media screen {
&:after {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
}

// Add link hover decoration to prev/next text if no label present on prev/next only mode
Expand Down

0 comments on commit f3ef6e9

Please sign in to comment.