@sc-360-v2/storefront-cms-library 0.4.38 → 0.4.41

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 (38) hide show
  1. package/dist/add-order.scss +10 -6
  2. package/dist/add-products-tab.scss +33 -25
  3. package/dist/allocations.scss +1 -0
  4. package/dist/builder.js +1 -1
  5. package/dist/bundleDetails.scss +6 -2
  6. package/dist/buy-for-tab.scss +7 -1
  7. package/dist/buyForHeaders.scss +119 -3
  8. package/dist/cart-summary.scss +93 -14
  9. package/dist/colorpicker_v2.scss +52 -0
  10. package/dist/coupon.scss +126 -110
  11. package/dist/dropdownTemplate.scss +21 -12
  12. package/dist/embroider-template-1-v2.scss +37 -2
  13. package/dist/filters.scss +100 -83
  14. package/dist/functions.js +1 -1
  15. package/dist/language-selector.scss +50 -22
  16. package/dist/multi-select-dropdown.scss +9 -0
  17. package/dist/my-templates.scss +190 -42
  18. package/dist/myTemplates.scss +339 -233
  19. package/dist/order-status.scss +158 -64
  20. package/dist/product-image.scss +3 -3
  21. package/dist/productDetails.scss +1 -1
  22. package/dist/repeater-grid-toggle.scss +2 -2
  23. package/dist/search.scss +4 -1
  24. package/dist/static-global.scss +2 -1
  25. package/dist/stockStatus.scss +64 -0
  26. package/dist/types/builder/enums/index.d.ts +1 -0
  27. package/dist/types/builder/tools/element-edit/cartSummary.d.ts +218 -0
  28. package/dist/types/builder/tools/element-edit/index.d.ts +2 -1
  29. package/dist/types/builder/tools/element-edit/language-menu.d.ts +1 -6
  30. package/dist/types/builder/tools/element-edit/orderStatus.d.ts +68 -30
  31. package/dist/types/builder/tools/element-edit/productActions.d.ts +1 -0
  32. package/dist/types/builder/tools/element-edit/stockStatus.d.ts +15 -0
  33. package/dist/types/builder/tools/element-edit/userElements.d.ts +1 -6
  34. package/dist/user-elements.scss +1 -0
  35. package/dist/variant-picker.scss +3 -3
  36. package/dist/website.js +1 -1
  37. package/dist/widget.scss +1 -0
  38. package/package.json +1 -1
package/dist/coupon.scss CHANGED
@@ -70,7 +70,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
70
70
  top: 10px;
71
71
  // margin-bottom: 24px;
72
72
  .coupon_code_header {
73
- font-size: 16px;
73
+ // font-size: 16px;
74
74
  font-family: var(
75
75
  --_ctm-mob-dn-cn-hr-ft-fy,
76
76
  var(--_ctm-tab-dn-cn-hr-ft-fy, var(--_ctm-dn-cn-hr-ft-fy))
@@ -80,10 +80,10 @@ $resizeActive: '[data-cms-element-resizer="true"]';
80
80
  --_ctm-mob-dn-cn-hr-ft-wt,
81
81
  var(--_ctm-tab-dn-cn-hr-ft-wt, var(--_ctm-dn-cn-hr-ft-wt))
82
82
  );
83
- // font-size: var(
84
- // --_ctm-mob-dn-cn-hr-ft-se,
85
- // var(--_ctm-tab-dn-cn-hr-ft-se, var(--_ctm-dn-cn-hr-ft-se))
86
- // );
83
+ font-size: var(
84
+ --_ctm-mob-dn-cn-hr-ft-se,
85
+ var(--_ctm-tab-dn-cn-hr-ft-se, var(--_ctm-dn-cn-hr-ft-se))
86
+ );
87
87
  text-decoration: var(
88
88
  --_ctm-mob-dn-cn-hr-ue,
89
89
  var(--_ctm-tab-dn-cn-hr-ue, var(--_ctm-dn-cn-hr-ue))
@@ -218,41 +218,41 @@ $resizeActive: '[data-cms-element-resizer="true"]';
218
218
  }
219
219
  .cpn_sale_desc {
220
220
  font-family: var(
221
- --_ctm-mob-dn-cn-wt-dn-ft-fy-dc,
222
- var(--_ctm-tab-dn-cn-wt-dn-ft-fy-dc, var(--_ctm-dn-cn-wt-dn-ft-fy-dc))
221
+ --_ctm-mob-dn-cn-wt-dn-ft-fy,
222
+ var(--_ctm-tab-dn-cn-wt-dn-ft-fy, var(--_ctm-dn-cn-wt-dn-ft-fy))
223
223
  );
224
224
  color: var(
225
- --_ctm-mob-dn-cn-wt-dn-cr-dc,
226
- var(--_ctm-tab-dn-cn-wt-dn-cr-dc, var(--_ctm-dn-cn-wt-dn-cr-dc))
225
+ --_ctm-mob-dn-cn-wt-dn-cr,
226
+ var(--_ctm-tab-dn-cn-wt-dn-cr, var(--_ctm-dn-cn-wt-dn-cr))
227
227
  );
228
228
  font-weight: var(
229
- --_ctm-mob-dn-cn-wt-dn-ft-wt-dc,
230
- var(--_ctm-tab-dn-cn-wt-dn-ft-wt-dc, var(--_ctm-dn-cn-wt-dn-ft-wt-dc))
229
+ --_ctm-mob-dn-cn-wt-dn-ft-wt,
230
+ var(--_ctm-tab-dn-cn-wt-dn-ft-wt, var(--_ctm-dn-cn-wt-dn-ft-wt))
231
231
  );
232
232
  // font-size: 14px;
233
233
  font-size: var(
234
- --_ctm-mob-dn-cn-wt-dn-ft-se-dc,
235
- var(--_ctm-tab-dn-cn-wt-dn-ft-se-dc, var(--_ctm-dn-cn-wt-dn-ft-se-dc))
234
+ --_ctm-mob-dn-cn-wt-dn-ft-se,
235
+ var(--_ctm-tab-dn-cn-wt-dn-ft-se, var(--_ctm-dn-cn-wt-dn-ft-se))
236
236
  );
237
237
  text-decoration: var(
238
- --_ctm-mob-dn-cn-wt-dn-ue-dc,
239
- var(--_ctm-tab-dn-cn-wt-dn-ue-dc, var(--_ctm-dn-cn-wt-dn-ue-dc))
238
+ --_ctm-mob-dn-cn-wt-dn-ue,
239
+ var(--_ctm-tab-dn-cn-wt-dn-ue, var(--_ctm-dn-cn-wt-dn-ue))
240
240
  );
241
241
  letter-spacing: var(
242
- --_ctm-mob-dn-cn-wt-dn-lr-sg-dc,
243
- var(--_ctm-tab-dn-cn-wt-dn-lr-sg-dc, var(--_ctm-dn-cn-wt-dn-lr-sg-dc))
242
+ --_ctm-mob-dn-cn-wt-dn-lr-sg,
243
+ var(--_ctm-tab-dn-cn-wt-dn-lr-sg, var(--_ctm-dn-cn-wt-dn-lr-sg))
244
244
  );
245
245
  line-height: var(
246
- --_ctm-mob-dn-cn-wt-dn-le-ht-dc,
247
- var(--_ctm-tab-dn-cn-wt-dn-le-ht-dc, var(--_ctm-dn-cn-wt-dn-le-ht-dc))
246
+ --_ctm-mob-dn-cn-wt-dn-le-ht,
247
+ var(--_ctm-tab-dn-cn-wt-dn-le-ht, var(--_ctm-dn-cn-wt-dn-le-ht))
248
248
  );
249
249
  font-style: var(
250
- --_ctm-mob-dn-cn-wt-dn-ft-se-ic-dc,
251
- var(--_ctm-tab-dn-cn-wt-dn-ft-se-ic-dc, var(--_ctm-dn-cn-wt-dn-ft-se-ic-dc))
250
+ --_ctm-mob-dn-cn-wt-dn-ft-se-ic,
251
+ var(--_ctm-tab-dn-cn-wt-dn-ft-se-ic, var(--_ctm-dn-cn-wt-dn-ft-se-ic))
252
252
  );
253
253
  text-align: var(
254
- --_ctm-mob-dn-cn-wt-dn-tt-an-dc,
255
- var(--_ctm-tab-dn-cn-wt-dn-tt-an-dc, var(--_ctm-dn-cn-wt-dn-tt-an-dc))
254
+ --_ctm-mob-dn-cn-wt-dn-tt-an,
255
+ var(--_ctm-tab-dn-cn-wt-dn-tt-an, var(--_ctm-dn-cn-wt-dn-tt-an))
256
256
  );
257
257
  // font-size: 14px;
258
258
  // font-weight: 400;
@@ -567,6 +567,13 @@ $resizeActive: '[data-cms-element-resizer="true"]';
567
567
  --_ctm-mob-dn-cn-wt-it-fd-sw-cr,
568
568
  var(--_ctm-tab-dn-cn-wt-it-fd-sw-cr, var(--_ctm-dn-cn-wt-it-fd-sw-cr))
569
569
  );
570
+ transition:
571
+ outline border 0.2s ease,
572
+ border 0.2s ease;
573
+ &:focus {
574
+ border: 1px solid var(--_thm-cs-tt-by-tt);
575
+ outline: 2px solid color-mix(in srgb, var(--_thm-cs-tt-by-tt) 10%, transparent);
576
+ }
570
577
  }
571
578
  .btn__with__text[data-btn-name="applyButton"] {
572
579
  width: 100%;
@@ -748,10 +755,11 @@ $resizeActive: '[data-cms-element-resizer="true"]';
748
755
  }
749
756
  .coupon-search-btn {
750
757
  white-space: nowrap;
751
- padding: var(
752
- --_ctm-mob-dn-cn-wt-it-fd-pg,
753
- var(--_ctm-tab-dn-cn-wt-it-fd-pg, var(--_ctm-dn-cn-wt-it-fd-pg))
754
- );
758
+ padding: prepareMediaVariable(--_ctm-dn-as-ay-bn-dt-se-pg);
759
+ &:disabled {
760
+ cursor: not-allowed;
761
+ opacity: 0.5;
762
+ }
755
763
  }
756
764
  }
757
765
  .couponCode_divider {
@@ -822,89 +830,94 @@ $resizeActive: '[data-cms-element-resizer="true"]';
822
830
  var(--_ctm-tab-dn-cn-wt-cn-tt-tt-an, var(--_ctm-dn-cn-wt-cn-tt-tt-an))
823
831
  );
824
832
  }
825
- .coupon-desc {
826
- // font-size: 14px;
827
- // font-weight: 400;
828
- // line-height: 20px;
829
- // color: #667085;
830
- font-family: var(
831
- --_ctm-mob-dn-cn-wt-sd-te-ft-fy,
832
- var(--_ctm-tab-dn-cn-wt-sd-te-ft-fy, var(--_ctm-dn-cn-wt-sd-te-ft-fy))
833
- );
834
- color: var(
835
- --_ctm-mob-dn-cn-wt-sd-te-cr,
836
- var(--_ctm-tab-dn-cn-wt-sd-te-cr, var(--_ctm-dn-cn-wt-sd-te-cr))
837
- );
838
- font-weight: var(
839
- --_ctm-mob-dn-cn-wt-sd-te-ft-wt,
840
- var(--_ctm-tab-dn-cn-wt-sd-te-ft-wt, var(--_ctm-dn-cn-wt-sd-te-ft-wt))
841
- );
842
- font-size: var(
843
- --_ctm-mob-dn-cn-wt-sd-te-ft-se,
844
- var(--_ctm-tab-dn-cn-wt-sd-te-ft-se, var(--_ctm-dn-cn-wt-sd-te-ft-se))
845
- );
846
- text-decoration: var(
847
- --_ctm-mob-dn-cn-wt-sd-te-ue,
848
- var(--_ctm-tab-dn-cn-wt-sd-te-ue, var(--_ctm-dn-cn-wt-sd-te-ue))
849
- );
850
- letter-spacing: var(
851
- --_ctm-mob-dn-cn-wt-sd-te-lr-sg,
852
- var(--_ctm-tab-dn-cn-wt-sd-te-lr-sg, var(--_ctm-dn-cn-wt-sd-te-lr-sg))
853
- );
854
- line-height: var(
855
- --_ctm-mob-dn-cn-wt-sd-te-le-ht,
856
- var(--_ctm-tab-dn-cn-wt-sd-te-le-ht, var(--_ctm-dn-cn-wt-sd-te-le-ht))
857
- );
858
- font-style: var(
859
- --_ctm-mob-dn-cn-wt-sd-te-ft-se-ic,
860
- var(--_ctm-tab-dn-cn-wt-sd-te-ft-se-ic, var(--_ctm-dn-cn-wt-sd-te-ft-se-ic))
861
- );
862
- text-align: var(
863
- --_ctm-mob-dn-cn-wt-sd-te-tt-an,
864
- var(--_ctm-tab-dn-cn-wt-sd-te-tt-an, var(--_ctm-dn-cn-wt-sd-te-tt-an))
865
- );
866
- }
867
- .currency_span {
868
- // font-size: 14px;
869
- // font-weight: 400;
870
- // line-height: 20px;
871
- // color: #667085;
872
- font-family: var(
873
- --_ctm-mob-dn-cn-wt-pe-ft-fy,
874
- var(--_ctm-tab-dn-cn-wt-pe-ft-fy, var(--_ctm-dn-cn-wt-pe-ft-fy))
875
- );
876
- color: var(
877
- --_ctm-mob-dn-cn-wt-pe-cr,
878
- var(--_ctm-tab-dn-cn-wt-pe-cr, var(--_ctm-dn-cn-wt-pe-cr))
879
- );
880
- font-weight: var(
881
- --_ctm-mob-dn-cn-wt-pe-ft-wt,
882
- var(--_ctm-tab-dn-cn-wt-pe-ft-wt, var(--_ctm-dn-cn-wt-pe-ft-wt))
883
- );
884
- font-size: var(
885
- --_ctm-mob-dn-cn-wt-pe-ft-se,
886
- var(--_ctm-tab-dn-cn-wt-pe-ft-se, var(--_ctm-dn-cn-wt-pe-ft-se))
887
- );
888
- text-decoration: var(
889
- --_ctm-mob-dn-cn-wt-pe-ue,
890
- var(--_ctm-tab-dn-cn-wt-pe-ue, var(--_ctm-dn-cn-wt-pe-ue))
891
- );
892
- letter-spacing: var(
893
- --_ctm-mob-dn-cn-wt-pe-lr-sg,
894
- var(--_ctm-tab-dn-cn-wt-pe-lr-sg, var(--_ctm-dn-cn-wt-pe-lr-sg))
895
- );
896
- line-height: var(
897
- --_ctm-mob-dn-cn-wt-pe-le-ht,
898
- var(--_ctm-tab-dn-cn-wt-pe-le-ht, var(--_ctm-dn-cn-wt-pe-le-ht))
899
- );
900
- font-style: var(
901
- --_ctm-mob-dn-cn-wt-pe-ft-se-ic,
902
- var(--_ctm-tab-dn-cn-wt-pe-ft-se-ic, var(--_ctm-dn-cn-wt-pe-ft-se-ic))
903
- );
904
- text-align: var(
905
- --_ctm-mob-dn-cn-wt-pe-tt-an,
906
- var(--_ctm-tab-dn-cn-wt-pe-tt-an, var(--_ctm-dn-cn-wt-pe-tt-an))
907
- );
833
+ .coupon-currency {
834
+ display: flex;
835
+ align-items: center;
836
+ gap: 8px;
837
+ .coupon-desc {
838
+ // font-size: 14px;
839
+ // font-weight: 400;
840
+ // line-height: 20px;
841
+ // color: #667085;
842
+ font-family: var(
843
+ --_ctm-mob-dn-cn-wt-sd-te-ft-fy,
844
+ var(--_ctm-tab-dn-cn-wt-sd-te-ft-fy, var(--_ctm-dn-cn-wt-sd-te-ft-fy))
845
+ );
846
+ color: var(
847
+ --_ctm-mob-dn-cn-wt-sd-te-cr,
848
+ var(--_ctm-tab-dn-cn-wt-sd-te-cr, var(--_ctm-dn-cn-wt-sd-te-cr))
849
+ );
850
+ font-weight: var(
851
+ --_ctm-mob-dn-cn-wt-sd-te-ft-wt,
852
+ var(--_ctm-tab-dn-cn-wt-sd-te-ft-wt, var(--_ctm-dn-cn-wt-sd-te-ft-wt))
853
+ );
854
+ font-size: var(
855
+ --_ctm-mob-dn-cn-wt-sd-te-ft-se,
856
+ var(--_ctm-tab-dn-cn-wt-sd-te-ft-se, var(--_ctm-dn-cn-wt-sd-te-ft-se))
857
+ );
858
+ text-decoration: var(
859
+ --_ctm-mob-dn-cn-wt-sd-te-ue,
860
+ var(--_ctm-tab-dn-cn-wt-sd-te-ue, var(--_ctm-dn-cn-wt-sd-te-ue))
861
+ );
862
+ letter-spacing: var(
863
+ --_ctm-mob-dn-cn-wt-sd-te-lr-sg,
864
+ var(--_ctm-tab-dn-cn-wt-sd-te-lr-sg, var(--_ctm-dn-cn-wt-sd-te-lr-sg))
865
+ );
866
+ line-height: var(
867
+ --_ctm-mob-dn-cn-wt-sd-te-le-ht,
868
+ var(--_ctm-tab-dn-cn-wt-sd-te-le-ht, var(--_ctm-dn-cn-wt-sd-te-le-ht))
869
+ );
870
+ font-style: var(
871
+ --_ctm-mob-dn-cn-wt-sd-te-ft-se-ic,
872
+ var(--_ctm-tab-dn-cn-wt-sd-te-ft-se-ic, var(--_ctm-dn-cn-wt-sd-te-ft-se-ic))
873
+ );
874
+ text-align: var(
875
+ --_ctm-mob-dn-cn-wt-sd-te-tt-an,
876
+ var(--_ctm-tab-dn-cn-wt-sd-te-tt-an, var(--_ctm-dn-cn-wt-sd-te-tt-an))
877
+ );
878
+ }
879
+ .currency_span {
880
+ // font-size: 14px;
881
+ // font-weight: 400;
882
+ // line-height: 20px;
883
+ // color: #667085;
884
+ font-family: var(
885
+ --_ctm-mob-dn-cn-wt-pe-ft-fy,
886
+ var(--_ctm-tab-dn-cn-wt-pe-ft-fy, var(--_ctm-dn-cn-wt-pe-ft-fy))
887
+ );
888
+ color: var(
889
+ --_ctm-mob-dn-cn-wt-pe-cr,
890
+ var(--_ctm-tab-dn-cn-wt-pe-cr, var(--_ctm-dn-cn-wt-pe-cr))
891
+ );
892
+ font-weight: var(
893
+ --_ctm-mob-dn-cn-wt-pe-ft-wt,
894
+ var(--_ctm-tab-dn-cn-wt-pe-ft-wt, var(--_ctm-dn-cn-wt-pe-ft-wt))
895
+ );
896
+ font-size: var(
897
+ --_ctm-mob-dn-cn-wt-pe-ft-se,
898
+ var(--_ctm-tab-dn-cn-wt-pe-ft-se, var(--_ctm-dn-cn-wt-pe-ft-se))
899
+ );
900
+ text-decoration: var(
901
+ --_ctm-mob-dn-cn-wt-pe-ue,
902
+ var(--_ctm-tab-dn-cn-wt-pe-ue, var(--_ctm-dn-cn-wt-pe-ue))
903
+ );
904
+ letter-spacing: var(
905
+ --_ctm-mob-dn-cn-wt-pe-lr-sg,
906
+ var(--_ctm-tab-dn-cn-wt-pe-lr-sg, var(--_ctm-dn-cn-wt-pe-lr-sg))
907
+ );
908
+ line-height: var(
909
+ --_ctm-mob-dn-cn-wt-pe-le-ht,
910
+ var(--_ctm-tab-dn-cn-wt-pe-le-ht, var(--_ctm-dn-cn-wt-pe-le-ht))
911
+ );
912
+ font-style: var(
913
+ --_ctm-mob-dn-cn-wt-pe-ft-se-ic,
914
+ var(--_ctm-tab-dn-cn-wt-pe-ft-se-ic, var(--_ctm-dn-cn-wt-pe-ft-se-ic))
915
+ );
916
+ text-align: var(
917
+ --_ctm-mob-dn-cn-wt-pe-tt-an,
918
+ var(--_ctm-tab-dn-cn-wt-pe-tt-an, var(--_ctm-dn-cn-wt-pe-tt-an))
919
+ );
920
+ }
908
921
  }
909
922
  }
910
923
  .btn__with__text[data-btn-name="removeButton"] {
@@ -1099,6 +1112,9 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1099
1112
  display: none;
1100
1113
  }
1101
1114
  }
1115
+ .remove-btn {
1116
+ padding: prepareMediaVariable(--_ctm-dn-as-re-bn-dt-se-pg);
1117
+ }
1102
1118
  }
1103
1119
  }
1104
1120
  .coupon-footer-section {
@@ -11,13 +11,13 @@
11
11
  display: flex;
12
12
  justify-content: space-between;
13
13
  padding: 0px 12px;
14
- border-radius: 6px;
14
+ border-radius: 4px;
15
15
  width: 100%;
16
16
  align-items: center;
17
17
  height: 40px;
18
18
  line-height: 40px;
19
19
  outline: 2px solid var(--_base-white);
20
- border: 1px solid var(--_gray-300);
20
+ border: 1px solid var(--_thm-cs-be-se-3);
21
21
 
22
22
  .selected-display {
23
23
  .selected-item {
@@ -49,7 +49,7 @@
49
49
  align-items: center;
50
50
  gap: 8px;
51
51
  .selected-item {
52
- border: 1px solid var(--_gray-300);
52
+ border: 1px solid var(--_thm-cs-be-se-3);
53
53
  border-radius: 4px;
54
54
  padding: 2px 4px;
55
55
  font-size: 12px;
@@ -91,7 +91,7 @@
91
91
  user-select: none;
92
92
 
93
93
  input {
94
- background-color: #f5f5f5;
94
+ background-color: var(--_thm-cs-be-se-2);
95
95
  cursor: not-allowed;
96
96
  }
97
97
  }
@@ -106,7 +106,7 @@
106
106
  min-width: 88%;
107
107
  overflow: hidden;
108
108
  .dropdown-chip {
109
- background: #e2e2e2;
109
+ background: var(--_thm-cs-be-se-2);
110
110
  padding: 4px 8px;
111
111
  border-radius: 12px;
112
112
  font-size: 12px;
@@ -142,8 +142,11 @@
142
142
  .readonly-input,
143
143
  .dropdown__clear__icon,
144
144
  .dropdown__icon {
145
+ // transition: transform 0.4s ease-in-out;
145
146
  .icon {
147
+ // transition: transform 0.4s ease-in-out;
146
148
  display: flex;
149
+ // transform: rotate(0deg);
147
150
  &:hover {
148
151
  svg path {
149
152
  stroke: var(--_gray-700);
@@ -153,6 +156,12 @@
153
156
  width: 16px;
154
157
  height: 16px;
155
158
  }
159
+ // &.up {
160
+ // transform: rotate(0deg);
161
+ // }
162
+ // &.down {
163
+ // transform: rotate(180deg);
164
+ // }
156
165
  &.up,
157
166
  &.down {
158
167
  svg {
@@ -200,8 +209,8 @@
200
209
  position: fixed;
201
210
  width: 100%;
202
211
  background: white;
203
- border: 1px solid var(--_gray-200);
204
- border-radius: 6px;
212
+ border: 1px solid var(--_thm-cs-be-se-3);
213
+ border-radius: 4px;
205
214
  max-height: 200px;
206
215
  box-shadow: 0 1px 20px rgba(0, 0, 0, 0.1);
207
216
  z-index: 10;
@@ -222,7 +231,7 @@
222
231
  .dropdown_template_panel_search {
223
232
  background: none;
224
233
  padding: 8px;
225
- border-bottom: 1px solid var(--_gray-100);
234
+ border-bottom: 1px solid var(--_thm-cs-be-se-3);
226
235
  height: max-content !important;
227
236
  position: relative;
228
237
  &:hover {
@@ -233,7 +242,7 @@
233
242
  width: 100%;
234
243
  padding-inline: 10px;
235
244
  border-radius: 4px;
236
- border: 1px solid var(--_gray-200);
245
+ border: 1px solid var(--_thm-cs-be-se-3);
237
246
  height: 40px;
238
247
  &:focus {
239
248
  border: 1px solid var(--_gray-300);
@@ -333,7 +342,7 @@
333
342
  height: 32px;
334
343
  border-radius: 50%;
335
344
  overflow: hidden;
336
- background-color: var(--_gray-200);
345
+ background-color: var(--_thm-cs-be-se-3);
337
346
  display: flex;
338
347
  justify-content: center;
339
348
  align-items: center;
@@ -479,7 +488,7 @@
479
488
  // bottom: 0;
480
489
  width: 100%;
481
490
  background: #fff;
482
- border-top: 1px solid var(--_gray-200);
491
+ border-top: 1px solid var(--_thm-cs-be-se-3);
483
492
  .opts_selection_action {
484
493
  width: 50%;
485
494
  height: 100%;
@@ -497,7 +506,7 @@
497
506
  }
498
507
  }
499
508
  &:not(:last-child) {
500
- border-right: 1px solid var(--_gray-200);
509
+ border-right: 1px solid var(--_thm-cs-be-se-3);
501
510
  }
502
511
  &.discard_selection {
503
512
  &:hover {
@@ -2,6 +2,7 @@
2
2
  @use "sass:list";
3
3
  @use "./functions.scss" as *;
4
4
  @use "./embroider-preview-element.scss" as *;
5
+ @use "./colorpicker_v2.scss" as *;
5
6
 
6
7
  $tmpWrapper: ".emb__tmp__wrapper";
7
8
  $tmpHeaderV2: ".emb__tmp__header__v2";
@@ -323,8 +324,20 @@ $defaultValues: (
323
324
 
324
325
  #{$grpDiv} {
325
326
  display: var(--_d-flex);
326
- flex-direction: column;
327
- row-gap: 6px;
327
+ flex-direction: var(--_sf-fdr-vl, column);
328
+ gap: 6px;
329
+ width: 100%;
330
+
331
+ &:has([class*="clr__pkr"]) {
332
+ --_sf-fdr-vl: row;
333
+ justify-content: space-between;
334
+ align-items: center;
335
+ max-width: min(#{$maxWidth}, 100%);
336
+
337
+ &:has(.config__div__v2) {
338
+ flex-wrap: wrap;
339
+ }
340
+ }
328
341
 
329
342
  & > label {
330
343
  color: prepareMediaVariable(--_ctm-dn-dt-tt-cr, #475467);
@@ -472,6 +485,10 @@ $defaultValues: (
472
485
  display: var(--_d-flex);
473
486
  flex-direction: column;
474
487
  row-gap: 6px;
488
+
489
+ &:is(.clr__pkr__v2 + *) {
490
+ flex: 0 0 100%;
491
+ }
475
492
  & > .err__msg__v2 {
476
493
  color: #d32f2f;
477
494
  font-family: prepareMediaVariable(--_ctm-dn-dt-tt-ft-fy);
@@ -766,6 +783,24 @@ $defaultValues: (
766
783
  }
767
784
  }
768
785
  }
786
+
787
+ // Color Picker Changes
788
+ & > .clr__pkr__v2 {
789
+ display: var(--_d-flex);
790
+ align-items: center;
791
+ padding-block: 12px;
792
+
793
+ & > .color__btn__v2 {
794
+ display: var(--_d-flex);
795
+ --_sf-sz: 16px;
796
+ width: var(--_sf-sz);
797
+ height: var(--_sf-sz);
798
+ background: var(--_sf-clr-pkr-bg, #000);
799
+ border: 1px solid #555;
800
+ border-radius: 50%;
801
+ cursor: pointer;
802
+ }
803
+ }
769
804
  }
770
805
  }
771
806
  }