@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-featured-image-gallery-v3/featured-image-gallery-v3.css CHANGED
@@ -1,96 +1,98 @@
1
- .featured-image-gallery-v3 {
2
- display: grid;
3
- grid-template: "featured" "other"/1fr;
4
- grid-gap: calc(10 / var(--design-reference) * var(--screen-width));
5
- gap: calc(10 / var(--design-reference) * var(--screen-width));
6
- }
7
- @media screen and (min-width: 768px) {
1
+ @layer base-styles {
8
2
  .featured-image-gallery-v3 {
9
- grid-template: "featured other"/1fr 1fr;
10
- grid-gap: calc(20 / var(--design-reference) * var(--screen-width));
3
+ display: grid;
4
+ grid-template: "featured" "other"/1fr;
5
+ grid-gap: calc(10 / var(--design-reference) * var(--screen-width));
6
+ gap: calc(10 / var(--design-reference) * var(--screen-width));
11
7
  }
12
- }
13
- .featured-image-gallery-v3__featured-image-container {
14
- perspective: 1000px;
15
- grid-area: featured;
16
- place-self: stretch;
17
- aspect-ratio: 1;
18
- }
19
- .featured-image-gallery-v3__featured-image-container.changing-image .featured-image-gallery-v3__featured-image-inner-container {
20
- transform: rotateY(180deg);
21
- }
22
- .featured-image-gallery-v3__featured-image-inner-container {
23
- position: relative;
24
- width: 100%;
25
- height: 100%;
26
- text-align: center;
27
- transition: transform 0.8s;
28
- transform-style: preserve-3d;
29
- }
30
- .featured-image-gallery-v3__featured-image-front,
31
- .featured-image-gallery-v3__featured-image-back {
32
- position: absolute;
33
- width: 100%;
34
- height: 100%;
35
- backface-visibility: hidden;
36
- }
37
- .featured-image-gallery-v3__featured-image-front {
38
- background-color: var(--bally-blue-dark);
39
- }
40
- .featured-image-gallery-v3__featured-image-back {
41
- display: grid;
42
- place-items: center;
43
- background-color: var(--bally-blue-dark);
44
- transform: rotateY(180deg);
45
- padding: calc(20 / var(--design-reference) * var(--screen-width));
46
- }
47
- @media screen and (min-width: 768px) {
8
+ @media screen and (min-width: 768px) {
9
+ .featured-image-gallery-v3 {
10
+ grid-template: "featured other"/1fr 1fr;
11
+ grid-gap: calc(20 / var(--design-reference) * var(--screen-width));
12
+ }
13
+ }
14
+ .featured-image-gallery-v3__featured-image-container {
15
+ perspective: 1000px;
16
+ grid-area: featured;
17
+ place-self: stretch;
18
+ aspect-ratio: 1;
19
+ }
20
+ .featured-image-gallery-v3__featured-image-container.changing-image .featured-image-gallery-v3__featured-image-inner-container {
21
+ transform: rotateY(180deg);
22
+ }
23
+ .featured-image-gallery-v3__featured-image-inner-container {
24
+ position: relative;
25
+ width: 100%;
26
+ height: 100%;
27
+ text-align: center;
28
+ transition: transform 0.8s;
29
+ transform-style: preserve-3d;
30
+ }
31
+ .featured-image-gallery-v3__featured-image-front,
48
32
  .featured-image-gallery-v3__featured-image-back {
49
- padding: calc(120 / var(--design-reference) * var(--screen-width));
33
+ position: absolute;
34
+ width: 100%;
35
+ height: 100%;
36
+ backface-visibility: hidden;
37
+ }
38
+ .featured-image-gallery-v3__featured-image-front {
39
+ background-color: var(--bally-blue-dark);
40
+ }
41
+ .featured-image-gallery-v3__featured-image-back {
42
+ display: grid;
43
+ place-items: center;
44
+ background-color: var(--bally-blue-dark);
45
+ transform: rotateY(180deg);
46
+ padding: calc(20 / var(--design-reference) * var(--screen-width));
47
+ }
48
+ @media screen and (min-width: 768px) {
49
+ .featured-image-gallery-v3__featured-image-back {
50
+ padding: calc(120 / var(--design-reference) * var(--screen-width));
51
+ }
50
52
  }
51
- }
52
- .featured-image-gallery-v3__featured-image {
53
- grid-area: featured;
54
- -o-object-fit: cover;
55
- object-fit: cover;
56
- aspect-ratio: 1;
57
- }
58
- @media screen and (min-width: 768px) {
59
53
  .featured-image-gallery-v3__featured-image {
60
- width: 100%;
61
- height: auto;
54
+ grid-area: featured;
55
+ -o-object-fit: cover;
56
+ object-fit: cover;
57
+ aspect-ratio: 1;
58
+ }
59
+ @media screen and (min-width: 768px) {
60
+ .featured-image-gallery-v3__featured-image {
61
+ width: 100%;
62
+ height: auto;
63
+ }
62
64
  }
63
- }
64
- .featured-image-gallery-v3__other-images {
65
- grid-area: other;
66
- place-self: stretch;
67
- display: grid;
68
- aspect-ratio: 1;
69
- grid-gap: calc(8 / var(--design-reference) * var(--screen-width));
70
- grid-template-columns: repeat(3, 1fr);
71
- grid-template-rows: repeat(3, 1fr);
72
- }
73
- @media screen and (min-width: 768px) {
74
65
  .featured-image-gallery-v3__other-images {
75
- grid-gap: calc(10 / var(--design-reference) * var(--screen-width));
66
+ grid-area: other;
67
+ place-self: stretch;
68
+ display: grid;
69
+ aspect-ratio: 1;
70
+ grid-gap: calc(8 / var(--design-reference) * var(--screen-width));
71
+ grid-template-columns: repeat(3, 1fr);
72
+ grid-template-rows: repeat(3, 1fr);
73
+ }
74
+ @media screen and (min-width: 768px) {
75
+ .featured-image-gallery-v3__other-images {
76
+ grid-gap: calc(10 / var(--design-reference) * var(--screen-width));
77
+ }
78
+ }
79
+ .featured-image-gallery-v3__image-wrapper {
80
+ display: flex;
81
+ overflow: hidden;
82
+ box-shadow: 0px 0px 8px transparent;
83
+ transition: box-shadow 0.2s;
84
+ cursor: pointer;
85
+ }
86
+ .featured-image-gallery-v3__image-wrapper:hover,
87
+ .featured-image-gallery-v3__image-wrapper--active {
88
+ box-shadow: 0px 0px 0px calc(2 / var(--design-reference) * var(--screen-width)) white;
89
+ }
90
+ .featured-image-gallery-v3__image {
91
+ -o-object-fit: cover;
92
+ object-fit: cover;
93
+ aspect-ratio: 1;
94
+ width: 100%;
95
+ height: auto;
96
+ transition: transform 0.5s ease-out;
76
97
  }
77
- }
78
- .featured-image-gallery-v3__image-wrapper {
79
- display: flex;
80
- overflow: hidden;
81
- box-shadow: 0px 0px 8px transparent;
82
- transition: box-shadow 0.2s;
83
- cursor: pointer;
84
- }
85
- .featured-image-gallery-v3__image-wrapper:hover,
86
- .featured-image-gallery-v3__image-wrapper--active {
87
- box-shadow: 0px 0px 0px calc(2 / var(--design-reference) * var(--screen-width)) white;
88
- }
89
- .featured-image-gallery-v3__image {
90
- -o-object-fit: cover;
91
- object-fit: cover;
92
- aspect-ratio: 1;
93
- width: 100%;
94
- height: auto;
95
- transition: transform 0.5s ease-out;
96
98
  }
package/public/block-form-selection-v3/form-selection-v3.css CHANGED
@@ -1,29 +1,31 @@
1
- .form-selection-v3 {
2
- pointer-events: all;
3
- }
4
- .form-selection-v3__container-modal {
5
- display: none;
6
- position: fixed;
7
- inset: 0;
8
- z-index: 9998;
9
- background-color: rgba(0, 0, 0, 0.4);
10
- }
11
- .form-selection-v3__inner {
12
- overflow-y: scroll;
13
- width: 100vw;
14
- z-index: 9999;
15
- height: 100%;
16
- }
17
- .form-selection-v3__modal-open--icon {
18
- cursor: pointer;
19
- -webkit-appearance: none;
20
- -moz-appearance: none;
21
- appearance: none;
22
- border: none;
23
- background: transparent;
24
- }
25
- .form-selection-v3__modal-close {
26
- position: absolute;
27
- top: calc(20 / var(--design-reference) * var(--screen-width));
28
- right: calc(20 / var(--design-reference) * var(--screen-width));
1
+ @layer base-styles {
2
+ .form-selection-v3 {
3
+ pointer-events: all;
4
+ }
5
+ .form-selection-v3__container-modal {
6
+ display: none;
7
+ position: fixed;
8
+ inset: 0;
9
+ z-index: 9998;
10
+ background-color: rgba(0, 0, 0, 0.4);
11
+ }
12
+ .form-selection-v3__inner {
13
+ overflow-y: scroll;
14
+ width: 100vw;
15
+ z-index: 9999;
16
+ height: 100%;
17
+ }
18
+ .form-selection-v3__modal-open--icon {
19
+ cursor: pointer;
20
+ -webkit-appearance: none;
21
+ -moz-appearance: none;
22
+ appearance: none;
23
+ border: none;
24
+ background: transparent;
25
+ }
26
+ .form-selection-v3__modal-close {
27
+ position: absolute;
28
+ top: calc(20 / var(--design-reference) * var(--screen-width));
29
+ right: calc(20 / var(--design-reference) * var(--screen-width));
30
+ }
29
31
  }
package/public/block-gradient-layer-v3/gradient-layer-v3.css CHANGED
@@ -1,43 +1,45 @@
1
- .gradient-layer-v3 {
2
- display: grid;
3
- grid-template: "main"/1fr;
4
- --spread: calc(100% - var(--gradient-spread));
5
- }
6
- .gradient-layer-v3__gradient-overlay-element {
7
- position: absolute;
8
- inset: 0;
9
- z-index: var(--gradient-zindex);
10
- grid-area: var(--gradient-grid-area);
11
- }
12
- .gradient-layer-v3__gradient-overlay-element::before,
13
- .gradient-layer-v3__gradient-overlay-element:after {
14
- content: "";
15
- pointer-events: none;
16
- position: absolute;
17
- inset: 0;
18
- opacity: var(--gradient-opacity);
19
- }
20
- .gradient-layer-v3__gradient-overlay-element::before {
21
- background:
22
- linear-gradient(
23
- var(--gradient-origin-before),
24
- rgba(255, 255, 255, 0) 0%,
25
- rgba(255, 255, 255, 0) calc(var(--spread) - var(--gradient-amount)),
26
- var(--gradient-colour) calc(100% - var(--gradient-amount)));
27
- }
28
- .gradient-layer-v3__gradient-overlay-element::after {
29
- content: var(--enable-after);
30
- background:
31
- linear-gradient(
32
- var(--gradient-origin-after),
33
- rgba(255, 255, 255, 0) 0%,
34
- rgba(255, 255, 255, 0) calc(var(--spread) - var(--gradient-amount)),
35
- var(--gradient-colour) calc(100% - var(--gradient-amount)));
36
- }
37
- .gradient-layer-v3__blur-overlay-element {
38
- background: var(--blur-colour);
39
- backdrop-filter: blur(var(--blur-value));
40
- position: absolute;
41
- inset: 0;
42
- z-index: var(--blur-zindex);
1
+ @layer base-styles {
2
+ .gradient-layer-v3 {
3
+ display: grid;
4
+ grid-template: "main"/1fr;
5
+ --spread: calc(100% - var(--gradient-spread));
6
+ }
7
+ .gradient-layer-v3__gradient-overlay-element {
8
+ position: absolute;
9
+ inset: 0;
10
+ z-index: var(--gradient-zindex);
11
+ grid-area: var(--gradient-grid-area);
12
+ }
13
+ .gradient-layer-v3__gradient-overlay-element::before,
14
+ .gradient-layer-v3__gradient-overlay-element:after {
15
+ content: "";
16
+ pointer-events: none;
17
+ position: absolute;
18
+ inset: 0;
19
+ opacity: var(--gradient-opacity);
20
+ }
21
+ .gradient-layer-v3__gradient-overlay-element::before {
22
+ background:
23
+ linear-gradient(
24
+ var(--gradient-origin-before),
25
+ rgba(255, 255, 255, 0) 0%,
26
+ rgba(255, 255, 255, 0) calc(var(--spread) - var(--gradient-amount)),
27
+ var(--gradient-colour) calc(100% - var(--gradient-amount)));
28
+ }
29
+ .gradient-layer-v3__gradient-overlay-element::after {
30
+ content: var(--enable-after);
31
+ background:
32
+ linear-gradient(
33
+ var(--gradient-origin-after),
34
+ rgba(255, 255, 255, 0) 0%,
35
+ rgba(255, 255, 255, 0) calc(var(--spread) - var(--gradient-amount)),
36
+ var(--gradient-colour) calc(100% - var(--gradient-amount)));
37
+ }
38
+ .gradient-layer-v3__blur-overlay-element {
39
+ background: var(--blur-colour);
40
+ backdrop-filter: blur(var(--blur-value));
41
+ position: absolute;
42
+ inset: 0;
43
+ z-index: var(--blur-zindex);
44
+ }
43
45
  }