@sc-360-v2/storefront-cms-library 0.3.3 → 0.3.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.
- package/dist/builder.js +1 -1
- package/dist/bundleDetails.scss +45 -20
- package/dist/button copy.scss +275 -0
- package/dist/button.scss +73 -196
- package/dist/checkout.scss +1 -2
- package/dist/dropdownTemplate.scss +11 -0
- package/dist/layouter-pro-item.scss +2 -1
- package/dist/layouter-pro.scss +7 -0
- package/dist/product-actions copy.scss +2783 -0
- package/dist/product-actions.scss +1912 -2640
- package/dist/product-options.scss +144 -19
- package/dist/types/builder/tools/element-edit/common.d.ts +1 -0
- package/dist/types/builder/tools/element-edit/filters.d.ts +39 -1
- package/dist/types/builder/tools/element-edit/layouterPro.d.ts +5 -11
- package/dist/types/builder/tools/element-edit/productActions.d.ts +3 -2
- package/dist/types/global/types.d.ts +1 -0
- package/dist/variant-picker.scss +174 -52
- package/package.json +1 -1
package/dist/variant-picker.scss
CHANGED
|
@@ -248,13 +248,15 @@ $minWidth: 70px;
|
|
|
248
248
|
box-sizing: border-box;
|
|
249
249
|
}
|
|
250
250
|
&[data-swatch-shape="circle"] {
|
|
251
|
-
& div
|
|
251
|
+
& div,
|
|
252
|
+
.product-select-image {
|
|
252
253
|
border-radius: 50%;
|
|
253
254
|
}
|
|
254
255
|
// border-radius: 50%;
|
|
255
256
|
}
|
|
256
257
|
&[data-swatch-shape="capsule"] {
|
|
257
|
-
& div
|
|
258
|
+
& div,
|
|
259
|
+
.product-select-image {
|
|
258
260
|
// border-radius: 50%;
|
|
259
261
|
width: 100%;
|
|
260
262
|
height: 100%;
|
|
@@ -303,17 +305,20 @@ $minWidth: 70px;
|
|
|
303
305
|
// );
|
|
304
306
|
}
|
|
305
307
|
&[data-swatch-shape-selected="circle"] {
|
|
306
|
-
& div
|
|
308
|
+
& div,
|
|
309
|
+
.product-select-image {
|
|
307
310
|
border-radius: 50%;
|
|
308
311
|
}
|
|
309
312
|
}
|
|
310
313
|
&[data-swatch-shape-selected="capsule"] {
|
|
311
|
-
& div
|
|
314
|
+
& div,
|
|
315
|
+
.product-select-image {
|
|
312
316
|
border-radius: 50%;
|
|
313
317
|
}
|
|
314
318
|
}
|
|
315
319
|
&[data-swatch-shape-selected="square"] {
|
|
316
|
-
& div
|
|
320
|
+
& div,
|
|
321
|
+
.product-select-image {
|
|
317
322
|
border-radius: 5px;
|
|
318
323
|
}
|
|
319
324
|
}
|
|
@@ -377,19 +382,21 @@ $minWidth: 70px;
|
|
|
377
382
|
// );
|
|
378
383
|
}
|
|
379
384
|
&[data-swatch-shape-hover="circle"] {
|
|
380
|
-
& div
|
|
385
|
+
& div,
|
|
386
|
+
.product-select-image {
|
|
381
387
|
border-radius: 50%;
|
|
382
|
-
width: var(--_ctm-lt-sh-im-se);
|
|
383
388
|
}
|
|
384
389
|
// border-radius: 50%;
|
|
385
390
|
}
|
|
386
391
|
&[data-swatch-shape-hover="capsule"] {
|
|
387
|
-
& div
|
|
392
|
+
& div,
|
|
393
|
+
.product-select-image {
|
|
388
394
|
border-radius: 50%;
|
|
389
395
|
}
|
|
390
396
|
}
|
|
391
397
|
&[data-swatch-shape-hover="square"] {
|
|
392
|
-
& div
|
|
398
|
+
& div,
|
|
399
|
+
.product-select-image {
|
|
393
400
|
border-radius: 5px;
|
|
394
401
|
}
|
|
395
402
|
}
|
|
@@ -484,13 +491,14 @@ $minWidth: 70px;
|
|
|
484
491
|
box-sizing: border-box;
|
|
485
492
|
}
|
|
486
493
|
&[data-swatch-shape-selected="circle"] {
|
|
487
|
-
& div
|
|
494
|
+
& div,
|
|
495
|
+
.product-select-image {
|
|
488
496
|
border-radius: 50%;
|
|
489
|
-
width: var(--_ctm-lt-sh-im-se);
|
|
490
497
|
}
|
|
491
498
|
}
|
|
492
499
|
&[data-swatch-shape-selected="capsule"] {
|
|
493
|
-
& div
|
|
500
|
+
& div,
|
|
501
|
+
.product-select-image {
|
|
494
502
|
// border-radius: 50%;
|
|
495
503
|
width: 100%;
|
|
496
504
|
height: 100%;
|
|
@@ -498,7 +506,8 @@ $minWidth: 70px;
|
|
|
498
506
|
}
|
|
499
507
|
}
|
|
500
508
|
&[data-swatch-shape-selected="square"] {
|
|
501
|
-
& div
|
|
509
|
+
& div,
|
|
510
|
+
.product-select-image {
|
|
502
511
|
border-radius: 5px;
|
|
503
512
|
}
|
|
504
513
|
}
|
|
@@ -557,10 +566,10 @@ $minWidth: 70px;
|
|
|
557
566
|
var(--_ctm-tab-lt-on-te-ve-sg, var(--_ctm-lt-on-te-ve-sg))
|
|
558
567
|
);
|
|
559
568
|
|
|
560
|
-
padding: var(
|
|
561
|
-
|
|
562
|
-
|
|
563
|
-
);
|
|
569
|
+
// padding: var(
|
|
570
|
+
// --_ctm-mob-lt-se-st-dy-se-im-pg,
|
|
571
|
+
// var(--_ctm-tab-lt-se-st-dy-se-im-pg, var(--_ctm-lt-se-st-dy-se-im-pg))
|
|
572
|
+
// );
|
|
564
573
|
|
|
565
574
|
.select__group {
|
|
566
575
|
display: flex;
|
|
@@ -674,13 +683,19 @@ $minWidth: 70px;
|
|
|
674
683
|
|
|
675
684
|
.select__group__item {
|
|
676
685
|
transition: color 0.3s ease;
|
|
677
|
-
|
|
678
|
-
border
|
|
679
|
-
border: 1px solid var(--_gray-200);
|
|
680
|
-
font-size: 16px;
|
|
681
|
-
font-weight: 600;
|
|
686
|
+
// border-radius: 6px;
|
|
687
|
+
// border: 1px solid var(--_gray-200);
|
|
682
688
|
cursor: pointer;
|
|
683
|
-
|
|
689
|
+
display: flex;
|
|
690
|
+
align-items: center;
|
|
691
|
+
justify-content: center;
|
|
692
|
+
|
|
693
|
+
// height: prepareMediaVariable(--_ctm-lt-se-st-dy-se-im-se);
|
|
694
|
+
// width: prepareMediaVariable(--_ctm-lt-se-st-dy-se-im-se);
|
|
695
|
+
padding: prepareMediaVariable(--_ctm-lt-se-st-dy-se-im-pg);
|
|
696
|
+
min-width: 20px;
|
|
697
|
+
min-height: 20px;
|
|
698
|
+
box-sizing: content-box;
|
|
684
699
|
border-radius: var(
|
|
685
700
|
--_ctm-mob-dn-se-on-ve-se-dt-se-br-rs,
|
|
686
701
|
var(--_ctm-tab-dn-se-on-ve-se-dt-se-br-rs, var(--_ctm-dn-se-on-ve-se-dt-se-br-rs))
|
|
@@ -715,64 +730,49 @@ $minWidth: 70px;
|
|
|
715
730
|
// font is pending
|
|
716
731
|
|
|
717
732
|
color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-cr));
|
|
718
|
-
|
|
719
733
|
font-family: var(
|
|
720
734
|
--_sf-hr-ft-fy,
|
|
721
735
|
prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-ft-fy)
|
|
722
736
|
),
|
|
723
737
|
sans-serif;
|
|
724
|
-
|
|
725
738
|
font-size: var(
|
|
726
739
|
--_sf-hr-ft-se,
|
|
727
740
|
prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-ft-se)
|
|
728
741
|
);
|
|
729
|
-
|
|
730
742
|
font-weight: var(
|
|
731
743
|
--_sf-hr-ft-wt,
|
|
732
744
|
prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-ft-wt)
|
|
733
745
|
);
|
|
734
|
-
|
|
735
746
|
font-style: var(
|
|
736
747
|
--_sf-hr-ft-se-ic,
|
|
737
748
|
prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-ft-se-ic)
|
|
738
749
|
);
|
|
739
|
-
|
|
740
750
|
text-align: var(
|
|
741
751
|
--_sf-hr-tt-an,
|
|
742
752
|
prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-tt-an)
|
|
743
753
|
);
|
|
744
|
-
|
|
745
754
|
letter-spacing: var(
|
|
746
755
|
--_sf-hr-lr-sg,
|
|
747
756
|
prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-lr-sg)
|
|
748
757
|
);
|
|
749
|
-
|
|
750
758
|
line-height: var(
|
|
751
759
|
--_sf-hr-le-ht,
|
|
752
|
-
prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-le-ht)
|
|
753
|
-
);
|
|
754
|
-
text-decoration: var(
|
|
755
|
-
--_ctm-mob-dn-se-on-ve-se-dt-se-ue,
|
|
756
|
-
var(--_ctm-tab-dn-se-on-ve-se-dt-se-ue, var(--_ctm-dn-se-on-ve-se-dt-se-ue))
|
|
760
|
+
prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-le-ht-dc)
|
|
757
761
|
);
|
|
758
|
-
|
|
759
762
|
text-decoration: var(
|
|
760
|
-
--_sf-hr-
|
|
761
|
-
prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-
|
|
763
|
+
--_sf-hr-ue,
|
|
764
|
+
prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-ue)
|
|
762
765
|
);
|
|
763
766
|
|
|
764
|
-
&[data-
|
|
765
|
-
border-radius:
|
|
767
|
+
&[data-background-shape="circle"] {
|
|
768
|
+
border-radius: 50%;
|
|
766
769
|
}
|
|
767
|
-
&[data-
|
|
768
|
-
|
|
769
|
-
border-radius: 0;
|
|
770
|
+
&[data-background-shape="square"] {
|
|
771
|
+
border-radius: 5px;
|
|
770
772
|
}
|
|
771
|
-
&[data-
|
|
772
|
-
border-radius:
|
|
773
|
-
|
|
774
|
-
var(--_ctm-tab-dn-se-on-ve-se-dt-se-br-rs, var(--_ctm-dn-se-on-ve-se-dt-se-br-rs))
|
|
775
|
-
);
|
|
773
|
+
&[data-background-shape="capsule"] {
|
|
774
|
+
border-radius: 30px; /* Full pill shape */
|
|
775
|
+
box-sizing: border-box;
|
|
776
776
|
}
|
|
777
777
|
|
|
778
778
|
&:hover {
|
|
@@ -799,21 +799,64 @@ $minWidth: 70px;
|
|
|
799
799
|
|
|
800
800
|
// new
|
|
801
801
|
--_sf-hr-sw-ae: var(
|
|
802
|
-
--_ctm-mob-dn-on-ve-se-hr-se-sw-ae,
|
|
802
|
+
--_ctm-mob-dn-se-on-ve-se-hr-se-sw-ae,
|
|
803
803
|
var(--_ctm-tab-dn-se-on-ve-se-hr-se-sw-ae, var(--_ctm-dn-se-on-ve-se-hr-se-sw-ae))
|
|
804
804
|
);
|
|
805
805
|
--_sf-hr-sw-br: var(
|
|
806
|
-
--_ctm-mob-dn-on-ve-se-hr-se-sw-br,
|
|
806
|
+
--_ctm-mob-dn-se-on-ve-se-hr-se-sw-br,
|
|
807
807
|
var(--_ctm-tab-dn-se-on-ve-se-hr-se-sw-br, var(--_ctm-dn-se-on-ve-se-hr-se-sw-br))
|
|
808
808
|
);
|
|
809
809
|
--_sf-hr-sw-hr: var(
|
|
810
|
-
--_ctm-mob-dn-on-ve-se-hr-se-sw-hr,
|
|
810
|
+
--_ctm-mob-dn-se-on-ve-se-hr-se-sw-hr,
|
|
811
811
|
var(--_ctm-tab-dn-se-on-ve-se-hr-se-sw-hr, var(--_ctm-dn-se-on-ve-se-hr-se-sw-hr))
|
|
812
812
|
);
|
|
813
813
|
--_sf-hr-sw-cr: var(
|
|
814
|
-
--_ctm-mob-dn-on-ve-se-hr-se-sw-cr,
|
|
814
|
+
--_ctm-mob-dn-se-on-ve-se-hr-se-sw-cr,
|
|
815
815
|
var(--_ctm-tab-dn-se-on-ve-se-hr-se-sw-cr, var(--_ctm-dn-se-on-ve-se-hr-se-sw-cr))
|
|
816
816
|
);
|
|
817
|
+
|
|
818
|
+
// for font
|
|
819
|
+
|
|
820
|
+
--_sf-hr-cr: var(
|
|
821
|
+
--_ctm-mob-dn-se-on-ve-se-hr-se-cr,
|
|
822
|
+
var(--_ctm-tab-dn-se-on-ve-se-hr-se-cr, var(--_ctm-dn-se-on-ve-se-hr-se-cr))
|
|
823
|
+
);
|
|
824
|
+
--_sf-hr-ft-fy: var(
|
|
825
|
+
--_ctm-mob-dn-se-on-ve-se-hr-se-ft-fy,
|
|
826
|
+
var(--_ctm-tab-dn-se-on-ve-se-hr-se-ft-fy, var(--_ctm-dn-se-on-ve-se-hr-se-ft-fy))
|
|
827
|
+
);
|
|
828
|
+
--_sf-hr-ft-se: var(
|
|
829
|
+
--_ctm-mob-dn-se-on-ve-se-hr-se-ft-se,
|
|
830
|
+
var(--_ctm-tab-dn-se-on-ve-se-hr-se-ft-se, var(--_ctm-dn-se-on-ve-se-hr-se-ft-se))
|
|
831
|
+
);
|
|
832
|
+
--_sf-hr-ft-wt: var(
|
|
833
|
+
--_ctm-mob-dn-se-on-ve-se-hr-se-ft-wt,
|
|
834
|
+
var(--_ctm-tab-dn-se-on-ve-se-hr-se-ft-wt, var(--_ctm-dn-se-on-ve-se-hr-se-ft-wt))
|
|
835
|
+
);
|
|
836
|
+
--_sf-hr-ft-se-ic: var(
|
|
837
|
+
--_ctm-mob-dn-se-on-ve-se-hr-se-ft-se-ic,
|
|
838
|
+
var(
|
|
839
|
+
--_ctm-tab-dn-se-on-ve-se-hr-se-ft-se-ic,
|
|
840
|
+
var(--_ctm-dn-se-on-ve-se-hr-se-ft-se-ic)
|
|
841
|
+
)
|
|
842
|
+
);
|
|
843
|
+
--_sf-hr-tt-an: var(
|
|
844
|
+
--_ctm-mob-dn-se-on-ve-se-hr-se-tt-an,
|
|
845
|
+
var(--_ctm-tab-dn-se-on-ve-se-hr-se-tt-an, var(--_ctm-dn-se-on-ve-se-hr-se-tt-an))
|
|
846
|
+
);
|
|
847
|
+
--_sf-hr-lr-sg: var(
|
|
848
|
+
--_ctm-mob-dn-se-on-ve-se-hr-se-lr-sg,
|
|
849
|
+
var(--_ctm-tab-dn-se-on-ve-se-hr-se-lr-sg, var(--_ctm-dn-se-on-ve-se-hr-se-lr-sg))
|
|
850
|
+
);
|
|
851
|
+
--_sf-hr-le-ht: var(
|
|
852
|
+
--_ctm-mob-dn-se-on-ve-se-hr-se-le-ht,
|
|
853
|
+
var(--_ctm-tab-dn-se-on-ve-se-hr-se-le-ht, var(--_ctm-dn-se-on-ve-se-hr-se-le-ht))
|
|
854
|
+
);
|
|
855
|
+
|
|
856
|
+
--_sf-hr-ue: var(
|
|
857
|
+
--_ctm-mob-dn-on-ve-se-hr-se-ue,
|
|
858
|
+
var(--_ctm-tab-dn-on-ve-se-hr-se-ue, var(--_ctm-dn-on-ve-se-hr-se-ue))
|
|
859
|
+
);
|
|
817
860
|
}
|
|
818
861
|
|
|
819
862
|
&.child {
|
|
@@ -861,6 +904,49 @@ $minWidth: 70px;
|
|
|
861
904
|
var(--_ctm-tab-dn-se-on-ve-se-sd-se-sw-cr, var(--_ctm-dn-se-on-ve-se-sd-se-sw-cr))
|
|
862
905
|
);
|
|
863
906
|
|
|
907
|
+
// for font
|
|
908
|
+
|
|
909
|
+
--_sf-sd-cr: var(
|
|
910
|
+
--_ctm-mob-dn-se-on-ve-se-sd-se-cr,
|
|
911
|
+
var(--_ctm-tab-dn-se-on-ve-se-sd-se-cr, var(--_ctm-dn-se-on-ve-se-sd-se-cr))
|
|
912
|
+
);
|
|
913
|
+
--_sf-sd-ft-fy: var(
|
|
914
|
+
--_ctm-mob-dn-se-on-ve-se-sd-se-ft-fy,
|
|
915
|
+
var(--_ctm-tab-dn-se-on-ve-se-sd-se-ft-fy, var(--_ctm-dn-se-on-ve-se-sd-se-ft-fy))
|
|
916
|
+
);
|
|
917
|
+
--_sf-sd-ft-se: var(
|
|
918
|
+
--_ctm-mob-dn-se-on-ve-se-sd-se-ft-se,
|
|
919
|
+
var(--_ctm-tab-dn-se-on-ve-se-sd-se-ft-se, var(--_ctm-dn-se-on-ve-se-sd-se-ft-se))
|
|
920
|
+
);
|
|
921
|
+
--_sf-sd-ft-wt: var(
|
|
922
|
+
--_ctm-mob-dn-se-on-ve-se-sd-se-ft-wt,
|
|
923
|
+
var(--_ctm-tab-dn-se-on-ve-se-sd-se-ft-wt, var(--_ctm-dn-se-on-ve-se-sd-se-ft-wt))
|
|
924
|
+
);
|
|
925
|
+
--_sf-sd-ft-se-ic: var(
|
|
926
|
+
--_ctm-mob-dn-se-on-ve-se-sd-se-ft-se-ic,
|
|
927
|
+
var(
|
|
928
|
+
--_ctm-tab-dn-se-on-ve-se-sd-se-ft-se-ic,
|
|
929
|
+
var(--_ctm-dn-se-on-ve-se-sd-se-ft-se-ic)
|
|
930
|
+
)
|
|
931
|
+
);
|
|
932
|
+
--_sf-sd-tt-an: var(
|
|
933
|
+
--_ctm-mob-dn-se-on-ve-se-sd-se-tt-an,
|
|
934
|
+
var(--_ctm-tab-dn-se-on-ve-se-sd-se-tt-an, var(--_ctm-dn-se-on-ve-se-sd-se-tt-an))
|
|
935
|
+
);
|
|
936
|
+
--_sf-sd-lr-sg: var(
|
|
937
|
+
--_ctm-mob-dn-se-on-ve-se-sd-se-lr-sg,
|
|
938
|
+
var(--_ctm-tab-dn-se-on-ve-se-sd-se-lr-sg, var(--_ctm-dn-se-on-ve-se-sd-se-lr-sg))
|
|
939
|
+
);
|
|
940
|
+
--_sf-sd-le-ht: var(
|
|
941
|
+
--_ctm-mob-dn-se-on-ve-se-sd-se-le-ht,
|
|
942
|
+
var(--_ctm-tab-dn-se-on-ve-se-sd-se-le-ht, var(--_ctm-dn-se-on-ve-se-sd-se-le-ht))
|
|
943
|
+
);
|
|
944
|
+
|
|
945
|
+
--_sf-sd-ue: var(
|
|
946
|
+
--_ctm-mob-dn-on-ve-se-sd-se-ue,
|
|
947
|
+
var(--_ctm-tab-dn-on-ve-se-sd-se-ue, var(--_ctm-dn-on-ve-se-sd-se-ue))
|
|
948
|
+
);
|
|
949
|
+
|
|
864
950
|
border-color: var(
|
|
865
951
|
--_sf-sd-br-cr,
|
|
866
952
|
prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-br-cr)
|
|
@@ -886,6 +972,42 @@ $minWidth: 70px;
|
|
|
886
972
|
var(--_sf-sd-sw-br, prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-sw-br))
|
|
887
973
|
var(--_sf-sd-sw-sd, prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-sw-sd))
|
|
888
974
|
var(--_sf-sd-sw-cr, prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-sw-cr));
|
|
975
|
+
// font is pending
|
|
976
|
+
|
|
977
|
+
color: var(--_sf-sd-cr, prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-cr));
|
|
978
|
+
font-family: var(
|
|
979
|
+
--_sf-sd-ft-fy,
|
|
980
|
+
prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-ft-fy)
|
|
981
|
+
),
|
|
982
|
+
sans-serif;
|
|
983
|
+
font-size: var(
|
|
984
|
+
--_sf-sd-ft-se,
|
|
985
|
+
prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-ft-se)
|
|
986
|
+
);
|
|
987
|
+
font-weight: var(
|
|
988
|
+
--_sf-sd-ft-wt,
|
|
989
|
+
prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-ft-wt)
|
|
990
|
+
);
|
|
991
|
+
font-style: var(
|
|
992
|
+
--_sf-sd-ft-se-ic,
|
|
993
|
+
prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-ft-se-ic)
|
|
994
|
+
);
|
|
995
|
+
text-align: var(
|
|
996
|
+
--_sf-sd-tt-an,
|
|
997
|
+
prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-tt-an)
|
|
998
|
+
);
|
|
999
|
+
letter-spacing: var(
|
|
1000
|
+
--_sf-sd-lr-sg,
|
|
1001
|
+
prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-lr-sg)
|
|
1002
|
+
);
|
|
1003
|
+
line-height: var(
|
|
1004
|
+
--_sf-sd-le-ht,
|
|
1005
|
+
prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-le-ht-dc)
|
|
1006
|
+
);
|
|
1007
|
+
text-decoration: var(
|
|
1008
|
+
--_sf-sd-ue,
|
|
1009
|
+
prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-ue)
|
|
1010
|
+
);
|
|
889
1011
|
}
|
|
890
1012
|
|
|
891
1013
|
&.selected__child {
|