Fix misaligned icons #922
Open
Fix misaligned icons #922
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Ensures the back link chevron-left icon is vertically aligned with the text at all font sizes.
This ensures that the back breadcrumb chevron icon is vertically aligned with the text, even at large font sizes.
Ensures that the action link icon is vertically aligned with the text, even at large font sizes.
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.
Use `/ 10px` then `* 8px` rather than `* 0.8px` so that SASS doesn't error. Still functionally equivalent.
Vertically aligns the chevron icon with th 'more' text in the header navigation, when it is visible.
Ensures that radio buttons are vertically aligned with the label, even with larger font sizes.
Ensurees that the chekboxes/ticks are vertically aligned with the label text, even with large font sizes.
Esnures that tick/cross icon is vertically aligned with text, even at large font sizes.
Updates the regression equation for the do/don't tick cross, so that the backstop tests pass.
Uses a regression function to position the checkbox & tick, rather than always centering it in the middle of the paragraph, so as to pass the backstop tests.
Adjusts the pagination icon alignment regression calculation so that the backstop tests pass.
Uses a regression based on rem, so as to pass the backstop tests and retain some consistency with previous behaviour. This is the saame regression as for checkboxes.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
Resolves #662 + some additional related bugs
Checklist
Tested on chrome 120, edge 121 & firefox 122 (all on windows). Backstop tests all pass except for the ones that also fail on
main.