@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-cocktail-recipe-v3/cocktail-recipe-v3.css CHANGED
@@ -1,266 +1,268 @@
1
- .cocktail-recipe-v3 {
2
- pointer-events: all;
3
- }
4
- .cocktail-recipe-v3__ingredients-container {
5
- display: flex;
6
- flex-direction: column;
7
- gap: calc(20 / var(--design-reference) * var(--screen-width));
8
- padding-bottom: calc(50 / var(--design-reference) * var(--screen-width));
9
- }
10
- .cocktail-recipe-v3__ingredients-container .ingredients-title {
11
- padding-block: calc(10 / var(--design-reference) * var(--screen-width));
12
- font-family: var(--primary-font-family);
13
- font-size: calc(80 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier));
14
- font-weight: 500;
15
- text-transform: uppercase;
16
- text-box-edge: cap alphabetic;
17
- text-box-trim: trim-both;
18
- }
19
- @media screen and (min-width: 768px) {
1
+ @layer base-styles {
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
+ }
20
11
  .cocktail-recipe-v3__ingredients-container .ingredients-title {
21
- font-size: calc(160 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier));
12
+ padding-block: calc(10 / var(--design-reference) * var(--screen-width));
13
+ font-family: var(--primary-font-family);
14
+ font-size: calc(80 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier));
15
+ font-weight: 500;
16
+ text-transform: uppercase;
17
+ text-box-edge: cap alphabetic;
18
+ text-box-trim: trim-both;
19
+ }
20
+ @media screen and (min-width: 768px) {
21
+ .cocktail-recipe-v3__ingredients-container .ingredients-title {
22
+ font-size: calc(160 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier));
23
+ }
24
+ }
25
+ .cocktail-recipe-v3__servings {
26
+ display: flex;
27
+ justify-content: space-between;
28
+ align-items: center;
29
+ padding-block: calc(15 / var(--design-reference) * var(--screen-width));
30
+ border-bottom: 1px solid rgba(250, 248, 236, 0.3019607843);
31
+ }
32
+ .cocktail-recipe-v3__servings .servings-title {
33
+ font-family: var(--secondary-font-family);
34
+ font-size: calc(26 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier));
35
+ font-weight: 500;
36
+ }
37
+ .cocktail-recipe-v3__servings .servings-control-wrapper {
38
+ display: flex;
39
+ align-items: center;
40
+ gap: calc(15 / var(--design-reference) * var(--screen-width));
41
+ }
42
+ .cocktail-recipe-v3__servings .servings-control-wrapper .dec-btn-wrapper {
43
+ width: 40px;
44
+ height: 40px;
45
+ border: 1px solid #faf8ec;
46
+ overflow: hidden;
47
+ }
48
+ .cocktail-recipe-v3__servings .servings-control-wrapper .dec-btn-wrapper:hover .servings-dec-btn {
49
+ transform: translateX(-100%);
50
+ }
51
+ .cocktail-recipe-v3__servings .servings-control-wrapper .dec-btn-wrapper.inactive {
52
+ opacity: 0.4;
53
+ pointer-events: none;
22
54
  }
23
- }
24
- .cocktail-recipe-v3__servings {
25
- display: flex;
26
- justify-content: space-between;
27
- align-items: center;
28
- padding-block: calc(15 / var(--design-reference) * var(--screen-width));
29
- border-bottom: 1px solid rgba(250, 248, 236, 0.3019607843);
30
- }
31
- .cocktail-recipe-v3__servings .servings-title {
32
- font-family: var(--secondary-font-family);
33
- font-size: calc(26 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier));
34
- font-weight: 500;
35
- }
36
- .cocktail-recipe-v3__servings .servings-control-wrapper {
37
- display: flex;
38
- align-items: center;
39
- gap: calc(15 / var(--design-reference) * var(--screen-width));
40
- }
41
- .cocktail-recipe-v3__servings .servings-control-wrapper .dec-btn-wrapper {
42
- width: 40px;
43
- height: 40px;
44
- border: 1px solid #faf8ec;
45
- overflow: hidden;
46
- }
47
- .cocktail-recipe-v3__servings .servings-control-wrapper .dec-btn-wrapper:hover .servings-dec-btn {
48
- transform: translateX(-100%);
49
- }
50
- .cocktail-recipe-v3__servings .servings-control-wrapper .dec-btn-wrapper.inactive {
51
- opacity: 0.4;
52
- pointer-events: none;
53
- }
54
- .cocktail-recipe-v3__servings .servings-control-wrapper .servings-current {
55
- font-family: var(--secondary-font-family);
56
- font-size: calc(26 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier));
57
- font-weight: 500;
58
- display: inline-block;
59
- width: calc(60 / var(--design-reference) * var(--screen-width));
60
- text-align: center;
61
- }
62
- @media screen and (min-width: 768px) {
63
55
  .cocktail-recipe-v3__servings .servings-control-wrapper .servings-current {
64
- font-size: calc(30 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier));
56
+ font-family: var(--secondary-font-family);
57
+ font-size: calc(26 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier));
58
+ font-weight: 500;
59
+ display: inline-block;
60
+ width: calc(60 / var(--design-reference) * var(--screen-width));
61
+ text-align: center;
62
+ }
63
+ @media screen and (min-width: 768px) {
64
+ .cocktail-recipe-v3__servings .servings-control-wrapper .servings-current {
65
+ font-size: calc(30 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier));
66
+ }
67
+ }
68
+ .cocktail-recipe-v3__servings .servings-control-wrapper .inc-btn-wrapper {
69
+ cursor: pointer;
70
+ width: 40px;
71
+ height: 40px;
72
+ border: 1px solid #faf8ec;
73
+ overflow: hidden;
74
+ }
75
+ .cocktail-recipe-v3__servings .servings-control-wrapper .inc-btn-wrapper:hover .servings-inc-btn {
76
+ transform: translateX(0);
77
+ }
78
+ .cocktail-recipe-v3__unit-toggle {
79
+ display: flex;
80
+ justify-content: space-between;
81
+ align-items: center;
82
+ padding-top: calc(10 / var(--design-reference) * var(--screen-width));
65
83
  }
66
- }
67
- .cocktail-recipe-v3__servings .servings-control-wrapper .inc-btn-wrapper {
68
- cursor: pointer;
69
- width: 40px;
70
- height: 40px;
71
- border: 1px solid #faf8ec;
72
- overflow: hidden;
73
- }
74
- .cocktail-recipe-v3__servings .servings-control-wrapper .inc-btn-wrapper:hover .servings-inc-btn {
75
- transform: translateX(0);
76
- }
77
- .cocktail-recipe-v3__unit-toggle {
78
- display: flex;
79
- justify-content: space-between;
80
- align-items: center;
81
- padding-top: calc(10 / var(--design-reference) * var(--screen-width));
82
- }
83
- .cocktail-recipe-v3__unit-toggle .unit-text {
84
- font-family: var(--tertiary-font-family);
85
- font-size: calc(18 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier));
86
- font-weight: 700;
87
- }
88
- @media screen and (min-width: 768px) {
89
84
  .cocktail-recipe-v3__unit-toggle .unit-text {
90
- font-size: calc(22 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier));
85
+ font-family: var(--tertiary-font-family);
86
+ font-size: calc(18 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier));
87
+ font-weight: 700;
88
+ }
89
+ @media screen and (min-width: 768px) {
90
+ .cocktail-recipe-v3__unit-toggle .unit-text {
91
+ font-size: calc(22 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier));
92
+ }
93
+ }
94
+ .cocktail-recipe-v3__unit-toggle .unit-toggle-wrapper {
95
+ display: flex;
96
+ align-items: center;
97
+ gap: calc(20 / var(--design-reference) * var(--screen-width));
98
+ }
99
+ .cocktail-recipe-v3__unit-toggle .unit-toggle-wrapper .checkbox-wrapper input[type=checkbox] {
100
+ display: none;
101
+ visibility: hidden;
102
+ }
103
+ .cocktail-recipe-v3__unit-toggle .unit-toggle-wrapper .checkbox-wrapper .block {
104
+ position: relative;
105
+ clear: both;
106
+ float: left;
107
+ }
108
+ .cocktail-recipe-v3__unit-toggle .unit-toggle-wrapper .checkbox-wrapper label {
109
+ width: 64px;
110
+ height: 36px;
111
+ box-sizing: border-box;
112
+ border: 1px solid;
113
+ float: left;
114
+ border-radius: 100px;
115
+ position: relative;
116
+ cursor: pointer;
117
+ transition: 0.3s ease;
118
+ color: #faf8ec;
119
+ }
120
+ .cocktail-recipe-v3__unit-toggle .unit-toggle-wrapper .checkbox-wrapper input[type=checkbox]:checked + label:before {
121
+ left: 31px;
122
+ }
123
+ .cocktail-recipe-v3__unit-toggle .unit-toggle-wrapper .checkbox-wrapper label:before {
124
+ transition: 0.3s ease;
125
+ content: "";
126
+ width: 28px;
127
+ height: 28px;
128
+ position: absolute;
129
+ background: #faf8ec;
130
+ left: 3px;
131
+ top: 3px;
132
+ box-sizing: border-box;
133
+ color: black;
134
+ border-radius: 50%;
91
135
  }
92
- }
93
- .cocktail-recipe-v3__unit-toggle .unit-toggle-wrapper {
94
- display: flex;
95
- align-items: center;
96
- gap: calc(20 / var(--design-reference) * var(--screen-width));
97
- }
98
- .cocktail-recipe-v3__unit-toggle .unit-toggle-wrapper .checkbox-wrapper input[type=checkbox] {
99
- display: none;
100
- visibility: hidden;
101
- }
102
- .cocktail-recipe-v3__unit-toggle .unit-toggle-wrapper .checkbox-wrapper .block {
103
- position: relative;
104
- clear: both;
105
- float: left;
106
- }
107
- .cocktail-recipe-v3__unit-toggle .unit-toggle-wrapper .checkbox-wrapper label {
108
- width: 64px;
109
- height: 36px;
110
- box-sizing: border-box;
111
- border: 1px solid;
112
- float: left;
113
- border-radius: 100px;
114
- position: relative;
115
- cursor: pointer;
116
- transition: 0.3s ease;
117
- color: #faf8ec;
118
- }
119
- .cocktail-recipe-v3__unit-toggle .unit-toggle-wrapper .checkbox-wrapper input[type=checkbox]:checked + label:before {
120
- left: 31px;
121
- }
122
- .cocktail-recipe-v3__unit-toggle .unit-toggle-wrapper .checkbox-wrapper label:before {
123
- transition: 0.3s ease;
124
- content: "";
125
- width: 28px;
126
- height: 28px;
127
- position: absolute;
128
- background: #faf8ec;
129
- left: 3px;
130
- top: 3px;
131
- box-sizing: border-box;
132
- color: black;
133
- border-radius: 50%;
134
- }
135
- .cocktail-recipe-v3 .ingredients-wrapper {
136
- display: flex;
137
- align-items: center;
138
- gap: calc(15 / var(--design-reference) * var(--screen-width));
139
- }
140
- @media screen and (min-width: 768px) {
141
136
  .cocktail-recipe-v3 .ingredients-wrapper {
142
- gap: calc(30 / var(--design-reference) * var(--screen-width));
137
+ display: flex;
138
+ align-items: center;
139
+ gap: calc(15 / var(--design-reference) * var(--screen-width));
140
+ }
141
+ @media screen and (min-width: 768px) {
142
+ .cocktail-recipe-v3 .ingredients-wrapper {
143
+ gap: calc(30 / var(--design-reference) * var(--screen-width));
144
+ }
143
145
  }
144
- }
145
- .cocktail-recipe-v3 .ingredients-wrapper .ingredient-image {
146
- max-width: calc(50 / var(--design-reference) * var(--screen-width));
147
- aspect-ratio: 1;
148
- -o-object-fit: cover;
149
- object-fit: cover;
150
- }
151
- @media screen and (min-width: 768px) {
152
146
  .cocktail-recipe-v3 .ingredients-wrapper .ingredient-image {
153
- max-width: calc(100 / var(--design-reference) * var(--screen-width));
147
+ max-width: calc(50 / var(--design-reference) * var(--screen-width));
148
+ aspect-ratio: 1;
149
+ -o-object-fit: cover;
150
+ object-fit: cover;
151
+ }
152
+ @media screen and (min-width: 768px) {
153
+ .cocktail-recipe-v3 .ingredients-wrapper .ingredient-image {
154
+ max-width: calc(100 / var(--design-reference) * var(--screen-width));
155
+ }
154
156
  }
155
- }
156
- .cocktail-recipe-v3 .ingredients-wrapper .ingredient-text {
157
- font-size: calc(18 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier));
158
- font-family: var(--tertiary-font-family);
159
- font-weight: 400;
160
- }
161
- @media screen and (min-width: 768px) {
162
157
  .cocktail-recipe-v3 .ingredients-wrapper .ingredient-text {
163
- font-size: calc(22 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier));
158
+ font-size: calc(18 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier));
159
+ font-family: var(--tertiary-font-family);
160
+ font-weight: 400;
161
+ }
162
+ @media screen and (min-width: 768px) {
163
+ .cocktail-recipe-v3 .ingredients-wrapper .ingredient-text {
164
+ font-size: calc(22 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier));
165
+ }
164
166
  }
165
- }
166
- .cocktail-recipe-v3__equipment-container {
167
- display: flex;
168
- flex-direction: column;
169
- gap: calc(20 / var(--design-reference) * var(--screen-width));
170
- padding-bottom: calc(100 / var(--design-reference) * var(--screen-width));
171
- }
172
- @media screen and (min-width: 768px) {
173
167
  .cocktail-recipe-v3__equipment-container {
174
- padding-bottom: calc(180 / var(--design-reference) * var(--screen-width));
168
+ display: flex;
169
+ flex-direction: column;
170
+ gap: calc(20 / var(--design-reference) * var(--screen-width));
171
+ padding-bottom: calc(100 / var(--design-reference) * var(--screen-width));
172
+ }
173
+ @media screen and (min-width: 768px) {
174
+ .cocktail-recipe-v3__equipment-container {
175
+ padding-bottom: calc(180 / var(--design-reference) * var(--screen-width));
176
+ }
175
177
  }
176
- }
177
- .cocktail-recipe-v3__equipment-container .equipments-title {
178
- font-family: var(--secondary-font-family);
179
- font-size: calc(26 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier));
180
- font-weight: 500;
181
- padding-block: calc(20 / var(--design-reference) * var(--screen-width));
182
- border-bottom: 1px solid rgba(250, 248, 236, 0.3019607843);
183
- }
184
- @media screen and (min-width: 768px) {
185
178
  .cocktail-recipe-v3__equipment-container .equipments-title {
186
- padding-block: calc(10 / var(--design-reference) * var(--screen-width));
179
+ font-family: var(--secondary-font-family);
180
+ font-size: calc(26 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier));
181
+ font-weight: 500;
182
+ padding-block: calc(20 / var(--design-reference) * var(--screen-width));
183
+ border-bottom: 1px solid rgba(250, 248, 236, 0.3019607843);
184
+ }
185
+ @media screen and (min-width: 768px) {
186
+ .cocktail-recipe-v3__equipment-container .equipments-title {
187
+ padding-block: calc(10 / var(--design-reference) * var(--screen-width));
188
+ }
187
189
  }
188
- }
189
- .cocktail-recipe-v3__equipment-container .equipments-wrapper {
190
- display: flex;
191
- align-items: center;
192
- gap: calc(15 / var(--design-reference) * var(--screen-width));
193
- }
194
- @media screen and (min-width: 768px) {
195
190
  .cocktail-recipe-v3__equipment-container .equipments-wrapper {
196
- gap: calc(30 / var(--design-reference) * var(--screen-width));
191
+ display: flex;
192
+ align-items: center;
193
+ gap: calc(15 / var(--design-reference) * var(--screen-width));
194
+ }
195
+ @media screen and (min-width: 768px) {
196
+ .cocktail-recipe-v3__equipment-container .equipments-wrapper {
197
+ gap: calc(30 / var(--design-reference) * var(--screen-width));
198
+ }
197
199
  }
198
- }
199
- .cocktail-recipe-v3__equipment-container .equipments-wrapper .equipment-image {
200
- max-width: calc(50 / var(--design-reference) * var(--screen-width));
201
- aspect-ratio: 1;
202
- -o-object-fit: cover;
203
- object-fit: cover;
204
- }
205
- @media screen and (min-width: 768px) {
206
200
  .cocktail-recipe-v3__equipment-container .equipments-wrapper .equipment-image {
207
- max-width: calc(100 / var(--design-reference) * var(--screen-width));
201
+ max-width: calc(50 / var(--design-reference) * var(--screen-width));
202
+ aspect-ratio: 1;
203
+ -o-object-fit: cover;
204
+ object-fit: cover;
205
+ }
206
+ @media screen and (min-width: 768px) {
207
+ .cocktail-recipe-v3__equipment-container .equipments-wrapper .equipment-image {
208
+ max-width: calc(100 / var(--design-reference) * var(--screen-width));
209
+ }
208
210
  }
209
- }
210
- .cocktail-recipe-v3__equipment-container .equipments-wrapper .equipment-text {
211
- font-family: var(--tertiary-font-family);
212
- font-size: calc(18 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier));
213
- font-weight: 400;
214
- }
215
- @media screen and (min-width: 768px) {
216
211
  .cocktail-recipe-v3__equipment-container .equipments-wrapper .equipment-text {
217
- font-size: calc(22 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier));
212
+ font-family: var(--tertiary-font-family);
213
+ font-size: calc(18 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier));
214
+ font-weight: 400;
215
+ }
216
+ @media screen and (min-width: 768px) {
217
+ .cocktail-recipe-v3__equipment-container .equipments-wrapper .equipment-text {
218
+ font-size: calc(22 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier));
219
+ }
218
220
  }
219
- }
220
- .cocktail-recipe-v3__instructions-container .instructions-title {
221
- font-family: var(--primary-font-family);
222
- font-size: calc(70 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier));
223
- font-weight: 500;
224
- text-transform: uppercase;
225
- padding-block: calc(10 / var(--design-reference) * var(--screen-width));
226
- text-box-edge: cap alphabetic;
227
- text-box-trim: trim-both;
228
- }
229
- @media screen and (min-width: 768px) {
230
221
  .cocktail-recipe-v3__instructions-container .instructions-title {
231
- padding-block: calc(40 / var(--design-reference) * var(--screen-width));
232
- font-size: calc(160 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier));
222
+ font-family: var(--primary-font-family);
223
+ font-size: calc(70 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier));
224
+ font-weight: 500;
225
+ text-transform: uppercase;
226
+ padding-block: calc(10 / var(--design-reference) * var(--screen-width));
227
+ text-box-edge: cap alphabetic;
228
+ text-box-trim: trim-both;
229
+ }
230
+ @media screen and (min-width: 768px) {
231
+ .cocktail-recipe-v3__instructions-container .instructions-title {
232
+ padding-block: calc(40 / var(--design-reference) * var(--screen-width));
233
+ font-size: calc(160 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier));
234
+ }
233
235
  }
234
- }
235
- .cocktail-recipe-v3__instructions-container .instructions-wrapper {
236
- display: flex;
237
- align-items: flex-start;
238
- gap: calc(20 / var(--design-reference) * var(--screen-width));
239
- padding-block: calc(30 / var(--design-reference) * var(--screen-width));
240
- border-top: 1px solid rgba(250, 248, 236, 0.3019607843);
241
- }
242
- @media screen and (min-width: 768px) {
243
236
  .cocktail-recipe-v3__instructions-container .instructions-wrapper {
244
- align-items: center;
237
+ display: flex;
238
+ align-items: flex-start;
239
+ gap: calc(20 / var(--design-reference) * var(--screen-width));
240
+ padding-block: calc(30 / var(--design-reference) * var(--screen-width));
241
+ border-top: 1px solid rgba(250, 248, 236, 0.3019607843);
245
242
  }
246
- }
247
- .cocktail-recipe-v3__instructions-container .instructions-wrapper .instructions-number {
248
- font-family: var(--secondary-font-family);
249
- font-size: calc(30 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier));
250
- padding-inline: calc(10 / var(--design-reference) * var(--screen-width));
251
- font-weight: 500;
252
- text-box-trim: trim-both;
253
- text-box-edge: cap alphabetic;
254
- }
255
- .cocktail-recipe-v3__instructions-container .instructions-wrapper .instructions-text {
256
- font-family: var(--tertiary-font-family);
257
- font-size: calc(24 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier));
258
- font-weight: 300;
259
- text-box-trim: trim-both;
260
- text-box-edge: cap alphabetic;
261
- }
262
- @media screen and (min-width: 768px) {
263
- .cocktail-recipe-v3__instructions-container .instructions-wrapper .instructions-text {
243
+ @media screen and (min-width: 768px) {
244
+ .cocktail-recipe-v3__instructions-container .instructions-wrapper {
245
+ align-items: center;
246
+ }
247
+ }
248
+ .cocktail-recipe-v3__instructions-container .instructions-wrapper .instructions-number {
249
+ font-family: var(--secondary-font-family);
264
250
  font-size: calc(30 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier));
251
+ padding-inline: calc(10 / var(--design-reference) * var(--screen-width));
252
+ font-weight: 500;
253
+ text-box-trim: trim-both;
254
+ text-box-edge: cap alphabetic;
255
+ }
256
+ .cocktail-recipe-v3__instructions-container .instructions-wrapper .instructions-text {
257
+ font-family: var(--tertiary-font-family);
258
+ font-size: calc(24 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier));
259
+ font-weight: 300;
260
+ text-box-trim: trim-both;
261
+ text-box-edge: cap alphabetic;
262
+ }
263
+ @media screen and (min-width: 768px) {
264
+ .cocktail-recipe-v3__instructions-container .instructions-wrapper .instructions-text {
265
+ font-size: calc(30 / var(--design-reference) * var(--font-reference) * var(--font-size-multiplier));
266
+ }
265
267
  }
266
268
  }
package/public/block-cover-link-v3/cover-link-v3.css CHANGED
@@ -1,6 +1,8 @@
1
- .cover-link-v3__link {
2
- position: absolute;
3
- inset: 0;
4
- z-index: 10;
5
- pointer-events: all;
1
+ @layer base-styles {
2
+ .cover-link-v3__link {
3
+ position: absolute;
4
+ inset: 0;
5
+ z-index: 10;
6
+ pointer-events: all;
7
+ }
6
8
  }
package/public/block-divider-v3/divider-v3.css CHANGED
@@ -1,72 +1,74 @@
1
- .divider-v3 {
2
- display: grid;
3
- display: var(--display-mobile, grid);
4
- }
5
- @media screen and (min-width: 768px) {
1
+ @layer base-styles {
6
2
  .divider-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
- .divider-v3 {
13
- display: grid;
14
- display: var(--display-desktop, grid);
6
+ @media screen and (min-width: 768px) {
7
+ .divider-v3 {
8
+ display: grid;
9
+ display: var(--display-portrait, grid);
10
+ }
15
11
  }
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 {
12
+ @media screen and (min-width: 1024px) {
13
+ .divider-v3 {
14
+ display: grid;
15
+ display: var(--display-desktop, grid);
16
+ }
17
+ }
18
+ .divider-v3.vertical {
25
19
  height: 100%;
26
20
  }
27
- }
28
- @media screen and (min-width: 1024px) {
29
21
  .divider-v3.vertical .divider-v3__line {
30
22
  height: 100%;
31
23
  }
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%;
24
+ @media screen and (min-width: 768px) {
25
+ .divider-v3.vertical .divider-v3__line {
26
+ height: 100%;
27
+ }
28
+ }
29
+ @media screen and (min-width: 1024px) {
30
+ .divider-v3.vertical .divider-v3__line {
31
+ height: 100%;
32
+ }
39
33
  }
40
- }
41
- @media screen and (min-width: 1024px) {
42
34
  .divider-v3.horizontal .divider-v3__line {
43
35
  width: 100%;
44
36
  }
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
- place-self: var(--divider-v3-vertical-position) var(--divider-v3-horizontal-position);
54
- max-width: calc(var(--divider-v3-max-width-mobile) / var(--design-reference) * var(--screen-width));
55
- max-height: calc(var(--divider-v3-max-height-mobile) / var(--design-reference) * var(--screen-width));
56
- }
57
- @media screen and (min-width: 768px) {
58
- .divider-v3__line {
59
- height: calc(var(--divider-v3-height) / var(--design-reference) * var(--screen-width));
60
- width: calc(var(--divider-v3-width) / var(--design-reference) * var(--screen-width));
61
- max-width: calc(var(--divider-v3-max-width-portrait) / var(--design-reference) * var(--screen-width));
62
- max-height: calc(var(--divider-v3-max-height-portrait) / var(--design-reference) * var(--screen-width));
37
+ @media screen and (min-width: 768px) {
38
+ .divider-v3.horizontal .divider-v3__line {
39
+ width: 100%;
40
+ }
41
+ }
42
+ @media screen and (min-width: 1024px) {
43
+ .divider-v3.horizontal .divider-v3__line {
44
+ width: 100%;
45
+ }
63
46
  }
64
- }
65
- @media screen and (min-width: 1024px) {
66
47
  .divider-v3__line {
67
- height: calc(var(--divider-v3-height) / var(--design-reference) * var(--screen-width));
48
+ background-color: var(--divider-v3-background-colour);
49
+ background-image: var(--divider-v3-background-image);
50
+ background-repeat: var(--divider-v3-background-repeat);
51
+ background-position: var(--divider-v3-background-position-x) var(--divider-v3-background-position-y);
68
52
  width: calc(var(--divider-v3-width) / var(--design-reference) * var(--screen-width));
69
- max-width: calc(var(--divider-v3-max-width-desktop) / var(--design-reference) * var(--screen-width));
70
- max-height: calc(var(--divider-v3-max-height-desktop) / var(--design-reference) * var(--screen-width));
53
+ height: calc(var(--divider-v3-height) / var(--design-reference) * var(--screen-width));
54
+ place-self: var(--divider-v3-vertical-position) var(--divider-v3-horizontal-position);
55
+ max-width: calc(var(--divider-v3-max-width-mobile) / var(--design-reference) * var(--screen-width));
56
+ max-height: calc(var(--divider-v3-max-height-mobile) / var(--design-reference) * var(--screen-width));
57
+ }
58
+ @media screen and (min-width: 768px) {
59
+ .divider-v3__line {
60
+ height: calc(var(--divider-v3-height) / var(--design-reference) * var(--screen-width));
61
+ width: calc(var(--divider-v3-width) / var(--design-reference) * var(--screen-width));
62
+ max-width: calc(var(--divider-v3-max-width-portrait) / var(--design-reference) * var(--screen-width));
63
+ max-height: calc(var(--divider-v3-max-height-portrait) / var(--design-reference) * var(--screen-width));
64
+ }
65
+ }
66
+ @media screen and (min-width: 1024px) {
67
+ .divider-v3__line {
68
+ height: calc(var(--divider-v3-height) / var(--design-reference) * var(--screen-width));
69
+ width: calc(var(--divider-v3-width) / var(--design-reference) * var(--screen-width));
70
+ max-width: calc(var(--divider-v3-max-width-desktop) / var(--design-reference) * var(--screen-width));
71
+ max-height: calc(var(--divider-v3-max-height-desktop) / var(--design-reference) * var(--screen-width));
72
+ }
71
73
  }
72
74
  }