@total_onion/onion-library 2.0.114 → 2.0.115

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.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@total_onion/onion-library",
3
- "version": "2.0.114",
3
+ "version": "2.0.115",
4
4
  "description": "Component library",
5
5
  "main": "index.js",
6
6
  "scripts": {
@@ -3,21 +3,6 @@
3
3
  position: relative;
4
4
  background-color: var(--block-background-colour);
5
5
  }
6
- .mobile-menu-active .post-type-filter-grid-v3 {
7
- z-index: 9999;
8
- }
9
- .post-type-filter-grid-v3__post-cover-link {
10
- grid-area: unset;
11
- position: absolute;
12
- top: 0;
13
- right: 0;
14
- bottom: 0;
15
- left: 0;
16
- width: 100%;
17
- height: 100%;
18
- z-index: 99;
19
- opacity: 0;
20
- }
21
6
  .post-type-filter-grid-v3__main-container {
22
7
  display: grid;
23
8
  grid-column-gap: var(--global-inline-spacing);
@@ -35,12 +20,10 @@
35
20
  .post-type-filter-grid-v3__main-container--hide-filters {
36
21
  grid-template: "markettoggle" "grid" "loadmore"/1fr;
37
22
  }
38
- .post-type-filter-grid-v3__main-container[data-layout="2"],
39
- .post-type-filter-grid-v3__main-container[data-layout="5"] {
23
+ .post-type-filter-grid-v3__main-container[data-layout="2"] {
40
24
  grid-template: "filter " "sort" "markettoggle" "grid" "loadmore"/1fr;
41
25
  }
42
- .post-type-filter-grid-v3__main-container[data-layout="3"],
43
- .post-type-filter-grid-v3__main-container[data-layout="4"] {
26
+ .post-type-filter-grid-v3__main-container[data-layout="3"] {
44
27
  grid-template: "filter " "sort" "markettoggle" "grid" "loadmore"/1fr;
45
28
  }
46
29
  }
@@ -56,8 +39,7 @@
56
39
  justify-items: center;
57
40
  place-items: center;
58
41
  }
59
- .post-type-filter-grid-v3__filter[data-layout="2"],
60
- .post-type-filter-grid-v3__filter[data-layout="5"] {
42
+ .post-type-filter-grid-v3__filter[data-layout="2"] {
61
43
  width: 100%;
62
44
  padding-bottom: calc(var(--global-inline-spacing) / 2);
63
45
  }
@@ -66,224 +48,12 @@
66
48
  top: calc(140 / var(--design-reference) * var(--screen-width));
67
49
  }
68
50
  }
69
- .post-type-filter-grid-v3__filter[data-layout="5"] {
70
- top: auto;
71
- top: initial;
72
- }
73
51
  @media screen and (min-width: 1024px) {
74
52
  .post-type-filter-grid-v3__filter {
75
53
  background-color: var(--filter-background-colour);
76
54
  top: 0;
77
55
  }
78
56
  }
79
- .post-type-filter-grid-v3__filter[data-layout="5"] {
80
- top: auto;
81
- top: initial;
82
- }
83
- .post-type-filter-grid-v3__filter[data-layout="5"] .post-type-filter-grid-v3__open-filter-toggle {
84
- display: none;
85
- }
86
- .post-type-filter-grid-v3__filter[data-layout="3"] .post-type-filter-grid-v3__open-filter-toggle {
87
- display: none;
88
- }
89
- .post-type-filter-grid-v3__filter[data-layout="3"] .post-type-filter-grid-v3__filter-top-level-categories {
90
- overflow: scroll;
91
- flex-wrap: nowrap;
92
- justify-content: center;
93
- }
94
- .post-type-filter-grid-v3__filter[data-layout="3"] .post-type-filter-grid-v3__filter-container {
95
- height: auto;
96
- display: flex;
97
- flex-direction: column-reverse;
98
- }
99
- .post-type-filter-grid-v3__filter[data-layout="3"] .post-type-filter-grid-v3__filter-categories {
100
- display: grid;
101
- padding-bottom: calc(20 / var(--desktop-design-reference) * var(--screen-width-static));
102
- }
103
- @media screen and (min-width: 768px) {
104
- .post-type-filter-grid-v3__filter[data-layout="3"] .post-type-filter-grid-v3__filter-categories {
105
- align-items: center;
106
- justify-items: center;
107
- place-items: center;
108
- }
109
- }
110
- .post-type-filter-grid-v3__filter[data-layout="3"] .post-type-filter-grid-v3__filter-top-level-category-container {
111
- display: flex;
112
- list-style-type: none;
113
- align-items: flex-start;
114
- justify-items: flex-start;
115
- place-items: flex-start;
116
- margin: auto;
117
- gap: calc(30 / var(--desktop-design-reference) * var(--screen-width-static));
118
- }
119
- .post-type-filter-grid-v3__filter[data-layout="3"] .post-type-filter-grid-v3__filter-categories-container {
120
- display: grid;
121
- grid-template: "main"/1fr;
122
- overflow: scroll;
123
- width: 100%;
124
- scrollbar-width: none;
125
- -ms-overflow-style: none;
126
- }
127
- .post-type-filter-grid-v3__filter[data-layout="3"] .post-type-filter-grid-v3__filter-categories-container::-webkit-scrollbar {
128
- background: transparent;
129
- width: 0px;
130
- display: none;
131
- }
132
- .post-type-filter-grid-v3__filter[data-layout="3"] .post-type-filter-grid-v3__filter-top-level-category {
133
- grid-area: main;
134
- margin: 0;
135
- }
136
- .post-type-filter-grid-v3__filter[data-layout="3"] .post-type-filter-grid-v3__filter-top-level-category::after {
137
- content: normal;
138
- content: initial;
139
- }
140
- .post-type-filter-grid-v3__filter[data-layout="3"] .post-type-filter-grid-v3__filter-subcategories-container {
141
- display: grid;
142
- grid-template: "main"/1fr;
143
- overflow: scroll;
144
- scrollbar-width: none;
145
- -ms-overflow-style: none;
146
- }
147
- .post-type-filter-grid-v3__filter[data-layout="3"] .post-type-filter-grid-v3__filter-subcategories-container::-webkit-scrollbar {
148
- background: transparent;
149
- width: 0px;
150
- display: none;
151
- }
152
- .post-type-filter-grid-v3__filter[data-layout="3"] .post-type-filter-grid-v3__filter-subcategory-list {
153
- grid-area: main;
154
- display: flex;
155
- opacity: 0;
156
- pointer-events: none;
157
- margin-bottom: 0;
158
- gap: calc(30 / var(--desktop-design-reference) * var(--screen-width-static));
159
- max-height: 0;
160
- transition: none 0s ease 0s;
161
- transition: initial;
162
- width: 0;
163
- max-width: 100%;
164
- justify-self: center;
165
- flex-wrap: var(--sub-filter-overflow-mobile);
166
- overflow: var(--sub-filter-overflow-mobile);
167
- justify-content: var(--sub-filter-overflow-center-mobile);
168
- }
169
- @media screen and (min-width: 768px) {
170
- .post-type-filter-grid-v3__filter[data-layout="3"] .post-type-filter-grid-v3__filter-subcategory-list {
171
- flex-wrap: var(--sub-filter-overflow-tablet);
172
- overflow: var(--sub-filter-overflow-tablet);
173
- justify-content: var(--sub-filter-overflow-center-tablet);
174
- }
175
- }
176
- @media screen and (min-width: 1024px) {
177
- .post-type-filter-grid-v3__filter[data-layout="3"] .post-type-filter-grid-v3__filter-subcategory-list {
178
- flex-wrap: var(--sub-filter-overflow-desktop);
179
- overflow: var(--sub-filter-overflow-desktop);
180
- justify-content: var(--sub-filter-overflow-center-desktop);
181
- }
182
- }
183
- .post-type-filter-grid-v3__filter[data-layout="3"] .post-type-filter-grid-v3__filter-subcategory-list {
184
- scrollbar-width: none;
185
- -ms-overflow-style: none;
186
- }
187
- .post-type-filter-grid-v3__filter[data-layout="3"] .post-type-filter-grid-v3__filter-subcategory-list::-webkit-scrollbar {
188
- background: transparent;
189
- width: 0px;
190
- }
191
- .post-type-filter-grid-v3__filter[data-layout="3"] .post-type-filter-grid-v3__filter-subcategory-list--active {
192
- opacity: 1;
193
- pointer-events: all;
194
- max-height: 1000px;
195
- }
196
- .post-type-filter-grid-v3__filter[data-layout="3"] .post-type-filter-grid-v3__filter-subcategory-list--active[data-layout="3"] {
197
- width: -moz-fit-content;
198
- width: fit-content;
199
- }
200
- .post-type-filter-grid-v3__filter[data-layout="3"] .post-type-filter-grid-v3__filter-subcategory-list-item {
201
- margin: 0;
202
- justify-content: center;
203
- }
204
- .post-type-filter-grid-v3__filter[data-layout="3"] .post-type-filter-grid-v3__filter-subcategory-list-item--active {
205
- opacity: 1;
206
- pointer-events: all;
207
- }
208
- .post-type-filter-grid-v3__filter[data-layout="3"] .post-type-filter-grid-v3__show-all {
209
- align-self: center;
210
- justify-self: center;
211
- place-self: center;
212
- }
213
- @media all and (max-width: 1023px) {
214
- .post-type-filter-grid-v3__filter[data-layout="4"] .post-type-filter-grid-v3__filter-container--open {
215
- background-color: var(--filter-background-colour-mobile);
216
- position: fixed;
217
- top: 0;
218
- left: 0;
219
- width: 100%;
220
- height: 100%;
221
- justify-content: flex-start;
222
- z-index: 9;
223
- }
224
- .post-type-filter-grid-v3__filter[data-layout="4"] .post-type-filter-grid-v3__filter-categories {
225
- display: flex;
226
- flex-direction: column;
227
- justify-content: flex-start;
228
- }
229
- .post-type-filter-grid-v3__filter[data-layout="4"] .post-type-filter-grid-v3__filter-update-button {
230
- position: absolute;
231
- width: 100%;
232
- bottom: 0;
233
- left: 0;
234
- z-index: 99999;
235
- }
236
- .post-type-filter-grid-v3__filter[data-layout="4"] .post-type-filter-grid-v3__filter-category.active {
237
- background-color: var(--filter-background-colour-mobile);
238
- width: 100%;
239
- top: 0;
240
- left: 0;
241
- position: absolute;
242
- height: 100%;
243
- z-index: 99999;
244
- justify-content: flex-start;
245
- }
246
- }
247
- @media screen and (min-width: 1024px) {
248
- .post-type-filter-grid-v3__filter[data-layout="4"] .post-type-filter-grid-v3__filter-update-button {
249
- display: none;
250
- }
251
- .post-type-filter-grid-v3__filter[data-layout="4"] .post-type-filter-grid-v3__filter-container {
252
- overflow: visible;
253
- }
254
- .post-type-filter-grid-v3__filter[data-layout="4"] .post-type-filter-grid-v3__filter-categories {
255
- display: flex;
256
- flex-direction: row;
257
- justify-content: center;
258
- }
259
- }
260
- @media screen and (min-width: 1024px) and (min-width: 1024px) {
261
- .post-type-filter-grid-v3__filter[data-layout="4"] .post-type-filter-grid-v3__filter-categories-label {
262
- display: none;
263
- }
264
- }
265
- @media screen and (min-width: 1024px) {
266
- .post-type-filter-grid-v3__filter[data-layout="4"] .post-type-filter-grid-v3__cta {
267
- min-width: calc(230 / var(--design-reference) * var(--screen-width));
268
- width: auto;
269
- }
270
- .post-type-filter-grid-v3__filter[data-layout="4"] .post-type-filter-grid-v3__cta:hover {
271
- background-color: transparent;
272
- background-color: initial;
273
- color: inherit;
274
- }
275
- .post-type-filter-grid-v3__filter[data-layout="4"] .post-type-filter-grid-v3__filter-subcategory-list {
276
- display: none;
277
- }
278
- .post-type-filter-grid-v3__filter[data-layout="4"] .post-type-filter-grid-v3__cta.active .post-type-filter-grid-v3__filter-subcategory-list {
279
- display: flex;
280
- position: absolute;
281
- background-color: var(--filter-background-colour);
282
- width: auto;
283
- flex-direction: column;
284
- top: calc(60 / var(--design-reference) * var(--screen-width));
285
- }
286
- }
287
57
  .post-type-filter-grid-v3__filter-container {
288
58
  position: relative;
289
59
  height: 0;
@@ -296,8 +66,7 @@
296
66
  height: auto;
297
67
  background-color: transparent;
298
68
  }
299
- .post-type-filter-grid-v3__filter-container[data-layout="2"],
300
- .post-type-filter-grid-v3__filter-container[data-layout="5"] {
69
+ .post-type-filter-grid-v3__filter-container[data-layout="2"] {
301
70
  display: flex;
302
71
  gap: calc(20 / var(--design-reference) * var(--screen-width));
303
72
  grid-auto-flow: column;
@@ -308,19 +77,6 @@
308
77
  max-width: 100%;
309
78
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
310
79
  }
311
- .post-type-filter-grid-v3__filter-container[data-layout="5"] {
312
- grid-auto-flow: unset;
313
- }
314
- }
315
- @media screen and (min-width: 768px) and (min-width: 768px) {
316
- .post-type-filter-grid-v3__filter-container[data-layout="5"] {
317
- grid-auto-flow: column;
318
- }
319
- }
320
- @media screen and (min-width: 768px) and (min-width: 1024px) {
321
- .post-type-filter-grid-v3__filter-container[data-layout="5"] {
322
- grid-auto-flow: column;
323
- }
324
80
  }
325
81
  .post-type-filter-grid-v3__filter-container--open {
326
82
  height: auto;
@@ -376,8 +132,7 @@
376
132
  padding-bottom: var(--global-inline-spacing);
377
133
  width: 100%;
378
134
  }
379
- .post-type-filter-grid-v3__filter-categories[data-layout="2"],
380
- .post-type-filter-grid-v3__filter-categories[data-layout="5"] {
135
+ .post-type-filter-grid-v3__filter-categories[data-layout="2"] {
381
136
  padding-bottom: 0;
382
137
  padding-bottom: initial;
383
138
  }
@@ -387,8 +142,7 @@
387
142
  position: relative;
388
143
  gap: calc(20 / var(--design-reference) * var(--screen-width));
389
144
  }
390
- .post-type-filter-grid-v3__filter-categories[data-layout="2"],
391
- .post-type-filter-grid-v3__filter-categories[data-layout="5"] {
145
+ .post-type-filter-grid-v3__filter-categories[data-layout="2"] {
392
146
  grid-auto-flow: column;
393
147
  grid-auto-columns: 1fr;
394
148
  width: -moz-max-content;
@@ -412,23 +166,6 @@
412
166
  .post-type-filter-grid-v3__filter-category.active .post-type-filter-grid-v3__filter-top-level-category-name::after {
413
167
  rotate: 0deg;
414
168
  }
415
- .post-type-filter-grid-v3__filter-subcategory-list[data-layout="5"] {
416
- flex-direction: column;
417
- margin: 0;
418
- margin: initial;
419
- }
420
- @media screen and (min-width: 768px) {
421
- .post-type-filter-grid-v3__filter-subcategory-list[data-layout="5"] {
422
- flex-direction: initial;
423
- margin: auto;
424
- }
425
- }
426
- @media screen and (min-width: 1024px) {
427
- .post-type-filter-grid-v3__filter-subcategory-list[data-layout="5"] {
428
- flex-direction: initial;
429
- margin: auto;
430
- }
431
- }
432
169
  .post-type-filter-grid-v3__filter-subcategory-list {
433
170
  list-style-type: none;
434
171
  display: flex;
@@ -466,34 +203,17 @@
466
203
  width: initial;
467
204
  }
468
205
  }
469
- .post-type-filter-grid-v3__filter-subcategory-list-item[data-layout="2"],
470
- .post-type-filter-grid-v3__filter-subcategory-list-item[data-layout="5"] {
206
+ .post-type-filter-grid-v3__filter-subcategory-list-item[data-layout="2"] {
471
207
  margin: 0;
472
208
  margin: initial;
473
209
  }
474
210
  @media screen and (min-width: 768px) {
475
- .post-type-filter-grid-v3__filter-subcategory-list-item[data-layout="2"],
476
- .post-type-filter-grid-v3__filter-subcategory-list-item[data-layout="5"] {
211
+ .post-type-filter-grid-v3__filter-subcategory-list-item[data-layout="2"] {
477
212
  margin: auto;
478
213
  }
479
214
  }
480
215
  @media screen and (min-width: 1024px) {
481
- .post-type-filter-grid-v3__filter-subcategory-list-item[data-layout="2"],
482
- .post-type-filter-grid-v3__filter-subcategory-list-item[data-layout="5"] {
483
- margin: auto;
484
- }
485
- }
486
- .post-type-filter-grid-v3__filter-subcategory-list-item[data-layout="5"] {
487
- margin: 0;
488
- margin: initial;
489
- }
490
- @media screen and (min-width: 768px) {
491
- .post-type-filter-grid-v3__filter-subcategory-list-item[data-layout="5"] {
492
- margin: auto;
493
- }
494
- }
495
- @media screen and (min-width: 1024px) {
496
- .post-type-filter-grid-v3__filter-subcategory-list-item[data-layout="5"] {
216
+ .post-type-filter-grid-v3__filter-subcategory-list-item[data-layout="2"] {
497
217
  margin: auto;
498
218
  }
499
219
  }
@@ -674,27 +394,6 @@
674
394
  gap: calc(var(--global-inline-spacing) * (var(--post-container-grid-gap-desktop)));
675
395
  }
676
396
  }
677
- .post-type-filter-grid-v3__overlay {
678
- top: 0;
679
- right: 0;
680
- bottom: 0;
681
- left: 0;
682
- z-index: 1;
683
- grid-row: 1/-1;
684
- grid-row: var(--gradient-overlay-row-start, 1)/var(--gradient-overlay-row-end, -1);
685
- }
686
- .post-type-filter-grid-v3__overlay--gradient-overlay-top,
687
- .post-type-filter-grid-v3__overlay--gradient-overlay-right,
688
- .post-type-filter-grid-v3__overlay--gradient-overlay-bottom,
689
- .post-type-filter-grid-v3__overlay--gradient-overlay-left {
690
- position: absolute;
691
- }
692
- .post-type-filter-grid-v3__overlay--gradient-overlay-vertical {
693
- position: absolute;
694
- }
695
- .post-type-filter-grid-v3__overlay--gradient-overlay-horizontal {
696
- position: absolute;
697
- }
698
397
  .post-type-filter-grid-v3__post-image-container-link {
699
398
  display: grid;
700
399
  grid-template: "main"/1fr;
@@ -980,19 +679,19 @@
980
679
  .post-type-filter-grid-v3__icon-image * {
981
680
  fill: inherit;
982
681
  }
983
- .post-type-filter-grid-v3__post-spacer {
682
+ .post-type-filter-grid-v3__spacer {
984
683
  z-index: 2;
985
684
  width: 100%;
986
685
  background-color: var(--spacer-bg-colour);
987
686
  height: calc(var(--global-inline-spacing) * var(--spacer-size-mult-mobile));
988
687
  }
989
688
  @media screen and (min-width: 768px) {
990
- .post-type-filter-grid-v3__post-spacer {
689
+ .post-type-filter-grid-v3__spacer {
991
690
  height: calc(var(--global-inline-spacing) * var(--spacer-size-mult-portrait));
992
691
  }
993
692
  }
994
693
  @media screen and (min-width: 1024px) {
995
- .post-type-filter-grid-v3__post-spacer {
694
+ .post-type-filter-grid-v3__spacer {
996
695
  height: calc(var(--global-inline-spacing) * var(--spacer-size-mult));
997
696
  }
998
697
  }
@@ -1056,11 +755,6 @@
1056
755
  stroke: var(--post-text-colour-style);
1057
756
  fill: var(--post-text-colour-style);
1058
757
  }
1059
- .post-type-filter-grid-v3__product-c7-add-to-cart {
1060
- display: flex;
1061
- align-items: flex-end;
1062
- z-index: 2;
1063
- }
1064
758
  .post-type-filter-grid-v3__post-tags {
1065
759
  display: flex;
1066
760
  justify-content: flex-start;
@@ -1068,25 +762,6 @@
1068
762
  align-items: flex-start;
1069
763
  z-index: 2;
1070
764
  }
1071
- .post-type-filter-grid-v3__person-email {
1072
- display: flex;
1073
- gap: 1em;
1074
- align-items: center;
1075
- }
1076
- .post-type-filter-grid-v3__person-email-icon {
1077
- width: 1em;
1078
- }
1079
- .post-type-filter-grid-v3__person-rating-star-container {
1080
- display: flex;
1081
- --rating-star-colour: #f8b94c;
1082
- padding: calc(10 / var(--desktop-design-reference) * var(--screen-width-static));
1083
- }
1084
- .post-type-filter-grid-v3__person-rating-star {
1085
- width: calc(20 / var(--desktop-design-reference) * var(--screen-width-static));
1086
- }
1087
- .post-type-filter-grid-v3__person-rating-star * {
1088
- fill: var(--rating-star-colour);
1089
- }
1090
765
  .post-type-filter-grid-v3__load-more-container {
1091
766
  grid-area: loadmore;
1092
767
  width: 100%;
@@ -1140,10 +815,6 @@
1140
815
  .post-type-filter-grid-v3__load-more-icon {
1141
816
  width: 1em;
1142
817
  }
1143
- .post-type-filter-grid-v3__show-all[data-layout="5"] {
1144
- text-align: left;
1145
- justify-content: flex-start;
1146
- }
1147
818
  .post-type-filter-grid-v3__show-all {
1148
819
  z-index: 2;
1149
820
  position: relative;
@@ -1163,8 +834,7 @@
1163
834
  }
1164
835
  }
1165
836
  @media screen and (min-width: 1024px) {
1166
- .post-type-filter-grid-v3__show-all[data-layout="2"],
1167
- .post-type-filter-grid-v3__show-all[data-layout="5"] {
837
+ .post-type-filter-grid-v3__show-all[data-layout="2"] {
1168
838
  grid-column: 1;
1169
839
  width: -moz-max-content;
1170
840
  width: max-content;