@total_onion/onion-library 2.0.52 → 2.0.53

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 (8) hide show
  1. package/components/block-carousel-multi-layout-v3/carousel-multi-layout-v3.js +3 -3
  2. package/components/block-carousel-multi-layout-v3/carousel-multi-layout-v3.scss +1 -2
  3. package/components/block-featured-image-gallery-v3/featured-image-gallery-v3.scss +2 -8
  4. package/package.json +1 -1
  5. package/public/block-accordion-v3/accordion-v3.css +98 -22
  6. package/public/block-post-info-v3/post-info-v3.css +136 -22
  7. package/public/block-product-info-v3/product-info-v3.css +98 -22
  8. package/public/block-standard-content-v3/standard-content-v3.css +98 -22
package/components/block-carousel-multi-layout-v3/carousel-multi-layout-v3.js CHANGED
@@ -1,9 +1,9 @@
1
1
  import {getSwiperAssetsV2} from '@total_onion/onion-utils/onion-utils.mjs';
2
2
  import {Navigation, Pagination, Autoplay} from 'swiper/modules';
3
3
  // import Swiper and modules styles
4
- import 'swiper/css';
5
- import 'swiper/css/navigation';
6
- import 'swiper/css/pagination';
4
+ import 'swiper/css/bundle';
5
+ // import 'swiper/css/navigation';
6
+ // import 'swiper/css/pagination';
7
7
 
8
8
  export default function carouselmultilayoutv3Js(options = {}) {
9
9
  try {
package/components/block-carousel-multi-layout-v3/carousel-multi-layout-v3.scss CHANGED
@@ -2,7 +2,7 @@
2
2
  @use '../fields-core-functions-v3/core-functions-v3';
3
3
  @use '../component-element-positioning-v3/element-positioning-v3';
4
4
  @use '../../breakpoints';
5
- @use 'NodeModules/swiper/swiper-bundle.min.css';
5
+ // @use 'NodeModules/swiper/swiper-bundle.min.css';
6
6
 
7
7
  .carousel-multi-layout-v3 {
8
8
  display: grid;
@@ -25,7 +25,6 @@
25
25
  height: 100%;
26
26
  grid-area: main;
27
27
  inset: 0;
28
-
29
28
  .swiper-wrapper {
30
29
  height: 100%;
31
30
  }
package/components/block-featured-image-gallery-v3/featured-image-gallery-v3.scss CHANGED
@@ -8,9 +8,7 @@
8
8
  'featured'
9
9
  'other' / 1fr;
10
10
  grid-gap: core-functions-v3.fluidSize(var(--column-gap), 10);
11
-
12
11
  @include core-mixins-v3.device(breakpoints.$tabPortrait) {
13
- padding: var(--section-padding-desktop-tall) var(--side-padding-desktop);
14
12
  grid-template: 'featured other' / 1fr 1fr;
15
13
  grid-gap: core-functions-v3.fluidSize(10);
16
14
  }
@@ -19,22 +17,20 @@
19
17
  grid-area: featured;
20
18
  object-fit: cover;
21
19
  aspect-ratio: 1;
22
-
23
20
  @include core-mixins-v3.device(breakpoints.$tabPortrait) {
24
- height: auto;
25
21
  width: 100%;
22
+ height: auto;
26
23
  }
27
24
  }
28
25
 
29
26
  &__other-images {
30
27
  grid-area: other;
28
+ place-self: stretch;
31
29
  display: grid;
32
30
  grid-gap: core-functions-v3.fluidSize(8);
33
31
  grid-template-columns: 1fr 1fr 1fr;
34
32
  grid-template-rows: 1fr;
35
33
  grid-auto-rows: 1fr;
36
- height: 100%;
37
-
38
34
  @include core-mixins-v3.device(breakpoints.$tabPortrait) {
39
35
  grid-auto-rows: unset;
40
36
  grid-gap: core-functions-v3.fluidSize(10);
@@ -47,7 +43,6 @@
47
43
  overflow: hidden;
48
44
  box-shadow: 0px 0px 8px transparent;
49
45
  transition: box-shadow 0.2s;
50
-
51
46
  &:hover {
52
47
  box-shadow: 0px 0px 8px white;
53
48
  cursor: pointer;
@@ -60,7 +55,6 @@
60
55
  width: 100%;
61
56
  height: auto;
62
57
  transition: transform 0.5s ease-out, filter 0.5s;
63
-
64
58
  &:hover {
65
59
  filter: contrast(105%);
66
60
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@total_onion/onion-library",
3
- "version": "2.0.52",
3
+ "version": "2.0.53",
4
4
  "description": "Component library",
5
5
  "main": "index.js",
6
6
  "scripts": {
package/public/block-accordion-v3/accordion-v3.css CHANGED
@@ -50,7 +50,8 @@
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-box {
53
+ .accordion-v3__content-box,
54
+ .accordion-v3__content-container {
54
55
  max-width: var(--wysiwyg-max-width-mobile);
55
56
  margin-left: auto;
56
57
  margin-right: auto;
@@ -60,60 +61,73 @@
60
61
  width: var(--content-box-width, 100%);
61
62
  -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
63
  }
63
- .accordion-v3__content-box:last-child {
64
+ .accordion-v3__content-box:last-child,
65
+ .accordion-v3__content-container:last-child {
64
66
  margin-bottom: 0;
65
67
  }
66
- .accordion-v3__content-box {
68
+ .accordion-v3__content-box,
69
+ .accordion-v3__content-container {
67
70
  color: var(--default-text-colour-mobile, var(--theme-primary-text-colour));
68
71
  }
69
72
  @media screen and (min-width: 768px) {
70
- .accordion-v3__content-box {
73
+ .accordion-v3__content-box,
74
+ .accordion-v3__content-container {
71
75
  color: var(--default-text-colour-portrait, var(--default-text-colour-desktop));
72
76
  }
73
77
  }
74
78
  @media screen and (min-width: 1024px) {
75
- .accordion-v3__content-box {
79
+ .accordion-v3__content-box,
80
+ .accordion-v3__content-container {
76
81
  color: var(--default-text-colour-desktop, var(--theme-primary-text-colour));
77
82
  }
78
83
  }
79
- .accordion-v3__content-box {
84
+ .accordion-v3__content-box,
85
+ .accordion-v3__content-container {
80
86
  text-transform: var(--default-text-transform-mobile);
81
87
  }
82
88
  @media screen and (min-width: 768px) {
83
- .accordion-v3__content-box {
89
+ .accordion-v3__content-box,
90
+ .accordion-v3__content-container {
84
91
  text-transform: var(--default-text-transform-portrait, var(--default-text-transform-desktop));
85
92
  }
86
93
  }
87
94
  @media screen and (min-width: 1024px) {
88
- .accordion-v3__content-box {
95
+ .accordion-v3__content-box,
96
+ .accordion-v3__content-container {
89
97
  text-transform: var(--default-text-transform-desktop);
90
98
  }
91
99
  }
92
- .accordion-v3__content-box {
100
+ .accordion-v3__content-box,
101
+ .accordion-v3__content-container {
93
102
  text-align: var(--default-text-align-mobile);
94
103
  }
95
104
  @media screen and (min-width: 768px) {
96
- .accordion-v3__content-box {
105
+ .accordion-v3__content-box,
106
+ .accordion-v3__content-container {
97
107
  text-align: var(--default-text-align-portrait, var(--default-text-align-desktop));
98
108
  }
99
109
  }
100
110
  @media screen and (min-width: 1024px) {
101
- .accordion-v3__content-box {
111
+ .accordion-v3__content-box,
112
+ .accordion-v3__content-container {
102
113
  text-align: var(--default-text-align-desktop);
103
114
  }
104
115
  }
105
- .accordion-v3__content-box {
116
+ .accordion-v3__content-box,
117
+ .accordion-v3__content-container {
106
118
  display: block;
107
119
  display: var(--display-mobile, block);
108
120
  }
109
121
  @media screen and (min-width: 768px) {
110
- .accordion-v3__content-box {
122
+ .accordion-v3__content-box,
123
+ .accordion-v3__content-container {
111
124
  display: block;
112
125
  display: var(--display-portrait, block);
113
126
  }
114
127
  }
115
128
  @media screen and (min-width: 1024px) {
116
- .accordion-v3__content-box {
129
+ .accordion-v3__content-box,
130
+ .accordion-v3__content-container {
117
131
  display: block;
118
132
  display: var(--display-desktop, block);
119
133
  }
@@ -127,7 +141,17 @@
127
141
  .accordion-v3__content-box h6,
128
142
  .accordion-v3__content-box a,
129
143
  .accordion-v3__content-box li,
130
- .accordion-v3__content-box div {
144
+ .accordion-v3__content-box div,
145
+ .accordion-v3__content-container p,
146
+ .accordion-v3__content-container h1,
147
+ .accordion-v3__content-container h2,
148
+ .accordion-v3__content-container h3,
149
+ .accordion-v3__content-container h4,
150
+ .accordion-v3__content-container h5,
151
+ .accordion-v3__content-container h6,
152
+ .accordion-v3__content-container a,
153
+ .accordion-v3__content-container li,
154
+ .accordion-v3__content-container div {
131
155
  font-weight: var(--default-font-weight-mobile, var(--default-font-weight));
132
156
  }
133
157
  @media screen and (min-width: 768px) {
@@ -140,7 +164,17 @@
140
164
  .accordion-v3__content-box h6,
141
165
  .accordion-v3__content-box a,
142
166
  .accordion-v3__content-box li,
143
- .accordion-v3__content-box div {
167
+ .accordion-v3__content-box div,
168
+ .accordion-v3__content-container p,
169
+ .accordion-v3__content-container h1,
170
+ .accordion-v3__content-container h2,
171
+ .accordion-v3__content-container h3,
172
+ .accordion-v3__content-container h4,
173
+ .accordion-v3__content-container h5,
174
+ .accordion-v3__content-container h6,
175
+ .accordion-v3__content-container a,
176
+ .accordion-v3__content-container li,
177
+ .accordion-v3__content-container div {
144
178
  font-weight: var(--default-font-weight-portrait, var(--default-font-weight));
145
179
  }
146
180
  }
@@ -154,7 +188,17 @@
154
188
  .accordion-v3__content-box h6,
155
189
  .accordion-v3__content-box a,
156
190
  .accordion-v3__content-box li,
157
- .accordion-v3__content-box div {
191
+ .accordion-v3__content-box div,
192
+ .accordion-v3__content-container p,
193
+ .accordion-v3__content-container h1,
194
+ .accordion-v3__content-container h2,
195
+ .accordion-v3__content-container h3,
196
+ .accordion-v3__content-container h4,
197
+ .accordion-v3__content-container h5,
198
+ .accordion-v3__content-container h6,
199
+ .accordion-v3__content-container a,
200
+ .accordion-v3__content-container li,
201
+ .accordion-v3__content-container div {
158
202
  font-weight: var(--default-font-weight-desktop, var(--default-font-weight));
159
203
  }
160
204
  }
@@ -167,7 +211,17 @@
167
211
  .accordion-v3__content-box h6,
168
212
  .accordion-v3__content-box a,
169
213
  .accordion-v3__content-box li,
170
- .accordion-v3__content-box div {
214
+ .accordion-v3__content-box div,
215
+ .accordion-v3__content-container p,
216
+ .accordion-v3__content-container h1,
217
+ .accordion-v3__content-container h2,
218
+ .accordion-v3__content-container h3,
219
+ .accordion-v3__content-container h4,
220
+ .accordion-v3__content-container h5,
221
+ .accordion-v3__content-container h6,
222
+ .accordion-v3__content-container a,
223
+ .accordion-v3__content-container li,
224
+ .accordion-v3__content-container div {
171
225
  font-style: var(--default-font-style-mobile);
172
226
  }
173
227
  @media screen and (min-width: 768px) {
@@ -180,7 +234,17 @@
180
234
  .accordion-v3__content-box h6,
181
235
  .accordion-v3__content-box a,
182
236
  .accordion-v3__content-box li,
183
- .accordion-v3__content-box div {
237
+ .accordion-v3__content-box div,
238
+ .accordion-v3__content-container p,
239
+ .accordion-v3__content-container h1,
240
+ .accordion-v3__content-container h2,
241
+ .accordion-v3__content-container h3,
242
+ .accordion-v3__content-container h4,
243
+ .accordion-v3__content-container h5,
244
+ .accordion-v3__content-container h6,
245
+ .accordion-v3__content-container a,
246
+ .accordion-v3__content-container li,
247
+ .accordion-v3__content-container div {
184
248
  font-style: var(--default-font-style-portrait, var(--default-font-style-desktop));
185
249
  }
186
250
  }
@@ -194,17 +258,29 @@
194
258
  .accordion-v3__content-box h6,
195
259
  .accordion-v3__content-box a,
196
260
  .accordion-v3__content-box li,
197
- .accordion-v3__content-box div {
261
+ .accordion-v3__content-box div,
262
+ .accordion-v3__content-container p,
263
+ .accordion-v3__content-container h1,
264
+ .accordion-v3__content-container h2,
265
+ .accordion-v3__content-container h3,
266
+ .accordion-v3__content-container h4,
267
+ .accordion-v3__content-container h5,
268
+ .accordion-v3__content-container h6,
269
+ .accordion-v3__content-container a,
270
+ .accordion-v3__content-container li,
271
+ .accordion-v3__content-container div {
198
272
  font-style: var(--default-font-style-desktop);
199
273
  }
200
274
  }
201
275
  @media screen and (min-width: 768px) {
202
- .accordion-v3__content-box {
276
+ .accordion-v3__content-box,
277
+ .accordion-v3__content-container {
203
278
  max-width: var(--wysiwyg-max-width-portrait);
204
279
  }
205
280
  }
206
281
  @media screen and (min-width: 1024px) {
207
- .accordion-v3__content-box {
282
+ .accordion-v3__content-box,
283
+ .accordion-v3__content-container {
208
284
  max-width: var(--wysiwyg-max-width);
209
285
  }
210
286
  }
package/public/block-post-info-v3/post-info-v3.css CHANGED
@@ -56,7 +56,8 @@
56
56
  .post-info-v3__inner-container {
57
57
  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);
58
58
  }
59
- .post-info-v3__content-box {
59
+ .post-info-v3__content-box,
60
+ .post-info-v3__content-container {
60
61
  max-width: var(--wysiwyg-max-width-mobile);
61
62
  margin-left: auto;
62
63
  margin-right: auto;
@@ -66,60 +67,73 @@
66
67
  width: var(--content-box-width, 100%);
67
68
  -webkit-text-stroke: calc(var(--text-stroke-width) / var(--desktop-design-reference) * var(--screen-width-static) * var(--font-size-multiplier)) var(--text-stroke-colour);
68
69
  }
69
- .post-info-v3__content-box:last-child {
70
+ .post-info-v3__content-box:last-child,
71
+ .post-info-v3__content-container:last-child {
70
72
  margin-bottom: 0;
71
73
  }
72
- .post-info-v3__content-box {
74
+ .post-info-v3__content-box,
75
+ .post-info-v3__content-container {
73
76
  color: var(--default-text-colour-mobile, var(--theme-primary-text-colour));
74
77
  }
75
78
  @media screen and (min-width: 768px) {
76
- .post-info-v3__content-box {
79
+ .post-info-v3__content-box,
80
+ .post-info-v3__content-container {
77
81
  color: var(--default-text-colour-portrait, var(--default-text-colour-desktop));
78
82
  }
79
83
  }
80
84
  @media screen and (min-width: 1024px) {
81
- .post-info-v3__content-box {
85
+ .post-info-v3__content-box,
86
+ .post-info-v3__content-container {
82
87
  color: var(--default-text-colour-desktop, var(--theme-primary-text-colour));
83
88
  }
84
89
  }
85
- .post-info-v3__content-box {
90
+ .post-info-v3__content-box,
91
+ .post-info-v3__content-container {
86
92
  text-transform: var(--default-text-transform-mobile);
87
93
  }
88
94
  @media screen and (min-width: 768px) {
89
- .post-info-v3__content-box {
95
+ .post-info-v3__content-box,
96
+ .post-info-v3__content-container {
90
97
  text-transform: var(--default-text-transform-portrait, var(--default-text-transform-desktop));
91
98
  }
92
99
  }
93
100
  @media screen and (min-width: 1024px) {
94
- .post-info-v3__content-box {
101
+ .post-info-v3__content-box,
102
+ .post-info-v3__content-container {
95
103
  text-transform: var(--default-text-transform-desktop);
96
104
  }
97
105
  }
98
- .post-info-v3__content-box {
106
+ .post-info-v3__content-box,
107
+ .post-info-v3__content-container {
99
108
  text-align: var(--default-text-align-mobile);
100
109
  }
101
110
  @media screen and (min-width: 768px) {
102
- .post-info-v3__content-box {
111
+ .post-info-v3__content-box,
112
+ .post-info-v3__content-container {
103
113
  text-align: var(--default-text-align-portrait, var(--default-text-align-desktop));
104
114
  }
105
115
  }
106
116
  @media screen and (min-width: 1024px) {
107
- .post-info-v3__content-box {
117
+ .post-info-v3__content-box,
118
+ .post-info-v3__content-container {
108
119
  text-align: var(--default-text-align-desktop);
109
120
  }
110
121
  }
111
- .post-info-v3__content-box {
122
+ .post-info-v3__content-box,
123
+ .post-info-v3__content-container {
112
124
  display: block;
113
125
  display: var(--display-mobile, block);
114
126
  }
115
127
  @media screen and (min-width: 768px) {
116
- .post-info-v3__content-box {
128
+ .post-info-v3__content-box,
129
+ .post-info-v3__content-container {
117
130
  display: block;
118
131
  display: var(--display-portrait, block);
119
132
  }
120
133
  }
121
134
  @media screen and (min-width: 1024px) {
122
- .post-info-v3__content-box {
135
+ .post-info-v3__content-box,
136
+ .post-info-v3__content-container {
123
137
  display: block;
124
138
  display: var(--display-desktop, block);
125
139
  }
@@ -133,7 +147,17 @@
133
147
  .post-info-v3__content-box h6,
134
148
  .post-info-v3__content-box a,
135
149
  .post-info-v3__content-box li,
136
- .post-info-v3__content-box div {
150
+ .post-info-v3__content-box div,
151
+ .post-info-v3__content-container p,
152
+ .post-info-v3__content-container h1,
153
+ .post-info-v3__content-container h2,
154
+ .post-info-v3__content-container h3,
155
+ .post-info-v3__content-container h4,
156
+ .post-info-v3__content-container h5,
157
+ .post-info-v3__content-container h6,
158
+ .post-info-v3__content-container a,
159
+ .post-info-v3__content-container li,
160
+ .post-info-v3__content-container div {
137
161
  font-weight: var(--default-font-weight-mobile, var(--default-font-weight));
138
162
  }
139
163
  @media screen and (min-width: 768px) {
@@ -146,7 +170,17 @@
146
170
  .post-info-v3__content-box h6,
147
171
  .post-info-v3__content-box a,
148
172
  .post-info-v3__content-box li,
149
- .post-info-v3__content-box div {
173
+ .post-info-v3__content-box div,
174
+ .post-info-v3__content-container p,
175
+ .post-info-v3__content-container h1,
176
+ .post-info-v3__content-container h2,
177
+ .post-info-v3__content-container h3,
178
+ .post-info-v3__content-container h4,
179
+ .post-info-v3__content-container h5,
180
+ .post-info-v3__content-container h6,
181
+ .post-info-v3__content-container a,
182
+ .post-info-v3__content-container li,
183
+ .post-info-v3__content-container div {
150
184
  font-weight: var(--default-font-weight-portrait, var(--default-font-weight));
151
185
  }
152
186
  }
@@ -160,7 +194,17 @@
160
194
  .post-info-v3__content-box h6,
161
195
  .post-info-v3__content-box a,
162
196
  .post-info-v3__content-box li,
163
- .post-info-v3__content-box div {
197
+ .post-info-v3__content-box div,
198
+ .post-info-v3__content-container p,
199
+ .post-info-v3__content-container h1,
200
+ .post-info-v3__content-container h2,
201
+ .post-info-v3__content-container h3,
202
+ .post-info-v3__content-container h4,
203
+ .post-info-v3__content-container h5,
204
+ .post-info-v3__content-container h6,
205
+ .post-info-v3__content-container a,
206
+ .post-info-v3__content-container li,
207
+ .post-info-v3__content-container div {
164
208
  font-weight: var(--default-font-weight-desktop, var(--default-font-weight));
165
209
  }
166
210
  }
@@ -173,7 +217,17 @@
173
217
  .post-info-v3__content-box h6,
174
218
  .post-info-v3__content-box a,
175
219
  .post-info-v3__content-box li,
176
- .post-info-v3__content-box div {
220
+ .post-info-v3__content-box div,
221
+ .post-info-v3__content-container p,
222
+ .post-info-v3__content-container h1,
223
+ .post-info-v3__content-container h2,
224
+ .post-info-v3__content-container h3,
225
+ .post-info-v3__content-container h4,
226
+ .post-info-v3__content-container h5,
227
+ .post-info-v3__content-container h6,
228
+ .post-info-v3__content-container a,
229
+ .post-info-v3__content-container li,
230
+ .post-info-v3__content-container div {
177
231
  font-style: var(--default-font-style-mobile);
178
232
  }
179
233
  @media screen and (min-width: 768px) {
@@ -186,7 +240,17 @@
186
240
  .post-info-v3__content-box h6,
187
241
  .post-info-v3__content-box a,
188
242
  .post-info-v3__content-box li,
189
- .post-info-v3__content-box div {
243
+ .post-info-v3__content-box div,
244
+ .post-info-v3__content-container p,
245
+ .post-info-v3__content-container h1,
246
+ .post-info-v3__content-container h2,
247
+ .post-info-v3__content-container h3,
248
+ .post-info-v3__content-container h4,
249
+ .post-info-v3__content-container h5,
250
+ .post-info-v3__content-container h6,
251
+ .post-info-v3__content-container a,
252
+ .post-info-v3__content-container li,
253
+ .post-info-v3__content-container div {
190
254
  font-style: var(--default-font-style-portrait, var(--default-font-style-desktop));
191
255
  }
192
256
  }
@@ -200,17 +264,29 @@
200
264
  .post-info-v3__content-box h6,
201
265
  .post-info-v3__content-box a,
202
266
  .post-info-v3__content-box li,
203
- .post-info-v3__content-box div {
267
+ .post-info-v3__content-box div,
268
+ .post-info-v3__content-container p,
269
+ .post-info-v3__content-container h1,
270
+ .post-info-v3__content-container h2,
271
+ .post-info-v3__content-container h3,
272
+ .post-info-v3__content-container h4,
273
+ .post-info-v3__content-container h5,
274
+ .post-info-v3__content-container h6,
275
+ .post-info-v3__content-container a,
276
+ .post-info-v3__content-container li,
277
+ .post-info-v3__content-container div {
204
278
  font-style: var(--default-font-style-desktop);
205
279
  }
206
280
  }
207
281
  @media screen and (min-width: 768px) {
208
- .post-info-v3__content-box {
282
+ .post-info-v3__content-box,
283
+ .post-info-v3__content-container {
209
284
  max-width: var(--wysiwyg-max-width-portrait);
210
285
  }
211
286
  }
212
287
  @media screen and (min-width: 1024px) {
213
- .post-info-v3__content-box {
288
+ .post-info-v3__content-box,
289
+ .post-info-v3__content-container {
214
290
  max-width: var(--wysiwyg-max-width);
215
291
  }
216
292
  }
@@ -1209,3 +1285,41 @@
1209
1285
  grid-column: 1/-1;
1210
1286
  }
1211
1287
  }
1288
+ .post-info-v3__social-networks-inner-container {
1289
+ display: flex;
1290
+ flex-direction: column;
1291
+ gap: calc(10 / var(--design-reference) * var(--screen-width));
1292
+ }
1293
+ @media screen and (min-width: 768px) {
1294
+ .post-info-v3__social-networks-inner-container {
1295
+ flex-direction: row;
1296
+ gap: calc(20 / var(--design-reference) * var(--screen-width));
1297
+ }
1298
+ }
1299
+ .post-info-v3__social-networks-links-container {
1300
+ display: flex;
1301
+ gap: calc(20 / var(--design-reference) * var(--screen-width));
1302
+ }
1303
+ .post-info-v3__social-networks-link-container img {
1304
+ width: calc(30 / var(--design-reference) * var(--screen-width));
1305
+ height: calc(30 / var(--design-reference) * var(--screen-width));
1306
+ }
1307
+ .post-info-v3__social-networks-share-label {
1308
+ --default-font-weight: 700;
1309
+ line-height: var(--paragraph-line-height);
1310
+ letter-spacing: var(--paragraph-letter-spacing);
1311
+ font-family: var(--paragraph-font-family);
1312
+ font-weight: 700;
1313
+ font-weight: var(--default-font-weight);
1314
+ font-size: calc(18 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier));
1315
+ }
1316
+ @media screen and (min-width: 768px) {
1317
+ .post-info-v3__social-networks-share-label {
1318
+ font-size: calc(22 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier));
1319
+ }
1320
+ }
1321
+ @media screen and (min-width: 1024px) {
1322
+ .post-info-v3__social-networks-share-label {
1323
+ font-size: calc(22 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier));
1324
+ }
1325
+ }
package/public/block-product-info-v3/product-info-v3.css CHANGED
@@ -56,7 +56,8 @@
56
56
  .product-info-v3__inner-container {
57
57
  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);
58
58
  }
59
- .product-info-v3__content-box {
59
+ .product-info-v3__content-box,
60
+ .product-info-v3__content-container {
60
61
  max-width: var(--wysiwyg-max-width-mobile);
61
62
  margin-left: auto;
62
63
  margin-right: auto;
@@ -66,60 +67,73 @@
66
67
  width: var(--content-box-width, 100%);
67
68
  -webkit-text-stroke: calc(var(--text-stroke-width) / var(--desktop-design-reference) * var(--screen-width-static) * var(--font-size-multiplier)) var(--text-stroke-colour);
68
69
  }
69
- .product-info-v3__content-box:last-child {
70
+ .product-info-v3__content-box:last-child,
71
+ .product-info-v3__content-container:last-child {
70
72
  margin-bottom: 0;
71
73
  }
72
- .product-info-v3__content-box {
74
+ .product-info-v3__content-box,
75
+ .product-info-v3__content-container {
73
76
  color: var(--default-text-colour-mobile, var(--theme-primary-text-colour));
74
77
  }
75
78
  @media screen and (min-width: 768px) {
76
- .product-info-v3__content-box {
79
+ .product-info-v3__content-box,
80
+ .product-info-v3__content-container {
77
81
  color: var(--default-text-colour-portrait, var(--default-text-colour-desktop));
78
82
  }
79
83
  }
80
84
  @media screen and (min-width: 1024px) {
81
- .product-info-v3__content-box {
85
+ .product-info-v3__content-box,
86
+ .product-info-v3__content-container {
82
87
  color: var(--default-text-colour-desktop, var(--theme-primary-text-colour));
83
88
  }
84
89
  }
85
- .product-info-v3__content-box {
90
+ .product-info-v3__content-box,
91
+ .product-info-v3__content-container {
86
92
  text-transform: var(--default-text-transform-mobile);
87
93
  }
88
94
  @media screen and (min-width: 768px) {
89
- .product-info-v3__content-box {
95
+ .product-info-v3__content-box,
96
+ .product-info-v3__content-container {
90
97
  text-transform: var(--default-text-transform-portrait, var(--default-text-transform-desktop));
91
98
  }
92
99
  }
93
100
  @media screen and (min-width: 1024px) {
94
- .product-info-v3__content-box {
101
+ .product-info-v3__content-box,
102
+ .product-info-v3__content-container {
95
103
  text-transform: var(--default-text-transform-desktop);
96
104
  }
97
105
  }
98
- .product-info-v3__content-box {
106
+ .product-info-v3__content-box,
107
+ .product-info-v3__content-container {
99
108
  text-align: var(--default-text-align-mobile);
100
109
  }
101
110
  @media screen and (min-width: 768px) {
102
- .product-info-v3__content-box {
111
+ .product-info-v3__content-box,
112
+ .product-info-v3__content-container {
103
113
  text-align: var(--default-text-align-portrait, var(--default-text-align-desktop));
104
114
  }
105
115
  }
106
116
  @media screen and (min-width: 1024px) {
107
- .product-info-v3__content-box {
117
+ .product-info-v3__content-box,
118
+ .product-info-v3__content-container {
108
119
  text-align: var(--default-text-align-desktop);
109
120
  }
110
121
  }
111
- .product-info-v3__content-box {
122
+ .product-info-v3__content-box,
123
+ .product-info-v3__content-container {
112
124
  display: block;
113
125
  display: var(--display-mobile, block);
114
126
  }
115
127
  @media screen and (min-width: 768px) {
116
- .product-info-v3__content-box {
128
+ .product-info-v3__content-box,
129
+ .product-info-v3__content-container {
117
130
  display: block;
118
131
  display: var(--display-portrait, block);
119
132
  }
120
133
  }
121
134
  @media screen and (min-width: 1024px) {
122
- .product-info-v3__content-box {
135
+ .product-info-v3__content-box,
136
+ .product-info-v3__content-container {
123
137
  display: block;
124
138
  display: var(--display-desktop, block);
125
139
  }
@@ -133,7 +147,17 @@
133
147
  .product-info-v3__content-box h6,
134
148
  .product-info-v3__content-box a,
135
149
  .product-info-v3__content-box li,
136
- .product-info-v3__content-box div {
150
+ .product-info-v3__content-box div,
151
+ .product-info-v3__content-container p,
152
+ .product-info-v3__content-container h1,
153
+ .product-info-v3__content-container h2,
154
+ .product-info-v3__content-container h3,
155
+ .product-info-v3__content-container h4,
156
+ .product-info-v3__content-container h5,
157
+ .product-info-v3__content-container h6,
158
+ .product-info-v3__content-container a,
159
+ .product-info-v3__content-container li,
160
+ .product-info-v3__content-container div {
137
161
  font-weight: var(--default-font-weight-mobile, var(--default-font-weight));
138
162
  }
139
163
  @media screen and (min-width: 768px) {
@@ -146,7 +170,17 @@
146
170
  .product-info-v3__content-box h6,
147
171
  .product-info-v3__content-box a,
148
172
  .product-info-v3__content-box li,
149
- .product-info-v3__content-box div {
173
+ .product-info-v3__content-box div,
174
+ .product-info-v3__content-container p,
175
+ .product-info-v3__content-container h1,
176
+ .product-info-v3__content-container h2,
177
+ .product-info-v3__content-container h3,
178
+ .product-info-v3__content-container h4,
179
+ .product-info-v3__content-container h5,
180
+ .product-info-v3__content-container h6,
181
+ .product-info-v3__content-container a,
182
+ .product-info-v3__content-container li,
183
+ .product-info-v3__content-container div {
150
184
  font-weight: var(--default-font-weight-portrait, var(--default-font-weight));
151
185
  }
152
186
  }
@@ -160,7 +194,17 @@
160
194
  .product-info-v3__content-box h6,
161
195
  .product-info-v3__content-box a,
162
196
  .product-info-v3__content-box li,
163
- .product-info-v3__content-box div {
197
+ .product-info-v3__content-box div,
198
+ .product-info-v3__content-container p,
199
+ .product-info-v3__content-container h1,
200
+ .product-info-v3__content-container h2,
201
+ .product-info-v3__content-container h3,
202
+ .product-info-v3__content-container h4,
203
+ .product-info-v3__content-container h5,
204
+ .product-info-v3__content-container h6,
205
+ .product-info-v3__content-container a,
206
+ .product-info-v3__content-container li,
207
+ .product-info-v3__content-container div {
164
208
  font-weight: var(--default-font-weight-desktop, var(--default-font-weight));
165
209
  }
166
210
  }
@@ -173,7 +217,17 @@
173
217
  .product-info-v3__content-box h6,
174
218
  .product-info-v3__content-box a,
175
219
  .product-info-v3__content-box li,
176
- .product-info-v3__content-box div {
220
+ .product-info-v3__content-box div,
221
+ .product-info-v3__content-container p,
222
+ .product-info-v3__content-container h1,
223
+ .product-info-v3__content-container h2,
224
+ .product-info-v3__content-container h3,
225
+ .product-info-v3__content-container h4,
226
+ .product-info-v3__content-container h5,
227
+ .product-info-v3__content-container h6,
228
+ .product-info-v3__content-container a,
229
+ .product-info-v3__content-container li,
230
+ .product-info-v3__content-container div {
177
231
  font-style: var(--default-font-style-mobile);
178
232
  }
179
233
  @media screen and (min-width: 768px) {
@@ -186,7 +240,17 @@
186
240
  .product-info-v3__content-box h6,
187
241
  .product-info-v3__content-box a,
188
242
  .product-info-v3__content-box li,
189
- .product-info-v3__content-box div {
243
+ .product-info-v3__content-box div,
244
+ .product-info-v3__content-container p,
245
+ .product-info-v3__content-container h1,
246
+ .product-info-v3__content-container h2,
247
+ .product-info-v3__content-container h3,
248
+ .product-info-v3__content-container h4,
249
+ .product-info-v3__content-container h5,
250
+ .product-info-v3__content-container h6,
251
+ .product-info-v3__content-container a,
252
+ .product-info-v3__content-container li,
253
+ .product-info-v3__content-container div {
190
254
  font-style: var(--default-font-style-portrait, var(--default-font-style-desktop));
191
255
  }
192
256
  }
@@ -200,17 +264,29 @@
200
264
  .product-info-v3__content-box h6,
201
265
  .product-info-v3__content-box a,
202
266
  .product-info-v3__content-box li,
203
- .product-info-v3__content-box div {
267
+ .product-info-v3__content-box div,
268
+ .product-info-v3__content-container p,
269
+ .product-info-v3__content-container h1,
270
+ .product-info-v3__content-container h2,
271
+ .product-info-v3__content-container h3,
272
+ .product-info-v3__content-container h4,
273
+ .product-info-v3__content-container h5,
274
+ .product-info-v3__content-container h6,
275
+ .product-info-v3__content-container a,
276
+ .product-info-v3__content-container li,
277
+ .product-info-v3__content-container div {
204
278
  font-style: var(--default-font-style-desktop);
205
279
  }
206
280
  }
207
281
  @media screen and (min-width: 768px) {
208
- .product-info-v3__content-box {
282
+ .product-info-v3__content-box,
283
+ .product-info-v3__content-container {
209
284
  max-width: var(--wysiwyg-max-width-portrait);
210
285
  }
211
286
  }
212
287
  @media screen and (min-width: 1024px) {
213
- .product-info-v3__content-box {
288
+ .product-info-v3__content-box,
289
+ .product-info-v3__content-container {
214
290
  max-width: var(--wysiwyg-max-width);
215
291
  }
216
292
  }
package/public/block-standard-content-v3/standard-content-v3.css CHANGED
@@ -67,7 +67,8 @@
67
67
  .standard-content-v3__inner-container {
68
68
  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);
69
69
  }
70
- .standard-content-v3__content-box {
70
+ .standard-content-v3__content-box,
71
+ .standard-content-v3__content-container {
71
72
  max-width: var(--wysiwyg-max-width-mobile);
72
73
  margin-left: auto;
73
74
  margin-right: auto;
@@ -77,60 +78,73 @@
77
78
  width: var(--content-box-width, 100%);
78
79
  -webkit-text-stroke: calc(var(--text-stroke-width) / var(--desktop-design-reference) * var(--screen-width-static) * var(--font-size-multiplier)) var(--text-stroke-colour);
79
80
  }
80
- .standard-content-v3__content-box:last-child {
81
+ .standard-content-v3__content-box:last-child,
82
+ .standard-content-v3__content-container:last-child {
81
83
  margin-bottom: 0;
82
84
  }
83
- .standard-content-v3__content-box {
85
+ .standard-content-v3__content-box,
86
+ .standard-content-v3__content-container {
84
87
  color: var(--default-text-colour-mobile, var(--theme-primary-text-colour));
85
88
  }
86
89
  @media screen and (min-width: 768px) {
87
- .standard-content-v3__content-box {
90
+ .standard-content-v3__content-box,
91
+ .standard-content-v3__content-container {
88
92
  color: var(--default-text-colour-portrait, var(--default-text-colour-desktop));
89
93
  }
90
94
  }
91
95
  @media screen and (min-width: 1024px) {
92
- .standard-content-v3__content-box {
96
+ .standard-content-v3__content-box,
97
+ .standard-content-v3__content-container {
93
98
  color: var(--default-text-colour-desktop, var(--theme-primary-text-colour));
94
99
  }
95
100
  }
96
- .standard-content-v3__content-box {
101
+ .standard-content-v3__content-box,
102
+ .standard-content-v3__content-container {
97
103
  text-transform: var(--default-text-transform-mobile);
98
104
  }
99
105
  @media screen and (min-width: 768px) {
100
- .standard-content-v3__content-box {
106
+ .standard-content-v3__content-box,
107
+ .standard-content-v3__content-container {
101
108
  text-transform: var(--default-text-transform-portrait, var(--default-text-transform-desktop));
102
109
  }
103
110
  }
104
111
  @media screen and (min-width: 1024px) {
105
- .standard-content-v3__content-box {
112
+ .standard-content-v3__content-box,
113
+ .standard-content-v3__content-container {
106
114
  text-transform: var(--default-text-transform-desktop);
107
115
  }
108
116
  }
109
- .standard-content-v3__content-box {
117
+ .standard-content-v3__content-box,
118
+ .standard-content-v3__content-container {
110
119
  text-align: var(--default-text-align-mobile);
111
120
  }
112
121
  @media screen and (min-width: 768px) {
113
- .standard-content-v3__content-box {
122
+ .standard-content-v3__content-box,
123
+ .standard-content-v3__content-container {
114
124
  text-align: var(--default-text-align-portrait, var(--default-text-align-desktop));
115
125
  }
116
126
  }
117
127
  @media screen and (min-width: 1024px) {
118
- .standard-content-v3__content-box {
128
+ .standard-content-v3__content-box,
129
+ .standard-content-v3__content-container {
119
130
  text-align: var(--default-text-align-desktop);
120
131
  }
121
132
  }
122
- .standard-content-v3__content-box {
133
+ .standard-content-v3__content-box,
134
+ .standard-content-v3__content-container {
123
135
  display: block;
124
136
  display: var(--display-mobile, block);
125
137
  }
126
138
  @media screen and (min-width: 768px) {
127
- .standard-content-v3__content-box {
139
+ .standard-content-v3__content-box,
140
+ .standard-content-v3__content-container {
128
141
  display: block;
129
142
  display: var(--display-portrait, block);
130
143
  }
131
144
  }
132
145
  @media screen and (min-width: 1024px) {
133
- .standard-content-v3__content-box {
146
+ .standard-content-v3__content-box,
147
+ .standard-content-v3__content-container {
134
148
  display: block;
135
149
  display: var(--display-desktop, block);
136
150
  }
@@ -144,7 +158,17 @@
144
158
  .standard-content-v3__content-box h6,
145
159
  .standard-content-v3__content-box a,
146
160
  .standard-content-v3__content-box li,
147
- .standard-content-v3__content-box div {
161
+ .standard-content-v3__content-box div,
162
+ .standard-content-v3__content-container p,
163
+ .standard-content-v3__content-container h1,
164
+ .standard-content-v3__content-container h2,
165
+ .standard-content-v3__content-container h3,
166
+ .standard-content-v3__content-container h4,
167
+ .standard-content-v3__content-container h5,
168
+ .standard-content-v3__content-container h6,
169
+ .standard-content-v3__content-container a,
170
+ .standard-content-v3__content-container li,
171
+ .standard-content-v3__content-container div {
148
172
  font-weight: var(--default-font-weight-mobile, var(--default-font-weight));
149
173
  }
150
174
  @media screen and (min-width: 768px) {
@@ -157,7 +181,17 @@
157
181
  .standard-content-v3__content-box h6,
158
182
  .standard-content-v3__content-box a,
159
183
  .standard-content-v3__content-box li,
160
- .standard-content-v3__content-box div {
184
+ .standard-content-v3__content-box div,
185
+ .standard-content-v3__content-container p,
186
+ .standard-content-v3__content-container h1,
187
+ .standard-content-v3__content-container h2,
188
+ .standard-content-v3__content-container h3,
189
+ .standard-content-v3__content-container h4,
190
+ .standard-content-v3__content-container h5,
191
+ .standard-content-v3__content-container h6,
192
+ .standard-content-v3__content-container a,
193
+ .standard-content-v3__content-container li,
194
+ .standard-content-v3__content-container div {
161
195
  font-weight: var(--default-font-weight-portrait, var(--default-font-weight));
162
196
  }
163
197
  }
@@ -171,7 +205,17 @@
171
205
  .standard-content-v3__content-box h6,
172
206
  .standard-content-v3__content-box a,
173
207
  .standard-content-v3__content-box li,
174
- .standard-content-v3__content-box div {
208
+ .standard-content-v3__content-box div,
209
+ .standard-content-v3__content-container p,
210
+ .standard-content-v3__content-container h1,
211
+ .standard-content-v3__content-container h2,
212
+ .standard-content-v3__content-container h3,
213
+ .standard-content-v3__content-container h4,
214
+ .standard-content-v3__content-container h5,
215
+ .standard-content-v3__content-container h6,
216
+ .standard-content-v3__content-container a,
217
+ .standard-content-v3__content-container li,
218
+ .standard-content-v3__content-container div {
175
219
  font-weight: var(--default-font-weight-desktop, var(--default-font-weight));
176
220
  }
177
221
  }
@@ -184,7 +228,17 @@
184
228
  .standard-content-v3__content-box h6,
185
229
  .standard-content-v3__content-box a,
186
230
  .standard-content-v3__content-box li,
187
- .standard-content-v3__content-box div {
231
+ .standard-content-v3__content-box div,
232
+ .standard-content-v3__content-container p,
233
+ .standard-content-v3__content-container h1,
234
+ .standard-content-v3__content-container h2,
235
+ .standard-content-v3__content-container h3,
236
+ .standard-content-v3__content-container h4,
237
+ .standard-content-v3__content-container h5,
238
+ .standard-content-v3__content-container h6,
239
+ .standard-content-v3__content-container a,
240
+ .standard-content-v3__content-container li,
241
+ .standard-content-v3__content-container div {
188
242
  font-style: var(--default-font-style-mobile);
189
243
  }
190
244
  @media screen and (min-width: 768px) {
@@ -197,7 +251,17 @@
197
251
  .standard-content-v3__content-box h6,
198
252
  .standard-content-v3__content-box a,
199
253
  .standard-content-v3__content-box li,
200
- .standard-content-v3__content-box div {
254
+ .standard-content-v3__content-box div,
255
+ .standard-content-v3__content-container p,
256
+ .standard-content-v3__content-container h1,
257
+ .standard-content-v3__content-container h2,
258
+ .standard-content-v3__content-container h3,
259
+ .standard-content-v3__content-container h4,
260
+ .standard-content-v3__content-container h5,
261
+ .standard-content-v3__content-container h6,
262
+ .standard-content-v3__content-container a,
263
+ .standard-content-v3__content-container li,
264
+ .standard-content-v3__content-container div {
201
265
  font-style: var(--default-font-style-portrait, var(--default-font-style-desktop));
202
266
  }
203
267
  }
@@ -211,17 +275,29 @@
211
275
  .standard-content-v3__content-box h6,
212
276
  .standard-content-v3__content-box a,
213
277
  .standard-content-v3__content-box li,
214
- .standard-content-v3__content-box div {
278
+ .standard-content-v3__content-box div,
279
+ .standard-content-v3__content-container p,
280
+ .standard-content-v3__content-container h1,
281
+ .standard-content-v3__content-container h2,
282
+ .standard-content-v3__content-container h3,
283
+ .standard-content-v3__content-container h4,
284
+ .standard-content-v3__content-container h5,
285
+ .standard-content-v3__content-container h6,
286
+ .standard-content-v3__content-container a,
287
+ .standard-content-v3__content-container li,
288
+ .standard-content-v3__content-container div {
215
289
  font-style: var(--default-font-style-desktop);
216
290
  }
217
291
  }
218
292
  @media screen and (min-width: 768px) {
219
- .standard-content-v3__content-box {
293
+ .standard-content-v3__content-box,
294
+ .standard-content-v3__content-container {
220
295
  max-width: var(--wysiwyg-max-width-portrait);
221
296
  }
222
297
  }
223
298
  @media screen and (min-width: 1024px) {
224
- .standard-content-v3__content-box {
299
+ .standard-content-v3__content-box,
300
+ .standard-content-v3__content-container {
225
301
  max-width: var(--wysiwyg-max-width);
226
302
  }
227
303
  }