@sc-360-v2/storefront-cms-library 0.2.100 → 0.3.0

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.
Files changed (34) hide show
  1. package/dist/amount-estimator.scss +226 -291
  2. package/dist/builder.js +1 -1
  3. package/dist/bundleDetails.scss +678 -808
  4. package/dist/cartDropdownOverlay.scss +13 -0
  5. package/dist/faq.scss +24 -20
  6. package/dist/item-stock.scss +76 -38
  7. package/dist/map.scss +35 -35
  8. package/dist/modal.scss +0 -320
  9. package/dist/payment-methods.scss +1 -71
  10. package/dist/pickup-locations.scss +19 -22
  11. package/dist/product-basic-elements.scss +132 -285
  12. package/dist/product-options.scss +76 -118
  13. package/dist/quick-links.scss +143 -186
  14. package/dist/quotes.scss +0 -1
  15. package/dist/repeater-item.scss +0 -1
  16. package/dist/section.scss +78 -29
  17. package/dist/stack.scss +61 -16
  18. package/dist/store-locations.scss +20 -21
  19. package/dist/text-temp-v2.scss +0 -2
  20. package/dist/types/builder/enums/index.d.ts +0 -1
  21. package/dist/types/builder/index.d.ts +1 -2
  22. package/dist/types/builder/tools/element-edit/bundleDetails.d.ts +10 -627
  23. package/dist/types/builder/tools/element-edit/itemStock.d.ts +0 -11
  24. package/dist/types/builder/tools/element-edit/paymentMethods.d.ts +1 -94
  25. package/dist/uom-selector.scss +1428 -941
  26. package/dist/variant-picker.scss +138 -613
  27. package/dist/volume-pricing.scss +606 -1007
  28. package/dist/widget.scss +0 -2
  29. package/package.json +1 -1
  30. package/dist/menu-item.scss +0 -19
  31. package/dist/order-status.scss +0 -483
  32. package/dist/table-common.scss +0 -510
  33. package/dist/types/builder/elements/bundle-details/index.d.ts +0 -30
  34. package/dist/volume-pricing copy.scss +0 -1092
package/dist/variant-picker.scss CHANGED
@@ -1,7 +1,6 @@
1
1
  @use "sass:map";
2
2
  @use "sass:list";
3
3
  // @use "./functions.scss";
4
-
5
4
  $minWidth: 70px;
6
5
 
7
6
  [data-div-type="element"] {
@@ -40,39 +39,42 @@ $minWidth: 70px;
40
39
  }
41
40
  .option__title {
42
41
  margin-bottom: 4px;
43
- color: var(--_ctm-mob-dn-on-te-cr, var(--_ctm-tab-dn-on-te-cr, var(--_ctm-dn-on-te-cr)));
42
+ color: var(
43
+ --_ctm-mob-dn-sd-vt-ne-cr,
44
+ var(--_ctm-tab-dn-sd-vt-ne-cr, var(--_ctm-dn-sd-vt-ne-cr))
45
+ );
44
46
  font-family: var(
45
- --_ctm-mob-dn-on-te-ft-fy,
46
- var(--_ctm-tab-dn-on-te-ft-fy, var(--_ctm-dn-on-te-ft-fy))
47
+ --_ctm-mob-dn-sd-vt-ne-ft-fy,
48
+ var(--_ctm-tab-dn-sd-vt-ne-ft-fy, var(--_ctm-dn-sd-vt-ne-ft-fy))
47
49
  ),
48
50
  sans-serif;
49
51
  font-size: var(
50
- --_ctm-mob-dn-on-te-ft-se,
51
- var(--_ctm-tab-dn-on-te-ft-se, var(--_ctm-dn-on-te-ft-se))
52
+ --_ctm-mob-dn-sd-vt-ne-ft-se,
53
+ var(--_ctm-tab-dn-sd-vt-ne-ft-se, var(--_ctm-dn-sd-vt-ne-ft-se))
52
54
  );
53
55
  font-weight: var(
54
- --_ctm-mob-dn-on-te-ft-wt,
55
- var(--_ctm-tab-dn-on-te-ft-wt, var(--_ctm-dn-on-te-ft-wt))
56
+ --_ctm-mob-dn-sd-vt-ne-ft-wt,
57
+ var(--_ctm-tab-dn-sd-vt-ne-ft-wt, var(--_ctm-dn-sd-vt-ne-ft-wt))
56
58
  );
57
59
  font-style: var(
58
- --_ctm-mob-dn-on-te-ft-se-ic,
59
- var(--_ctm-tab-dn-on-te-ft-se-ic, var(--_ctm-dn-on-te-ft-se-ic))
60
+ --_ctm-mob-dn-sd-vt-ne-ft-se-ic,
61
+ var(--_ctm-tab-dn-sd-vt-ne-ft-se-ic, var(--_ctm-dn-sd-vt-ne-ft-se-ic))
60
62
  );
61
63
  text-align: var(
62
- --_ctm-mob-dn-on-te-tt-an,
63
- var(--_ctm-tab-dn-on-te-tt-an, var(--_ctm-dn-on-te-tt-an))
64
+ --_ctm-mob-dn-sd-vt-ne-tt-an,
65
+ var(--_ctm-tab-dn-sd-vt-ne-tt-an, var(--_ctm-dn-sd-vt-ne-tt-an))
64
66
  );
65
67
  letter-spacing: var(
66
- --_ctm-mob-dn-on-te-lr-sg,
67
- var(--_ctm-tab-dn-on-te-lr-sg, var(--_ctm-dn-on-te-lr-sg))
68
+ --_ctm-mob-dn-sd-vt-ne-lr-sg,
69
+ var(--_ctm-tab-dn-sd-vt-ne-lr-sg, var(--_ctm-dn-sd-vt-ne-lr-sg))
68
70
  );
69
71
  line-height: var(
70
- --_ctm-mob-dn-on-te-le-ht,
71
- var(--_ctm-tab-dn-on-te-le-ht, var(--_ctm-dn-on-te-le-ht))
72
+ --_ctm-mob-dn-sd-vt-ne-le-ht,
73
+ var(--_ctm-tab-dn-sd-vt-ne-le-ht, var(--_ctm-dn-sd-vt-ne-le-ht))
72
74
  );
73
75
  text-decoration: var(
74
- --_ctm-mob-dn-on-te-ue,
75
- var(--_ctm-tab-dn-on-te-ue, var(--_ctm-dn-on-te-ue))
76
+ --_ctm-mob-dn-sd-vt-ne-ue,
77
+ var(--_ctm-tab-dn-sd-vt-ne-ue, var(--_ctm-dn-sd-vt-ne-ue))
76
78
  );
77
79
  }
78
80
 
@@ -104,8 +106,50 @@ $minWidth: 70px;
104
106
  var(--_ctm-tab-lt-sh-te-dy-se-im-pg, var(--_ctm-lt-sh-te-dy-se-im-pg))
105
107
  );
106
108
 
109
+ .title {
110
+ margin-bottom: 4px;
111
+ color: var(
112
+ --_ctm-mob-dn-sd-vt-ne-cr,
113
+ var(--_ctm-tab-dn-sd-vt-ne-cr, var(--_ctm-dn-sd-vt-ne-cr))
114
+ );
115
+ font-family: var(
116
+ --_ctm-mob-dn-sd-vt-ne-ft-fy,
117
+ var(--_ctm-tab-dn-sd-vt-ne-ft-fy, var(--_ctm-dn-sd-vt-ne-ft-fy))
118
+ ),
119
+ sans-serif;
120
+ font-size: var(
121
+ --_ctm-mob-dn-sd-vt-ne-ft-se,
122
+ var(--_ctm-tab-dn-sd-vt-ne-ft-se, var(--_ctm-dn-sd-vt-ne-ft-se))
123
+ );
124
+ font-weight: var(
125
+ --_ctm-mob-dn-sd-vt-ne-ft-wt,
126
+ var(--_ctm-tab-dn-sd-vt-ne-ft-wt, var(--_ctm-dn-sd-vt-ne-ft-wt))
127
+ );
128
+ font-style: var(
129
+ --_ctm-mob-dn-sd-vt-ne-ft-se-ic,
130
+ var(--_ctm-tab-dn-sd-vt-ne-ft-se-ic, var(--_ctm-dn-sd-vt-ne-ft-se-ic))
131
+ );
132
+ text-align: var(
133
+ --_ctm-mob-dn-sd-vt-ne-tt-an,
134
+ var(--_ctm-tab-dn-sd-vt-ne-tt-an, var(--_ctm-dn-sd-vt-ne-tt-an))
135
+ );
136
+ letter-spacing: var(
137
+ --_ctm-mob-dn-sd-vt-ne-lr-sg,
138
+ var(--_ctm-tab-dn-sd-vt-ne-lr-sg, var(--_ctm-dn-sd-vt-ne-lr-sg))
139
+ );
140
+ line-height: var(
141
+ --_ctm-mob-dn-sd-vt-ne-le-ht,
142
+ var(--_ctm-tab-dn-sd-vt-ne-le-ht, var(--_ctm-dn-sd-vt-ne-le-ht))
143
+ );
144
+ text-decoration: var(
145
+ --_ctm-mob-dn-sd-vt-ne-ue,
146
+ var(--_ctm-tab-dn-sd-vt-ne-ue, var(--_ctm-dn-sd-vt-ne-ue))
147
+ );
148
+ }
149
+
107
150
  .select__group {
108
151
  display: flex;
152
+ flex-wrap: wrap;
109
153
  flex-direction: row;
110
154
  gap: var(
111
155
  --_ctm-mob-lt-sh-te-dy-se-im-sg,
@@ -115,14 +159,6 @@ $minWidth: 70px;
115
159
  &[data-swatch-dispaly="Vertically"] {
116
160
  flex-direction: column;
117
161
  }
118
- &[data-swatch-overflow="Scroll"] {
119
- flex-wrap: nowrap;
120
- overflow-x: auto;
121
- }
122
- &[data-swatch-overflow="Wrap"] {
123
- flex-wrap: wrap;
124
- }
125
-
126
162
  .show_more_button {
127
163
  background-color: var(
128
164
  --_ctm-mob-dn-sw-me-is-bn-bd-cr,
@@ -206,14 +242,14 @@ $minWidth: 70px;
206
242
  var(--_ctm-tab-dn-sh-on-ve-se-dt-se-bd-cr, var(--_ctm-dn-sh-on-ve-se-dt-se-bd-cr))
207
243
  );
208
244
 
209
- &[data-swatch-shape="circle"] {
245
+ &[data-dt-se-bd-se="circle"] {
210
246
  border-radius: 999px;
211
247
  }
212
- &[data-swatch-shape="square"],
213
- &[data-swatch-shape="none"] {
248
+ &[data-dt-se-bd-se="square"],
249
+ &[data-dt-se-bd-se="none"] {
214
250
  border-radius: 0px;
215
251
  }
216
- &[data-swatch-shape="rounded"] {
252
+ &[data-dt-se-bd-se="rounded"] {
217
253
  border-radius: var(
218
254
  --_ctm-mob-dn-sh-on-ve-se-dt-se-br-rs,
219
255
  var(
@@ -243,10 +279,10 @@ $minWidth: 70px;
243
279
 
244
280
  // height: 30px;
245
281
  // width: 30px;
246
- // &[data-swatch-shape="Circle"] {
282
+ // &[data-dt-se-bd-se="Circle"] {
247
283
  // border-radius: 50%;
248
284
  // }
249
- // &[data-swatch-shape="None"] {
285
+ // &[data-dt-se-bd-se="None"] {
250
286
  // height: 0;
251
287
  // width: 0;
252
288
  // }
@@ -255,14 +291,14 @@ $minWidth: 70px;
255
291
  --_ctm-mob-dn-sh-on-ve-se-hr-se-bd-cr,
256
292
  var(--_ctm-tab-dn-sh-on-ve-se-hr-se-bd-cr, var(--_ctm-dn-sh-on-ve-se-hr-se-bd-cr))
257
293
  );
258
- &[data-swatch-shape="circle"] {
294
+ &[data-dt-se-bd-se="circle"] {
259
295
  border-radius: 999px;
260
296
  }
261
- &[data-swatch-shape="square"],
262
- &[data-swatch-shape="none"] {
297
+ &[data-dt-se-bd-se="square"],
298
+ &[data-dt-se-bd-se="none"] {
263
299
  border-radius: 0px;
264
300
  }
265
- &[data-swatch-shape="rounded"] {
301
+ &[data-dt-se-bd-se="rounded"] {
266
302
  border-radius: var(
267
303
  --_ctm-mob-dn-sh-on-ve-se-dt-se-br-rs,
268
304
  var(
@@ -291,10 +327,10 @@ $minWidth: 70px;
291
327
  }
292
328
  // height: 30px;
293
329
  // width: 30px;
294
- // &[data-swatch-shape="Circle"] {
330
+ // &[data-dt-se-bd-se="Circle"] {
295
331
  // border-radius: 50%;
296
332
  // }
297
- // &[data-swatch-shape="None"] {
333
+ // &[data-dt-se-bd-se="None"] {
298
334
  // height: 0;
299
335
  // width: 0;
300
336
  // }
@@ -343,14 +379,14 @@ $minWidth: 70px;
343
379
  )
344
380
  );
345
381
 
346
- &[data-swatch-shape="circle"] {
382
+ &[data-dt-se-bd-se="circle"] {
347
383
  border-radius: 999px;
348
384
  }
349
- &[data-swatch-shape="square"],
350
- &[data-swatch-shape="none"] {
385
+ &[data-dt-se-bd-se="square"],
386
+ &[data-dt-se-bd-se="none"] {
351
387
  border-radius: 0px;
352
388
  }
353
- &[data-swatch-shape="rounded"] {
389
+ &[data-dt-se-bd-se="rounded"] {
354
390
  border-radius: var(
355
391
  --_ctm-mob-dn-sh-on-ve-se-dt-se-br-rs,
356
392
  var(
@@ -379,10 +415,10 @@ $minWidth: 70px;
379
415
  }
380
416
  // height: 30px;
381
417
  // width: 30px;
382
- // &[data-swatch-shape="Circle"] {
418
+ // &[data-dt-se-bd-se="Circle"] {
383
419
  // border-radius: 50%;
384
420
  // }
385
- // &[data-swatch-shape="None"] {
421
+ // &[data-dt-se-bd-se="None"] {
386
422
  // height: 0;
387
423
  // width: 0;
388
424
  // }
@@ -463,13 +499,13 @@ $minWidth: 70px;
463
499
 
464
500
  cursor: pointer;
465
501
  overflow: hidden;
466
- &[data-swatch-shape="circle"] {
502
+ &[data-dt-se-sh-se="circle"] {
467
503
  border-radius: 999px;
468
504
  }
469
- &[data-swatch-shape="square"] {
505
+ &[data-dt-se-sh-se="square"] {
470
506
  border-radius: 0px;
471
507
  }
472
- &[data-swatch-shape="rounded"] {
508
+ &[data-dt-se-sh-se="rounded"] {
473
509
  border-radius: var(
474
510
  --_ctm-mob-dn-sh-on-ve-se-dt-se-br-rs,
475
511
  var(
@@ -618,7 +654,7 @@ $minWidth: 70px;
618
654
  }
619
655
 
620
656
  &.disabled {
621
- cursor: not-allowed;
657
+ // cursor: not-allowed;
622
658
  opacity: 0.4;
623
659
  &[data-swatch-type="Swatch Image"] {
624
660
  position: relative;
@@ -651,10 +687,14 @@ $minWidth: 70px;
651
687
  }
652
688
  }
653
689
  }
654
- .product-select-image {
655
- width: 40px;
656
- height: 40px;
657
- object-fit: contain;
690
+ &[data-swatch-type="Product Image"] {
691
+ width: 100px;
692
+ height: 100px;
693
+ .product-select-image {
694
+ width: 100%;
695
+ height: 100%;
696
+ object-fit: cover;
697
+ }
658
698
  }
659
699
  }
660
700
  }
@@ -676,6 +716,46 @@ $minWidth: 70px;
676
716
  var(--_ctm-tab-lt-se-st-dy-se-im-pg, var(--_ctm-lt-se-st-dy-se-im-pg))
677
717
  );
678
718
 
719
+ .title {
720
+ margin-bottom: 4px;
721
+ color: var(
722
+ --_ctm-mob-dn-sd-vt-ne-cr,
723
+ var(--_ctm-tab-dn-sd-vt-ne-cr, var(--_ctm-dn-sd-vt-ne-cr))
724
+ );
725
+ font-family: var(
726
+ --_ctm-mob-dn-sd-vt-ne-ft-fy,
727
+ var(--_ctm-tab-dn-sd-vt-ne-ft-fy, var(--_ctm-dn-sd-vt-ne-ft-fy))
728
+ ),
729
+ sans-serif;
730
+ font-size: var(
731
+ --_ctm-mob-dn-sd-vt-ne-ft-se,
732
+ var(--_ctm-tab-dn-sd-vt-ne-ft-se, var(--_ctm-dn-sd-vt-ne-ft-se))
733
+ );
734
+ font-weight: var(
735
+ --_ctm-mob-dn-sd-vt-ne-ft-wt,
736
+ var(--_ctm-tab-dn-sd-vt-ne-ft-wt, var(--_ctm-dn-sd-vt-ne-ft-wt))
737
+ );
738
+ font-style: var(
739
+ --_ctm-mob-dn-sd-vt-ne-ft-se-ic,
740
+ var(--_ctm-tab-dn-sd-vt-ne-ft-se-ic, var(--_ctm-dn-sd-vt-ne-ft-se-ic))
741
+ );
742
+ text-align: var(
743
+ --_ctm-mob-dn-sd-vt-ne-tt-an,
744
+ var(--_ctm-tab-dn-sd-vt-ne-tt-an, var(--_ctm-dn-sd-vt-ne-tt-an))
745
+ );
746
+ letter-spacing: var(
747
+ --_ctm-mob-dn-sd-vt-ne-lr-sg,
748
+ var(--_ctm-tab-dn-sd-vt-ne-lr-sg, var(--_ctm-dn-sd-vt-ne-lr-sg))
749
+ );
750
+ line-height: var(
751
+ --_ctm-mob-dn-sd-vt-ne-le-ht,
752
+ var(--_ctm-tab-dn-sd-vt-ne-le-ht, var(--_ctm-dn-sd-vt-ne-le-ht))
753
+ );
754
+ text-decoration: var(
755
+ --_ctm-mob-dn-sd-vt-ne-ue,
756
+ var(--_ctm-tab-dn-sd-vt-ne-ue, var(--_ctm-dn-sd-vt-ne-ue))
757
+ );
758
+ }
679
759
  .select__group {
680
760
  display: flex;
681
761
  gap: 8px;
@@ -785,176 +865,6 @@ $minWidth: 70px;
785
865
  minmax(auto, 1fr)
786
866
  );
787
867
  }
788
-
789
- .item {
790
- background-color: var(
791
- --_ctm-mob-dn-sh-on-ve-se-dt-se-bd-cr,
792
- var(--_ctm-tab-dn-sh-on-ve-se-dt-se-bd-cr, var(--_ctm-dn-sh-on-ve-se-dt-se-bd-cr))
793
- );
794
-
795
- &[data-swatch-shape="circle"] {
796
- border-radius: 999px;
797
- }
798
- &[data-swatch-shape="square"],
799
- &[data-swatch-shape="none"] {
800
- border-radius: 0px;
801
- }
802
- &[data-swatch-shape="rounded"] {
803
- border-radius: var(
804
- --_ctm-mob-dn-sh-on-ve-se-dt-se-br-rs,
805
- var(
806
- --_ctm-tab-dn-sh-on-ve-se-dt-se-br-rs,
807
- var(
808
- --_ctm-dn-sh-on-ve-se-dt-se-br-rs,
809
- var(
810
- --_ctm-mob-dn-sh-on-ve-se-hr-se-br-rs,
811
- var(
812
- --_ctm-tab-dn-sh-on-ve-se-hr-se-br-rs,
813
- var(
814
- --_ctm-dn-sh-on-ve-se-hr-se-br-rs,
815
- var(
816
- --_ctm-mob-dn-sh-on-ve-se-sd-se-br-rs,
817
- var(
818
- --_ctm-tab-dn-sh-on-ve-se-sd-se-br-rs,
819
- var(--_ctm-dn-sh-on-ve-se-sd-se-br-rs)
820
- )
821
- )
822
- )
823
- )
824
- )
825
- )
826
- )
827
- );
828
- }
829
- &:hover {
830
- background-color: var(
831
- --_ctm-mob-dn-sh-on-ve-se-hr-se-bd-cr,
832
- var(--_ctm-tab-dn-sh-on-ve-se-hr-se-bd-cr, var(--_ctm-dn-sh-on-ve-se-hr-se-bd-cr))
833
- );
834
- &[data-swatch-shape="circle"] {
835
- border-radius: 999px;
836
- }
837
- &[data-swatch-shape="square"],
838
- &[data-swatch-shape="none"] {
839
- border-radius: 0px;
840
- }
841
- &[data-swatch-shape="rounded"] {
842
- border-radius: var(
843
- --_ctm-mob-dn-sh-on-ve-se-dt-se-br-rs,
844
- var(
845
- --_ctm-tab-dn-sh-on-ve-se-dt-se-br-rs,
846
- var(
847
- --_ctm-dn-sh-on-ve-se-dt-se-br-rs,
848
- var(
849
- --_ctm-mob-dn-sh-on-ve-se-hr-se-br-rs,
850
- var(
851
- --_ctm-tab-dn-sh-on-ve-se-hr-se-br-rs,
852
- var(
853
- --_ctm-dn-sh-on-ve-se-hr-se-br-rs,
854
- var(
855
- --_ctm-mob-dn-sh-on-ve-se-sd-se-br-rs,
856
- var(
857
- --_ctm-tab-dn-sh-on-ve-se-sd-se-br-rs,
858
- var(--_ctm-dn-sh-on-ve-se-sd-se-br-rs)
859
- )
860
- )
861
- )
862
- )
863
- )
864
- )
865
- )
866
- );
867
- }
868
- // height: 30px;
869
- // width: 30px;
870
- // &[data-swatch-shape="Circle"] {
871
- // border-radius: 50%;
872
- // }
873
- // &[data-swatch-shape="None"] {
874
- // height: 0;
875
- // width: 0;
876
- // }
877
- }
878
- &.selected_item {
879
- width: fit-content;
880
- background-color: var(
881
- --_ctm-mob-dn-sh-on-ve-se-sd-se-bd-cr,
882
- var(--_ctm-tab-dn-sh-on-ve-se-sd-se-bd-cr, var(--_ctm-dn-sh-on-ve-se-sd-se-bd-cr))
883
- );
884
- border-radius: var(
885
- --_ctm-mob-dn-sh-on-ve-se-sd-se-br-rs,
886
- var(--_ctm-tab-dn-sh-on-ve-se-sd-se-br-rs, var(--_ctm-dn-sh-on-ve-se-sd-se-br-rs))
887
- );
888
-
889
- border-color: var(
890
- --_show-border-im-se,
891
- var(
892
- --_ctm-mob-dn-sh-on-ve-se-sd-se-br-cr,
893
- var(
894
- --_ctm-tab-dn-sh-on-ve-se-sd-se-br-cr,
895
- var(--_ctm-dn-sh-on-ve-se-sd-se-br-cr)
896
- )
897
- )
898
- );
899
-
900
- border-style: var(
901
- --_show-border-im-se,
902
- var(
903
- --_ctm-mob-dn-sh-on-ve-se-sd-se-br-se,
904
- var(
905
- --_ctm-tab-dn-sh-on-ve-se-sd-se-br-se,
906
- var(--_ctm-dn-sh-on-ve-se-sd-se-br-se)
907
- )
908
- )
909
- );
910
-
911
- border-width: var(
912
- --_show-border-im-se,
913
- var(
914
- --_ctm-mob-dn-sh-on-ve-se-sd-se-br-wh,
915
- var(
916
- --_ctm-tab-dn-sh-on-ve-se-sd-se-br-wh,
917
- var(--_ctm-dn-sh-on-ve-se-sd-se-br-wh)
918
- )
919
- )
920
- );
921
-
922
- &[data-swatch-shape="circle"] {
923
- border-radius: 999px;
924
- }
925
- &[data-swatch-shape="square"],
926
- &[data-swatch-shape="none"] {
927
- border-radius: 0px;
928
- }
929
- &[data-swatch-shape="rounded"] {
930
- border-radius: var(
931
- --_ctm-mob-dn-sh-on-ve-se-dt-se-br-rs,
932
- var(
933
- --_ctm-tab-dn-sh-on-ve-se-dt-se-br-rs,
934
- var(
935
- --_ctm-dn-sh-on-ve-se-dt-se-br-rs,
936
- var(
937
- --_ctm-mob-dn-sh-on-ve-se-hr-se-br-rs,
938
- var(
939
- --_ctm-tab-dn-sh-on-ve-se-hr-se-br-rs,
940
- var(
941
- --_ctm-dn-sh-on-ve-se-hr-se-br-rs,
942
- var(
943
- --_ctm-mob-dn-sh-on-ve-se-sd-se-br-rs,
944
- var(
945
- --_ctm-tab-dn-sh-on-ve-se-sd-se-br-rs,
946
- var(--_ctm-dn-sh-on-ve-se-sd-se-br-rs)
947
- )
948
- )
949
- )
950
- )
951
- )
952
- )
953
- )
954
- );
955
- }
956
- }
957
- }
958
868
  .select__group__item {
959
869
  transition: color 0.3s ease;
960
870
  padding: 5px 12px;
@@ -996,14 +906,14 @@ $minWidth: 70px;
996
906
  var(--_ctm-tab-dn-se-on-ve-se-dt-se-br-rs, var(--_ctm-dn-se-on-ve-se-dt-se-br-rs))
997
907
  );
998
908
 
999
- &[data-swatch-shape="circle"] {
909
+ &[data-dt-se-bd-se="circle"] {
1000
910
  border-radius: 999px;
1001
911
  }
1002
- &[data-swatch-shape="square"],
1003
- &[data-swatch-shape="none"] {
912
+ &[data-dt-se-bd-se="square"],
913
+ &[data-dt-se-bd-se="none"] {
1004
914
  border-radius: 0;
1005
915
  }
1006
- &[data-swatch-shape="rounded"] {
916
+ &[data-dt-se-bd-se="rounded"] {
1007
917
  border-radius: var(
1008
918
  --_ctm-mob-dn-se-on-ve-se-dt-se-br-rs,
1009
919
  var(--_ctm-tab-dn-se-on-ve-se-dt-se-br-rs, var(--_ctm-dn-se-on-ve-se-dt-se-br-rs))
@@ -1298,7 +1208,7 @@ $minWidth: 70px;
1298
1208
  border-bottom: 2px solid var(--_primary-400);
1299
1209
  }
1300
1210
  &.disabled {
1301
- cursor: not-allowed;
1211
+ // cursor: not-allowed;
1302
1212
  opacity: 0.4;
1303
1213
  position: relative;
1304
1214
  overflow: hidden;
@@ -1348,44 +1258,6 @@ $minWidth: 70px;
1348
1258
  );
1349
1259
  }
1350
1260
  }
1351
-
1352
- .title {
1353
- margin-bottom: 4px;
1354
- color: var(--_ctm-mob-dn-on-te-cr, var(--_ctm-tab-dn-on-te-cr, var(--_ctm-dn-on-te-cr)));
1355
- font-family: var(
1356
- --_ctm-mob-dn-on-te-ft-fy,
1357
- var(--_ctm-tab-dn-on-te-ft-fy, var(--_ctm-dn-on-te-ft-fy))
1358
- ),
1359
- sans-serif;
1360
- font-size: var(
1361
- --_ctm-mob-dn-on-te-ft-se,
1362
- var(--_ctm-tab-dn-on-te-ft-se, var(--_ctm-dn-on-te-ft-se))
1363
- );
1364
- font-weight: var(
1365
- --_ctm-mob-dn-on-te-ft-wt,
1366
- var(--_ctm-tab-dn-on-te-ft-wt, var(--_ctm-dn-on-te-ft-wt))
1367
- );
1368
- font-style: var(
1369
- --_ctm-mob-dn-on-te-ft-se-ic,
1370
- var(--_ctm-tab-dn-on-te-ft-se-ic, var(--_ctm-dn-on-te-ft-se-ic))
1371
- );
1372
- text-align: var(
1373
- --_ctm-mob-dn-on-te-tt-an,
1374
- var(--_ctm-tab-dn-on-te-tt-an, var(--_ctm-dn-on-te-tt-an))
1375
- );
1376
- letter-spacing: var(
1377
- --_ctm-mob-dn-on-te-lr-sg,
1378
- var(--_ctm-tab-dn-on-te-lr-sg, var(--_ctm-dn-on-te-lr-sg))
1379
- );
1380
- line-height: var(
1381
- --_ctm-mob-dn-on-te-le-ht,
1382
- var(--_ctm-tab-dn-on-te-le-ht, var(--_ctm-dn-on-te-le-ht))
1383
- );
1384
- text-decoration: var(
1385
- --_ctm-mob-dn-on-te-ue,
1386
- var(--_ctm-tab-dn-on-te-ue, var(--_ctm-dn-on-te-ue))
1387
- );
1388
- }
1389
1261
  }
1390
1262
  //Dropdown
1391
1263
  .est__dropdown__main {
@@ -1548,7 +1420,7 @@ $minWidth: 70px;
1548
1420
  }
1549
1421
 
1550
1422
  &.disabled {
1551
- cursor: not-allowed;
1423
+ // cursor: not-allowed;
1552
1424
  opacity: 0.4;
1553
1425
  }
1554
1426
  }
@@ -2281,353 +2153,6 @@ $minWidth: 70px;
2281
2153
  }
2282
2154
  }
2283
2155
  }
2284
-
2285
- // embla
2286
-
2287
- .embla {
2288
- width: 100%;
2289
- height: 100%;
2290
- position: relative;
2291
- display: flex;
2292
- flex-direction: column;
2293
-
2294
- // overflow: hidden;
2295
-
2296
- .embla__viewport {
2297
- width: 100%;
2298
- height: 100%;
2299
- position: relative;
2300
- display: flex;
2301
- flex-direction: column;
2302
-
2303
- overflow: hidden;
2304
-
2305
- .embla__container {
2306
- width: 100%;
2307
- height: 100%;
2308
- display: flex;
2309
- grid-template-rows: 100%;
2310
- // grid-template-columns: 100%;
2311
- // grid-template-columns: repeat(
2312
- // var(--_ctm-lt-is-pr-se),
2313
- // calc(100% / var(--_ctm-lt-is-pr-se))
2314
- // );
2315
- // grid-auto-flow: column;
2316
- gap: var(--_ctm-mob-lt-sh-im-sg, var(--_ctm-tab-lt-sh-im-sg, var(--_ctm-lt-sh-im-sg)));
2317
-
2318
- &[data-control-type="Bottom"][data-slider-control="Arrows"] {
2319
- height: calc(
2320
- 100% - calc(
2321
- var(
2322
- --_ctm-mob-dn-pn-as-aw-se,
2323
- var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
2324
- ) +
2325
- 8px
2326
- )
2327
- );
2328
- }
2329
- &[data-control-type="Bottom"][data-slider-control="Pagination Line"] {
2330
- height: calc(
2331
- 100% - calc(
2332
- var(
2333
- --_ctm-mob-dn-pn-le-le-ht,
2334
- var(--_ctm-tab-dn-pn-le-le-ht, var(--_ctm-dn-pn-le-le-ht))
2335
- ) +
2336
- 20px
2337
- )
2338
- );
2339
- }
2340
- &[data-control-type="Bottom"][data-slider-control="Dots"] {
2341
- height: calc(
2342
- 100% - calc(
2343
- var(
2344
- --_ctm-mob-dn-pn-ds-dt-se,
2345
- var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
2346
- ) +
2347
- 20px
2348
- )
2349
- );
2350
- }
2351
-
2352
- .embla__slide {
2353
- // width: 100%;
2354
- height: 100%;
2355
- }
2356
- }
2357
- }
2358
-
2359
- .arrow-navigation {
2360
- display: flex;
2361
- position: absolute;
2362
- top: 50%;
2363
- left: 50%;
2364
- width: 100%;
2365
- justify-content: space-between;
2366
- transform: translate(-50%, -50%);
2367
- // padding-left: 20px;
2368
- &[data-control-type="Side"] {
2369
- .left-button,
2370
- .right-button {
2371
- background-color: transparent;
2372
- }
2373
- }
2374
- &[data-background-shape="Round"] {
2375
- .left-button,
2376
- .right-button {
2377
- background-color: #f2f5f5;
2378
- box-sizing: 0 4px 8px rgba(0, 0, 0, 0.1);
2379
- }
2380
- }
2381
- &[data-control-type="Bottom-Overflow"] {
2382
- transform: translateX(-50%);
2383
- width: 100%;
2384
- justify-content: center;
2385
- gap: 12px;
2386
- top: unset;
2387
- bottom: 6px;
2388
- }
2389
- &[data-control-type="Bottom"] {
2390
- transform: unset;
2391
- position: static;
2392
- width: 100%;
2393
- justify-content: center;
2394
- gap: 12px;
2395
- margin-top: 10px;
2396
- }
2397
- .left-button {
2398
- padding: 10px;
2399
- border-radius: 50%;
2400
- border: none;
2401
- width: var(
2402
- --_ctm-mob-dn-pn-as-aw-se,
2403
- var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
2404
- );
2405
- height: var(
2406
- --_ctm-mob-dn-pn-as-aw-se,
2407
- var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
2408
- );
2409
-
2410
- display: flex;
2411
- align-items: center;
2412
- justify-content: center;
2413
- cursor: pointer;
2414
- outline: none;
2415
- margin-left: 12px;
2416
- &:disabled {
2417
- & svg {
2418
- path {
2419
- stroke: rgb(192, 192, 192);
2420
- }
2421
- }
2422
- }
2423
- }
2424
- .right-button {
2425
- border-radius: 50%;
2426
- border: none;
2427
- width: var(
2428
- --_ctm-mob-dn-pn-as-aw-se,
2429
- var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
2430
- );
2431
- height: var(
2432
- --_ctm-mob-dn-pn-as-aw-se,
2433
- var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
2434
- );
2435
-
2436
- display: flex;
2437
- align-items: center;
2438
- justify-content: center;
2439
- cursor: pointer;
2440
- outline: none;
2441
- margin-right: 12px;
2442
- padding: 10px;
2443
-
2444
- &:disabled {
2445
- & svg {
2446
- path {
2447
- stroke: rgb(192, 192, 192);
2448
- }
2449
- }
2450
- }
2451
- }
2452
- .icon {
2453
- display: flex;
2454
- svg {
2455
- width: calc(
2456
- var(
2457
- --_ctm-mob-dn-pn-as-aw-se,
2458
- var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
2459
- ) *
2460
- 0.5
2461
- );
2462
- height: calc(
2463
- var(
2464
- --_ctm-mob-dn-pn-as-aw-se,
2465
- var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
2466
- ) *
2467
- 0.5
2468
- );
2469
- path {
2470
- stroke: var(
2471
- --_ctm-mob-dn-pn-as-aw-cr,
2472
- var(--_ctm-tab-dn-pn-as-aw-cr, var(--_ctm-dn-pn-as-aw-cr))
2473
- );
2474
- }
2475
- }
2476
- }
2477
- }
2478
-
2479
- &[data-thumbnail-placement="top"] {
2480
- flex-direction: column-reverse;
2481
- }
2482
- &[data-thumbnail-placement="bottom"] {
2483
- flex-direction: column;
2484
- }
2485
- &[data-thumbnail-placement="left"] {
2486
- flex-direction: row-reverse;
2487
-
2488
- .embla__thumbs {
2489
- width: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
2490
-
2491
- height: 100%;
2492
-
2493
- & .embla__thumbs__container {
2494
- flex-direction: column;
2495
- height: 100%;
2496
- }
2497
- }
2498
- }
2499
- &[data-thumbnail-placement="right"] {
2500
- flex-direction: row;
2501
- .embla__thumbs {
2502
- width: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
2503
-
2504
- height: 100%;
2505
-
2506
- & .embla__thumbs__container {
2507
- flex-direction: column;
2508
- height: 100%;
2509
- }
2510
- }
2511
- }
2512
- &[data-control-type="Side"] {
2513
- display: flex;
2514
- align-self: center;
2515
- flex-direction: row;
2516
- .left-button:disabled,
2517
- .right-button:disabled {
2518
- display: none;
2519
- }
2520
- }
2521
- .embla__dots {
2522
- display: flex;
2523
- flex-wrap: wrap;
2524
- justify-content: center;
2525
- align-items: center;
2526
- margin-right: calc((2.6rem - 1.4rem) / 2 * -1);
2527
- gap: 6px;
2528
- margin-top: 16px;
2529
-
2530
- &[data-control-type="Bottom-Overflow"] {
2531
- position: absolute;
2532
- bottom: 10px;
2533
- left: 50%;
2534
- transform: translateX(-50%);
2535
- width: 75%;
2536
- }
2537
- .embla__dot {
2538
- -webkit-tap-highlight-color: rgba(var(--text-high-contrast-rgb-value), 0.5);
2539
- -webkit-appearance: none;
2540
- appearance: none;
2541
- background-color: var(--_ctm-dn-pn-ds-or-dt-cr, var(--_tst-dn-pn-ds-or-dt-cr));
2542
- touch-action: manipulation;
2543
- display: inline-flex;
2544
- text-decoration: none;
2545
- cursor: pointer;
2546
- border: 0;
2547
- padding: 0;
2548
- margin: 0;
2549
- // width: 0.6rem;
2550
- // height: 0.6rem;
2551
- width: var(--_ctm-dn-pn-ds-dt-se, var(--_tst-dn-pn-ds-dt-se));
2552
- height: var(--_ctm-dn-pn-ds-dt-se, var(--_tst-dn-pn-ds-dt-se));
2553
- display: flex;
2554
- align-items: center;
2555
- justify-content: center;
2556
- border-radius: 50%;
2557
- }
2558
- .embla__dot:after {
2559
- // box-shadow: inset 0 0 0 0.2rem var(--detail-medium-contrast);
2560
- width: var(--_ctm-dn-pn-ds-dt-se, var(--_tst-dn-pn-ds-dt-se));
2561
- height: var(--_ctm-dn-pn-ds-dt-se, var(--_tst-dn-pn-ds-dt-se));
2562
- border-radius: 50%;
2563
- display: flex;
2564
- align-items: center;
2565
- content: "";
2566
- }
2567
- .embla__dot--selected:after {
2568
- box-shadow: inset 0 0 0 1px var(--text-body);
2569
- background-color: var(--_ctm-dn-pn-ds-ct-dt-cr, var(--_tst-dn-pn-ds-ct-dt-cr));
2570
- }
2571
- &[data-slider-control="Pagination Line"] {
2572
- .embla__dot {
2573
- width: var(--_ctm-dn-pn-le-le-wh, var(--_ctm-dn-pn-le-le-wh));
2574
- height: var(--_ctm-dn-pn-le-le-ht, var(--_tst-dn-pn-le-le-ht));
2575
- background-color: var(--_ctm-dn-pn-le-or-le-cr, var(--_ctm-dn-pn-le-or-le-cr));
2576
-
2577
- border-radius: 6px;
2578
- }
2579
- .embla__dot--selected:after {
2580
- box-shadow: inset 0 0 0 1px var(--text-body);
2581
- border-radius: 6px;
2582
- width: var(--_ctm-dn-pn-le-le-wh, var(--_ctm-dn-pn-le-le-wh));
2583
- height: var(--_ctm-dn-pn-le-le-ht, var(--_tst-dn-pn-le-le-ht));
2584
- // background-color: #fff;
2585
- background-color: var(--_ctm-dn-pn-le-ct-le-cr, var(--_tst-dn-pn-le-ct-le-cr));
2586
- }
2587
- }
2588
- }
2589
-
2590
- .embla__thumbs {
2591
- width: 100%;
2592
- height: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
2593
-
2594
- position: relative;
2595
- display: grid;
2596
- grid-template-columns: 1fr;
2597
- overflow: hidden;
2598
- // margin: 10px;
2599
- padding: 10px;
2600
-
2601
- .embla__thumbs__viewport {
2602
- width: 100%;
2603
- height: 100%;
2604
- position: relative;
2605
- display: flex;
2606
- flex-direction: column;
2607
-
2608
- overflow: hidden;
2609
- }
2610
- .embla__thumbs__container {
2611
- display: flex;
2612
- flex-direction: row;
2613
- margin-left: calc(var(--thumbs-slide-spacing) * -1);
2614
- gap: var(--_ctm-lt-tl-sg);
2615
- width: 100%;
2616
- // justify-content: center;
2617
- // height: 200px;
2618
-
2619
- .embla__thumbs__slide {
2620
- min-width: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
2621
- max-width: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
2622
- height: var(--_ctm-mob-lt-tl-se, var(--_ctm-tab-lt-tl-se, var(--_ctm-lt-tl-se)));
2623
- & img {
2624
- width: 100%;
2625
- height: 100%;
2626
- }
2627
- }
2628
- }
2629
- }
2630
- }
2631
2156
  }
2632
2157
  }
2633
2158
  }