@sc-360-v2/storefront-cms-library 0.1.93 → 0.1.95

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 (41) hide show
  1. package/README.md +12 -12
  2. package/dist/amount-estimator.scss +438 -4
  3. package/dist/builder.js +1 -1
  4. package/dist/bulk-variant-picker.scss +725 -19
  5. package/dist/gallery-slider-temp.scss +455 -340
  6. package/dist/globals.scss +94 -94
  7. package/dist/menu.scss +89 -0
  8. package/dist/payment-methods.scss +170 -11
  9. package/dist/pickup-locations.scss +437 -11
  10. package/dist/product-actions.scss +881 -77
  11. package/dist/product-highlights.scss +108 -4
  12. package/dist/product-image.scss +466 -338
  13. package/dist/product-inventory.scss +550 -14
  14. package/dist/product-options.scss +156 -0
  15. package/dist/product-price.scss +686 -284
  16. package/dist/product-promotions.scss +1112 -17
  17. package/dist/product.scss +18 -172
  18. package/dist/quantity-selector.scss +52 -4
  19. package/dist/repeater-item.scss +21 -0
  20. package/dist/repeater.scss +106 -0
  21. package/dist/shipping-estimator.scss +7 -5
  22. package/dist/stack.scss +7 -2
  23. package/dist/store-locations.scss +436 -14
  24. package/dist/tooltip.scss +276 -0
  25. package/dist/types/builder/enums/index.d.ts +9 -2
  26. package/dist/types/builder/tools/element-edit/amountEstimator.d.ts +2 -1
  27. package/dist/types/builder/tools/element-edit/index.d.ts +3 -1
  28. package/dist/types/builder/tools/element-edit/productActions.d.ts +1 -0
  29. package/dist/types/builder/tools/element-edit/productDetails.d.ts +6 -31
  30. package/dist/types/builder/tools/element-edit/productDetailsOLd.d.ts +42 -0
  31. package/dist/types/builder/tools/element-edit/productOptions.d.ts +59 -0
  32. package/dist/types/builder/tools/element-edit/repeater.d.ts +2 -1
  33. package/dist/uom-selector.scss +495 -4
  34. package/dist/variant-picker.scss +767 -19
  35. package/dist/volume-pricing.scss +468 -19
  36. package/dist/widget.scss +24 -3
  37. package/package.json +1 -1
  38. package/dist/App.scss +0 -31
  39. package/dist/mixin.scss +0 -9
  40. package/dist/modal.module.scss +0 -121
  41. package/dist/range-slider.module.scss +0 -85
@@ -12,10 +12,10 @@
12
12
  margin: var(--_ctm-lt-mn, --_tst-lt-mn);
13
13
  // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
14
14
  // height: ;
15
- aspect-ratio: 1 / var(--_sf-aspect-ratio);
16
- --_aspect-ratio: calc(
17
- 1 * (var(--_ctm-lt-ht, var(--_tst-lt-ht)) / var(--_ctm-lt-wh, var(--_tst-lt-wh)))
18
- );
15
+ // aspect-ratio: 1 / var(--_sf-aspect-ratio);
16
+ // --_aspect-ratio: calc(
17
+ // 1 * (var(--_ctm-lt-ht, var(--_tst-lt-ht)) / var(--_ctm-lt-wh, var(--_tst-lt-wh)))
18
+ // );
19
19
 
20
20
  & > .wrapper {
21
21
  width: 100%;
@@ -24,5 +24,109 @@
24
24
  &[data-show-shadow="false"] {
25
25
  --_show-shadow: none;
26
26
  }
27
+ &[data-overflow-items="Scroll"] {
28
+ .horizontal {
29
+ width: 100%;
30
+ overflow-x: auto;
31
+ .item {
32
+ width: 100%;
33
+ flex-shrink: 0;
34
+ }
35
+ }
36
+ .vertical {
37
+ overflow-y: auto;
38
+ max-height: 30%;
39
+ }
40
+ }
41
+ .highlights__container {
42
+ padding: var(--_ctm-lt-pg);
43
+ .stacK {
44
+ display: flex;
45
+ flex-direction: column;
46
+ .static {
47
+ font-size: 14px;
48
+ color: var(--_gray-700);
49
+ }
50
+ .horizontal {
51
+ display: flex;
52
+ flex-direction: row;
53
+ gap: var(--_ctm-lt-im-sg);
54
+ .item {
55
+ padding: var(--_ctm-lt-im-pg);
56
+ min-width: 100px;
57
+ min-height: 100px;
58
+ border: 1px solid #000;
59
+ img {
60
+ width: 100%;
61
+ height: 100%;
62
+ object-fit: cover;
63
+ }
64
+ }
65
+ &[data-overflow-items="Wrap"] {
66
+ flex-wrap: wrap;
67
+ height: 100px;
68
+ .item {
69
+ img {
70
+ object-fit: contain;
71
+ }
72
+ }
73
+ }
74
+ &[data-overflow-items="Scroll"] {
75
+ width: 100%;
76
+ overflow-x: auto;
77
+ .item {
78
+ width: 100%;
79
+ }
80
+ }
81
+ }
82
+ .vertical {
83
+ display: flex;
84
+ flex-direction: column;
85
+ gap: var(--_ctm-lt-im-sg);
86
+ height: 200px;
87
+ .item {
88
+ padding: var(--_ctm-lt-im-pg);
89
+ min-width: 100px;
90
+ min-height: 100px;
91
+ border: 1px solid #000;
92
+ img {
93
+ width: 100%;
94
+ height: 100%;
95
+ object-fit: contain;
96
+ }
97
+ }
98
+ &[data-overflow-items="Scroll"] {
99
+ overflow-y: auto;
100
+ }
101
+ }
102
+ .grid {
103
+ display: grid;
104
+ grid-template-columns: repeat(var(--_ctm-lt-is-pr-rw), minmax(100px, 1fr));
105
+ gap: var(--_ctm-lt-im-sg);
106
+ &[data-overflow-items="Scroll"] {
107
+ height: 200px;
108
+ overflow-y: auto;
109
+ }
110
+ .item {
111
+ height: 100px;
112
+ width: 100%;
113
+ border: 1px solid #000;
114
+ display: flex;
115
+ justify-content: center;
116
+ align-items: center;
117
+ padding: var(--_ctm-lt-im-pg);
118
+ border-right: 1px solid #666;
119
+ &:nth-child(6n) {
120
+ border-right: none; /* Remove the border for the last column */
121
+ }
122
+ img {
123
+ max-width: 100%;
124
+ max-height: 100%;
125
+ object-fit: contain;
126
+ }
127
+ }
128
+ }
129
+ }
130
+ }
27
131
  }
28
132
  }