fix: list item formatting for lists with paragraphs (#1283)

This removes the fancy tick-mark next to unordered list items, which is
a little depressing, but fixes formatting for them when they contain
paragraphs (`<p>` elements). The tick-mark has been replaced with
a square mark. Both ordered and unordered lists have grown 1rem of left
padding to compensate for their position.

Considered using disclosure-closed as a similar triangle replacement,
but it's not regarded as something that should be used in production
(per MDN). Using a simple string is unsupported because it's only in
a CSS working draft, so a square is the least controversial option,
I think.

Closes #1282.
This commit is contained in:
Noel Cower 2019-12-15 21:55:32 -08:00 committed by Nicolas Giard
parent 243840c5eb
commit d407312caa

View File

@ -312,8 +312,8 @@
// --------------------------------- // ---------------------------------
ol, ul { ol, ul {
padding: 1rem 0 0 0; padding: 1rem 0 0 1rem;
list-style-position: inside; list-style-position: outside;
li > ul, li > ol { li > ul, li > ol {
padding-top: .5rem; padding-top: .5rem;
@ -435,14 +435,7 @@
} }
ul { ul {
list-style: none; list-style: square outside;
> li::before {
content: '\25b8';
color: mc('grey', '600');
display: inline-block;
width: 1.35rem;
}
} }
// --------------------------------- // ---------------------------------