Skip to content

Commit

Permalink
[refs nhsuk#662] Align pagination icon with text
Browse files Browse the repository at this point in the history
Vertically aligns the pagination icon with the pagination text, even
with large font sizes. This calculation was determined experimentally by
manually positioning the icons at a variety of font sizes, and succeeds
in appearing to vertically align the icon in the majority of cases, with
only very small font sizes looking slightly out of place. The removal of
`margin-top: 0` for `media-type: print` does not appear to affect the
output when printing.
  • Loading branch information
pufferfish101007 committed Feb 5, 2024
1 parent 27bdda6 commit 40a1a07
Showing 1 changed file with 2 additions and 2 deletions.
4 changes: 2 additions & 2 deletions packages/components/pagination/_pagination.scss
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@
* 2. Append the word 'page' after next and
* previous on print stylesheets to make it easier
* to understand in print context.
* 3. Vertically align the icon with the text.
*/

.nhsuk-pagination {
Expand Down Expand Up @@ -58,11 +59,10 @@

.nhsuk-icon {
position: absolute;
top: -2px;
top: calc(1.25em * 0.8px - 20px); /* [3] */

@include mq($media-type: print) {
color: $color_nhsuk-black;
margin-top: 0;
}
}

Expand Down

0 comments on commit 40a1a07

Please sign in to comment.