@total_onion/onion-library 2.0.194 → 2.0.196

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.
@@ -4,7 +4,7 @@
4
4
  "fields": [
5
5
  {
6
6
  "key": "field_68e6822690986",
7
- "label": "Banner Fields",
7
+ "label": "Banner Content",
8
8
  "name": "",
9
9
  "aria-label": "",
10
10
  "type": "tab",
@@ -16,7 +16,6 @@
16
16
  "class": "",
17
17
  "id": ""
18
18
  },
19
- "wpml_cf_preferences": 3,
20
19
  "placement": "top",
21
20
  "endpoint": 0,
22
21
  "no_preference": 0,
@@ -108,9 +107,58 @@
108
107
  "return_format": "array",
109
108
  "allow_in_bindings": 0,
110
109
  "parent_repeater": "field_62647331056f3"
110
+ },
111
+ {
112
+ "key": "field_6960fd9d394e7",
113
+ "label": "Single Separator Image",
114
+ "name": "single_separator_image",
115
+ "aria-label": "",
116
+ "type": "image",
117
+ "instructions": "",
118
+ "required": 0,
119
+ "conditional_logic": 0,
120
+ "wrapper": {
121
+ "width": "",
122
+ "class": "",
123
+ "id": ""
124
+ },
125
+ "uploader": "",
126
+ "return_format": "id",
127
+ "library": "all",
128
+ "upload_folder": "",
129
+ "acfe_thumbnail": 0,
130
+ "min_width": "",
131
+ "min_height": "",
132
+ "min_size": "",
133
+ "max_width": "",
134
+ "max_height": "",
135
+ "max_size": "",
136
+ "mime_types": "",
137
+ "allow_in_bindings": 0,
138
+ "preview_size": "medium",
139
+ "parent_repeater": "field_62647331056f3"
111
140
  }
112
141
  ]
113
142
  },
143
+ {
144
+ "key": "field_69601f0538ee5",
145
+ "label": "Banner Settings",
146
+ "name": "",
147
+ "aria-label": "",
148
+ "type": "tab",
149
+ "instructions": "",
150
+ "required": 0,
151
+ "conditional_logic": 0,
152
+ "wrapper": {
153
+ "width": "",
154
+ "class": "",
155
+ "id": ""
156
+ },
157
+ "placement": "top",
158
+ "endpoint": 0,
159
+ "no_preference": 0,
160
+ "selected": 0
161
+ },
114
162
  {
115
163
  "key": "field_62647361727b8",
116
164
  "label": "Scrolling Banner Speed",
@@ -121,7 +169,7 @@
121
169
  "required": 0,
122
170
  "conditional_logic": 0,
123
171
  "wrapper": {
124
- "width": "",
172
+ "width": "50",
125
173
  "class": "",
126
174
  "id": ""
127
175
  },
@@ -133,6 +181,37 @@
133
181
  "prepend": "",
134
182
  "append": ""
135
183
  },
184
+ {
185
+ "key": "field_65661d79b8b14",
186
+ "label": "Text Colour",
187
+ "name": "text_colour",
188
+ "aria-label": "",
189
+ "type": "color_picker",
190
+ "instructions": "",
191
+ "required": 0,
192
+ "conditional_logic": 0,
193
+ "wrapper": {
194
+ "width": "50",
195
+ "class": "",
196
+ "id": ""
197
+ },
198
+ "default_value": "#FFFFFF",
199
+ "enable_opacity": 1,
200
+ "return_format": "string",
201
+ "display": "default",
202
+ "button_label": "Select Color",
203
+ "color_picker": 1,
204
+ "absolute": 0,
205
+ "input": 1,
206
+ "allow_null": 1,
207
+ "theme_colors": 0,
208
+ "colors": [],
209
+ "allow_in_bindings": 1,
210
+ "show_custom_palette": 0,
211
+ "show_color_wheel": 1,
212
+ "custom_palette_source": "",
213
+ "palette_colors": ""
214
+ },
136
215
  {
137
216
  "key": "field_656601518b51f",
138
217
  "label": "Font Size Desktop",
@@ -143,15 +222,14 @@
143
222
  "required": 0,
144
223
  "conditional_logic": 0,
145
224
  "wrapper": {
146
- "width": "",
225
+ "width": "33",
147
226
  "class": "",
148
227
  "id": ""
149
228
  },
150
- "wpml_cf_preferences": 3,
151
- "user_roles": ["all"],
152
229
  "default_value": 32,
153
230
  "min": "",
154
231
  "max": 300,
232
+ "allow_in_bindings": 1,
155
233
  "step": "",
156
234
  "prepend": "",
157
235
  "append": ""
@@ -166,15 +244,14 @@
166
244
  "required": 0,
167
245
  "conditional_logic": 0,
168
246
  "wrapper": {
169
- "width": "",
247
+ "width": "34",
170
248
  "class": "",
171
249
  "id": ""
172
250
  },
173
- "wpml_cf_preferences": 3,
174
- "user_roles": ["all"],
175
251
  "default_value": 24,
176
252
  "min": "",
177
253
  "max": 300,
254
+ "allow_in_bindings": 1,
178
255
  "step": "",
179
256
  "prepend": "",
180
257
  "append": ""
@@ -189,23 +266,22 @@
189
266
  "required": 0,
190
267
  "conditional_logic": 0,
191
268
  "wrapper": {
192
- "width": "",
269
+ "width": "33",
193
270
  "class": "",
194
271
  "id": ""
195
272
  },
196
- "wpml_cf_preferences": 3,
197
- "user_roles": ["all"],
198
273
  "default_value": 16,
199
274
  "min": "",
200
275
  "max": 300,
276
+ "allow_in_bindings": 1,
201
277
  "step": "",
202
278
  "prepend": "",
203
279
  "append": ""
204
280
  },
205
281
  {
206
282
  "key": "field_656612fd660a7",
207
- "label": "Seperator As Image?",
208
- "name": "seperator_as_image",
283
+ "label": "Separator As Image?",
284
+ "name": "separator_as_image",
209
285
  "aria-label": "",
210
286
  "type": "true_false",
211
287
  "instructions": "",
@@ -216,15 +292,81 @@
216
292
  "class": "",
217
293
  "id": ""
218
294
  },
219
- "wpml_cf_preferences": 3,
220
- "user_roles": ["all"],
221
295
  "message": "",
222
296
  "default_value": 0,
297
+ "allow_in_bindings": 1,
223
298
  "ui_on_text": "",
224
299
  "ui_off_text": "",
225
300
  "ui": 1,
226
301
  "style": ""
227
302
  },
303
+ {
304
+ "key": "field_69601f602ec52",
305
+ "label": "Separator image",
306
+ "name": "separator_image",
307
+ "aria-label": "",
308
+ "type": "image",
309
+ "instructions": "",
310
+ "required": 0,
311
+ "conditional_logic": [
312
+ [
313
+ {
314
+ "field": "field_656612fd660a7",
315
+ "operator": "==",
316
+ "value": "1"
317
+ }
318
+ ]
319
+ ],
320
+ "wrapper": {
321
+ "width": "50",
322
+ "class": "",
323
+ "id": ""
324
+ },
325
+ "uploader": "",
326
+ "return_format": "id",
327
+ "library": "all",
328
+ "upload_folder": "",
329
+ "acfe_thumbnail": 0,
330
+ "min_width": "",
331
+ "min_height": "",
332
+ "min_size": "",
333
+ "max_width": "",
334
+ "max_height": "",
335
+ "max_size": "",
336
+ "mime_types": "",
337
+ "allow_in_bindings": 0,
338
+ "preview_size": "medium"
339
+ },
340
+ {
341
+ "key": "field_696021d920c68",
342
+ "label": "Separator image width",
343
+ "name": "separator_image_width",
344
+ "aria-label": "",
345
+ "type": "range",
346
+ "instructions": "in ems",
347
+ "required": 0,
348
+ "conditional_logic": [
349
+ [
350
+ {
351
+ "field": "field_656612fd660a7",
352
+ "operator": "==",
353
+ "value": "1"
354
+ }
355
+ ]
356
+ ],
357
+ "wrapper": {
358
+ "width": "",
359
+ "class": "",
360
+ "id": ""
361
+ },
362
+ "default_value": "1.5",
363
+ "min": "0.1",
364
+ "max": 10,
365
+ "allow_in_bindings": 0,
366
+ "step": "0.1",
367
+ "prepend": "",
368
+ "append": ""
369
+ },
228
370
  {
229
371
  "key": "field_656615b26dfc2",
230
372
  "label": "Positioning",
@@ -253,37 +395,6 @@
253
395
  "layout": "vertical",
254
396
  "save_other_choice": 0
255
397
  },
256
- {
257
- "key": "field_65661d79b8b14",
258
- "label": "Text Colour",
259
- "name": "text_colour",
260
- "aria-label": "",
261
- "type": "color_picker",
262
- "instructions": "",
263
- "required": 0,
264
- "conditional_logic": 0,
265
- "wrapper": {
266
- "width": "",
267
- "class": "",
268
- "id": ""
269
- },
270
- "wpml_cf_preferences": 3,
271
- "user_roles": ["all"],
272
- "default_value": "#FFFFFF",
273
- "enable_opacity": 1,
274
- "return_format": "string",
275
- "display": "default",
276
- "button_label": "Select Color",
277
- "color_picker": true,
278
- "absolute": false,
279
- "input": true,
280
- "allow_null": true,
281
- "theme_colors": false,
282
- "colors": [],
283
- "custom_palette_source": "",
284
- "palette_colors": "",
285
- "show_color_wheel": true
286
- },
287
398
  {
288
399
  "key": "field_65b7ac3ef1fea",
289
400
  "label": "Enable Text Shadow",
@@ -315,17 +426,24 @@
315
426
  "type": "range",
316
427
  "instructions": "",
317
428
  "required": 0,
318
- "conditional_logic": 0,
429
+ "conditional_logic": [
430
+ [
431
+ {
432
+ "field": "field_65b7ac3ef1fea",
433
+ "operator": "==",
434
+ "value": "1"
435
+ }
436
+ ]
437
+ ],
319
438
  "wrapper": {
320
439
  "width": "",
321
440
  "class": "",
322
441
  "id": ""
323
442
  },
324
- "wpml_cf_preferences": 3,
325
- "user_roles": ["all"],
326
443
  "default_value": 0,
327
444
  "min": -40,
328
445
  "max": 40,
446
+ "allow_in_bindings": 1,
329
447
  "step": "",
330
448
  "prepend": "",
331
449
  "append": ""
@@ -338,17 +456,24 @@
338
456
  "type": "range",
339
457
  "instructions": "",
340
458
  "required": 0,
341
- "conditional_logic": 0,
459
+ "conditional_logic": [
460
+ [
461
+ {
462
+ "field": "field_65b7ac3ef1fea",
463
+ "operator": "==",
464
+ "value": "1"
465
+ }
466
+ ]
467
+ ],
342
468
  "wrapper": {
343
469
  "width": "",
344
470
  "class": "",
345
471
  "id": ""
346
472
  },
347
- "wpml_cf_preferences": 3,
348
- "user_roles": ["all"],
349
473
  "default_value": 0,
350
474
  "min": -40,
351
475
  "max": 40,
476
+ "allow_in_bindings": 1,
352
477
  "step": "",
353
478
  "prepend": "",
354
479
  "append": ""
@@ -361,17 +486,24 @@
361
486
  "type": "range",
362
487
  "instructions": "",
363
488
  "required": 0,
364
- "conditional_logic": 0,
489
+ "conditional_logic": [
490
+ [
491
+ {
492
+ "field": "field_65b7ac3ef1fea",
493
+ "operator": "==",
494
+ "value": "1"
495
+ }
496
+ ]
497
+ ],
365
498
  "wrapper": {
366
499
  "width": "",
367
500
  "class": "",
368
501
  "id": ""
369
502
  },
370
- "wpml_cf_preferences": 3,
371
- "user_roles": ["all"],
372
503
  "default_value": 0,
373
504
  "min": 0,
374
505
  "max": 20,
506
+ "allow_in_bindings": 1,
375
507
  "step": "",
376
508
  "prepend": "",
377
509
  "append": ""
@@ -384,14 +516,20 @@
384
516
  "type": "color_picker",
385
517
  "instructions": "",
386
518
  "required": 0,
387
- "conditional_logic": 0,
519
+ "conditional_logic": [
520
+ [
521
+ {
522
+ "field": "field_65b7ac3ef1fea",
523
+ "operator": "==",
524
+ "value": "1"
525
+ }
526
+ ]
527
+ ],
388
528
  "wrapper": {
389
529
  "width": "",
390
530
  "class": "",
391
531
  "id": ""
392
532
  },
393
- "wpml_cf_preferences": 3,
394
- "user_roles": ["all"],
395
533
  "default_value": "rgba(255,255,255,0.5)",
396
534
  "enable_opacity": 1,
397
535
  "return_format": "string",
@@ -403,9 +541,11 @@
403
541
  "allow_null": 1,
404
542
  "theme_colors": 0,
405
543
  "colors": [],
544
+ "allow_in_bindings": 1,
545
+ "show_custom_palette": 0,
546
+ "show_color_wheel": 1,
406
547
  "custom_palette_source": "",
407
- "palette_colors": "",
408
- "show_color_wheel": true
548
+ "palette_colors": ""
409
549
  },
410
550
  {
411
551
  "key": "field_68e67fca63368",
@@ -497,5 +637,5 @@
497
637
  "acfe_display_title": "",
498
638
  "acfe_meta": "",
499
639
  "acfe_note": "",
500
- "modified": 1767368506
640
+ "modified": 1767965204
501
641
  }
@@ -48,10 +48,7 @@
48
48
  align-items: center;
49
49
  align-self: flex-start;
50
50
  white-space: nowrap;
51
- font-size: core-functions-v3.fontSize(
52
- var(--text-size-mobile),
53
- 'mobile'
54
- );
51
+ font-size: core-functions-v3.fontSize(var(--text-size-mobile));
55
52
 
56
53
  @include core-mixins-v3.device(breakpoints.$tabPortrait) {
57
54
  font-size: core-functions-v3.fontSize(
@@ -95,6 +92,10 @@
95
92
  border-radius: 50%;
96
93
  }
97
94
  }
95
+ &__separator--image {
96
+ width: var(--separator-image-width, 1.5em);
97
+ height: auto;
98
+ }
98
99
 
99
100
  &--text-shadow {
100
101
  @include core-mixins-v3.textShadow();
@@ -15,13 +15,16 @@
15
15
  <section {{block.anchor ? "id=" ~ block.anchor : ''}} class="{{blockClassName}} {{classNameEntryPoint}} {{block.id}} lazy-fade" {{dataAttributeEntryPoint}} data-blockid="{{block.id}}" data-assetkey="{{blockClassName}}">
16
16
 
17
17
  {% set bannerSpeed = fields.scrolling_banner_speed %}
18
- {% set imageSeperator = fields.seperator_as_image %}
18
+ {% set separatorAsImage = fields.separator_as_image %}
19
+ {% set separatorImage = get_image(fields.separator_image) %}
20
+ {% set separatorImageWidth = '--separator-image-width: ' ~ fields.separator_image_width ~ 'em;' %}
19
21
  {% set positioning = '--position:' ~ fields.positioning|ru ~ ';' %}
20
22
  {% set textSizeDesktop = '--text-size-desktop:' ~ fields.font_size_desktop ~ ';' %}
21
23
  {% set textSizePortrait = '--text-size-portrait:' ~ fields.font_size_portrait ~ ';' %}
22
24
  {% set textSizeMobile = '--text-size-mobile:' ~ fields.font_size_mobile ~ ';' %}
23
25
  {% set textColour = '--banner-text-colour:' ~ fields.text_colour ~ ';' %}
24
- {% set bannerTextStyles = textSizeDesktop ~ textSizePortrait ~ textSizeMobile ~ positioning ~ textColour %}
26
+ {% set bannerTextStyles = textSizeDesktop ~ textSizePortrait ~ textSizeMobile ~ positioning ~ textColour ~ separatorImageWidth %}
27
+
25
28
 
26
29
  {% if fields.enable_text_shadow %}
27
30
  {% set textShadowClassName = blockClassName ~ "--text-shadow" %}
@@ -40,7 +43,14 @@
40
43
  <div class="{{blockClassName}}__container">
41
44
  <div class="{{blockClassName}}__inner">
42
45
  {% for item in fields.scrolling_banner_texts %}
43
- <span class="{{blockClassName}}__separator"></span>
46
+ {% if item.single_separator_image != null %}
47
+ {% set singleSeparatorImage = get_image(item.single_separator_image) %}
48
+ <img class="{{blockClassName}}__separator {{blockClassName}}__separator--image" src="{{gt_image_mainsrc(singleSeparatorImage)}}">
49
+ {% elseif separatorAsImage != null %}
50
+ <img class="{{blockClassName}}__separator {{blockClassName}}__separator--image" src="{{gt_image_mainsrc(separatorImage)}}">
51
+ {% else %}
52
+ <span class="{{blockClassName}}__separator"></span>
53
+ {% endif %}
44
54
  {% set elementType = item.text_link ? 'a href="' ~ item.text_link.url ~ '"' : 'span' %}
45
55
  <{{elementType}} class="{{blockClassName}}__text {{textShadowClassName}}">{{item.scrolling_banner_text}}</{{elementType}}>
46
56
  {% endfor %}
@@ -3,295 +3,297 @@
3
3
  @use '../../breakpoints';
4
4
 
5
5
  @mixin coreGenericV3() {
6
- /* Box sizing rules */
7
- *,
8
- *::before,
9
- *::after {
10
- box-sizing: border-box;
11
- }
12
-
13
- /* Remove default padding */
14
- ul,
15
- ol {
16
- padding: 0;
17
- }
18
-
19
- /* Remove default margin */
20
- body,
21
- h1,
22
- h2,
23
- h3,
24
- h4,
25
- p,
26
- ul,
27
- ol,
28
- li,
29
- figure,
30
- figcaption,
31
- blockquote,
32
- dl,
33
- dd {
34
- margin: 0;
35
- }
36
-
37
- /* Box sizing rules */
38
- *,
39
- *::before,
40
- *::after {
41
- box-sizing: border-box;
42
- }
6
+ @layer base-styles {
7
+ /* Box sizing rules */
8
+ *,
9
+ *::before,
10
+ *::after {
11
+ box-sizing: border-box;
12
+ }
43
13
 
44
- //***** TYPOGRAPHY *****\\
45
- body {
46
- // @include core-typography-mixins-v3.fontSecondary();
47
- }
14
+ /* Remove default padding */
15
+ ul,
16
+ ol {
17
+ padding: 0;
18
+ }
48
19
 
49
- // h1,
50
- // h2,
51
- // h3,
52
- // h4,
53
- // h5,
54
- // h6 {
55
- // margin: 0; //reset default margin
56
- // font-weight: unset; //reset default font weight
57
- // margin-top: unset;
58
- // @include core-typography-mixins-v3.fontPrimary();
59
- // }
60
- .override-element-styles {
20
+ /* Remove default margin */
21
+ body,
61
22
  h1,
62
23
  h2,
63
24
  h3,
64
25
  h4,
65
- h5,
66
- h6 {
67
- font-size: 0;
26
+ p,
27
+ ul,
28
+ ol,
29
+ li,
30
+ figure,
31
+ figcaption,
32
+ blockquote,
33
+ dl,
34
+ dd {
35
+ margin: 0;
68
36
  }
69
- }
70
37
 
71
- .standard-content-box-wysiwyg-editor {
72
- h1,
73
- h2,
74
- h3,
75
- h4,
76
- h5,
77
- h6 {
78
- margin-bottom: var(--heading-block-spacing);
38
+ /* Box sizing rules */
39
+ *,
40
+ *::before,
41
+ *::after {
42
+ box-sizing: border-box;
43
+ }
79
44
 
80
- &:last-child {
81
- margin-bottom: 0;
82
- }
45
+ //***** TYPOGRAPHY *****\\
46
+ body {
47
+ // @include core-typography-mixins-v3.fontSecondary();
83
48
  }
84
- p {
85
- margin-bottom: var(--paragraph-block-spacing);
86
49
 
87
- &:last-child {
88
- margin-bottom: 0;
50
+ // h1,
51
+ // h2,
52
+ // h3,
53
+ // h4,
54
+ // h5,
55
+ // h6 {
56
+ // margin: 0; //reset default margin
57
+ // font-weight: unset; //reset default font weight
58
+ // margin-top: unset;
59
+ // @include core-typography-mixins-v3.fontPrimary();
60
+ // }
61
+ .override-element-styles {
62
+ h1,
63
+ h2,
64
+ h3,
65
+ h4,
66
+ h5,
67
+ h6 {
68
+ font-size: 0;
89
69
  }
90
70
  }
91
- }
92
71
 
93
- p {
94
- margin: 0; //reset default margin
95
- // @include core-typography-mixins-v3.p();
96
- }
72
+ .standard-content-box-wysiwyg-editor {
73
+ h1,
74
+ h2,
75
+ h3,
76
+ h4,
77
+ h5,
78
+ h6 {
79
+ margin-bottom: var(--heading-block-spacing);
80
+
81
+ &:last-child {
82
+ margin-bottom: 0;
83
+ }
84
+ }
85
+ p {
86
+ margin-bottom: var(--paragraph-block-spacing);
97
87
 
98
- a {
99
- text-decoration-skip-ink: auto;
100
- color: var(--link-colour);
101
- text-decoration: var(--link-decoration-style);
102
- text-decoration-color: var(--link-decoration-colour);
88
+ &:last-child {
89
+ margin-bottom: 0;
90
+ }
91
+ }
92
+ }
103
93
 
104
- strong,
105
- b {
106
- font-weight: var(--weight-bold);
94
+ p {
95
+ margin: 0; //reset default margin
96
+ // @include core-typography-mixins-v3.p();
107
97
  }
108
98
 
109
- &:hover {
110
- cursor: pointer;
111
- color: var(--link-colour-hover);
112
- text-decoration: var(--link-decoration-style-hover);
113
- text-decoration-color: var(--link-decoration-colour-hover);
99
+ a {
100
+ text-decoration-skip-ink: auto;
101
+ color: var(--link-colour);
102
+ text-decoration: var(--link-decoration-style);
103
+ text-decoration-color: var(--link-decoration-colour);
104
+
105
+ strong,
106
+ b {
107
+ font-weight: var(--weight-bold);
108
+ }
109
+
110
+ &:hover {
111
+ cursor: pointer;
112
+ color: var(--link-colour-hover);
113
+ text-decoration: var(--link-decoration-style-hover);
114
+ text-decoration-color: var(--link-decoration-colour-hover);
115
+ }
114
116
  }
115
- }
116
117
 
117
- button {
118
- &:focus {
119
- // outline: none;
120
- // appearance: none;
118
+ button {
119
+ &:focus {
120
+ // outline: none;
121
+ // appearance: none;
122
+ }
121
123
  }
122
- }
123
124
 
124
- blockquote {
125
- margin: 0; //reset default margin
126
- quotes: '“' '”' '‘' '’';
127
- font-weight: bold;
125
+ blockquote {
126
+ margin: 0; //reset default margin
127
+ quotes: '“' '”' '‘' '’';
128
+ font-weight: bold;
129
+
130
+ &::before {
131
+ content: open-quote;
132
+ }
128
133
 
129
- &::before {
130
- content: open-quote;
134
+ &::after {
135
+ content: close-quote;
136
+ }
131
137
  }
132
138
 
133
- &::after {
134
- content: close-quote;
139
+ figure,
140
+ figcaption,
141
+ dl,
142
+ dd {
143
+ margin: 0;
135
144
  }
136
- }
137
145
 
138
- figure,
139
- figcaption,
140
- dl,
141
- dd {
142
- margin: 0;
143
- }
146
+ q {
147
+ &::before {
148
+ content: open-quote;
149
+ }
144
150
 
145
- q {
146
- &::before {
147
- content: open-quote;
151
+ &::after {
152
+ content: close-quote;
153
+ }
148
154
  }
149
155
 
150
- &::after {
151
- content: close-quote;
156
+ ol {
157
+ list-style-type: decimal;
152
158
  }
153
- }
154
-
155
- ol {
156
- list-style-type: decimal;
157
- }
158
- ul {
159
- list-style-type: disc;
160
- }
161
- li {
162
- // @include core-typography-mixins-v3.p();
163
- }
164
- ol,
165
- ul {
166
- padding: 0; //reset default padding
167
- margin: 0; //reset default margin
168
- // font-family: var(--secondary-font-family);
169
- margin-bottom: var(--paragraph-block-spacing);
170
- list-style-position: inside;
171
- &:last-child {
172
- margin-bottom: 0;
159
+ ul {
160
+ list-style-type: disc;
173
161
  }
174
162
  li {
175
- margin-bottom: var(--list-item-block-spacing);
176
- line-height: var(--list-item-line-height);
177
- letter-spacing: var(--list-item-letter-spacing);
163
+ // @include core-typography-mixins-v3.p();
164
+ }
165
+ ol,
166
+ ul {
167
+ padding: 0; //reset default padding
168
+ margin: 0; //reset default margin
169
+ // font-family: var(--secondary-font-family);
170
+ margin-bottom: var(--paragraph-block-spacing);
171
+ list-style-position: inside;
178
172
  &:last-child {
179
173
  margin-bottom: 0;
180
174
  }
175
+ li {
176
+ margin-bottom: var(--list-item-block-spacing);
177
+ line-height: var(--list-item-line-height);
178
+ letter-spacing: var(--list-item-letter-spacing);
179
+ &:last-child {
180
+ margin-bottom: 0;
181
+ }
182
+ }
181
183
  }
182
- }
183
184
 
184
- html {
185
- min-height: 100%;
186
- // container-type: inline-size;
187
- &.lock-position {
188
- @include core-mixins-v3.lockPosition();
185
+ html {
186
+ min-height: 100%;
187
+ // container-type: inline-size;
188
+ &.lock-position {
189
+ @include core-mixins-v3.lockPosition();
190
+ }
189
191
  }
190
- }
191
192
 
192
- .lazy-fade {
193
- opacity: 0;
194
- }
195
- .loaded:not(.cmpl-block-animations) {
196
- opacity: 1;
197
- }
198
-
199
- .js-enabled-hide {
200
- display: none;
201
- }
193
+ .lazy-fade {
194
+ opacity: 0;
195
+ }
196
+ .loaded:not(.cmpl-block-animations) {
197
+ opacity: 1;
198
+ }
202
199
 
203
- body {
204
- display: flex;
205
- flex-direction: column;
206
- scroll-behavior: smooth;
207
- text-rendering: optimizeSpeed;
208
- margin: 0; //reset default margin
209
- padding: 0; //reset default padding
210
- height: auto;
211
- min-height: 100vh;
212
- position: relative;
213
- background: var(--body-background-colour);
214
- --default-text-colour-mobile: var(--theme-primary-text-colour);
215
- color: var(--default-text-colour-mobile);
216
-
217
- @include core-mixins-v3.device(breakpoints.$tabLandscape) {
218
- --default-text-colour-desktop: var(--theme-primary-text-colour);
219
- color: var(--default-text-colour-desktop);
200
+ .js-enabled-hide {
201
+ display: none;
220
202
  }
221
203
 
222
- &.lock-position {
223
- @include core-mixins-v3.lockPosition();
204
+ body {
205
+ display: flex;
206
+ flex-direction: column;
207
+ scroll-behavior: smooth;
208
+ text-rendering: optimizeSpeed;
209
+ margin: 0; //reset default margin
210
+ padding: 0; //reset default padding
211
+ height: auto;
212
+ min-height: 100vh;
213
+ position: relative;
214
+ background: var(--body-background-colour);
215
+ --default-text-colour-mobile: var(--theme-primary-text-colour);
216
+ color: var(--default-text-colour-mobile);
217
+
218
+ @include core-mixins-v3.device(breakpoints.$tabLandscape) {
219
+ --default-text-colour-desktop: var(--theme-primary-text-colour);
220
+ color: var(--default-text-colour-desktop);
221
+ }
222
+
223
+ &.lock-position {
224
+ @include core-mixins-v3.lockPosition();
225
+ }
226
+
227
+ &.hide-nav {
228
+ .site-header {
229
+ display: none;
230
+ }
231
+ }
224
232
  }
225
233
 
226
- &.hide-nav {
227
- .site-header {
228
- display: none;
234
+ .body-container-background-image,
235
+ .page-container-background-image {
236
+ &__picture {
237
+ height: 100%;
238
+ position: var(--body-background-image-position-type);
239
+ inset: 0;
240
+ }
241
+
242
+ &__image {
243
+ height: 100%;
244
+ object-fit: var(--body-background-image-fit);
245
+ object-position: var(--body-background-image-position);
229
246
  }
230
247
  }
231
- }
232
248
 
233
- .body-container-background-image,
234
- .page-container-background-image {
235
- &__picture {
236
- height: 100%;
237
- position: var(--body-background-image-position-type);
249
+ .body-container-background-video {
250
+ position: fixed;
251
+ object-fit: cover;
238
252
  inset: 0;
253
+ width: 100%;
239
254
  }
240
255
 
241
- &__image {
242
- height: 100%;
243
- object-fit: var(--body-background-image-fit);
244
- object-position: var(--body-background-image-position);
256
+ img {
257
+ width: 100%;
258
+ height: auto;
259
+ display: block;
245
260
  }
246
- }
247
261
 
248
- .body-container-background-video {
249
- position: fixed;
250
- object-fit: cover;
251
- inset: 0;
252
- width: 100%;
253
- }
254
-
255
- img {
256
- width: 100%;
257
- height: auto;
258
- display: block;
259
- }
260
-
261
- main {
262
- height: auto;
263
- width: 100%;
264
- max-width: var(--global-content-max-width-main);
265
- margin-inline: auto;
266
- background-image: var(--main-container-background-image);
267
- background-repeat: repeat;
268
- }
262
+ main {
263
+ height: auto;
264
+ width: 100%;
265
+ max-width: var(--global-content-max-width-main);
266
+ margin-inline: auto;
267
+ background-image: var(--main-container-background-image);
268
+ background-repeat: repeat;
269
+ }
269
270
 
270
- header,
271
- footer,
272
- section {
273
- width: 100%;
274
- max-width: 100%;
275
- }
276
- section[data-assetkey] {
277
- // container-type: inline-size;
278
- }
279
- .site-footer-block {
280
- margin-top: auto;
281
- }
282
- .grecaptcha-badge {
283
- z-index: 50;
284
- bottom: 0 !important;
285
- }
271
+ header,
272
+ footer,
273
+ section {
274
+ width: 100%;
275
+ max-width: 100%;
276
+ }
277
+ section[data-assetkey] {
278
+ // container-type: inline-size;
279
+ }
280
+ .site-footer-block {
281
+ margin-top: auto;
282
+ }
283
+ .grecaptcha-badge {
284
+ z-index: 50;
285
+ bottom: 0 !important;
286
+ }
286
287
 
287
- /* Remove all animations and transitions for people that prefer not to see them */
288
- @media (prefers-reduced-motion: reduce) {
289
- * {
290
- animation-duration: 0.01ms !important;
291
- animation-iteration-count: 1 !important;
292
- transition-duration: 0.01ms !important;
293
- scroll-behavior: auto !important;
294
- transition: 0.01ms !important;
288
+ /* Remove all animations and transitions for people that prefer not to see them */
289
+ @media (prefers-reduced-motion: reduce) {
290
+ * {
291
+ animation-duration: 0.01ms !important;
292
+ animation-iteration-count: 1 !important;
293
+ transition-duration: 0.01ms !important;
294
+ scroll-behavior: auto !important;
295
+ transition: 0.01ms !important;
296
+ }
295
297
  }
296
298
  }
297
299
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@total_onion/onion-library",
3
- "version": "2.0.194",
3
+ "version": "2.0.196",
4
4
  "description": "Component library",
5
5
  "main": "index.js",
6
6
  "scripts": {