@sc-360-v2/storefront-cms-library 0.3.83 → 0.3.85

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.
@@ -101,7 +101,21 @@ $resizeActive: '[data-cms-element-resizer="true"]';
101
101
  // }
102
102
  }
103
103
 
104
- .btn__with__text {
104
+ .load__more__button__container {
105
+ display: flex;
106
+ width: 100%;
107
+ margin-top: 10px;
108
+ &:hover {
109
+ --_sf-hr-bn-at: var(
110
+ --_ctm-mob-dn-ld-me-bn-hr-se-bn-at,
111
+ var(--_ctm-tab-dn-ld-me-bn-hr-se-bn-at, var(--_ctm-dn-ld-me-bn-hr-se-bn-at))
112
+ );
113
+ }
114
+
115
+ justify-content: var(--_sf-hr-at, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-bn-at));
116
+ }
117
+
118
+ .btn__with__text[data-btn-name="redeemButton"] {
105
119
  &[data-show-shadow="false"] {
106
120
  --_show-shadow: none;
107
121
  }
@@ -297,6 +311,205 @@ $resizeActive: '[data-cms-element-resizer="true"]';
297
311
  width: 100%;
298
312
  }
299
313
  }
314
+ .btn__with__text[data-btn-name="loadMore"] {
315
+ &[data-show-shadow="false"] {
316
+ --_show-shadow: none;
317
+ }
318
+ &[data-icon-position="left"] {
319
+ --_sf-fd-bn: row;
320
+ }
321
+ &[data-icon-position="right"] {
322
+ --_sf-fd-bn: row-reverse;
323
+ }
324
+ &[data-icon-position="center"] {
325
+ --_sf-fd-bn: row;
326
+ }
327
+
328
+ &:hover {
329
+ --_sf-hr-bd-cr: var(
330
+ --_ctm-mob-dn-ld-me-bn-hr-se-bd-cr,
331
+ var(--_ctm-tab-dn-ld-me-bn-hr-se-bd-cr, var(--_ctm-dn-ld-me-bn-hr-se-bd-cr))
332
+ );
333
+ --_sf-hr-br-cr: var(
334
+ --_ctm-mob-dn-ld-me-bn-hr-se-br-cr,
335
+ var(--_ctm-tab-dn-ld-me-bn-hr-se-br-cr, var(--_ctm-dn-ld-me-bn-hr-se-br-cr))
336
+ );
337
+ --_sf-hr-br-se: var(
338
+ --_ctm-mob-dn-ld-me-bn-hr-se-br-se,
339
+ var(--_ctm-tab-dn-ld-me-bn-hr-se-br-se, var(--_ctm-dn-ld-me-bn-hr-se-br-se))
340
+ );
341
+ --_sf-hr-br-wh: var(
342
+ --_ctm-mob-dn-ld-me-bn-hr-se-br-wh,
343
+ var(--_ctm-tab-dn-ld-me-bn-hr-se-br-wh, var(--_ctm-dn-ld-me-bn-hr-se-br-wh))
344
+ );
345
+ --_sf-hr-br-rs: var(
346
+ --_ctm-mob-dn-ld-me-bn-hr-se-br-rs,
347
+ var(--_ctm-tab-dn-ld-me-bn-hr-se-br-rs, var(--_ctm-dn-ld-me-bn-hr-se-br-rs))
348
+ );
349
+ --_sf-hr-at: var(
350
+ --_ctm-mob-dn-ld-me-bn-hr-se-at,
351
+ var(--_ctm-tab-dn-ld-me-bn-hr-se-at, var(--_ctm-dn-ld-me-bn-hr-se-at))
352
+ );
353
+ --_sf-hr-in-ad-tt-sg: var(
354
+ --_ctm-mob-dn-ld-me-bn-hr-se-in-ad-tt-sg,
355
+ var(--_ctm-tab-dn-ld-me-bn-hr-se-in-ad-tt-sg, var(--_ctm-dn-ld-me-bn-hr-se-in-ad-tt-sg))
356
+ );
357
+
358
+ // for shadow
359
+ --_sf-hr-sw-ae: var(
360
+ --_ctm-mob-dn-ld-me-bn-hr-se-sw-ae,
361
+ var(--_ctm-tab-dn-ld-me-bn-hr-se-sw-ae, var(--_ctm-dn-ld-me-bn-hr-se-sw-ae))
362
+ );
363
+ --_sf-hr-sw-br: var(
364
+ --_ctm-mob-dn-ld-me-bn-hr-se-sw-br,
365
+ var(--_ctm-tab-dn-ld-me-bn-hr-se-sw-br, var(--_ctm-dn-ld-me-bn-hr-se-sw-br))
366
+ );
367
+ --_sf-hr-sw-hr: var(
368
+ --_ctm-mob-dn-ld-me-bn-hr-se-sw-hr,
369
+ var(--_ctm-tab-dn-ld-me-bn-hr-se-sw-hr, var(--_ctm-dn-ld-me-bn-hr-se-sw-hr))
370
+ );
371
+ --_sf-hr-sw-cr: var(
372
+ --_ctm-mob-dn-ld-me-bn-hr-se-sw-cr,
373
+ var(--_ctm-tab-dn-ld-me-bn-hr-se-sw-cr, var(--_ctm-dn-ld-me-bn-hr-se-sw-cr))
374
+ );
375
+
376
+ // for font
377
+
378
+ --_sf-hr-cr: var(
379
+ --_ctm-mob-dn-ld-me-bn-hr-se-cr,
380
+ var(--_ctm-tab-dn-ld-me-bn-hr-se-cr, var(--_ctm-dn-ld-me-bn-hr-se-cr))
381
+ );
382
+ --_sf-hr-ft-fy: var(
383
+ --_ctm-mob-dn-ld-me-bn-hr-se-ft-fy,
384
+ var(--_ctm-tab-dn-ld-me-bn-hr-se-ft-fy, var(--_ctm-dn-ld-me-bn-hr-se-ft-fy))
385
+ );
386
+ --_sf-hr-ft-se: var(
387
+ --_ctm-mob-dn-ld-me-bn-hr-se-ft-se,
388
+ var(--_ctm-tab-dn-ld-me-bn-hr-se-ft-se, var(--_ctm-dn-ld-me-bn-hr-se-ft-se))
389
+ );
390
+ --_sf-hr-ft-wt: var(
391
+ --_ctm-mob-dn-ld-me-bn-hr-se-ft-wt,
392
+ var(--_ctm-tab-dn-ld-me-bn-hr-se-ft-wt, var(--_ctm-dn-ld-me-bn-hr-se-ft-wt))
393
+ );
394
+ --_sf-hr-ft-se-ic: var(
395
+ --_ctm-mob-dn-ld-me-bn-hr-se-ft-se-ic,
396
+ var(--_ctm-tab-dn-ld-me-bn-hr-se-ft-se-ic, var(--_ctm-dn-ld-me-bn-hr-se-ft-se-ic))
397
+ );
398
+ --_sf-hr-tt-an: var(
399
+ --_ctm-mob-dn-ld-me-bn-hr-se-tt-an,
400
+ var(--_ctm-tab-dn-ld-me-bn-hr-se-tt-an, var(--_ctm-dn-ld-me-bn-hr-se-tt-an))
401
+ );
402
+ --_sf-hr-lr-sg: var(
403
+ --_ctm-mob-dn-ld-me-bn-hr-se-lr-sg,
404
+ var(--_ctm-tab-dn-ld-me-bn-hr-se-lr-sg, var(--_ctm-dn-ld-me-bn-hr-se-lr-sg))
405
+ );
406
+ --_sf-hr-le-ht: var(
407
+ --_ctm-mob-dn-ld-me-bn-hr-se-le-ht,
408
+ var(--_ctm-tab-dn-ld-me-bn-hr-se-le-ht, var(--_ctm-dn-ld-me-bn-hr-se-le-ht))
409
+ );
410
+
411
+ --_sf-hr-in-se: var(
412
+ --_ctm-mob-dn-ld-me-bn-hr-se-in-se,
413
+ var(--_ctm-tab-dn-ld-me-bn-hr-se-in-se, var(--_ctm-dn-ld-me-bn-hr-se-in-se))
414
+ );
415
+ --_sf-hr-in-se: var(
416
+ --_ctm-mob-dn-ld-me-bn-hr-se-in-se,
417
+ var(--_ctm-tab-dn-ld-me-bn-hr-se-in-se, var(--_ctm-dn-ld-me-bn-hr-se-in-se))
418
+ );
419
+ --_sf-hr-in-c1: var(
420
+ --_ctm-mob-dn-ld-me-bn-hr-se-in-c1,
421
+ var(--_ctm-tab-dn-ld-me-bn-hr-se-in-c1, var(--_ctm-dn-ld-me-bn-hr-se-in-c1))
422
+ );
423
+ --_sf-hr-ue: var(
424
+ --_ctm-mob-dn-ld-me-bn-hr-ue,
425
+ var(--_ctm-tab-dn-ld-me-bn-hr-ue, var(--_ctm-dn-ld-me-bn-hr-ue))
426
+ );
427
+
428
+ // for pading and width
429
+ --_sf-hr-pg: var(
430
+ --_ctm-mob-dn-ld-me-bn-hr-pg,
431
+ var(--_ctm-tab-dn-ld-me-bn-hr-pg, var(--_ctm-dn-ld-me-bn-hr-pg))
432
+ );
433
+ --_sf-hr-wh: var(
434
+ --_ctm-mob-dn-ld-me-bn-hr-wh,
435
+ var(--_ctm-tab-dn-ld-me-bn-hr-wh, var(--_ctm-dn-ld-me-bn-hr-wh))
436
+ );
437
+
438
+ &[data-hover-show-shadow="false"] {
439
+ --_hover-show-shadow: none;
440
+ }
441
+ &[data-hover-show-icon="false"] {
442
+ --_hover-show-icon: none;
443
+ }
444
+ }
445
+ background-color: var(--_sf-hr-bd-cr, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-bd-cr));
446
+
447
+ padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-pg));
448
+ width: var(--_sf-hr-wh, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-wh));
449
+ display: flex;
450
+ flex-direction: var(--_sf-fd-bn);
451
+ align-items: center;
452
+
453
+ justify-content: var(--_sf-hr-at, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-at));
454
+ gap: var(--_sf-hr-in-ad-tt-sg, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-in-ad-tt-sg));
455
+
456
+ border-radius: var(--_sf-hr-br-rs, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-br-rs));
457
+
458
+ box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-sw-ae))
459
+ var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-sw-br))
460
+ var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-sw-sd))
461
+ var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-sw-cr));
462
+
463
+ &[data-show-border="true"] {
464
+ border-color: var(--_sf-hr-br-cr, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-br-cr));
465
+
466
+ border-style: var(--_sf-hr-br-se, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-br-se));
467
+
468
+ border-width: var(--_sf-hr-br-wh, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-br-wh));
469
+ }
470
+
471
+ .txt {
472
+ display: flex;
473
+
474
+ color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-cr));
475
+
476
+ font-family:
477
+ var(--_sf-hr-ft-fy, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-ft-fy)), sans-serif;
478
+
479
+ font-size: var(--_sf-hr-ft-se, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-ft-se));
480
+
481
+ font-weight: var(--_sf-hr-ft-wt, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-ft-wt));
482
+
483
+ font-style: var(
484
+ --_sf-hr-ft-se-ic,
485
+ prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-ft-se-ic)
486
+ );
487
+
488
+ text-align: var(--_sf-hr-tt-an, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-tt-an));
489
+
490
+ letter-spacing: var(--_sf-hr-lr-sg, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-lr-sg));
491
+
492
+ line-height: var(--_sf-hr-le-ht, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-le-ht));
493
+
494
+ text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-dn-dt-ue));
495
+ }
496
+
497
+ .icon {
498
+ display: var(--_hover-show-icon, var(--_show-icon, flex));
499
+ svg {
500
+ width: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-in-se));
501
+ height: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-in-se));
502
+
503
+ path {
504
+ stroke: var(--_sf-hr-in-c1, prepareMediaVariable(--_ctm-dn-ld-me-bn-dt-se-in-c1));
505
+ }
506
+ }
507
+ }
508
+ [data-element-style="Text"] {
509
+ display: inline-block;
510
+ width: 100%;
511
+ }
512
+ }
300
513
  }
301
514
 
302
515
  .allocations_table_wrapper {
@@ -373,51 +586,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
373
586
  );
374
587
  }
375
588
  }
376
- &[data-loadmore-button-shadow="true"] {
377
- .load__more {
378
- box-shadow: var(
379
- --_ctm-mob-dn-ld-me-bn-sw-ae,
380
- var(--_ctm-tab-dn-ld-me-bn-sw-ae, var(--_ctm-dn-ld-me-bn-sw-ae))
381
- )
382
- var(
383
- --_ctm-mob-dn-ld-me-bn-sw-br,
384
- var(--_ctm-tab-dn-ld-me-bn-sw-br, var(--_ctm-dn-ld-me-bn-sw-br))
385
- )
386
- var(
387
- --_ctm-mob-ld-me-bn-sw-sd,
388
- var(--_ctm-tab-dn-ld-me-bn-sw-sd, var(--_ctm-dn-ld-me-bn-sw-sd))
389
- )
390
- var(
391
- --_ctm-mob-dn-ld-me-bn-sw-cr,
392
- var(--_ctm-tab-dn-ld-me-bn-sw-cr, var(--_ctm-dn-ld-me-bn-sw-cr))
393
- );
394
- }
395
- }
396
- &[data-loadmore-button-border="true"] {
397
- .load__more {
398
- border-color: var(
399
- --_sf-hr-br-cr,
400
- var(
401
- --_ctm-mob-dn-ld-me-bn-br-cr,
402
- var(--_ctm-tab-dn-ld-me-bn-br-cr, var(--_ctm-dn-ld-me-bn-br-cr))
403
- )
404
- );
405
- border-style: var(
406
- --_sf-hr-br-st,
407
- var(
408
- --_ctm-mob-dn-ld-me-bn-br-se,
409
- var(--_ctm-tab-dn-ld-me-bn-br-se, var(--_ctm-dn-ld-me-bn-br-se))
410
- )
411
- );
412
- border-width: var(
413
- --_sf-hr-br-wh,
414
- var(
415
- --_ctm-mob-dn-ld-me-bn-br-wh,
416
- var(--_ctm-tab-dn-ld-me-bn-br-wh, var(--_ctm-dn-ld-me-bn-br-wh))
417
- )
418
- );
419
- }
420
- }
589
+
421
590
  &[data-header-divider="true"] {
422
591
  thead tr th {
423
592
  border-bottom: 1px solid
@@ -453,7 +622,11 @@ $resizeActive: '[data-cms-element-resizer="true"]';
453
622
  }
454
623
  &[data-show-more-rows="onScroll"] {
455
624
  .table__container {
456
- overflow-y: auto;
625
+ overflow-y: scroll;
626
+ height: var(
627
+ --_ctm-mob-lt-te-ht,
628
+ var(--_ctm-tab-lt-te-ht, var(--_ctm-lt-te-ht))
629
+ ) !important;
457
630
 
458
631
  &::-webkit-scrollbar {
459
632
  width: var(
@@ -862,106 +1035,6 @@ $resizeActive: '[data-cms-element-resizer="true"]';
862
1035
  );
863
1036
  }
864
1037
  }
865
-
866
- .load__more {
867
- margin: 10px;
868
- background-color: var(
869
- --_sf-hr-bd-cr,
870
- var(
871
- --_ctm-mob-dn-ld-me-bn-bd-cr,
872
- var(--_ctm-tab-dn-ld-me-bn-bd-cr, var(--_ctm-dn-ld-me-bn-bd-cr))
873
- )
874
- );
875
- border-radius: var(
876
- --_sf-hr-br-br,
877
- var(
878
- --_ctm-mob-dn-ld-me-bn-br-rs,
879
- var(--_ctm-tab-dn-ld-me-bn-br-rs, var(--_ctm-dn-ld-me-bn-br-rs))
880
- )
881
- );
882
-
883
- h3 {
884
- color: var(
885
- --_sf-hr-fc,
886
- var(
887
- --_ctm-mob-dn-ld-me-bn-cr,
888
- var(--_ctm-tab-dn-ld-me-bn-cr, var(--_ctm-dn-ld-me-bn-cr))
889
- )
890
- );
891
- font-family:
892
- var(
893
- --_sf-hr-ff,
894
- var(
895
- --_ctm-mob-dn-ld-me-bn-ft-fy,
896
- var(--_ctm-tab-dn-ld-me-bn-ft-fy, var(--_ctm-dn-ld-me-bn-ft-fy))
897
- )
898
- ),
899
- sans-serif;
900
- font-size: var(
901
- --_sf-hr-fs,
902
- var(
903
- --_ctm-mob-dn-ld-me-bn-ft-se,
904
- var(--_ctm-tab-dn-ld-me-bn-ft-se, var(--_ctm-dn-ld-me-bn-ft-se))
905
- )
906
- );
907
-
908
- text-decoration: var(
909
- --_ctm-mob-dn-ld-me-bn-ue,
910
- var(--_ctm-tab-dn-ld-me-bn-ue, var(--_ctm-dn-ld-me-bn-ue))
911
- );
912
-
913
- font-weight: var(
914
- --_sf-hr-fw,
915
- var(
916
- --_ctm-mob-dn-ld-me-bn-ft-wt,
917
- var(--_ctm-tab-dn-ld-me-bn-ft-wt, var(--_ctm-dn-ld-me-bn-ft-wt))
918
- )
919
- );
920
-
921
- font-style: var(
922
- --_sf-hr-ft,
923
- var(
924
- --_ctm-mob-dn-ld-me-bn-ft-se-ic,
925
- var(--_ctm-tab-dn-ld-me-bn-ft-se-ic, var(--_ctm-dn-ld-me-bn-ft-se-ic))
926
- )
927
- );
928
-
929
- text-align: var(
930
- --_sf-hr-ta,
931
- var(
932
- --_ctm-mob-dn-ld-me-bn-tt-an,
933
- var(--_ctm-tab-dn-ld-me-bn-tt-an, var(--_ctm-dn-ld-me-bn-tt-an))
934
- )
935
- );
936
-
937
- letter-spacing: var(
938
- --_sf-hr-ls,
939
- var(
940
- --_ctm-mob-dn-ld-me-bn-lr-sg,
941
- var(--_ctm-tab-dn-ld-me-bn-lr-sg, var(--_ctm-dn-ld-me-bn-lr-sg))
942
- )
943
- );
944
-
945
- line-height: var(
946
- --_sf-hr-lh,
947
- var(
948
- --_ctm-mob-dn-ld-me-bn-le-ht,
949
- var(--_ctm-tab-dn-ld-me-bn-le-ht, var(--_ctm-dn-ld-me-bn-le-ht))
950
- )
951
- );
952
- }
953
- // background-color: var(--_primary-400);
954
- // border: 1px solid var(--_primary-400);
955
- // border-radius: var(--_br-6);
956
- // padding: var(--_pd-8) var(--_pd-12);
957
- // color: var(---base-whiet);
958
- // display: inline-block;
959
- // color: var(--_base-white);
960
- // margin: 0 auto;
961
- // width: 150px;
962
- // text-align: center;
963
- // margin-top: 20px;
964
- }
965
1038
  }
966
1039
  }
967
1040