Add 5px bottom margin to bullet-less list items #1078
Merged
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
On small screens list items have no bottom margin (with a 5px bottom margin being applied at tablet and above) When the govuk-list class is applied on it's own without any modifier, the <li>'s appear to run into each other on mobile, as the spacing between the list items is the same as the spacing between each line. (When a bullet or number modifier is added e.g. class="govuk-list govuk-list--bullet" the bullet or number indicates the start of a new list item, so the spacing does not need to be adjusted in that case.) This change applies the spacing to the govuk-list class for all breakpoints, then adjusts the behaviour when bullet or number modifiers are added. Co-authored-by: David House <[email protected]>
govuk-design-system-ci
temporarily deployed
to
govuk-frontend-review-pr-1078
|
This is basically Dave's suggested implementation from #1069, so I've added him as a co-author – but we didn't actually pair on this work. |
NickColley
approved these changes
Nov 22, 2018
dashouse
approved these changes
Nov 26, 2018
Merged
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.
On small screens list items have no bottom margin (with a 5px bottom margin being applied at tablet and above)
When the govuk-list class is applied on it's own without any modifier, the list items appear to run into each other on mobile, as the spacing between the list items is the same as the spacing between each line.
(When a bullet or number modifier is added e.g. class="govuk-list govuk-list--bullet" the bullet or number indicates the start of a new list item, so the spacing does not need to be adjusted in that case.)
This change applies the spacing to the govuk-list class for all breakpoints, then adjusts the behaviour when bullet or number modifiers are added.
Closes #1069
https://trello.com/c/pUKbZTbi/1629-add-bottom-margin-to-non-bulleted-list-items