[Lists]: Simplify lists to use browser defaults#1375
Conversation
|
|
||
| @mixin unstyled-list() { | ||
| display: block; | ||
| @include margin(0 null); |
There was a problem hiding this comment.
What's the reason for this? I haven't seen this pattern before.
There was a problem hiding this comment.
We had margin: 0 before (https://github.com/18F/web-design-standards/pull/1375/files#diff-fced6c74fbf3140d02e92fd710e888eeL31), when actually the only margins added in the list was top and bottom. We do not need to declare margin=0 on the left and right.
There was a problem hiding this comment.
Note: it's not undoing our margins (we did not add any margins for uls), but webkits margins. You'll find:
-webkit-margin-before: 1em;
-webkit-margin-after: 1em;
applied to ul in the user agent styles. Which makes me think, should we add these in to be more explicit?
There was a problem hiding this comment.
So this rule will be expanded to:
margin-bottom: 0;
margin-top: 0;
I definitely don't think it's a good idea to mess with the webkit specific margin before rules. Those should be overridden with regular margin rules.
There was a problem hiding this comment.
Right, I wasn't suggesting adding -webkit-margin-before: 1em; ourselves. I meant should we add margin-bottom: 1em; ourselves, since webkit is already doing it + to make it more consistent across browsers. What do you think?
There was a problem hiding this comment.
Done in 46a01a7. This will make it more consistent across browsers and match our paragraph text margins.
Description
Simplifies lists to use browser defaults, and not use on pseudo selectors.
Resolves: #1091.
Dependent on #1374 for sidenav to look correct.
Notable change is that we are switching styles, and bullets will look slightly larger depending on your browser default. Below is Chrome.
Screenshots
Before (custom list and bullets):
After (Chrome browser default):
Before you hit Submit, make sure you’ve done whichever of these applies to you:
npm testand make sure the tests for the files you have changed have passed.