@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
@@ -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 {
@@ -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%;
@@ -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%;
@@ -31,7 +31,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
31
31
  align-items: center;
32
32
  align-self: stretch;
33
33
  border-radius: 4px;
34
- border: 0.5px solid #d0d5dd;
34
+ border: 0.5px solid var(--_thm-cs-be-se-3);
35
35
  background: #fff;
36
36
  // gap: var(--_ctm-lt-im-gp);
37
37
  padding: var(--_ctm-lt-pg);
@@ -48,26 +48,25 @@ $resizeActive: '[data-cms-element-resizer="true"]';
48
48
  --_ctm-mob-dn-hr-cr-bd-cr,
49
49
  var(--_ctm-tab-dn-hr-cr-bd-cr, var(--_ctm-dn-hr-cr-bd-cr))
50
50
  );
51
- border-bottom: 0.5px solid #d0d5dd;
52
- // border-color: var(
51
+ // border-bottom: 0.5px solid var(--_thm-cs-be-se-3);
52
+ border-color: prepareMediaVariable(--_ctm-dn-hr-cr-br-cr);
53
+ // var(
53
54
  // --_ctm-mob-dn-hr-cr-br-cr,
54
55
  // var(--_ctm-tab-dn-hr-cr-br-cr, var(--_ctm-dn-hr-cr-br-cr))
55
56
  // );
56
- // border-style: var(
57
+ border-style: prepareMediaVariable(--_ctm-dn-hr-cr-br-se);
58
+ // var(
57
59
  // --_ctm-mob-dn-hr-cr-br-se,
58
60
  // var(--_ctm-tab-dn-hr-cr-br-se, var(--_ctm-dn-hr-cr-br-se))
59
61
  // );
60
- // border-width: var(
62
+ border-width: prepareMediaVariable(--_ctm-dn-hr-cr-br-wh);
63
+ // var(
61
64
  // --_ctm-mob-dn-hr-cr-br-wh,
62
65
  // var(--_ctm-tab-dn-hr-cr-br-wh, var(--_ctm-dn-hr-cr-br-wh))
63
66
  // );
64
- // border-bottom: 1px solid
65
- // var(--_ctm-mob-dn-hr-cr-br-wh, var(--_ctm-tab-dn-hr-cr-br-wh, var(--_ctm-dn-hr-cr-br-wh)));
66
- // border-radius: var(
67
- // --_ctm-mob-dn-hr-cr-br-rs,
68
- // var(--_ctm-tab-dn-hr-cr-br-rs, var(--_ctm-dn-hr-cr-br-rs))
69
- // );
70
- padding: var(--_ctm-mob-dn-hr-cr-pg, var(--_ctm-tab-dn-hr-cr-pg, var(--_ctm-dn-hr-cr-pg)));
67
+ padding: prepareMediaVariable(
68
+ --_ctm-dn-hr-cr-pg
69
+ ); // var(--_ctm-mob-dn-hr-cr-pg, var(--_ctm-tab-dn-hr-cr-pg, var(--_ctm-dn-hr-cr-pg)))
71
70
  box-shadow: var(
72
71
  var(
73
72
  --_ctm-mob-dn-hr-cr-sw-ae,
@@ -167,7 +166,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
167
166
  // padding: calc(var(--_ctm-lt-by-pg) / 2) var(--_ctm-lt-by-pg);
168
167
  // padding: var(--_ctm-lt-by-pg);
169
168
  // gap: var(--_ctm-lt-im-gp);
170
- border-top: 1px solid var(--_gray-300);
169
+ border-top: 1px solid var(--_thm-cs-be-se-3);
171
170
  background-color: var(
172
171
  --_ctm-mob-dn-ct-by-wt-bd-cr,
173
172
  var(--_ctm-tab-dn-ct-by-wt-bd-cr, var(--_ctm-dn-ct-by-wt-bd-cr))
@@ -592,6 +591,86 @@ $resizeActive: '[data-cms-element-resizer="true"]';
592
591
  var(--_ctm-tab-dn-nr-of-is-tt-an-dc, var(--_ctm-dn-nr-of-is-tt-an-dc))
593
592
  );
594
593
  }
594
+ .cart_summary_show_coupon_text {
595
+ // color: var(--_gray-500);
596
+ // font-size: 14px;
597
+ // font-weight: 400;
598
+ font-family: var(
599
+ --_ctm-mob-dn-sw-cn-ce-ft-fy,
600
+ var(--_ctm-tab-dn-sw-cn-ce-ft-fy, var(--_ctm-dn-sw-cn-ce-ft-fy))
601
+ );
602
+ color: var(
603
+ --_ctm-mob-dn-sw-cn-ce-cr,
604
+ var(--_ctm-tab-dn-sw-cn-ce-cr, var(--_ctm-dn-sw-cn-ce-cr))
605
+ );
606
+ font-weight: var(
607
+ --_ctm-mob-dn-sw-cn-ce-ft-wt,
608
+ var(--_ctm-tab-dn-sw-cn-ce-ft-wt, var(--_ctm-dn-sw-cn-ce-ft-wt))
609
+ );
610
+ font-size: var(
611
+ --_ctm-mob-dn-sw-cn-ce-ft-se,
612
+ var(--_ctm-tab-dn-sw-cn-ce-ft-se, var(--_ctm-dn-sw-cn-ce-ft-se))
613
+ );
614
+ // font-size: 14px;
615
+ text-decoration: var(
616
+ --_ctm-mob-dn-sw-cn-ce-ue,
617
+ var(--_ctm-tab-dn-sw-cn-ce-ue, var(--_ctm-dn-sw-cn-ce-ue))
618
+ );
619
+ letter-spacing: var(
620
+ --_ctm-mob-dn-sw-cn-ce-lr-sg,
621
+ var(--_ctm-tab-dn-sw-cn-ce-lr-sg, var(--_ctm-dn-sw-cn-ce-lr-sg))
622
+ );
623
+ line-height: var(
624
+ --_ctm-mob-dn-sw-cn-ce-le-ht,
625
+ var(--_ctm-tab-dn-sw-cn-ce-le-ht, var(--_ctm-dn-sw-cn-ce-le-ht))
626
+ );
627
+ font-style: var(
628
+ --_ctm-mob-dn-sw-cn-ce-ft-se-ic,
629
+ var(--_ctm-tab-dn-sw-cn-ce-ft-se-ic, var(--_ctm-dn-sw-cn-ce-ft-se-ic))
630
+ );
631
+ text-align: var(
632
+ --_ctm-mob-dn-sw-cn-ce-tt-an,
633
+ var(--_ctm-tab-dn-sw-cn-ce-tt-an, var(--_ctm-dn-sw-cn-ce-tt-an))
634
+ );
635
+ }
636
+ .cart_summary_show_coupon_value {
637
+ font-family: var(
638
+ --_ctm-mob-dn-sw-cn-ce-ft-fy-dc,
639
+ var(--_ctm-tab-dn-sw-cn-ce-ft-fy-dc, var(--_ctm-dn-sw-cn-ce-ft-fy-dc))
640
+ );
641
+ color: var(
642
+ --_ctm-mob-dn-sw-cn-ce-cr-dc,
643
+ var(--_ctm-tab-dn-sw-cn-ce-cr-dc, var(--_ctm-dn-sw-cn-ce-cr-dc))
644
+ );
645
+ font-weight: var(
646
+ --_ctm-mob-dn-sw-cn-ce-ft-wt-dc,
647
+ var(--_ctm-tab-dn-sw-cn-ce-ft-wt-dc, var(--_ctm-dn-sw-cn-ce-ft-wt-dc))
648
+ );
649
+ font-size: var(
650
+ --_ctm-mob-dn-sw-cn-ce-ft-se-dc,
651
+ var(--_ctm-tab-dn-sw-cn-ce-ft-se-dc, var(--_ctm-dn-sw-cn-ce-ft-se-dc))
652
+ );
653
+ text-decoration: var(
654
+ --_ctm-mob-dn-sw-cn-ce-ue-dc,
655
+ var(--_ctm-tab-dn-sw-cn-ce-ue-dc, var(--_ctm-dn-sw-cn-ce-ue-dc))
656
+ );
657
+ letter-spacing: var(
658
+ --_ctm-mob-dn-sw-cn-ce-lr-sg-dc,
659
+ var(--_ctm-tab-dn-sw-cn-ce-lr-sg-dc, var(--_ctm-dn-sw-cn-ce-lr-sg-dc))
660
+ );
661
+ line-height: var(
662
+ --_ctm-mob-dn-sw-cn-ce-le-ht-dc,
663
+ var(--_ctm-tab-dn-sw-cn-ce-le-ht-dc, var(--_ctm-dn-sw-cn-ce-le-ht-dc))
664
+ );
665
+ font-style: var(
666
+ --_ctm-mob-dn-sw-cn-ce-ft-se-ic-dc,
667
+ var(--_ctm-tab-dn-sw-cn-ce-ft-se-ic-dc, var(--_ctm-dn-sw-cn-ce-ft-se-ic-dc))
668
+ );
669
+ text-align: var(
670
+ --_ctm-mob-dn-sw-cn-ce-tt-an-dc,
671
+ var(--_ctm-tab-dn-sw-cn-ce-tt-an-dc, var(--_ctm-dn-sw-cn-ce-tt-an-dc))
672
+ );
673
+ }
595
674
  }
596
675
  .cart_summary_content_details_wrapper {
597
676
  display: flex;
@@ -2645,5 +2724,5 @@ $resizeActive: '[data-cms-element-resizer="true"]';
2645
2724
  }
2646
2725
 
2647
2726
  .border_dashed {
2648
- border: 1px dashed var(--_gray-300);
2727
+ border: 1px dashed var(--_thm-cs-be-se-3);
2649
2728
  }
@@ -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
+ }