@total_onion/onion-library 1.0.85 → 1.0.87

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/components/component-content-box-v3/group_686b8a4f1fe5d.json +1 -60
  2. package/components/component-content-container-settings-v3/content-container-settings-v3.scss +13 -13
  3. package/components/fields-core-critical-v3/core-critical-v3.scss +1 -0
  4. package/components/fields-core-typography-v3/core-typography-v3.scss +611 -609
  5. package/components/fields-core-wordpress-block-editor-preview-v3/core-wordpress-block-editor-preview-v3.scss +11 -7
  6. package/components/fields-typography-settings-v3/group_6876149264002.json +6177 -0
  7. package/package.json +1 -1
package/components/fields-core-typography-v3/core-typography-v3.scss CHANGED
@@ -4,649 +4,651 @@
4
4
  @use 'Assets/scss/theme/breakpoints';
5
5
  @use 'sass:math';
6
6
 
7
- /* Box sizing rules */
8
- *,
9
- *::before,
10
- *::after {
11
- box-sizing: border-box;
12
- }
13
-
14
- //***** TYPOGRAPHY *****\\
15
- body {
16
- @include core-typography-mixins-v3.fontSecondary();
17
- }
7
+ @mixin core-typography-v3() {
8
+ /* Box sizing rules */
9
+ *,
10
+ *::before,
11
+ *::after {
12
+ box-sizing: border-box;
13
+ }
18
14
 
19
- h1,
20
- h2,
21
- h3,
22
- h4,
23
- h5,
24
- h6 {
25
- margin: 0; //reset default margin
26
- font-weight: unset; //reset default font weight
27
- margin-top: unset;
28
- @include core-typography-mixins-v3.fontPrimary();
29
- }
30
- .override-element-styles {
31
- h1,
32
- h2,
33
- h3,
34
- h4,
35
- h5,
36
- h6 {
37
- font-size: 0;
15
+ //***** TYPOGRAPHY *****\\
16
+ body {
17
+ @include core-typography-mixins-v3.fontSecondary();
38
18
  }
39
- }
40
19
 
41
- .standard-content-box-wysiwyg-editor {
42
20
  h1,
43
21
  h2,
44
22
  h3,
45
23
  h4,
46
24
  h5,
47
25
  h6 {
48
- margin-bottom: var(--heading-block-spacing);
26
+ margin: 0; //reset default margin
27
+ font-weight: unset; //reset default font weight
28
+ margin-top: unset;
29
+ @include core-typography-mixins-v3.fontPrimary();
30
+ }
31
+ .override-element-styles {
32
+ h1,
33
+ h2,
34
+ h3,
35
+ h4,
36
+ h5,
37
+ h6 {
38
+ font-size: 0;
39
+ }
40
+ }
41
+
42
+ .standard-content-box-wysiwyg-editor {
43
+ h1,
44
+ h2,
45
+ h3,
46
+ h4,
47
+ h5,
48
+ h6 {
49
+ margin-bottom: var(--heading-block-spacing);
50
+
51
+ &:last-child {
52
+ margin-bottom: 0;
53
+ }
54
+ }
55
+ p {
56
+ margin-bottom: var(--paragraph-block-spacing);
57
+
58
+ &:last-child {
59
+ margin-bottom: 0;
60
+ }
61
+ }
62
+ }
63
+
64
+ // // h1 {
65
+ // // @include core-mixins-v3.h1();
66
+
67
+ // // &:has(.font-tertiary) {
68
+ // // line-height: calc(
69
+ // // var(--h1-line-height) *
70
+ // // var(--global-line-height-multiplier-tertiary)
71
+ // // );
72
+ // // }
73
+ // // }
74
+
75
+ // // h2 {
76
+ // // @include core-mixins-v3.h2();
77
+
78
+ // // &:has(.font-tertiary) {
79
+ // // line-height: calc(
80
+ // // var(--h2-line-height) *
81
+ // // var(--global-line-height-multiplier-tertiary)
82
+ // // );
83
+ // // }
84
+ // // }
85
+
86
+ // // h3 {
87
+ // // @include core-mixins-v3.h3();
88
+
89
+ // // &:has(.font-tertiary) {
90
+ // // line-height: calc(
91
+ // // var(--h3-line-height) *
92
+ // // var(--global-line-height-multiplier-tertiary)
93
+ // // );
94
+ // // }
95
+ // // }
96
+
97
+ // // h4 {
98
+ // // @include core-mixins-v3.h4();
99
+
100
+ // // &:has(.font-tertiary) {
101
+ // // line-height: calc(
102
+ // // var(--h4-line-height) *
103
+ // // var(--global-line-height-multiplier-tertiary)
104
+ // // );
105
+ // // }
106
+ // // }
107
+
108
+ // // h5 {
109
+ // // @include core-mixins-v3.h5();
110
+
111
+ // // &:has(.font-tertiary) {
112
+ // // line-height: calc(
113
+ // // var(--h5-line-height) *
114
+ // // var(--global-line-height-multiplier-tertiary)
115
+ // // );
116
+ // // }
117
+ // // }
118
+
119
+ // // h6 {
120
+ // // @include core-mixins-v3.h6();
121
+
122
+ // // &:has(.font-tertiary) {
123
+ // // line-height: calc(
124
+ // // var(--h6-line-height) *
125
+ // // var(--global-line-height-multiplier-tertiary)
126
+ // // );
127
+ // // }
128
+ // // }
129
+
130
+ // // .sh1-sizing {
131
+ // // @include core-mixins-v3.sh1();
132
+
133
+ // // &:has(.font-tertiary) {
134
+ // // line-height: calc(
135
+ // // var(--sh1-line-height) *
136
+ // // var(--global-line-height-multiplier-tertiary)
137
+ // // );
138
+ // // }
139
+ // // }
140
+
141
+ // // .sh2-sizing {
142
+ // // @include core-mixins-v3.sh2();
143
+
144
+ // // &:has(.font-tertiary) {
145
+ // // line-height: calc(
146
+ // // var(--h2-line-height) *
147
+ // // var(--global-line-height-multiplier-tertiary)
148
+ // // );
149
+ // // }
150
+ // // }
151
+
152
+ // // .sh3-sizing {
153
+ // // @include core-mixins-v3.sh3();
154
+
155
+ // // &:has(.font-tertiary) {
156
+ // // line-height: calc(
157
+ // // var(--sh3-line-height) *
158
+ // // var(--global-line-height-multiplier-tertiary)
159
+ // // );
160
+ // // }
161
+ // // }
162
+
163
+ // // .sh4-sizing {
164
+ // // @include core-mixins-v3.sh4();
165
+
166
+ // // &:has(.font-tertiary) {
167
+ // // line-height: calc(
168
+ // // var(--sh4-line-height) *
169
+ // // var(--global-line-height-multiplier-tertiary)
170
+ // // );
171
+ // // }
172
+ // // }
173
+
174
+ // // .sh5-sizing {
175
+ // // @include core-mixins-v3.sh5();
176
+
177
+ // // &:has(.font-tertiary) {
178
+ // // line-height: calc(
179
+ // // var(--sh5-line-height) *
180
+ // // var(--global-line-height-multiplier-tertiary)
181
+ // // );
182
+ // // }
183
+ // // }
184
+
185
+ // // .sh6-sizing {
186
+ // // @include core-mixins-v3.sh6();
187
+
188
+ // // &:has(.font-tertiary) {
189
+ // // line-height: calc(
190
+ // // var(--sh6-line-height) *
191
+ // // var(--global-line-height-multiplier-tertiary)
192
+ // // );
193
+ // // }
194
+ // // }
49
195
 
50
- &:last-child {
51
- margin-bottom: 0;
52
- }
53
- }
54
196
  p {
55
- margin-bottom: var(--paragraph-block-spacing);
56
-
57
- &:last-child {
58
- margin-bottom: 0;
59
- }
197
+ margin: 0; //reset default margin
198
+ @include core-typography-mixins-v3.p();
60
199
  }
61
- }
62
200
 
63
- // // h1 {
64
- // // @include core-mixins-v3.h1();
65
-
66
- // // &:has(.font-tertiary) {
67
- // // line-height: calc(
68
- // // var(--h1-line-height) *
69
- // // var(--global-line-height-multiplier-tertiary)
70
- // // );
71
- // // }
72
- // // }
73
-
74
- // // h2 {
75
- // // @include core-mixins-v3.h2();
76
-
77
- // // &:has(.font-tertiary) {
78
- // // line-height: calc(
79
- // // var(--h2-line-height) *
80
- // // var(--global-line-height-multiplier-tertiary)
81
- // // );
82
- // // }
83
- // // }
84
-
85
- // // h3 {
86
- // // @include core-mixins-v3.h3();
87
-
88
- // // &:has(.font-tertiary) {
89
- // // line-height: calc(
90
- // // var(--h3-line-height) *
91
- // // var(--global-line-height-multiplier-tertiary)
92
- // // );
93
- // // }
94
- // // }
95
-
96
- // // h4 {
97
- // // @include core-mixins-v3.h4();
98
-
99
- // // &:has(.font-tertiary) {
100
- // // line-height: calc(
101
- // // var(--h4-line-height) *
102
- // // var(--global-line-height-multiplier-tertiary)
103
- // // );
104
- // // }
105
- // // }
106
-
107
- // // h5 {
108
- // // @include core-mixins-v3.h5();
109
-
110
- // // &:has(.font-tertiary) {
111
- // // line-height: calc(
112
- // // var(--h5-line-height) *
113
- // // var(--global-line-height-multiplier-tertiary)
114
- // // );
115
- // // }
116
- // // }
117
-
118
- // // h6 {
119
- // // @include core-mixins-v3.h6();
120
-
121
- // // &:has(.font-tertiary) {
122
- // // line-height: calc(
123
- // // var(--h6-line-height) *
124
- // // var(--global-line-height-multiplier-tertiary)
125
- // // );
126
- // // }
127
- // // }
128
-
129
- // // .sh1-sizing {
130
- // // @include core-mixins-v3.sh1();
131
-
132
- // // &:has(.font-tertiary) {
133
- // // line-height: calc(
134
- // // var(--sh1-line-height) *
135
- // // var(--global-line-height-multiplier-tertiary)
136
- // // );
137
- // // }
138
- // // }
139
-
140
- // // .sh2-sizing {
141
- // // @include core-mixins-v3.sh2();
142
-
143
- // // &:has(.font-tertiary) {
144
- // // line-height: calc(
145
- // // var(--h2-line-height) *
146
- // // var(--global-line-height-multiplier-tertiary)
147
- // // );
148
- // // }
149
- // // }
150
-
151
- // // .sh3-sizing {
152
- // // @include core-mixins-v3.sh3();
153
-
154
- // // &:has(.font-tertiary) {
155
- // // line-height: calc(
156
- // // var(--sh3-line-height) *
157
- // // var(--global-line-height-multiplier-tertiary)
158
- // // );
159
- // // }
160
- // // }
161
-
162
- // // .sh4-sizing {
163
- // // @include core-mixins-v3.sh4();
164
-
165
- // // &:has(.font-tertiary) {
166
- // // line-height: calc(
167
- // // var(--sh4-line-height) *
168
- // // var(--global-line-height-multiplier-tertiary)
169
- // // );
170
- // // }
171
- // // }
172
-
173
- // // .sh5-sizing {
174
- // // @include core-mixins-v3.sh5();
175
-
176
- // // &:has(.font-tertiary) {
177
- // // line-height: calc(
178
- // // var(--sh5-line-height) *
179
- // // var(--global-line-height-multiplier-tertiary)
180
- // // );
181
- // // }
182
- // // }
183
-
184
- // // .sh6-sizing {
185
- // // @include core-mixins-v3.sh6();
186
-
187
- // // &:has(.font-tertiary) {
188
- // // line-height: calc(
189
- // // var(--sh6-line-height) *
190
- // // var(--global-line-height-multiplier-tertiary)
191
- // // );
192
- // // }
193
- // // }
194
-
195
- p {
196
- margin: 0; //reset default margin
197
- @include core-typography-mixins-v3.p();
198
- }
201
+ a:not([class*='cmpl-cta-style-']) {
202
+ text-decoration-skip-ink: auto;
203
+ color: var(--link-colour);
204
+ text-decoration: var(--link-decoration-style);
205
+ text-decoration-color: var(--link-decoration-colour);
199
206
 
200
- a:not([class*='cmpl-cta-style-']) {
201
- text-decoration-skip-ink: auto;
202
- color: var(--link-colour);
203
- text-decoration: var(--link-decoration-style);
204
- text-decoration-color: var(--link-decoration-colour);
207
+ strong,
208
+ b {
209
+ font-weight: var(--weight-bold);
210
+ }
205
211
 
206
- strong,
207
- b {
208
- font-weight: var(--weight-bold);
212
+ &:hover {
213
+ cursor: pointer;
214
+ color: var(--link-colour-hover);
215
+ text-decoration: var(--link-decoration-style-hover);
216
+ text-decoration-color: var(--link-decoration-colour-hover);
217
+ }
209
218
  }
210
219
 
211
- &:hover {
212
- cursor: pointer;
213
- color: var(--link-colour-hover);
214
- text-decoration: var(--link-decoration-style-hover);
215
- text-decoration-color: var(--link-decoration-colour-hover);
220
+ button {
221
+ &:focus {
222
+ // outline: none;
223
+ // appearance: none;
224
+ }
216
225
  }
217
- }
218
226
 
219
- button {
220
- &:focus {
221
- // outline: none;
222
- // appearance: none;
223
- }
224
- }
227
+ blockquote {
228
+ margin: 0; //reset default margin
229
+ quotes: '“' '”' '‘' '’';
230
+ font-weight: bold;
225
231
 
226
- blockquote {
227
- margin: 0; //reset default margin
228
- quotes: '“' '”' '‘' '’';
229
- font-weight: bold;
232
+ &::before {
233
+ content: open-quote;
234
+ }
230
235
 
231
- &::before {
232
- content: open-quote;
236
+ &::after {
237
+ content: close-quote;
238
+ }
233
239
  }
234
240
 
235
- &::after {
236
- content: close-quote;
241
+ figure,
242
+ figcaption,
243
+ dl,
244
+ dd {
245
+ margin: 0;
237
246
  }
238
- }
239
247
 
240
- figure,
241
- figcaption,
242
- dl,
243
- dd {
244
- margin: 0;
245
- }
248
+ q {
249
+ &::before {
250
+ content: open-quote;
251
+ }
246
252
 
247
- q {
248
- &::before {
249
- content: open-quote;
253
+ &::after {
254
+ content: close-quote;
255
+ }
250
256
  }
251
257
 
252
- &::after {
253
- content: close-quote;
258
+ ol {
259
+ list-style-type: decimal;
254
260
  }
255
- }
256
-
257
- ol {
258
- list-style-type: decimal;
259
- }
260
- ul {
261
- list-style-type: disc;
262
- }
263
- li {
264
- @include core-typography-mixins-v3.p();
265
- }
266
- ol {
267
- padding: 0; //reset default padding
268
- margin: 0; //reset default margin
269
- font-family: var(--secondary-font-family);
270
- margin-bottom: var(--paragraph-block-spacing);
271
- list-style-position: inside;
272
- &:last-child {
273
- margin-bottom: 0;
261
+ ul {
262
+ list-style-type: disc;
274
263
  }
275
264
  li {
276
- margin-bottom: var(--list-item-block-spacing);
277
- line-height: var(--list-item-line-height);
278
- letter-spacing: var(--list-item-letter-spacing);
265
+ @include core-typography-mixins-v3.p();
266
+ }
267
+ ol {
268
+ padding: 0; //reset default padding
269
+ margin: 0; //reset default margin
270
+ font-family: var(--secondary-font-family);
271
+ margin-bottom: var(--paragraph-block-spacing);
272
+ list-style-position: inside;
279
273
  &:last-child {
280
274
  margin-bottom: 0;
281
275
  }
282
- }
283
- }
284
- .font-primary {
285
- @include core-typography-mixins-v3.fontPrimary();
286
- }
287
- .font-secondary {
288
- @include core-typography-mixins-v3.fontSecondary();
289
- }
290
- .font-tertiary {
291
- @include core-typography-mixins-v3.fontTertiary();
292
- }
293
- .font-quaternary {
294
- @include core-typography-mixins-v3.fontQuaternary();
295
- }
296
- .h1-l-sizing,
297
- .h-extra-large {
298
- @include core-typography-mixins-v3.h-xl();
299
- &-mobile {
300
- @media ( width <= #{breakpoints.$tabPortrait}) {
301
- @include core-typography-mixins-v3.h-xl-size();
302
- }
303
- }
304
- &-portrait {
305
- @media (#{breakpoints.$tabPortrait} <= width <= #{breakpoints.$tabLandscape}) {
306
- @include core-typography-mixins-v3.h-xl-size();
307
- }
308
- }
309
- &-desktop {
310
- @include core-mixins-v3.device(breakpoints.$tabLandscape) {
311
- @include core-typography-mixins-v3.h-xl-size();
312
- }
313
- }
314
- }
315
- .h1-sizing,
316
- .h-large {
317
- @include core-typography-mixins-v3.h-l();
318
- &-mobile {
319
- @media ( width <= #{breakpoints.$tabPortrait}) {
320
- @include core-typography-mixins-v3.h-l-size();
321
- }
322
- }
323
- &-portrait {
324
- @media (#{breakpoints.$tabPortrait} <= width <= #{breakpoints.$tabLandscape}) {
325
- @include core-typography-mixins-v3.h-l-size();
326
- }
327
- }
328
- &-desktop {
329
- @include core-mixins-v3.device(breakpoints.$tabLandscape) {
330
- @include core-typography-mixins-v3.h-l-size();
331
- }
332
- }
333
- }
334
- .h2-sizing,
335
- .h-medium {
336
- @include core-typography-mixins-v3.h-m();
337
- &-mobile {
338
- @media ( width <= #{breakpoints.$tabPortrait}) {
339
- @include core-typography-mixins-v3.h-m-size();
340
- }
341
- }
342
- &-portrait {
343
- @media (#{breakpoints.$tabPortrait} <= width <= #{breakpoints.$tabLandscape}) {
344
- @include core-typography-mixins-v3.h-m-size();
345
- }
346
- }
347
- &-desktop {
348
- @include core-mixins-v3.device(breakpoints.$tabLandscape) {
349
- @include core-typography-mixins-v3.h-m-size();
350
- }
351
- }
352
- }
353
- .h3-sizing,
354
- .h-small {
355
- @include core-typography-mixins-v3.h-s();
356
- &-mobile {
357
- @media ( width <= #{breakpoints.$tabPortrait}) {
358
- @include core-typography-mixins-v3.h-s-size();
359
- }
360
- }
361
- &-portrait {
362
- @media (#{breakpoints.$tabPortrait} <= width <= #{breakpoints.$tabLandscape}) {
363
- @include core-typography-mixins-v3.h-s-size();
364
- }
365
- }
366
- &-desktop {
367
- @include core-mixins-v3.device(breakpoints.$tabLandscape) {
368
- @include core-typography-mixins-v3.h-s-size();
369
- }
370
- }
371
- }
372
- .h4-sizing,
373
- .h-xsmall {
374
- @include core-typography-mixins-v3.h-xs();
375
- &-mobile {
376
- @media ( width <= #{breakpoints.$tabPortrait}) {
377
- @include core-typography-mixins-v3.h-xs-size();
378
- }
379
- }
380
- &-portrait {
381
- @media (#{breakpoints.$tabPortrait} <= width <= #{breakpoints.$tabLandscape}) {
382
- @include core-typography-mixins-v3.h-xs-size();
383
- }
384
- }
385
- &-desktop {
386
- @include core-mixins-v3.device(breakpoints.$tabLandscape) {
387
- @include core-typography-mixins-v3.h-xs-size();
388
- }
389
- }
390
- }
391
- .h5-sizing,
392
- .h-xxsmall {
393
- @include core-typography-mixins-v3.h-xxs();
394
- &-mobile {
395
- @media ( width <= #{breakpoints.$tabPortrait}) {
396
- @include core-typography-mixins-v3.h-xxs-size();
397
- }
398
- }
399
- &-portrait {
400
- @media (#{breakpoints.$tabPortrait} <= width <= #{breakpoints.$tabLandscape}) {
401
- @include core-typography-mixins-v3.h-xxs-size();
402
- }
403
- }
404
- &-desktop {
405
- @include core-mixins-v3.device(breakpoints.$tabLandscape) {
406
- @include core-typography-mixins-v3.h-xxs-size();
407
- }
408
- }
409
- }
410
- .h6-sizing,
411
- .h-xxxsmall {
412
- @include core-typography-mixins-v3.h-xxxs();
413
- &-mobile {
414
- @media ( width <= #{breakpoints.$tabPortrait}) {
415
- @include core-typography-mixins-v3.h-xxxs-size();
416
- }
417
- }
418
- &-portrait {
419
- @media (#{breakpoints.$tabPortrait} <= width <= #{breakpoints.$tabLandscape}) {
420
- @include core-typography-mixins-v3.h-xxxs-size();
421
- }
422
- }
423
- &-desktop {
424
- @include core-mixins-v3.device(breakpoints.$tabLandscape) {
425
- @include core-typography-mixins-v3.h-xxxs-size();
426
- }
427
- }
428
- }
429
- .sh1-sizing,
430
- .sh-extra-large {
431
- @include core-typography-mixins-v3.sh-xl();
432
- &-mobile {
433
- @media ( width <= #{breakpoints.$tabPortrait}) {
434
- @include core-typography-mixins-v3.sh-xl-size();
435
- }
436
- }
437
- &-portrait {
438
- @media (#{breakpoints.$tabPortrait} <= width <= #{breakpoints.$tabLandscape}) {
439
- @include core-typography-mixins-v3.sh-xl-size();
440
- }
441
- }
442
- &-desktop {
443
- @include core-mixins-v3.device(breakpoints.$tabLandscape) {
444
- @include core-typography-mixins-v3.sh-xl-size();
445
- }
446
- }
447
- }
448
-
449
- .sh2-sizing,
450
- .sh-large {
451
- @include core-typography-mixins-v3.sh-l();
452
- &-mobile {
453
- @media ( width <= #{breakpoints.$tabPortrait}) {
454
- @include core-typography-mixins-v3.sh-l-size();
455
- }
456
- }
457
- &-portrait {
458
- @media (#{breakpoints.$tabPortrait} <= width <= #{breakpoints.$tabLandscape}) {
459
- @include core-typography-mixins-v3.sh-l-size();
460
- }
461
- }
462
- &-desktop {
463
- @media (#{breakpoints.$tabLandscape} <= width) {
464
- // @include core-mixins-v3.device(breakpoints.$tabLandscape) {
465
- @include core-typography-mixins-v3.sh-l-size();
466
- }
467
- }
468
- }
469
- .sh3-sizing,
470
- .sh-medium {
471
- @include core-typography-mixins-v3.sh-m();
472
- &-mobile {
473
- @media ( width <= #{breakpoints.$tabPortrait}) {
474
- @include core-typography-mixins-v3.sh-m-size();
475
- }
476
- }
477
- &-portrait {
478
- @media (#{breakpoints.$tabPortrait} <= width <= #{breakpoints.$tabLandscape}) {
479
- @include core-typography-mixins-v3.sh-m-size();
480
- }
481
- }
482
- &-desktop {
483
- @include core-mixins-v3.device(breakpoints.$tabLandscape) {
484
- @include core-typography-mixins-v3.sh-m-size();
485
- }
486
- }
487
- }
488
- .sh4-sizing,
489
- .sh-small {
490
- @include core-typography-mixins-v3.sh-s();
491
- &-mobile {
492
- @media ( width <= #{breakpoints.$tabPortrait}) {
493
- @include core-typography-mixins-v3.sh-s-size();
494
- }
495
- }
496
- &-portrait {
497
- @media (#{breakpoints.$tabPortrait} <= width <= #{breakpoints.$tabLandscape}) {
498
- @include core-typography-mixins-v3.sh-s-size();
499
- }
500
- }
501
- &-desktop {
502
- @include core-mixins-v3.device(breakpoints.$tabLandscape) {
503
- @include core-typography-mixins-v3.sh-s-size();
504
- }
505
- }
506
- }
507
- .sh5-sizing,
508
- .sh-xsmall {
509
- @include core-typography-mixins-v3.sh-xs();
510
- &-mobile {
511
- @media ( width <= #{breakpoints.$tabPortrait}) {
512
- @include core-typography-mixins-v3.sh-xs-size();
513
- }
514
- }
515
- &-portrait {
516
- @media (#{breakpoints.$tabPortrait} <= width <= #{breakpoints.$tabLandscape}) {
517
- @include core-typography-mixins-v3.sh-xs-size();
518
- }
519
- }
520
- &-desktop {
521
- @include core-mixins-v3.device(breakpoints.$tabLandscape) {
522
- @include core-typography-mixins-v3.sh-xs-size();
523
- }
524
- }
525
- }
526
- .sh6-sizing,
527
- .sh-xxsmall {
528
- @include core-typography-mixins-v3.sh-xxs();
529
- &-mobile {
530
- @media ( width <= #{breakpoints.$tabPortrait}) {
531
- @include core-typography-mixins-v3.sh-xxs-size();
532
- }
533
- }
534
- &-portrait {
535
- @media (#{breakpoints.$tabPortrait} <= width <= #{breakpoints.$tabLandscape}) {
536
- @include core-typography-mixins-v3.sh-xxs-size();
537
- }
538
- }
539
- &-desktop {
540
- @include core-mixins-v3.device(breakpoints.$tabLandscape) {
541
- @include core-typography-mixins-v3.sh-xxs-size();
542
- }
543
- }
544
- }
545
- .p-l-sizing {
546
- @include core-typography-mixins-v3.p-l();
547
- &-mobile {
548
- @media ( width <= #{breakpoints.$tabPortrait}) {
549
- @include core-typography-mixins-v3.p-l-size();
550
- }
551
- }
552
- &-portrait {
553
- @media (#{breakpoints.$tabPortrait} <= width <= #{breakpoints.$tabLandscape}) {
554
- @include core-typography-mixins-v3.p-l-size();
555
- }
556
- }
557
- &-desktop {
558
- @include core-mixins-v3.device(breakpoints.$tabLandscape) {
559
- @include core-typography-mixins-v3.p-l-size();
560
- }
561
- }
562
- }
563
- .p-sizing {
564
- @include core-typography-mixins-v3.p();
565
- &-mobile {
566
- @media ( width <= #{breakpoints.$tabPortrait}) {
567
- @include core-typography-mixins-v3.p-size();
568
- }
569
- }
570
- &-portrait {
571
- @media (#{breakpoints.$tabPortrait} <= width <= #{breakpoints.$tabLandscape}) {
572
- @include core-typography-mixins-v3.p-size();
573
- }
574
- }
575
- &-desktop {
576
- @include core-mixins-v3.device(breakpoints.$tabLandscape) {
577
- @include core-typography-mixins-v3.p-size();
578
- }
579
- }
580
- }
581
- .p-s-sizing {
582
- @include core-typography-mixins-v3.p-s();
583
- &-mobile {
584
- @media ( width <= #{breakpoints.$tabPortrait}) {
585
- @include core-typography-mixins-v3.p-s-size();
586
- }
587
- }
588
- &-portrait {
589
- @media (#{breakpoints.$tabPortrait} <= width <= #{breakpoints.$tabLandscape}) {
590
- @include core-typography-mixins-v3.p-s-size();
591
- }
592
- }
593
- &-desktop {
594
- @include core-mixins-v3.device(breakpoints.$tabLandscape) {
595
- @include core-typography-mixins-v3.p-s-size();
596
- }
597
- }
598
- }
599
- .p-xs-sizing {
600
- @include core-typography-mixins-v3.p-xs();
601
- &-mobile {
602
- @media ( width <= #{breakpoints.$tabPortrait}) {
603
- @include core-typography-mixins-v3.p-xs-size();
604
- }
605
- }
606
- &-portrait {
607
- @media (#{breakpoints.$tabPortrait} <= width <= #{breakpoints.$tabLandscape}) {
608
- @include core-typography-mixins-v3.p-xs-size();
609
- }
610
- }
611
- &-desktop {
612
- @include core-mixins-v3.device(breakpoints.$tabLandscape) {
613
- @include core-typography-mixins-v3.p-xs-size();
614
- }
615
- }
616
- }
617
- .p-xxs-sizing {
618
- @include core-typography-mixins-v3.p-xxs();
619
- &-mobile {
620
- @media ( width <= #{breakpoints.$tabPortrait}) {
621
- @include core-typography-mixins-v3.p-xxs-size();
622
- }
623
- }
624
- &-portrait {
625
- @media (#{breakpoints.$tabPortrait} <= width <= #{breakpoints.$tabLandscape}) {
626
- @include core-typography-mixins-v3.p-xxs-size();
627
- }
628
- }
629
- &-desktop {
630
- @include core-mixins-v3.device(breakpoints.$tabLandscape) {
631
- @include core-typography-mixins-v3.p-xxs-size();
632
- }
633
- }
634
- }
635
- .p-xxxs-sizing {
636
- @include core-typography-mixins-v3.p-xxxs();
637
- &-mobile {
638
- @media ( width <= #{breakpoints.$tabPortrait}) {
639
- @include core-typography-mixins-v3.p-xxxs-size();
640
- }
641
- }
642
- &-portrait {
643
- @media (#{breakpoints.$tabPortrait} <= width <= #{breakpoints.$tabLandscape}) {
644
- @include core-typography-mixins-v3.p-xxxs-size();
645
- }
646
- }
647
- &-desktop {
648
- @include core-mixins-v3.device(breakpoints.$tabLandscape) {
649
- @include core-typography-mixins-v3.p-xxxs-size();
276
+ li {
277
+ margin-bottom: var(--list-item-block-spacing);
278
+ line-height: var(--list-item-line-height);
279
+ letter-spacing: var(--list-item-letter-spacing);
280
+ &:last-child {
281
+ margin-bottom: 0;
282
+ }
283
+ }
284
+ }
285
+ .font-primary {
286
+ @include core-typography-mixins-v3.fontPrimary();
287
+ }
288
+ .font-secondary {
289
+ @include core-typography-mixins-v3.fontSecondary();
290
+ }
291
+ .font-tertiary {
292
+ @include core-typography-mixins-v3.fontTertiary();
293
+ }
294
+ .font-quaternary {
295
+ @include core-typography-mixins-v3.fontQuaternary();
296
+ }
297
+ .h1-l-sizing,
298
+ .h-extra-large {
299
+ @include core-typography-mixins-v3.h-xl();
300
+ &-mobile {
301
+ @media ( width <= #{breakpoints.$tabPortrait}) {
302
+ @include core-typography-mixins-v3.h-xl-size();
303
+ }
304
+ }
305
+ &-portrait {
306
+ @media (#{breakpoints.$tabPortrait} <= width <= #{breakpoints.$tabLandscape}) {
307
+ @include core-typography-mixins-v3.h-xl-size();
308
+ }
309
+ }
310
+ &-desktop {
311
+ @include core-mixins-v3.device(breakpoints.$tabLandscape) {
312
+ @include core-typography-mixins-v3.h-xl-size();
313
+ }
314
+ }
315
+ }
316
+ .h1-sizing,
317
+ .h-large {
318
+ @include core-typography-mixins-v3.h-l();
319
+ &-mobile {
320
+ @media ( width <= #{breakpoints.$tabPortrait}) {
321
+ @include core-typography-mixins-v3.h-l-size();
322
+ }
323
+ }
324
+ &-portrait {
325
+ @media (#{breakpoints.$tabPortrait} <= width <= #{breakpoints.$tabLandscape}) {
326
+ @include core-typography-mixins-v3.h-l-size();
327
+ }
328
+ }
329
+ &-desktop {
330
+ @include core-mixins-v3.device(breakpoints.$tabLandscape) {
331
+ @include core-typography-mixins-v3.h-l-size();
332
+ }
333
+ }
334
+ }
335
+ .h2-sizing,
336
+ .h-medium {
337
+ @include core-typography-mixins-v3.h-m();
338
+ &-mobile {
339
+ @media ( width <= #{breakpoints.$tabPortrait}) {
340
+ @include core-typography-mixins-v3.h-m-size();
341
+ }
342
+ }
343
+ &-portrait {
344
+ @media (#{breakpoints.$tabPortrait} <= width <= #{breakpoints.$tabLandscape}) {
345
+ @include core-typography-mixins-v3.h-m-size();
346
+ }
347
+ }
348
+ &-desktop {
349
+ @include core-mixins-v3.device(breakpoints.$tabLandscape) {
350
+ @include core-typography-mixins-v3.h-m-size();
351
+ }
352
+ }
353
+ }
354
+ .h3-sizing,
355
+ .h-small {
356
+ @include core-typography-mixins-v3.h-s();
357
+ &-mobile {
358
+ @media ( width <= #{breakpoints.$tabPortrait}) {
359
+ @include core-typography-mixins-v3.h-s-size();
360
+ }
361
+ }
362
+ &-portrait {
363
+ @media (#{breakpoints.$tabPortrait} <= width <= #{breakpoints.$tabLandscape}) {
364
+ @include core-typography-mixins-v3.h-s-size();
365
+ }
366
+ }
367
+ &-desktop {
368
+ @include core-mixins-v3.device(breakpoints.$tabLandscape) {
369
+ @include core-typography-mixins-v3.h-s-size();
370
+ }
371
+ }
372
+ }
373
+ .h4-sizing,
374
+ .h-xsmall {
375
+ @include core-typography-mixins-v3.h-xs();
376
+ &-mobile {
377
+ @media ( width <= #{breakpoints.$tabPortrait}) {
378
+ @include core-typography-mixins-v3.h-xs-size();
379
+ }
380
+ }
381
+ &-portrait {
382
+ @media (#{breakpoints.$tabPortrait} <= width <= #{breakpoints.$tabLandscape}) {
383
+ @include core-typography-mixins-v3.h-xs-size();
384
+ }
385
+ }
386
+ &-desktop {
387
+ @include core-mixins-v3.device(breakpoints.$tabLandscape) {
388
+ @include core-typography-mixins-v3.h-xs-size();
389
+ }
390
+ }
391
+ }
392
+ .h5-sizing,
393
+ .h-xxsmall {
394
+ @include core-typography-mixins-v3.h-xxs();
395
+ &-mobile {
396
+ @media ( width <= #{breakpoints.$tabPortrait}) {
397
+ @include core-typography-mixins-v3.h-xxs-size();
398
+ }
399
+ }
400
+ &-portrait {
401
+ @media (#{breakpoints.$tabPortrait} <= width <= #{breakpoints.$tabLandscape}) {
402
+ @include core-typography-mixins-v3.h-xxs-size();
403
+ }
404
+ }
405
+ &-desktop {
406
+ @include core-mixins-v3.device(breakpoints.$tabLandscape) {
407
+ @include core-typography-mixins-v3.h-xxs-size();
408
+ }
409
+ }
410
+ }
411
+ .h6-sizing,
412
+ .h-xxxsmall {
413
+ @include core-typography-mixins-v3.h-xxxs();
414
+ &-mobile {
415
+ @media ( width <= #{breakpoints.$tabPortrait}) {
416
+ @include core-typography-mixins-v3.h-xxxs-size();
417
+ }
418
+ }
419
+ &-portrait {
420
+ @media (#{breakpoints.$tabPortrait} <= width <= #{breakpoints.$tabLandscape}) {
421
+ @include core-typography-mixins-v3.h-xxxs-size();
422
+ }
423
+ }
424
+ &-desktop {
425
+ @include core-mixins-v3.device(breakpoints.$tabLandscape) {
426
+ @include core-typography-mixins-v3.h-xxxs-size();
427
+ }
428
+ }
429
+ }
430
+ .sh1-sizing,
431
+ .sh-extra-large {
432
+ @include core-typography-mixins-v3.sh-xl();
433
+ &-mobile {
434
+ @media ( width <= #{breakpoints.$tabPortrait}) {
435
+ @include core-typography-mixins-v3.sh-xl-size();
436
+ }
437
+ }
438
+ &-portrait {
439
+ @media (#{breakpoints.$tabPortrait} <= width <= #{breakpoints.$tabLandscape}) {
440
+ @include core-typography-mixins-v3.sh-xl-size();
441
+ }
442
+ }
443
+ &-desktop {
444
+ @include core-mixins-v3.device(breakpoints.$tabLandscape) {
445
+ @include core-typography-mixins-v3.sh-xl-size();
446
+ }
447
+ }
448
+ }
449
+
450
+ .sh2-sizing,
451
+ .sh-large {
452
+ @include core-typography-mixins-v3.sh-l();
453
+ &-mobile {
454
+ @media ( width <= #{breakpoints.$tabPortrait}) {
455
+ @include core-typography-mixins-v3.sh-l-size();
456
+ }
457
+ }
458
+ &-portrait {
459
+ @media (#{breakpoints.$tabPortrait} <= width <= #{breakpoints.$tabLandscape}) {
460
+ @include core-typography-mixins-v3.sh-l-size();
461
+ }
462
+ }
463
+ &-desktop {
464
+ @media (#{breakpoints.$tabLandscape} <= width) {
465
+ // @include core-mixins-v3.device(breakpoints.$tabLandscape) {
466
+ @include core-typography-mixins-v3.sh-l-size();
467
+ }
468
+ }
469
+ }
470
+ .sh3-sizing,
471
+ .sh-medium {
472
+ @include core-typography-mixins-v3.sh-m();
473
+ &-mobile {
474
+ @media ( width <= #{breakpoints.$tabPortrait}) {
475
+ @include core-typography-mixins-v3.sh-m-size();
476
+ }
477
+ }
478
+ &-portrait {
479
+ @media (#{breakpoints.$tabPortrait} <= width <= #{breakpoints.$tabLandscape}) {
480
+ @include core-typography-mixins-v3.sh-m-size();
481
+ }
482
+ }
483
+ &-desktop {
484
+ @include core-mixins-v3.device(breakpoints.$tabLandscape) {
485
+ @include core-typography-mixins-v3.sh-m-size();
486
+ }
487
+ }
488
+ }
489
+ .sh4-sizing,
490
+ .sh-small {
491
+ @include core-typography-mixins-v3.sh-s();
492
+ &-mobile {
493
+ @media ( width <= #{breakpoints.$tabPortrait}) {
494
+ @include core-typography-mixins-v3.sh-s-size();
495
+ }
496
+ }
497
+ &-portrait {
498
+ @media (#{breakpoints.$tabPortrait} <= width <= #{breakpoints.$tabLandscape}) {
499
+ @include core-typography-mixins-v3.sh-s-size();
500
+ }
501
+ }
502
+ &-desktop {
503
+ @include core-mixins-v3.device(breakpoints.$tabLandscape) {
504
+ @include core-typography-mixins-v3.sh-s-size();
505
+ }
506
+ }
507
+ }
508
+ .sh5-sizing,
509
+ .sh-xsmall {
510
+ @include core-typography-mixins-v3.sh-xs();
511
+ &-mobile {
512
+ @media ( width <= #{breakpoints.$tabPortrait}) {
513
+ @include core-typography-mixins-v3.sh-xs-size();
514
+ }
515
+ }
516
+ &-portrait {
517
+ @media (#{breakpoints.$tabPortrait} <= width <= #{breakpoints.$tabLandscape}) {
518
+ @include core-typography-mixins-v3.sh-xs-size();
519
+ }
520
+ }
521
+ &-desktop {
522
+ @include core-mixins-v3.device(breakpoints.$tabLandscape) {
523
+ @include core-typography-mixins-v3.sh-xs-size();
524
+ }
525
+ }
526
+ }
527
+ .sh6-sizing,
528
+ .sh-xxsmall {
529
+ @include core-typography-mixins-v3.sh-xxs();
530
+ &-mobile {
531
+ @media ( width <= #{breakpoints.$tabPortrait}) {
532
+ @include core-typography-mixins-v3.sh-xxs-size();
533
+ }
534
+ }
535
+ &-portrait {
536
+ @media (#{breakpoints.$tabPortrait} <= width <= #{breakpoints.$tabLandscape}) {
537
+ @include core-typography-mixins-v3.sh-xxs-size();
538
+ }
539
+ }
540
+ &-desktop {
541
+ @include core-mixins-v3.device(breakpoints.$tabLandscape) {
542
+ @include core-typography-mixins-v3.sh-xxs-size();
543
+ }
544
+ }
545
+ }
546
+ .p-l-sizing {
547
+ @include core-typography-mixins-v3.p-l();
548
+ &-mobile {
549
+ @media ( width <= #{breakpoints.$tabPortrait}) {
550
+ @include core-typography-mixins-v3.p-l-size();
551
+ }
552
+ }
553
+ &-portrait {
554
+ @media (#{breakpoints.$tabPortrait} <= width <= #{breakpoints.$tabLandscape}) {
555
+ @include core-typography-mixins-v3.p-l-size();
556
+ }
557
+ }
558
+ &-desktop {
559
+ @include core-mixins-v3.device(breakpoints.$tabLandscape) {
560
+ @include core-typography-mixins-v3.p-l-size();
561
+ }
562
+ }
563
+ }
564
+ .p-sizing {
565
+ @include core-typography-mixins-v3.p();
566
+ &-mobile {
567
+ @media ( width <= #{breakpoints.$tabPortrait}) {
568
+ @include core-typography-mixins-v3.p-size();
569
+ }
570
+ }
571
+ &-portrait {
572
+ @media (#{breakpoints.$tabPortrait} <= width <= #{breakpoints.$tabLandscape}) {
573
+ @include core-typography-mixins-v3.p-size();
574
+ }
575
+ }
576
+ &-desktop {
577
+ @include core-mixins-v3.device(breakpoints.$tabLandscape) {
578
+ @include core-typography-mixins-v3.p-size();
579
+ }
580
+ }
581
+ }
582
+ .p-s-sizing {
583
+ @include core-typography-mixins-v3.p-s();
584
+ &-mobile {
585
+ @media ( width <= #{breakpoints.$tabPortrait}) {
586
+ @include core-typography-mixins-v3.p-s-size();
587
+ }
588
+ }
589
+ &-portrait {
590
+ @media (#{breakpoints.$tabPortrait} <= width <= #{breakpoints.$tabLandscape}) {
591
+ @include core-typography-mixins-v3.p-s-size();
592
+ }
593
+ }
594
+ &-desktop {
595
+ @include core-mixins-v3.device(breakpoints.$tabLandscape) {
596
+ @include core-typography-mixins-v3.p-s-size();
597
+ }
598
+ }
599
+ }
600
+ .p-xs-sizing {
601
+ @include core-typography-mixins-v3.p-xs();
602
+ &-mobile {
603
+ @media ( width <= #{breakpoints.$tabPortrait}) {
604
+ @include core-typography-mixins-v3.p-xs-size();
605
+ }
606
+ }
607
+ &-portrait {
608
+ @media (#{breakpoints.$tabPortrait} <= width <= #{breakpoints.$tabLandscape}) {
609
+ @include core-typography-mixins-v3.p-xs-size();
610
+ }
611
+ }
612
+ &-desktop {
613
+ @include core-mixins-v3.device(breakpoints.$tabLandscape) {
614
+ @include core-typography-mixins-v3.p-xs-size();
615
+ }
616
+ }
617
+ }
618
+ .p-xxs-sizing {
619
+ @include core-typography-mixins-v3.p-xxs();
620
+ &-mobile {
621
+ @media ( width <= #{breakpoints.$tabPortrait}) {
622
+ @include core-typography-mixins-v3.p-xxs-size();
623
+ }
624
+ }
625
+ &-portrait {
626
+ @media (#{breakpoints.$tabPortrait} <= width <= #{breakpoints.$tabLandscape}) {
627
+ @include core-typography-mixins-v3.p-xxs-size();
628
+ }
629
+ }
630
+ &-desktop {
631
+ @include core-mixins-v3.device(breakpoints.$tabLandscape) {
632
+ @include core-typography-mixins-v3.p-xxs-size();
633
+ }
634
+ }
635
+ }
636
+ .p-xxxs-sizing {
637
+ @include core-typography-mixins-v3.p-xxxs();
638
+ &-mobile {
639
+ @media ( width <= #{breakpoints.$tabPortrait}) {
640
+ @include core-typography-mixins-v3.p-xxxs-size();
641
+ }
642
+ }
643
+ &-portrait {
644
+ @media (#{breakpoints.$tabPortrait} <= width <= #{breakpoints.$tabLandscape}) {
645
+ @include core-typography-mixins-v3.p-xxxs-size();
646
+ }
647
+ }
648
+ &-desktop {
649
+ @include core-mixins-v3.device(breakpoints.$tabLandscape) {
650
+ @include core-typography-mixins-v3.p-xxxs-size();
651
+ }
650
652
  }
651
653
  }
652
654
  }