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

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 (43) hide show
  1. package/dist/amount-estimator.scss +291 -226
  2. package/dist/builder.js +1 -1
  3. package/dist/bulk-order-pad.scss +119 -64
  4. package/dist/bundleDetails.scss +808 -678
  5. package/dist/buyForHeaders.scss +94 -29
  6. package/dist/cart-details.scss +5 -3
  7. package/dist/cartDropdownOverlay.scss +0 -13
  8. package/dist/dropdownTemplate.scss +141 -0
  9. package/dist/faq.scss +20 -24
  10. package/dist/functions.scss +53 -18
  11. package/dist/item-stock.scss +38 -76
  12. package/dist/map.scss +35 -35
  13. package/dist/menu-item.scss +19 -0
  14. package/dist/modal.scss +328 -0
  15. package/dist/order-status.scss +483 -0
  16. package/dist/payment-methods.scss +71 -1
  17. package/dist/pickup-locations.scss +22 -19
  18. package/dist/product-basic-elements.scss +285 -132
  19. package/dist/product-options.scss +118 -76
  20. package/dist/quick-links.scss +186 -143
  21. package/dist/quick-order-pad.scss +26 -285
  22. package/dist/quotes.scss +9 -0
  23. package/dist/repeater-item.scss +1 -0
  24. package/dist/rfqs.scss +8 -0
  25. package/dist/section.scss +29 -78
  26. package/dist/stack.scss +16 -61
  27. package/dist/store-locations.scss +21 -20
  28. package/dist/table-common.scss +510 -0
  29. package/dist/text-temp-v2.scss +2 -0
  30. package/dist/types/builder/elements/bundle-details/index.d.ts +30 -0
  31. package/dist/types/builder/enums/index.d.ts +1 -0
  32. package/dist/types/builder/index.d.ts +2 -1
  33. package/dist/types/builder/tools/element-edit/bundleDetails.d.ts +627 -10
  34. package/dist/types/builder/tools/element-edit/buyForWithTab.d.ts +287 -4
  35. package/dist/types/builder/tools/element-edit/cartDetails.d.ts +1 -1
  36. package/dist/types/builder/tools/element-edit/itemStock.d.ts +11 -0
  37. package/dist/types/builder/tools/element-edit/paymentMethods.d.ts +94 -1
  38. package/dist/uom-selector.scss +929 -1416
  39. package/dist/variant-picker.scss +613 -138
  40. package/dist/volume-pricing copy.scss +1092 -0
  41. package/dist/volume-pricing.scss +1007 -606
  42. package/dist/widget.scss +3 -0
  43. package/package.json +1 -1
package/dist/variant-picker.scss CHANGED
@@ -1,6 +1,7 @@
1
1
  @use "sass:map";
2
2
  @use "sass:list";
3
3
  // @use "./functions.scss";
4
+
4
5
  $minWidth: 70px;
5
6
 
6
7
  [data-div-type="element"] {
@@ -39,42 +40,39 @@ $minWidth: 70px;
39
40
  }
40
41
  .option__title {
41
42
  margin-bottom: 4px;
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
- );
43
+ color: var(--_ctm-mob-dn-on-te-cr, var(--_ctm-tab-dn-on-te-cr, var(--_ctm-dn-on-te-cr)));
46
44
  font-family: var(
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))
45
+ --_ctm-mob-dn-on-te-ft-fy,
46
+ var(--_ctm-tab-dn-on-te-ft-fy, var(--_ctm-dn-on-te-ft-fy))
49
47
  ),
50
48
  sans-serif;
51
49
  font-size: var(
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))
50
+ --_ctm-mob-dn-on-te-ft-se,
51
+ var(--_ctm-tab-dn-on-te-ft-se, var(--_ctm-dn-on-te-ft-se))
54
52
  );
55
53
  font-weight: var(
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))
54
+ --_ctm-mob-dn-on-te-ft-wt,
55
+ var(--_ctm-tab-dn-on-te-ft-wt, var(--_ctm-dn-on-te-ft-wt))
58
56
  );
59
57
  font-style: var(
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))
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))
62
60
  );
63
61
  text-align: var(
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))
62
+ --_ctm-mob-dn-on-te-tt-an,
63
+ var(--_ctm-tab-dn-on-te-tt-an, var(--_ctm-dn-on-te-tt-an))
66
64
  );
67
65
  letter-spacing: var(
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))
66
+ --_ctm-mob-dn-on-te-lr-sg,
67
+ var(--_ctm-tab-dn-on-te-lr-sg, var(--_ctm-dn-on-te-lr-sg))
70
68
  );
71
69
  line-height: var(
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))
70
+ --_ctm-mob-dn-on-te-le-ht,
71
+ var(--_ctm-tab-dn-on-te-le-ht, var(--_ctm-dn-on-te-le-ht))
74
72
  );
75
73
  text-decoration: var(
76
- --_ctm-mob-dn-sd-vt-ne-ue,
77
- var(--_ctm-tab-dn-sd-vt-ne-ue, var(--_ctm-dn-sd-vt-ne-ue))
74
+ --_ctm-mob-dn-on-te-ue,
75
+ var(--_ctm-tab-dn-on-te-ue, var(--_ctm-dn-on-te-ue))
78
76
  );
79
77
  }
80
78
 
@@ -106,50 +104,8 @@ $minWidth: 70px;
106
104
  var(--_ctm-tab-lt-sh-te-dy-se-im-pg, var(--_ctm-lt-sh-te-dy-se-im-pg))
107
105
  );
108
106
 
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
-
150
107
  .select__group {
151
108
  display: flex;
152
- flex-wrap: wrap;
153
109
  flex-direction: row;
154
110
  gap: var(
155
111
  --_ctm-mob-lt-sh-te-dy-se-im-sg,
@@ -159,6 +115,14 @@ $minWidth: 70px;
159
115
  &[data-swatch-dispaly="Vertically"] {
160
116
  flex-direction: column;
161
117
  }
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
+
162
126
  .show_more_button {
163
127
  background-color: var(
164
128
  --_ctm-mob-dn-sw-me-is-bn-bd-cr,
@@ -242,14 +206,14 @@ $minWidth: 70px;
242
206
  var(--_ctm-tab-dn-sh-on-ve-se-dt-se-bd-cr, var(--_ctm-dn-sh-on-ve-se-dt-se-bd-cr))
243
207
  );
244
208
 
245
- &[data-dt-se-bd-se="circle"] {
209
+ &[data-swatch-shape="circle"] {
246
210
  border-radius: 999px;
247
211
  }
248
- &[data-dt-se-bd-se="square"],
249
- &[data-dt-se-bd-se="none"] {
212
+ &[data-swatch-shape="square"],
213
+ &[data-swatch-shape="none"] {
250
214
  border-radius: 0px;
251
215
  }
252
- &[data-dt-se-bd-se="rounded"] {
216
+ &[data-swatch-shape="rounded"] {
253
217
  border-radius: var(
254
218
  --_ctm-mob-dn-sh-on-ve-se-dt-se-br-rs,
255
219
  var(
@@ -279,10 +243,10 @@ $minWidth: 70px;
279
243
 
280
244
  // height: 30px;
281
245
  // width: 30px;
282
- // &[data-dt-se-bd-se="Circle"] {
246
+ // &[data-swatch-shape="Circle"] {
283
247
  // border-radius: 50%;
284
248
  // }
285
- // &[data-dt-se-bd-se="None"] {
249
+ // &[data-swatch-shape="None"] {
286
250
  // height: 0;
287
251
  // width: 0;
288
252
  // }
@@ -291,14 +255,14 @@ $minWidth: 70px;
291
255
  --_ctm-mob-dn-sh-on-ve-se-hr-se-bd-cr,
292
256
  var(--_ctm-tab-dn-sh-on-ve-se-hr-se-bd-cr, var(--_ctm-dn-sh-on-ve-se-hr-se-bd-cr))
293
257
  );
294
- &[data-dt-se-bd-se="circle"] {
258
+ &[data-swatch-shape="circle"] {
295
259
  border-radius: 999px;
296
260
  }
297
- &[data-dt-se-bd-se="square"],
298
- &[data-dt-se-bd-se="none"] {
261
+ &[data-swatch-shape="square"],
262
+ &[data-swatch-shape="none"] {
299
263
  border-radius: 0px;
300
264
  }
301
- &[data-dt-se-bd-se="rounded"] {
265
+ &[data-swatch-shape="rounded"] {
302
266
  border-radius: var(
303
267
  --_ctm-mob-dn-sh-on-ve-se-dt-se-br-rs,
304
268
  var(
@@ -327,10 +291,10 @@ $minWidth: 70px;
327
291
  }
328
292
  // height: 30px;
329
293
  // width: 30px;
330
- // &[data-dt-se-bd-se="Circle"] {
294
+ // &[data-swatch-shape="Circle"] {
331
295
  // border-radius: 50%;
332
296
  // }
333
- // &[data-dt-se-bd-se="None"] {
297
+ // &[data-swatch-shape="None"] {
334
298
  // height: 0;
335
299
  // width: 0;
336
300
  // }
@@ -379,14 +343,14 @@ $minWidth: 70px;
379
343
  )
380
344
  );
381
345
 
382
- &[data-dt-se-bd-se="circle"] {
346
+ &[data-swatch-shape="circle"] {
383
347
  border-radius: 999px;
384
348
  }
385
- &[data-dt-se-bd-se="square"],
386
- &[data-dt-se-bd-se="none"] {
349
+ &[data-swatch-shape="square"],
350
+ &[data-swatch-shape="none"] {
387
351
  border-radius: 0px;
388
352
  }
389
- &[data-dt-se-bd-se="rounded"] {
353
+ &[data-swatch-shape="rounded"] {
390
354
  border-radius: var(
391
355
  --_ctm-mob-dn-sh-on-ve-se-dt-se-br-rs,
392
356
  var(
@@ -415,10 +379,10 @@ $minWidth: 70px;
415
379
  }
416
380
  // height: 30px;
417
381
  // width: 30px;
418
- // &[data-dt-se-bd-se="Circle"] {
382
+ // &[data-swatch-shape="Circle"] {
419
383
  // border-radius: 50%;
420
384
  // }
421
- // &[data-dt-se-bd-se="None"] {
385
+ // &[data-swatch-shape="None"] {
422
386
  // height: 0;
423
387
  // width: 0;
424
388
  // }
@@ -499,13 +463,13 @@ $minWidth: 70px;
499
463
 
500
464
  cursor: pointer;
501
465
  overflow: hidden;
502
- &[data-dt-se-sh-se="circle"] {
466
+ &[data-swatch-shape="circle"] {
503
467
  border-radius: 999px;
504
468
  }
505
- &[data-dt-se-sh-se="square"] {
469
+ &[data-swatch-shape="square"] {
506
470
  border-radius: 0px;
507
471
  }
508
- &[data-dt-se-sh-se="rounded"] {
472
+ &[data-swatch-shape="rounded"] {
509
473
  border-radius: var(
510
474
  --_ctm-mob-dn-sh-on-ve-se-dt-se-br-rs,
511
475
  var(
@@ -654,7 +618,7 @@ $minWidth: 70px;
654
618
  }
655
619
 
656
620
  &.disabled {
657
- // cursor: not-allowed;
621
+ cursor: not-allowed;
658
622
  opacity: 0.4;
659
623
  &[data-swatch-type="Swatch Image"] {
660
624
  position: relative;
@@ -687,14 +651,10 @@ $minWidth: 70px;
687
651
  }
688
652
  }
689
653
  }
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
- }
654
+ .product-select-image {
655
+ width: 40px;
656
+ height: 40px;
657
+ object-fit: contain;
698
658
  }
699
659
  }
700
660
  }
@@ -716,46 +676,6 @@ $minWidth: 70px;
716
676
  var(--_ctm-tab-lt-se-st-dy-se-im-pg, var(--_ctm-lt-se-st-dy-se-im-pg))
717
677
  );
718
678
 
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
- }
759
679
  .select__group {
760
680
  display: flex;
761
681
  gap: 8px;
@@ -865,6 +785,176 @@ $minWidth: 70px;
865
785
  minmax(auto, 1fr)
866
786
  );
867
787
  }
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
+ }
868
958
  .select__group__item {
869
959
  transition: color 0.3s ease;
870
960
  padding: 5px 12px;
@@ -906,14 +996,14 @@ $minWidth: 70px;
906
996
  var(--_ctm-tab-dn-se-on-ve-se-dt-se-br-rs, var(--_ctm-dn-se-on-ve-se-dt-se-br-rs))
907
997
  );
908
998
 
909
- &[data-dt-se-bd-se="circle"] {
999
+ &[data-swatch-shape="circle"] {
910
1000
  border-radius: 999px;
911
1001
  }
912
- &[data-dt-se-bd-se="square"],
913
- &[data-dt-se-bd-se="none"] {
1002
+ &[data-swatch-shape="square"],
1003
+ &[data-swatch-shape="none"] {
914
1004
  border-radius: 0;
915
1005
  }
916
- &[data-dt-se-bd-se="rounded"] {
1006
+ &[data-swatch-shape="rounded"] {
917
1007
  border-radius: var(
918
1008
  --_ctm-mob-dn-se-on-ve-se-dt-se-br-rs,
919
1009
  var(--_ctm-tab-dn-se-on-ve-se-dt-se-br-rs, var(--_ctm-dn-se-on-ve-se-dt-se-br-rs))
@@ -1208,7 +1298,7 @@ $minWidth: 70px;
1208
1298
  border-bottom: 2px solid var(--_primary-400);
1209
1299
  }
1210
1300
  &.disabled {
1211
- // cursor: not-allowed;
1301
+ cursor: not-allowed;
1212
1302
  opacity: 0.4;
1213
1303
  position: relative;
1214
1304
  overflow: hidden;
@@ -1258,6 +1348,44 @@ $minWidth: 70px;
1258
1348
  );
1259
1349
  }
1260
1350
  }
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
+ }
1261
1389
  }
1262
1390
  //Dropdown
1263
1391
  .est__dropdown__main {
@@ -1420,7 +1548,7 @@ $minWidth: 70px;
1420
1548
  }
1421
1549
 
1422
1550
  &.disabled {
1423
- // cursor: not-allowed;
1551
+ cursor: not-allowed;
1424
1552
  opacity: 0.4;
1425
1553
  }
1426
1554
  }
@@ -2153,6 +2281,353 @@ $minWidth: 70px;
2153
2281
  }
2154
2282
  }
2155
2283
  }
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
+ }
2156
2631
  }
2157
2632
  }
2158
2633
  }