@fast-simon/shopify-hydrogen 1.0.2 → 1.0.4

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.
@@ -0,0 +1,622 @@
1
+ .fast-simon-serp {
2
+ font-family: Trebuchet MS, Helvetica, "Helvetica Neue", Arial, "Lucida Grande", sans-serif;
3
+ }
4
+
5
+ .fs-grid {
6
+ display: grid;
7
+ }
8
+
9
+ .fs-product-card {
10
+ height: 100%;
11
+ display: flex;
12
+ flex-direction: column;
13
+ flex-wrap: nowrap;
14
+ justify-content: space-between;
15
+ }
16
+
17
+ .fs-product-card-img {
18
+ width: 100%;
19
+ height: 100%;
20
+ image-rendering: -webkit-optimize-contrast;
21
+ }
22
+
23
+ .fs-product-card-compare {
24
+ text-decoration: line-through;
25
+ }
26
+
27
+ .fs-product-card-title {
28
+ -webkit-box-orient: vertical;
29
+ display: -webkit-box;
30
+ overflow: hidden;
31
+ text-decoration: none;
32
+ }
33
+
34
+ .fs-page-title {
35
+ font-size: 24px;
36
+ font-family: inherit;
37
+ color: #e40800;
38
+ font-weight: bold;
39
+ margin-bottom: 15px;
40
+ }
41
+
42
+ #mainContent header.grid {
43
+ display: none;
44
+ }
45
+
46
+ .fs-product-card-info {
47
+ padding: 5px;
48
+ display: flex;
49
+ align-items: center;
50
+ flex-direction: column;
51
+ }
52
+
53
+ .fs-summary {
54
+ font-size: 15px;
55
+ font-weight: 500;
56
+ margin-right: 15px;
57
+ }
58
+
59
+ .fs-filters-grid {
60
+ display: grid;
61
+ grid-template-columns: 15% 85%;
62
+ grid-column-gap: 2%;
63
+ }
64
+
65
+ .fs-facet-container {
66
+ display: flex;
67
+ flex-direction: column;
68
+ }
69
+
70
+ .fs-facet-options {
71
+ display: flex;
72
+ flex-direction: column;
73
+ padding: 5px 15px;
74
+ max-height: 230px;
75
+ overflow: auto;
76
+ }
77
+
78
+ .fs-facet-option {
79
+ display: flex;
80
+ align-items: center;
81
+ justify-content: space-between;
82
+ font-family: inherit;
83
+ font-size: 14px;
84
+ }
85
+
86
+ .fs-facet-title {
87
+ padding-left: 20px;
88
+ border-radius: 10px;
89
+ background-color: #d00202;
90
+ color: white;
91
+ font-weight: 400;
92
+ font-size: 18px;
93
+ font-family: inherit;
94
+ text-align: left;
95
+ display: flex;
96
+ justify-content: space-between;
97
+ padding-top: 10px;
98
+ padding-bottom: 6px;
99
+ cursor: pointer;
100
+ margin-bottom: 6px;
101
+ width: 100%;
102
+ }
103
+
104
+ .fs-filters {
105
+ display: flex;
106
+ flex-direction: column;
107
+ }
108
+
109
+ .fs-sort-filters-button-wrapper {
110
+ padding-bottom: 10px;
111
+ }
112
+
113
+ @keyframes growDown {
114
+ 0% {
115
+ transform: scaleY(0)
116
+ }
117
+ 80% {
118
+ transform: scaleY(1.1)
119
+ }
120
+ 100% {
121
+ transform: scaleY(1)
122
+ }
123
+ }
124
+
125
+ .fs-checkbox {
126
+ display: flex;
127
+ position: relative;
128
+ padding: 0 5px 0 0;
129
+ margin-top: 5px;
130
+ margin-bottom: 5px;
131
+ cursor: pointer;
132
+ -webkit-user-select: none;
133
+ -moz-user-select: none;
134
+ -ms-user-select: none;
135
+ user-select: none;
136
+ font-family: Arial, serif;
137
+ animation: growDown 300ms ease forwards;
138
+ align-items: center;
139
+ }
140
+
141
+ .fs-checkbox input {
142
+ position: fixed;
143
+ opacity: 0;
144
+ cursor: pointer;
145
+ height: 0;
146
+ width: 0;
147
+ }
148
+
149
+ .checkmark {
150
+ min-height: 16px;
151
+ min-width: 16px;
152
+ background-color: #eee;
153
+ margin-right: 10px;
154
+ }
155
+
156
+ .fs-checkbox:hover input ~ .checkmark {
157
+ background-color: #d00202cf;
158
+ }
159
+
160
+ .fs-checkbox input:checked ~ .checkmark {
161
+ background-color: white;
162
+ }
163
+
164
+ .fs-selected-checkmark {
165
+ background-color: #d00202cf !important;
166
+ }
167
+
168
+ .fs-selected-checkmark::before {
169
+ content: "";
170
+ position: absolute;
171
+ display: block;
172
+ left: 5px;
173
+ width: 5px;
174
+ height: 11px;
175
+ border: solid white;
176
+ border-width: 0 2px 2px 0;
177
+ -webkit-transform: rotate(45deg);
178
+ -ms-transform: rotate(45deg);
179
+ transform: rotate(45deg);
180
+ color: white;
181
+ }
182
+
183
+ .checkmark:after {
184
+ content: "";
185
+ position: absolute;
186
+ display: none;
187
+ }
188
+
189
+ .fs-checkbox input:checked ~ .checkmark:after {
190
+ display: block;
191
+ }
192
+
193
+ .fs-checkbox .checkmark:after {
194
+ left: 5px;
195
+ width: 4px;
196
+ height: 9px;
197
+ border: solid white;
198
+ border-width: 0 2px 2px 0;
199
+ -webkit-transform: rotate(45deg);
200
+ -ms-transform: rotate(45deg);
201
+ transform: rotate(45deg);
202
+ }
203
+
204
+ ::-webkit-scrollbar {
205
+ width: 6px;
206
+ }
207
+
208
+ ::-webkit-scrollbar-track {
209
+ background: #f1f1f1;
210
+ }
211
+
212
+ ::-webkit-scrollbar-thumb {
213
+ background: #888;
214
+ }
215
+
216
+ ::-webkit-scrollbar-thumb:hover {
217
+ background: #555;
218
+ }
219
+
220
+
221
+ .fs-selected-checkbox {
222
+
223
+ }
224
+
225
+ .fs-facet-option-disable{
226
+ pointer-events: none;
227
+ opacity: 0.5;
228
+ }
229
+
230
+ @keyframes filters-slider-open-ltr {
231
+ from {
232
+ margin-left: -300px;
233
+ }
234
+ to {
235
+ margin-left: 0;
236
+ }
237
+ }
238
+
239
+ @keyframes filters-slider-close-ltr {
240
+ from {
241
+ margin-left: 0;
242
+ }
243
+ to {
244
+ margin-left: -300px;
245
+ }
246
+ }
247
+
248
+ @media(max-width: 500px) {
249
+ .fs-grid {
250
+ grid-template-columns: repeat(2, 50%);
251
+ }
252
+
253
+ .fs-filters-grid {
254
+ display: unset;
255
+ }
256
+
257
+ .fs-filters {
258
+ position: absolute;
259
+ background-color: white;
260
+ z-index: 500;
261
+ height: 100vh;
262
+ overflow: auto;
263
+ padding: 10px;
264
+ width: 70%;
265
+ }
266
+
267
+ .fs-filters-slider-open {
268
+ animation-name: filters-slider-open-ltr;
269
+ animation-duration: 500ms;
270
+ display: flex;
271
+ }
272
+
273
+ .fs-filters-slider-close {
274
+ animation-name: filters-slider-close-ltr;
275
+ animation-duration: 500ms;
276
+ display: flex;
277
+ }
278
+
279
+ .fs-facet-container {
280
+ padding-right: 5px;
281
+ }
282
+
283
+ .fs-mobile-filters-button {
284
+ height: 33px;
285
+ display: flex;
286
+ align-items: center;
287
+ padding: 0 6px;
288
+ cursor: pointer;
289
+ border: 1px solid #ccc;
290
+ width: fit-content;
291
+ min-width: 100px;
292
+ justify-content: center;
293
+ font-family: Arial, serif;
294
+ font-size: 13px;
295
+ }
296
+
297
+ .fs-mobile-filters-wrapper {
298
+ position: absolute;
299
+ top: 0;
300
+ left: 0;
301
+ width: 100vw;
302
+ height: 100vh;
303
+ background-color: #00000094;
304
+ z-index: 300;
305
+ }
306
+ }
307
+
308
+
309
+
310
+ /* Pagination */
311
+
312
+ .fs-pagination-arrow-custom-icon {
313
+ height: 15px;
314
+ width: 15px;
315
+ display: flex;
316
+ align-items: center;
317
+ justify-content: center;
318
+ }
319
+
320
+ .pagination-wrapper {
321
+ display: flex;
322
+ padding: 20px 5px;
323
+ font-size: 15px;
324
+ border-top: 1px solid #ccc;
325
+ margin: 10px 0 0;
326
+ align-items: center;
327
+ justify-content: center;
328
+ font-family: "Assistant", sans-serif;
329
+ font-weight: 600;
330
+ }
331
+
332
+ .page-number-item {
333
+ cursor: pointer;
334
+ transition: .2s all ease-in-out;
335
+ border: 1px solid transparent;
336
+ width: 35px;
337
+ height: 35px;
338
+ color: #666;
339
+ text-decoration: none;
340
+ border-radius: 20px;
341
+ display: flex;
342
+ align-items: center;
343
+ justify-content: center;
344
+ }
345
+
346
+ .page-number-item:hover {
347
+ text-decoration: underline;
348
+ color: black;
349
+ }
350
+
351
+ .page-number-item-selected {
352
+ font-weight: bold;
353
+ color: white !important;
354
+ background: black;
355
+ cursor: default;
356
+ text-decoration: none !important;
357
+ }
358
+
359
+ .arrow-button {
360
+ text-decoration: none;
361
+ color: black;
362
+ display: flex;
363
+ }
364
+
365
+ .arrow-button-wrapper {
366
+ background-color: #f0f0f0;
367
+ border-radius: 50%;
368
+ margin-left: 5px;
369
+ margin-right: 5px;
370
+ border: 1px solid transparent;
371
+ cursor: pointer;
372
+ min-height: 35px;
373
+ min-width: 35px;
374
+ display: flex;
375
+ align-items: center;
376
+ justify-content: center;
377
+ }
378
+
379
+ .arrow-button-wrapper:hover .arrow-button {
380
+ text-decoration: underline;
381
+ color: black;
382
+ }
383
+
384
+ .center-pages-wrapper {
385
+ background-color: #f0f0f0;
386
+ display: flex;
387
+ border-radius: 20px;
388
+
389
+ }
390
+
391
+ .three-dots-item {
392
+ cursor: default !important;
393
+ text-decoration: none !important;
394
+ min-width: fit-content;
395
+ }
396
+
397
+ @media screen and (max-width: 420px) {
398
+ .pagination-wrapper {
399
+ transform: scale(0.95);
400
+ }
401
+
402
+ .page-number-item {
403
+ width: 32px;
404
+ height: 32px;
405
+ }
406
+
407
+ .arrow-button-wrapper {
408
+ min-width: 32px;
409
+ min-height: 32px;
410
+ }
411
+ }
412
+
413
+
414
+ /*filters skeleton*/
415
+
416
+ .fs-vertical-filters-skeleton-section {
417
+ margin-bottom: 15px;
418
+ }
419
+
420
+ .row-skeleton {
421
+ background: #c7cdd2;
422
+ animation: pulse 1.5s infinite both;
423
+ margin-bottom: 5px;
424
+ }
425
+
426
+ @keyframes pulse {
427
+ 0% {
428
+ opacity: 1;
429
+ }
430
+
431
+ 50% {
432
+ opacity: 0.3;
433
+ }
434
+
435
+ 100% {
436
+ opacity: 1;
437
+ }
438
+ }
439
+
440
+ /*filters end*/
441
+
442
+
443
+ /*sort by start*/
444
+
445
+ .select-container {
446
+ position: absolute;
447
+ border: 1px solid #ccc;
448
+ background: #fff;
449
+ z-index: 3;
450
+ right: 25px;
451
+ }
452
+
453
+ .fs-select-wrapper {
454
+ position: relative;
455
+ user-select: none;
456
+ width: 100%;
457
+ font-family: Arial, serif;
458
+ font-size: 13px;
459
+ min-width: 150px;
460
+ max-width: 200px;
461
+ }
462
+
463
+ .select-button {
464
+ height: 33px;
465
+ display: flex;
466
+ align-items: center;
467
+ justify-content: space-between;
468
+ padding: 0 6px;
469
+ cursor: pointer;
470
+ border-bottom: 1px solid transparent;
471
+ }
472
+
473
+ .select-button-open {
474
+ border-bottom: 1px solid #ccc;
475
+ }
476
+
477
+ .selected-option {
478
+ background-color: black;
479
+ color: white;
480
+ animation-name: desktop-sort-by-animation;
481
+ animation-duration: .2s;
482
+ }
483
+
484
+ @keyframes desktop-sort-by-animation {
485
+ 0% {margin-top: -15px;}
486
+ 25% {margin-top: -10px;}
487
+ 50% {margin-top: -5px;}
488
+ 100% {margin-top: 0;}
489
+ }
490
+
491
+ .custom-options {
492
+ /*transition: all .3s;*/
493
+ /*animation-name: example;*/
494
+ /*animation-duration: 1s;*/
495
+
496
+ }
497
+
498
+ .dropdown-item {
499
+ height: 33px;
500
+ display: flex;
501
+ align-items: center;
502
+ justify-content: space-between;
503
+ padding: 0 6px;
504
+ cursor: pointer;
505
+ animation-name: desktop-sort-by-animation;
506
+ animation-duration: .2s;
507
+ margin-top: 0px;
508
+ }
509
+
510
+ .dropdown-item:hover {
511
+ background-color: black;
512
+ color: white;
513
+ transition: all .3s;
514
+ }
515
+
516
+ .fs-top-page-container {
517
+
518
+ }
519
+
520
+ .arrow {
521
+ transition: .2s all ease-in-out;
522
+ }
523
+
524
+ .arrow.rotate {
525
+ transform: rotate(180deg);
526
+ }
527
+
528
+ /* Add to Cart Start*/
529
+
530
+ .fs-product-add-to-cart {
531
+ width: 100%;
532
+ height: 40px;
533
+ transition: all 500ms ease-in-out !important;
534
+ border: 1px solid transparent;
535
+ }
536
+
537
+ @media screen and (min-width: 520px) {
538
+ .fs-product-card:hover .fs-product-add-to-cart {
539
+ opacity: 1;
540
+ transition: opacity 500ms ease-in-out;
541
+ }
542
+ }
543
+
544
+ .fs-adding-product {
545
+ display: flex;
546
+ align-items: center;
547
+ justify-content: center;
548
+ }
549
+
550
+ /* removable tags */
551
+ .fs-removable-tag {
552
+ width: fit-content;
553
+ padding: 5px;
554
+ display: flex;
555
+ margin-right: 10px;
556
+ align-items: center;
557
+ margin-bottom: 10px;
558
+ cursor: pointer;
559
+ opacity: .8;
560
+ transition: .2s opacity ease-in-out;
561
+ }
562
+
563
+ .fs-removable-tags {
564
+ opacity: 1;
565
+ }
566
+
567
+ .fs-removable-tag-remove-button {
568
+ display: flex;
569
+ align-self: center;
570
+ cursor: pointer;
571
+ }
572
+
573
+ .fs-removable-tag-text {
574
+ margin-right: 5px;
575
+ text-transform: capitalize;
576
+ }
577
+
578
+ .fs-removable-tags-container {
579
+ display: flex;
580
+ flex-direction: row;
581
+ margin-top: 7px;
582
+ flex-wrap: wrap;
583
+ }
584
+
585
+ .fs-summary-tags-wrapper {
586
+ border-bottom: 1px solid #ccc;
587
+ display: flex;
588
+ width: 100%;
589
+ justify-content: flex-start;
590
+ align-items: center;
591
+ margin-bottom: 15px;
592
+ }
593
+
594
+
595
+ /* Spinner start */
596
+ .fs-spinner {
597
+ transition-property: transform;
598
+ animation-name: fs-spinner_infinite-spin;
599
+ animation-iteration-count: infinite;
600
+ animation-timing-function: linear;
601
+ position: relative;
602
+ z-index: 1000;
603
+ }
604
+ @keyframes fs-spinner_infinite-spin {
605
+ from {
606
+ transform: rotate(0deg);
607
+ }
608
+ to {
609
+ transform: rotate(360deg);
610
+ }
611
+ }
612
+
613
+ /*.mobile-search-input-wrapper {*/
614
+
615
+ /*}*/
616
+
617
+ .fs-mobile-search-form {
618
+ position: absolute;
619
+ display: flex;
620
+ left: 65px;
621
+ flex-direction: row-reverse;
622
+ }
@@ -6,7 +6,7 @@ const extendOptimizeDeps = () => ({
6
6
  config: () => ({
7
7
  optimizeDeps: {
8
8
  include: [
9
- '@fast-simon/hydrogen-dev'
9
+ '@fast-simon/shopify-hydrogen'
10
10
  ]
11
11
  }
12
12
  })
@@ -11,7 +11,7 @@ const injectCSS = () => {
11
11
  tag: 'link',
12
12
  attrs: {
13
13
  'rel': 'stylesheet',
14
- 'href': '/node_modules/@fast-simon/hydrogen-dev/dist/esnext/styles/fast-simon.css'
14
+ 'href': '/node_modules/@fast-simon/shopify-hydrogen/dist/esnext/styles/fast-simon.css'
15
15
  }
16
16
  }];
17
17
  return {
@@ -6,7 +6,7 @@ const suppressWarnings = () => {
6
6
  name: 'fast-simon:suppress-warnings',
7
7
  configResolved(config) {
8
8
  // TODO: Fix the real issue
9
- const filterOut = (msg) => msg.startsWith("@fast-simon/hydrogen-dev doesn't appear to be written in CJS");
9
+ const filterOut = (msg) => msg.startsWith("@fast-simon/shopify-hydrogen doesn't appear to be written in CJS");
10
10
  for (const method of ['warn', 'warnOnce']) {
11
11
  const original = config.logger[method];
12
12
  config.logger[method] = (msg, ...args) => {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fast-simon/shopify-hydrogen",
3
- "version": "1.0.2",
3
+ "version": "1.0.4",
4
4
  "description": "",
5
5
  "scripts": {
6
6
  "build": "npm run build:plugin:cjs && npm run build:esm",