@total_onion/onion-library 2.0.22 → 2.0.24

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.
@@ -0,0 +1,18 @@
1
+ /* eslint-disable global-require */
2
+ require('dotenv').config();
3
+ const fs = require( 'fs' );
4
+ const themePath = process.env.THEME_PATH || 'web/wp-content/themes/global-theme';
5
+
6
+ const paths = {
7
+ createJsAssets:
8
+ `${themePath}/assets/js/modules/jsAssets.js`,
9
+ createPreviewScss:
10
+ `${themePath}/assets/scss/modules/dynamicBlocksPreview.scss`,
11
+ };
12
+
13
+ Object.keys( paths ).forEach( ( key ) => {
14
+ if ( ! fs.existsSync( paths[ key ] ) ) {
15
+ console.log( `creating missing assets with ${ key }` );
16
+ require( 'child_process' ).fork( `./node_modules/@pernod-ricard-global-cms/jsbuildutils/${ key }.js` );
17
+ }
18
+ } );
@@ -17,46 +17,46 @@
17
17
 
18
18
  {% set enableAdvancedContentBoxSettings = fields.enable_advanced_content_box_settings %}
19
19
 
20
- {% set contentBoxTopPaddingValue = (enableAdvancedContentBoxSettings ? fields.content_box_padding_desktop_top : fields.content_box_padding) %}
21
- {% set contentBoxRightPaddingValue = (enableAdvancedContentBoxSettings ? fields.content_box_padding_desktop_right : fields.content_box_padding) %}
22
- {% set contentBoxBottomPaddingValue = (enableAdvancedContentBoxSettings ? fields.content_box_padding_desktop_bottom : fields.content_box_padding) %}
23
- {% set contentBoxLeftPaddingValue = (enableAdvancedContentBoxSettings ? fields.content_box_padding_desktop_left : fields.content_box_padding) %}
20
+ {% set contentBoxTopPaddingValue = fields.content_box_padding_desktop_top %}
21
+ {% set contentBoxRightPaddingValue = fields.content_box_padding_desktop_right %}
22
+ {% set contentBoxBottomPaddingValue = fields.content_box_padding_desktop_bottom %}
23
+ {% set contentBoxLeftPaddingValue = fields.content_box_padding_desktop_left %}
24
24
 
25
- {% set contentContainerTopMarginValue = (enableAdvancedContentBoxSettings ? fields.content_container_margin_desktop_top : fields.content_container_margin) %}
26
- {% set contentContainerRightMarginValue = (enableAdvancedContentBoxSettings ? fields.content_container_margin_desktop_right : fields.content_container_margin) %}
27
- {% set contentContainerBottomMarginValue = (enableAdvancedContentBoxSettings ? fields.content_container_margin_desktop_bottom : fields.content_container_margin) %}
28
- {% set contentContainerLeftMarginValue = (enableAdvancedContentBoxSettings ? fields.content_container_margin_desktop_left : fields.content_container_margin) %}
25
+ {% set contentBoxTopMarginValue = fields.content_box_margin_desktop_top %}
26
+ {% set contentBoxRightMarginValue = fields.content_box_margin_desktop_right %}
27
+ {% set contentBoxBottomMarginValue = fields.content_box_margin_desktop_bottom %}
28
+ {% set contentBoxLeftMarginValue = fields.content_box_margin_desktop_left %}
29
29
 
30
30
  {% set contentBoxTopPadding = '--content-box-top-padding-mult:' ~ contentBoxTopPaddingValue ~ ';' %}
31
31
  {% set contentBoxRightPadding = '--content-box-right-padding-mult:' ~ contentBoxRightPaddingValue ~ ';' %}
32
32
  {% set contentBoxBottomPadding = '--content-box-bottom-padding-mult:' ~ contentBoxBottomPaddingValue ~ ';' %}
33
33
  {% set contentBoxLeftPadding = '--content-box-left-padding-mult:' ~ contentBoxLeftPaddingValue ~ ';' %}
34
34
 
35
- {% set contentContainerTopMargin = '--content-container-top-margin:' ~ contentContainerTopMarginValue ~ ';' %}
36
- {% set contentContainerRightMargin = '--content-container-right-margin:' ~ contentContainerRightMarginValue ~ ';' %}
37
- {% set contentContainerBottomMargin = '--content-container-bottom-margin:' ~ contentContainerBottomMarginValue ~ ';' %}
38
- {% set contentContainerLeftMargin = '--content-container-left-margin:' ~ contentContainerLeftMarginValue ~ ';' %}
35
+ {% set contentBoxTopMargin = '--content-box-top-margin:' ~ contentBoxTopMarginValue ~ ';' %}
36
+ {% set contentBoxRightMargin = '--content-box-right-margin:' ~ contentBoxRightMarginValue ~ ';' %}
37
+ {% set contentBoxBottomMargin = '--content-box-bottom-margin:' ~ contentBoxBottomMarginValue ~ ';' %}
38
+ {% set contentBoxLeftMargin = '--content-box-left-margin:' ~ contentBoxLeftMarginValue ~ ';' %}
39
39
 
40
40
  {% set contentBoxPaddingTopMobileValue = contentBoxTopPaddingValue %}
41
41
  {% set contentBoxPaddingRightMobileValue = contentBoxRightPaddingValue %}
42
42
  {% set contentBoxPaddingBottomMobileValue = contentBoxBottomPaddingValue %}
43
43
  {% set contentBoxPaddingLeftMobileValue = contentBoxLeftPaddingValue %}
44
44
 
45
- {% set contentContainerTopMarginMobileValue = contentContainerTopMarginValue %}
46
- {% set contentContainerRightMarginMobileValue = contentContainerRightMarginValue %}
47
- {% set contentContainerBottomMarginMobileValue = contentContainerBottomMarginValue %}
48
- {% set contentContainerLeftMarginMobileValue = contentContainerLeftMarginValue %}
45
+ {% set contentBoxTopMarginMobileValue = contentBoxTopMarginValue %}
46
+ {% set contentBoxRightMarginMobileValue = contentBoxRightMarginValue %}
47
+ {% set contentBoxBottomMarginMobileValue = contentBoxBottomMarginValue %}
48
+ {% set contentBoxLeftMarginMobileValue = contentBoxLeftMarginValue %}
49
49
 
50
50
  {% if fields.enable_mobile_content_box_layout %}
51
- {% set contentBoxPaddingTopMobileValue = (enableAdvancedContentBoxSettings ? fields.content_box_padding_mobile_top : fields.content_box_padding_mobile) %}
52
- {% set contentBoxPaddingRightMobileValue = (enableAdvancedContentBoxSettings ? fields.content_box_padding_mobile_right : fields.content_box_padding_mobile) %}
53
- {% set contentBoxPaddingBottomMobileValue = (enableAdvancedContentBoxSettings ? fields.content_box_padding_mobile_bottom : fields.content_box_padding_mobile) %}
54
- {% set contentBoxPaddingLeftMobileValue = (enableAdvancedContentBoxSettings ? fields.content_box_padding_mobile_left : fields.content_box_padding_mobile) %}
51
+ {% set contentBoxPaddingTopMobileValue = fields.content_box_padding_mobile_top %}
52
+ {% set contentBoxPaddingRightMobileValue = fields.content_box_padding_mobile_right %}
53
+ {% set contentBoxPaddingBottomMobileValue = fields.content_box_padding_mobile_bottom %}
54
+ {% set contentBoxPaddingLeftMobileValue = fields.content_box_padding_mobile_left %}
55
55
 
56
- {% set contentContainerTopMarginMobileValue = (enableAdvancedContentBoxSettings ? fields.content_container_margin_mobile_top : fields.content_container_margin_mobile) %}
57
- {% set contentContainerRightMarginMobileValue = (enableAdvancedContentBoxSettings ? fields.content_container_margin_mobile_right : fields.content_container_margin_mobile) %}
58
- {% set contentContainerBottomMarginMobileValue = (enableAdvancedContentBoxSettings ? fields.content_container_margin_mobile_bottom : fields.content_container_margin_mobile) %}
59
- {% set contentContainerLeftMarginMobileValue = (enableAdvancedContentBoxSettings ? fields.content_container_margin_mobile_left : fields.content_container_margin_mobile) %}
56
+ {% set contentBoxTopMarginMobileValue = fields.content_box_margin_mobile_top %}
57
+ {% set contentBoxRightMarginMobileValue = fields.content_box_margin_mobile_right %}
58
+ {% set contentBoxBottomMarginMobileValue = fields.content_box_margin_mobile_bottom %}
59
+ {% set contentBoxLeftMarginMobileValue = fields.content_box_margin_mobile_left %}
60
60
 
61
61
  {% endif %}
62
62
 
@@ -65,10 +65,10 @@
65
65
  {% set contentBoxPaddingBottomMobile = '--content-box-bottom-padding-mult-mobile:' ~ contentBoxPaddingBottomMobileValue ~ ';' %}
66
66
  {% set contentBoxPaddingLeftMobile = '--content-box-left-padding-mult-mobile:' ~ contentBoxPaddingLeftMobileValue ~ ';' %}
67
67
 
68
- {% set contentContainerTopMarginMobile = '--content-container-top-margin-mobile:' ~ contentContainerTopMarginMobileValue ~ ';' %}
69
- {% set contentContainerRightMarginMobile = '--content-container-right-margin-mobile:' ~ contentContainerRightMarginMobileValue ~ ';' %}
70
- {% set contentContainerBottomMarginMobile = '--content-container-bottom-margin-mobile:' ~ contentContainerBottomMarginMobileValue ~ ';' %}
71
- {% set contentContainerLeftMarginMobile = '--content-container-left-margin-mobile:' ~ contentContainerLeftMarginMobileValue ~ ';' %}
68
+ {% set contentBoxTopMarginMobile = '--content-box-top-margin-mobile:' ~ contentBoxTopMarginMobileValue ~ ';' %}
69
+ {% set contentBoxRightMarginMobile = '--content-box-right-margin-mobile:' ~ contentBoxRightMarginMobileValue ~ ';' %}
70
+ {% set contentBoxBottomMarginMobile = '--content-box-bottom-margin-mobile:' ~ contentBoxBottomMarginMobileValue ~ ';' %}
71
+ {% set contentBoxLeftMarginMobile = '--content-box-left-margin-mobile:' ~ contentBoxLeftMarginMobileValue ~ ';' %}
72
72
 
73
73
 
74
74
  {% set contentBoxPaddingTopPortrait = '--content-box-top-padding-mult-portrait:' ~ contentBoxPaddingTopMobileValue ~ ';' %}
@@ -76,21 +76,21 @@
76
76
  {% set contentBoxPaddingBottomPortrait = '--content-box-bottom-padding-mult-portrait:' ~ contentBoxPaddingBottomMobileValue ~ ';' %}
77
77
  {% set contentBoxPaddingLeftPortrait = '--content-box-left-padding-mult-portrait:' ~ contentBoxPaddingLeftMobileValue ~ ';' %}
78
78
 
79
- {% set contentContainerTopMarginPortrait = '--content-container-top-margin-portrait:' ~ contentContainerTopMarginMobileValue ~ ';' %}
80
- {% set contentContainerRightMarginPortrait = '--content-container-right-margin-portrait:' ~ contentContainerRightMarginMobileValue ~ ';' %}
81
- {% set contentContainerBottomMarginPortrait = '--content-container-bottom-margin-portrait:' ~ contentContainerBottomMarginMobileValue ~ ';' %}
82
- {% set contentContainerLeftMarginPortrait = '--content-container-left-margin-portrait:' ~ contentContainerLeftMarginMobileValue ~ ';' %}
79
+ {% set contentBoxTopMarginPortrait = '--content-box-top-margin-portrait:' ~ contentBoxTopMarginMobileValue ~ ';' %}
80
+ {% set contentBoxRightMarginPortrait = '--content-box-right-margin-portrait:' ~ contentBoxRightMarginMobileValue ~ ';' %}
81
+ {% set contentBoxBottomMarginPortrait = '--content-box-bottom-margin-portrait:' ~ contentBoxBottomMarginMobileValue ~ ';' %}
82
+ {% set contentBoxLeftMarginPortrait = '--content-box-left-margin-portrait:' ~ contentBoxLeftMarginMobileValue ~ ';' %}
83
83
 
84
84
  {% if fields.enable_portrait_content_box_layout %}
85
- {% set contentBoxPaddingTopPortrait = '--content-box-top-padding-mult-portrait:' ~ (enableAdvancedContentBoxSettings ? fields.content_box_padding_portrait_top) ~ ';' %}
86
- {% set contentBoxPaddingRightPortrait = '--content-box-right-padding-mult-portrait:' ~ (enableAdvancedContentBoxSettings ? fields.content_box_padding_portrait_right) ~ ';' %}
87
- {% set contentBoxPaddingBottomPortrait = '--content-box-bottom-padding-mult-portrait:' ~ (enableAdvancedContentBoxSettings ? fields.content_box_padding_portrait_bottom) ~ ';' %}
88
- {% set contentBoxPaddingLeftPortrait = '--content-box-left-padding-mult-portrait:' ~ (enableAdvancedContentBoxSettings ? fields.content_box_padding_portrait_left) ~ ';' %}
89
-
90
- {% set contentContainerTopMarginPortrait = '--content-container-top-margin-portrait:' ~ (enableAdvancedContentBoxSettings ? fields.content_container_margin_portrait_top) ~ ';' %}
91
- {% set contentContainerRightMarginPortrait = '--content-container-right-margin-portrait:' ~ (enableAdvancedContentBoxSettings ? fields.content_container_margin_portrait_right) ~ ';' %}
92
- {% set contentContainerBottomMarginPortrait = '--content-container-bottom-margin-portrait:' ~ (enableAdvancedContentBoxSettings ? fields.content_container_margin_portrait_bottom) ~ ';' %}
93
- {% set contentContainerLeftMarginPortrait = '--content-container-left-margin-portrait:' ~ (enableAdvancedContentBoxSettings ? fields.content_container_margin_portrait_left) ~ ';' %}
85
+ {% set contentBoxPaddingTopPortrait = '--content-box-top-padding-mult-portrait:' ~ fields.content_box_padding_portrait_top ~ ';' %}
86
+ {% set contentBoxPaddingRightPortrait = '--content-box-right-padding-mult-portrait:' ~ fields.content_box_padding_portrait_right ~ ';' %}
87
+ {% set contentBoxPaddingBottomPortrait = '--content-box-bottom-padding-mult-portrait:' ~ fields.content_box_padding_portrait_bottom ~ ';' %}
88
+ {% set contentBoxPaddingLeftPortrait = '--content-box-left-padding-mult-portrait:' ~ fields.content_box_padding_portrait_left ~ ';' %}
89
+
90
+ {% set contentBoxTopMarginPortrait = '--content-box-top-margin-portrait:' ~ fields.content_box_margin_portrait_top ~ ';' %}
91
+ {% set contentBoxRightMarginPortrait = '--content-box-right-margin-portrait:' ~ fields.content_box_margin_portrait_right ~ ';' %}
92
+ {% set contentBoxBottomMarginPortrait = '--content-box-bottom-margin-portrait:' ~ fields.content_box_margin_portrait_bottom ~ ';' %}
93
+ {% set contentBoxLeftMarginPortrait = '--content-box-left-margin-portrait:' ~ fields.content_box_margin_portrait_left ~ ';' %}
94
94
  {% endif %}
95
95
 
96
96
 
@@ -115,9 +115,9 @@
115
115
  {% if fields.enable_mobile_content_box_layout %}
116
116
  {% set contentItemsDirectionMobile = '--content-box-items-direction-mobile:' ~ (fields.content_items_direction_mobile|ru|default('column')) ~ ';' %}
117
117
  {% endif %}
118
- {% set contentContainerWidth = '--content-container-width: 100%;' %}
118
+ {% set contentBoxWidth = '--content-box-width: 100%;' %}
119
119
  {% if fields.content_items_direction_desktop|ru == 'row' %}
120
- {% set contentContainerWidth = '--content-container-width: auto;' %}
120
+ {% set contentBoxWidth = '--content-box-width: auto;' %}
121
121
  {% endif %}
122
122
 
123
123
 
@@ -148,7 +148,7 @@
148
148
  {% endif %}
149
149
 
150
150
  {% set gapSettings = contentItemsGapDesktop ~ microContentItemsGapDesktop ~ microContentItemsClassDesktop ~ contentItemsGapMobile ~ microContentItemsGapMobile ~ microContentItemsClassMobile %}
151
- {% set containerStyles = cbMaxWidth ~ contentBoxVertAlign ~ contentBoxHorizAlignPortrait ~ contentBoxVertAlignPortrait ~ contentBoxTopPadding ~ contentBoxRightPadding ~ contentBoxBottomPadding ~ contentBoxLeftPadding ~ contentContainerTopMargin ~ contentContainerRightMargin ~ contentContainerBottomMargin ~ contentContainerLeftMargin ~ contentBoxPaddingTopPortrait ~ contentBoxPaddingRightPortrait ~ contentBoxPaddingBottomPortrait ~ contentBoxPaddingLeftPortrait ~ contentContainerTopMarginPortrait ~ contentContainerRightMarginPortrait ~ contentContainerBottomMarginPortrait ~ contentContainerLeftMarginPortrait ~ contentBoxPaddingTopMobile ~ contentBoxPaddingRightMobile ~ contentBoxPaddingBottomMobile ~ contentBoxPaddingLeftMobile ~ contentContainerTopMarginMobile ~ contentContainerRightMarginMobile ~ contentContainerBottomMarginMobile ~ contentContainerLeftMarginMobile ~ contentBoxOverflow ~ contentContainerHorizMarginMobile ~ contentContainerVertMarginMobile ~ contentBoxPaddingHorizMobile ~ contentBoxPaddingVertMobile ~ contentBoxHorizAlign ~ contentBoxVertAlignMobile ~ contentBoxHorizAlignMobile ~ contentBoxVisibleWithVideo ~ contentContainerHorizMargin ~ contentContainerVertMargin ~ contentBoxBgColour ~ contentBoxBorderRadius ~ contentBoxBorderColour ~ contentBoxBorderWidth ~ contentBoxBorderStyle ~ contentBoxAspectRatio ~ ctaSpacingGap ~ ctaSpacingGapMobile ~ contentItemsAlignment ~ contentItemsAlignmentMobile ~ contentItemsAlignmentPortrait ~ boxShadowStyle ~ contentItemsDirectionDesktop ~ contentItemsDirectionMobile ~ contentContainerWidth ~ gapSettings %}
151
+ {% set containerStyles = cbMaxWidth ~ contentBoxVertAlign ~ contentBoxHorizAlignPortrait ~ contentBoxVertAlignPortrait ~ contentBoxTopPadding ~ contentBoxRightPadding ~ contentBoxBottomPadding ~ contentBoxLeftPadding ~ contentBoxTopMargin ~ contentBoxRightMargin ~ contentBoxBottomMargin ~ contentBoxLeftMargin ~ contentBoxPaddingTopPortrait ~ contentBoxPaddingRightPortrait ~ contentBoxPaddingBottomPortrait ~ contentBoxPaddingLeftPortrait ~ contentBoxTopMarginPortrait ~ contentBoxRightMarginPortrait ~ contentBoxBottomMarginPortrait ~ contentBoxLeftMarginPortrait ~ contentBoxPaddingTopMobile ~ contentBoxPaddingRightMobile ~ contentBoxPaddingBottomMobile ~ contentBoxPaddingLeftMobile ~ contentBoxTopMarginMobile ~ contentBoxRightMarginMobile ~ contentBoxBottomMarginMobile ~ contentBoxLeftMarginMobile ~ contentBoxOverflow ~ contentBoxHorizMarginMobile ~ contentBoxVertMarginMobile ~ contentBoxPaddingHorizMobile ~ contentBoxPaddingVertMobile ~ contentBoxHorizAlign ~ contentBoxVertAlignMobile ~ contentBoxHorizAlignMobile ~ contentBoxVisibleWithVideo ~ contentBoxHorizMargin ~ contentBoxVertMargin ~ contentBoxBgColour ~ contentBoxBorderRadius ~ contentBoxBorderColour ~ contentBoxBorderWidth ~ contentBoxBorderStyle ~ contentBoxAspectRatio ~ ctaSpacingGap ~ ctaSpacingGapMobile ~ contentItemsAlignment ~ contentItemsAlignmentMobile ~ contentItemsAlignmentPortrait ~ boxShadowStyle ~ contentItemsDirectionDesktop ~ contentItemsDirectionMobile ~ contentBoxWidth ~ gapSettings %}
152
152
 
153
153
 
154
154
  {{containerStyles}}
@@ -0,0 +1,31 @@
1
+ require('dotenv').config();
2
+ const fs = require( 'fs' );
3
+ const path = require( 'path' );
4
+ const { globSync } = require( 'glob' );
5
+ const themePath = process.env.THEME_PATH || 'web/wp-content/themes/global-theme';
6
+
7
+ const dynamicEntryPoints = globSync(`${themePath}/assets/js/blocks/*.js`)
8
+ .map((path) => {
9
+ const assetKey = path
10
+ .replace('assets/js/blocks/', '')
11
+ .replace('.js', '');
12
+ return assetKey;
13
+ });
14
+ const assetArray = dynamicEntryPoints.map((entry) => {
15
+ return { assetKey: entry };
16
+ });
17
+
18
+ const jsAssetsFilePath = path.join(themePath, 'assets/js/modules/jsAssets.js'); // Create the absolute path to the destination file
19
+
20
+ // Create directories if they don't exist
21
+ const dirPath = path.dirname(jsAssetsFilePath);
22
+ fs.mkdirSync(dirPath, { recursive: true });
23
+
24
+ const data = `// This file is auto-generated. To include assets for the lazyloader, just add your .js file to Assets/js/blocks/ and it will be included here.
25
+ const dynamicAssets = ${JSON.stringify(assetArray)};
26
+ const api = {
27
+ dynamicAssets,
28
+ };
29
+ export default api;`;
30
+
31
+ fs.writeFileSync(jsAssetsFilePath, data);
@@ -0,0 +1,35 @@
1
+ require('dotenv').config();
2
+ const fs = require('fs');
3
+ const {globSync} = require('glob');
4
+ const path = require('path');
5
+ const themePath =
6
+ process.env.THEME_PATH || 'web/wp-content/themes/global-theme';
7
+
8
+ // Create the directory path for the target file
9
+ const scssModulePath = path.join(themePath, 'assets/scss/modules');
10
+ const scssFilePath = path.join(scssModulePath, 'dynamicBlocksPreview.scss');
11
+
12
+ // Create directories if they don't exist
13
+ fs.mkdirSync(scssModulePath, {recursive: true});
14
+
15
+ // Write the initial content to the target file
16
+ fs.writeFileSync(
17
+ scssFilePath,
18
+ '// This file is auto-generated. To include assets for the lazyloader, just add your .scss file to Assets/scss/blocks/ and it will be included here.\n'
19
+ );
20
+
21
+ const dynamicEntryPoints = globSync(
22
+ `${themePath}/assets/scss/blocks/*.scss`
23
+ ).map((path) => {
24
+ const assetPath = path.replace(
25
+ 'assets/scss/blocks/',
26
+ 'Assets/scss/blocks/'
27
+ );
28
+ return assetPath;
29
+ });
30
+
31
+ const stream = fs.createWriteStream(scssFilePath, {flags: 'a'});
32
+ dynamicEntryPoints.forEach((entry) => {
33
+ stream.write(`@use '${entry}';\n`);
34
+ });
35
+ stream.end();
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@total_onion/onion-library",
3
- "version": "2.0.22",
3
+ "version": "2.0.24",
4
4
  "description": "Component library",
5
5
  "main": "index.js",
6
6
  "scripts": {
@@ -20,7 +20,7 @@
20
20
  align-items: center;
21
21
  background-color: var(--cb-bg-colour);
22
22
  padding: calc(var(--global-inline-spacing) * var(--content-box-top-padding-mult-mobile)) calc(var(--global-inline-spacing) * var(--content-box-right-padding-mult-mobile)) calc(var(--global-inline-spacing) * var(--content-box-bottom-padding-mult-mobile)) calc(var(--global-inline-spacing) * var(--content-box-left-padding-mult-mobile));
23
- margin: calc(var(--global-inline-spacing) * var(--content-container-top-margin-mobile)) calc(var(--global-inline-spacing) * var(--content-container-right-margin-mobile)) calc(var(--global-inline-spacing) * var(--content-container-bottom-margin-mobile)) calc(var(--global-inline-spacing) * var(--content-container-left-margin-mobile));
23
+ margin: calc(var(--global-inline-spacing) * var(--content-box-top-margin-mobile)) calc(var(--global-inline-spacing) * var(--content-box-right-margin-mobile)) calc(var(--global-inline-spacing) * var(--content-box-bottom-margin-mobile)) calc(var(--global-inline-spacing) * var(--content-box-left-margin-mobile));
24
24
  -moz-column-gap: var(--content-items-micro-gap-mobile, calc(var(--content-items-gap-mobile) * var(--global-inline-spacing)));
25
25
  column-gap: var(--content-items-micro-gap-mobile, calc(var(--content-items-gap-mobile) * var(--global-inline-spacing)));
26
26
  }
@@ -31,7 +31,7 @@
31
31
  justify-self: var(--content-box-horiz-align-portrait);
32
32
  place-self: var(--content-box-vert-align-portrait) var(--content-box-horiz-align-portrait);
33
33
  padding: calc(var(--global-inline-spacing) * var(--content-box-top-padding-mult-portrait)) calc(var(--global-inline-spacing) * var(--content-box-right-padding-mult-portrait)) calc(var(--global-inline-spacing) * var(--content-box-bottom-padding-mult-portrait)) calc(var(--global-inline-spacing) * var(--content-box-left-padding-mult-portrait));
34
- margin: calc(var(--global-inline-spacing) * var(--content-container-top-margin-portrait)) calc(var(--global-inline-spacing) * var(--content-container-right-margin-portrait)) calc(var(--global-inline-spacing) * var(--content-container-bottom-margin-portrait)) calc(var(--global-inline-spacing) * var(--content-container-left-margin-portrait));
34
+ margin: calc(var(--global-inline-spacing) * var(--content-box-top-margin-portrait)) calc(var(--global-inline-spacing) * var(--content-box-right-margin-portrait)) calc(var(--global-inline-spacing) * var(--content-box-bottom-margin-portrait)) calc(var(--global-inline-spacing) * var(--content-box-left-margin-portrait));
35
35
  }
36
36
  }
37
37
  @media screen and (min-width: 1024px) {
@@ -43,168 +43,168 @@
43
43
  align-self: var(--content-box-vert-align);
44
44
  justify-self: var(--content-box-horiz-align);
45
45
  place-self: var(--content-box-vert-align) var(--content-box-horiz-align);
46
- padding: calc(var(--global-content-box-padding-block) * var(--content-box-top-padding-mult)) calc(var(--global-inline-spacing) * var(--content-box-right-padding-mult)) calc(var(--global-inline-spacing) * var(--content-box-bottom-padding-mult)) calc(var(--global-inline-spacing) * var(--content-box-left-padding-mult));
47
- margin: calc(var(--global-inline-spacing) * var(--content-container-top-margin)) calc(var(--global-inline-spacing) * var(--content-container-right-margin)) calc(var(--global-inline-spacing) * var(--content-container-bottom-margin)) calc(var(--global-inline-spacing) * var(--content-container-left-margin));
46
+ padding: calc(var(--global-inline-spacing) * var(--content-box-top-padding-mult)) calc(var(--global-inline-spacing) * var(--content-box-right-padding-mult)) calc(var(--global-inline-spacing) * var(--content-box-bottom-padding-mult)) calc(var(--global-inline-spacing) * var(--content-box-left-padding-mult));
47
+ margin: calc(var(--global-inline-spacing) * var(--content-box-top-margin)) calc(var(--global-inline-spacing) * var(--content-box-right-margin)) calc(var(--global-inline-spacing) * var(--content-box-bottom-margin)) calc(var(--global-inline-spacing) * var(--content-box-left-margin));
48
48
  }
49
49
  }
50
50
  .accordion-v3__inner-container {
51
51
  box-shadow: calc(var(--box-shadow-offset-x) / var(--desktop-design-reference) * var(--screen-width-static)) calc(var(--box-shadow-offset-y) / var(--desktop-design-reference) * var(--screen-width-static)) calc(var(--box-shadow-blur) / var(--desktop-design-reference) * var(--screen-width-static)) calc(var(--box-shadow-spread) / var(--desktop-design-reference) * var(--screen-width-static)) var(--box-shadow-colour);
52
52
  }
53
- .accordion-v3__content-container {
53
+ .accordion-v3__content-box {
54
54
  max-width: var(--wysiwyg-max-width-mobile);
55
55
  margin-left: auto;
56
56
  margin-right: auto;
57
57
  display: grid;
58
58
  word-break: normal;
59
59
  width: 100%;
60
- width: var(--content-container-width, 100%);
60
+ width: var(--content-box-width, 100%);
61
61
  -webkit-text-stroke: calc(var(--text-stroke-width) / var(--desktop-design-reference) * var(--screen-width-static) * var(--font-size-multiplier)) var(--text-stroke-colour);
62
62
  }
63
- .accordion-v3__content-container:last-child {
63
+ .accordion-v3__content-box:last-child {
64
64
  margin-bottom: 0;
65
65
  }
66
- .accordion-v3__content-container {
66
+ .accordion-v3__content-box {
67
67
  color: var(--default-text-colour-mobile, var(--theme-primary-text-colour));
68
68
  }
69
69
  @media screen and (min-width: 768px) {
70
- .accordion-v3__content-container {
70
+ .accordion-v3__content-box {
71
71
  color: var(--default-text-colour-portrait, var(--default-text-colour-desktop));
72
72
  }
73
73
  }
74
74
  @media screen and (min-width: 1024px) {
75
- .accordion-v3__content-container {
75
+ .accordion-v3__content-box {
76
76
  color: var(--default-text-colour-desktop, var(--theme-primary-text-colour));
77
77
  }
78
78
  }
79
- .accordion-v3__content-container {
79
+ .accordion-v3__content-box {
80
80
  text-transform: var(--default-text-transform-mobile);
81
81
  }
82
82
  @media screen and (min-width: 768px) {
83
- .accordion-v3__content-container {
83
+ .accordion-v3__content-box {
84
84
  text-transform: var(--default-text-transform-portrait, var(--default-text-transform-desktop));
85
85
  }
86
86
  }
87
87
  @media screen and (min-width: 1024px) {
88
- .accordion-v3__content-container {
88
+ .accordion-v3__content-box {
89
89
  text-transform: var(--default-text-transform-desktop);
90
90
  }
91
91
  }
92
- .accordion-v3__content-container {
92
+ .accordion-v3__content-box {
93
93
  text-align: var(--default-text-align-mobile);
94
94
  }
95
95
  @media screen and (min-width: 768px) {
96
- .accordion-v3__content-container {
96
+ .accordion-v3__content-box {
97
97
  text-align: var(--default-text-align-portrait, var(--default-text-align-desktop));
98
98
  }
99
99
  }
100
100
  @media screen and (min-width: 1024px) {
101
- .accordion-v3__content-container {
101
+ .accordion-v3__content-box {
102
102
  text-align: var(--default-text-align-desktop);
103
103
  }
104
104
  }
105
- .accordion-v3__content-container {
105
+ .accordion-v3__content-box {
106
106
  display: block;
107
107
  display: var(--display-mobile, block);
108
108
  }
109
109
  @media screen and (min-width: 768px) {
110
- .accordion-v3__content-container {
110
+ .accordion-v3__content-box {
111
111
  display: block;
112
112
  display: var(--display-portrait, block);
113
113
  }
114
114
  }
115
115
  @media screen and (min-width: 1024px) {
116
- .accordion-v3__content-container {
116
+ .accordion-v3__content-box {
117
117
  display: block;
118
118
  display: var(--display-desktop, block);
119
119
  }
120
120
  }
121
- .accordion-v3__content-container p,
122
- .accordion-v3__content-container h1,
123
- .accordion-v3__content-container h2,
124
- .accordion-v3__content-container h3,
125
- .accordion-v3__content-container h4,
126
- .accordion-v3__content-container h5,
127
- .accordion-v3__content-container h6,
128
- .accordion-v3__content-container a,
129
- .accordion-v3__content-container li,
130
- .accordion-v3__content-container div {
121
+ .accordion-v3__content-box p,
122
+ .accordion-v3__content-box h1,
123
+ .accordion-v3__content-box h2,
124
+ .accordion-v3__content-box h3,
125
+ .accordion-v3__content-box h4,
126
+ .accordion-v3__content-box h5,
127
+ .accordion-v3__content-box h6,
128
+ .accordion-v3__content-box a,
129
+ .accordion-v3__content-box li,
130
+ .accordion-v3__content-box div {
131
131
  font-weight: var(--default-font-weight-mobile, var(--default-font-weight));
132
132
  }
133
133
  @media screen and (min-width: 768px) {
134
- .accordion-v3__content-container p,
135
- .accordion-v3__content-container h1,
136
- .accordion-v3__content-container h2,
137
- .accordion-v3__content-container h3,
138
- .accordion-v3__content-container h4,
139
- .accordion-v3__content-container h5,
140
- .accordion-v3__content-container h6,
141
- .accordion-v3__content-container a,
142
- .accordion-v3__content-container li,
143
- .accordion-v3__content-container div {
134
+ .accordion-v3__content-box p,
135
+ .accordion-v3__content-box h1,
136
+ .accordion-v3__content-box h2,
137
+ .accordion-v3__content-box h3,
138
+ .accordion-v3__content-box h4,
139
+ .accordion-v3__content-box h5,
140
+ .accordion-v3__content-box h6,
141
+ .accordion-v3__content-box a,
142
+ .accordion-v3__content-box li,
143
+ .accordion-v3__content-box div {
144
144
  font-weight: var(--default-font-weight-portrait, var(--default-font-weight));
145
145
  }
146
146
  }
147
147
  @media screen and (min-width: 1024px) {
148
- .accordion-v3__content-container p,
149
- .accordion-v3__content-container h1,
150
- .accordion-v3__content-container h2,
151
- .accordion-v3__content-container h3,
152
- .accordion-v3__content-container h4,
153
- .accordion-v3__content-container h5,
154
- .accordion-v3__content-container h6,
155
- .accordion-v3__content-container a,
156
- .accordion-v3__content-container li,
157
- .accordion-v3__content-container div {
148
+ .accordion-v3__content-box p,
149
+ .accordion-v3__content-box h1,
150
+ .accordion-v3__content-box h2,
151
+ .accordion-v3__content-box h3,
152
+ .accordion-v3__content-box h4,
153
+ .accordion-v3__content-box h5,
154
+ .accordion-v3__content-box h6,
155
+ .accordion-v3__content-box a,
156
+ .accordion-v3__content-box li,
157
+ .accordion-v3__content-box div {
158
158
  font-weight: var(--default-font-weight-desktop, var(--default-font-weight));
159
159
  }
160
160
  }
161
- .accordion-v3__content-container p,
162
- .accordion-v3__content-container h1,
163
- .accordion-v3__content-container h2,
164
- .accordion-v3__content-container h3,
165
- .accordion-v3__content-container h4,
166
- .accordion-v3__content-container h5,
167
- .accordion-v3__content-container h6,
168
- .accordion-v3__content-container a,
169
- .accordion-v3__content-container li,
170
- .accordion-v3__content-container div {
161
+ .accordion-v3__content-box p,
162
+ .accordion-v3__content-box h1,
163
+ .accordion-v3__content-box h2,
164
+ .accordion-v3__content-box h3,
165
+ .accordion-v3__content-box h4,
166
+ .accordion-v3__content-box h5,
167
+ .accordion-v3__content-box h6,
168
+ .accordion-v3__content-box a,
169
+ .accordion-v3__content-box li,
170
+ .accordion-v3__content-box div {
171
171
  font-style: var(--default-font-style-mobile);
172
172
  }
173
173
  @media screen and (min-width: 768px) {
174
- .accordion-v3__content-container p,
175
- .accordion-v3__content-container h1,
176
- .accordion-v3__content-container h2,
177
- .accordion-v3__content-container h3,
178
- .accordion-v3__content-container h4,
179
- .accordion-v3__content-container h5,
180
- .accordion-v3__content-container h6,
181
- .accordion-v3__content-container a,
182
- .accordion-v3__content-container li,
183
- .accordion-v3__content-container div {
174
+ .accordion-v3__content-box p,
175
+ .accordion-v3__content-box h1,
176
+ .accordion-v3__content-box h2,
177
+ .accordion-v3__content-box h3,
178
+ .accordion-v3__content-box h4,
179
+ .accordion-v3__content-box h5,
180
+ .accordion-v3__content-box h6,
181
+ .accordion-v3__content-box a,
182
+ .accordion-v3__content-box li,
183
+ .accordion-v3__content-box div {
184
184
  font-style: var(--default-font-style-portrait, var(--default-font-style-desktop));
185
185
  }
186
186
  }
187
187
  @media screen and (min-width: 1024px) {
188
- .accordion-v3__content-container p,
189
- .accordion-v3__content-container h1,
190
- .accordion-v3__content-container h2,
191
- .accordion-v3__content-container h3,
192
- .accordion-v3__content-container h4,
193
- .accordion-v3__content-container h5,
194
- .accordion-v3__content-container h6,
195
- .accordion-v3__content-container a,
196
- .accordion-v3__content-container li,
197
- .accordion-v3__content-container div {
188
+ .accordion-v3__content-box p,
189
+ .accordion-v3__content-box h1,
190
+ .accordion-v3__content-box h2,
191
+ .accordion-v3__content-box h3,
192
+ .accordion-v3__content-box h4,
193
+ .accordion-v3__content-box h5,
194
+ .accordion-v3__content-box h6,
195
+ .accordion-v3__content-box a,
196
+ .accordion-v3__content-box li,
197
+ .accordion-v3__content-box div {
198
198
  font-style: var(--default-font-style-desktop);
199
199
  }
200
200
  }
201
201
  @media screen and (min-width: 768px) {
202
- .accordion-v3__content-container {
202
+ .accordion-v3__content-box {
203
203
  max-width: var(--wysiwyg-max-width-portrait);
204
204
  }
205
205
  }
206
206
  @media screen and (min-width: 1024px) {
207
- .accordion-v3__content-container {
207
+ .accordion-v3__content-box {
208
208
  max-width: var(--wysiwyg-max-width);
209
209
  }
210
210
  }