@total_onion/onion-library 3.0.43 → 3.0.45

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 (22) hide show
  1. package/createNewBlock.js +1 -1
  2. package/duplicateBlock.js +1 -1
  3. package/exportAllBlocks.js +45 -22
  4. package/exportBlock.js +1 -1
  5. package/exportChildBlock.js +1 -1
  6. package/exportEntrypointToLibrary.js +37 -23
  7. package/exportToLibrary.js +1 -1
  8. package/importBlock.js +8 -6
  9. package/importChildBlock.js +1 -1
  10. package/package.json +1 -1
  11. package/public/block-betterreviews-display-v3/betterreviews-display-v3.css +90 -88
  12. package/public/block-cocktail-recipe-v3/cocktail-recipe-v3.css +239 -237
  13. package/public/block-cover-link-v3/cover-link-v3.css +7 -5
  14. package/public/block-divider-v3/divider-v3.css +56 -54
  15. package/public/block-featured-image-gallery-v3/featured-image-gallery-v3.css +89 -87
  16. package/public/block-form-selection-v3/form-selection-v3.css +30 -28
  17. package/public/block-gradient-layer-v3/gradient-layer-v3.css +44 -42
  18. package/public/block-group-container-v3/group-container-v3.css +272 -270
  19. package/public/block-product-info-v3/product-info-v3.css +729 -727
  20. package/public/block-responsive-table-v3/responsive-table-v3.css +41 -39
  21. package/public/block-section-separator-v3/section-separator-v3.css +35 -33
  22. package/public/block-single-column-container-v3/single-column-container-v3.css +13 -11
package/public/block-responsive-table-v3/responsive-table-v3.css CHANGED
@@ -1,48 +1,50 @@
1
- .responsive-table-v3__wrapper {
2
- display: grid;
3
- grid-auto-flow: column;
4
- grid-gap: calc(var(--global-inline-spacing) * var(--table-spacing-gap-desktop));
5
- gap: calc(var(--global-inline-spacing) * var(--table-spacing-gap-desktop));
6
- overflow: auto;
7
- }
8
- .responsive-table-v3__headings {
9
- display: grid;
10
- grid-auto-flow: column;
11
- grid-column: 1/var(--headings);
12
- grid-template-columns: subgrid;
13
- }
14
- .responsive-table-v3__heading {
15
- grid-row: 1;
16
- background-color: var(--background-column-headers);
17
- padding: calc(5 / var(--design-reference) * var(--screen-width));
18
- }
19
- @media screen and (min-width: 768px) {
20
- .responsive-table-v3__heading {
21
- padding: calc(5 / var(--design-reference) * var(--screen-width));
1
+ @layer base-styles {
2
+ .responsive-table-v3__wrapper {
3
+ display: grid;
4
+ grid-auto-flow: column;
5
+ grid-gap: calc(var(--global-inline-spacing) * var(--table-spacing-gap-desktop));
6
+ gap: calc(var(--global-inline-spacing) * var(--table-spacing-gap-desktop));
7
+ overflow: auto;
8
+ }
9
+ .responsive-table-v3__headings {
10
+ display: grid;
11
+ grid-auto-flow: column;
12
+ grid-column: 1/var(--headings);
13
+ grid-template-columns: subgrid;
22
14
  }
23
- }
24
- @media screen and (min-width: 1024px) {
25
15
  .responsive-table-v3__heading {
16
+ grid-row: 1;
17
+ background-color: var(--background-column-headers);
26
18
  padding: calc(5 / var(--design-reference) * var(--screen-width));
27
19
  }
28
- }
29
- .responsive-table-v3__item {
30
- display: grid;
31
- grid-auto-flow: column;
32
- grid-column: 1/var(--headings);
33
- grid-template-columns: subgrid;
34
- }
35
- .responsive-table-v3__item-value {
36
- background-color: var(--background-colour-items);
37
- padding: calc(5 / var(--design-reference) * var(--screen-width));
38
- }
39
- @media screen and (min-width: 768px) {
40
- .responsive-table-v3__item-value {
41
- padding: calc(5 / var(--design-reference) * var(--screen-width));
20
+ @media screen and (min-width: 768px) {
21
+ .responsive-table-v3__heading {
22
+ padding: calc(5 / var(--design-reference) * var(--screen-width));
23
+ }
24
+ }
25
+ @media screen and (min-width: 1024px) {
26
+ .responsive-table-v3__heading {
27
+ padding: calc(5 / var(--design-reference) * var(--screen-width));
28
+ }
29
+ }
30
+ .responsive-table-v3__item {
31
+ display: grid;
32
+ grid-auto-flow: column;
33
+ grid-column: 1/var(--headings);
34
+ grid-template-columns: subgrid;
42
35
  }
43
- }
44
- @media screen and (min-width: 1024px) {
45
36
  .responsive-table-v3__item-value {
37
+ background-color: var(--background-colour-items);
46
38
  padding: calc(5 / var(--design-reference) * var(--screen-width));
47
39
  }
40
+ @media screen and (min-width: 768px) {
41
+ .responsive-table-v3__item-value {
42
+ padding: calc(5 / var(--design-reference) * var(--screen-width));
43
+ }
44
+ }
45
+ @media screen and (min-width: 1024px) {
46
+ .responsive-table-v3__item-value {
47
+ padding: calc(5 / var(--design-reference) * var(--screen-width));
48
+ }
49
+ }
48
50
  }
package/public/block-section-separator-v3/section-separator-v3.css CHANGED
@@ -1,41 +1,43 @@
1
- .section-separator-v3 {
2
- display: grid;
3
- display: var(--display-mobile, grid);
4
- }
5
- @media screen and (min-width: 768px) {
1
+ @layer base-styles {
6
2
  .section-separator-v3 {
7
3
  display: grid;
8
- display: var(--display-portrait, grid);
4
+ display: var(--display-mobile, grid);
9
5
  }
10
- }
11
- @media screen and (min-width: 1024px) {
12
- .section-separator-v3 {
13
- display: grid;
14
- display: var(--display-desktop, grid);
6
+ @media screen and (min-width: 768px) {
7
+ .section-separator-v3 {
8
+ display: grid;
9
+ display: var(--display-portrait, grid);
10
+ }
15
11
  }
16
- }
17
- .section-separator-v3__separator-image {
18
- width: 100%;
19
- position: absolute;
20
- display: block;
21
- translate: 0 -50%;
22
- height: auto;
23
- top: 0;
24
- }
25
- .section-separator-v3__secondary-image {
26
- position: absolute;
27
- place-self: center var(--horizontal-position);
28
- translate: var(--horizontal-offset) var(--vertical-offset);
29
- top: 0;
30
- max-width: calc(var(--max-width-mobile) / var(--design-reference) * var(--screen-width));
31
- }
32
- @media screen and (min-width: 768px) {
33
- .section-separator-v3__secondary-image {
34
- max-width: calc(var(--max-width-portrait) / var(--design-reference) * var(--screen-width));
12
+ @media screen and (min-width: 1024px) {
13
+ .section-separator-v3 {
14
+ display: grid;
15
+ display: var(--display-desktop, grid);
16
+ }
17
+ }
18
+ .section-separator-v3__separator-image {
19
+ width: 100%;
20
+ position: absolute;
21
+ display: block;
22
+ translate: 0 -50%;
23
+ height: auto;
24
+ top: 0;
35
25
  }
36
- }
37
- @media screen and (min-width: 768px) and (min-width: 1024px) {
38
26
  .section-separator-v3__secondary-image {
39
- max-width: calc(var(--max-width-desktop) / var(--design-reference) * var(--screen-width));
27
+ position: absolute;
28
+ place-self: center var(--horizontal-position);
29
+ translate: var(--horizontal-offset) var(--vertical-offset);
30
+ top: 0;
31
+ max-width: calc(var(--max-width-mobile) / var(--design-reference) * var(--screen-width));
32
+ }
33
+ @media screen and (min-width: 768px) {
34
+ .section-separator-v3__secondary-image {
35
+ max-width: calc(var(--max-width-portrait) / var(--design-reference) * var(--screen-width));
36
+ }
37
+ }
38
+ @media screen and (min-width: 768px) and (min-width: 1024px) {
39
+ .section-separator-v3__secondary-image {
40
+ max-width: calc(var(--max-width-desktop) / var(--design-reference) * var(--screen-width));
41
+ }
40
42
  }
41
43
  }
package/public/block-single-column-container-v3/single-column-container-v3.css CHANGED
@@ -1,12 +1,14 @@
1
- .single-column-container-v3 {
2
- display: grid;
3
- grid-template: "main"/1fr;
4
- place-items: center;
5
- position: relative;
6
- }
7
- .single-column-container-v3__block-container {
8
- display: grid;
9
- grid-area: main;
10
- z-index: 5;
11
- width: 100%;
1
+ @layer base-styles {
2
+ .single-column-container-v3 {
3
+ display: grid;
4
+ grid-template: "main"/1fr;
5
+ place-items: center;
6
+ position: relative;
7
+ }
8
+ .single-column-container-v3__block-container {
9
+ display: grid;
10
+ grid-area: main;
11
+ z-index: 5;
12
+ width: 100%;
13
+ }
12
14
  }