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

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 (18) hide show
  1. package/dist/allocations.scss +1 -0
  2. package/dist/builder.js +1 -1
  3. package/dist/bundleDetails.scss +6 -2
  4. package/dist/buy-for-tab.scss +7 -1
  5. package/dist/buyForHeaders.scss +119 -3
  6. package/dist/colorpicker_v2.scss +52 -0
  7. package/dist/coupon.scss +126 -110
  8. package/dist/embroider-template-1-v2.scss +37 -2
  9. package/dist/filters.scss +99 -82
  10. package/dist/functions.js +1 -1
  11. package/dist/language-selector.scss +21 -3
  12. package/dist/multi-select-dropdown.scss +9 -0
  13. package/dist/static-global.scss +2 -1
  14. package/dist/types/builder/tools/element-edit/language-menu.d.ts +1 -6
  15. package/dist/types/builder/tools/element-edit/userElements.d.ts +1 -6
  16. package/dist/user-elements.scss +1 -0
  17. package/dist/variant-picker.scss +3 -3
  18. package/package.json +1 -1
package/dist/bundleDetails.scss CHANGED
@@ -795,7 +795,9 @@ $resizeActive: '[data-cms-element-resizer="true"]';
795
795
  border-radius: 2px !important;
796
796
  outline: none;
797
797
  padding: 8px 12px !important;
798
- background-color: #f9fafb;
798
+ &:disabled {
799
+ background-color: #f9fafb;
800
+ }
799
801
  }
800
802
 
801
803
  .add_to_cart_price {
@@ -4269,7 +4271,9 @@ $resizeActive: '[data-cms-element-resizer="true"]';
4269
4271
  border-radius: 2px !important;
4270
4272
  outline: none;
4271
4273
  padding: 8px 12px !important;
4272
- background-color: #f9fafb;
4274
+ &:disabled {
4275
+ background-color: #f9fafb;
4276
+ }
4273
4277
  }
4274
4278
 
4275
4279
  small {
package/dist/buy-for-tab.scss CHANGED
@@ -363,7 +363,7 @@ $tabBodyWrapper: #{$tabBody}__wrapper;
363
363
  );
364
364
  }
365
365
 
366
- &:not(.active) {
366
+ &:not(.active):not(:disabled) {
367
367
  &:hover {
368
368
  --_sf-buy-hr-bg-cr: var(
369
369
  --_ctm-mob-buy-dn-ts-hr-se-bd-cr,
@@ -446,6 +446,12 @@ $tabBodyWrapper: #{$tabBody}__wrapper;
446
446
  flex: 1 0 auto;
447
447
  }
448
448
 
449
+ &:disabled {
450
+ opacity: 0.5;
451
+ color: var(--_thm-cs-be-se-3);
452
+ cursor: default;
453
+ }
454
+
449
455
  & > span {
450
456
  // display: var(--_d-flex);
451
457
  width: 100%;
package/dist/buyForHeaders.scss CHANGED
@@ -532,6 +532,10 @@ $resizeActive: '[data-cms-element-resizer="true"]';
532
532
  background-color: var(--_thm-py-bs-hr-se-bd-cr);
533
533
  color: var(--_thm-py-bs-hr-se-tt-cr);
534
534
  }
535
+ &:disabled {
536
+ cursor: not-allowed;
537
+ opacity: 0.5;
538
+ }
535
539
  }
536
540
  }
537
541
 
@@ -4507,6 +4511,9 @@ $resizeActive: '[data-cms-element-resizer="true"]';
4507
4511
  .summary_container {
4508
4512
  width: 400px;
4509
4513
  height: 100%;
4514
+ display: flex;
4515
+ flex-direction: column;
4516
+ gap: 24px;
4510
4517
  // order summary styles started
4511
4518
  .sklt_summary {
4512
4519
  display: flex;
@@ -4519,6 +4526,114 @@ $resizeActive: '[data-cms-element-resizer="true"]';
4519
4526
  }
4520
4527
  }
4521
4528
 
4529
+ // Coupon Styles
4530
+ .coupon_code {
4531
+ border: 1px solid var(--_gray-300);
4532
+ border-radius: 4px;
4533
+ .coupon_code_header {
4534
+ background-color: var(--_gray-100);
4535
+ padding: 12px 12px 14px 12px;
4536
+ border-bottom: 0.5px solid var(--_gray-300);
4537
+ h3 {
4538
+ font-size: 16px;
4539
+ color: var(--_gray-900);
4540
+ }
4541
+ }
4542
+ .coupon_code_body {
4543
+ display: flex;
4544
+ flex-direction: column;
4545
+ gap: 16px;
4546
+ padding: 16px;
4547
+
4548
+ .coupon_code_apply_section {
4549
+ .coupon_code_fields_wrapper {
4550
+ display: flex;
4551
+ gap: 12px;
4552
+ &.divider {
4553
+ padding-bottom: 16px;
4554
+ border-bottom: 1px dashed var(--_gray-300);
4555
+ }
4556
+ .coupon-search-input {
4557
+ padding: 10px 16px;
4558
+ border: 1px solid var(--_gray-300);
4559
+ border-radius: 4px;
4560
+ height: 40px;
4561
+ &:focus {
4562
+ outline: 2px solid var(--_gray-100);
4563
+ }
4564
+ }
4565
+ .coupon-search-btn {
4566
+ padding: 10px 16px 12px 16px;
4567
+ white-space: nowrap;
4568
+ height: 40px;
4569
+ }
4570
+ }
4571
+ .coupon-list {
4572
+ .coupon-item {
4573
+ .coupon-info {
4574
+ .coupon-title {
4575
+ font-size: 16px;
4576
+ font-weight: 700;
4577
+ color: var(--_gray-900);
4578
+ }
4579
+ .coupon-desc {
4580
+ font-size: 14px;
4581
+ font-weight: 400;
4582
+ color: var(--_gray-600);
4583
+ }
4584
+ .remove-btn {
4585
+ padding: 12px;
4586
+ color: var(--_gray-900);
4587
+ }
4588
+ }
4589
+ }
4590
+ }
4591
+ }
4592
+ .apply_coupon_code_body {
4593
+ display: flex;
4594
+ align-items: center;
4595
+ justify-content: space-between;
4596
+ gap: 12px;
4597
+ &:not(:last-child) {
4598
+ margin-bottom: 12px;
4599
+ }
4600
+ .apply_coupon_code_flex {
4601
+ display: flex;
4602
+ gap: 12px;
4603
+ .cpn__sale__icon {
4604
+ margin-top: 4px;
4605
+ }
4606
+ .apply_coupon_code {
4607
+ display: flex;
4608
+ flex-direction: column;
4609
+ .cpn_sale_text {
4610
+ font-size: 14px;
4611
+ font-weight: 400;
4612
+ color: var(--_gray-900);
4613
+ }
4614
+ }
4615
+ }
4616
+ .cpn_sale_desc {
4617
+ font-size: 14px;
4618
+ font-weight: 400;
4619
+ color: var(--_gray-600);
4620
+ }
4621
+ .apply_coupon_code_btn {
4622
+ padding: 8px 16px;
4623
+ }
4624
+ .remove_coupon_code_btn {
4625
+ padding: 8px 16px;
4626
+ border: 1px solid var(--_gray-300);
4627
+ border-radius: 4px;
4628
+ color: var(--_gray-900);
4629
+ &:hover {
4630
+ background-color: var(--_gray-100);
4631
+ }
4632
+ }
4633
+ }
4634
+ }
4635
+ }
4636
+
4522
4637
  .cart_summary_wrapper {
4523
4638
  display: flex;
4524
4639
  flex-direction: column;
@@ -4530,6 +4645,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
4530
4645
  word-break: keep-all;
4531
4646
  overflow: hidden;
4532
4647
  width: 380px;
4648
+ border: 1px solid var(--_thm-cs-be-se-3);
4533
4649
 
4534
4650
  .cart_summary_heading_wrapper {
4535
4651
  display: flex;
@@ -4538,7 +4654,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
4538
4654
  gap: 12px;
4539
4655
  align-self: stretch;
4540
4656
  background: var(--_base-white);
4541
- border-bottom: 0px solid #d0d5dd;
4657
+ border-bottom: 1px solid var(--_thm-cs-be-se-3);
4542
4658
  border-radius: 4px 4px 0 0;
4543
4659
  .icon svg {
4544
4660
  path {
@@ -4561,12 +4677,12 @@ $resizeActive: '[data-cms-element-resizer="true"]';
4561
4677
  color: #101828;
4562
4678
  font-size: 24px;
4563
4679
  font-weight: 600;
4564
- padding: 0px 16px 16px 16px;
4680
+ padding: 16px;
4565
4681
  }
4566
4682
  }
4567
4683
 
4568
4684
  .cart_summary_content_wrapper {
4569
- padding: 0px 16px 16px 16px;
4685
+ padding: 16px;
4570
4686
  display: flex;
4571
4687
  flex-direction: column;
4572
4688
  width: 100%;
package/dist/colorpicker_v2.scss ADDED
@@ -0,0 +1,52 @@
1
+ .colorpicker__parent__v2 {
2
+ width: max-content;
3
+ max-width: 225px;
4
+ position: absolute;
5
+ left: auto;
6
+ background: #fff;
7
+ border: 1px solid #d0d5dd;
8
+ border-radius: 8px;
9
+ padding: 12px;
10
+ z-index: 99999;
11
+ opacity: 0;
12
+ transform: translateY(-10px) scale(0.95, 0.95);
13
+ transform-origin: center;
14
+ animation: pickerAnim 0.45s ease-in-out 1 forwards;
15
+ // animation: name duration timing-function delay iteration-count direction fill-mode;
16
+
17
+ @keyframes pickerAnim {
18
+ to {
19
+ transform: translateY(0) scale(1, 1);
20
+ opacity: 1;
21
+ }
22
+ }
23
+
24
+ & > div {
25
+ box-shadow: none !important;
26
+
27
+ label {
28
+ color: #475467;
29
+ font-size: 14px;
30
+ font-weight: 400;
31
+ line-height: 1.5;
32
+ }
33
+ }
34
+ }
35
+
36
+ .cutom__hex__v2 {
37
+ padding: 0 12px !important;
38
+ border-radius: 8px !important;
39
+ border: 1px solid #d0d5dd !important;
40
+ background: #fff !important;
41
+ box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05) !important;
42
+ width: 100%;
43
+ font-size: 16px !important;
44
+ line-height: 24px !important;
45
+ padding-block: 8px !important;
46
+ }
47
+
48
+ .custom__div__v2 {
49
+ display: grid;
50
+ grid-template-columns: repeat(4, 1fr);
51
+ gap: 8px;
52
+ }
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 {
package/dist/embroider-template-1-v2.scss CHANGED
@@ -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
  }