@sc-360-v2/storefront-cms-library 0.3.73 → 0.3.74

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.
@@ -335,340 +335,520 @@ $rai: "repeater-advertise-item";
335
335
  }
336
336
  }
337
337
 
338
- .loadMore__container {
338
+ // .action__button {
339
+ // display: flex;
340
+ // align-items: center;
341
+ // height: 40px;
342
+ // cursor: pointer;
343
+ // .btn__container {
344
+ // display: flex;
345
+ // align-items: center;
346
+ // justify-content: center;
347
+ // gap: 10px;
348
+ // height: 100%;
349
+ // width: 100%;
350
+ // padding: 16px;
351
+ // .btn__with__text {
352
+ // height: 2.5rem;
353
+ // }
354
+ // }
355
+ // &.loadMore {
356
+ // background-color: var(
357
+ // --_sf-at-hr-bd-cr,
358
+ // var(
359
+ // --_ctm-mob-rep-dn-bn-se-dt-se-bd-cr,
360
+ // var(--_ctm-tab-rep-dn-bn-se-dt-se-bd-cr, var(--_ctm-rep-dn-bn-se-dt-se-bd-cr))
361
+ // )
362
+ // );
363
+ // border-color: var(
364
+ // --_sf-at-hr-br-cr,
365
+ // var(
366
+ // --_ctm-mob-rep-dn-bn-se-dt-se-br-cr,
367
+ // var(--_ctm-tab-rep-dn-bn-se-dt-se-br-cr, var(--_ctm-rep-dn-bn-se-dt-se-br-cr))
368
+ // )
369
+ // );
370
+ // border-style: var(
371
+ // --_sf-at-hr-br-se,
372
+ // var(
373
+ // --_ctm-mob-rep-dn-bn-se-dt-se-br-se,
374
+ // var(--_ctm-tab-rep-dn-bn-se-dt-se-br-se, var(--_ctm-rep-dn-bn-se-dt-se-br-se))
375
+ // )
376
+ // );
377
+ // border-width: var(
378
+ // --_sf-at-hr-br-wt,
379
+ // var(
380
+ // --_ctm-mob-rep-dn-bn-se-dt-se-br-wh,
381
+ // var(--_ctm-tab-rep-dn-bn-se-dt-se-br-wh, var(--_ctm-rep-dn-bn-se-dt-se-br-wh))
382
+ // )
383
+ // );
384
+ // border-radius: var(
385
+ // --_sf-at-hr-br-br,
386
+ // var(
387
+ // --_ctm-mob-rep-dn-bn-se-dt-se-br-rs,
388
+ // var(--_ctm-tab-rep-dn-bn-se-dt-se-br-rs, var(--_ctm-rep-dn-bn-se-dt-se-br-rs))
389
+ // )
390
+ // );
391
+
392
+ // box-shadow: var(
393
+ // --_hover-show-shadow,
394
+ // var(
395
+ // --_sf-at-hr-bx-sw,
396
+ // var(
397
+ // --_show-shadow,
398
+ // var(
399
+ // --_ctm-mob-rep-dn-bn-se-dt-se-sw-ae,
400
+ // var(--_ctm-tab-rep-dn-bn-se-dt-se-sw-ae, var(--_ctm-rep-dn-bn-se-dt-se-sw-ae))
401
+ // )
402
+ // var(
403
+ // --_ctm-mob-rep-dn-bn-se-dt-se-sw-br,
404
+ // var(--_ctm-tab-rep-dn-bn-se-dt-se-sw-br, var(--_ctm-rep-dn-bn-se-dt-se-sw-br))
405
+ // )
406
+ // var(
407
+ // --_ctm-mob-rep-dn-bn-se-dt-se-sw-sd,
408
+ // var(--_ctm-tab-rep-dn-bn-se-dt-se-sw-sd, var(--_ctm-rep-dn-bn-se-dt-se-sw-sd))
409
+ // )
410
+ // var(
411
+ // --_ctm-mob-rep-dn-bn-se-dt-se-sw-cr,
412
+ // var(--_ctm-tab-rep-dn-bn-se-dt-se-sw-cr, var(--_ctm-rep-dn-bn-se-dt-se-sw-cr))
413
+ // )
414
+ // )
415
+ // )
416
+ // );
417
+
418
+ // .btn__container {
419
+ // gap: var(
420
+ // --_ctm-mob-rep-dn-bn-se-dt-se-in-ad-tt-sg,
421
+ // var(
422
+ // --_ctm-tab-rep-dn-bn-se-dt-se-in-ad-tt-sg,
423
+ // var(--_ctm-rep-dn-bn-se-dt-se-in-ad-tt-sg)
424
+ // )
425
+ // );
426
+ // justify-content: var(
427
+ // --_ctm-mob-rep-dn-bn-se-dt-se-at,
428
+ // var(--_ctm-tab-rep-dn-bn-se-dt-se-at, var(--_ctm-rep-dn-bn-se-dt-se-at))
429
+ // );
430
+
431
+ // &[data-actions-icon-position="left"],
432
+ // &[data-actions-icon-position="center"] {
433
+ // flex-direction: row;
434
+ // }
435
+ // &[data-actions-icon-position="right"] {
436
+ // flex-direction: row-reverse;
437
+ // }
438
+ // span {
439
+ // svg {
440
+ // width: var(
441
+ // --_ctm-mob-rep-dn-bn-se-dt-se-in-se,
442
+ // var(--_ctm-tab-rep-dn-bn-se-dt-se-in-se, var(--_ctm-rep-dn-bn-se-dt-se-in-se))
443
+ // );
444
+ // height: var(
445
+ // --_ctm-mob-rep-dn-bn-se-dt-se-in-se,
446
+ // var(--_ctm-tab-rep-dn-bn-se-dt-se-in-se, var(--_ctm-rep-dn-bn-se-dt-se-in-se))
447
+ // );
448
+
449
+ // path {
450
+ // stroke: var(
451
+ // --_ctm-mob-rep-dn-bn-se-dt-se-in-c1,
452
+ // var(--_ctm-tab-rep-dn-bn-se-dt-se-in-c1, var(--_ctm-rep-dn-bn-se-dt-se-in-c1))
453
+ // );
454
+ // }
455
+ // }
456
+ // }
457
+ // .btn__with__text {
458
+ // border: none;
459
+ // background-color: transparent;
460
+ // color: var(
461
+ // --_ctm-mob-rep-dn-bn-se-dt-se-cr,
462
+ // var(--_ctm-tab-rep-dn-bn-se-dt-se-cr, var(--_ctm-rep-dn-bn-se-dt-se-cr))
463
+ // );
464
+ // font-family: var(
465
+ // --_ctm-mob-rep-dn-bn-se-dt-se-ft-fy,
466
+ // var(--_ctm-tab-rep-dn-bn-se-dt-se-ft-fy, var(--_ctm-rep-dn-bn-se-dt-se-ft-fy))
467
+ // ),
468
+ // sans-serif;
469
+ // font-size: var(
470
+ // --_ctm-mob-rep-dn-bn-se-dt-se-ft-se,
471
+ // var(--_ctm-tab-rep-dn-bn-se-dt-se-ft-se, var(--_ctm-rep-dn-bn-se-dt-se-ft-se))
472
+ // );
473
+ // font-weight: var(
474
+ // --_ctm-mob-rep-dn-bn-se-dt-se-ft-wt,
475
+ // var(--_ctm-tab-rep-dn-bn-se-dt-se-ft-wt, var(--_ctm-rep-dn-bn-se-dt-se-ft-wt))
476
+ // );
477
+ // font-style: var(
478
+ // --_ctm-mob-rep-dn-bn-se-dt-se-ft-se-ic,
479
+ // var(--_ctm-tab-rep-dn-bn-se-dt-se-ft-se-ic, var(--_ctm-rep-dn-bn-se-dt-se-ft-se-ic))
480
+ // );
481
+ // text-align: var(
482
+ // --_ctm-mob-rep-dn-bn-se-dt-se-tt-an,
483
+ // var(--_ctm-tab-rep-dn-bn-se-dt-se-tt-an, var(--_ctm-rep-dn-bn-se-dt-se-tt-an))
484
+ // );
485
+ // letter-spacing: var(
486
+ // --_ctm-mob-rep-dn-bn-se-dt-se-lr-sg,
487
+ // var(--_ctm-tab-rep-dn-bn-se-dt-se-lr-sg, var(--_ctm-rep-dn-bn-se-dt-se-lr-sg))
488
+ // );
489
+ // line-height: var(
490
+ // --_ctm-mob-rep-dn-bn-se-dt-se-le-ht,
491
+ // var(--_ctm-tab-rep-dn-bn-se-dt-se-le-ht, var(--_ctm-rep-dn-bn-se-dt-se-le-ht))
492
+ // );
493
+ // text-decoration: var(
494
+ // --_ctm-mob-rep-dn-bn-se-dt-se-ue,
495
+ // var(--_ctm-tab-rep-dn-bn-se-dt-se-ue, var(--_ctm-rep-dn-bn-se-dt-se-ue))
496
+ // );
497
+ // }
498
+
499
+ // &:hover {
500
+ // background-color: var(
501
+ // --_sf-at-hr-bd-cr,
502
+ // var(
503
+ // --_ctm-mob-rep-dn-bn-se-hr-se-bd-cr,
504
+ // var(--_ctm-tab-rep-dn-bn-se-hr-se-bd-cr, var(--_ctm-rep-dn-bn-se-hr-se-bd-cr))
505
+ // )
506
+ // );
507
+ // border-color: var(
508
+ // --_sf-at-hr-br-cr,
509
+ // var(
510
+ // --_ctm-mob-rep-dn-bn-se-hr-se-br-cr,
511
+ // var(--_ctm-tab-rep-dn-bn-se-hr-se-br-cr, var(--_ctm-rep-dn-bn-se-hr-se-br-cr))
512
+ // )
513
+ // );
514
+ // border-style: var(
515
+ // --_sf-at-hr-br-se,
516
+ // var(
517
+ // --_ctm-mob-rep-dn-bn-se-hr-se-br-se,
518
+ // var(--_ctm-tab-rep-dn-bn-se-hr-se-br-se, var(--_ctm-rep-dn-bn-se-hr-se-br-se))
519
+ // )
520
+ // );
521
+ // border-width: var(
522
+ // --_sf-at-hr-br-wt,
523
+ // var(
524
+ // --_ctm-mob-rep-dn-bn-se-hr-se-br-wh,
525
+ // var(--_ctm-tab-rep-dn-bn-se-hr-se-br-wh, var(--_ctm-rep-dn-bn-se-hr-se-br-wh))
526
+ // )
527
+ // );
528
+ // border-radius: var(
529
+ // --_sf-at-hr-br-br,
530
+ // var(
531
+ // --_ctm-mob-rep-dn-bn-se-hr-se-br-rs,
532
+ // var(--_ctm-tab-rep-dn-bn-se-hr-se-br-rs, var(--_ctm-rep-dn-bn-se-hr-se-br-rs))
533
+ // )
534
+ // );
535
+ // box-shadow: var(
536
+ // --_hover-show-shadow,
537
+ // var(
538
+ // --_sf-at-hr-bx-sw,
539
+ // var(
540
+ // --_show-shadow,
541
+ // var(
542
+ // --_ctm-mob-rep-dn-bn-se-hr-se-sw-ae,
543
+ // var(--_ctm-tab-rep-dn-bn-se-hr-se-sw-ae, var(--_ctm-rep-dn-bn-se-hr-se-sw-ae))
544
+ // )
545
+ // var(
546
+ // --_ctm-mob-rep-dn-bn-se-hr-se-sw-br,
547
+ // var(--_ctm-tab-rep-dn-bn-se-hr-se-sw-br, var(--_ctm-rep-dn-bn-se-hr-se-sw-br))
548
+ // )
549
+ // var(
550
+ // --_ctm-mob-rep-dn-bn-se-hr-se-sw-sd,
551
+ // var(--_ctm-tab-rep-dn-bn-se-hr-se-sw-sd, var(--_ctm-rep-dn-bn-se-hr-se-sw-sd))
552
+ // )
553
+ // var(
554
+ // --_ctm-mob-rep-dn-bn-se-hr-se-sw-cr,
555
+ // var(--_ctm-tab-rep-dn-bn-se-hr-se-sw-cr, var(--_ctm-rep-dn-bn-se-hr-se-sw-cr))
556
+ // )
557
+ // )
558
+ // )
559
+ // );
560
+
561
+ // .btn__container {
562
+ // gap: var(
563
+ // --_ctm-mob-rep-dn-bn-se-hr-se-in-ad-tt-sg,
564
+ // var(
565
+ // --_ctm-tab-rep-dn-bn-se-hr-se-in-ad-tt-sg,
566
+ // var(--_ctm-rep-dn-bn-se-hr-se-in-ad-tt-sg)
567
+ // )
568
+ // );
569
+ // justify-content: var(
570
+ // --_ctm-mob-rep-dn-bn-se-hr-se-at,
571
+ // var(--_ctm-tab-rep-dn-bn-se-hr-se-at, var(--_ctm-rep-dn-bn-se-hr-se-at))
572
+ // );
573
+
574
+ // &[data-actions-icon-position-hover="left"],
575
+ // &[data-actions-icon-position-hover="center"] {
576
+ // flex-direction: row;
577
+ // }
578
+ // &[data-actions-icon-position-hover="right"] {
579
+ // flex-direction: row-reverse;
580
+ // }
581
+ // span {
582
+ // svg {
583
+ // width: var(
584
+ // --_ctm-mob-rep-dn-bn-se-hr-se-in-se,
585
+ // var(--_ctm-tab-rep-dn-bn-se-hr-se-in-se, var(--_ctm-rep-dn-bn-se-hr-se-in-se))
586
+ // );
587
+ // height: var(
588
+ // --_ctm-mob-rep-dn-bn-se-hr-se-in-se,
589
+ // var(--_ctm-tab-rep-dn-bn-se-hr-se-in-se, var(--_ctm-rep-dn-bn-se-hr-se-in-se))
590
+ // );
591
+
592
+ // path {
593
+ // stroke: var(
594
+ // --_ctm-mob-rep-dn-bn-se-hr-se-in-c1,
595
+ // var(--_ctm-tab-rep-dn-bn-se-hr-se-in-c1, var(--_ctm-rep-dn-bn-se-hr-se-in-c1))
596
+ // );
597
+ // }
598
+ // }
599
+ // }
600
+ // .btn__with__text {
601
+ // border: none;
602
+ // background-color: transparent;
603
+ // color: var(
604
+ // --_ctm-mob-rep-dn-bn-se-hr-se-cr,
605
+ // var(--_ctm-tab-rep-dn-bn-se-hr-se-cr, var(--_ctm-rep-dn-bn-se-hr-se-cr))
606
+ // );
607
+ // font-family: var(
608
+ // --_ctm-mob-rep-dn-bn-se-hr-se-ft-fy,
609
+ // var(--_ctm-tab-rep-dn-bn-se-hr-se-ft-fy, var(--_ctm-rep-dn-bn-se-hr-se-ft-fy))
610
+ // ),
611
+ // sans-serif;
612
+ // font-size: var(
613
+ // --_ctm-mob-rep-dn-bn-se-hr-se-ft-se,
614
+ // var(--_ctm-tab-rep-dn-bn-se-hr-se-ft-se, var(--_ctm-rep-dn-bn-se-hr-se-ft-se))
615
+ // );
616
+ // font-weight: var(
617
+ // --_ctm-mob-rep-dn-bn-se-hr-se-ft-wt,
618
+ // var(--_ctm-tab-rep-dn-bn-se-hr-se-ft-wt, var(--_ctm-rep-dn-bn-se-hr-se-ft-wt))
619
+ // );
620
+ // font-style: var(
621
+ // --_ctm-mob-rep-dn-bn-se-hr-se-ft-se-ic,
622
+ // var(
623
+ // --_ctm-tab-rep-dn-bn-se-hr-se-ft-se-ic,
624
+ // var(--_ctm-rep-dn-bn-se-hr-se-ft-se-ic)
625
+ // )
626
+ // );
627
+ // text-align: var(
628
+ // --_ctm-mob-rep-dn-bn-se-hr-se-tt-an,
629
+ // var(--_ctm-tab-rep-dn-bn-se-hr-se-tt-an, var(--_ctm-rep-dn-bn-se-hr-se-tt-an))
630
+ // );
631
+ // letter-spacing: var(
632
+ // --_ctm-mob-rep-dn-bn-se-hr-se-lr-sg,
633
+ // var(--_ctm-tab-rep-dn-bn-se-hr-se-lr-sg, var(--_ctm-rep-dn-bn-se-hr-se-lr-sg))
634
+ // );
635
+ // line-height: var(
636
+ // --_ctm-mob-rep-dn-bn-se-hr-se-le-ht,
637
+ // var(--_ctm-tab-rep-dn-bn-se-hr-se-le-ht, var(--_ctm-rep-dn-bn-se-hr-se-le-ht))
638
+ // );
639
+ // text-decoration: var(
640
+ // --_ctm-mob-rep-dn-bn-se-hr-se-ue,
641
+ // var(--_ctm-tab-rep-dn-bn-se-hr-se-ue, var(--_ctm-rep-dn-bn-se-hr-se-ue))
642
+ // );
643
+ // }
644
+ // }
645
+ // }
646
+ // }
647
+ // }
648
+ // }
649
+
650
+ .btn__with__text[data-btn-name="loadmoreButton"] {
651
+ justify-content: center;
652
+ &[data-show-shadow="false"] {
653
+ --_show-shadow: none;
654
+ }
655
+ &[data-icon-position="left"] {
656
+ --_sf-fd-bn: row;
657
+ }
658
+ &[data-icon-position="right"] {
659
+ --_sf-fd-bn: row-reverse;
660
+ }
661
+ &[data-icon-position="center"] {
662
+ --_sf-fd-bn: row;
663
+ }
664
+ // &:has(p) {
665
+ // width: auto;
666
+ // }
667
+
668
+ &:hover {
669
+ --_sf-hr-bd-cr: var(
670
+ --_ctm-rep-mob-dn-me-hr-se-bd-cr,
671
+ var(--_ctm-rep-tab-dn-bn-se-hr-se-bd-cr, var(--_ctm-rep-dn-bn-se-hr-se-bd-cr))
672
+ );
673
+ --_sf-hr-br-cr: var(
674
+ --_ctm-rep-mob-dn-bn-se-hr-se-br-cr,
675
+ var(--_ctm-rep-tab-dn-bn-se-hr-se-br-cr, var(--_ctm-rep-dn-bn-se-hr-se-br-cr))
676
+ );
677
+ --_sf-hr-br-se: var(
678
+ --_ctm-rep-mob-dn-bn-se-hr-se-br-se,
679
+ var(--_ctm-rep-tab-dn-bn-se-hr-se-br-se, var(--_ctm-rep-dn-bn-se-hr-se-br-se))
680
+ );
681
+ --_sf-hr-br-wh: var(
682
+ --_ctm-rep-mob-dn-bn-se-hr-se-br-wh,
683
+ var(--_ctm-rep-tab-dn-bn-se-hr-se-br-wh, var(--_ctm-rep-dn-bn-se-hr-se-br-wh))
684
+ );
685
+ --_sf-hr-br-rs: var(
686
+ --_ctm-rep-mob-dn-bn-se-hr-se-br-rs,
687
+ var(--_ctm-rep-tab-dn-bn-se-hr-se-br-rs, var(--_ctm-rep-dn-bn-se-hr-se-br-rs))
688
+ );
689
+ --_sf-hr-at: var(
690
+ --_ctm-rep-mob-dn-bn-se-hr-se-at,
691
+ var(--_ctm-rep-tab-dn-bn-se-hr-se-at, var(--_ctm-rep-dn-bn-se-hr-se-at))
692
+ );
693
+ --_sf-hr-in-ad-tt-sg: var(
694
+ --_ctm-rep-mob-dn-bn-se-hr-se-in-ad-tt-sg,
695
+ var(--_ctm-rep-tab-dn-bn-se-hr-se-in-ad-tt-sg, var(--_ctm-rep-dn-bn-se-hr-se-in-ad-tt-sg))
696
+ );
697
+
698
+ // for shadow
699
+ --_sf-hr-sw-ae: var(
700
+ --_ctm-rep-mob-dn-bn-se-hr-se-sw-ae,
701
+ var(--_ctm-rep-tab-dn-bn-se-hr-se-sw-ae, var(--_ctm-rep-dn-bn-se-hr-se-sw-ae))
702
+ );
703
+ --_sf-hr-sw-br: var(
704
+ --_ctm-rep-mob-dn-bn-se-hr-se-sw-br,
705
+ var(--_ctm-rep-tab-dn-bn-se-hr-se-sw-br, var(--_ctm-rep-dn-bn-se-hr-se-sw-br))
706
+ );
707
+ --_sf-hr-sw-hr: var(
708
+ --_ctm-rep-mob-dn-bn-se-hr-se-sw-hr,
709
+ var(--_ctm-rep-tab-dn-bn-se-hr-se-sw-hr, var(--_ctm-rep-dn-bn-se-hr-se-sw-hr))
710
+ );
711
+ --_sf-hr-sw-cr: var(
712
+ --_ctm-rep-mob-dn-bn-se-hr-se-sw-cr,
713
+ var(--_ctm-rep-tab-dn-bn-se-hr-se-sw-cr, var(--_ctm-rep-dn-bn-se-hr-se-sw-cr))
714
+ );
715
+
716
+ // for font
717
+
718
+ --_sf-hr-cr: var(
719
+ --_ctm-rep-mob-dn-bn-se-hr-se-cr,
720
+ var(--_ctm-rep-tab-dn-bn-se-hr-se-cr, var(--_ctm-rep-dn-bn-se-hr-se-cr))
721
+ );
722
+ --_sf-hr-ft-fy: var(
723
+ --_ctm-rep-mob-dn-bn-se-hr-se-ft-fy,
724
+ var(--_ctm-rep-tab-dn-bn-se-hr-se-ft-fy, var(--_ctm-rep-dn-bn-se-hr-se-ft-fy))
725
+ );
726
+ --_sf-hr-ft-se: var(
727
+ --_ctm-rep-mob-dn-bn-se-hr-se-ft-se,
728
+ var(--_ctm-rep-tab-dn-bn-se-hr-se-ft-se, var(--_ctm-rep-dn-bn-se-hr-se-ft-se))
729
+ );
730
+ --_sf-hr-ft-wt: var(
731
+ --_ctm-rep-mob-dn-bn-se-hr-se-ft-wt,
732
+ var(--_ctm-rep-tab-dn-bn-se-hr-se-ft-wt, var(--_ctm-rep-dn-bn-se-hr-se-ft-wt))
733
+ );
734
+ --_sf-hr-ft-se-ic: var(
735
+ --_ctm-rep-mob-dn-bn-se-hr-se-ft-se-ic,
736
+ var(--_ctm-rep-tab-dn-bn-se-hr-se-ft-se-ic, var(--_ctm-rep-dn-bn-se-hr-se-ft-se-ic))
737
+ );
738
+ --_sf-hr-tt-an: var(
739
+ --_ctm-rep-mob-dn-bn-se-hr-se-tt-an,
740
+ var(--_ctm-rep-tab-dn-bn-se-hr-se-tt-an, var(--_ctm-rep-dn-bn-se-hr-se-tt-an))
741
+ );
742
+ --_sf-hr-lr-sg: var(
743
+ --_ctm-rep-mob-dn-bn-se-hr-se-lr-sg,
744
+ var(--_ctm-rep-tab-dn-bn-se-hr-se-lr-sg, var(--_ctm-rep-dn-bn-se-hr-se-lr-sg))
745
+ );
746
+ --_sf-hr-le-ht: var(
747
+ --_ctm-rep-mob-dn-bn-se-hr-se-le-ht,
748
+ var(--_ctm-rep-tab-dn-bn-se-hr-se-le-ht, var(--_ctm-rep-dn-bn-se-hr-se-le-ht))
749
+ );
750
+
751
+ --_sf-hr-in-se: var(
752
+ --_ctm-rep-mob-dn-bn-se-hr-se-in-se,
753
+ var(--_ctm-rep-tab-dn-bn-se-hr-se-in-se, var(--_ctm-rep-dn-bn-se-hr-se-in-se))
754
+ );
755
+ --_sf-hr-in-se: var(
756
+ --_ctm-rep-mob-dn-bn-se-hr-se-in-se,
757
+ var(--_ctm-rep-tab-dn-bn-se-hr-se-in-se, var(--_ctm-rep-dn-bn-se-hr-se-in-se))
758
+ );
759
+ --_sf-hr-in-c1: var(
760
+ --_ctm-rep-mob-dn-bn-se-hr-se-in-c1,
761
+ var(--_ctm-rep-tab-dn-bn-se-hr-se-in-c1, var(--_ctm-rep-dn-bn-se-hr-se-in-c1))
762
+ );
763
+ --_sf-hr-ue: var(
764
+ --_ctm-rep-mob-dn-bn-se-hr-ue,
765
+ var(--_ctm-rep-tab-dn-bn-se-hr-ue, var(--_ctm-rep-dn-bn-se-hr-ue))
766
+ );
767
+
768
+ // for pading and width
769
+ --_sf-hr-pg: var(
770
+ --_ctm-rep-mob-dn-bn-se-hr-pg,
771
+ var(--_ctm-rep-tab-dn-bn-se-hr-pg, var(--_ctm-rep-dn-bn-se-hr-pg))
772
+ );
773
+ --_sf-hr-wh: var(
774
+ --_ctm-rep-mob-dn-bn-se-hr-wh,
775
+ var(--_ctm-rep-tab-dn-bn-se-hr-wh, var(--_ctm-rep-dn-bn-se-hr-wh))
776
+ );
777
+
778
+ &[data-hover-show-shadow="false"] {
779
+ --_hover-show-shadow: none;
780
+ }
781
+ &[data-hover-show-icon="false"] {
782
+ --_hover-show-icon: none;
783
+ }
784
+ }
785
+ background-color: var(--_sf-hr-bd-cr, prepareMediaVariable(--_ctm-rep-dn-bn-se-dt-se-bd-cr));
786
+
787
+ padding: var(--_sf-hr-pg, prepareMediaVariable(--_ctm-rep-dn-bn-se-dt-se-pg));
788
+ width: var(--_sf-hr-wh, prepareMediaVariable(--_ctm-rep-dn-bn-se-dt-se-wh));
339
789
  display: flex;
790
+ flex-direction: var(--_sf-fd-bn);
340
791
  align-items: center;
341
- justify-content: center;
342
792
 
343
- width: 100%;
344
- .action__button {
793
+ justify-content: var(--_sf-hr-at, prepareMediaVariable(--_ctm-rep-dn-bn-se-dt-se-at));
794
+ gap: var(--_sf-hr-in-ad-tt-sg, prepareMediaVariable(--_ctm-rep-dn-bn-se-dt-se-in-ad-tt-sg));
795
+
796
+ border-radius: var(--_sf-hr-br-rs, prepareMediaVariable(--_ctm-rep-dn-bn-se-dt-se-br-rs));
797
+
798
+ box-shadow: var(--_sf-hr-sw-ae, prepareMediaVariable(--_ctm-rep-dn-bn-se-dt-se-sw-ae))
799
+ var(--_sf-hr-sw-br, prepareMediaVariable(--_ctm-rep-dn-bn-se-dt-se-sw-br))
800
+ var(--_sf-hr-sw-sd, prepareMediaVariable(--_ctm-rep-dn-bn-se-dt-se-sw-sd))
801
+ var(--_sf-hr-sw-cr, prepareMediaVariable(--_ctm-rep-dn-bn-se-dt-se-sw-cr));
802
+
803
+ &[data-show-border="true"] {
804
+ border-color: var(--_sf-hr-br-cr, prepareMediaVariable(--_ctm-rep-dn-bn-se-dt-se-br-cr));
805
+
806
+ border-style: var(--_sf-hr-br-se, prepareMediaVariable(--_ctm-rep-dn-bn-se-dt-se-br-se));
807
+
808
+ border-width: var(--_sf-hr-br-wh, prepareMediaVariable(--_ctm-rep-dn-bn-se-dt-se-br-wh));
809
+ }
810
+
811
+ .txt {
345
812
  display: flex;
346
- align-items: center;
347
- height: 40px;
348
- cursor: pointer;
349
- .btn__container {
350
- display: flex;
351
- align-items: center;
352
- justify-content: center;
353
- gap: 10px;
354
- height: 100%;
355
- width: 100%;
356
- padding: 16px;
357
- .btn__with__text {
358
- height: 2.5rem;
359
- }
360
- }
361
- &.loadMore {
362
- background-color: var(
363
- --_sf-at-hr-bd-cr,
364
- var(
365
- --_ctm-mob-rep-dn-bn-se-dt-se-bd-cr,
366
- var(--_ctm-tab-rep-dn-bn-se-dt-se-bd-cr, var(--_ctm-rep-dn-bn-se-dt-se-bd-cr))
367
- )
368
- );
369
- border-color: var(
370
- --_sf-at-hr-br-cr,
371
- var(
372
- --_ctm-mob-rep-dn-bn-se-dt-se-br-cr,
373
- var(--_ctm-tab-rep-dn-bn-se-dt-se-br-cr, var(--_ctm-rep-dn-bn-se-dt-se-br-cr))
374
- )
375
- );
376
- border-style: var(
377
- --_sf-at-hr-br-se,
378
- var(
379
- --_ctm-mob-rep-dn-bn-se-dt-se-br-se,
380
- var(--_ctm-tab-rep-dn-bn-se-dt-se-br-se, var(--_ctm-rep-dn-bn-se-dt-se-br-se))
381
- )
382
- );
383
- border-width: var(
384
- --_sf-at-hr-br-wt,
385
- var(
386
- --_ctm-mob-rep-dn-bn-se-dt-se-br-wh,
387
- var(--_ctm-tab-rep-dn-bn-se-dt-se-br-wh, var(--_ctm-rep-dn-bn-se-dt-se-br-wh))
388
- )
389
- );
390
- border-radius: var(
391
- --_sf-at-hr-br-br,
392
- var(
393
- --_ctm-mob-rep-dn-bn-se-dt-se-br-rs,
394
- var(--_ctm-tab-rep-dn-bn-se-dt-se-br-rs, var(--_ctm-rep-dn-bn-se-dt-se-br-rs))
395
- )
396
- );
397
813
 
398
- box-shadow: var(
399
- --_hover-show-shadow,
400
- var(
401
- --_sf-at-hr-bx-sw,
402
- var(
403
- --_show-shadow,
404
- var(
405
- --_ctm-mob-rep-dn-bn-se-dt-se-sw-ae,
406
- var(--_ctm-tab-rep-dn-bn-se-dt-se-sw-ae, var(--_ctm-rep-dn-bn-se-dt-se-sw-ae))
407
- )
408
- var(
409
- --_ctm-mob-rep-dn-bn-se-dt-se-sw-br,
410
- var(--_ctm-tab-rep-dn-bn-se-dt-se-sw-br, var(--_ctm-rep-dn-bn-se-dt-se-sw-br))
411
- )
412
- var(
413
- --_ctm-mob-rep-dn-bn-se-dt-se-sw-sd,
414
- var(--_ctm-tab-rep-dn-bn-se-dt-se-sw-sd, var(--_ctm-rep-dn-bn-se-dt-se-sw-sd))
415
- )
416
- var(
417
- --_ctm-mob-rep-dn-bn-se-dt-se-sw-cr,
418
- var(--_ctm-tab-rep-dn-bn-se-dt-se-sw-cr, var(--_ctm-rep-dn-bn-se-dt-se-sw-cr))
419
- )
420
- )
421
- )
422
- );
814
+ color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-rep-dn-bn-se-dt-se-cr));
423
815
 
424
- .btn__container {
425
- gap: var(
426
- --_ctm-mob-rep-dn-bn-se-dt-se-in-ad-tt-sg,
427
- var(
428
- --_ctm-tab-rep-dn-bn-se-dt-se-in-ad-tt-sg,
429
- var(--_ctm-rep-dn-bn-se-dt-se-in-ad-tt-sg)
430
- )
431
- );
432
- justify-content: var(
433
- --_ctm-mob-rep-dn-bn-se-dt-se-at,
434
- var(--_ctm-tab-rep-dn-bn-se-dt-se-at, var(--_ctm-rep-dn-bn-se-dt-se-at))
435
- );
816
+ font-family:
817
+ var(--_sf-hr-ft-fy, prepareMediaVariable(--_ctm-rep-dn-bn-se-dt-se-ft-fy)), sans-serif;
436
818
 
437
- &[data-actions-icon-position="left"],
438
- &[data-actions-icon-position="center"] {
439
- flex-direction: row;
440
- }
441
- &[data-actions-icon-position="right"] {
442
- flex-direction: row-reverse;
443
- }
444
- span {
445
- svg {
446
- width: var(
447
- --_ctm-mob-rep-dn-bn-se-dt-se-in-se,
448
- var(--_ctm-tab-rep-dn-bn-se-dt-se-in-se, var(--_ctm-rep-dn-bn-se-dt-se-in-se))
449
- );
450
- height: var(
451
- --_ctm-mob-rep-dn-bn-se-dt-se-in-se,
452
- var(--_ctm-tab-rep-dn-bn-se-dt-se-in-se, var(--_ctm-rep-dn-bn-se-dt-se-in-se))
453
- );
819
+ font-size: var(--_sf-hr-ft-se, prepareMediaVariable(--_ctm-rep-dn-bn-se-dt-se-ft-se));
454
820
 
455
- path {
456
- stroke: var(
457
- --_ctm-mob-rep-dn-bn-se-dt-se-in-c1,
458
- var(--_ctm-tab-rep-dn-bn-se-dt-se-in-c1, var(--_ctm-rep-dn-bn-se-dt-se-in-c1))
459
- );
460
- }
461
- }
462
- }
463
- .btn__with__text {
464
- border: none;
465
- background-color: transparent;
466
- color: var(
467
- --_ctm-mob-rep-dn-bn-se-dt-se-cr,
468
- var(--_ctm-tab-rep-dn-bn-se-dt-se-cr, var(--_ctm-rep-dn-bn-se-dt-se-cr))
469
- );
470
- font-family:
471
- var(
472
- --_ctm-mob-rep-dn-bn-se-dt-se-ft-fy,
473
- var(--_ctm-tab-rep-dn-bn-se-dt-se-ft-fy, var(--_ctm-rep-dn-bn-se-dt-se-ft-fy))
474
- ),
475
- sans-serif;
476
- font-size: var(
477
- --_ctm-mob-rep-dn-bn-se-dt-se-ft-se,
478
- var(--_ctm-tab-rep-dn-bn-se-dt-se-ft-se, var(--_ctm-rep-dn-bn-se-dt-se-ft-se))
479
- );
480
- font-weight: var(
481
- --_ctm-mob-rep-dn-bn-se-dt-se-ft-wt,
482
- var(--_ctm-tab-rep-dn-bn-se-dt-se-ft-wt, var(--_ctm-rep-dn-bn-se-dt-se-ft-wt))
483
- );
484
- font-style: var(
485
- --_ctm-mob-rep-dn-bn-se-dt-se-ft-se-ic,
486
- var(--_ctm-tab-rep-dn-bn-se-dt-se-ft-se-ic, var(--_ctm-rep-dn-bn-se-dt-se-ft-se-ic))
487
- );
488
- text-align: var(
489
- --_ctm-mob-rep-dn-bn-se-dt-se-tt-an,
490
- var(--_ctm-tab-rep-dn-bn-se-dt-se-tt-an, var(--_ctm-rep-dn-bn-se-dt-se-tt-an))
491
- );
492
- letter-spacing: var(
493
- --_ctm-mob-rep-dn-bn-se-dt-se-lr-sg,
494
- var(--_ctm-tab-rep-dn-bn-se-dt-se-lr-sg, var(--_ctm-rep-dn-bn-se-dt-se-lr-sg))
495
- );
496
- line-height: var(
497
- --_ctm-mob-rep-dn-bn-se-dt-se-le-ht,
498
- var(--_ctm-tab-rep-dn-bn-se-dt-se-le-ht, var(--_ctm-rep-dn-bn-se-dt-se-le-ht))
499
- );
500
- text-decoration: var(
501
- --_ctm-mob-rep-dn-bn-se-dt-se-ue,
502
- var(--_ctm-tab-rep-dn-bn-se-dt-se-ue, var(--_ctm-rep-dn-bn-se-dt-se-ue))
503
- );
504
- }
821
+ font-weight: var(--_sf-hr-ft-wt, prepareMediaVariable(--_ctm-rep-dn-bn-se-dt-se-ft-wt));
505
822
 
506
- &:hover {
507
- background-color: var(
508
- --_sf-at-hr-bd-cr,
509
- var(
510
- --_ctm-mob-rep-dn-bn-se-hr-se-bd-cr,
511
- var(--_ctm-tab-rep-dn-bn-se-hr-se-bd-cr, var(--_ctm-rep-dn-bn-se-hr-se-bd-cr))
512
- )
513
- );
514
- border-color: var(
515
- --_sf-at-hr-br-cr,
516
- var(
517
- --_ctm-mob-rep-dn-bn-se-hr-se-br-cr,
518
- var(--_ctm-tab-rep-dn-bn-se-hr-se-br-cr, var(--_ctm-rep-dn-bn-se-hr-se-br-cr))
519
- )
520
- );
521
- border-style: var(
522
- --_sf-at-hr-br-se,
523
- var(
524
- --_ctm-mob-rep-dn-bn-se-hr-se-br-se,
525
- var(--_ctm-tab-rep-dn-bn-se-hr-se-br-se, var(--_ctm-rep-dn-bn-se-hr-se-br-se))
526
- )
527
- );
528
- border-width: var(
529
- --_sf-at-hr-br-wt,
530
- var(
531
- --_ctm-mob-rep-dn-bn-se-hr-se-br-wh,
532
- var(--_ctm-tab-rep-dn-bn-se-hr-se-br-wh, var(--_ctm-rep-dn-bn-se-hr-se-br-wh))
533
- )
534
- );
535
- border-radius: var(
536
- --_sf-at-hr-br-br,
537
- var(
538
- --_ctm-mob-rep-dn-bn-se-hr-se-br-rs,
539
- var(--_ctm-tab-rep-dn-bn-se-hr-se-br-rs, var(--_ctm-rep-dn-bn-se-hr-se-br-rs))
540
- )
541
- );
542
- box-shadow: var(
543
- --_hover-show-shadow,
544
- var(
545
- --_sf-at-hr-bx-sw,
546
- var(
547
- --_show-shadow,
548
- var(
549
- --_ctm-mob-rep-dn-bn-se-hr-se-sw-ae,
550
- var(
551
- --_ctm-tab-rep-dn-bn-se-hr-se-sw-ae,
552
- var(--_ctm-rep-dn-bn-se-hr-se-sw-ae)
553
- )
554
- )
555
- var(
556
- --_ctm-mob-rep-dn-bn-se-hr-se-sw-br,
557
- var(
558
- --_ctm-tab-rep-dn-bn-se-hr-se-sw-br,
559
- var(--_ctm-rep-dn-bn-se-hr-se-sw-br)
560
- )
561
- )
562
- var(
563
- --_ctm-mob-rep-dn-bn-se-hr-se-sw-sd,
564
- var(
565
- --_ctm-tab-rep-dn-bn-se-hr-se-sw-sd,
566
- var(--_ctm-rep-dn-bn-se-hr-se-sw-sd)
567
- )
568
- )
569
- var(
570
- --_ctm-mob-rep-dn-bn-se-hr-se-sw-cr,
571
- var(
572
- --_ctm-tab-rep-dn-bn-se-hr-se-sw-cr,
573
- var(--_ctm-rep-dn-bn-se-hr-se-sw-cr)
574
- )
575
- )
576
- )
577
- )
578
- );
823
+ font-style: var(
824
+ --_sf-hr-ft-se-ic,
825
+ prepareMediaVariable(--_ctm-rep-dn-bn-se-dt-se-ft-se-ic)
826
+ );
579
827
 
580
- .btn__container {
581
- gap: var(
582
- --_ctm-mob-rep-dn-bn-se-hr-se-in-ad-tt-sg,
583
- var(
584
- --_ctm-tab-rep-dn-bn-se-hr-se-in-ad-tt-sg,
585
- var(--_ctm-rep-dn-bn-se-hr-se-in-ad-tt-sg)
586
- )
587
- );
588
- justify-content: var(
589
- --_ctm-mob-rep-dn-bn-se-hr-se-at,
590
- var(--_ctm-tab-rep-dn-bn-se-hr-se-at, var(--_ctm-rep-dn-bn-se-hr-se-at))
591
- );
828
+ text-align: var(--_sf-hr-tt-an, prepareMediaVariable(--_ctm-rep-dn-bn-se-dt-se-tt-an));
592
829
 
593
- &[data-actions-icon-position-hover="left"],
594
- &[data-actions-icon-position-hover="center"] {
595
- flex-direction: row;
596
- }
597
- &[data-actions-icon-position-hover="right"] {
598
- flex-direction: row-reverse;
599
- }
600
- span {
601
- svg {
602
- width: var(
603
- --_ctm-mob-rep-dn-bn-se-hr-se-in-se,
604
- var(--_ctm-tab-rep-dn-bn-se-hr-se-in-se, var(--_ctm-rep-dn-bn-se-hr-se-in-se))
605
- );
606
- height: var(
607
- --_ctm-mob-rep-dn-bn-se-hr-se-in-se,
608
- var(--_ctm-tab-rep-dn-bn-se-hr-se-in-se, var(--_ctm-rep-dn-bn-se-hr-se-in-se))
609
- );
830
+ letter-spacing: var(--_sf-hr-lr-sg, prepareMediaVariable(--_ctm-rep-dn-bn-se-dt-se-lr-sg));
610
831
 
611
- path {
612
- stroke: var(
613
- --_ctm-mob-rep-dn-bn-se-hr-se-in-c1,
614
- var(
615
- --_ctm-tab-rep-dn-bn-se-hr-se-in-c1,
616
- var(--_ctm-rep-dn-bn-se-hr-se-in-c1)
617
- )
618
- );
619
- }
620
- }
621
- }
622
- .btn__with__text {
623
- border: none;
624
- background-color: transparent;
625
- color: var(
626
- --_ctm-mob-rep-dn-bn-se-hr-se-cr,
627
- var(--_ctm-tab-rep-dn-bn-se-hr-se-cr, var(--_ctm-rep-dn-bn-se-hr-se-cr))
628
- );
629
- font-family:
630
- var(
631
- --_ctm-mob-rep-dn-bn-se-hr-se-ft-fy,
632
- var(--_ctm-tab-rep-dn-bn-se-hr-se-ft-fy, var(--_ctm-rep-dn-bn-se-hr-se-ft-fy))
633
- ),
634
- sans-serif;
635
- font-size: var(
636
- --_ctm-mob-rep-dn-bn-se-hr-se-ft-se,
637
- var(--_ctm-tab-rep-dn-bn-se-hr-se-ft-se, var(--_ctm-rep-dn-bn-se-hr-se-ft-se))
638
- );
639
- font-weight: var(
640
- --_ctm-mob-rep-dn-bn-se-hr-se-ft-wt,
641
- var(--_ctm-tab-rep-dn-bn-se-hr-se-ft-wt, var(--_ctm-rep-dn-bn-se-hr-se-ft-wt))
642
- );
643
- font-style: var(
644
- --_ctm-mob-rep-dn-bn-se-hr-se-ft-se-ic,
645
- var(
646
- --_ctm-tab-rep-dn-bn-se-hr-se-ft-se-ic,
647
- var(--_ctm-rep-dn-bn-se-hr-se-ft-se-ic)
648
- )
649
- );
650
- text-align: var(
651
- --_ctm-mob-rep-dn-bn-se-hr-se-tt-an,
652
- var(--_ctm-tab-rep-dn-bn-se-hr-se-tt-an, var(--_ctm-rep-dn-bn-se-hr-se-tt-an))
653
- );
654
- letter-spacing: var(
655
- --_ctm-mob-rep-dn-bn-se-hr-se-lr-sg,
656
- var(--_ctm-tab-rep-dn-bn-se-hr-se-lr-sg, var(--_ctm-rep-dn-bn-se-hr-se-lr-sg))
657
- );
658
- line-height: var(
659
- --_ctm-mob-rep-dn-bn-se-hr-se-le-ht,
660
- var(--_ctm-tab-rep-dn-bn-se-hr-se-le-ht, var(--_ctm-rep-dn-bn-se-hr-se-le-ht))
661
- );
662
- text-decoration: var(
663
- --_ctm-mob-rep-dn-bn-se-hr-se-ue,
664
- var(--_ctm-tab-rep-dn-bn-se-hr-se-ue, var(--_ctm-rep-dn-bn-se-hr-se-ue))
665
- );
666
- }
667
- }
668
- }
832
+ line-height: var(--_sf-hr-le-ht, prepareMediaVariable(--_ctm-rep-dn-bn-se-dt-se-le-ht));
833
+
834
+ text-decoration: var(--_sf-hr-ue, prepareMediaVariable(--_ctm-rep-dn-dt-ue));
835
+ }
836
+
837
+ .icon {
838
+ display: var(--_hover-show-icon, var(--_show-icon, flex));
839
+ svg {
840
+ width: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-rep-dn-bn-se-dt-se-in-se));
841
+ height: var(--_sf-hr-in-se, prepareMediaVariable(--_ctm-rep-dn-bn-se-dt-se-in-se));
842
+
843
+ path {
844
+ stroke: var(--_sf-hr-in-c1, prepareMediaVariable(--_ctm-rep-dn-bn-se-dt-se-in-c1));
669
845
  }
670
846
  }
671
847
  }
848
+ [data-element-style="Text"] {
849
+ display: inline-block;
850
+ width: 100%;
851
+ }
672
852
  }
673
853
 
674
854
  // &[data-view-state="full"] {
@@ -97,7 +97,10 @@
97
97
  .quote-item__header {
98
98
  margin-bottom: 16px;
99
99
  padding-bottom: 16px;
100
+ display: flex;
100
101
  border-bottom: 1px dotted #d0d0d0;
102
+ flex-direction: column;
103
+ gap: 4px;
101
104
 
102
105
  .quote-item__title {
103
106
  font-size: 16px;
@@ -109,7 +112,8 @@
109
112
  display: flex;
110
113
  gap: 10px;
111
114
  font-size: 14px;
112
- color: var(--_gray-500);
115
+ font-weight: 400;
116
+ // color: var(--_gray-500);
113
117
  }
114
118
  }
115
119
 
@@ -129,19 +133,26 @@
129
133
  label {
130
134
  margin-bottom: 6px;
131
135
  font-weight: 500;
132
- color: #333;
136
+ font-size: 14px;
137
+ // color: #333;
133
138
  }
134
139
 
135
140
  .value {
141
+ // font-weight: 600;
142
+ // font-size: 16px;
143
+ // // color: #111;
144
+
136
145
  font-weight: 600;
137
146
  font-size: 16px;
138
- color: #111;
147
+ height: 39px;
148
+ display: flex;
149
+ align-items: center;
139
150
  }
140
151
 
141
152
  input {
142
153
  height: 40px;
143
154
  padding: 8px 12px;
144
- font-size: 15px;
155
+ font-size: 14px;
145
156
  border: 1px solid #ccc;
146
157
  border-radius: 4px;
147
158
  outline: none;
@@ -207,29 +218,32 @@
207
218
 
208
219
  .label {
209
220
  font-size: 14px;
210
- color: #444;
221
+ // color: #444;
211
222
  }
212
223
 
213
224
  .amount {
214
225
  font-size: 18px;
215
226
  font-weight: 700;
216
- color: #111;
227
+ // color: #111;
217
228
  }
218
229
  }
219
230
 
220
231
  small {
221
232
  font-size: 13px;
222
- color: #888;
233
+ // color: #888;
223
234
  margin-top: 4px;
235
+ text-align: end;
236
+ display: flex;
237
+ justify-content: end;
224
238
  }
225
239
 
226
240
  &.discounted {
227
241
  .label {
228
- color: #198754;
242
+ color: #039855;
229
243
  }
230
244
 
231
245
  .amount {
232
- color: #198754;
246
+ color: #039855;
233
247
  }
234
248
  }
235
249
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sc-360-v2/storefront-cms-library",
3
- "version": "0.3.73",
3
+ "version": "0.3.74",
4
4
  "main": "/dist/index.js",
5
5
  "types": "./dist/index.d.ts",
6
6
  "exports": {