@total_onion/onion-library 3.0.42 → 3.0.43

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/block-betterreviews-display-v3/betterreviews-display-v3.scss +88 -81
  2. package/components/block-cocktail-recipe-v3/cocktail-recipe-v3.scss +264 -260
  3. package/components/block-cover-link-v3/cover-link-v3.scss +8 -6
  4. package/components/block-featured-image-gallery-v3/featured-image-gallery-v3.scss +81 -80
  5. package/components/block-form-selection-v3/form-selection-v3.scss +28 -27
  6. package/components/block-gradient-layer-v3/gradient-layer-v3.scss +6 -4
  7. package/components/block-group-container-v3/group-container-v3.scss +34 -31
  8. package/components/block-product-info-v3/product-info-v3.scss +149 -148
  9. package/components/block-responsive-table-v3/responsive-table-v3.scss +40 -39
  10. package/components/block-section-separator-v3/section-separator-v3.scss +28 -26
  11. package/components/block-single-column-container-v3/single-column-container-v3.scss +11 -9
  12. package/components/component-content-box-settings-v3/content-box-settings-v3.scss +0 -7
  13. package/package.json +1 -1
package/components/block-cocktail-recipe-v3/cocktail-recipe-v3.scss CHANGED
@@ -1,264 +1,215 @@
1
1
  @use '../fields-core-mixins-v3/core-mixins-v3';
2
2
  @use '../fields-core-functions-v3/core-functions-v3';
3
3
  @use '../../breakpoints';
4
- .cocktail-recipe-v3 {
5
- pointer-events: all;
6
-
7
- &__ingredients-container {
8
- display: flex;
9
- flex-direction: column;
10
- gap: core-functions-v3.fluidSize(20);
11
- padding-bottom: core-functions-v3.fluidSize(50);
12
-
13
- .ingredients-title {
14
- padding-block: core-functions-v3.fluidSize(10);
15
- font-family: var(--primary-font-family);
16
- font-size: core-functions-v3.fontSize(80);
17
- font-weight: 500;
18
- text-transform: uppercase;
19
- text-box-edge: cap alphabetic;
20
- text-box-trim: trim-both;
4
+ @layer base-styles {
5
+ .cocktail-recipe-v3 {
6
+ pointer-events: all;
21
7
 
22
- @include core-mixins-v3.device(breakpoints.$tabPortrait) {
23
- font-size: core-functions-v3.fontSize(160);
24
- }
25
- }
26
- }
27
-
28
- &__servings {
29
- display: flex;
30
- justify-content: space-between;
31
- align-items: center;
32
- padding-block: core-functions-v3.fluidSize(15);
33
- border-bottom: 1px solid #faf8ec4d;
34
-
35
- .servings-title {
36
- font-family: var(--secondary-font-family);
37
- font-size: core-functions-v3.fontSize(26);
38
- font-weight: 500;
39
- }
40
-
41
- .servings-control-wrapper {
8
+ &__ingredients-container {
42
9
  display: flex;
43
- align-items: center;
44
- gap: core-functions-v3.fluidSize(15);
10
+ flex-direction: column;
11
+ gap: core-functions-v3.fluidSize(20);
12
+ padding-bottom: core-functions-v3.fluidSize(50);
45
13
 
46
- .dec-btn-wrapper {
47
- width: 40px;
48
- height: 40px;
49
- border: 1px solid #faf8ec;
50
- overflow: hidden;
51
-
52
- // styled within the child block
53
-
54
- // .servings-dec-btn {
55
- // cursor: pointer;
56
- // background-color: #0054ff;
57
- // color: #faf8ec;
58
- // font-size: 28px;
59
- // padding-bottom: 4px;
60
- // width: 100%;
61
- // height: 100%;
62
- // border: unset;
63
- // transform: translateX(0);
64
- // transition: transform 0.3s ease;
65
-
66
- // &::after {
67
- // content: '\2212';
68
- // color: #0054ff;
69
- // padding-top: 4px;
70
- // width: 38px;
71
- // height: 38px;
72
- // position: absolute;
73
- // top: 0;
74
- // right: -38px;
75
- // background-color: #faf8ec;
76
- // }
77
- // }
78
-
79
- &:hover {
80
- .servings-dec-btn {
81
- transform: translateX(-100%);
82
- }
14
+ .ingredients-title {
15
+ padding-block: core-functions-v3.fluidSize(10);
16
+ font-family: var(--primary-font-family);
17
+ font-size: core-functions-v3.fontSize(80);
18
+ font-weight: 500;
19
+ text-transform: uppercase;
20
+ text-box-edge: cap alphabetic;
21
+ text-box-trim: trim-both;
22
+
23
+ @include core-mixins-v3.device(breakpoints.$tabPortrait) {
24
+ font-size: core-functions-v3.fontSize(160);
83
25
  }
84
26
  }
27
+ }
85
28
 
86
- .dec-btn-wrapper.inactive {
87
- opacity: 0.4;
88
- pointer-events: none;
89
- }
29
+ &__servings {
30
+ display: flex;
31
+ justify-content: space-between;
32
+ align-items: center;
33
+ padding-block: core-functions-v3.fluidSize(15);
34
+ border-bottom: 1px solid #faf8ec4d;
90
35
 
91
- .servings-current {
36
+ .servings-title {
92
37
  font-family: var(--secondary-font-family);
93
38
  font-size: core-functions-v3.fontSize(26);
94
39
  font-weight: 500;
95
- display: inline-block;
96
- width: core-functions-v3.fluidSize(60);
97
- text-align: center;
98
-
99
- @include core-mixins-v3.device(breakpoints.$tabPortrait) {
100
- font-size: core-functions-v3.fontSize(30);
101
- }
102
40
  }
103
41
 
104
- .inc-btn-wrapper {
105
- cursor: pointer;
106
- width: 40px;
107
- height: 40px;
108
- border: 1px solid #faf8ec;
109
- overflow: hidden;
110
-
111
- // styled within the child block
112
-
113
- // .servings-inc-btn {
114
- // cursor: pointer;
115
- // color: #0054ff;
116
- // font-size: 30px;
117
- // background-color: #faf8ec;
118
- // width: 100%;
119
- // height: 100%;
120
- // border: unset;
121
- // transform: translateX(-100%);
122
- // transition: transform 0.3s ease;
123
-
124
- // &::after {
125
- // content: '+';
126
- // padding-top: 2px;
127
- // color: #faf8ec;
128
- // width: 38px;
129
- // height: 38px;
130
- // position: absolute;
131
- // top: 0;
132
- // right: -38px;
133
- // background-color: #0054ff;
134
- // }
135
- // }
136
-
137
- &:hover {
138
- .servings-inc-btn {
139
- transform: translateX(0);
42
+ .servings-control-wrapper {
43
+ display: flex;
44
+ align-items: center;
45
+ gap: core-functions-v3.fluidSize(15);
46
+
47
+ .dec-btn-wrapper {
48
+ width: 40px;
49
+ height: 40px;
50
+ border: 1px solid #faf8ec;
51
+ overflow: hidden;
52
+
53
+ // styled within the child block
54
+
55
+ // .servings-dec-btn {
56
+ // cursor: pointer;
57
+ // background-color: #0054ff;
58
+ // color: #faf8ec;
59
+ // font-size: 28px;
60
+ // padding-bottom: 4px;
61
+ // width: 100%;
62
+ // height: 100%;
63
+ // border: unset;
64
+ // transform: translateX(0);
65
+ // transition: transform 0.3s ease;
66
+
67
+ // &::after {
68
+ // content: '\2212';
69
+ // color: #0054ff;
70
+ // padding-top: 4px;
71
+ // width: 38px;
72
+ // height: 38px;
73
+ // position: absolute;
74
+ // top: 0;
75
+ // right: -38px;
76
+ // background-color: #faf8ec;
77
+ // }
78
+ // }
79
+
80
+ &:hover {
81
+ .servings-dec-btn {
82
+ transform: translateX(-100%);
83
+ }
140
84
  }
141
85
  }
142
- }
143
- }
144
- }
145
86
 
146
- &__unit-toggle {
147
- display: flex;
148
- justify-content: space-between;
149
- align-items: center;
150
- padding-top: core-functions-v3.fluidSize(10);
87
+ .dec-btn-wrapper.inactive {
88
+ opacity: 0.4;
89
+ pointer-events: none;
90
+ }
151
91
 
152
- .unit-text {
153
- font-family: var(--tertiary-font-family);
154
- font-size: core-functions-v3.fontSize(18);
155
- font-weight: 700;
92
+ .servings-current {
93
+ font-family: var(--secondary-font-family);
94
+ font-size: core-functions-v3.fontSize(26);
95
+ font-weight: 500;
96
+ display: inline-block;
97
+ width: core-functions-v3.fluidSize(60);
98
+ text-align: center;
156
99
 
157
- @include core-mixins-v3.device(breakpoints.$tabPortrait) {
158
- font-size: core-functions-v3.fontSize(22);
100
+ @include core-mixins-v3.device(breakpoints.$tabPortrait) {
101
+ font-size: core-functions-v3.fontSize(30);
102
+ }
103
+ }
104
+
105
+ .inc-btn-wrapper {
106
+ cursor: pointer;
107
+ width: 40px;
108
+ height: 40px;
109
+ border: 1px solid #faf8ec;
110
+ overflow: hidden;
111
+
112
+ // styled within the child block
113
+
114
+ // .servings-inc-btn {
115
+ // cursor: pointer;
116
+ // color: #0054ff;
117
+ // font-size: 30px;
118
+ // background-color: #faf8ec;
119
+ // width: 100%;
120
+ // height: 100%;
121
+ // border: unset;
122
+ // transform: translateX(-100%);
123
+ // transition: transform 0.3s ease;
124
+
125
+ // &::after {
126
+ // content: '+';
127
+ // padding-top: 2px;
128
+ // color: #faf8ec;
129
+ // width: 38px;
130
+ // height: 38px;
131
+ // position: absolute;
132
+ // top: 0;
133
+ // right: -38px;
134
+ // background-color: #0054ff;
135
+ // }
136
+ // }
137
+
138
+ &:hover {
139
+ .servings-inc-btn {
140
+ transform: translateX(0);
141
+ }
142
+ }
143
+ }
159
144
  }
160
145
  }
161
146
 
162
- .unit-toggle-wrapper {
147
+ &__unit-toggle {
163
148
  display: flex;
149
+ justify-content: space-between;
164
150
  align-items: center;
165
- gap: core-functions-v3.fluidSize(20);
151
+ padding-top: core-functions-v3.fluidSize(10);
166
152
 
167
- .checkbox-wrapper input[type='checkbox'] {
168
- display: none;
169
- visibility: hidden;
170
- }
171
-
172
- .checkbox-wrapper .block {
173
- position: relative;
174
- clear: both;
175
- float: left;
176
- }
177
-
178
- .checkbox-wrapper label {
179
- width: 64px;
180
- height: 36px;
181
- box-sizing: border-box;
182
- border: 1px solid;
183
- float: left;
184
- border-radius: 100px;
185
- position: relative;
186
- cursor: pointer;
187
- transition: 0.3s ease;
188
- color: #faf8ec;
189
- }
190
- .checkbox-wrapper input[type='checkbox']:checked + label:before {
191
- left: 31px;
192
- }
193
- .checkbox-wrapper label:before {
194
- transition: 0.3s ease;
195
- content: '';
196
- width: 28px;
197
- height: 28px;
198
- position: absolute;
199
- background: #faf8ec;
200
- left: 3px;
201
- top: 3px;
202
- box-sizing: border-box;
203
- color: black;
204
- border-radius: 50%;
205
- }
206
- }
207
- }
208
-
209
- .ingredients-wrapper {
210
- display: flex;
211
- align-items: center;
212
- gap: core-functions-v3.fluidSize(15);
213
-
214
- @include core-mixins-v3.device(breakpoints.$tabPortrait) {
215
- gap: core-functions-v3.fluidSize(30);
216
- }
217
-
218
- .ingredient-image {
219
- max-width: core-functions-v3.fluidSize(50);
220
- aspect-ratio: 1;
221
- object-fit: cover;
222
-
223
- @include core-mixins-v3.device(breakpoints.$tabPortrait) {
224
- max-width: core-functions-v3.fluidSize(100);
225
- }
226
- }
227
-
228
- .ingredient-text {
229
- font-size: core-functions-v3.fontSize(18);
230
- font-family: var(--tertiary-font-family);
231
- font-weight: 400;
153
+ .unit-text {
154
+ font-family: var(--tertiary-font-family);
155
+ font-size: core-functions-v3.fontSize(18);
156
+ font-weight: 700;
232
157
 
233
- @include core-mixins-v3.device(breakpoints.$tabPortrait) {
234
- font-size: core-functions-v3.fontSize(22);
158
+ @include core-mixins-v3.device(breakpoints.$tabPortrait) {
159
+ font-size: core-functions-v3.fontSize(22);
160
+ }
235
161
  }
236
- }
237
- }
238
162
 
239
- &__equipment-container {
240
- display: flex;
241
- flex-direction: column;
242
- gap: core-functions-v3.fluidSize(20);
243
- padding-bottom: core-functions-v3.fluidSize(100);
163
+ .unit-toggle-wrapper {
164
+ display: flex;
165
+ align-items: center;
166
+ gap: core-functions-v3.fluidSize(20);
244
167
 
245
- @include core-mixins-v3.device(breakpoints.$tabPortrait) {
246
- padding-bottom: core-functions-v3.fluidSize(180);
247
- }
168
+ .checkbox-wrapper input[type='checkbox'] {
169
+ display: none;
170
+ visibility: hidden;
171
+ }
248
172
 
249
- .equipments-title {
250
- font-family: var(--secondary-font-family);
251
- font-size: core-functions-v3.fontSize(26);
252
- font-weight: 500;
253
- padding-block: core-functions-v3.fluidSize(20);
254
- border-bottom: 1px solid #faf8ec4d;
173
+ .checkbox-wrapper .block {
174
+ position: relative;
175
+ clear: both;
176
+ float: left;
177
+ }
255
178
 
256
- @include core-mixins-v3.device(breakpoints.$tabPortrait) {
257
- padding-block: core-functions-v3.fluidSize(10);
179
+ .checkbox-wrapper label {
180
+ width: 64px;
181
+ height: 36px;
182
+ box-sizing: border-box;
183
+ border: 1px solid;
184
+ float: left;
185
+ border-radius: 100px;
186
+ position: relative;
187
+ cursor: pointer;
188
+ transition: 0.3s ease;
189
+ color: #faf8ec;
190
+ }
191
+ .checkbox-wrapper
192
+ input[type='checkbox']:checked
193
+ + label:before {
194
+ left: 31px;
195
+ }
196
+ .checkbox-wrapper label:before {
197
+ transition: 0.3s ease;
198
+ content: '';
199
+ width: 28px;
200
+ height: 28px;
201
+ position: absolute;
202
+ background: #faf8ec;
203
+ left: 3px;
204
+ top: 3px;
205
+ box-sizing: border-box;
206
+ color: black;
207
+ border-radius: 50%;
208
+ }
258
209
  }
259
210
  }
260
211
 
261
- .equipments-wrapper {
212
+ .ingredients-wrapper {
262
213
  display: flex;
263
214
  align-items: center;
264
215
  gap: core-functions-v3.fluidSize(15);
@@ -267,7 +218,7 @@
267
218
  gap: core-functions-v3.fluidSize(30);
268
219
  }
269
220
 
270
- .equipment-image {
221
+ .ingredient-image {
271
222
  max-width: core-functions-v3.fluidSize(50);
272
223
  aspect-ratio: 1;
273
224
  object-fit: cover;
@@ -277,9 +228,9 @@
277
228
  }
278
229
  }
279
230
 
280
- .equipment-text {
281
- font-family: var(--tertiary-font-family);
231
+ .ingredient-text {
282
232
  font-size: core-functions-v3.fontSize(18);
233
+ font-family: var(--tertiary-font-family);
283
234
  font-weight: 400;
284
235
 
285
236
  @include core-mixins-v3.device(breakpoints.$tabPortrait) {
@@ -287,53 +238,106 @@
287
238
  }
288
239
  }
289
240
  }
290
- }
291
241
 
292
- &__instructions-container {
293
- .instructions-title {
294
- font-family: var(--primary-font-family);
295
- font-size: core-functions-v3.fontSize(70);
296
- font-weight: 500;
297
- text-transform: uppercase;
298
- padding-block: core-functions-v3.fluidSize(10);
299
- text-box-edge: cap alphabetic;
300
- text-box-trim: trim-both;
242
+ &__equipment-container {
243
+ display: flex;
244
+ flex-direction: column;
245
+ gap: core-functions-v3.fluidSize(20);
246
+ padding-bottom: core-functions-v3.fluidSize(100);
301
247
 
302
248
  @include core-mixins-v3.device(breakpoints.$tabPortrait) {
303
- padding-block: core-functions-v3.fluidSize(40);
304
- font-size: core-functions-v3.fontSize(160);
249
+ padding-bottom: core-functions-v3.fluidSize(180);
305
250
  }
306
- }
307
251
 
308
- .instructions-wrapper {
309
- display: flex;
310
- align-items: flex-start;
311
- gap: core-functions-v3.fluidSize(20);
312
- padding-block: core-functions-v3.fluidSize(30);
313
- border-top: 1px solid #faf8ec4d;
252
+ .equipments-title {
253
+ font-family: var(--secondary-font-family);
254
+ font-size: core-functions-v3.fontSize(26);
255
+ font-weight: 500;
256
+ padding-block: core-functions-v3.fluidSize(20);
257
+ border-bottom: 1px solid #faf8ec4d;
314
258
 
315
- @include core-mixins-v3.device(breakpoints.$tabPortrait) {
259
+ @include core-mixins-v3.device(breakpoints.$tabPortrait) {
260
+ padding-block: core-functions-v3.fluidSize(10);
261
+ }
262
+ }
263
+
264
+ .equipments-wrapper {
265
+ display: flex;
316
266
  align-items: center;
267
+ gap: core-functions-v3.fluidSize(15);
268
+
269
+ @include core-mixins-v3.device(breakpoints.$tabPortrait) {
270
+ gap: core-functions-v3.fluidSize(30);
271
+ }
272
+
273
+ .equipment-image {
274
+ max-width: core-functions-v3.fluidSize(50);
275
+ aspect-ratio: 1;
276
+ object-fit: cover;
277
+
278
+ @include core-mixins-v3.device(breakpoints.$tabPortrait) {
279
+ max-width: core-functions-v3.fluidSize(100);
280
+ }
281
+ }
282
+
283
+ .equipment-text {
284
+ font-family: var(--tertiary-font-family);
285
+ font-size: core-functions-v3.fontSize(18);
286
+ font-weight: 400;
287
+
288
+ @include core-mixins-v3.device(breakpoints.$tabPortrait) {
289
+ font-size: core-functions-v3.fontSize(22);
290
+ }
291
+ }
317
292
  }
293
+ }
318
294
 
319
- .instructions-number {
320
- font-family: var(--secondary-font-family);
321
- font-size: core-functions-v3.fontSize(30);
322
- padding-inline: core-functions-v3.fluidSize(10);
295
+ &__instructions-container {
296
+ .instructions-title {
297
+ font-family: var(--primary-font-family);
298
+ font-size: core-functions-v3.fontSize(70);
323
299
  font-weight: 500;
324
- text-box-trim: trim-both;
300
+ text-transform: uppercase;
301
+ padding-block: core-functions-v3.fluidSize(10);
325
302
  text-box-edge: cap alphabetic;
303
+ text-box-trim: trim-both;
304
+
305
+ @include core-mixins-v3.device(breakpoints.$tabPortrait) {
306
+ padding-block: core-functions-v3.fluidSize(40);
307
+ font-size: core-functions-v3.fontSize(160);
308
+ }
326
309
  }
327
310
 
328
- .instructions-text {
329
- font-family: var(--tertiary-font-family);
330
- font-size: core-functions-v3.fontSize(24);
331
- font-weight: 300;
332
- text-box-trim: trim-both;
333
- text-box-edge: cap alphabetic;
311
+ .instructions-wrapper {
312
+ display: flex;
313
+ align-items: flex-start;
314
+ gap: core-functions-v3.fluidSize(20);
315
+ padding-block: core-functions-v3.fluidSize(30);
316
+ border-top: 1px solid #faf8ec4d;
334
317
 
335
318
  @include core-mixins-v3.device(breakpoints.$tabPortrait) {
319
+ align-items: center;
320
+ }
321
+
322
+ .instructions-number {
323
+ font-family: var(--secondary-font-family);
336
324
  font-size: core-functions-v3.fontSize(30);
325
+ padding-inline: core-functions-v3.fluidSize(10);
326
+ font-weight: 500;
327
+ text-box-trim: trim-both;
328
+ text-box-edge: cap alphabetic;
329
+ }
330
+
331
+ .instructions-text {
332
+ font-family: var(--tertiary-font-family);
333
+ font-size: core-functions-v3.fontSize(24);
334
+ font-weight: 300;
335
+ text-box-trim: trim-both;
336
+ text-box-edge: cap alphabetic;
337
+
338
+ @include core-mixins-v3.device(breakpoints.$tabPortrait) {
339
+ font-size: core-functions-v3.fontSize(30);
340
+ }
337
341
  }
338
342
  }
339
343
  }
package/components/block-cover-link-v3/cover-link-v3.scss CHANGED
@@ -1,8 +1,10 @@
1
- .cover-link-v3 {
2
- &__link {
3
- position: absolute;
4
- inset: 0;
5
- z-index: 10;
6
- pointer-events: all;
1
+ @layer base-styles {
2
+ .cover-link-v3 {
3
+ &__link {
4
+ position: absolute;
5
+ inset: 0;
6
+ z-index: 10;
7
+ pointer-events: all;
8
+ }
7
9
  }
8
10
  }