Skip to content

Commit 1ea0172

Browse files
committed
fix list style with marker
1 parent a8da610 commit 1ea0172

File tree

1 file changed

+25
-43
lines changed

1 file changed

+25
-43
lines changed

src/scss/06-blocks/core/_list.scss

Lines changed: 25 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,10 @@
11
// Use the no-list-style class in your theme if you want the basic style
22

3-
%bullet {
4-
position: absolute;
5-
top: 9px;
6-
left: 0;
7-
width: 5px;
8-
height: 5px;
9-
content: "";
10-
background-color: $color-dark;
11-
border-radius: 100%;
12-
13-
@include rtl {
14-
right: -15px;
15-
left: inherit;
16-
}
3+
%marker {
4+
font-size: var(--paragraph--font-size-default, $font-size-base);
5+
font-weight: 400;
6+
line-height: var(--paragraph--line-height-default, $line-height-base);
7+
color: $color-dark;
178
}
189

1910
#{context-selector('.blocks-container', '.is-root-container')} {
@@ -23,6 +14,18 @@
2314
font-size: var(--paragraph--font-size-default, $font-size-base);
2415
line-height: var(--paragraph--line-height-default, $line-height-base);
2516

17+
li {
18+
padding-left: 15px;
19+
margin-left: 15px;
20+
21+
@include rtl {
22+
padding-right: 15px;
23+
padding-left: 0;
24+
margin-right: 15px;
25+
margin-left: 0;
26+
}
27+
}
28+
2629
ul,
2730
ol {
2831
margin-top: var(--spacing--block-1);
@@ -33,20 +36,13 @@
3336

3437
ul {
3538
&:not([class*="is-style-"]):not([class*="no-list-style"]):not([role="list"]) {
36-
list-style-type: none;
37-
3839
li {
3940
position: relative;
40-
padding-left: 30px;
4141
margin-bottom: calc(.5 * var(--spacing--block-1));
42+
list-style-type: disc;
4243

43-
@include rtl {
44-
padding-right: 30px;
45-
padding-left: 0;
46-
}
47-
48-
&::before {
49-
@extend %bullet;
44+
&::marker {
45+
@extend %marker;
5046
}
5147
}
5248

@@ -64,25 +60,11 @@
6460

6561
li {
6662
position: relative;
67-
padding-left: 40px;
6863
margin-bottom: calc(.5 * var(--spacing--block-1));
6964
counter-increment: section;
7065

71-
@include rtl {
72-
padding-right: 40px;
73-
padding-left: 0;
74-
}
75-
76-
&::before {
77-
position: absolute;
78-
top: 0;
79-
left: 0;
80-
font-size: var(--paragraph--font-size-default, $font-size-base);
81-
font-weight: 400;
82-
line-height: var(--paragraph--line-height-default, $line-height-base);
83-
color: $color-dark;
84-
text-align: center;
85-
letter-spacing: -.06em;
66+
&::marker {
67+
@extend %marker;
8668
content: counters(section, "", decimal-leading-zero) " ";
8769

8870
@include rtl {
@@ -100,7 +82,7 @@
10082
li {
10183
counter-increment: subsection;
10284

103-
&::before {
85+
&::marker {
10486
content: counters(subsection, ".", lower-alpha) ". ";
10587
}
10688
}
@@ -114,8 +96,8 @@
11496
li {
11597
padding-top: 0;
11698

117-
&::before {
118-
@extend %bullet;
99+
&::marker {
100+
@extend %marker;
119101
transform: translateX(0);
120102
}
121103
}

0 commit comments

Comments
 (0)