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

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 (36) hide show
  1. package/README.md +12 -12
  2. package/dist/amount-estimator.scss +6 -0
  3. package/dist/builder.js +1 -1
  4. package/dist/bulk-variant-picker.scss +47 -143
  5. package/dist/container.scss +9 -0
  6. package/dist/editor-core.scss +97 -8
  7. package/dist/functions.js +1 -1
  8. package/dist/gallery-slider-temp.scss +8 -8
  9. package/dist/globals.scss +94 -94
  10. package/dist/grid.scss +20 -2
  11. package/dist/image-temp.scss +1 -1
  12. package/dist/payment-methods.scss +6 -1
  13. package/dist/pickup-locations.scss +6 -0
  14. package/dist/product-actions.scss +26 -2
  15. package/dist/product-basic-elements.scss +37 -6
  16. package/dist/product-highlights.scss +6 -0
  17. package/dist/product-image.scss +6 -1
  18. package/dist/product-inventory.scss +12 -3
  19. package/dist/product-price.scss +28 -24
  20. package/dist/product-promotions.scss +6 -0
  21. package/dist/product.scss +17 -3
  22. package/dist/productDetails.scss +28 -0
  23. package/dist/quantity-selector.scss +6 -0
  24. package/dist/repeater-item.scss +1 -0
  25. package/dist/repeater.scss +14 -7
  26. package/dist/section.scss +16 -0
  27. package/dist/shipping-estimator.scss +6 -0
  28. package/dist/stack.scss +1 -0
  29. package/dist/store-locations.scss +6 -0
  30. package/dist/types/helper/helper-functions.d.ts +1 -0
  31. package/dist/uom-selector.scss +6 -0
  32. package/dist/variable.scss +9 -1
  33. package/dist/variant-picker.scss +48 -143
  34. package/dist/volume-pricing.scss +6 -1
  35. package/dist/widget.scss +1 -0
  36. package/package.json +1 -1
package/dist/product-price.scss CHANGED
@@ -8,7 +8,9 @@
8
8
  // margin: var(--_lt-mn);
9
9
  // padding: var(--_lt-pg);
10
10
  // width: var(--_ctm-lt-wh, var(--_tst-lt-wh));
11
- width: var(--_sf-nw-wh, var(--_tst-lt-wh));
11
+ // width: var(--_sf-nw-wh, var(--_tst-lt-wh));
12
+ // width: var(--_ctm-ele-nw-wh-vl);
13
+ width: var(--_sf-el-wh-st-mx, calc(1% * var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh))));
12
14
  margin: var(--_ctm-lt-mn, --_tst-lt-mn);
13
15
  // height: var(--_ctm-lt-ht, var(--_tst-lt-ht));
14
16
  // height: ;
@@ -24,7 +26,12 @@
24
26
  &[data-show-shadow="false"] {
25
27
  --_show-shadow: none;
26
28
  }
27
-
29
+ .text-element {
30
+ background: #6d96e4;
31
+ padding: 10px;
32
+ font-weight: 600;
33
+ color: rgba(75, 69, 70, 1);
34
+ }
28
35
  .price-text-element {
29
36
  // background-color: var(--_ctm-dn-bd-cr, var(--_tst-dn-bd-cr));
30
37
  padding: var(--_ctm-lt-pg, var(--_tst-lt-pg));
@@ -70,12 +77,9 @@
70
77
  gap: 5px;
71
78
  .element-container {
72
79
  display: flex;
73
- align-items: center;
80
+ align-items: flex-start;
74
81
  gap: 10px;
75
- &.tootip-extend {
76
- flex-direction: column;
77
- align-items: flex-start;
78
- }
82
+ flex-direction: column;
79
83
  .product-price {
80
84
  .price-span {
81
85
  background-color: var(--_ctm-dn-pt-pe-bd-cr);
@@ -87,7 +91,7 @@
87
91
  text-align: var(--_ctm-dn-pt-pe-tt-an, var(--_tst-dn-dt-se-tt-an));
88
92
  letter-spacing: var(--_ctm-dn-pt-pe-lr-sg, var(--_tst-dn-dt-se-lr-sg));
89
93
  line-height: var(--_ctm-dn-pt-pe-le-ht, var(--_tst-dn-dt-se-le-ht));
90
- text-decoration: var(--_ctm-dn-pt-pe-tt-de, var(--_tst-dn-dt-se-tt-de));
94
+ text-decoration: var(--_ctm-dn-pt-pe-ue, var(--_tst-dn-dt-se-tt-de));
91
95
  border-color: var(--_show-border, var(--_ctm-dn-pt-pe-br-cr, var(--_tst-dn-br-cr)));
92
96
  border-style: var(--_show-border, var(--_ctm-dn-pt-pe-br-se, var(--_tst-dn-br-se)));
93
97
  border-width: var(--_show-border, var(--_ctm-dn-pt-pe-br-wh, var(--_tst-dn-br-wh)));
@@ -110,7 +114,7 @@
110
114
  text-align: var(--_ctm-dn-cy-ce-se-tt-an, var(--_tst-dn-dt-se-tt-an));
111
115
  letter-spacing: var(--_ctm-dn-cy-ce-se-lr-sg, var(--_tst-dn-dt-se-lr-sg));
112
116
  line-height: var(--_ctm-dn-cy-ce-se-le-ht, var(--_tst-dn-dt-se-le-ht));
113
- text-decoration: var(--_ctm-dn-cy-ce-se-tt-de, var(--_tst-dn-dt-se-tt-de));
117
+ text-decoration: var(--_ctm-dn-cy-ce-se-ue, var(--_tst-dn-dt-se-tt-de));
114
118
  border-color: var(
115
119
  --_show-border,
116
120
  var(--_ctm-dn-cy-ce-se-br-cr, var(--_tst-dn-br-cr))
@@ -142,7 +146,7 @@
142
146
  text-align: var(--_ctm-dn-um-se-tt-an, var(--_tst-dn-dt-se-tt-an));
143
147
  letter-spacing: var(--_ctm-dn-um-se-lr-sg, var(--_tst-dn-dt-se-lr-sg));
144
148
  line-height: var(--_ctm-dn-um-se-le-ht, var(--_tst-dn-dt-se-le-ht));
145
- text-decoration: var(--_ctm-dn-um-se-tt-de, var(--_tst-dn-dt-se-tt-de));
149
+ text-decoration: var(--_ctm-dn-um-se-ue, var(--_tst-dn-dt-se-tt-de));
146
150
  border-color: var(--_show-border, var(--_ctm-dn-um-se-br-cr, var(--_tst-dn-br-cr)));
147
151
  border-style: var(--_show-border, var(--_ctm-dn-um-se-br-se, var(--_tst-dn-br-se)));
148
152
  border-width: var(--_show-border, var(--_ctm-dn-um-se-br-wh, var(--_tst-dn-br-wh)));
@@ -168,7 +172,7 @@
168
172
  text-align: var(--_ctm-dn-dt-tt-an, var(--_tst-dn-dt-se-tt-an));
169
173
  letter-spacing: var(--_ctm-dn-dt-lr-sg, var(--_tst-dn-dt-se-lr-sg));
170
174
  line-height: var(--_ctm-dn-dt-le-ht, var(--_tst-dn-dt-se-le-ht));
171
- text-decoration: var(--_ctm-dn-dt-tt-de, var(--_tst-dn-dt-se-tt-de));
175
+ text-decoration: var(--_ctm-dn-dt-ue, var(--_tst-dn-dt-se-tt-de));
172
176
  border-color: var(--_show-border, var(--_ctm-dn-dt-br-cr, var(--_tst-dn-br-cr)));
173
177
  border-style: var(--_show-border, var(--_ctm-dn-dt-br-se, var(--_tst-dn-br-se)));
174
178
  border-width: var(--_show-border, var(--_ctm-dn-dt-br-wh, var(--_tst-dn-br-wh)));
@@ -191,7 +195,7 @@
191
195
  text-align: var(--_ctm-dn-dt-ve-tt-an, var(--_tst-dn-dt-se-tt-an));
192
196
  letter-spacing: var(--_ctm-dn-dt-ve-lr-sg, var(--_tst-dn-dt-se-lr-sg));
193
197
  line-height: var(--_ctm-dn-dt-ve-le-ht, var(--_tst-dn-dt-se-le-ht));
194
- text-decoration: var(--_ctm-dn-dt-ve-tt-de, var(--_tst-dn-dt-se-tt-de));
198
+ text-decoration: var(--_ctm-dn-dt-ve-ue, var(--_tst-dn-dt-se-tt-de));
195
199
  border-color: var(--_show-border, var(--_ctm-dn-dt-ve-br-cr, var(--_tst-dn-br-cr)));
196
200
  border-style: var(--_show-border, var(--_ctm-dn-dt-ve-br-se, var(--_tst-dn-br-se)));
197
201
  border-width: var(--_show-border, var(--_ctm-dn-dt-ve-br-wh, var(--_tst-dn-br-wh)));
@@ -216,7 +220,7 @@
216
220
  text-align: var(--_ctm-dn-al-pe-tt-an, var(--_tst-dn-dt-se-tt-an));
217
221
  letter-spacing: var(--_ctm-dn-al-pe-lr-sg, var(--_tst-dn-dt-se-lr-sg));
218
222
  line-height: var(--_ctm-dn-al-pe-le-ht, var(--_tst-dn-dt-se-le-ht));
219
- text-decoration: var(--_ctm-dn-al-pe-tt-de, var(--_tst-dn-dt-se-tt-de));
223
+ text-decoration: var(--_ctm-dn-al-pe-ue, var(--_tst-dn-dt-se-tt-de));
220
224
  border-color: var(--_show-border, var(--_ctm-dn-al-pe-br-cr, var(--_tst-dn-br-cr)));
221
225
  border-style: var(--_show-border, var(--_ctm-dn-al-pe-br-se, var(--_tst-dn-br-se)));
222
226
  border-width: var(--_show-border, var(--_ctm-dn-al-pe-br-wh, var(--_tst-dn-br-wh)));
@@ -239,7 +243,7 @@
239
243
  text-align: var(--_ctm-dn-cy-ce-se-tt-an, var(--_tst-dn-dt-se-tt-an));
240
244
  letter-spacing: var(--_ctm-dn-cy-ce-se-lr-sg, var(--_tst-dn-dt-se-lr-sg));
241
245
  line-height: var(--_ctm-dn-cy-ce-se-le-ht, var(--_tst-dn-dt-se-le-ht));
242
- text-decoration: var(--_ctm-dn-cy-ce-se-tt-de, var(--_tst-dn-dt-se-tt-de));
246
+ text-decoration: var(--_ctm-dn-cy-ce-se-ue, var(--_tst-dn-dt-se-tt-de));
243
247
  border-color: var(
244
248
  --_show-border,
245
249
  var(--_ctm-dn-cy-ce-se-br-cr, var(--_tst-dn-br-cr))
@@ -271,7 +275,7 @@
271
275
  text-align: var(--_ctm-dn-um-se-tt-an, var(--_tst-dn-dt-se-tt-an));
272
276
  letter-spacing: var(--_ctm-dn-um-se-lr-sg, var(--_tst-dn-dt-se-lr-sg));
273
277
  line-height: var(--_ctm-dn-um-se-le-ht, var(--_tst-dn-dt-se-le-ht));
274
- text-decoration: var(--_ctm-dn-um-se-tt-de, var(--_tst-dn-dt-se-tt-de));
278
+ text-decoration: var(--_ctm-dn-um-se-ue, var(--_tst-dn-dt-se-tt-de));
275
279
  border-color: var(--_show-border, var(--_ctm-dn-um-se-br-cr, var(--_tst-dn-br-cr)));
276
280
  border-style: var(--_show-border, var(--_ctm-dn-um-se-br-se, var(--_tst-dn-br-se)));
277
281
  border-width: var(--_show-border, var(--_ctm-dn-um-se-br-wh, var(--_tst-dn-br-wh)));
@@ -298,7 +302,7 @@
298
302
  text-align: var(--_ctm-dn-ss-tt-an, var(--_tst-dn-dt-se-tt-an));
299
303
  letter-spacing: var(--_ctm-dn-ss-lr-sg, var(--_tst-dn-dt-se-lr-sg));
300
304
  line-height: var(--_ctm-dn-ss-le-ht, var(--_tst-dn-dt-se-le-ht));
301
- text-decoration: var(--_ctm-dn-ss-tt-de, var(--_tst-dn-dt-se-tt-de));
305
+ text-decoration: var(--_ctm-dn-ss-ue, var(--_tst-dn-dt-se-tt-de));
302
306
  border-color: var(--_show-border, var(--_ctm-dn-ss-br-cr, var(--_tst-dn-br-cr)));
303
307
  border-style: var(--_show-border, var(--_ctm-dn-ss-br-se, var(--_tst-dn-br-se)));
304
308
  border-width: var(--_show-border, var(--_ctm-dn-ss-br-wh, var(--_tst-dn-br-wh)));
@@ -321,7 +325,7 @@
321
325
  text-align: var(--_ctm-dn-ss-ve-tt-an, var(--_tst-dn-dt-se-tt-an));
322
326
  letter-spacing: var(--_ctm-dn-ss-ve-lr-sg, var(--_tst-dn-dt-se-lr-sg));
323
327
  line-height: var(--_ctm-dn-ss-ve-le-ht, var(--_tst-dn-dt-se-le-ht));
324
- text-decoration: var(--_ctm-dn-ss-ve-tt-de, var(--_tst-dn-dt-se-tt-de));
328
+ text-decoration: var(--_ctm-dn-ss-ve-ue, var(--_tst-dn-dt-se-tt-de));
325
329
  border-color: var(--_show-border, var(--_ctm-dn-ss-ve-br-cr, var(--_tst-dn-br-cr)));
326
330
  border-style: var(--_show-border, var(--_ctm-dn-ss-ve-br-se, var(--_tst-dn-br-se)));
327
331
  border-width: var(--_show-border, var(--_ctm-dn-ss-ve-br-wh, var(--_tst-dn-br-wh)));
@@ -344,7 +348,7 @@
344
348
  text-align: var(--_ctm-dn-cy-ce-se-tt-an, var(--_tst-dn-dt-se-tt-an));
345
349
  letter-spacing: var(--_ctm-dn-cy-ce-se-lr-sg, var(--_tst-dn-dt-se-lr-sg));
346
350
  line-height: var(--_ctm-dn-cy-ce-se-le-ht, var(--_tst-dn-dt-se-le-ht));
347
- text-decoration: var(--_ctm-dn-cy-ce-se-tt-de, var(--_tst-dn-dt-se-tt-de));
351
+ text-decoration: var(--_ctm-dn-cy-ce-se-ue, var(--_tst-dn-dt-se-tt-de));
348
352
  border-color: var(
349
353
  --_show-border,
350
354
  var(--_ctm-dn-cy-ce-se-br-cr, var(--_tst-dn-br-cr))
@@ -383,7 +387,7 @@
383
387
  text-align: var(--_ctm-dn-pt-tx-tt-an, var(--_tst-dn-dt-se-tt-an));
384
388
  letter-spacing: var(--_ctm-dn-pt-tx-lr-sg, var(--_tst-dn-dt-se-lr-sg));
385
389
  line-height: var(--_ctm-dn-pt-tx-le-ht, var(--_tst-dn-dt-se-le-ht));
386
- text-decoration: var(--_ctm-dn-pt-tx-tt-de, var(--_tst-dn-dt-se-tt-de));
390
+ text-decoration: var(--_ctm-dn-pt-tx-ue, var(--_tst-dn-dt-se-tt-de));
387
391
  border-color: var(--_show-border, var(--_ctm-dn-pt-tx-br-cr, var(--_tst-dn-br-cr)));
388
392
  border-style: var(--_show-border, var(--_ctm-dn-pt-tx-br-se, var(--_tst-dn-br-se)));
389
393
  border-width: var(--_show-border, var(--_ctm-dn-pt-tx-br-wh, var(--_tst-dn-br-wh)));
@@ -410,7 +414,7 @@
410
414
  text-align: var(--_ctm-dn-pt-sg-pe-tt-an, var(--_tst-dn-dt-se-tt-an));
411
415
  letter-spacing: var(--_ctm-dn-pt-sg-pe-lr-sg, var(--_tst-dn-dt-se-lr-sg));
412
416
  line-height: var(--_ctm-dn-pt-sg-pe-le-ht, var(--_tst-dn-dt-se-le-ht));
413
- text-decoration: var(--_ctm-dn-pt-sg-pe-tt-de, var(--_tst-dn-dt-se-tt-de));
417
+ text-decoration: var(--_ctm-dn-pt-sg-pe-ue, var(--_tst-dn-dt-se-tt-de));
414
418
  border-color: var(
415
419
  --_show-border,
416
420
  var(--_ctm-dn-pt-sg-pe-br-cr, var(--_tst-dn-br-cr))
@@ -446,7 +450,7 @@
446
450
  text-align: var(--_ctm-dn-et-pe-tt-an, var(--_tst-dn-dt-se-tt-an));
447
451
  letter-spacing: var(--_ctm-dn-et-pe-lr-sg, var(--_tst-dn-dt-se-lr-sg));
448
452
  line-height: var(--_ctm-dn-et-pe-le-ht, var(--_tst-dn-dt-se-le-ht));
449
- text-decoration: var(--_ctm-dn-et-pe-tt-de, var(--_tst-dn-dt-se-tt-de));
453
+ text-decoration: var(--_ctm-dn-et-pe-ue, var(--_tst-dn-dt-se-tt-de));
450
454
  border-color: var(--_show-border, var(--_ctm-dn-et-pe-br-cr, var(--_tst-dn-br-cr)));
451
455
  border-style: var(--_show-border, var(--_ctm-dn-et-pe-br-se, var(--_tst-dn-br-se)));
452
456
  border-width: var(--_show-border, var(--_ctm-dn-et-pe-br-wh, var(--_tst-dn-br-wh)));
@@ -619,7 +623,7 @@
619
623
  text-align: var(--_ctm-dn-pt-tx-tt-an, var(--_tst-dn-dt-se-tt-an));
620
624
  letter-spacing: var(--_ctm-dn-pt-tx-lr-sg, var(--_tst-dn-dt-se-lr-sg));
621
625
  line-height: var(--_ctm-dn-pt-tx-le-ht, var(--_tst-dn-dt-se-le-ht));
622
- text-decoration: var(--_ctm-dn-pt-tx-tt-de, var(--_tst-dn-dt-se-tt-de));
626
+ text-decoration: var(--_ctm-dn-pt-tx-ue, var(--_tst-dn-dt-se-tt-de));
623
627
  border-color: var(--_show-border, var(--_ctm-dn-pt-tx-br-cr, var(--_tst-dn-br-cr)));
624
628
  border-style: var(--_show-border, var(--_ctm-dn-pt-tx-br-se, var(--_tst-dn-br-se)));
625
629
  border-width: var(--_show-border, var(--_ctm-dn-pt-tx-br-wh, var(--_tst-dn-br-wh)));
@@ -646,7 +650,7 @@
646
650
  text-align: var(--_ctm-dn-pt-sg-pe-tt-an, var(--_tst-dn-dt-se-tt-an));
647
651
  letter-spacing: var(--_ctm-dn-pt-sg-pe-lr-sg, var(--_tst-dn-dt-se-lr-sg));
648
652
  line-height: var(--_ctm-dn-pt-sg-pe-le-ht, var(--_tst-dn-dt-se-le-ht));
649
- text-decoration: var(--_ctm-dn-pt-sg-pe-tt-de, var(--_tst-dn-dt-se-tt-de));
653
+ text-decoration: var(--_ctm-dn-pt-sg-pe-ue, var(--_tst-dn-dt-se-tt-de));
650
654
  border-color: var(
651
655
  --_show-border,
652
656
  var(--_ctm-dn-pt-sg-pe-br-cr, var(--_tst-dn-br-cr))
@@ -682,7 +686,7 @@
682
686
  text-align: var(--_ctm-dn-et-pe-tt-an, var(--_tst-dn-dt-se-tt-an));
683
687
  letter-spacing: var(--_ctm-dn-et-pe-lr-sg, var(--_tst-dn-dt-se-lr-sg));
684
688
  line-height: var(--_ctm-dn-et-pe-le-ht, var(--_tst-dn-dt-se-le-ht));
685
- text-decoration: var(--_ctm-dn-et-pe-tt-de, var(--_tst-dn-dt-se-tt-de));
689
+ text-decoration: var(--_ctm-dn-et-pe-ue, var(--_tst-dn-dt-se-tt-de));
686
690
  border-color: var(--_show-border, var(--_ctm-dn-et-pe-br-cr, var(--_tst-dn-br-cr)));
687
691
  border-style: var(--_show-border, var(--_ctm-dn-et-pe-br-se, var(--_tst-dn-br-se)));
688
692
  border-width: var(--_show-border, var(--_ctm-dn-et-pe-br-wh, var(--_tst-dn-br-wh)));
package/dist/product-promotions.scss CHANGED
@@ -43,6 +43,12 @@
43
43
  max-height: 30%;
44
44
  }
45
45
  }
46
+ .text-element {
47
+ background: #6d96e4;
48
+ padding: 10px;
49
+ font-weight: 600;
50
+ color: rgba(75, 69, 70, 1);
51
+ }
46
52
  .promotions__container {
47
53
  display: flex;
48
54
  flex-direction: column;
package/dist/product.scss CHANGED
@@ -6,13 +6,27 @@ $resizeActive: '[data-cms-element-resizer="true"]';
6
6
  [data-div-type="element"] {
7
7
  &[data-element-type="product"] {
8
8
  // width: var(--_sf-con-nw-wh);
9
- // width: var(--_sf-el-wh-st-mx, calc(1% * var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh))));
10
- width: calc(1% * var(--_ctm-pro-ele-nw-wh-vl, auto));
9
+ width: var(--_sf-el-wh-st-mx, calc(1% * var(--_ctm-pro-ele-nw-wh-vl, var(--_sf-nw-wh))));
10
+ // width: calc(1% * var(--_ctm-pro-ele-nw-wh-vl, auto));
11
11
  // width: 100%;
12
12
  // height: var(--_ctm-pro-lt-ht) !important;
13
13
  height: auto;
14
14
  margin: var(--_ctm-pro-lt-mn, var(--_ctm-lt-mn, --_tst-lt-mn));
15
- background: var(--_ctm-pro-dn-bd-cr);
15
+
16
+ background-color: var(--_ctm-pro-dn-bd-cr, var(--_tst-dn-bd-cr));
17
+ padding: var(--_ctm-pro-lt-pg, var(--_tst-lt-pg));
18
+
19
+ // height: 100%;
20
+ border-color: var(--_ctm-pro-dn-br-cr, var(--_tst-dn-br-cr));
21
+ border-style: var(--_ctm-pro-dn-br-se, var(--_tst-dn-br-se));
22
+ border-width: var(--_ctm-pro-dn-br-wh, var(--_tst-dn-br-wh));
23
+ border-radius: var(--_ctm-pro-dn-br-rs, var(--_tst-dn-br-rs));
24
+ box-shadow: var(
25
+ --_show-shadow,
26
+ var(--_ctm-pro-dn-sw-ae, var(--_tst-dn-sw-ae)) var(--_ctm-pro-dn-sw-br, var(--_tst-dn-sw-br))
27
+ var(--_ctm-pro-dn-sw-sd, var(--_tst-dn-sw-sd))
28
+ var(--_ctm-pro-dn-sw-cr, var(--_tst-dn-fq-wt-sw-cr))
29
+ );
16
30
 
17
31
  // &:not(:has(#{$resizerId}#{$resizeActive})) {
18
32
  // min-height: 100px !important;
package/dist/productDetails.scss ADDED
@@ -0,0 +1,28 @@
1
+ @use "sass:map";
2
+ @use "sass:list";
3
+
4
+ $resizerId: "[data-cms-tool='cms-element-resizer']";
5
+ $resizeActive: '[data-cms-element-resizer="true"]';
6
+ [data-div-type="element"] {
7
+ &[data-element-type="productDetails"] {
8
+ // width: var(--_sf-con-nw-wh);
9
+ // width: var(--_sf-el-wh-st-mx, calc(1% * var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh))));
10
+ width: calc(1% * var(--_ctm-prod-ele-nw-wh-vl, auto));
11
+ // width: 100%;
12
+ // height: var(--_ctm-pro-lt-ht) !important;
13
+ height: auto;
14
+ margin: var(--_ctm-prod-lt-mn, var(--_ctm-lt-mn, --_tst-lt-mn));
15
+ background: var(--_ctm-prod-dn-bd-cr);
16
+
17
+ // &:not(:has(#{$resizerId}#{$resizeActive})) {
18
+ // min-height: 100px !important;
19
+ // }
20
+
21
+ & > div {
22
+ &.wrapper {
23
+ width: 100%;
24
+ // grid-template-rows: max(var(--_ctm-pro-lt-ht), auto) !important;
25
+ }
26
+ }
27
+ }
28
+ }
package/dist/quantity-selector.scss CHANGED
@@ -35,6 +35,12 @@
35
35
  // input[type="number"] {
36
36
  // -moz-appearance: textfield;
37
37
  // }
38
+ .text-element {
39
+ background: #6d96e4;
40
+ padding: 10px;
41
+ font-weight: 600;
42
+ color: rgba(75, 69, 70, 1);
43
+ }
38
44
  .quantity_container {
39
45
  .quantity_open_input {
40
46
  display: flex;
package/dist/repeater-item.scss CHANGED
@@ -15,6 +15,7 @@
15
15
  & > div {
16
16
  &.wrapper {
17
17
  width: 100%;
18
+ height: 100%;
18
19
  }
19
20
  }
20
21
  }
package/dist/repeater.scss CHANGED
@@ -95,12 +95,19 @@ $childItemSelector: '[data-element-type="repeater-item"]';
95
95
  }
96
96
  }
97
97
 
98
- &[data-view-state="full"] {
99
- width: auto;
100
- margin: 0;
101
- justify-self: stretch !important;
102
- align-self: stretch !important;
103
- cursor: auto;
104
- }
98
+ // &[data-view-state="full"] {
99
+ // width: auto;
100
+ // margin: 0;
101
+ // justify-self: stretch !important;
102
+ // align-self: stretch !important;
103
+ // cursor: auto;
104
+
105
+ // & > div {
106
+ // &[data-div-type="wrapper__layer"] {
107
+ // --_sf-vt-zz: visible;
108
+ // --_sf-op-zz: 1;
109
+ // }
110
+ // }
111
+ // }
105
112
  }
106
113
  }
package/dist/section.scss CHANGED
@@ -1,3 +1,4 @@
1
+ $activeElementSelector: "[data-has-clicked='true']";
1
2
  section {
2
3
  &[data-div-type="section"] {
3
4
  position: var(--_p-relative);
@@ -61,6 +62,21 @@ section {
61
62
  & > .wrapper {
62
63
  grid-area: 1/1/2/2 !important;
63
64
  }
65
+ &[data-view-state="full"] {
66
+ width: auto;
67
+ margin: 0;
68
+ justify-self: stretch !important;
69
+ align-self: stretch !important;
70
+ cursor: auto;
71
+ &:is(#{$activeElementSelector}) {
72
+ & > div {
73
+ &[data-div-type="wrapper__layer"] {
74
+ --_sf-vt-zz: visible;
75
+ --_sf-op-zz: 1;
76
+ }
77
+ }
78
+ }
79
+ }
64
80
  &:is([data-element-type="stack"].hrz > .wrapper > [data-div-type="element"]) {
65
81
  &:is([data-element-type="stack"]) {
66
82
  width: max(
package/dist/shipping-estimator.scss CHANGED
@@ -24,6 +24,12 @@
24
24
  &[data-show-shadow="false"] {
25
25
  --_show-shadow: none;
26
26
  }
27
+ .text-element {
28
+ background: #6d96e4;
29
+ padding: 10px;
30
+ font-weight: 600;
31
+ color: rgba(75, 69, 70, 1);
32
+ }
27
33
  .shipping__estimator {
28
34
  padding: var(--_ctm-lt-pg);
29
35
  }
package/dist/stack.scss CHANGED
@@ -33,6 +33,7 @@
33
33
  width: max-content;
34
34
  // min-width: var(--_sf-sta-nw-wh) !important;
35
35
  // min-width: 100px !important;
36
+ width: max-content;
36
37
  &.hsc {
37
38
  min-height: 10px;
38
39
  }
package/dist/store-locations.scss CHANGED
@@ -35,6 +35,12 @@
35
35
  max-height: 30%;
36
36
  }
37
37
  }
38
+ .text-element {
39
+ background: #6d96e4;
40
+ padding: 10px;
41
+ font-weight: 600;
42
+ color: rgba(75, 69, 70, 1);
43
+ }
38
44
  .store__container {
39
45
  display: flex;
40
46
  flex-direction: column;
package/dist/types/helper/helper-functions.d.ts CHANGED
@@ -1 +1,2 @@
1
1
  export declare const dateTimeFormat: (dateString: string | number, isTime?: boolean, formatStr?: string, timeZone?: string, locale?: string) => string | null;
2
+ export declare function createQueryStringForCollection(queryObject: any): string;
package/dist/uom-selector.scss CHANGED
@@ -43,6 +43,12 @@
43
43
  max-height: 30%;
44
44
  }
45
45
  }
46
+ .text-element {
47
+ background: #6d96e4;
48
+ padding: 10px;
49
+ font-weight: 600;
50
+ color: rgba(75, 69, 70, 1);
51
+ }
46
52
  .uom__container {
47
53
  padding: var(--_ctm-lt-pg);
48
54
  .stack {
package/dist/variable.scss CHANGED
@@ -57,7 +57,7 @@ body {
57
57
  --_cs-cms-root-zIndex: 5;
58
58
  --_add-element-zIndex: 3;
59
59
  --_cs-et-zIndex: 2;
60
- --_it-gl-zIndex: 1;
60
+ --_it-gl-zIndex: 2;
61
61
  --_cms-et-pe-zIndex: 1;
62
62
 
63
63
  --_inline-toolbar-zIndex: 9999;
@@ -85,6 +85,10 @@ body {
85
85
  --_red-500: #f04438;
86
86
 
87
87
  --_accent-color-2-500: #583fff;
88
+ --_accent-Color-2-200: #c7bfff;
89
+ --_accent-Color-2-100: #d5cfff;
90
+ --_accent-Color-2-50: #e3dfff;
91
+
88
92
  --_success-800: #05603a;
89
93
 
90
94
  --_primary-25: #f5f6fd;
@@ -114,8 +118,12 @@ body {
114
118
  --_error-700: #b42318;
115
119
  --_error-500: #f04438;
116
120
  --_error-200: #fecdca;
121
+ --_error-100: #fee4e2;
117
122
  --_error-50: #fef3f2;
118
123
 
124
+ --_cms-ruler-color: #9b27d5b7;
125
+ --_cms-ruler-color-v2: #9b27d53a;
126
+
119
127
  --_transition-duration: 0.45s;
120
128
  --_transition-timing-function: cubic-bezier(0.165, 0.84, 0.44, 1);
121
129
 
package/dist/variant-picker.scss CHANGED
@@ -24,6 +24,12 @@
24
24
  &[data-show-shadow="false"] {
25
25
  --_show-shadow: none;
26
26
  }
27
+ .text-element {
28
+ background: #6d96e4;
29
+ padding: 10px;
30
+ font-weight: 600;
31
+ color: rgba(75, 69, 70, 1);
32
+ }
27
33
  .variant__container {
28
34
  display: flex;
29
35
  flex-direction: column;
@@ -296,171 +302,70 @@
296
302
  }
297
303
  }
298
304
  //Dropdown
299
- .dropdown__main {
305
+ .est__dropdown__main {
300
306
  position: relative;
301
- cursor: pointer;
302
- // z-index: 101;
307
+ width: 100%;
308
+ margin-top: 10px;
303
309
 
304
- &.dropdown__outline {
305
- // border: 1px solid var(--_primary-300);
306
- // border-radius: var(--_br-6);
307
- .dropdown__header {
308
- border: 0;
309
- background-color: transparent;
310
- }
310
+ label {
311
+ font-size: 14px;
312
+ color: var(--_gray-700);
313
+ margin-bottom: 8px;
314
+ display: block;
311
315
  }
312
316
 
313
- .selected__value {
314
- display: flex;
315
- align-items: center;
316
- gap: 4px;
317
- font-weight: 500;
318
- color: var(--_gray-900);
319
- &::placeholder {
320
- color: var(--_gray-500);
321
- }
322
- .selected__text {
323
- margin-top: -2px;
324
- }
325
- &.updated__values {
326
- background-color: var();
327
- }
328
- }
317
+ .est__dropdown {
318
+ cursor: pointer;
319
+ position: relative;
320
+ color: var(--_gray-700);
329
321
 
330
- .dropdown__header {
331
322
  border-radius: 6px;
332
- border: 1px solid var(--_gray-300);
333
- height: 40px;
334
- // line-height: 40px;
335
323
  background-color: #fff;
336
- padding: 0 8px 0 14px;
337
324
  display: flex;
338
- align-items: center;
339
325
  justify-content: space-between;
340
- background-color: #fff;
341
-
342
- gap: 10px;
343
-
344
- &.remove__radius {
345
- border-radius: 0;
346
- }
347
-
348
- &.pl__0 {
349
- padding-left: 0px;
350
- }
351
- &.primary__btn {
352
- background-color: var(--_primary-500);
353
- color: var(--_base-white);
354
- .selected__value {
355
- color: var(--_base-white);
356
- }
357
- svg {
358
- width: var(--_width-20);
359
- height: var(--height-20);
360
- path {
361
- stroke: var(--_base-white);
362
- }
363
- }
326
+ align-items: center;
327
+ width: 100%;
328
+ .value__selected {
329
+ width: 100%;
364
330
  }
365
331
 
366
- .dropdown__arrow {
367
- // margin-left: 10px;
368
- margin-top: var(--_mt-3);
369
- margin-left: -3px;
370
- margin-top: 2px;
371
- &[data-attr="chevron-down"] {
372
- margin-top: -3px;
373
- svg {
374
- width: var(--_width-18);
375
- height: var(--height-18);
376
- path {
377
- stroke: var(--_gray-700);
378
- }
379
- }
380
- }
381
- svg {
382
- width: var(--_width-20);
383
- height: var(--_height-20);
384
- }
385
- }
386
- .close__btn {
387
- svg {
388
- width: var(--_width-18);
389
- height: var(--_height-18);
390
- }
332
+ &.open .list {
333
+ display: flex;
391
334
  }
392
- }
393
335
 
394
- .dropdown__list {
395
- display: flex;
396
- left: 0;
397
- position: absolute;
398
- z-index: var(--_higher-zIndex);
399
- // margin-top: var(--_mt-4);
400
- flex-direction: var(--_f-column);
401
- // width: max-content;
402
- border-radius: var(--_br-8);
403
- border: 1px solid var(--_border-light-color);
404
- background: var(--_base-white);
405
- // min-width: 130px;
406
- // max-width: 200px;
407
- width: 100%;
408
- gap: var(--_ctm-lt-dn-dy-se-dn-os-sg);
409
- // box-shadow:
410
- // 0px 4px 6px -2px rgba(16, 24, 40, 0.03),
411
- // 0px 12px 16px -4px rgba(16, 24, 40, 0.08);
412
- padding: var(--_ctm-lt-dn-dy-se-dn-os-pg);
413
- max-height: 200px;
414
- overflow-y: auto;
415
- .no__content {
416
- padding: 10px;
417
- text-align: center;
418
- }
419
- .dropdown__option {
420
- padding: var(--_ctm-lt-dn-dy-se-dn-lt-im-pg);
421
- border-bottom: 1px solid var(--_gray-200);
422
- display: var(--_d-flex);
423
- justify-content: var(--_justify-between);
424
- background-color: var(--_base-white);
425
- gap: var(--_ctm-lt-dn-dy-se-dn-lt-im-sg);
426
- &[data-list="true"] {
427
- pointer-events: none;
428
- opacity: 0.3;
429
- // border: 1px solid red;
430
- }
431
- span {
432
- display: inline-block;
433
- @include restrictToLinesShow(1);
434
- white-space: normal;
435
- text-overflow: ellipsis;
436
- // width: 140px;
437
- button {
438
- display: var(--_d-flex);
439
- }
440
- }
336
+ .list {
337
+ display: none;
338
+ flex-direction: column;
339
+ border: 1px solid var(--_gray-200);
340
+ border-radius: 6px;
341
+ position: absolute;
342
+ top: 100%;
343
+ left: 0;
344
+ width: 100%;
345
+ background-color: #fff;
346
+ border-radius: 4px;
347
+ z-index: var(--_higher-zIndex);
348
+ max-height: 200px;
349
+ overflow-y: auto;
441
350
 
442
- &:hover {
443
- background-color: var(--_primary-25);
351
+ &.top {
352
+ bottom: 100%;
353
+ top: auto;
444
354
  }
445
355
 
446
- &.selected {
447
- background-color: var(--_primary-25);
448
- color: var(--_primary-500);
449
- // font-weight: medium;
356
+ .list__option {
357
+ padding: 12px;
358
+ cursor: pointer;
450
359
 
451
- svg {
452
- path {
453
- stroke: var(--_primary-500);
454
- }
360
+ &:hover {
361
+ background-color: var(--_primary-25);
362
+ color: var(--_primary-400);
455
363
  }
456
364
  }
457
-
458
- &:last-child {
459
- border-bottom: none;
460
- }
461
365
  }
462
366
  }
463
367
  }
368
+
464
369
  // variant dropdown selection
465
370
  .var__drop__selection {
466
371
  display: flex;
package/dist/volume-pricing.scss CHANGED
@@ -24,7 +24,12 @@
24
24
  &[data-show-shadow="false"] {
25
25
  --_show-shadow: none;
26
26
  }
27
-
27
+ .text-element {
28
+ background: #6d96e4;
29
+ padding: 10px;
30
+ font-weight: 600;
31
+ color: rgba(75, 69, 70, 1);
32
+ }
28
33
  .volume__container {
29
34
  padding: var(--_ctm-lt-pg);
30
35
  .stack {