@total_onion/onion-library 3.0.14 → 3.0.17

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 (30) hide show
  1. package/components/component-block-settings-v3/block-settings-v3.scss +36 -34
  2. package/esbuild.mjs +3 -3
  3. package/package.json +1 -1
  4. package/public/block-accent-image-v3/accent-image-v3.css +2 -0
  5. package/public/block-accordion-v3/accordion-v3.css +375 -385
  6. package/public/block-back-to-top-button-v3/back-to-top-button-v3.css +60 -58
  7. package/public/block-betterreviews-display-v3/betterreviews-display-v3.css +1 -4
  8. package/public/block-block-interactions-v3/block-interactions-v3.css +30 -28
  9. package/public/block-carousel-multi-layout-v3/carousel-multi-layout-v3.css +157 -164
  10. package/public/block-cocktail-recipe-v3/cocktail-recipe-v3.css +8 -16
  11. package/public/block-cover-link-v3/cover-link-v3.css +1 -4
  12. package/public/block-divider-v3/divider-v3.css +0 -2
  13. package/public/block-featured-image-gallery-v3/featured-image-gallery-v3.css +0 -6
  14. package/public/block-form-selection-v3/form-selection-v3.css +1 -4
  15. package/public/block-gradient-layer-v3/gradient-layer-v3.css +3 -12
  16. package/public/block-group-container-v3/group-container-v3.css +0 -22
  17. package/public/block-market-selector-v3/market-selector-v3.css +0 -3
  18. package/public/block-post-info-v3/post-info-v3.css +1063 -1153
  19. package/public/block-product-info-v3/product-info-v3.css +13 -90
  20. package/public/block-scrolling-banner-v3/scrolling-banner-v3.css +85 -87
  21. package/public/block-section-separator-v3/section-separator-v3.css +0 -2
  22. package/public/block-single-column-container-v3/single-column-container-v3.css +0 -2
  23. package/public/block-single-responsive-image-v3/single-responsive-image-v3.css +1 -4
  24. package/public/block-site-copyright-notice-v3/site-copyright-notice-v3.css +16 -14
  25. package/public/block-site-title-and-tagline-v3/site-title-and-tagline-v3.css +0 -2
  26. package/public/block-standard-content-v3/standard-content-v3.css +4 -28
  27. package/public/block-sub-group-container-v3/sub-group-container-v3.css +0 -22
  28. package/public/block-video-content-v3/video-content-v3.css +2 -7
  29. package/public/jsAssets.mjs +3 -39
  30. package/public/publicBundleBase.css +1168 -1191
package/public/block-standard-content-v3/standard-content-v3.css CHANGED
@@ -17,8 +17,6 @@
17
17
  }
18
18
  .standard-content-v3__inner-container {
19
19
  grid-area: main;
20
- align-self: var(--content-box-vert-align-mobile);
21
- justify-self: var(--content-box-horiz-align-mobile);
22
20
  place-self: var(--content-box-vert-align-mobile) var(--content-box-horiz-align-mobile);
23
21
  z-index: 5;
24
22
  z-index: var(--content-z-index, 5);
@@ -44,8 +42,6 @@
44
42
  @media screen and (min-width: 768px) {
45
43
  .standard-content-v3__inner-container {
46
44
  justify-content: var(--content-items-alignment-portrait);
47
- align-self: var(--content-box-vert-align-portrait);
48
- justify-self: var(--content-box-horiz-align-portrait);
49
45
  place-self: var(--content-box-vert-align-portrait) var(--content-box-horiz-align-portrait);
50
46
  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));
51
47
  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));
@@ -57,8 +53,6 @@
57
53
  column-gap: var(--content-items-micro-gap-desktop, calc(var(--content-items-gap-desktop) * var(--global-inline-spacing)));
58
54
  justify-content: var(--content-items-alignment);
59
55
  max-width: var(--cb-max-width);
60
- align-self: var(--content-box-vert-align);
61
- justify-self: var(--content-box-horiz-align);
62
56
  place-self: var(--content-box-vert-align) var(--content-box-horiz-align);
63
57
  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));
64
58
  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));
@@ -70,8 +64,7 @@
70
64
  .standard-content-v3__content-box,
71
65
  .standard-content-v3__content-container {
72
66
  max-width: var(--wysiwyg-max-width-mobile);
73
- margin-left: auto;
74
- margin-right: auto;
67
+ margin-inline: auto;
75
68
  display: grid;
76
69
  word-break: normal;
77
70
  width: 100%;
@@ -428,27 +421,19 @@
428
421
  align-items: center;
429
422
  color: var(--accent-text-colour-mobile);
430
423
  text-align: center;
431
- align-self: center;
432
- align-self: var(--alignment, center);
433
- justify-self: center;
434
- justify-self: var(--alignment, center);
435
- align-self: center;
436
- justify-self: center;
437
424
  place-self: center;
438
425
  place-self: var(--alignment, center);
439
426
  font-family: var(--secondary-font-family);
440
427
  letter-spacing: 0.8em;
441
428
  text-transform: uppercase;
442
429
  gap: calc(10 / var(--design-reference) * var(--screen-width));
443
- margin-left: calc(5 / var(--design-reference) * var(--screen-width));
444
- margin-right: calc(5 / var(--design-reference) * var(--screen-width));
430
+ margin-inline: calc(5 / var(--design-reference) * var(--screen-width));
445
431
  font-size: calc(10 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier));
446
432
  }
447
433
  @media screen and (min-width: 768px) {
448
434
  .standard-content-v3__accent-text {
449
435
  font-size: calc(10 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier));
450
- margin-left: calc(5 / var(--design-reference) * var(--screen-width));
451
- margin-right: calc(5 / var(--design-reference) * var(--screen-width));
436
+ margin-inline: calc(5 / var(--design-reference) * var(--screen-width));
452
437
  gap: calc(20 / var(--design-reference) * var(--screen-width));
453
438
  }
454
439
  }
@@ -456,8 +441,7 @@
456
441
  .standard-content-v3__accent-text {
457
442
  color: var(--accent-text-colour);
458
443
  font-size: calc(10 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier));
459
- margin-left: calc(5 / var(--design-reference) * var(--screen-width));
460
- margin-right: calc(5 / var(--design-reference) * var(--screen-width));
444
+ margin-inline: calc(5 / var(--design-reference) * var(--screen-width));
461
445
  gap: calc(20 / var(--design-reference) * var(--screen-width));
462
446
  }
463
447
  }
@@ -493,20 +477,12 @@
493
477
  }
494
478
  .standard-content-v3__video-play-button {
495
479
  grid-area: unset;
496
- align-self: center;
497
- align-self: var(--playbutton-vertical-alignment, center);
498
- justify-self: center;
499
- justify-self: var(--playbutton-horizontal-alignment, center);
500
- align-self: center;
501
- justify-self: center;
502
480
  place-self: center center;
503
481
  place-self: var(--playbutton-vertical-alignment, center) var(--playbutton-horizontal-alignment, center);
504
482
  }
505
483
  .standard-content-v3__content-image {
506
484
  width: 100%;
507
485
  height: auto;
508
- align-self: var(--image-position-horizontal);
509
- justify-self: var(--image-position-vertical);
510
486
  place-self: var(--image-position-horizontal) var(--image-position-vertical);
511
487
  translate: var(--image-position-offset-horizontal) var(--image-position-offset-vertical);
512
488
  rotate: var(--image-rotation);
package/public/block-sub-group-container-v3/sub-group-container-v3.css CHANGED
@@ -2,14 +2,10 @@
2
2
  .sub-group-container-v3 {
3
3
  display: grid;
4
4
  grid-template: "main"/1fr;
5
- align-items: center;
6
- justify-items: center;
7
5
  place-items: center;
8
6
  }
9
7
  .sub-group-container-v3__grid-container {
10
8
  grid-area: main;
11
- align-self: stretch;
12
- justify-self: stretch;
13
9
  place-self: stretch;
14
10
  }
15
11
  .sub-group-container-v3__grid-container.flex-layout-container {
@@ -87,16 +83,12 @@
87
83
  .sub-group-container-v3__grid-container.grid-layout-container.scroll-btns-desktop::scroll-button(left) {
88
84
  content: "\25c4";
89
85
  position: absolute;
90
- align-self: center;
91
- justify-self: flex-start;
92
86
  place-self: center flex-start;
93
87
  z-index: 50;
94
88
  }
95
89
  .sub-group-container-v3__grid-container.grid-layout-container.scroll-btns-desktop::scroll-button(right) {
96
90
  content: "\25ba";
97
91
  position: absolute;
98
- align-self: center;
99
- justify-self: flex-end;
100
92
  place-self: center flex-end;
101
93
  z-index: 50;
102
94
  }
@@ -127,16 +119,12 @@
127
119
  .sub-group-container-v3__grid-container.grid-layout-container.scroll-btns-portrait::scroll-button(left) {
128
120
  content: "\25c4";
129
121
  position: absolute;
130
- align-self: center;
131
- justify-self: flex-start;
132
122
  place-self: center flex-start;
133
123
  z-index: 50;
134
124
  }
135
125
  .sub-group-container-v3__grid-container.grid-layout-container.scroll-btns-portrait::scroll-button(right) {
136
126
  content: "\25ba";
137
127
  position: absolute;
138
- align-self: center;
139
- justify-self: flex-end;
140
128
  place-self: center flex-end;
141
129
  z-index: 50;
142
130
  }
@@ -167,16 +155,12 @@
167
155
  .sub-group-container-v3__grid-container.grid-layout-container.scroll-btns-mobile::scroll-button(left) {
168
156
  content: "\25c4";
169
157
  position: absolute;
170
- align-self: center;
171
- justify-self: flex-start;
172
158
  place-self: center flex-start;
173
159
  z-index: 50;
174
160
  }
175
161
  .sub-group-container-v3__grid-container.grid-layout-container.scroll-btns-mobile::scroll-button(right) {
176
162
  content: "\25ba";
177
163
  position: absolute;
178
- align-self: center;
179
- justify-self: flex-end;
180
164
  place-self: center flex-end;
181
165
  z-index: 50;
182
166
  }
@@ -263,8 +247,6 @@
263
247
  z-index: var(--element-z-index, 5);
264
248
  grid-row: var(--grid-row-start-mobile)/span var(--grid-row-span-mobile);
265
249
  grid-column: var(--grid-column-start-mobile)/span var(--grid-column-span-mobile);
266
- align-self: var(--grid-vertical-placement-mobile);
267
- justify-self: var(--grid-horizontal-placement-mobile);
268
250
  place-self: var(--grid-vertical-placement-mobile) var(--grid-horizontal-placement-mobile);
269
251
  }
270
252
  .sub-group-container-v3__block-container:has(> .subgrid-layout-mobile) {
@@ -278,8 +260,6 @@
278
260
  .sub-group-container-v3__block-container {
279
261
  grid-row: var(--grid-row-start-portrait)/span var(--grid-row-span-portrait);
280
262
  grid-column: var(--grid-column-start-portrait)/span var(--grid-column-span-portrait);
281
- align-self: var(--grid-vertical-placement-portrait);
282
- justify-self: var(--grid-horizontal-placement-portrait);
283
263
  place-self: var(--grid-vertical-placement-portrait) var(--grid-horizontal-placement-portrait);
284
264
  }
285
265
  .sub-group-container-v3__block-container:has(> .subgrid-layout-portrait) {
@@ -294,8 +274,6 @@
294
274
  .sub-group-container-v3__block-container {
295
275
  grid-row: var(--grid-row-start)/span var(--grid-row-span);
296
276
  grid-column: var(--grid-column-start)/span var(--grid-column-span);
297
- align-self: var(--grid-vertical-placement-desktop);
298
- justify-self: var(--grid-horizontal-placement-desktop);
299
277
  place-self: var(--grid-vertical-placement-desktop) var(--grid-horizontal-placement-desktop);
300
278
  }
301
279
  .sub-group-container-v3__block-container:has(> .subgrid-layout-desktop) {
package/public/block-video-content-v3/video-content-v3.css CHANGED
@@ -29,10 +29,7 @@
29
29
  .video-content-v3__video-container.lock-video-aspect-to-image iframe,
30
30
  .video-content-v3__video-container.lock-video-aspect-to-image video {
31
31
  position: absolute;
32
- top: 0;
33
- right: 0;
34
- bottom: 0;
35
- left: 0;
32
+ inset: 0;
36
33
  width: 100%;
37
34
  height: 100%;
38
35
  }
@@ -50,7 +47,7 @@
50
47
  transform: translate(-50%, -50%);
51
48
  width: calc(84 / var(--desktop-design-reference) * var(--screen-width-static));
52
49
  height: calc(84 / var(--desktop-design-reference) * var(--screen-width-static));
53
- --spinner-bg-colour: rgba(255,255,255,0.32941);
50
+ --spinner-bg-colour: #ffffff54;
54
51
  --spinner-colour: white;
55
52
  }
56
53
  .video-content-v3__video-container .loading-wrapper:before {
@@ -69,8 +66,6 @@
69
66
  }
70
67
  .video-content-v3__video-play-button {
71
68
  grid-area: main;
72
- align-self: center;
73
- justify-self: center;
74
69
  place-self: center;
75
70
  transform: scale(1);
76
71
  transition: transform 0.3s 0.5s;
package/public/jsAssets.mjs CHANGED
@@ -1,40 +1,4 @@
1
- const dynamicAssets = [
2
- { assetKey: "video-content-v3" },
3
- { assetKey: "sub-group-container-v3" },
4
- { assetKey: "sticky-buy-cta-v3" },
5
- { assetKey: "standard-content-v3" },
6
- { assetKey: "spotify-embed-v3" },
7
- { assetKey: "spacer-v3" },
8
- { assetKey: "social-networks-v3" },
9
- { assetKey: "smash-balloon-social-media-v3" },
10
- { assetKey: "site-title-and-tagline-v3" },
11
- { assetKey: "site-logo-container-v3" },
12
- { assetKey: "site-copyright-notice-v3" },
13
- { assetKey: "single-responsive-image-v3" },
14
- { assetKey: "single-column-container-v3" },
15
- { assetKey: "section-separator-v3" },
16
- { assetKey: "scrolling-banner-v3" },
17
- { assetKey: "responsive-table-v3" },
18
- { assetKey: "raw-html-v3" },
19
- { assetKey: "product-info-v3" },
20
- { assetKey: "post-info-v3" },
21
- { assetKey: "nav-menu-container-v3" },
22
- { assetKey: "modal-form-v3" },
23
- { assetKey: "market-selector-v3" },
24
- { assetKey: "lottie-content-v3" },
25
- { assetKey: "group-container-v3" },
26
- { assetKey: "gradient-layer-v3" },
27
- { assetKey: "form-selection-v3" },
28
- { assetKey: "featured-image-gallery-v3" },
29
- { assetKey: "divider-v3" },
30
- { assetKey: "cover-link-v3" },
31
- { assetKey: "cocktail-recipe-v3" },
32
- { assetKey: "carousel-multi-layout-v3" },
33
- { assetKey: "block-interactions-v3" },
34
- { assetKey: "betterreviews-display-v3" },
35
- { assetKey: "back-to-top-button-v3" },
36
- { assetKey: "accordion-v3" },
37
- { assetKey: "accent-image-v3" },
38
- ];
39
- const api = { dynamicAssets };
1
+
2
+ const dynamicAssets = [{"assetKey":"video-content-v3"},{"assetKey":"sub-group-container-v3"},{"assetKey":"sticky-buy-cta-v3"},{"assetKey":"standard-content-v3"},{"assetKey":"spotify-embed-v3"},{"assetKey":"spacer-v3"},{"assetKey":"social-networks-v3"},{"assetKey":"smash-balloon-social-media-v3"},{"assetKey":"site-title-and-tagline-v3"},{"assetKey":"site-logo-container-v3"},{"assetKey":"site-copyright-notice-v3"},{"assetKey":"single-responsive-image-v3"},{"assetKey":"single-column-container-v3"},{"assetKey":"section-separator-v3"},{"assetKey":"scrolling-banner-v3"},{"assetKey":"responsive-table-v3"},{"assetKey":"raw-html-v3"},{"assetKey":"product-info-v3"},{"assetKey":"post-info-v3"},{"assetKey":"nav-menu-container-v3"},{"assetKey":"modal-form-v3"},{"assetKey":"market-selector-v3"},{"assetKey":"lottie-content-v3"},{"assetKey":"group-container-v3"},{"assetKey":"gradient-layer-v3"},{"assetKey":"form-selection-v3"},{"assetKey":"featured-image-gallery-v3"},{"assetKey":"divider-v3"},{"assetKey":"cover-link-v3"},{"assetKey":"cocktail-recipe-v3"},{"assetKey":"carousel-multi-layout-v3"},{"assetKey":"block-interactions-v3"},{"assetKey":"betterreviews-display-v3"},{"assetKey":"back-to-top-button-v3"},{"assetKey":"accordion-v3"},{"assetKey":"accent-image-v3"}];
3
+ const api = {dynamicAssets};
40
4
  export default api;