File tree Expand file tree Collapse file tree 1 file changed +25
-43
lines changed Expand file tree Collapse file tree 1 file changed +25
-43
lines changed Original file line number Diff line number Diff line change 1
1
// Use the no-list-style class in your theme if you want the basic style
2
2
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 ;
17
8
}
18
9
19
10
#{context-selector (' .blocks-container' , ' .is-root-container' )} {
23
14
font-size : var (--paragraph--font-size-default , $font-size-base );
24
15
line-height : var (--paragraph--line-height-default , $line-height-base );
25
16
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
+
26
29
ul ,
27
30
ol {
28
31
margin-top : var (--spacing--block-1 );
33
36
34
37
ul {
35
38
& :not ([class *= " is-style-" ]):not ([class *= " no-list-style" ]):not ([role = " list" ]) {
36
- list-style-type : none ;
37
-
38
39
li {
39
40
position : relative ;
40
- padding-left : 30px ;
41
41
margin-bottom : calc (.5 * var (--spacing--block-1 ));
42
+ list-style-type : disc ;
42
43
43
- @include rtl {
44
- padding-right : 30px ;
45
- padding-left : 0 ;
46
- }
47
-
48
- & ::before {
49
- @extend %bullet ;
44
+ & ::marker {
45
+ @extend %marker ;
50
46
}
51
47
}
52
48
64
60
65
61
li {
66
62
position : relative ;
67
- padding-left : 40px ;
68
63
margin-bottom : calc (.5 * var (--spacing--block-1 ));
69
64
counter-increment : section;
70
65
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 ;
86
68
content : counters (section , " " , decimal-leading-zero ) " " ;
87
69
88
70
@include rtl {
100
82
li {
101
83
counter-increment : subsection;
102
84
103
- & ::before {
85
+ & ::marker {
104
86
content : counters (subsection , " ." , lower-alpha ) " . " ;
105
87
}
106
88
}
114
96
li {
115
97
padding-top : 0 ;
116
98
117
- & ::before {
118
- @extend %bullet ;
99
+ & ::marker {
100
+ @extend %marker ;
119
101
transform : translateX (0 );
120
102
}
121
103
}
You can’t perform that action at this time.
0 commit comments