Skip to content

Commit d258056

Browse files
committed
fix gutenberg list final
1 parent 1ea0172 commit d258056

File tree

2 files changed

+66
-57
lines changed

2 files changed

+66
-57
lines changed

src/scss/03-base/_variables-css.scss

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,10 @@
5858
*/
5959
--wp-admin-bar-height: var(--wp-admin--admin-bar--height, 0rem);
6060

61+
body:not(.admin-bar) {
62+
--wp-admin-bar-height: 0rem; // for wp admin bar hider extension
63+
}
64+
6165
/*
6266
* Alignments breakpoints
6367
*/

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

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

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);
3+
%marker-ol-default {
4+
font-size: 16px;
5+
font-weight: 700;
6+
line-height: 1.3;
77
color: $color-dark;
88
}
99

10+
%marker-ul-default {
11+
position: absolute;
12+
top: 7px;
13+
left: 0;
14+
width: 6px;
15+
height: 6px;
16+
content: "";
17+
background-color: $color-dark;
18+
border-radius: 100%;
19+
20+
@include rtl {
21+
right: -15px;
22+
left: inherit;
23+
}
24+
}
25+
1026
#{context-selector('.blocks-container', '.is-root-container')} {
27+
--offset-item: 30px;
28+
--vertical-spaging-item: 16px;
29+
1130
ul,
1231
ol {
13-
&:not([class*="is-style-"]):not([class*="no-list-style"]):not([role="list"]) {
32+
&:not([class*="no-list-style"]):not([role="list"]):not(.chosen-choices):not(.chosen-results) {
1433
font-size: var(--paragraph--font-size-default, $font-size-base);
1534
line-height: var(--paragraph--line-height-default, $line-height-base);
1635

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-
2936
ul,
3037
ol {
31-
margin-top: var(--spacing--block-1);
32-
margin-bottom: var(--spacing--block-1);
38+
margin-top: var(--vertical-spaging-item);
39+
margin-bottom: var(--vertical-spaging-item);
3340
}
3441
}
3542
}
3643

3744
ul {
38-
&:not([class*="is-style-"]):not([class*="no-list-style"]):not([role="list"]) {
45+
&:not([class*="no-list-style"]):not([role="list"]):not(.chosen-choices):not(.chosen-results) {
46+
list-style-type: none;
47+
3948
li {
4049
position: relative;
41-
margin-bottom: calc(.5 * var(--spacing--block-1));
42-
list-style-type: disc;
50+
padding-left: var(--offset-item);
51+
margin-bottom: var(--vertical-spaging-item);
4352

44-
&::marker {
45-
@extend %marker;
53+
@include rtl {
54+
padding-right: var(--offset-item);
55+
padding-left: 0;
56+
}
57+
58+
&::before {
59+
@extend %marker-ul-default;
4660
}
4761
}
4862

4963
ul {
50-
margin-top: calc(.5 * var(--spacing--block-1));
51-
margin-bottom: calc(.5 * var(--spacing--block-1));
64+
margin-top: var(--vertical-spaging-item);
65+
margin-bottom: var(--vertical-spaging-item);
5266
}
5367
}
5468
}
5569

5670
ol {
57-
&:not([class*="is-style-"]):not([class*="no-list-style"]):not([role="list"]) {
58-
list-style: none;
59-
counter-reset: section;
71+
padding-left: 10px;
6072

61-
li {
62-
position: relative;
63-
margin-bottom: calc(.5 * var(--spacing--block-1));
64-
counter-increment: section;
73+
&:not([class*="no-list-style"]):not([role="list"]) {
74+
> li {
75+
padding-left: calc(var(--offset-item) * .5);
76+
margin-bottom: var(--vertical-spaging-item);
77+
margin-left: calc(var(--offset-item) * .5);
6578

66-
&::marker {
67-
@extend %marker;
68-
content: counters(section, "", decimal-leading-zero) " ";
79+
@include rtl {
80+
padding-right: calc(var(--offset-item) * .5);
81+
padding-left: 0;
82+
margin-right: calc(var(--offset-item) * .5);
83+
margin-left: 0;
84+
}
85+
}
6986

70-
@include rtl {
71-
right: 0;
72-
left: inherit;
73-
transform: translateX(100%);
74-
}
87+
li {
88+
&::marker {
89+
@extend %marker-ol-default;
7590
}
7691

7792
ol {
78-
margin-top: calc(.5 * var(--spacing--block-1));
79-
margin-bottom: calc(.5 * var(--spacing--block-1));
80-
counter-reset: subsection;
81-
82-
li {
83-
counter-increment: subsection;
84-
85-
&::marker {
86-
content: counters(subsection, ".", lower-alpha) ". ";
87-
}
88-
}
93+
margin-top: var(--vertical-spaging-item);
94+
margin-bottom: var(--vertical-spaging-item);
8995
}
9096

9197
ul {
92-
margin-top: calc(.5 * var(--spacing--block-1));
93-
margin-bottom: calc(.5 * var(--spacing--block-1));
94-
counter-reset: section;
98+
margin-top: var(--vertical-spaging-item);
99+
margin-bottom: var(--vertical-spaging-item);
95100

96101
li {
97102
padding-top: 0;
98103

99-
&::marker {
100-
@extend %marker;
104+
&::before {
105+
@extend %marker-ul-default;
101106
transform: translateX(0);
102107
}
103108
}

0 commit comments

Comments
 (0)