@total_onion/onion-library 2.0.113 → 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.
@@ -8,15 +8,6 @@
8
8
  z-index: 10;
9
9
  position: relative;
10
10
  background-color: var(--block-background-colour);
11
- &__post-cover-link {
12
- grid-area: unset;
13
- position: absolute;
14
- inset: 0;
15
- width: 100%;
16
- height: 100%;
17
- z-index: 99;
18
- opacity: 0;
19
- }
20
11
 
21
12
  &__main-container {
22
13
  display: grid;
@@ -48,8 +39,7 @@
48
39
  'loadmore' / 1fr;
49
40
  }
50
41
 
51
- &[data-layout='2'],
52
- &[data-layout='5'] {
42
+ &[data-layout='2'] {
53
43
  grid-template:
54
44
  'filter '
55
45
  'sort'
@@ -57,8 +47,7 @@
57
47
  'grid'
58
48
  'loadmore' / 1fr;
59
49
  }
60
- &[data-layout='3'],
61
- &[data-layout='4'] {
50
+ &[data-layout='3'] {
62
51
  grid-template:
63
52
  'filter '
64
53
  'sort'
@@ -79,8 +68,7 @@
79
68
  background-color: var(--filter-background-colour-mobile);
80
69
  place-items: center;
81
70
 
82
- &[data-layout='2'],
83
- &[data-layout='5'] {
71
+ &[data-layout='2'] {
84
72
  width: 100%;
85
73
  padding-bottom: calc(var(--global-inline-spacing) / 2);
86
74
  }
@@ -89,226 +77,10 @@
89
77
  top: core-functions-v3.fluidSize(140, 'portrait');
90
78
  }
91
79
 
92
- &[data-layout='5'] {
93
- top: unset;
94
- }
95
-
96
80
  @include core-mixins-v3.device(breakpoints.$tabLandscape) {
97
81
  background-color: var(--filter-background-colour);
98
82
  top: 0;
99
83
  }
100
-
101
- &[data-layout='5'] {
102
- top: unset;
103
- .post-type-filter-grid-v3 {
104
- &__open-filter-toggle {
105
- display: none;
106
- }
107
- }
108
- }
109
- &[data-layout='3'] {
110
- .post-type-filter-grid-v3 {
111
- &__open-filter-toggle {
112
- display: none;
113
- }
114
- &__filter-top-level-categories {
115
- overflow: scroll;
116
- flex-wrap: nowrap;
117
- justify-content: center;
118
- }
119
- &__filter-container {
120
- height: auto;
121
- display: flex;
122
- flex-direction: column-reverse;
123
- }
124
- &__filter-categories {
125
- display: grid;
126
- padding-bottom: core-functions-v3.fluidSize(20, 'static');
127
- @include core-mixins-v3.device(breakpoints.$tabPortrait) {
128
- place-items: center;
129
- }
130
- }
131
- &__filter-top-level-category-container {
132
- display: flex;
133
- list-style-type: none;
134
- place-items: flex-start;
135
- margin: auto;
136
- gap: core-functions-v3.fluidSize(30, 'static');
137
- }
138
- &__filter-categories-container {
139
- display: grid;
140
- grid-template: 'main'/1fr;
141
- overflow: scroll;
142
- width: 100%;
143
- scrollbar-width: none; /* Firefox */
144
- -ms-overflow-style: none; /* IE 10+ */
145
- &::-webkit-scrollbar {
146
- background: transparent; /* Chrome/Safari/Webkit */
147
- width: 0px;
148
- display: none;
149
- }
150
- }
151
- &__filter-top-level-category {
152
- grid-area: main;
153
- margin: 0;
154
- &::after {
155
- content: unset;
156
- }
157
- }
158
- &__filter-subcategories-container {
159
- display: grid;
160
- grid-template: 'main' / 1fr;
161
- overflow: scroll;
162
- scrollbar-width: none; /* Firefox */
163
- -ms-overflow-style: none; /* IE 10+ */
164
- &::-webkit-scrollbar {
165
- background: transparent; /* Chrome/Safari/Webkit */
166
- width: 0px;
167
- display: none;
168
- }
169
- }
170
- &__filter-subcategory-list {
171
- grid-area: main;
172
- display: flex;
173
- opacity: 0;
174
- pointer-events: none;
175
- margin-bottom: 0;
176
- gap: core-functions-v3.fluidSize(30, 'static');
177
- max-height: 0;
178
- transition: unset;
179
- width: 0;
180
- max-width: 100%;
181
- justify-self: center;
182
- flex-wrap: var(--sub-filter-overflow-mobile);
183
- overflow: var(--sub-filter-overflow-mobile);
184
- justify-content: var(--sub-filter-overflow-center-mobile);
185
- @include core-mixins-v3.device(breakpoints.$tabPortrait) {
186
- flex-wrap: var(--sub-filter-overflow-tablet);
187
- overflow: var(--sub-filter-overflow-tablet);
188
- justify-content: var(
189
- --sub-filter-overflow-center-tablet
190
- );
191
- }
192
- @include core-mixins-v3.device(breakpoints.$tabLandscape) {
193
- flex-wrap: var(--sub-filter-overflow-desktop);
194
- overflow: var(--sub-filter-overflow-desktop);
195
- justify-content: var(
196
- --sub-filter-overflow-center-desktop
197
- );
198
- }
199
- scrollbar-width: none; /* Firefox */
200
- -ms-overflow-style: none; /* IE 10+ */
201
- &::-webkit-scrollbar {
202
- background: transparent; /* Chrome/Safari/Webkit */
203
- width: 0px;
204
- }
205
- &--active {
206
- opacity: 1;
207
- pointer-events: all;
208
- max-height: 1000px;
209
- &[data-layout='3'] {
210
- width: fit-content;
211
- }
212
- }
213
- }
214
- &__filter-subcategory-list-item {
215
- margin: 0;
216
- justify-content: center;
217
- &--active {
218
- opacity: 1;
219
- pointer-events: all;
220
- }
221
- }
222
- &__show-all {
223
- place-self: center;
224
- }
225
- }
226
- }
227
- &[data-layout='4'] {
228
- @media all and (max-width: breakpoints.$tabLandscape - 1) {
229
- .post-type-filter-grid-v3 {
230
- &__filter-container--open {
231
- background-color: var(
232
- --filter-background-colour-mobile
233
- );
234
- position: fixed;
235
- top: 0;
236
- left: 0;
237
- width: 100%;
238
- height: 100%;
239
- justify-content: flex-start;
240
- z-index: 9;
241
- }
242
- &__filter-categories {
243
- display: flex;
244
- flex-direction: column;
245
- justify-content: flex-start;
246
- }
247
- &__filter-update-button {
248
- position: absolute;
249
- width: 100%;
250
- bottom: 0;
251
- left: 0;
252
- z-index: 99999;
253
- }
254
- &__filter-category.active {
255
- background-color: var(
256
- --filter-background-colour-mobile
257
- );
258
- width: 100%;
259
- top: 0;
260
- left: 0;
261
- position: absolute;
262
- height: 100%;
263
- z-index: 99999;
264
- justify-content: flex-start;
265
- }
266
- }
267
- }
268
- @include core-mixins-v3.device(breakpoints.$tabLandscape) {
269
- .post-type-filter-grid-v3 {
270
- &__filter-update-button {
271
- display: none;
272
- }
273
- &__filter-container {
274
- overflow: visible;
275
- }
276
- &__filter-categories {
277
- display: flex;
278
- flex-direction: row;
279
- justify-content: center;
280
- }
281
- &__filter-categories-label {
282
- @include core-mixins-v3.device(
283
- breakpoints.$tabLandscape
284
- ) {
285
- display: none;
286
- }
287
- }
288
- &__cta {
289
- min-width: core-functions-v3.fluidSize(230, 'desktop');
290
- width: auto;
291
- &:hover {
292
- background-color: unset;
293
- color: unset;
294
- }
295
- }
296
- &__filter-subcategory-list {
297
- display: none;
298
- }
299
- &__cta.active {
300
- .post-type-filter-grid-v3__filter-subcategory-list {
301
- display: flex;
302
- position: absolute;
303
- background-color: var(--filter-background-colour);
304
- width: auto;
305
- flex-direction: column;
306
- top: core-functions-v3.fluidSize(60, 'desktop');
307
- }
308
- }
309
- }
310
- }
311
- }
312
84
  }
313
85
 
314
86
  &__filter-container {
@@ -322,8 +94,7 @@
322
94
  height: auto;
323
95
  background-color: transparent;
324
96
 
325
- &[data-layout='2'],
326
- &[data-layout='5'] {
97
+ &[data-layout='2'] {
327
98
  display: flex;
328
99
  gap: core-functions-v3.fluidSize(20, 'desktop');
329
100
  grid-auto-flow: column;
@@ -334,15 +105,6 @@
334
105
  max-width: 100%;
335
106
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
336
107
  }
337
- &[data-layout='5'] {
338
- grid-auto-flow: unset;
339
- @include core-mixins-v3.device(breakpoints.$tabPortrait) {
340
- grid-auto-flow: column;
341
- }
342
- @include core-mixins-v3.device(breakpoints.$tabLandscape) {
343
- grid-auto-flow: column;
344
- }
345
- }
346
108
  }
347
109
 
348
110
  &--open {
@@ -404,8 +166,7 @@
404
166
  padding-bottom: var(--global-inline-spacing);
405
167
  width: 100%;
406
168
 
407
- &[data-layout='2'],
408
- &[data-layout='5'] {
169
+ &[data-layout='2'] {
409
170
  padding-bottom: unset;
410
171
  }
411
172
 
@@ -414,8 +175,7 @@
414
175
  position: relative;
415
176
  gap: core-functions-v3.fluidSize(20, 'portrait');
416
177
 
417
- &[data-layout='2'],
418
- &[data-layout='5'] {
178
+ &[data-layout='2'] {
419
179
  grid-auto-flow: column;
420
180
  grid-auto-columns: 1fr;
421
181
  width: max-content;
@@ -445,18 +205,6 @@
445
205
  }
446
206
 
447
207
  &__filter-subcategory-list {
448
- &[data-layout='5'] {
449
- flex-direction: column;
450
- margin: unset;
451
- @include core-mixins-v3.device(breakpoints.$tabPortrait) {
452
- flex-direction: unset;
453
- margin: auto;
454
- }
455
- @include core-mixins-v3.device(breakpoints.$tabLandscape) {
456
- flex-direction: unset;
457
- margin: auto;
458
- }
459
- }
460
208
  list-style-type: none;
461
209
  display: flex;
462
210
  flex-wrap: wrap;
@@ -497,17 +245,7 @@
497
245
  width: initial;
498
246
  }
499
247
 
500
- &[data-layout='2'],
501
- &[data-layout='5'] {
502
- margin: unset;
503
- @include core-mixins-v3.device(breakpoints.$tabPortrait) {
504
- margin: auto;
505
- }
506
- @include core-mixins-v3.device(breakpoints.$tabLandscape) {
507
- margin: auto;
508
- }
509
- }
510
- &[data-layout='5'] {
248
+ &[data-layout='2'] {
511
249
  margin: unset;
512
250
  @include core-mixins-v3.device(breakpoints.$tabPortrait) {
513
251
  margin: auto;
@@ -705,31 +443,6 @@
705
443
  }
706
444
  }
707
445
 
708
- &__overlay {
709
- inset: 0;
710
- z-index: 1;
711
- grid-row: var(--gradient-overlay-row-start, 1) /
712
- var(--gradient-overlay-row-end, -1);
713
-
714
- &--gradient-overlay-top,
715
- &--gradient-overlay-right,
716
- &--gradient-overlay-bottom,
717
- &--gradient-overlay-left {
718
- // @include core-gradient-designer.gradientDesigner();
719
- position: absolute;
720
- }
721
-
722
- &--gradient-overlay-vertical {
723
- // @include core-gradient-designer.gradientDesignerVertical();
724
- position: absolute;
725
- }
726
-
727
- &--gradient-overlay-horizontal {
728
- // @include core-gradient-designer.gradientDesignerHorizontal();
729
- position: absolute;
730
- }
731
- }
732
-
733
446
  &__post-image-container-link {
734
447
  display: grid;
735
448
  grid-template: 'main' / 1fr;
@@ -767,7 +480,6 @@
767
480
  &:not(.post-type-filter-grid-v3__post-link, .post-type-filter-grid-v3__product-buy-now, .post-type-filter-grid-v3__post-image-container-link, .post-type-filter-grid-v3__post-tags, .post-type-filter-grid-v3__shopify) {
768
481
  * {
769
482
  width: 100%;
770
- // @include core-mixins-v3.textStyle();
771
483
  }
772
484
  }
773
485
  }
@@ -847,7 +559,6 @@
847
559
  }
848
560
  &__post-headline {
849
561
  width: 100%;
850
- // @include core-mixins-v3.textStyle();
851
562
  }
852
563
  &__post-title-icon {
853
564
  width: 1em;
@@ -945,11 +656,6 @@
945
656
  }
946
657
  }
947
658
  }
948
- &__product-c7-add-to-cart {
949
- display: flex;
950
- align-items: flex-end;
951
- z-index: 2;
952
- }
953
659
 
954
660
  &__post-tags {
955
661
  display: flex;
@@ -959,26 +665,6 @@
959
665
  z-index: 2;
960
666
  }
961
667
 
962
- &__person-email {
963
- display: flex;
964
- gap: 1em;
965
- align-items: center;
966
- }
967
- &__person-email-icon {
968
- width: 1em;
969
- }
970
- &__person-rating-star-container {
971
- display: flex;
972
- --rating-star-colour: #f8b94c;
973
- padding: core-functions-v3.fluidSize(10, 'static');
974
- }
975
- &__person-rating-star {
976
- width: core-functions-v3.fluidSize(20, 'static');
977
- }
978
- &__person-rating-star * {
979
- fill: var(--rating-star-colour);
980
- }
981
-
982
668
  &__load-more-container {
983
669
  grid-area: loadmore;
984
670
  width: 100%;
@@ -1032,10 +718,6 @@
1032
718
  }
1033
719
 
1034
720
  &__show-all {
1035
- &[data-layout='5'] {
1036
- text-align: left;
1037
- justify-content: flex-start;
1038
- }
1039
721
  z-index: 2;
1040
722
  position: relative;
1041
723
  width: auto;
@@ -1049,8 +731,7 @@
1049
731
  }
1050
732
 
1051
733
  @include core-mixins-v3.device(breakpoints.$tabLandscape) {
1052
- &[data-layout='2'],
1053
- &[data-layout='5'] {
734
+ &[data-layout='2'] {
1054
735
  grid-column: 1;
1055
736
  width: max-content;
1056
737
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@total_onion/onion-library",
3
- "version": "2.0.113",
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;