@total_onion/onion-library 3.0.38 → 3.0.41

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 (13) hide show
  1. package/components/component-block-padding-v3/block-padding-v3.scss +13 -13
  2. package/components/component-block-settings-v3/block-settings-v3.scss +13 -13
  3. package/onion-utils.mjs +70 -24
  4. package/package.json +1 -1
  5. package/public/block-accordion-v3/accordion-v3.css +0 -84
  6. package/public/block-post-info-v3/post-info-v3.css +0 -84
  7. package/public/block-product-info-v3/product-info-v3.css +0 -84
  8. package/public/block-single-responsive-image-v3/single-responsive-image-v3.css +53 -51
  9. package/public/block-standard-content-v3/standard-content-v3.css +359 -441
  10. package/public/block-sub-group-container-v3/sub-group-container-v3.css +258 -256
  11. package/public/block-video-content-v3/video-content-v3.css +96 -94
  12. package/public/dynamicBlockScss-v3.scss +36 -0
  13. package/public/publicBundleBase.css +315 -349
package/public/block-single-responsive-image-v3/single-responsive-image-v3.css CHANGED
@@ -1,59 +1,61 @@
1
- .single-responsive-image-v3__picture {
2
- margin: auto;
3
- width: 100%;
4
- width: var(--image-width-mobile, 100%);
5
- height: 100%;
6
- grid-area: main;
7
- grid-area: var(--image-grid-area, main);
8
- position: relative;
9
- position: var(--image-position, relative);
10
- translate: var(--image-offset-horiz) var(--image-offset-vert);
11
- inset: 0;
12
- min-height: 0;
13
- display: flex;
14
- z-index: var(--image-z-index);
15
- border: calc(var(--image-border-width) / var(--desktop-design-reference) * var(--screen-width-static)) var(--image-border-style) var(--image-border-colour);
16
- }
17
- @media screen and (min-width: 768px) {
1
+ @layer base-styles {
18
2
  .single-responsive-image-v3__picture {
3
+ margin: auto;
19
4
  width: 100%;
20
- width: var(--image-width-portrait, 100%);
5
+ width: var(--image-width-mobile, 100%);
6
+ height: 100%;
7
+ grid-area: main;
8
+ grid-area: var(--image-grid-area, main);
9
+ position: relative;
10
+ position: var(--image-position, relative);
11
+ translate: var(--image-offset-horiz) var(--image-offset-vert);
12
+ inset: 0;
13
+ min-height: 0;
14
+ display: flex;
15
+ z-index: var(--image-z-index);
16
+ border: calc(var(--image-border-width) / var(--desktop-design-reference) * var(--screen-width-static)) var(--image-border-style) var(--image-border-colour);
21
17
  }
22
- }
23
- @media screen and (min-width: 1024px) {
24
- .single-responsive-image-v3__picture {
25
- width: 100%;
26
- width: var(--image-width, 100%);
18
+ @media screen and (min-width: 768px) {
19
+ .single-responsive-image-v3__picture {
20
+ width: 100%;
21
+ width: var(--image-width-portrait, 100%);
22
+ }
27
23
  }
28
- }
29
- .single-responsive-image-v3__image {
30
- position: relative;
31
- -o-object-fit: cover;
32
- object-fit: cover;
33
- -o-object-fit: var(--image-fit-style, cover);
34
- object-fit: var(--image-fit-style, cover);
35
- -o-object-position: var(--image-object-position-align);
36
- object-position: var(--image-object-position-align);
37
- opacity: 1;
38
- opacity: var(--image-opacity, 1);
39
- aspect-ratio: var(--image-aspect-ratio-mobile, var(--image-aspect-ratio-desktop));
40
- border-radius: var(--image-border-radius);
41
- min-height: calc(var(--image-min-height-mobile) - (0px - var(--cancel-header-height)));
42
- min-height: calc(var(--image-min-height-mobile) - (var(--global-site-header-height, 0px) - var(--cancel-header-height)));
43
- }
44
- @media screen and (min-width: 768px) {
45
- .single-responsive-image-v3__image {
46
- aspect-ratio: var(--image-aspect-ratio-portrait);
24
+ @media screen and (min-width: 1024px) {
25
+ .single-responsive-image-v3__picture {
26
+ width: 100%;
27
+ width: var(--image-width, 100%);
28
+ }
47
29
  }
48
- }
49
- @media screen and (min-width: 1024px) {
50
30
  .single-responsive-image-v3__image {
51
- aspect-ratio: var(--image-aspect-ratio-desktop);
52
- min-height: calc(var(--image-min-height-desktop) - (0px - var(--cancel-header-height)));
53
- min-height: calc(var(--image-min-height-desktop) - (var(--global-site-header-height, 0px) - var(--cancel-header-height)));
31
+ position: relative;
32
+ -o-object-fit: cover;
33
+ object-fit: cover;
34
+ -o-object-fit: var(--image-fit-style, cover);
35
+ object-fit: var(--image-fit-style, cover);
36
+ -o-object-position: var(--image-object-position-align);
37
+ object-position: var(--image-object-position-align);
38
+ opacity: 1;
39
+ opacity: var(--image-opacity, 1);
40
+ aspect-ratio: var(--image-aspect-ratio-mobile, var(--image-aspect-ratio-desktop));
41
+ border-radius: var(--image-border-radius);
42
+ min-height: calc(var(--image-min-height-mobile) - (0px - var(--cancel-header-height)));
43
+ min-height: calc(var(--image-min-height-mobile) - (var(--global-site-header-height, 0px) - var(--cancel-header-height)));
44
+ }
45
+ @media screen and (min-width: 768px) {
46
+ .single-responsive-image-v3__image {
47
+ aspect-ratio: var(--image-aspect-ratio-portrait);
48
+ }
49
+ }
50
+ @media screen and (min-width: 1024px) {
51
+ .single-responsive-image-v3__image {
52
+ aspect-ratio: var(--image-aspect-ratio-desktop);
53
+ min-height: calc(var(--image-min-height-desktop) - (0px - var(--cancel-header-height)));
54
+ min-height: calc(var(--image-min-height-desktop) - (var(--global-site-header-height, 0px) - var(--cancel-header-height)));
55
+ }
56
+ }
57
+ .single-responsive-image-v3 {
58
+ display: flex;
59
+ align-items: stretch;
54
60
  }
55
- }
56
- .single-responsive-image-v3 {
57
- display: flex;
58
- align-items: stretch;
59
61
  }