@sc-360-v2/storefront-cms-library 0.4.27 → 0.4.28

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.
@@ -1,3 +1,4 @@
1
+ @use "./functions.scss" as *;
1
2
  .add_order__wrapper {
2
3
  position: relative;
3
4
  display: inline-block;
@@ -143,10 +144,11 @@
143
144
  }
144
145
 
145
146
  &:hover {
146
- background-color: var(
147
- --_ctm-mob-dn-hr-se-bd-cr,
148
- var(--_ctm-tab-dn-hr-se-bd-cr, var(--_ctm-dn-hr-se-bd-cr))
149
- );
147
+ // background-color: var(
148
+ // --_ctm-mob-dn-hr-se-bd-cr,
149
+ // var(--_ctm-tab-dn-hr-se-bd-cr, var(--_ctm-dn-hr-se-bd-cr))
150
+ // );
151
+ @include BgColorLighter(var(--_thm-sy-bs-dt-se-bd-cr), 10%);
150
152
  font-size: var(
151
153
  --_ctm-mob-dn-hr-se-ft-se,
152
154
  var(--_ctm-tab-dn-hr-se-ft-se, var(--_ctm-dn-hr-se-ft-se))
@@ -245,28 +245,52 @@ div[data-div-type="cms-buy-for-tabs-container-wrapper"] {
245
245
  display: flex;
246
246
  flex-direction: column;
247
247
  gap: 24px;
248
- padding: 16px;
249
- border: 0.5px solid transparent;
248
+ // padding: 16px;
249
+ // background-color: prepareMediaVariable(--_ctm-dn-pt-cd-pt-cd-wt-dt-se-bd-cr);
250
+ @include BgColorLighter(var(--_ctm-dn-pt-cd-pt-cd-wt-dt-se-bd-cr), 5%);
251
+ padding: prepareMediaVariable(--_ctm-dn-pt-cd-pt-cd-wt-dt-se-pg);
252
+ border-width: prepareMediaVariable(--_ctm-dn-pt-cd-pt-cd-wt-dt-se-br-wh);
253
+ border-color: prepareMediaVariable(--_ctm-dn-pt-cd-pt-cd-wt-dt-se-br-cr);
254
+ border-style: prepareMediaVariable(--_ctm-dn-pt-cd-pt-cd-wt-dt-se-br-se);
255
+ border-radius: prepareMediaVariable(--_ctm-dn-pt-cd-pt-cd-wt-dt-se-br-rs);
256
+ box-shadow: prepareMediaVariable(--_ctm-dn-pt-cd-pt-cd-wt-dt-se-sw-ae)
257
+ prepareMediaVariable(--_ctm-dn-pt-cd-pt-cd-wt-dt-se-sw-br)
258
+ prepareMediaVariable(--_ctm-dn-pt-cd-pt-cd-wt-dt-se-sw-sd)
259
+ prepareMediaVariable(--_ctm-dn-pt-cd-pt-cd-wt-dt-se-sw-cr);
260
+ // border: 0.5px solid transparent;
250
261
  &:hover {
251
- background-color: var(--_gray-100);
252
- border: 0.5px solid #243dc6;
262
+ // background-color: var(--_gray-100);
263
+ // border: 0.5px solid #243dc6;
253
264
  cursor: pointer;
254
- border-radius: 4px;
265
+ // border-radius: 4px;
266
+ // background-color: prepareMediaVariable(--_ctm-dn-pt-cd-pt-cd-wt-hr-se-bd-cr);
267
+ @include BgColorLighter(var(--_ctm-dn-pt-cd-pt-cd-wt-hr-se-bd-cr), 5%);
268
+ padding: prepareMediaVariable(--_ctm-dn-pt-cd-pt-cd-wt-hr-se-pg);
269
+ border-width: prepareMediaVariable(--_ctm-dn-pt-cd-pt-cd-wt-hr-se-br-wh);
270
+ border-color: prepareMediaVariable(--_ctm-dn-pt-cd-pt-cd-wt-hr-se-br-cr);
271
+ border-style: prepareMediaVariable(--_ctm-dn-pt-cd-pt-cd-wt-hr-se-br-se);
272
+ border-radius: prepareMediaVariable(--_ctm-dn-pt-cd-pt-cd-wt-hr-se-br-rs);
273
+ box-shadow: prepareMediaVariable(--_ctm-dn-pt-cd-pt-cd-wt-hr-se-sw-ae)
274
+ prepareMediaVariable(--_ctm-dn-pt-cd-pt-cd-wt-hr-se-sw-br)
275
+ prepareMediaVariable(--_ctm-dn-pt-cd-pt-cd-wt-hr-se-sw-sd)
276
+ prepareMediaVariable(--_ctm-dn-pt-cd-pt-cd-wt-hr-se-sw-cr);
255
277
  }
256
278
  &.active {
257
- border: 0.5px solid #243dc6;
258
- border-radius: 4px;
259
- border-width: 0.5px;
260
-
261
- background-color: prepareMediaVariable(--_ctm-dn-pt-im-ss-bd-cr);
262
- border-width: prepareMediaVariable(--_ctm-dn-pt-im-ss-br-wh);
263
- border-color: prepareMediaVariable(--_ctm-dn-pt-im-ss-br-cr);
264
- border-style: prepareMediaVariable(--_ctm-dn-pt-im-ss-br-se);
265
- border-radius: prepareMediaVariable(--_ctm-dn-pt-im-ss-br-rs);
266
- box-shadow: prepareMediaVariable(--_ctm-dn-pt-im-ss-sw-ae)
267
- prepareMediaVariable(--_ctm-dn-pt-im-ss-sw-br)
268
- prepareMediaVariable(--_ctm-dn-pt-im-ss-sw-sd)
269
- prepareMediaVariable(--_ctm-dn-pt-im-ss-sw-cr);
279
+ // border: 0.5px solid #243dc6;
280
+ // border-radius: 4px;
281
+ // border-width: 0.5px;
282
+ padding: prepareMediaVariable(--_ctm-dn-pt-cd-pt-cd-wt-sd-se-pg);
283
+
284
+ // background-color: prepareMediaVariable(--_ctm-dn-pt-cd-pt-cd-wt-sd-se-bd-cr);
285
+ @include BgColorLighter(var(--_ctm-dn-pt-cd-pt-cd-wt-sd-se-bd-cr), 5%);
286
+ border-width: prepareMediaVariable(--_ctm-dn-pt-cd-pt-cd-wt-sd-se-br-wh);
287
+ border-color: prepareMediaVariable(--_ctm-dn-pt-cd-pt-cd-wt-sd-se-br-cr);
288
+ border-style: prepareMediaVariable(--_ctm-dn-pt-cd-pt-cd-wt-sd-se-br-se);
289
+ border-radius: prepareMediaVariable(--_ctm-dn-pt-cd-pt-cd-wt-sd-se-br-rs);
290
+ box-shadow: prepareMediaVariable(--_ctm-dn-pt-cd-pt-cd-wt-sd-se-sw-ae)
291
+ prepareMediaVariable(--_ctm-dn-pt-cd-pt-cd-wt-sd-se-sw-br)
292
+ prepareMediaVariable(--_ctm-dn-pt-cd-pt-cd-wt-sd-se-sw-sd)
293
+ prepareMediaVariable(--_ctm-dn-pt-cd-pt-cd-wt-sd-se-sw-cr);
270
294
  }
271
295
 
272
296
  .product-image {
@@ -764,93 +788,93 @@ div[data-div-type="cms-buy-for-tabs-container-wrapper"] {
764
788
  .add-to-cart {
765
789
  // width: 100%;
766
790
  // height: 56px;
767
- opacity: 1;
768
- display: flex;
769
- align-items: center;
770
- gap: 8px;
771
- // padding-top: 12px;
772
- // padding-right: 24px;
773
- // padding-bottom: 12px;
774
- // padding-left: 24px;
775
- padding: var(
776
- --_ctm-mob-dn-pt-ds-at-pg,
777
- var(--_ctm-tab-dn-pt-ds-at-pg, var(--_ctm-dn-pt-ds-at-pg))
778
- );
779
- border-style: var(
780
- --_ctm-mob-dn-pt-ds-at-br-se,
781
- var(--_ctm-tab-dn-pt-ds-at-br-se, var(--_ctm-dn-pt-ds-at-br-se))
782
- );
783
- border-width: var(
784
- --_ctm-mob-dn-pt-ds-at-br-wh,
785
- var(--_ctm-tab-dn-pt-ds-at-br-wh, var(--_ctm-dn-pt-ds-at-br-wh))
786
- );
787
- border-radius: var(
788
- --_ctm-mob-dn-pt-ds-at-br-rs,
789
- var(--_ctm-tab-dn-pt-ds-at-br-rs, var(--_ctm-dn-pt-ds-at-br-rs))
790
- );
791
- border-color: var(
792
- --_ctm-mob-dn-pt-ds-at-br-cr,
793
- var(--_ctm-tab-dn-pt-ds-at-br-cr, var(--_ctm-dn-pt-ds-at-br-cr))
794
- );
795
- background: var(
796
- --_ctm-mob-dn-pt-ds-at-bd-cr,
797
- var(--_ctm-tab-dn-pt-ds-at-bd-cr, var(--_ctm-dn-pt-ds-at-bd-cr))
798
- );
799
- box-shadow: 0px 1px 2px 0px #1018280d;
800
- text-align: center;
801
- font-family: var(
802
- --_ctm-mob-dn-pt-ds-at-ft-fy,
803
- var(--_ctm-tab-dn-pt-ds-at-ft-fy, var(--_ctm-dn-pt-ds-at-ft-fy))
804
- );
805
- font-weight: var(
806
- --_ctm-mob-dn-pt-ds-at-ft-wt,
807
- var(--_ctm-tab-dn-pt-ds-at-ft-wt, var(--_ctm-dn-pt-ds-at-ft-wt))
808
- );
809
- font-size: var(
810
- --_ctm-mob-dn-pt-ds-at-ft-se,
811
- var(--_ctm-tab-dn-pt-ds-at-ft-se, var(--_ctm-dn-pt-ds-at-ft-se))
812
- );
813
- line-height: var(
814
- --_ctm-mob-dn-pt-ds-at-le-ht,
815
- var(--_ctm-tab-dn-pt-ds-at-le-ht, var(--_ctm-dn-pt-ds-at-le-ht))
816
- );
817
- letter-spacing: var(
818
- --_ctm-mob-dn-pt-ds-at-lr-sg,
819
- var(--_ctm-tab-dn-pt-ds-at-lr-sg, var(--_ctm-dn-pt-ds-at-lr-sg))
820
- );
821
- color: var(
822
- --_ctm-mob-dn-pt-ds-at-cr,
823
- var(--_ctm-tab-dn-pt-ds-at-cr, var(--_ctm-dn-pt-ds-at-cr))
824
- );
825
- span {
826
- vertical-align: middle;
827
- }
828
- button {
829
- font-family: var(
830
- --_ctm-mob-dn-pt-ds-at-ft-fy,
831
- var(--_ctm-tab-dn-pt-ds-at-ft-fy, var(--_ctm-dn-pt-ds-at-ft-fy))
832
- );
833
- font-weight: var(
834
- --_ctm-mob-dn-pt-ds-at-ft-wt,
835
- var(--_ctm-tab-dn-pt-ds-at-ft-wt, var(--_ctm-dn-pt-ds-at-ft-wt))
836
- );
837
- font-size: var(
838
- --_ctm-mob-dn-pt-ds-at-ft-se,
839
- var(--_ctm-tab-dn-pt-ds-at-ft-se, var(--_ctm-dn-pt-ds-at-ft-se))
840
- );
841
- line-height: var(
842
- --_ctm-mob-dn-pt-ds-at-le-ht,
843
- var(--_ctm-tab-dn-pt-ds-at-le-ht, var(--_ctm-dn-pt-ds-at-le-ht))
844
- );
845
- letter-spacing: var(
846
- --_ctm-mob-dn-pt-ds-at-lr-sg,
847
- var(--_ctm-tab-dn-pt-ds-at-lr-sg, var(--_ctm-dn-pt-ds-at-lr-sg))
848
- );
849
- color: var(
850
- --_ctm-mob-dn-pt-ds-at-cr,
851
- var(--_ctm-tab-dn-pt-ds-at-cr, var(--_ctm-dn-pt-ds-at-cr))
852
- );
853
- }
791
+ // opacity: 1;
792
+ // display: flex;
793
+ // align-items: center;
794
+ // gap: 8px;
795
+ padding-top: 12px;
796
+ padding-right: 24px;
797
+ padding-bottom: 12px;
798
+ padding-left: 24px;
799
+ // padding: var(
800
+ // --_ctm-mob-dn-pt-ds-at-pg,
801
+ // var(--_ctm-tab-dn-pt-ds-at-pg, var(--_ctm-dn-pt-ds-at-pg))
802
+ // );
803
+ // border-style: var(
804
+ // --_ctm-mob-dn-pt-ds-at-br-se,
805
+ // var(--_ctm-tab-dn-pt-ds-at-br-se, var(--_ctm-dn-pt-ds-at-br-se))
806
+ // );
807
+ // border-width: var(
808
+ // --_ctm-mob-dn-pt-ds-at-br-wh,
809
+ // var(--_ctm-tab-dn-pt-ds-at-br-wh, var(--_ctm-dn-pt-ds-at-br-wh))
810
+ // );
811
+ // border-radius: var(
812
+ // --_ctm-mob-dn-pt-ds-at-br-rs,
813
+ // var(--_ctm-tab-dn-pt-ds-at-br-rs, var(--_ctm-dn-pt-ds-at-br-rs))
814
+ // );
815
+ // border-color: var(
816
+ // --_ctm-mob-dn-pt-ds-at-br-cr,
817
+ // var(--_ctm-tab-dn-pt-ds-at-br-cr, var(--_ctm-dn-pt-ds-at-br-cr))
818
+ // );
819
+ // background: var(
820
+ // --_ctm-mob-dn-pt-ds-at-bd-cr,
821
+ // var(--_ctm-tab-dn-pt-ds-at-bd-cr, var(--_ctm-dn-pt-ds-at-bd-cr))
822
+ // );
823
+ // box-shadow: 0px 1px 2px 0px #1018280d;
824
+ // text-align: center;
825
+ // font-family: var(
826
+ // --_ctm-mob-dn-pt-ds-at-ft-fy,
827
+ // var(--_ctm-tab-dn-pt-ds-at-ft-fy, var(--_ctm-dn-pt-ds-at-ft-fy))
828
+ // );
829
+ // font-weight: var(
830
+ // --_ctm-mob-dn-pt-ds-at-ft-wt,
831
+ // var(--_ctm-tab-dn-pt-ds-at-ft-wt, var(--_ctm-dn-pt-ds-at-ft-wt))
832
+ // );
833
+ // font-size: var(
834
+ // --_ctm-mob-dn-pt-ds-at-ft-se,
835
+ // var(--_ctm-tab-dn-pt-ds-at-ft-se, var(--_ctm-dn-pt-ds-at-ft-se))
836
+ // );
837
+ // line-height: var(
838
+ // --_ctm-mob-dn-pt-ds-at-le-ht,
839
+ // var(--_ctm-tab-dn-pt-ds-at-le-ht, var(--_ctm-dn-pt-ds-at-le-ht))
840
+ // );
841
+ // letter-spacing: var(
842
+ // --_ctm-mob-dn-pt-ds-at-lr-sg,
843
+ // var(--_ctm-tab-dn-pt-ds-at-lr-sg, var(--_ctm-dn-pt-ds-at-lr-sg))
844
+ // );
845
+ // color: var(
846
+ // --_ctm-mob-dn-pt-ds-at-cr,
847
+ // var(--_ctm-tab-dn-pt-ds-at-cr, var(--_ctm-dn-pt-ds-at-cr))
848
+ // );
849
+ // span {
850
+ // vertical-align: middle;
851
+ // }
852
+ // button {
853
+ // font-family: var(
854
+ // --_ctm-mob-dn-pt-ds-at-ft-fy,
855
+ // var(--_ctm-tab-dn-pt-ds-at-ft-fy, var(--_ctm-dn-pt-ds-at-ft-fy))
856
+ // );
857
+ // font-weight: var(
858
+ // --_ctm-mob-dn-pt-ds-at-ft-wt,
859
+ // var(--_ctm-tab-dn-pt-ds-at-ft-wt, var(--_ctm-dn-pt-ds-at-ft-wt))
860
+ // );
861
+ // font-size: var(
862
+ // --_ctm-mob-dn-pt-ds-at-ft-se,
863
+ // var(--_ctm-tab-dn-pt-ds-at-ft-se, var(--_ctm-dn-pt-ds-at-ft-se))
864
+ // );
865
+ // line-height: var(
866
+ // --_ctm-mob-dn-pt-ds-at-le-ht,
867
+ // var(--_ctm-tab-dn-pt-ds-at-le-ht, var(--_ctm-dn-pt-ds-at-le-ht))
868
+ // );
869
+ // letter-spacing: var(
870
+ // --_ctm-mob-dn-pt-ds-at-lr-sg,
871
+ // var(--_ctm-tab-dn-pt-ds-at-lr-sg, var(--_ctm-dn-pt-ds-at-lr-sg))
872
+ // );
873
+ // color: var(
874
+ // --_ctm-mob-dn-pt-ds-at-cr,
875
+ // var(--_ctm-tab-dn-pt-ds-at-cr, var(--_ctm-dn-pt-ds-at-cr))
876
+ // );
877
+ // }
854
878
  }
855
879
  .variant__container {
856
880
  display: flex;