|
1 | 1 | // Use the no-list-style class in your theme if you want the basic style
|
2 | 2 |
|
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; |
7 | 7 | color: $color-dark;
|
8 | 8 | }
|
9 | 9 |
|
| 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 | + |
10 | 26 | #{context-selector('.blocks-container', '.is-root-container')} {
|
| 27 | + --offset-item: 30px; |
| 28 | + --vertical-spaging-item: 16px; |
| 29 | + |
11 | 30 | ul,
|
12 | 31 | 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) { |
14 | 33 | font-size: var(--paragraph--font-size-default, $font-size-base);
|
15 | 34 | line-height: var(--paragraph--line-height-default, $line-height-base);
|
16 | 35 |
|
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 |
| - |
29 | 36 | ul,
|
30 | 37 | 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); |
33 | 40 | }
|
34 | 41 | }
|
35 | 42 | }
|
36 | 43 |
|
37 | 44 | 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 | + |
39 | 48 | li {
|
40 | 49 | 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); |
43 | 52 |
|
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; |
46 | 60 | }
|
47 | 61 | }
|
48 | 62 |
|
49 | 63 | 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); |
52 | 66 | }
|
53 | 67 | }
|
54 | 68 | }
|
55 | 69 |
|
56 | 70 | 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; |
60 | 72 |
|
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); |
65 | 78 |
|
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 | + } |
69 | 86 |
|
70 |
| - @include rtl { |
71 |
| - right: 0; |
72 |
| - left: inherit; |
73 |
| - transform: translateX(100%); |
74 |
| - } |
| 87 | + li { |
| 88 | + &::marker { |
| 89 | + @extend %marker-ol-default; |
75 | 90 | }
|
76 | 91 |
|
77 | 92 | 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); |
89 | 95 | }
|
90 | 96 |
|
91 | 97 | 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); |
95 | 100 |
|
96 | 101 | li {
|
97 | 102 | padding-top: 0;
|
98 | 103 |
|
99 |
| - &::marker { |
100 |
| - @extend %marker; |
| 104 | + &::before { |
| 105 | + @extend %marker-ul-default; |
101 | 106 | transform: translateX(0);
|
102 | 107 | }
|
103 | 108 | }
|
|
0 commit comments