<div>
<ul>
<li>Unordered List item</li>
<li>Unordered List item
<ul>
<li>Nested unordered list item</li>
<li>Nested unordered list item
<ul>
<li>Another Nested unordered list item</li>
</ul>
</li>
</ul>
</li>
<li>Unordered List item
<br>Unordered List item</li>
</ul>
<ul class="bold-list">
<li>Bullet List Bold Item</li>
<li>Bullet List Bold Item</li>
</ul>
<ul class="checklist">
<li>Checklist Item</li>
<li>Checklist Item</li>
</ul>
<ol>
<li>Ordered List item</li>
<li>Ordered List item</li>
<li>Ordered List item</li>
</ol>
<dl><dt>Description List item term</dt>
<dd>Description List item description</dd><dt>Description List item term</dt>
<dd>Description List item description 1</dd>
<dd>Description List item description 2</dd>
</dl>
</div>
<div>
<ul>
<li>
Unordered List item
</li>
<li>
Unordered List item
<ul>
<li>
Nested unordered list item
</li>
<li>
Nested unordered list item
<ul>
<li>
Another Nested unordered list item
</li>
</ul>
</li>
</ul>
</li>
<li>
Unordered List item <br />
Unordered List item
</li>
</ul>
<ul class="bold-list">
<li>
Bullet List Bold Item
</li>
<li>
Bullet List Bold Item
</li>
</ul>
<ul class="checklist">
<li>
Checklist Item
</li>
<li>
Checklist Item
</li>
</ul>
<ol>
<li>
Ordered List item
</li>
<li>
Ordered List item
</li>
<li>
Ordered List item
</li>
</ol>
<dl>
<dt>Description List item term</dt>
<dd>Description List item description</dd>
<dt>Description List item term</dt>
<dd>Description List item description 1</dd>
<dd>Description List item description 2</dd>
</dl>
</div>
{
"text": "Listen"
}
// ---- List related variables--------------------------------------------------
$bullet-size: $spacer-xs; // ~9px
$bullet-offset: $spacer-sm; // ~16px
$list-indent: $bullet-offset + $bullet-size;
$number-space: $spacer-md;
// ---- Unordered Lists --------------------------------------------------------
//
.list-unstyled {
@extend %list-unstyled;
}
// ---- Unordered Lists --------------------------------------------------------
//
// Scope element based selector to elements, that do not carry a
// class attribute, to prevent reverting styles for all non-default lists.
//
// sass-lint:disable force-pseudo-nesting
ul:not([class]),
.bold-list {
@extend %unsorted-list;
@extend %heading-font-regular;
li {
padding-left: $list-indent;
&::before {
position: absolute;
top: ($bullet-list-line-height * $bullet-list-font-size) / 2;
left: 0;
margin-top: -($bullet-size / 2);
border-radius: 50%;
background: $bullet-list-color;
width: $bullet-size;
height: $bullet-size;
content: '';
}
}
ul {
// Nested lists need diffrent vertical spacings
// to blend into the outer list.
margin-top: $container-spacer-x-sm;
&,
li > ul > li {
margin-bottom: 0;
}
// Change bullet appeareance in nested contexts
li::before {
border: 1px solid $bullet-list-color;
background: $bullet-list-bg-color;
}
}
}
// ---- Bold Bullet Lists ----------------------------------------------------------
//
.bold-list {
@extend %heading-font-bold;
}
// ---- Checked Lists ----------------------------------------------------------
//
.checklist {
@extend %unsorted-list;
@extend %heading-font-bold;
li {
padding-left: $list-indent;
&::before {
@extend %icon;
position: absolute;
top: .45em;
left: 0;
color: $bullet-list-color;
content: $icon-check;
// sass-lint:disable no-vendor-prefixes
-webkit-text-stroke-width: 2px;
}
}
}
// ---- Ordered Lists ----------------------------------------------------------
//
// Generated numbers from default ordered lists can't be styled directly
// yet. Therefore we disable auto-numbering and use a counter to increment
// a number and insert it via :before content.
//
// Scope element based selector to elements, that do not carry a
// class attribute, to prevent reverting styles for all non-default lists.
//
// sass-lint:disable force-pseudo-nesting
ol:not([class]) {
@extend %heading-font-regular;
@include list-unstyled;
margin-bottom: $content-spacer-base;
line-height: $ordered-list-line-height-small;
font-size: $ordered-list-font-size-small;
counter-reset: number;
li {
position: relative;
margin-bottom: $spacer-xs;
padding-left: $number-space;
&::before {
@extend %heading-font-bold;
position: absolute;
top: -.02em;
left: 0;
width: $number-space;
line-height: $ordered-list-counter-line-height;
font-size: $ordered-list-counter-font-size-small;
content: counter(number);
counter-increment: number;
}
}
}
// ---- Definition Lists -------------------------------------------------------
//
// adapted from: /components/detail/talk-page
// see lib/styles/tools/text
dl:not([class]) {
@extend %definition-list;
}
find a solution to make it work without a div wrapper for jsx