@total_onion/onion-library 2.0.149 → 2.0.151

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 (86) hide show
  1. package/components/block-post-type-filter-grid-v3/post-type-filter-grid-v3/post-link-widget.vue +4 -1
  2. package/components/block-raw-html-v3/raw-html-v3.js +7 -0
  3. package/components/block-raw-html-v3/raw-html-v3.scss +2 -0
  4. package/createDynamicBlockScss-v3.js +0 -1
  5. package/package.json +1 -1
  6. package/public/assetList.mjs +1 -1
  7. package/public/block-post-type-filter-grid-v3/post-type-filter-grid-v3.js +11 -11
  8. package/public/dynamicBlockScss-v3.scss +1 -0
  9. package/public/jsAssets.mjs +1 -1
  10. package/public/block-video-content-v3/video-content-v3.js +0 -11
  11. package/public/components/block-accent-image-v3/accent-image-v3.css +0 -0
  12. package/public/components/block-accent-image-v3/accent-image-v3.js +0 -7
  13. package/public/components/block-accordion-v3/accordion-v3.css +0 -474
  14. package/public/components/block-accordion-v3/accordion-v3.js +0 -117
  15. package/public/components/block-back-to-top-button-v3/back-to-top-button-v3.css +0 -62
  16. package/public/components/block-back-to-top-button-v3/back-to-top-button-v3.js +0 -12
  17. package/public/components/block-betterreviews-display-v3/betterreviews-display-v3.css +0 -96
  18. package/public/components/block-betterreviews-display-v3/betterreviews-display-v3.js +0 -7
  19. package/public/components/block-block-interactions-v3/block-interactions-v3.css +0 -34
  20. package/public/components/block-block-interactions-v3/block-interactions-v3.js +0 -44
  21. package/public/components/block-carousel-multi-layout-v3/carousel-multi-layout-v3.css +0 -928
  22. package/public/components/block-carousel-multi-layout-v3/carousel-multi-layout-v3.js +0 -169
  23. package/public/components/block-cocktail-recipe-v3/cocktail-recipe-v3.css +0 -317
  24. package/public/components/block-cocktail-recipe-v3/cocktail-recipe-v3.js +0 -93
  25. package/public/components/block-cover-link-v3/cover-link-v3.css +0 -0
  26. package/public/components/block-cover-link-v3/cover-link-v3.js +0 -7
  27. package/public/components/block-divider-v3/divider-v3.css +0 -74
  28. package/public/components/block-divider-v3/divider-v3.js +0 -7
  29. package/public/components/block-featured-image-gallery-v3/featured-image-gallery-v3.css +0 -102
  30. package/public/components/block-featured-image-gallery-v3/featured-image-gallery-v3.js +0 -44
  31. package/public/components/block-form-selection-v3/form-selection-v3.css +0 -32
  32. package/public/components/block-form-selection-v3/form-selection-v3.js +0 -61
  33. package/public/components/block-gradient-layer-v3/gradient-layer-v3.css +0 -52
  34. package/public/components/block-gradient-layer-v3/gradient-layer-v3.js +0 -7
  35. package/public/components/block-group-container-v3/group-container-v3.css +0 -323
  36. package/public/components/block-group-container-v3/group-container-v3.js +0 -7
  37. package/public/components/block-lottie-content-v3/lottie-content-v3.css +0 -0
  38. package/public/components/block-lottie-content-v3/lottie-content-v3.js +0 -25
  39. package/public/components/block-market-selector-v3/market-selector-v3.css +0 -139
  40. package/public/components/block-market-selector-v3/market-selector-v3.js +0 -7
  41. package/public/components/block-modal-form-v3/modal-form-v3.css +0 -0
  42. package/public/components/block-modal-form-v3/modal-form-v3.js +0 -44
  43. package/public/components/block-modal-form-v3/modal-form-v3.scss.css +0 -0
  44. package/public/components/block-nav-menu-container-v3/nav-menu-container-v3.css +0 -3
  45. package/public/components/block-nav-menu-container-v3/nav-menu-container-v3.js +0 -7
  46. package/public/components/block-post-info-v3/post-info-v3.css +0 -1310
  47. package/public/components/block-post-info-v3/post-info-v3.js +0 -7
  48. package/public/components/block-post-info-v3/post-info-v3.scss.css +0 -1310
  49. package/public/components/block-post-type-filter-grid-v3/post-type-filter-grid-v3.css +0 -859
  50. package/public/components/block-post-type-filter-grid-v3/post-type-filter-grid-v3.js +0 -13
  51. package/public/components/block-product-info-v3/product-info-v3.css +0 -993
  52. package/public/components/block-product-info-v3/product-info-v3.js +0 -7
  53. package/public/components/block-product-info-v3/product-info-v3.scss.css +0 -993
  54. package/public/components/block-responsive-table-v3/responsive-table-v3.css +0 -48
  55. package/public/components/block-responsive-table-v3/responsive-table-v3.js +0 -7
  56. package/public/components/block-scrolling-banner-v3/scrolling-banner-v3.css +0 -85
  57. package/public/components/block-scrolling-banner-v3/scrolling-banner-v3.js +0 -106
  58. package/public/components/block-section-separator-v3/section-separator-v3.css +0 -43
  59. package/public/components/block-section-separator-v3/section-separator-v3.js +0 -7
  60. package/public/components/block-single-column-container-v3/single-column-container-v3.css +0 -14
  61. package/public/components/block-single-column-container-v3/single-column-container-v3.js +0 -7
  62. package/public/components/block-single-responsive-image-v3/single-responsive-image-v3.css +0 -60
  63. package/public/components/block-single-responsive-image-v3/single-responsive-image-v3.js +0 -7
  64. package/public/components/block-site-copyright-notice-v3/site-copyright-notice-v3.css +0 -0
  65. package/public/components/block-site-copyright-notice-v3/site-copyright-notice-v3.js +0 -7
  66. package/public/components/block-site-logo-container-v3/site-logo-container-v3.css +0 -18
  67. package/public/components/block-site-logo-container-v3/site-logo-container-v3.js +0 -7
  68. package/public/components/block-site-title-and-tagline-v3/site-title-and-tagline-v3.css +0 -14
  69. package/public/components/block-site-title-and-tagline-v3/site-title-and-tagline-v3.js +0 -7
  70. package/public/components/block-smash-balloon-social-media-v3/smash-balloon-social-media-v3.css +0 -25
  71. package/public/components/block-smash-balloon-social-media-v3/smash-balloon-social-media-v3.js +0 -8
  72. package/public/components/block-social-networks-v3/social-networks-v3.css +0 -74
  73. package/public/components/block-social-networks-v3/social-networks-v3.js +0 -7
  74. package/public/components/block-spacer-v3/spacer-v3.css +0 -16
  75. package/public/components/block-spacer-v3/spacer-v3.js +0 -2
  76. package/public/components/block-spacer-v3/spacer-v3.scss.css +0 -16
  77. package/public/components/block-spotify-embed-v3/spotify-embed-v3.css +0 -7
  78. package/public/components/block-spotify-embed-v3/spotify-embed-v3.js +0 -7
  79. package/public/components/block-standard-content-v3/standard-content-v3.css +0 -529
  80. package/public/components/block-standard-content-v3/standard-content-v3.js +0 -7
  81. package/public/components/block-sticky-buy-cta-v3/sticky-buy-cta-v3.css +0 -0
  82. package/public/components/block-sticky-buy-cta-v3/sticky-buy-cta-v3.js +0 -7
  83. package/public/components/block-sub-group-container-v3/sub-group-container-v3.css +0 -308
  84. package/public/components/block-sub-group-container-v3/sub-group-container-v3.js +0 -2
  85. package/public/components/block-video-content-v3/video-content-v3.css +0 -105
  86. package/public/components/block-video-content-v3/video-content-v3.js +0 -11
@@ -1,169 +0,0 @@
1
- import { getSwiperAssetsV2 } from "@total_onion/onion-utils/onion-utils.mjs";
2
- import { Navigation, Pagination, Autoplay, EffectFade } from "swiper/modules";
3
- export default function carouselmultilayoutv3Js(options = {}) {
4
- try {
5
- const { block } = options;
6
- const totalSlides = block.querySelectorAll(".swiper-slide").length || 1;
7
- Promise.all([getSwiperAssetsV2()]).then((values) => {
8
- const { Swiper } = values[0][0];
9
- const dataAttributes = block.dataset;
10
- const slidesDesktop = Number(dataAttributes.desktopslides);
11
- const slidesDesktopFull = Number(dataAttributes.desktopslidesfull) || slidesDesktop;
12
- const slidesTablet = Number(dataAttributes.tabletslides);
13
- const slidesMobile = Number(dataAttributes.mobileslides);
14
- const slidesOffsetDesktopBefore = Number(
15
- dataAttributes.desktopslidesoffsetbefore
16
- );
17
- const slidesOffsetTabletBefore = Number(
18
- dataAttributes.tabletslidesoffsetbefore
19
- );
20
- const slidesOffsetMobileBefore = Number(
21
- dataAttributes.mobileslidesoffsetbefore
22
- );
23
- const slidesOffsetDesktopAfter = Number(
24
- dataAttributes.desktopslidesoffsetafter
25
- );
26
- const slidesOffsetTabletAfter = Number(
27
- dataAttributes.tabletslidesoffsetafter
28
- );
29
- const slidesOffsetMobileAfter = Number(
30
- dataAttributes.mobileslidesoffsetafter
31
- );
32
- const loopSlides = Number(dataAttributes.loopslides) === 1;
33
- const loopSlidesPortrait = Number(dataAttributes.loopslidesportrait) === 1;
34
- const loopSlidesMobile = Number(dataAttributes.loopslidesmobile) === 1;
35
- console.log(totalSlides > 1 ? loopSlides : false);
36
- const spaceBetweenSlidesDesktop = Number(
37
- dataAttributes.desktopspacebetweenslides
38
- );
39
- const spaceBetweenSlidesDesktopFull = Number(dataAttributes.desktopfullspacebetweenslides) || spaceBetweenSlidesDesktop;
40
- const spaceBetweenSlidesMobile = Number(
41
- dataAttributes.mobilespacebetweenslides
42
- );
43
- const spaceBetweenSlidesTablet = Number(
44
- dataAttributes.tabletspacebetweenslides
45
- );
46
- const autoplayCarousel = Number(dataAttributes.autoplay) === 1;
47
- const centerActiveSlide = Number(dataAttributes.centeractiveslide) === 1;
48
- const centerActiveSlidePortrait = Number(dataAttributes.centeractiveslideportrait) === 1;
49
- const centerActiveSlideMobile = Number(dataAttributes.centeractiveslidemobile) === 1;
50
- const centerInsufficientSlidesDesktop = Number(dataAttributes.centerinsufficientslidesdesktop) === 1;
51
- const centerInsufficientSlidesPortrait = Number(dataAttributes.centerinsufficientslidesportrait) === 1;
52
- const centerInsufficientSlidesMobile = Number(dataAttributes.centerinsufficientslidesmobile) === 1;
53
- const carouselEnableFreeMode = Number(dataAttributes.enablefreemode) === 1;
54
- const carouselEnableMousewheel = Number(dataAttributes.enablemousewheel) === 1;
55
- const delay = Number(dataAttributes.transitiondelay);
56
- const speed = Number(dataAttributes.transitionspeed);
57
- const transitionStyle = dataAttributes.transitionstyle === "default" ? "" : dataAttributes.transitionstyle;
58
- const paginationStyle = dataAttributes.paginationstyle === "customnumber" ? "bullets" : dataAttributes.paginationstyle;
59
- const fractionStyle = dataAttributes.fractionstyle;
60
- const fractionString = dataAttributes.fractionstring;
61
- const fractionSetting = fractionStyle === "text" ? function(currentClass, totalClass) {
62
- return '<span class="' + currentClass + '"></span> ' + fractionString + ' <span class="' + totalClass + '"></span>';
63
- } : false;
64
- const customNumber = dataAttributes.paginationstyle === "customnumber" ? function(index, className) {
65
- return '<div class="' + className + '"><span class="pagination-number">0' + (index + 1) + "</span></div>";
66
- } : false;
67
- const carouselmultilayoutv3Swiper = new Swiper(
68
- block.querySelector(".swiper"),
69
- {
70
- modules: [
71
- Navigation,
72
- Pagination,
73
- Autoplay,
74
- EffectFade
75
- // EffectCoverflow,
76
- // EffectCreative,
77
- // FreeMode,
78
- // Mousewheel
79
- ],
80
- slidesPerView: slidesMobile,
81
- spaceBetween: spaceBetweenSlidesMobile,
82
- loop: totalSlides > 1 ? loopSlidesMobile : false,
83
- preloadImages: true,
84
- watchSlidesVisibility: true,
85
- effect: transitionStyle,
86
- creativeEffect: {
87
- prev: {
88
- shadow: true,
89
- translate: [0, 0, -400]
90
- },
91
- next: {
92
- translate: ["100%", 0, 0]
93
- }
94
- },
95
- coverflowEffect: {
96
- rotate: 20,
97
- depth: 50,
98
- scale: 0.9,
99
- modifier: 1,
100
- slideShadows: true
101
- },
102
- fadeEffect: {
103
- crossFade: true
104
- },
105
- lazy: {
106
- loadPrevNext: true
107
- },
108
- speed,
109
- autoplay: autoplayCarousel ? {
110
- delay
111
- } : "",
112
- watchOverflow: true,
113
- centeredSlides: centerActiveSlideMobile,
114
- centerInsufficientSlides: centerInsufficientSlidesMobile,
115
- freeMode: {
116
- enabled: carouselEnableFreeMode,
117
- sticky: carouselEnableFreeMode
118
- },
119
- mousewheel: carouselEnableMousewheel,
120
- slidesOffsetBefore: slidesOffsetMobileBefore,
121
- slidesOffsetAfter: slidesOffsetMobileAfter,
122
- breakpoints: {
123
- 744: {
124
- spaceBetween: spaceBetweenSlidesTablet,
125
- slidesPerView: slidesTablet,
126
- centeredSlides: centerActiveSlidePortrait,
127
- centerInsufficientSlides: centerInsufficientSlidesPortrait,
128
- slidesOffsetBefore: slidesOffsetTabletBefore,
129
- slidesOffsetAfter: slidesOffsetTabletAfter,
130
- loop: totalSlides > 1 ? loopSlidesPortrait : false
131
- },
132
- 1024: {
133
- slidesPerView: slidesDesktop,
134
- spaceBetween: spaceBetweenSlidesDesktop,
135
- centeredSlides: centerActiveSlide,
136
- centerInsufficientSlides: centerInsufficientSlidesDesktop,
137
- slidesOffsetBefore: slidesOffsetDesktopBefore,
138
- slidesOffsetAfter: slidesOffsetDesktopAfter,
139
- loop: totalSlides > 1 ? loopSlides : false
140
- },
141
- 1440: {
142
- slidesPerView: slidesDesktopFull,
143
- spaceBetween: spaceBetweenSlidesDesktopFull,
144
- loop: totalSlides > 1 ? loopSlides : false
145
- }
146
- },
147
- navigation: {
148
- nextEl: block.querySelector(".swiper-button-next"),
149
- prevEl: block.querySelector(".swiper-button-prev")
150
- },
151
- pagination: {
152
- el: block.querySelector(".swiper-pagination"),
153
- type: paginationStyle,
154
- renderFraction: fractionSetting,
155
- clickable: true,
156
- renderBullet: customNumber
157
- }
158
- }
159
- );
160
- if (false) {
161
- null.then((result) => {
162
- result.default();
163
- });
164
- }
165
- });
166
- } catch (error) {
167
- console.error(error);
168
- }
169
- }
@@ -1,317 +0,0 @@
1
- @charset "UTF-8";
2
- .cocktail-recipe-v3 {
3
- pointer-events: all;
4
- }
5
- .cocktail-recipe-v3__ingredients-container {
6
- display: flex;
7
- flex-direction: column;
8
- gap: calc(20 / var(--design-reference) * var(--screen-width));
9
- padding-bottom: calc(50 / var(--design-reference) * var(--screen-width));
10
- }
11
- .cocktail-recipe-v3__ingredients-container .ingredients-title {
12
- padding-top: calc(10 / var(--design-reference) * var(--screen-width));
13
- padding-bottom: calc(10 / var(--design-reference) * var(--screen-width));
14
- font-family: var(--primary-font-family);
15
- font-size: calc(80 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier));
16
- font-weight: 500;
17
- text-transform: uppercase;
18
- text-box-edge: cap alphabetic;
19
- text-box-trim: trim-both;
20
- }
21
- @media screen and (min-width: 768px) {
22
- .cocktail-recipe-v3__ingredients-container .ingredients-title {
23
- font-size: calc(160 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier));
24
- }
25
- }
26
- .cocktail-recipe-v3__servings {
27
- display: flex;
28
- justify-content: space-between;
29
- align-items: center;
30
- padding-top: calc(15 / var(--design-reference) * var(--screen-width));
31
- padding-bottom: calc(15 / var(--design-reference) * var(--screen-width));
32
- border-bottom: 1px solid rgba(250, 248, 236, 0.3019607843);
33
- }
34
- .cocktail-recipe-v3__servings .servings-title {
35
- font-family: var(--secondary-font-family);
36
- font-size: calc(26 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier));
37
- font-weight: 500;
38
- }
39
- .cocktail-recipe-v3__servings .servings-control-wrapper {
40
- display: flex;
41
- align-items: center;
42
- gap: calc(15 / var(--design-reference) * var(--screen-width));
43
- }
44
- .cocktail-recipe-v3__servings .servings-control-wrapper .dec-btn-wrapper {
45
- width: 40px;
46
- height: 40px;
47
- border: 1px solid #faf8ec;
48
- overflow: hidden;
49
- }
50
- .cocktail-recipe-v3__servings .servings-control-wrapper .dec-btn-wrapper .servings-dec-btn {
51
- cursor: pointer;
52
- background-color: #0054ff;
53
- color: #faf8ec;
54
- font-size: 28px;
55
- padding-bottom: 4px;
56
- width: 100%;
57
- height: 100%;
58
- border: medium none currentcolor;
59
- border: initial;
60
- transform: translateX(0);
61
- transition: transform 0.3s ease;
62
- }
63
- .cocktail-recipe-v3__servings .servings-control-wrapper .dec-btn-wrapper .servings-dec-btn::after {
64
- content: "\2212";
65
- color: #0054ff;
66
- padding-top: 4px;
67
- width: 38px;
68
- height: 38px;
69
- position: absolute;
70
- top: 0;
71
- right: -38px;
72
- background-color: #faf8ec;
73
- }
74
- .cocktail-recipe-v3__servings .servings-control-wrapper .dec-btn-wrapper:hover .servings-dec-btn {
75
- transform: translateX(-100%);
76
- }
77
- .cocktail-recipe-v3__servings .servings-control-wrapper .dec-btn-wrapper.inactive {
78
- opacity: 0.4;
79
- pointer-events: none;
80
- }
81
- .cocktail-recipe-v3__servings .servings-control-wrapper .servings-current {
82
- font-family: var(--secondary-font-family);
83
- font-size: calc(26 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier));
84
- font-weight: 500;
85
- display: inline-block;
86
- width: calc(60 / var(--design-reference) * var(--screen-width));
87
- text-align: center;
88
- }
89
- @media screen and (min-width: 768px) {
90
- .cocktail-recipe-v3__servings .servings-control-wrapper .servings-current {
91
- font-size: calc(30 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier));
92
- }
93
- }
94
- .cocktail-recipe-v3__servings .servings-control-wrapper .inc-btn-wrapper {
95
- cursor: pointer;
96
- width: 40px;
97
- height: 40px;
98
- border: 1px solid #faf8ec;
99
- overflow: hidden;
100
- }
101
- .cocktail-recipe-v3__servings .servings-control-wrapper .inc-btn-wrapper .servings-inc-btn {
102
- cursor: pointer;
103
- color: #0054ff;
104
- font-size: 30px;
105
- background-color: #faf8ec;
106
- width: 100%;
107
- height: 100%;
108
- border: medium none currentcolor;
109
- border: initial;
110
- transform: translateX(-100%);
111
- transition: transform 0.3s ease;
112
- }
113
- .cocktail-recipe-v3__servings .servings-control-wrapper .inc-btn-wrapper .servings-inc-btn::after {
114
- content: "+";
115
- padding-top: 2px;
116
- color: #faf8ec;
117
- width: 38px;
118
- height: 38px;
119
- position: absolute;
120
- top: 0;
121
- right: -38px;
122
- background-color: #0054ff;
123
- }
124
- .cocktail-recipe-v3__servings .servings-control-wrapper .inc-btn-wrapper:hover .servings-inc-btn {
125
- transform: translateX(0);
126
- }
127
- .cocktail-recipe-v3__unit-toggle {
128
- display: flex;
129
- justify-content: space-between;
130
- align-items: center;
131
- padding-top: calc(10 / var(--design-reference) * var(--screen-width));
132
- }
133
- .cocktail-recipe-v3__unit-toggle .unit-text {
134
- font-family: var(--tertiary-font-family);
135
- font-size: calc(18 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier));
136
- font-weight: 700;
137
- }
138
- @media screen and (min-width: 768px) {
139
- .cocktail-recipe-v3__unit-toggle .unit-text {
140
- font-size: calc(22 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier));
141
- }
142
- }
143
- .cocktail-recipe-v3__unit-toggle .unit-toggle-wrapper {
144
- display: flex;
145
- align-items: center;
146
- gap: calc(20 / var(--design-reference) * var(--screen-width));
147
- }
148
- .cocktail-recipe-v3__unit-toggle .unit-toggle-wrapper .checkbox-wrapper input[type=checkbox] {
149
- display: none;
150
- visibility: hidden;
151
- }
152
- .cocktail-recipe-v3__unit-toggle .unit-toggle-wrapper .checkbox-wrapper .block {
153
- position: relative;
154
- clear: both;
155
- float: left;
156
- }
157
- .cocktail-recipe-v3__unit-toggle .unit-toggle-wrapper .checkbox-wrapper label {
158
- width: 64px;
159
- height: 36px;
160
- box-sizing: border-box;
161
- border: 1px solid;
162
- float: left;
163
- border-radius: 100px;
164
- position: relative;
165
- cursor: pointer;
166
- transition: 0.3s ease;
167
- color: #faf8ec;
168
- }
169
- .cocktail-recipe-v3__unit-toggle .unit-toggle-wrapper .checkbox-wrapper input[type=checkbox]:checked + label:before {
170
- left: 31px;
171
- }
172
- .cocktail-recipe-v3__unit-toggle .unit-toggle-wrapper .checkbox-wrapper label:before {
173
- transition: 0.3s ease;
174
- content: "";
175
- width: 28px;
176
- height: 28px;
177
- position: absolute;
178
- background: #faf8ec;
179
- left: 3px;
180
- top: 3px;
181
- box-sizing: border-box;
182
- color: black;
183
- border-radius: 50%;
184
- }
185
- .cocktail-recipe-v3 .ingredients-wrapper {
186
- display: flex;
187
- align-items: center;
188
- gap: calc(15 / var(--design-reference) * var(--screen-width));
189
- }
190
- @media screen and (min-width: 768px) {
191
- .cocktail-recipe-v3 .ingredients-wrapper {
192
- gap: calc(30 / var(--design-reference) * var(--screen-width));
193
- }
194
- }
195
- .cocktail-recipe-v3 .ingredients-wrapper .ingredient-image {
196
- max-width: calc(50 / var(--design-reference) * var(--screen-width));
197
- aspect-ratio: 1;
198
- -o-object-fit: cover;
199
- object-fit: cover;
200
- }
201
- @media screen and (min-width: 768px) {
202
- .cocktail-recipe-v3 .ingredients-wrapper .ingredient-image {
203
- max-width: calc(100 / var(--design-reference) * var(--screen-width));
204
- }
205
- }
206
- .cocktail-recipe-v3 .ingredients-wrapper .ingredient-text {
207
- font-size: calc(18 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier));
208
- font-family: var(--tertiary-font-family);
209
- font-weight: 400;
210
- }
211
- @media screen and (min-width: 768px) {
212
- .cocktail-recipe-v3 .ingredients-wrapper .ingredient-text {
213
- font-size: calc(22 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier));
214
- }
215
- }
216
- .cocktail-recipe-v3__equipment-container {
217
- display: flex;
218
- flex-direction: column;
219
- gap: calc(20 / var(--design-reference) * var(--screen-width));
220
- padding-bottom: calc(100 / var(--design-reference) * var(--screen-width));
221
- }
222
- @media screen and (min-width: 768px) {
223
- .cocktail-recipe-v3__equipment-container {
224
- padding-bottom: calc(180 / var(--design-reference) * var(--screen-width));
225
- }
226
- }
227
- .cocktail-recipe-v3__equipment-container .equipments-title {
228
- font-family: var(--secondary-font-family);
229
- font-size: calc(26 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier));
230
- font-weight: 500;
231
- padding-top: calc(20 / var(--design-reference) * var(--screen-width));
232
- padding-bottom: calc(20 / var(--design-reference) * var(--screen-width));
233
- border-bottom: 1px solid rgba(250, 248, 236, 0.3019607843);
234
- }
235
- @media screen and (min-width: 768px) {
236
- .cocktail-recipe-v3__equipment-container .equipments-title {
237
- padding-top: calc(10 / var(--design-reference) * var(--screen-width));
238
- padding-bottom: calc(10 / var(--design-reference) * var(--screen-width));
239
- }
240
- }
241
- .cocktail-recipe-v3__equipment-container .equipments-wrapper {
242
- display: flex;
243
- align-items: center;
244
- gap: calc(15 / var(--design-reference) * var(--screen-width));
245
- }
246
- @media screen and (min-width: 768px) {
247
- .cocktail-recipe-v3__equipment-container .equipments-wrapper {
248
- gap: calc(30 / var(--design-reference) * var(--screen-width));
249
- }
250
- }
251
- .cocktail-recipe-v3__equipment-container .equipments-wrapper .equipment-image {
252
- max-width: calc(50 / var(--design-reference) * var(--screen-width));
253
- aspect-ratio: 1;
254
- -o-object-fit: cover;
255
- object-fit: cover;
256
- }
257
- @media screen and (min-width: 768px) {
258
- .cocktail-recipe-v3__equipment-container .equipments-wrapper .equipment-image {
259
- max-width: calc(100 / var(--design-reference) * var(--screen-width));
260
- }
261
- }
262
- .cocktail-recipe-v3__equipment-container .equipments-wrapper .equipment-text {
263
- font-family: var(--tertiary-font-family);
264
- font-size: calc(18 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier));
265
- font-weight: 400;
266
- }
267
- @media screen and (min-width: 768px) {
268
- .cocktail-recipe-v3__equipment-container .equipments-wrapper .equipment-text {
269
- font-size: calc(22 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier));
270
- }
271
- }
272
- .cocktail-recipe-v3__instructions-container .instructions-title {
273
- font-family: var(--primary-font-family);
274
- font-size: calc(70 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier));
275
- font-weight: 500;
276
- text-transform: uppercase;
277
- padding-top: calc(10 / var(--design-reference) * var(--screen-width));
278
- padding-bottom: calc(10 / var(--design-reference) * var(--screen-width));
279
- text-box-edge: cap alphabetic;
280
- text-box-trim: trim-both;
281
- }
282
- @media screen and (min-width: 768px) {
283
- .cocktail-recipe-v3__instructions-container .instructions-title {
284
- padding-top: calc(40 / var(--design-reference) * var(--screen-width));
285
- padding-bottom: calc(40 / var(--design-reference) * var(--screen-width));
286
- font-size: calc(160 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier));
287
- }
288
- }
289
- .cocktail-recipe-v3__instructions-container .instructions-wrapper {
290
- display: flex;
291
- align-items: flex-start;
292
- gap: calc(20 / var(--design-reference) * var(--screen-width));
293
- padding-top: calc(30 / var(--design-reference) * var(--screen-width));
294
- padding-bottom: calc(30 / var(--design-reference) * var(--screen-width));
295
- border-top: 1px solid rgba(250, 248, 236, 0.3019607843);
296
- }
297
- @media screen and (min-width: 768px) {
298
- .cocktail-recipe-v3__instructions-container .instructions-wrapper {
299
- align-items: center;
300
- }
301
- }
302
- .cocktail-recipe-v3__instructions-container .instructions-wrapper .instructions-number {
303
- font-family: var(--secondary-font-family);
304
- font-size: calc(30 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier));
305
- padding-left: calc(10 / var(--design-reference) * var(--screen-width));
306
- padding-right: calc(10 / var(--design-reference) * var(--screen-width));
307
- font-weight: 500;
308
- text-box-trim: trim-both;
309
- text-box-edge: cap alphabetic;
310
- }
311
- .cocktail-recipe-v3__instructions-container .instructions-wrapper .instructions-text {
312
- font-family: var(--tertiary-font-family);
313
- font-size: calc(30 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier));
314
- font-weight: 300;
315
- text-box-trim: trim-both;
316
- text-box-edge: cap alphabetic;
317
- }
@@ -1,93 +0,0 @@
1
- export default function cocktailrecipev3Js(options = {}) {
2
- try {
3
- const { block } = options;
4
- const valueEl = block.querySelector("[data-servings-value]");
5
- const decBtn = block.querySelector("[data-servings-dec]");
6
- const incBtn = block.querySelector("[data-servings-inc]");
7
- const decWrapper = block.querySelector(".dec-btn-wrapper");
8
- const amountEls = block.querySelectorAll("[data-ingredients]");
9
- const unitToggle = document.querySelector("[data-unit-toggle]");
10
- const checkbox = unitToggle?.querySelector("[data-unit-checkbox]");
11
- amountEls.forEach((el) => {
12
- if (!el.dataset.baseAmount) {
13
- el.dataset.baseAmount = el.dataset.amount || "";
14
- }
15
- if (!el.dataset.baseUnit) {
16
- el.dataset.baseUnit = el.dataset.unit || "";
17
- }
18
- });
19
- let currentUnit = "ml";
20
- const ML_TO_OZ = 0.033814;
21
- const getServings = () => parseInt(valueEl.textContent, 10) || 1;
22
- const setServings = (n) => {
23
- valueEl.textContent = `${n}x`;
24
- updateInactiveState(n);
25
- };
26
- const updateInactiveState = (value) => {
27
- if (!decWrapper) return;
28
- if (value <= 1) decWrapper.classList.add("inactive");
29
- else decWrapper.classList.remove("inactive");
30
- };
31
- const formatNumber = (num, unit) => {
32
- if (unit === "oz")
33
- return (Math.round(num * 100) / 100).toFixed(2).replace(/\.?0+$/, "");
34
- if (unit === "ml")
35
- return (Math.round(num * 10) / 10).toString().replace(/\.0$/, "");
36
- return (Math.round(num * 100) / 100).toString().replace(/\.?0+$/, "");
37
- };
38
- const convert = (value, fromUnit, toUnit) => {
39
- if (isNaN(value)) return value;
40
- if (fromUnit === toUnit) return value;
41
- if (fromUnit === "ml" && toUnit === "oz") return value * ML_TO_OZ;
42
- if (fromUnit === "oz" && toUnit === "ml") return value / ML_TO_OZ;
43
- return value;
44
- };
45
- const renderIngredients = () => {
46
- const servings = getServings();
47
- amountEls.forEach((el) => {
48
- const baseAmount = parseFloat(el.dataset.baseAmount);
49
- const baseUnit = el.dataset.baseUnit || "";
50
- const name = el.dataset.name || "";
51
- if (isNaN(baseAmount)) {
52
- el.textContent = name;
53
- return;
54
- }
55
- let amount = baseAmount * servings;
56
- let displayUnit = baseUnit;
57
- if ((baseUnit === "ml" || baseUnit === "oz") && currentUnit !== baseUnit) {
58
- amount = convert(amount, baseUnit, currentUnit);
59
- displayUnit = currentUnit;
60
- }
61
- const numStr = formatNumber(amount, displayUnit);
62
- const unitStr = displayUnit ? displayUnit : "";
63
- el.textContent = `${numStr}${unitStr ? unitStr : ""}${unitStr ? " " : " "}${name}`.trim();
64
- });
65
- };
66
- decBtn?.addEventListener("click", () => {
67
- const cur = getServings();
68
- if (cur > 1) {
69
- setServings(cur - 1);
70
- renderIngredients();
71
- }
72
- });
73
- incBtn?.addEventListener("click", () => {
74
- const cur = getServings();
75
- if (cur < 99) {
76
- setServings(cur + 1);
77
- renderIngredients();
78
- }
79
- });
80
- if (checkbox) {
81
- checkbox.addEventListener("change", (e) => {
82
- currentUnit = e.target.checked ? "oz" : "ml";
83
- renderIngredients();
84
- });
85
- }
86
- setServings(getServings() || 1);
87
- currentUnit = "ml";
88
- renderIngredients();
89
- updateInactiveState(getServings());
90
- } catch (error) {
91
- console.error(error);
92
- }
93
- }
@@ -1,7 +0,0 @@
1
- export default function coverlinkv3Js(options = {}) {
2
- try {
3
- const { block } = options;
4
- } catch (error) {
5
- console.error(error);
6
- }
7
- }
@@ -1,74 +0,0 @@
1
- .divider-v3 {
2
- display: grid;
3
- display: var(--display-mobile, grid);
4
- }
5
- @media screen and (min-width: 768px) {
6
- .divider-v3 {
7
- display: grid;
8
- display: var(--display-portrait, grid);
9
- }
10
- }
11
- @media screen and (min-width: 1024px) {
12
- .divider-v3 {
13
- display: grid;
14
- display: var(--display-desktop, grid);
15
- }
16
- }
17
- .divider-v3.vertical {
18
- height: 100%;
19
- }
20
- .divider-v3.vertical .divider-v3__line {
21
- height: 100%;
22
- }
23
- @media screen and (min-width: 768px) {
24
- .divider-v3.vertical .divider-v3__line {
25
- height: 100%;
26
- }
27
- }
28
- @media screen and (min-width: 1024px) {
29
- .divider-v3.vertical .divider-v3__line {
30
- height: 100%;
31
- }
32
- }
33
- .divider-v3.horizontal .divider-v3__line {
34
- width: 100%;
35
- }
36
- @media screen and (min-width: 768px) {
37
- .divider-v3.horizontal .divider-v3__line {
38
- width: 100%;
39
- }
40
- }
41
- @media screen and (min-width: 1024px) {
42
- .divider-v3.horizontal .divider-v3__line {
43
- width: 100%;
44
- }
45
- }
46
- .divider-v3__line {
47
- background-color: var(--divider-v3-background-colour);
48
- background-image: var(--divider-v3-background-image);
49
- background-repeat: var(--divider-v3-background-repeat);
50
- background-position: var(--divider-v3-background-position-x) var(--divider-v3-background-position-y);
51
- width: calc(var(--divider-v3-width) / var(--design-reference) * var(--screen-width));
52
- height: calc(var(--divider-v3-height) / var(--design-reference) * var(--screen-width));
53
- align-self: var(--divider-v3-vertical-position);
54
- justify-self: var(--divider-v3-horizontal-position);
55
- place-self: var(--divider-v3-vertical-position) var(--divider-v3-horizontal-position);
56
- max-width: calc(var(--divider-v3-max-width-mobile) / var(--design-reference) * var(--screen-width));
57
- max-height: calc(var(--divider-v3-max-height-mobile) / var(--design-reference) * var(--screen-width));
58
- }
59
- @media screen and (min-width: 768px) {
60
- .divider-v3__line {
61
- height: calc(var(--divider-v3-height) / var(--design-reference) * var(--screen-width));
62
- width: calc(var(--divider-v3-width) / var(--design-reference) * var(--screen-width));
63
- max-width: calc(var(--divider-v3-max-width-portrait) / var(--design-reference) * var(--screen-width));
64
- max-height: calc(var(--divider-v3-max-height-portrait) / var(--design-reference) * var(--screen-width));
65
- }
66
- }
67
- @media screen and (min-width: 1024px) {
68
- .divider-v3__line {
69
- height: calc(var(--divider-v3-height) / var(--design-reference) * var(--screen-width));
70
- width: calc(var(--divider-v3-width) / var(--design-reference) * var(--screen-width));
71
- max-width: calc(var(--divider-v3-max-width-desktop) / var(--design-reference) * var(--screen-width));
72
- max-height: calc(var(--divider-v3-max-height-desktop) / var(--design-reference) * var(--screen-width));
73
- }
74
- }
@@ -1,7 +0,0 @@
1
- export default function dividerv3Js(options = {}) {
2
- try {
3
- const { block } = options;
4
- } catch (error) {
5
- console.error(error);
6
- }
7
- }