@total_onion/onion-library 2.0.20 → 2.0.23

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 (19) hide show
  1. package/components/block-accordion-v3/accordion-v3.scss +2 -2
  2. package/components/block-post-info-v3/post-info-v3.js +0 -1
  3. package/components/block-post-info-v3/post-info-v3.scss +2 -2
  4. package/components/block-product-info-v3/product-info-v3.scss +2 -3
  5. package/components/block-standard-content-v3/standard-content-v3.scss +2 -2
  6. package/components/{component-content-container-settings-v3/content-container-settings-v3.scss → component-content-box-settings-v3/content-box-settings-v3.scss} +15 -15
  7. package/components/component-content-box-settings-v3/content-box-settings-v3.twig +44 -44
  8. package/components/component-content-box-v3/content-box-v3.js +6 -0
  9. package/components/{component-content-container-v3/content-container-v3.scss → component-content-box-v3/content-box-v3.scss} +3 -3
  10. package/package.json +1 -1
  11. package/public/block-accordion-v3/accordion-v3.css +81 -81
  12. package/public/block-carousel-multi-layout-v3/carousel-multi-layout-v3.css +0 -709
  13. package/public/block-post-info-v3/post-info-v3.css +81 -81
  14. package/public/block-product-info-v3/product-info-v3.css +81 -81
  15. package/public/block-smash-balloon-social-media-v3/smash-balloon-social-media-v3.css +2 -1
  16. package/public/block-standard-content-v3/standard-content-v3.css +81 -81
  17. package/components/block-post-info-v3/post-info-v3-extra.scss +0 -4
  18. package/components/block-product-info-v3/product-info-v3-extra.scss +0 -9
  19. package/components/component-content-container-v3/content-container-v3.js +0 -39
package/components/block-accordion-v3/accordion-v3.scss CHANGED
@@ -1,10 +1,10 @@
1
1
  @use '../fields-core-mixins-v3/core-mixins-v3';
2
2
  @use '../fields-core-functions-v3/core-functions-v3';
3
- @use '../component-content-container-settings-v3/content-container-settings-v3';
3
+ @use '../component-content-box-settings-v3/content-box-settings-v3';
4
4
  @use '../../breakpoints';
5
5
 
6
6
  .accordion-v3 {
7
- @include content-container-settings-v3.contentContainerSettingsV3();
7
+ @include content-box-settings-v3.contentBoxSettingsV3();
8
8
  width: 100%;
9
9
  pointer-events: all;
10
10
  display: flex;
package/components/block-post-info-v3/post-info-v3.js CHANGED
@@ -4,7 +4,6 @@ export default function postinfov3Js(options = {}) {
4
4
  const {block} = options;
5
5
  try {
6
6
  // const videoController = new videocontroller(block);
7
- extraJs(block);
8
7
  } catch (error) {
9
8
  console.error(error);
10
9
  }
package/components/block-post-info-v3/post-info-v3.scss CHANGED
@@ -1,6 +1,6 @@
1
1
  @use '../fields-core-mixins-v3/core-mixins-v3';
2
2
  @use '../fields-core-functions-v3/core-functions-v3';
3
- @use '../component-content-container-settings-v3/content-container-settings-v3';
3
+ @use '../component-content-box-settings-v3/content-box-settings-v3';
4
4
  @use '../component-grid-layout-container-v3/grid-layout-container-v3';
5
5
  @use '../component-grid-layout-element-v3/grid-layout-element-v3';
6
6
  @use '../component-element-positioning-v3/element-positioning-v3';
@@ -13,7 +13,7 @@
13
13
  display: grid;
14
14
  grid-auto-columns: 1fr;
15
15
  grid-template: 'main' / 1fr;
16
- @include content-container-settings-v3.contentContainerSettingsV3();
16
+ @include content-box-settings-v3.contentBoxSettingsV3();
17
17
  @include grid-layout-container-v3.gridLayoutContainer();
18
18
  @include social-media-share-v3.social-media-share();
19
19
  @include better-reviews-v3.better-reviews();
package/components/block-product-info-v3/product-info-v3.scss CHANGED
@@ -3,7 +3,7 @@
3
3
  @use '../component-grid-layout-container-v3/grid-layout-container-v3';
4
4
  @use '../component-grid-layout-element-v3/grid-layout-element-v3';
5
5
  @use '../component-element-positioning-v3/element-positioning-v3';
6
- @use '../component-content-container-settings-v3/content-container-settings-v3';
6
+ @use '../component-content-box-settings-v3/content-box-settings-v3';
7
7
  @use '../component-gradient-overlay-v3/gradient-overlay-v3';
8
8
  @use '../../breakpoints';
9
9
 
@@ -11,7 +11,7 @@
11
11
  display: grid;
12
12
  grid-auto-columns: 1fr;
13
13
  grid-template: 'main' / 1fr;
14
- @include content-container-settings-v3.contentContainerSettingsV3();
14
+ @include content-box-settings-v3.contentBoxSettingsV3();
15
15
  @include grid-layout-container-v3.gridLayoutContainer();
16
16
  &__post-cover-link {
17
17
  grid-area: unset;
@@ -167,5 +167,4 @@
167
167
  width: auto;
168
168
  @include grid-layout-element-v3.gridLayoutElement();
169
169
  }
170
- // @include product-info-v3-extra.additionalStyles();
171
170
  }
package/components/block-standard-content-v3/standard-content-v3.scss CHANGED
@@ -1,9 +1,9 @@
1
1
  @use '../fields-core-mixins-v3/core-mixins-v3';
2
- @use '../component-content-container-v3/content-container-v3';
2
+ @use '../component-content-box-v3/content-box-v3';
3
3
 
4
4
  .standard-content-v3 {
5
5
  display: grid;
6
6
  grid-template: 'main' / 1fr;
7
7
  @include core-mixins-v3.responsiveShowHide(grid);
8
- @include content-container-v3.contentContainerV3();
8
+ @include content-box-v3.contentBoxV3();
9
9
  }
package/components/{component-content-container-settings-v3/content-container-settings-v3.scss → component-content-box-settings-v3/content-box-settings-v3.scss} RENAMED
@@ -3,7 +3,7 @@
3
3
  @use '../component-box-shadow-v3/box-shadow-v3';
4
4
  @use '../../breakpoints';
5
5
 
6
- @mixin contentContainerSettingsV3() {
6
+ @mixin contentBoxSettingsV3() {
7
7
  &__inner-container {
8
8
  grid-area: main;
9
9
  place-self: var(--content-box-vert-align-mobile)
@@ -39,19 +39,19 @@
39
39
  );
40
40
  margin: calc(
41
41
  var(--global-inline-spacing) *
42
- var(--content-container-top-margin-mobile)
42
+ var(--content-box-top-margin-mobile)
43
43
  )
44
44
  calc(
45
45
  var(--global-inline-spacing) *
46
- var(--content-container-right-margin-mobile)
46
+ var(--content-box-right-margin-mobile)
47
47
  )
48
48
  calc(
49
49
  var(--global-inline-spacing) *
50
- var(--content-container-bottom-margin-mobile)
50
+ var(--content-box-bottom-margin-mobile)
51
51
  )
52
52
  calc(
53
53
  var(--global-inline-spacing) *
54
- var(--content-container-left-margin-mobile)
54
+ var(--content-box-left-margin-mobile)
55
55
  );
56
56
  column-gap: var(
57
57
  --content-items-micro-gap-mobile,
@@ -79,19 +79,19 @@
79
79
  );
80
80
  margin: calc(
81
81
  var(--global-inline-spacing) *
82
- var(--content-container-top-margin-portrait)
82
+ var(--content-box-top-margin-portrait)
83
83
  )
84
84
  calc(
85
85
  var(--global-inline-spacing) *
86
- var(--content-container-right-margin-portrait)
86
+ var(--content-box-right-margin-portrait)
87
87
  )
88
88
  calc(
89
89
  var(--global-inline-spacing) *
90
- var(--content-container-bottom-margin-portrait)
90
+ var(--content-box-bottom-margin-portrait)
91
91
  )
92
92
  calc(
93
93
  var(--global-inline-spacing) *
94
- var(--content-container-left-margin-portrait)
94
+ var(--content-box-left-margin-portrait)
95
95
  );
96
96
  }
97
97
 
@@ -125,30 +125,30 @@
125
125
  );
126
126
  margin: calc(
127
127
  var(--global-inline-spacing) *
128
- var(--content-container-top-margin)
128
+ var(--content-box-top-margin)
129
129
  )
130
130
  calc(
131
131
  var(--global-inline-spacing) *
132
- var(--content-container-right-margin)
132
+ var(--content-box-right-margin)
133
133
  )
134
134
  calc(
135
135
  var(--global-inline-spacing) *
136
- var(--content-container-bottom-margin)
136
+ var(--content-box-bottom-margin)
137
137
  )
138
138
  calc(
139
139
  var(--global-inline-spacing) *
140
- var(--content-container-left-margin)
140
+ var(--content-box-left-margin)
141
141
  );
142
142
  }
143
143
 
144
144
  @include box-shadow-v3.boxShadow();
145
145
  }
146
- &__content-container {
146
+ &__content-box {
147
147
  max-width: var(--wysiwyg-max-width-mobile);
148
148
  margin-inline: auto;
149
149
  display: grid;
150
150
  word-break: normal;
151
- width: var(--content-container-width, 100%);
151
+ width: var(--content-box-width, 100%);
152
152
  -webkit-text-stroke: core-functions-v3.fontSize(
153
153
  var(--text-stroke-width),
154
154
  'static'
package/components/component-content-box-settings-v3/content-box-settings-v3.twig CHANGED
@@ -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}}
package/components/component-content-box-v3/content-box-v3.js ADDED
@@ -0,0 +1,6 @@
1
+ export default function contentBoxJs(block) {
2
+ if (!block) {
3
+ return;
4
+ }
5
+
6
+ }
package/components/{component-content-container-v3/content-container-v3.scss → component-content-box-v3/content-box-v3.scss} RENAMED
@@ -1,11 +1,11 @@
1
- @use '../component-content-container-settings-v3/content-container-settings-v3';
1
+ @use '../component-content-box-settings-v3/content-box-settings-v3';
2
2
  @use '../component-content-image-v3/content-image-v3';
3
3
  @use '../component-accent-text-v3/accent-text-v3';
4
4
  @use '../component-nav-menu-v3/nav-menu-v3';
5
5
  @use '../component-blockquote-v3/blockquote-v3';
6
6
 
7
- @mixin contentContainerV3() {
8
- @include content-container-settings-v3.contentContainerSettingsV3();
7
+ @mixin contentBoxV3() {
8
+ @include content-box-settings-v3.contentBoxSettingsV3();
9
9
  @include nav-menu-v3.navMenuV3();
10
10
  @include blockquote-v3.blockquoteV3();
11
11
  @include accent-text-v3.accentTextV3();
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@total_onion/onion-library",
3
- "version": "2.0.20",
3
+ "version": "2.0.23",
4
4
  "description": "Component library",
5
5
  "main": "index.js",
6
6
  "scripts": {
package/public/block-accordion-v3/accordion-v3.css CHANGED
@@ -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
  }