@sc-360-v2/storefront-cms-library 0.3.4 → 0.3.6

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/builder.js +1 -1
  2. package/dist/builder.js.LICENSE.txt +1 -1
  3. package/dist/button copy.scss +2 -1
  4. package/dist/checkout.scss +141 -16
  5. package/dist/filter-results.scss +324 -0
  6. package/dist/filters.scss +1324 -31
  7. package/dist/functions.js +1 -1
  8. package/dist/icon-list.scss +11 -11
  9. package/dist/index.js +1 -1
  10. package/dist/layouter-pro-item.scss +6 -0
  11. package/dist/layouter-pro.scss +30 -2
  12. package/dist/menu-v2.scss +5 -2
  13. package/dist/past-orders.scss +770 -26
  14. package/dist/product-actions.scss +254 -393
  15. package/dist/product-basic-elements.scss +12 -12
  16. package/dist/product-options.scss +72 -46
  17. package/dist/quotes.scss +1 -0
  18. package/dist/repeater.scss +5 -2
  19. package/dist/text-temp-v2.scss +2 -2
  20. package/dist/types/builder/elements/filter-results/index.d.ts +27 -0
  21. package/dist/types/builder/elements/product-sizechart/index.d.ts +26 -0
  22. package/dist/types/builder/elements/user-elements/index.d.ts +30 -0
  23. package/dist/types/builder/enums/index.d.ts +5 -1
  24. package/dist/types/builder/index.d.ts +4 -1
  25. package/dist/types/builder/tools/element-edit/filterResults.d.ts +140 -0
  26. package/dist/types/builder/tools/element-edit/filters.d.ts +15 -8
  27. package/dist/types/builder/tools/element-edit/index.d.ts +4 -1
  28. package/dist/types/builder/tools/element-edit/layouter-pro-item.d.ts +14 -1
  29. package/dist/types/builder/tools/element-edit/layouterPro.d.ts +9 -2
  30. package/dist/types/builder/tools/element-edit/pastOrders.d.ts +61 -1
  31. package/dist/types/builder/tools/element-edit/productActions.d.ts +6 -1
  32. package/dist/types/builder/tools/element-edit/productSizeChart.d.ts +24 -0
  33. package/dist/types/builder/tools/element-edit/userElements.d.ts +555 -0
  34. package/dist/types/global/types.d.ts +2 -1
  35. package/dist/user-elements.scss +1375 -0
  36. package/dist/variant-picker.scss +127 -84
  37. package/dist/widget.scss +2 -0
  38. package/package.json +1 -1
package/dist/variant-picker.scss CHANGED
@@ -31,10 +31,8 @@ $minWidth: 70px;
31
31
  .option__title {
32
32
  margin-bottom: 4px;
33
33
  color: var(--_ctm-mob-dn-on-te-cr, var(--_ctm-tab-dn-on-te-cr, var(--_ctm-dn-on-te-cr)));
34
- font-family: var(
35
- --_ctm-mob-dn-on-te-ft-fy,
36
- var(--_ctm-tab-dn-on-te-ft-fy, var(--_ctm-dn-on-te-ft-fy))
37
- ),
34
+ font-family:
35
+ var(--_ctm-mob-dn-on-te-ft-fy, var(--_ctm-tab-dn-on-te-ft-fy, var(--_ctm-dn-on-te-ft-fy))),
38
36
  sans-serif;
39
37
  font-size: var(
40
38
  --_ctm-mob-dn-on-te-ft-se,
@@ -118,7 +116,8 @@ $minWidth: 70px;
118
116
  --_ctm-mob-dn-sw-me-is-bn-bd-cr,
119
117
  var(--_ctm-tab-dn-sw-me-is-bn-bd-cr, var(--_ctm-dn-sw-me-is-bn-bd-cr))
120
118
  );
121
- font-family: var(
119
+ font-family:
120
+ var(
122
121
  --_ctm-mob-dn-sw-me-is-bn-ft-fy,
123
122
  var(--_ctm-tab-dn-sw-me-is-bn-ft-fy, var(--_ctm-dn-sw-me-is-bn-ft-fy))
124
123
  ),
@@ -513,39 +512,58 @@ $minWidth: 70px;
513
512
  }
514
513
  }
515
514
 
515
+ // &.disabled {
516
+ // cursor: not-allowed;
517
+ // opacity: 0.4;
518
+ // &[data-swatch-type="Swatch Image"] {
519
+ // position: relative;
520
+ // overflow: hidden;
521
+ // &::after {
522
+ // content: "";
523
+ // width: 172%;
524
+ // height: 1px;
525
+ // position: absolute;
526
+ // background: #f00;
527
+ // left: -14px;
528
+ // transform: rotate(48deg);
529
+ // /* -webkit-transform: rotate(48deg); */
530
+ // -moz-transform: rotate(48deg);
531
+ // top: 14px;
532
+ // box-shadow: 2px 0 5px rgba(255, 255, 255, 1);
533
+ // }
534
+ // &::before {
535
+ // content: "";
536
+ // width: 164%;
537
+ // height: 1px;
538
+ // position: absolute;
539
+ // background: #f00;
540
+ // left: -14px;
541
+ // transform: rotate(-48deg);
542
+ // -webkit-transform: rotate(-48deg);
543
+ // -moz-transform: rotate(-48deg);
544
+ // top: 14px;
545
+ // box-shadow: 2px 0 5px rgba(255, 255, 255, 1);
546
+ // }
547
+ // }
548
+ // }
549
+
550
+ position: relative;
551
+
516
552
  &.disabled {
553
+ color: #aaa;
554
+ background-color: #f9f9f9;
555
+ border-color: #ddd;
517
556
  cursor: not-allowed;
518
- opacity: 0.4;
519
- &[data-swatch-type="Swatch Image"] {
520
- position: relative;
521
- overflow: hidden;
522
- &::after {
523
- content: "";
524
- width: 172%;
525
- height: 1px;
526
- position: absolute;
527
- background: #f00;
528
- left: -14px;
529
- transform: rotate(48deg);
530
- /* -webkit-transform: rotate(48deg); */
531
- -moz-transform: rotate(48deg);
532
- top: 14px;
533
- box-shadow: 2px 0 5px rgba(255, 255, 255, 1);
534
- }
535
- &::before {
536
- content: "";
537
- width: 164%;
538
- height: 1px;
539
- position: absolute;
540
- background: #f00;
541
- left: -14px;
542
- transform: rotate(-48deg);
543
- -webkit-transform: rotate(-48deg);
544
- -moz-transform: rotate(-48deg);
545
- top: 14px;
546
- box-shadow: 2px 0 5px rgba(255, 255, 255, 1);
547
- }
548
- }
557
+ opacity: 0.3;
558
+ overflow: hidden;
559
+ }
560
+
561
+ .cross-line {
562
+ position: absolute;
563
+ inset: 0;
564
+ background-color: #cccccc;
565
+ clip-path: polygon(100% 0, 100% 1px, 0 100%, 0 96%);
566
+ pointer-events: none;
549
567
  }
550
568
  .product-select-image {
551
569
  width: 100%;
@@ -600,7 +618,8 @@ $minWidth: 70px;
600
618
  --_ctm-mob-dn-sw-me-is-bn-bd-cr,
601
619
  var(--_ctm-tab-dn-sw-me-is-bn-bd-cr, var(--_ctm-dn-sw-me-is-bn-bd-cr))
602
620
  );
603
- font-family: var(
621
+ font-family:
622
+ var(
604
623
  --_ctm-mob-dn-sw-me-is-bn-ft-fy,
605
624
  var(--_ctm-tab-dn-sw-me-is-bn-ft-fy, var(--_ctm-dn-sw-me-is-bn-ft-fy))
606
625
  ),
@@ -730,10 +749,8 @@ $minWidth: 70px;
730
749
  // font is pending
731
750
 
732
751
  color: var(--_sf-hr-cr, prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-cr));
733
- font-family: var(
734
- --_sf-hr-ft-fy,
735
- prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-ft-fy)
736
- ),
752
+ font-family:
753
+ var(--_sf-hr-ft-fy, prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-ft-fy)),
737
754
  sans-serif;
738
755
  font-size: var(
739
756
  --_sf-hr-ft-se,
@@ -771,7 +788,7 @@ $minWidth: 70px;
771
788
  border-radius: 5px;
772
789
  }
773
790
  &[data-background-shape="capsule"] {
774
- border-radius: 30px; /* Full pill shape */
791
+ border-radius: 40px; /* Full pill shape */
775
792
  box-sizing: border-box;
776
793
  }
777
794
 
@@ -975,10 +992,8 @@ $minWidth: 70px;
975
992
  // font is pending
976
993
 
977
994
  color: var(--_sf-sd-cr, prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-cr));
978
- font-family: var(
979
- --_sf-sd-ft-fy,
980
- prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-ft-fy)
981
- ),
995
+ font-family:
996
+ var(--_sf-sd-ft-fy, prepareMediaVariable(--_ctm-dn-se-on-ve-se-dt-se-ft-fy)),
982
997
  sans-serif;
983
998
  font-size: var(
984
999
  --_sf-sd-ft-se,
@@ -1014,37 +1029,54 @@ $minWidth: 70px;
1014
1029
  border: 0px;
1015
1030
  border-bottom: 2px solid var(--_primary-400);
1016
1031
  }
1032
+ // &.disabled {
1033
+ // cursor: not-allowed;
1034
+ // opacity: 0.4;
1035
+ // position: relative;
1036
+ // overflow: hidden;
1037
+ // &::after {
1038
+ // content: "";
1039
+ // width: 172%;
1040
+ // height: 1px;
1041
+ // position: absolute;
1042
+ // background: #f00;
1043
+ // left: -14px;
1044
+ // transform: rotate(48deg);
1045
+ // /* -webkit-transform: rotate(48deg); */
1046
+ // -moz-transform: rotate(48deg);
1047
+ // top: 14px;
1048
+ // box-shadow: 2px 0 5px rgba(255, 255, 255, 1);
1049
+ // }
1050
+ // &::before {
1051
+ // content: "";
1052
+ // width: 164%;
1053
+ // height: 1px;
1054
+ // position: absolute;
1055
+ // background: #f00;
1056
+ // left: -14px;
1057
+ // transform: rotate(-48deg);
1058
+ // -webkit-transform: rotate(-48deg);
1059
+ // -moz-transform: rotate(-48deg);
1060
+ // top: 14px;
1061
+ // box-shadow: 2px 0 5px rgba(255, 255, 255, 1);
1062
+ // }
1063
+ // }
1064
+ position: relative;
1065
+
1017
1066
  &.disabled {
1067
+ color: #aaa;
1068
+ background-color: #f9f9f9;
1069
+ border-color: #ddd;
1018
1070
  cursor: not-allowed;
1019
- opacity: 0.4;
1020
- position: relative;
1021
1071
  overflow: hidden;
1022
- &::after {
1023
- content: "";
1024
- width: 172%;
1025
- height: 1px;
1026
- position: absolute;
1027
- background: #f00;
1028
- left: -14px;
1029
- transform: rotate(48deg);
1030
- /* -webkit-transform: rotate(48deg); */
1031
- -moz-transform: rotate(48deg);
1032
- top: 14px;
1033
- box-shadow: 2px 0 5px rgba(255, 255, 255, 1);
1034
- }
1035
- &::before {
1036
- content: "";
1037
- width: 164%;
1038
- height: 1px;
1039
- position: absolute;
1040
- background: #f00;
1041
- left: -14px;
1042
- transform: rotate(-48deg);
1043
- -webkit-transform: rotate(-48deg);
1044
- -moz-transform: rotate(-48deg);
1045
- top: 14px;
1046
- box-shadow: 2px 0 5px rgba(255, 255, 255, 1);
1047
- }
1072
+ }
1073
+
1074
+ .cross-line {
1075
+ position: absolute;
1076
+ inset: 0;
1077
+ background-color: #cccccc;
1078
+ clip-path: polygon(100% 0, 100% 1px, 0 100%, 0 96%);
1079
+ pointer-events: none;
1048
1080
  }
1049
1081
  }
1050
1082
  }
@@ -1058,7 +1090,9 @@ $minWidth: 70px;
1058
1090
  width: 100%;
1059
1091
  display: flex;
1060
1092
  top: calc(
1061
- calc(var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg))) + 10px) /
1093
+ calc(
1094
+ var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg))) + 10px
1095
+ ) /
1062
1096
  2
1063
1097
  );
1064
1098
  }
@@ -1067,7 +1101,8 @@ $minWidth: 70px;
1067
1101
  .title {
1068
1102
  margin-bottom: 4px;
1069
1103
  color: var(--_ctm-mob-dn-on-te-cr, var(--_ctm-tab-dn-on-te-cr, var(--_ctm-dn-on-te-cr)));
1070
- font-family: var(
1104
+ font-family:
1105
+ var(
1071
1106
  --_ctm-mob-dn-on-te-ft-fy,
1072
1107
  var(--_ctm-tab-dn-on-te-ft-fy, var(--_ctm-dn-on-te-ft-fy))
1073
1108
  ),
@@ -1301,7 +1336,8 @@ $minWidth: 70px;
1301
1336
  top: calc(
1302
1337
  calc(
1303
1338
  var(--_ctm-mob-lt-im-sg, var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg))) + 10px
1304
- ) / 2
1339
+ ) /
1340
+ 2
1305
1341
  );
1306
1342
  }
1307
1343
  }
@@ -1325,7 +1361,8 @@ $minWidth: 70px;
1325
1361
  --_ctm-tab-lt-dn-dy-se-dn-lt-im-sg,
1326
1362
  var(--_ctm-lt-dn-dy-se-dn-lt-im-sg)
1327
1363
  )
1328
- ) / 2
1364
+ ) /
1365
+ 2
1329
1366
  );
1330
1367
  }
1331
1368
  }
@@ -1633,7 +1670,8 @@ $minWidth: 70px;
1633
1670
  var(
1634
1671
  --_ctm-mob-lt-gd-os-dy-se-an-sg,
1635
1672
  var(--_ctm-tab-lt-gd-os-dy-se-an-sg, var(--_ctm-lt-gd-os-dy-se-an-sg))
1636
- ) / 2
1673
+ ) /
1674
+ 2
1637
1675
  );
1638
1676
  }
1639
1677
  }
@@ -2033,7 +2071,8 @@ $minWidth: 70px;
2033
2071
  var(
2034
2072
  --_ctm-mob-dn-pn-as-aw-se,
2035
2073
  var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
2036
- ) + 8px
2074
+ ) +
2075
+ 8px
2037
2076
  )
2038
2077
  );
2039
2078
  }
@@ -2043,7 +2082,8 @@ $minWidth: 70px;
2043
2082
  var(
2044
2083
  --_ctm-mob-dn-pn-le-le-ht,
2045
2084
  var(--_ctm-tab-dn-pn-le-le-ht, var(--_ctm-dn-pn-le-le-ht))
2046
- ) + 20px
2085
+ ) +
2086
+ 20px
2047
2087
  )
2048
2088
  );
2049
2089
  }
@@ -2053,7 +2093,8 @@ $minWidth: 70px;
2053
2093
  var(
2054
2094
  --_ctm-mob-dn-pn-ds-dt-se,
2055
2095
  var(--_ctm-tab-dn-pn-ds-dt-se, var(--_ctm-dn-pn-ds-dt-se))
2056
- ) + 20px
2096
+ ) +
2097
+ 20px
2057
2098
  )
2058
2099
  );
2059
2100
  }
@@ -2165,13 +2206,15 @@ $minWidth: 70px;
2165
2206
  var(
2166
2207
  --_ctm-mob-dn-pn-as-aw-se,
2167
2208
  var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
2168
- ) * 0.5
2209
+ ) *
2210
+ 0.5
2169
2211
  );
2170
2212
  height: calc(
2171
2213
  var(
2172
2214
  --_ctm-mob-dn-pn-as-aw-se,
2173
2215
  var(--_ctm-tab-dn-pn-as-aw-se, var(--_ctm-dn-pn-as-aw-se))
2174
- ) * 0.5
2216
+ ) *
2217
+ 0.5
2175
2218
  );
2176
2219
  path {
2177
2220
  stroke: var(
package/dist/widget.scss CHANGED
@@ -106,3 +106,5 @@
106
106
  @use "./dropdownTemplate.scss";
107
107
  @use "./layouter-pro.scss";
108
108
  @use "./layouter-pro-item.scss";
109
+ @use "./user-elements.scss";
110
+ @use "./filter-results.scss";
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sc-360-v2/storefront-cms-library",
3
- "version": "0.3.4",
3
+ "version": "0.3.6",
4
4
  "main": "/dist/index.js",
5
5
  "types": "./dist/index.d.ts",
6
6
  "exports": {