@sc-360-v2/storefront-cms-library 0.4.20 → 0.4.21

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.
@@ -291,11 +291,11 @@ $resizeActive: '[data-cms-element-resizer="true"]';
291
291
  --_ctm-mob-dn-pt-wt-pt-qy-ft-wt,
292
292
  var(--_ctm-tab-dn-pt-wt-pt-qy-ft-wt, var(--_ctm-dn-pt-wt-pt-qy-ft-wt))
293
293
  );
294
- // font-size: var(
295
- // --_ctm-mob-dn-pt-wt-pt-qy-ft-se,
296
- // var(--_ctm-tab-dn-pt-wt-pt-qy-ft-se, var(--_ctm-dn-pt-wt-pt-qy-ft-se))
297
- // );
298
- font-size: 12px;
294
+ font-size: var(
295
+ --_ctm-mob-dn-pt-wt-pt-qy-ft-se,
296
+ var(--_ctm-tab-dn-pt-wt-pt-qy-ft-se, var(--_ctm-dn-pt-wt-pt-qy-ft-se))
297
+ );
298
+ // font-size: 12px;
299
299
  text-decoration: var(
300
300
  --_ctm-mob-dn-pt-wt-pt-qy-ue,
301
301
  var(--_ctm-tab-dn-pt-wt-pt-qy-ue, var(--_ctm-dn-pt-wt-pt-qy-ue))
@@ -330,11 +330,11 @@ $resizeActive: '[data-cms-element-resizer="true"]';
330
330
  --_ctm-mob-dn-pt-wt-pt-qy-ft-wt-dc,
331
331
  var(--_ctm-tab-dn-pt-wt-pt-qy-ft-wt-dc, var(--_ctm-dn-pt-wt-pt-qy-ft-wt-dc))
332
332
  );
333
- // font-size: var(
334
- // --_ctm-mob-dn-pt-wt-pt-qy-ft-se-dc,
335
- // var(--_ctm-tab-dn-pt-wt-pt-qy-ft-se-dc, var(--_ctm-dn-pt-wt-pt-qy-ft-se-dc))
336
- // );
337
- font-size: 12px;
333
+ font-size: var(
334
+ --_ctm-mob-dn-pt-wt-pt-qy-ft-se-dc,
335
+ var(--_ctm-tab-dn-pt-wt-pt-qy-ft-se-dc, var(--_ctm-dn-pt-wt-pt-qy-ft-se-dc))
336
+ );
337
+ // font-size: 12px;
338
338
  text-decoration: var(
339
339
  --_ctm-mob-dn-pt-wt-pt-qy-ue-dc,
340
340
  var(--_ctm-tab-dn-pt-wt-pt-qy-ue-dc, var(--_ctm-dn-pt-wt-pt-qy-ue-dc))
@@ -528,11 +528,11 @@ $resizeActive: '[data-cms-element-resizer="true"]';
528
528
  --_ctm-mob-dn-nr-of-is-ft-wt,
529
529
  var(--_ctm-tab-dn-nr-of-is-ft-wt, var(--_ctm-dn-nr-of-is-ft-wt))
530
530
  );
531
- // font-size: var(
532
- // --_ctm-mob-dn-nr-of-is-ft-se,
533
- // var(--_ctm-tab-dn-nr-of-is-ft-se, var(--_ctm-dn-nr-of-is-ft-se))
534
- // );
535
- font-size: 14px;
531
+ font-size: var(
532
+ --_ctm-mob-dn-nr-of-is-ft-se,
533
+ var(--_ctm-tab-dn-nr-of-is-ft-se, var(--_ctm-dn-nr-of-is-ft-se))
534
+ );
535
+ // font-size: 14px;
536
536
  text-decoration: var(
537
537
  --_ctm-mob-dn-nr-of-is-ue,
538
538
  var(--_ctm-tab-dn-nr-of-is-ue, var(--_ctm-dn-nr-of-is-ue))
@@ -612,11 +612,11 @@ $resizeActive: '[data-cms-element-resizer="true"]';
612
612
  --_ctm-mob-dn-sg-cs-ft-wt,
613
613
  var(--_ctm-tab-dn-sg-cs-ft-wt, var(--_ctm-dn-sg-cs-ft-wt))
614
614
  );
615
- // font-size: var(
616
- // --_ctm-mob-dn-sg-cs-ft-se,
617
- // var(--_ctm-tab-dn-sg-cs-ft-se, var(--_ctm-dn-sg-cs-ft-se))
618
- // );
619
- font-size: 14px;
615
+ font-size: var(
616
+ --_ctm-mob-dn-sg-cs-ft-se,
617
+ var(--_ctm-tab-dn-sg-cs-ft-se, var(--_ctm-dn-sg-cs-ft-se))
618
+ );
619
+ // font-size: 14px;
620
620
  text-decoration: var(
621
621
  --_ctm-mob-dn-sg-cs-ue,
622
622
  var(--_ctm-tab-dn-sg-cs-ue, var(--_ctm-dn-sg-cs-ue))
@@ -638,7 +638,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
638
638
  var(--_ctm-tab-dn-sg-cs-tt-an, var(--_ctm-dn-sg-cs-tt-an))
639
639
  );
640
640
  }
641
- .cart_summary_shippingLabel_value {
641
+ .currency_span {
642
642
  font-family: var(
643
643
  --_ctm-mob-dn-sg-cs-ft-fy-dc,
644
644
  var(--_ctm-tab-dn-sg-cs-ft-fy-dc, var(--_ctm-dn-sg-cs-ft-fy-dc))
@@ -688,11 +688,11 @@ $resizeActive: '[data-cms-element-resizer="true"]';
688
688
  --_ctm-mob-dn-tx-ft-wt,
689
689
  var(--_ctm-tab-dn-tx-ft-wt, var(--_ctm-dn-tx-ft-wt))
690
690
  );
691
- // font-size: var(
692
- // --_ctm-mob-dn-tx-ft-se,
693
- // var(--_ctm-tab-dn-tx-ft-se, var(--_ctm-dn-tx-ft-se))
694
- // );
695
- font-size: 14px;
691
+ font-size: var(
692
+ --_ctm-mob-dn-tx-ft-se,
693
+ var(--_ctm-tab-dn-tx-ft-se, var(--_ctm-dn-tx-ft-se))
694
+ );
695
+ // font-size: 14px;
696
696
  text-decoration: var(
697
697
  --_ctm-mob-dn-tx-ue,
698
698
  var(--_ctm-tab-dn-tx-ue, var(--_ctm-dn-tx-ue))
@@ -777,11 +777,11 @@ $resizeActive: '[data-cms-element-resizer="true"]';
777
777
  --_ctm-mob-dn-sb-tl-ft-wt,
778
778
  var(--_ctm-tab-dn-sb-tl-ft-wt, var(--_ctm-dn-sb-tl-ft-wt))
779
779
  );
780
- // font-size: var(
781
- // --_ctm-mob-dn-sb-tl-ft-se,
782
- // var(--_ctm-tab-dn-sb-tl-ft-se, var(--_ctm-dn-sb-tl-ft-se))
783
- // );
784
- font-size: 16px;
780
+ font-size: var(
781
+ --_ctm-mob-dn-sb-tl-ft-se,
782
+ var(--_ctm-tab-dn-sb-tl-ft-se, var(--_ctm-dn-sb-tl-ft-se))
783
+ );
784
+ // font-size: 16px;
785
785
  text-decoration: var(
786
786
  --_ctm-mob-dn-sb-tl-ue,
787
787
  var(--_ctm-tab-dn-sb-tl-ue, var(--_ctm-dn-sb-tl-ue))
@@ -804,43 +804,45 @@ $resizeActive: '[data-cms-element-resizer="true"]';
804
804
  );
805
805
  }
806
806
  .cart_summary_subTotal_value {
807
- font-family: var(
808
- --_ctm-mob-dn-sb-tl-ft-fy-dc,
809
- var(--_ctm-tab-dn-sb-tl-ft-fy-dc, var(--_ctm-dn-sb-tl-ft-fy-dc))
810
- );
811
- color: var(
812
- --_ctm-mob-dn-sb-tl-cr-dc,
813
- var(--_ctm-tab-dn-sb-tl-cr-dc, var(--_ctm-dn-sb-tl-cr-dc))
814
- );
815
- font-weight: var(
816
- --_ctm-mob-dn-sb-tl-ft-wt-dc,
817
- var(--_ctm-tab-dn-sb-tl-ft-wt-dc, var(--_ctm-dn-sb-tl-ft-wt-dc))
818
- );
819
- // font-size: var(
820
- // --_ctm-mob-dn-sb-tl-ft-se-dc,
821
- // var(--_ctm-tab-dn-sb-tl-ft-se-dc, var(--_ctm-dn-sb-tl-ft-se-dc))
822
- // );
823
- font-size: 16px;
824
- text-decoration: var(
825
- --_ctm-mob-dn-sb-tl-ue-dc,
826
- var(--_ctm-tab-dn-sb-tl-ue-dc, var(--_ctm-dn-sb-tl-ue-dc))
827
- );
828
- letter-spacing: var(
829
- --_ctm-mob-dn-sb-tl-lr-sg-dc,
830
- var(--_ctm-tab-dn-sb-tl-lr-sg-dc, var(--_ctm-dn-sb-tl-lr-sg-dc))
831
- );
832
- line-height: var(
833
- --_ctm-mob-dn-sb-tl-le-ht-dc,
834
- var(--_ctm-tab-dn-sb-tl-le-ht-dc, var(--_ctm-dn-sb-tl-le-ht-dc))
835
- );
836
- font-style: var(
837
- --_ctm-mob-dn-sb-tl-ft-se-ic-dc,
838
- var(--_ctm-tab-dn-sb-tl-ft-se-ic-dc, var(--_ctm-dn-sb-tl-ft-se-ic-dc))
839
- );
840
- text-align: var(
841
- --_ctm-mob-dn-sb-tl-tt-an-dc,
842
- var(--_ctm-tab-dn-sb-tl-tt-an-dc, var(--_ctm-dn-sb-tl-tt-an-dc))
843
- );
807
+ .currency_span {
808
+ font-family: var(
809
+ --_ctm-mob-dn-sb-tl-ft-fy-dc,
810
+ var(--_ctm-tab-dn-sb-tl-ft-fy-dc, var(--_ctm-dn-sb-tl-ft-fy-dc))
811
+ );
812
+ color: var(
813
+ --_ctm-mob-dn-sb-tl-cr-dc,
814
+ var(--_ctm-tab-dn-sb-tl-cr-dc, var(--_ctm-dn-sb-tl-cr-dc))
815
+ );
816
+ font-weight: var(
817
+ --_ctm-mob-dn-sb-tl-ft-wt-dc,
818
+ var(--_ctm-tab-dn-sb-tl-ft-wt-dc, var(--_ctm-dn-sb-tl-ft-wt-dc))
819
+ );
820
+ font-size: var(
821
+ --_ctm-mob-dn-sb-tl-ft-se-dc,
822
+ var(--_ctm-tab-dn-sb-tl-ft-se-dc, var(--_ctm-dn-sb-tl-ft-se-dc))
823
+ );
824
+ // font-size: 16px;
825
+ text-decoration: var(
826
+ --_ctm-mob-dn-sb-tl-ue-dc,
827
+ var(--_ctm-tab-dn-sb-tl-ue-dc, var(--_ctm-dn-sb-tl-ue-dc))
828
+ );
829
+ letter-spacing: var(
830
+ --_ctm-mob-dn-sb-tl-lr-sg-dc,
831
+ var(--_ctm-tab-dn-sb-tl-lr-sg-dc, var(--_ctm-dn-sb-tl-lr-sg-dc))
832
+ );
833
+ line-height: var(
834
+ --_ctm-mob-dn-sb-tl-le-ht-dc,
835
+ var(--_ctm-tab-dn-sb-tl-le-ht-dc, var(--_ctm-dn-sb-tl-le-ht-dc))
836
+ );
837
+ font-style: var(
838
+ --_ctm-mob-dn-sb-tl-ft-se-ic-dc,
839
+ var(--_ctm-tab-dn-sb-tl-ft-se-ic-dc, var(--_ctm-dn-sb-tl-ft-se-ic-dc))
840
+ );
841
+ text-align: var(
842
+ --_ctm-mob-dn-sb-tl-tt-an-dc,
843
+ var(--_ctm-tab-dn-sb-tl-tt-an-dc, var(--_ctm-dn-sb-tl-tt-an-dc))
844
+ );
845
+ }
844
846
  }
845
847
 
846
848
  .cart_summary_total_text {
@@ -853,11 +855,11 @@ $resizeActive: '[data-cms-element-resizer="true"]';
853
855
  --_ctm-mob-dn-tl-ft-wt,
854
856
  var(--_ctm-tab-dn-tl-ft-wt, var(--_ctm-dn-tl-ft-wt))
855
857
  );
856
- // font-size: var(
857
- // --_ctm-mob-dn-tl-ft-se,
858
- // var(--_ctm-tab-dn-tl-ft-se, var(--_ctm-dn-tl-ft-se))
859
- // );
860
- font-size: 20px;
858
+ font-size: var(
859
+ --_ctm-mob-dn-tl-ft-se,
860
+ var(--_ctm-tab-dn-tl-ft-se, var(--_ctm-dn-tl-ft-se))
861
+ );
862
+ // font-size: 20px;
861
863
  text-decoration: var(
862
864
  --_ctm-mob-dn-tl-ue,
863
865
  var(--_ctm-tab-dn-tl-ue, var(--_ctm-dn-tl-ue))
@@ -880,43 +882,45 @@ $resizeActive: '[data-cms-element-resizer="true"]';
880
882
  );
881
883
  }
882
884
  .cart_summary_total_value {
883
- font-family: var(
884
- --_ctm-mob-dn-tl-ft-fy-dc,
885
- var(--_ctm-tab-dn-tl-ft-fy-dc, var(--_ctm-dn-tl-ft-fy-dc))
886
- );
887
- color: var(
888
- --_ctm-mob-dn-tl-cr-dc,
889
- var(--_ctm-tab-dn-tl-cr-dc, var(--_ctm-dn-tl-cr-dc))
890
- );
891
- font-weight: var(
892
- --_ctm-mob-dn-tl-ft-wt-dc,
893
- var(--_ctm-tab-dn-tl-ft-wt-dc, var(--_ctm-dn-tl-ft-wt-dc))
894
- );
895
- // font-size: var(
896
- // --_ctm-mob-dn-tl-ft-se-dc,
897
- // var(--_ctm-tab-dn-tl-ft-se-dc, var(--_ctm-dn-tl-ft-se-dc))
898
- // );
899
- font-size: 20px;
900
- text-decoration: var(
901
- --_ctm-mob-dn-tl-ue-dc,
902
- var(--_ctm-tab-dn-tl-ue-dc, var(--_ctm-dn-tl-ue-dc,))
903
- );
904
- letter-spacing: var(
905
- --_ctm-mob-dn-tl-lr-sg-dc,
906
- var(--_ctm-tab-dn-tl-lr-sg-dc, var(--_ctm-dn-tl-lr-sg-dc))
907
- );
908
- line-height: var(
909
- --_ctm-mob-dn-tl-le-ht-dc,
910
- var(--_ctm-tab-dn-tl-le-ht-dc, var(--_ctm-dn-tl-le-ht-dc))
911
- );
912
- font-style: var(
913
- --_ctm-mob-dn-tl-ft-se-ic-dc,
914
- var(--_ctm-tab-dn-tl-ft-se-ic-dc, var(--_ctm-dn-tl-ft-se-ic-dc))
915
- );
916
- text-align: var(
917
- --_ctm-mob-dn-tl-tt-an-dc,
918
- var(--_ctm-tab-dn-tl-tt-an-dc, var(--_ctm-dn-tl-tt-an-dc))
919
- );
885
+ .currency_span {
886
+ font-family: var(
887
+ --_ctm-mob-dn-tl-ft-fy-dc,
888
+ var(--_ctm-tab-dn-tl-ft-fy-dc, var(--_ctm-dn-tl-ft-fy-dc))
889
+ );
890
+ color: var(
891
+ --_ctm-mob-dn-tl-cr-dc,
892
+ var(--_ctm-tab-dn-tl-cr-dc, var(--_ctm-dn-tl-cr-dc))
893
+ );
894
+ font-weight: var(
895
+ --_ctm-mob-dn-tl-ft-wt-dc,
896
+ var(--_ctm-tab-dn-tl-ft-wt-dc, var(--_ctm-dn-tl-ft-wt-dc))
897
+ );
898
+ font-size: var(
899
+ --_ctm-mob-dn-tl-ft-se-dc,
900
+ var(--_ctm-tab-dn-tl-ft-se-dc, var(--_ctm-dn-tl-ft-se-dc))
901
+ );
902
+ // font-size: 20px;
903
+ text-decoration: var(
904
+ --_ctm-mob-dn-tl-ue-dc,
905
+ var(--_ctm-tab-dn-tl-ue-dc, var(--_ctm-dn-tl-ue-dc,))
906
+ );
907
+ letter-spacing: var(
908
+ --_ctm-mob-dn-tl-lr-sg-dc,
909
+ var(--_ctm-tab-dn-tl-lr-sg-dc, var(--_ctm-dn-tl-lr-sg-dc))
910
+ );
911
+ line-height: var(
912
+ --_ctm-mob-dn-tl-le-ht-dc,
913
+ var(--_ctm-tab-dn-tl-le-ht-dc, var(--_ctm-dn-tl-le-ht-dc))
914
+ );
915
+ font-style: var(
916
+ --_ctm-mob-dn-tl-ft-se-ic-dc,
917
+ var(--_ctm-tab-dn-tl-ft-se-ic-dc, var(--_ctm-dn-tl-ft-se-ic-dc))
918
+ );
919
+ text-align: var(
920
+ --_ctm-mob-dn-tl-tt-an-dc,
921
+ var(--_ctm-tab-dn-tl-tt-an-dc, var(--_ctm-dn-tl-tt-an-dc))
922
+ );
923
+ }
920
924
  }
921
925
  }
922
926
  }
@@ -949,11 +953,11 @@ $resizeActive: '[data-cms-element-resizer="true"]';
949
953
  --_ctm-mob-dn-pt-wt-pt-ne-ft-wt,
950
954
  var(--_ctm-tab-dn-pt-wt-pt-ne-ft-wt, var(--_ctm-dn-pt-wt-pt-ne-ft-wt))
951
955
  );
952
- // font-size: var(
953
- // --_ctm-mob-dn-pt-wt-pt-ne-ft-se,
954
- // var(--_ctm-tab-dn-pt-wt-pt-ne-ft-se, var(--_ctm-dn-pt-wt-pt-ne-ft-se))
955
- // );
956
- font-size: 14px;
956
+ font-size: var(
957
+ --_ctm-mob-dn-pt-wt-pt-ne-ft-se,
958
+ var(--_ctm-tab-dn-pt-wt-pt-ne-ft-se, var(--_ctm-dn-pt-wt-pt-ne-ft-se))
959
+ );
960
+ // font-size: 14px;
957
961
  // pt-wt-pt-pe-ue pt-wt-pt-ne-ue
958
962
  text-decoration: var(
959
963
  --_ctm-mob-pt-wt-pt-pe-ue,
@@ -1047,11 +1051,11 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1047
1051
  --_ctm-mob-dn-pt-wt-pt-ce-ft-wt,
1048
1052
  var(--_ctm-tab-dn-pt-wt-pt-ce-ft-wt, var(--_ctm-dn-pt-wt-pt-ce-ft-wt))
1049
1053
  );
1050
- // font-size: var(
1051
- // --_ctm-mob-dn-pt-wt-pt-ce-ft-se,
1052
- // var(--_ctm-tab-dn-pt-wt-pt-ce-ft-se, var(--_ctm-dn-pt-wt-pt-ce-ft-se))
1053
- // );
1054
- font-size: 12px;
1054
+ font-size: var(
1055
+ --_ctm-mob-dn-pt-wt-pt-ce-ft-se,
1056
+ var(--_ctm-tab-dn-pt-wt-pt-ce-ft-se, var(--_ctm-dn-pt-wt-pt-ce-ft-se))
1057
+ );
1058
+ // font-size: 12px;
1055
1059
  text-decoration: var(
1056
1060
  --_ctm-mob-dn-pt-wt-pt-pe-ue,
1057
1061
  var(--_ctm-tab-dn-pt-wt-pt-pe-ue, var(--_ctm-dn-pt-wt-pt-pe-ue))
@@ -201,15 +201,15 @@
201
201
  );
202
202
  .attriTitle {
203
203
  font-weight: 600;
204
- font-size: 14px;
205
- line-height: 20px;
206
- color: #101828;
207
- padding-bottom: 6px;
204
+ // font-size: 14px;
205
+ // line-height: 20px;
206
+ // color: #101828;
207
+ // padding-bottom: 6px;
208
208
  }
209
209
  .attriDes {
210
210
  font-weight: 400;
211
- font-size: 14px;
212
- line-height: 20px;
211
+ // font-size: 14px;
212
+ // line-height: 20px;
213
213
  }
214
214
  .attribute {
215
215
  width: 100%;
@@ -440,6 +440,20 @@
440
440
  --_ctm-mob-dn-as-cr-as-dn-tt-an,
441
441
  var(--_ctm-tab-dn-as-cr-as-dn-tt-an, var(--_ctm-dn-as-cr-as-dn-tt-an))
442
442
  );
443
+ .selected-display {
444
+ .selected-item {
445
+ display: flex;
446
+ align-items: center;
447
+ .color-swatch {
448
+ position: relative;
449
+ top: 1px;
450
+ }
451
+ .svg_icon svg {
452
+ width: 20px;
453
+ height: 20px;
454
+ }
455
+ }
456
+ }
443
457
  }
444
458
  &:focus {
445
459
  border-color: var(--_primary-400);
@@ -100,10 +100,10 @@
100
100
  button {
101
101
  height: 40px;
102
102
  width: 204px;
103
- font-size: 16px;
103
+ // font-size: 16px;
104
104
  cursor: pointer;
105
105
  border: none;
106
- border-radius: 5px;
106
+ // border-radius: 5px;
107
107
  }
108
108
  .cancel-button {
109
109
  background: transparent;
@@ -120,7 +120,8 @@
120
120
 
121
121
  .confirmation-button {
122
122
  background-color: #dc2626; // red-600
123
-
123
+ color: #ffffff;
124
+ border-radius: var(--_sf-hr-br-rs, var(--_thm-py-bs-dt-se-br-rs));
124
125
  &:hover {
125
126
  background-color: #b91c1c;
126
127
  }
@@ -13,6 +13,19 @@
13
13
  height: 40px;
14
14
  outline: 2px solid var(--_base-white);
15
15
  border: 1px solid var(--_gray-300);
16
+ .selected-display {
17
+ .selected-item {
18
+ display: flex;
19
+ align-items: center;
20
+ gap: 6px;
21
+ img {
22
+ margin-top: 2px;
23
+ border-radius: 50%;
24
+ width: 24px;
25
+ height: 24px;
26
+ }
27
+ }
28
+ }
16
29
  &.visibility_hidden {
17
30
  visibility: hidden;
18
31
  }
@@ -166,6 +166,20 @@ $apiLoader: '[data-spinner-state="loading"]';
166
166
  }
167
167
  }
168
168
 
169
+ .message {
170
+ font-family: "Lato", sans-serif;
171
+ font-size: 14px;
172
+ padding: 12px 16px;
173
+ border-radius: 8px;
174
+ display: inline-block;
175
+ animation: fadeIn 0.3s ease-in-out;
176
+ }
177
+ .message.info {
178
+ background-color: #eff6ff;
179
+ color: #1e40af;
180
+ border: 1px solid #bfdbfe;
181
+ }
182
+
169
183
  // Playground
170
184
  & > #{$mainWrapper} {
171
185
  & > #{$libraryWrapper} {