@total_onion/onion-library 2.0.110 → 2.0.112

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 (3) hide show
  1. package/components/block-cocktail-recipe-v3/cocktail-recipe-v3.scss +74 -16
  2. package/components/block-post-type-filter-grid-v3/post-type-filter-grid-v3.scss +1 -1
  3. package/package.json +1 -1
package/components/block-cocktail-recipe-v3/cocktail-recipe-v3.scss CHANGED
@@ -13,9 +13,13 @@
13
13
  .ingredients-title {
14
14
  padding-block: core-functions-v3.fluidSize(10);
15
15
  font-family: var(--primary-font-family);
16
- font-size: core-functions-v3.fontSize(160);
16
+ font-size: core-functions-v3.fontSize(80);
17
17
  font-weight: 500;
18
18
  text-transform: uppercase;
19
+
20
+ @include core-mixins-v3.device(breakpoints.$tabPortrait) {
21
+ font-size: core-functions-v3.fontSize(160);
22
+ }
19
23
  }
20
24
  }
21
25
 
@@ -23,7 +27,7 @@
23
27
  display: flex;
24
28
  justify-content: space-between;
25
29
  align-items: center;
26
- padding-block: core-functions-v3.fluidSize(10);
30
+ padding-block: core-functions-v3.fluidSize(15);
27
31
  border-bottom: 1px solid #faf8ec4d;
28
32
 
29
33
  .servings-title {
@@ -82,11 +86,15 @@
82
86
 
83
87
  .servings-current {
84
88
  font-family: var(--secondary-font-family);
85
- font-size: core-functions-v3.fontSize(30);
89
+ font-size: core-functions-v3.fontSize(26);
86
90
  font-weight: 500;
87
91
  display: inline-block;
88
92
  width: core-functions-v3.fluidSize(60);
89
93
  text-align: center;
94
+
95
+ @include core-mixins-v3.device(breakpoints.$tabPortrait) {
96
+ font-size: core-functions-v3.fontSize(30);
97
+ }
90
98
  }
91
99
 
92
100
  .inc-btn-wrapper {
@@ -137,8 +145,12 @@
137
145
 
138
146
  .unit-text {
139
147
  font-family: var(--tertiary-font-family);
140
- font-size: core-functions-v3.fontSize(22);
148
+ font-size: core-functions-v3.fontSize(18);
141
149
  font-weight: 700;
150
+
151
+ @include core-mixins-v3.device(breakpoints.$tabPortrait) {
152
+ font-size: core-functions-v3.fontSize(22);
153
+ }
142
154
  }
143
155
 
144
156
  .unit-toggle-wrapper {
@@ -191,16 +203,29 @@
191
203
  .ingredients-wrapper {
192
204
  display: flex;
193
205
  align-items: center;
194
- gap: core-functions-v3.fluidSize(30);
206
+ gap: core-functions-v3.fluidSize(15);
207
+
208
+ @include core-mixins-v3.device(breakpoints.$tabPortrait) {
209
+ gap: core-functions-v3.fluidSize(30);
210
+ }
195
211
 
212
+ // to be changed
196
213
  img {
197
- max-width: 100px;
214
+ max-width: 50px;
215
+
216
+ @include core-mixins-v3.device(breakpoints.$tabPortrait) {
217
+ max-width: 100px;
218
+ }
198
219
  }
199
220
 
200
221
  .ingredient-text {
201
- font-size: core-functions-v3.fontSize(22);
222
+ font-size: core-functions-v3.fontSize(18);
202
223
  font-family: var(--tertiary-font-family);
203
224
  font-weight: 400;
225
+
226
+ @include core-mixins-v3.device(breakpoints.$tabPortrait) {
227
+ font-size: core-functions-v3.fontSize(22);
228
+ }
204
229
  }
205
230
  }
206
231
 
@@ -208,29 +233,50 @@
208
233
  display: flex;
209
234
  flex-direction: column;
210
235
  gap: core-functions-v3.fluidSize(20);
211
- padding-bottom: core-functions-v3.fluidSize(180);
236
+ padding-bottom: core-functions-v3.fluidSize(100);
237
+
238
+ @include core-mixins-v3.device(breakpoints.$tabPortrait) {
239
+ padding-bottom: core-functions-v3.fluidSize(180);
240
+ }
212
241
 
213
242
  .equipments-title {
214
243
  font-family: var(--secondary-font-family);
215
244
  font-size: core-functions-v3.fontSize(26);
216
245
  font-weight: 500;
217
- padding-block: core-functions-v3.fluidSize(10);
246
+ padding-block: core-functions-v3.fluidSize(20);
218
247
  border-bottom: 1px solid #faf8ec4d;
248
+
249
+ @include core-mixins-v3.device(breakpoints.$tabPortrait) {
250
+ padding-block: core-functions-v3.fluidSize(10);
251
+ }
219
252
  }
220
253
 
221
254
  .equipments-wrapper {
222
255
  display: flex;
223
256
  align-items: center;
224
- gap: core-functions-v3.fluidSize(30);
257
+ gap: core-functions-v3.fluidSize(15);
258
+
259
+ @include core-mixins-v3.device(breakpoints.$tabPortrait) {
260
+ gap: core-functions-v3.fluidSize(30);
261
+ }
225
262
 
263
+ // to be changed
226
264
  img {
227
- max-width: 100px;
265
+ max-width: 50px;
266
+
267
+ @include core-mixins-v3.device(breakpoints.$tabPortrait) {
268
+ max-width: 100px;
269
+ }
228
270
  }
229
271
 
230
272
  .equipments-text {
231
273
  font-family: var(--tertiary-font-family);
232
- font-size: core-functions-v3.fontSize(22);
274
+ font-size: core-functions-v3.fontSize(18);
233
275
  font-weight: 400;
276
+
277
+ @include core-mixins-v3.device(breakpoints.$tabPortrait) {
278
+ font-size: core-functions-v3.fontSize(22);
279
+ }
234
280
  }
235
281
  }
236
282
  }
@@ -238,23 +284,35 @@
238
284
  &__instructions-container {
239
285
  .instructions-title {
240
286
  font-family: var(--primary-font-family);
241
- font-size: core-functions-v3.fontSize(160);
287
+ font-size: core-functions-v3.fontSize(70);
242
288
  font-weight: 500;
243
289
  text-transform: uppercase;
244
- padding-block: core-functions-v3.fluidSize(40);
290
+ padding-block: core-functions-v3.fluidSize(10);
291
+
292
+ @include core-mixins-v3.device(breakpoints.$tabPortrait) {
293
+ padding-block: core-functions-v3.fluidSize(40);
294
+ font-size: core-functions-v3.fontSize(160);
295
+ }
245
296
  }
246
297
 
247
298
  .instructions-wrapper {
248
299
  display: flex;
249
- align-items: center;
250
- gap: core-functions-v3.fluidSize(40);
300
+ align-items: flex-start;
301
+ gap: core-functions-v3.fluidSize(20);
251
302
  padding-block: core-functions-v3.fluidSize(30);
252
303
  border-top: 1px solid #faf8ec4d;
253
304
 
305
+ @include core-mixins-v3.device(breakpoints.$tabPortrait) {
306
+ align-items: center;
307
+ }
308
+
254
309
  .instructions-number {
255
310
  font-family: var(--secondary-font-family);
256
311
  font-size: core-functions-v3.fontSize(30);
312
+ padding-inline: core-functions-v3.fluidSize(10);
257
313
  font-weight: 500;
314
+ text-box-trim: trim-both;
315
+ text-box-edge: cap alphabetic;
258
316
  }
259
317
 
260
318
  .instructions-text {
package/components/block-post-type-filter-grid-v3/post-type-filter-grid-v3.scss CHANGED
@@ -882,7 +882,7 @@
882
882
  }
883
883
  }
884
884
 
885
- &__post-spacer {
885
+ &__spacer {
886
886
  z-index: 2;
887
887
  width: 100%;
888
888
  background-color: var(--spacer-bg-colour);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@total_onion/onion-library",
3
- "version": "2.0.110",
3
+ "version": "2.0.112",
4
4
  "description": "Component library",
5
5
  "main": "index.js",
6
6
  "scripts": {