@chinggis.systems/collection-ui 1.0.0 → 1.0.1
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/README.md +21 -36
- package/dist/CollectionRenderer.d.ts +2 -2
- package/dist/CollectionRenderer.d.ts.map +1 -1
- package/dist/CollectionRenderer.js +305 -292
- package/dist/CollectionRenderer.js.map +1 -1
- package/dist/CollectionView.d.ts +13 -0
- package/dist/CollectionView.d.ts.map +1 -0
- package/dist/CollectionView.js +42 -0
- package/dist/CollectionView.js.map +1 -0
- package/dist/assets/spine/BurnBlend.png +0 -0
- package/dist/assets/spine/FlatEdges.webp +0 -0
- package/dist/assets/spine/FlatShadow.webp +0 -0
- package/dist/assets/spine/NormalBlend.webp +0 -0
- package/dist/assets/spine/SoftLightBlend.webp +0 -0
- package/dist/collectionV2Model.d.ts +43 -0
- package/dist/collectionV2Model.d.ts.map +1 -0
- package/dist/collectionV2Model.js +4 -0
- package/dist/collectionV2Model.js.map +1 -0
- package/dist/createAdapters.d.ts +66 -74
- package/dist/createAdapters.d.ts.map +1 -1
- package/dist/createAdapters.js +223 -223
- package/dist/createAdapters.js.map +1 -1
- package/dist/defaultAdapters.d.ts +7 -7
- package/dist/defaultAdapters.js +8 -8
- package/dist/index.d.ts +14 -11
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +7 -6
- package/dist/index.js.map +1 -1
- package/dist/layoutPresets.d.ts +18 -18
- package/dist/layoutPresets.js +129 -129
- package/dist/primitives/BookSpine.d.ts +11 -11
- package/dist/primitives/BookSpine.js +10 -10
- package/dist/primitives/CollectionCarousel.d.ts +3 -3
- package/dist/primitives/CollectionCarousel.d.ts.map +1 -1
- package/dist/primitives/CollectionCarousel.js +22 -13
- package/dist/primitives/CollectionCarousel.js.map +1 -1
- package/dist/styles.css +236 -51
- package/dist/types.d.ts +141 -141
- package/dist/types.js +1 -1
- package/dist/utils.d.ts +8 -8
- package/dist/utils.js +26 -26
- package/package.json +1 -1
package/dist/styles.css
CHANGED
|
@@ -3,19 +3,31 @@
|
|
|
3
3
|
|
|
4
4
|
.collection-ui {
|
|
5
5
|
--collection-ui-bg: transparent;
|
|
6
|
-
--collection-ui-band-bg: rgb(0 0 0 / 4%);
|
|
6
|
+
--collection-ui-band-bg: var(--color-fg-alt, rgb(0 0 0 / 4%));
|
|
7
7
|
--collection-ui-card-bg: transparent;
|
|
8
|
-
--collection-ui-fg: inherit;
|
|
9
|
-
--collection-ui-muted: color-mix(in srgb, currentColor 62%, transparent);
|
|
10
|
-
--collection-ui-link: #0f79d0;
|
|
11
|
-
--collection-ui-button-bg: #
|
|
12
|
-
--collection-ui-button-fg: #
|
|
13
|
-
--collection-ui-special-bg: rgb(0 0 0 / 4%);
|
|
8
|
+
--collection-ui-fg: var(--color-t-default, inherit);
|
|
9
|
+
--collection-ui-muted: var(--color-t-muted, color-mix(in srgb, currentColor 62%, transparent));
|
|
10
|
+
--collection-ui-link: var(--color-link, #0f79d0);
|
|
11
|
+
--collection-ui-button-bg: #f6a0a8;
|
|
12
|
+
--collection-ui-button-fg: #151515;
|
|
13
|
+
--collection-ui-special-bg: var(--color-fg-alt, rgb(0 0 0 / 4%));
|
|
14
14
|
--collection-ui-special-panel: transparent;
|
|
15
15
|
color: var(--collection-ui-fg);
|
|
16
16
|
min-width: 0;
|
|
17
17
|
}
|
|
18
18
|
|
|
19
|
+
.collection-ui--ecommerce {
|
|
20
|
+
--collection-ui-bg: var(--color-bg-default, #181818);
|
|
21
|
+
--collection-ui-band-bg: var(--color-fg-alt, #121212);
|
|
22
|
+
--collection-ui-fg: var(--color-t-default, #fff);
|
|
23
|
+
--collection-ui-muted: var(--color-t-muted, #aaa);
|
|
24
|
+
--collection-ui-link: var(--color-link, #38bdf8);
|
|
25
|
+
--collection-ui-button-bg: #f6a0a8;
|
|
26
|
+
--collection-ui-button-fg: #151515;
|
|
27
|
+
--collection-ui-special-bg: var(--color-fg-alt, #121212);
|
|
28
|
+
--collection-ui-special-panel: transparent;
|
|
29
|
+
}
|
|
30
|
+
|
|
19
31
|
.collection-ui--dark {
|
|
20
32
|
--collection-ui-bg: #141515;
|
|
21
33
|
--collection-ui-band-bg: #141515;
|
|
@@ -55,20 +67,23 @@
|
|
|
55
67
|
|
|
56
68
|
.collection-ui-container {
|
|
57
69
|
margin-inline: auto;
|
|
58
|
-
max-width:
|
|
70
|
+
max-width: 1120px;
|
|
71
|
+
min-width: 0;
|
|
59
72
|
padding-inline: 16px;
|
|
60
73
|
width: 100%;
|
|
61
74
|
}
|
|
62
75
|
|
|
63
76
|
.collection-ui-container--wide {
|
|
64
|
-
max-width:
|
|
77
|
+
max-width: 1536px;
|
|
78
|
+
padding-left: 16px;
|
|
79
|
+
padding-right: 16px;
|
|
65
80
|
}
|
|
66
81
|
|
|
67
82
|
.collection-ui-title {
|
|
68
83
|
display: flex;
|
|
69
84
|
flex-direction: column;
|
|
70
|
-
gap:
|
|
71
|
-
margin-bottom:
|
|
85
|
+
gap: 0;
|
|
86
|
+
margin-bottom: 4px;
|
|
72
87
|
}
|
|
73
88
|
|
|
74
89
|
.collection-ui-title__row {
|
|
@@ -78,9 +93,36 @@
|
|
|
78
93
|
justify-content: space-between;
|
|
79
94
|
}
|
|
80
95
|
|
|
96
|
+
.collection-ui-title__actions {
|
|
97
|
+
align-items: center;
|
|
98
|
+
display: flex;
|
|
99
|
+
flex-shrink: 0;
|
|
100
|
+
gap: 16px;
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
.collection-ui-title__controls {
|
|
104
|
+
align-items: center;
|
|
105
|
+
display: none;
|
|
106
|
+
gap: 4px;
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
.collection-ui-title__controls button {
|
|
110
|
+
align-items: center;
|
|
111
|
+
background: var(--color-fg-main, transparent);
|
|
112
|
+
border: 2px solid var(--color-border-main, rgb(255 255 255 / 12%));
|
|
113
|
+
border-radius: 4px;
|
|
114
|
+
color: inherit;
|
|
115
|
+
cursor: pointer;
|
|
116
|
+
display: inline-flex;
|
|
117
|
+
font: inherit;
|
|
118
|
+
height: 32px;
|
|
119
|
+
justify-content: center;
|
|
120
|
+
width: 32px;
|
|
121
|
+
}
|
|
122
|
+
|
|
81
123
|
.collection-ui-title__heading {
|
|
82
124
|
font-size: 1.125rem;
|
|
83
|
-
font-weight:
|
|
125
|
+
font-weight: 500;
|
|
84
126
|
line-height: 1.35;
|
|
85
127
|
margin: 0;
|
|
86
128
|
}
|
|
@@ -93,17 +135,31 @@
|
|
|
93
135
|
|
|
94
136
|
.collection-ui-title__description {
|
|
95
137
|
color: var(--collection-ui-muted);
|
|
96
|
-
font-size: 0.
|
|
138
|
+
font-size: 0.75rem;
|
|
97
139
|
line-height: 1.45;
|
|
98
140
|
margin: 0;
|
|
99
141
|
}
|
|
100
142
|
|
|
101
|
-
.collection-ui-title__link,
|
|
102
|
-
.collection-ui-featured-card__link {
|
|
143
|
+
.collection-ui .collection-ui-title__link,
|
|
144
|
+
.collection-ui .collection-ui-featured-card__link {
|
|
103
145
|
color: var(--collection-ui-link);
|
|
104
146
|
flex-shrink: 0;
|
|
105
147
|
font-size: 0.875rem;
|
|
106
|
-
font-weight:
|
|
148
|
+
font-weight: 400;
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
.collection-ui-title__link {
|
|
152
|
+
display: none;
|
|
153
|
+
}
|
|
154
|
+
|
|
155
|
+
.collection-ui-horizontal .collection-ui-title__link {
|
|
156
|
+
display: block;
|
|
157
|
+
}
|
|
158
|
+
|
|
159
|
+
.collection-ui-horizontal,
|
|
160
|
+
.collection-ui-grid {
|
|
161
|
+
min-width: 0;
|
|
162
|
+
position: relative;
|
|
107
163
|
}
|
|
108
164
|
|
|
109
165
|
.collection-ui-scroll {
|
|
@@ -129,12 +185,12 @@
|
|
|
129
185
|
.collection-ui-carousel__track {
|
|
130
186
|
margin-inline: -16px;
|
|
131
187
|
overflow: hidden;
|
|
132
|
-
padding
|
|
188
|
+
padding: 4px 16px 0;
|
|
133
189
|
}
|
|
134
190
|
|
|
135
191
|
.collection-ui-carousel__slide {
|
|
136
192
|
height: auto;
|
|
137
|
-
padding-top:
|
|
193
|
+
padding-top: 12px;
|
|
138
194
|
width: max-content;
|
|
139
195
|
}
|
|
140
196
|
|
|
@@ -169,33 +225,86 @@
|
|
|
169
225
|
align-items: center;
|
|
170
226
|
background: linear-gradient(135deg, #1f2937, #111827);
|
|
171
227
|
border: 1px solid rgb(255 255 255 / 12%);
|
|
172
|
-
border-radius:
|
|
173
|
-
color:
|
|
228
|
+
border-radius: 2px;
|
|
229
|
+
color: rgb(212 212 212);
|
|
174
230
|
display: flex;
|
|
175
231
|
flex-direction: column;
|
|
176
|
-
|
|
232
|
+
font-size: 0.875rem;
|
|
233
|
+
font-weight: 500;
|
|
177
234
|
height: 266px;
|
|
178
235
|
justify-content: center;
|
|
236
|
+
overflow: hidden;
|
|
179
237
|
padding: 24px;
|
|
238
|
+
position: relative;
|
|
239
|
+
transition: border-color 300ms ease, color 300ms ease;
|
|
180
240
|
width: 180px;
|
|
181
241
|
}
|
|
182
242
|
|
|
243
|
+
.collection-ui-view-all:hover {
|
|
244
|
+
border-color: rgb(255 255 255 / 20%);
|
|
245
|
+
color: white;
|
|
246
|
+
}
|
|
247
|
+
|
|
248
|
+
.collection-ui-view-all::before {
|
|
249
|
+
background: linear-gradient(135deg, rgb(14 165 233 / 10%), rgb(168 85 247 / 10%));
|
|
250
|
+
content: "";
|
|
251
|
+
filter: blur(16px);
|
|
252
|
+
inset: 0;
|
|
253
|
+
opacity: 0;
|
|
254
|
+
position: absolute;
|
|
255
|
+
transition: opacity 500ms ease;
|
|
256
|
+
}
|
|
257
|
+
|
|
258
|
+
.collection-ui-view-all:hover::before {
|
|
259
|
+
opacity: 1;
|
|
260
|
+
}
|
|
261
|
+
|
|
183
262
|
.collection-ui-view-all__icon {
|
|
184
263
|
align-items: center;
|
|
185
|
-
background: rgb(
|
|
264
|
+
background: rgb(38 38 38);
|
|
186
265
|
border-radius: 999px;
|
|
266
|
+
color: rgb(56 189 248);
|
|
187
267
|
display: inline-flex;
|
|
188
268
|
font-size: 1.5rem;
|
|
189
269
|
height: 56px;
|
|
190
270
|
justify-content: center;
|
|
271
|
+
margin-bottom: 16px;
|
|
272
|
+
position: relative;
|
|
273
|
+
transition: background-color 300ms ease, transform 200ms ease;
|
|
191
274
|
width: 56px;
|
|
192
275
|
}
|
|
193
276
|
|
|
277
|
+
.collection-ui-view-all:hover .collection-ui-view-all__icon {
|
|
278
|
+
background: rgb(14 165 233 / 20%);
|
|
279
|
+
transform: translateX(4px);
|
|
280
|
+
}
|
|
281
|
+
|
|
194
282
|
.collection-ui-vertical__grid {
|
|
195
283
|
display: grid;
|
|
196
284
|
gap: 16px;
|
|
197
285
|
}
|
|
198
286
|
|
|
287
|
+
.collection-ui-grid__items {
|
|
288
|
+
display: grid;
|
|
289
|
+
gap: 32px 16px;
|
|
290
|
+
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
291
|
+
padding-top: 16px;
|
|
292
|
+
}
|
|
293
|
+
|
|
294
|
+
.collection-ui-grid__item {
|
|
295
|
+
min-width: 0;
|
|
296
|
+
}
|
|
297
|
+
|
|
298
|
+
.collection-ui-grid__item .collection-ui-card,
|
|
299
|
+
.collection-ui-grid__view-all {
|
|
300
|
+
width: 100%;
|
|
301
|
+
}
|
|
302
|
+
|
|
303
|
+
.collection-ui-grid__item .collection-ui-card__media,
|
|
304
|
+
.collection-ui-grid__view-all {
|
|
305
|
+
min-height: 168px;
|
|
306
|
+
}
|
|
307
|
+
|
|
199
308
|
.collection-ui-item {
|
|
200
309
|
align-items: flex-start;
|
|
201
310
|
display: flex;
|
|
@@ -244,21 +353,21 @@
|
|
|
244
353
|
flex-direction: column;
|
|
245
354
|
height: 100%;
|
|
246
355
|
justify-content: flex-end;
|
|
247
|
-
width:
|
|
356
|
+
width: 112px;
|
|
248
357
|
}
|
|
249
358
|
|
|
250
359
|
.collection-ui-card__media {
|
|
251
360
|
align-items: flex-end;
|
|
252
361
|
display: flex;
|
|
253
362
|
justify-content: center;
|
|
254
|
-
min-height:
|
|
363
|
+
min-height: 144px;
|
|
255
364
|
}
|
|
256
365
|
|
|
257
366
|
.collection-ui-card__body {
|
|
258
367
|
display: flex;
|
|
259
|
-
gap:
|
|
260
|
-
min-height:
|
|
261
|
-
padding-top:
|
|
368
|
+
gap: 8px;
|
|
369
|
+
min-height: 80px;
|
|
370
|
+
padding-top: 6px;
|
|
262
371
|
}
|
|
263
372
|
|
|
264
373
|
.collection-ui-card__rank,
|
|
@@ -272,7 +381,7 @@
|
|
|
272
381
|
.collection-ui-row-item__title {
|
|
273
382
|
color: var(--collection-ui-link);
|
|
274
383
|
display: -webkit-box;
|
|
275
|
-
font-size: 0.
|
|
384
|
+
font-size: 0.75rem;
|
|
276
385
|
font-weight: 500;
|
|
277
386
|
line-height: 1.2;
|
|
278
387
|
margin: 0 0 4px;
|
|
@@ -285,7 +394,7 @@
|
|
|
285
394
|
.collection-ui-row-item__author {
|
|
286
395
|
color: var(--collection-ui-muted);
|
|
287
396
|
display: -webkit-box;
|
|
288
|
-
font-size: 0.
|
|
397
|
+
font-size: 0.6875rem;
|
|
289
398
|
line-height: 1.35;
|
|
290
399
|
margin: 0;
|
|
291
400
|
overflow: hidden;
|
|
@@ -440,7 +549,8 @@
|
|
|
440
549
|
align-items: center;
|
|
441
550
|
display: flex;
|
|
442
551
|
flex-wrap: wrap;
|
|
443
|
-
font-
|
|
552
|
+
font-size: 0.75rem;
|
|
553
|
+
font-weight: 500;
|
|
444
554
|
gap: 4px;
|
|
445
555
|
margin-top: 8px;
|
|
446
556
|
}
|
|
@@ -488,6 +598,7 @@
|
|
|
488
598
|
align-items: flex-start;
|
|
489
599
|
display: flex;
|
|
490
600
|
gap: 24px;
|
|
601
|
+
max-width: 420px;
|
|
491
602
|
}
|
|
492
603
|
|
|
493
604
|
.collection-ui-row-item__media {
|
|
@@ -504,9 +615,9 @@
|
|
|
504
615
|
align-items: center;
|
|
505
616
|
background: var(--collection-ui-special-panel);
|
|
506
617
|
display: grid;
|
|
507
|
-
gap:
|
|
618
|
+
gap: 24px;
|
|
508
619
|
justify-items: center;
|
|
509
|
-
padding:
|
|
620
|
+
padding: 0;
|
|
510
621
|
width: 100%;
|
|
511
622
|
}
|
|
512
623
|
|
|
@@ -533,7 +644,7 @@
|
|
|
533
644
|
|
|
534
645
|
.collection-ui-special-item__content h3 {
|
|
535
646
|
font-size: 1.5rem;
|
|
536
|
-
font-weight:
|
|
647
|
+
font-weight: 500;
|
|
537
648
|
line-height: 1.25;
|
|
538
649
|
margin: 0 0 16px;
|
|
539
650
|
text-align: center;
|
|
@@ -579,34 +690,35 @@
|
|
|
579
690
|
.collection-ui-banner {
|
|
580
691
|
align-items: center;
|
|
581
692
|
display: grid;
|
|
582
|
-
gap:
|
|
693
|
+
gap: 0;
|
|
583
694
|
grid-template-columns: 1fr;
|
|
584
695
|
}
|
|
585
696
|
|
|
586
697
|
.collection-ui-banner__copy {
|
|
587
|
-
padding
|
|
698
|
+
padding: 16px;
|
|
588
699
|
}
|
|
589
700
|
|
|
590
701
|
.collection-ui-banner__eyebrow {
|
|
591
702
|
border-bottom: 2px solid currentColor;
|
|
592
703
|
display: inline-block;
|
|
593
|
-
font-size:
|
|
594
|
-
font-weight:
|
|
704
|
+
font-size: 1.125rem;
|
|
705
|
+
font-weight: 500;
|
|
595
706
|
margin-bottom: 24px;
|
|
596
707
|
padding-bottom: 4px;
|
|
597
708
|
}
|
|
598
709
|
|
|
599
710
|
.collection-ui-banner__title {
|
|
600
|
-
font-size: clamp(1.5rem, 2vw, 2.
|
|
601
|
-
font-weight:
|
|
711
|
+
font-size: clamp(1.5rem, 2vw, 2.25rem);
|
|
712
|
+
font-weight: 500;
|
|
602
713
|
line-height: 1.15;
|
|
603
714
|
margin: 0 0 16px;
|
|
604
715
|
}
|
|
605
716
|
|
|
606
717
|
.collection-ui-banner__description {
|
|
607
|
-
font-size:
|
|
608
|
-
line-height: 1.
|
|
718
|
+
font-size: 0.875rem;
|
|
719
|
+
line-height: 1.55;
|
|
609
720
|
margin: 0;
|
|
721
|
+
text-align: justify;
|
|
610
722
|
}
|
|
611
723
|
|
|
612
724
|
.collection-ui-banner__image,
|
|
@@ -621,14 +733,28 @@
|
|
|
621
733
|
.collection-ui-button {
|
|
622
734
|
align-items: center;
|
|
623
735
|
background: var(--collection-ui-button-bg);
|
|
624
|
-
border-radius:
|
|
736
|
+
border-radius: 8px;
|
|
625
737
|
color: var(--collection-ui-button-fg);
|
|
626
738
|
display: inline-flex;
|
|
627
|
-
font-weight:
|
|
739
|
+
font-weight: 500;
|
|
628
740
|
justify-content: center;
|
|
629
|
-
margin-
|
|
630
|
-
|
|
631
|
-
|
|
741
|
+
margin-bottom: 32px;
|
|
742
|
+
margin-top: 16px;
|
|
743
|
+
min-height: 48px;
|
|
744
|
+
min-width: 152px;
|
|
745
|
+
padding: 10px 32px;
|
|
746
|
+
text-align: center;
|
|
747
|
+
transition: background-color 160ms ease, transform 160ms ease;
|
|
748
|
+
white-space: nowrap;
|
|
749
|
+
}
|
|
750
|
+
|
|
751
|
+
.collection-ui-button:hover {
|
|
752
|
+
transform: scale(1.04);
|
|
753
|
+
}
|
|
754
|
+
|
|
755
|
+
.collection-ui-button::after {
|
|
756
|
+
content: "→";
|
|
757
|
+
margin-left: 0.5rem;
|
|
632
758
|
}
|
|
633
759
|
|
|
634
760
|
.collection-ui-special {
|
|
@@ -647,12 +773,12 @@
|
|
|
647
773
|
}
|
|
648
774
|
|
|
649
775
|
.collection-ui-featured-card__body {
|
|
650
|
-
padding
|
|
776
|
+
padding: 16px 0 0;
|
|
651
777
|
}
|
|
652
778
|
|
|
653
779
|
.collection-ui-featured-card__title {
|
|
654
780
|
font-size: 1.125rem;
|
|
655
|
-
font-weight:
|
|
781
|
+
font-weight: 500;
|
|
656
782
|
line-height: 1.35;
|
|
657
783
|
margin: 0 0 10px;
|
|
658
784
|
}
|
|
@@ -667,14 +793,32 @@
|
|
|
667
793
|
text-align: center;
|
|
668
794
|
}
|
|
669
795
|
|
|
796
|
+
.collection-ui-image-grid .collection-ui-title {
|
|
797
|
+
align-items: center;
|
|
798
|
+
gap: 4px;
|
|
799
|
+
margin-bottom: 40px;
|
|
800
|
+
}
|
|
801
|
+
|
|
670
802
|
.collection-ui-image-grid .collection-ui-title__row {
|
|
671
803
|
justify-content: center;
|
|
672
804
|
}
|
|
673
805
|
|
|
806
|
+
.collection-ui-image-grid .collection-ui-title__heading {
|
|
807
|
+
font-size: 1.5rem;
|
|
808
|
+
font-weight: 400;
|
|
809
|
+
}
|
|
810
|
+
|
|
811
|
+
.collection-ui-image-grid .collection-ui-title__description {
|
|
812
|
+
color: var(--collection-ui-fg);
|
|
813
|
+
font-size: 1rem;
|
|
814
|
+
font-style: italic;
|
|
815
|
+
font-weight: 300;
|
|
816
|
+
}
|
|
817
|
+
|
|
674
818
|
.collection-ui-image-grid__items {
|
|
675
819
|
align-items: center;
|
|
676
820
|
display: grid;
|
|
677
|
-
gap:
|
|
821
|
+
gap: 28px;
|
|
678
822
|
grid-template-columns: repeat(var(--collection-ui-columns, 2), minmax(0, 1fr));
|
|
679
823
|
justify-content: center;
|
|
680
824
|
margin-top: 32px;
|
|
@@ -693,6 +837,15 @@
|
|
|
693
837
|
object-fit: cover;
|
|
694
838
|
}
|
|
695
839
|
|
|
840
|
+
.collection-ui-image-grid--circle .collection-ui-image-grid__image {
|
|
841
|
+
height: 128px;
|
|
842
|
+
width: 128px;
|
|
843
|
+
}
|
|
844
|
+
|
|
845
|
+
.collection-ui-image-grid--block .collection-ui-image-grid__image {
|
|
846
|
+
max-height: 96px;
|
|
847
|
+
}
|
|
848
|
+
|
|
696
849
|
.collection-ui-image-grid__image--circle {
|
|
697
850
|
aspect-ratio: 1;
|
|
698
851
|
border-radius: 999px;
|
|
@@ -713,10 +866,18 @@
|
|
|
713
866
|
}
|
|
714
867
|
|
|
715
868
|
@media (min-width: 768px) {
|
|
869
|
+
.collection-ui-title__controls {
|
|
870
|
+
display: flex;
|
|
871
|
+
}
|
|
872
|
+
|
|
716
873
|
.collection-ui-container {
|
|
717
874
|
padding-inline: 24px;
|
|
718
875
|
}
|
|
719
876
|
|
|
877
|
+
.collection-ui-grid__items {
|
|
878
|
+
grid-template-columns: repeat(4, minmax(0, 1fr));
|
|
879
|
+
}
|
|
880
|
+
|
|
720
881
|
.collection-ui-vertical__grid {
|
|
721
882
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
722
883
|
}
|
|
@@ -726,7 +887,22 @@
|
|
|
726
887
|
}
|
|
727
888
|
|
|
728
889
|
.collection-ui-banner {
|
|
729
|
-
grid-template-columns:
|
|
890
|
+
grid-template-columns: repeat(12, minmax(0, 1fr));
|
|
891
|
+
padding: 16px;
|
|
892
|
+
}
|
|
893
|
+
|
|
894
|
+
.collection-ui-banner__copy {
|
|
895
|
+
grid-column: span 4 / span 4;
|
|
896
|
+
padding: 0 32px 24px 0;
|
|
897
|
+
}
|
|
898
|
+
|
|
899
|
+
.collection-ui-banner > a {
|
|
900
|
+
display: block;
|
|
901
|
+
grid-column: span 8 / span 8;
|
|
902
|
+
}
|
|
903
|
+
|
|
904
|
+
.collection-ui-banner__eyebrow {
|
|
905
|
+
font-size: 0.875rem;
|
|
730
906
|
}
|
|
731
907
|
|
|
732
908
|
.collection-ui-featured {
|
|
@@ -748,7 +924,7 @@
|
|
|
748
924
|
}
|
|
749
925
|
|
|
750
926
|
.collection-ui-special-item {
|
|
751
|
-
grid-template-columns: minmax(
|
|
927
|
+
grid-template-columns: minmax(160px, 0.28fr) minmax(0, 0.52fr) minmax(156px, 0.2fr);
|
|
752
928
|
justify-items: stretch;
|
|
753
929
|
}
|
|
754
930
|
|
|
@@ -761,12 +937,21 @@
|
|
|
761
937
|
flex-wrap: wrap;
|
|
762
938
|
}
|
|
763
939
|
|
|
940
|
+
.collection-ui-image-grid--circle .collection-ui-image-grid__items {
|
|
941
|
+
flex-wrap: nowrap;
|
|
942
|
+
gap: clamp(24px, 4vw, 56px);
|
|
943
|
+
}
|
|
944
|
+
|
|
764
945
|
.collection-ui-image-grid--block .collection-ui-image-grid__items {
|
|
765
946
|
gap: 16px;
|
|
766
947
|
}
|
|
767
948
|
}
|
|
768
949
|
|
|
769
950
|
@media (min-width: 1200px) {
|
|
951
|
+
.collection-ui-grid__items {
|
|
952
|
+
grid-template-columns: repeat(5, minmax(0, 1fr));
|
|
953
|
+
}
|
|
954
|
+
|
|
770
955
|
.collection-ui-vertical__grid {
|
|
771
956
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
772
957
|
}
|