@sc-360-v2/storefront-cms-library 0.2.75 → 0.2.76

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 (104) hide show
  1. package/dist/add-order.scss +69 -0
  2. package/dist/allocationDetails.scss +335 -0
  3. package/dist/allocations.scss +546 -2
  4. package/dist/amount-estimator.scss +733 -187
  5. package/dist/brand-basic-elements.scss +142 -61
  6. package/dist/brand.scss +66 -16
  7. package/dist/breadcrumbs.scss +379 -88
  8. package/dist/builder.js +1 -1
  9. package/dist/bulk-variant-picker.scss +525 -121
  10. package/dist/bundle-basic-elements.scss +283 -121
  11. package/dist/bundle.scss +74 -15
  12. package/dist/buyFor.scss +153 -0
  13. package/dist/cart-details.scss +387 -0
  14. package/dist/cart-summary.scss +175 -0
  15. package/dist/cart.scss +178 -44
  16. package/dist/cartDropdownOverlay.scss +118 -0
  17. package/dist/cartGrouping.scss +89 -0
  18. package/dist/category.scss +38 -7
  19. package/dist/categoryDetails.scss +24 -6
  20. package/dist/categoryWidget.scss +11 -6
  21. package/dist/code-temp.scss +6 -4
  22. package/dist/contact-us.scss +19 -147
  23. package/dist/container.scss +22 -1
  24. package/dist/countdown.scss +372 -112
  25. package/dist/editCartItem.scss +111 -0
  26. package/dist/embed-temp.scss +29 -14
  27. package/dist/faq.scss +3 -6
  28. package/dist/filters.scss +11 -2
  29. package/dist/form-preview.scss +128 -93
  30. package/dist/gallery-slider-temp.scss +548 -135
  31. package/dist/grid.scss +24 -0
  32. package/dist/hotspot.scss +27 -25
  33. package/dist/icon-library.scss +26 -15
  34. package/dist/icons.js +1 -1
  35. package/dist/image-temp.scss +45 -17
  36. package/dist/index.js +1 -1
  37. package/dist/item-stock.scss +125 -0
  38. package/dist/layouter-item.scss +26 -2
  39. package/dist/layouter.scss +26 -1
  40. package/dist/light-box-v2.scss +29 -3
  41. package/dist/lightbox.scss +18 -2
  42. package/dist/line.scss +165 -0
  43. package/dist/login.scss +15 -23
  44. package/dist/map.scss +495 -119
  45. package/dist/marchandiserSets.scss +35 -18
  46. package/dist/menu.scss +121 -33
  47. package/dist/modal.scss +4 -0
  48. package/dist/past-orders.scss +11 -2
  49. package/dist/payment-methods.scss +29 -13
  50. package/dist/pickup-locations.scss +884 -244
  51. package/dist/product-actions.scss +2223 -418
  52. package/dist/product-basic-elements.scss +273 -122
  53. package/dist/product-highlights.scss +22 -14
  54. package/dist/product-image.scss +535 -136
  55. package/dist/product-inventory.scss +1105 -283
  56. package/dist/product-options.scss +378 -94
  57. package/dist/product-price.scss +1386 -316
  58. package/dist/product-promotions.scss +2252 -601
  59. package/dist/product.scss +68 -14
  60. package/dist/productDetails.scss +29 -2
  61. package/dist/profile.scss +19 -4
  62. package/dist/quantity-selector.scss +5 -4
  63. package/dist/quick-links.scss +277 -0
  64. package/dist/quotes.scss +11 -2
  65. package/dist/repeater-item.scss +26 -2
  66. package/dist/repeater.scss +60 -7
  67. package/dist/rfqs.scss +11 -2
  68. package/dist/scroll.scss +112 -47
  69. package/dist/search-results-heading.scss +282 -0
  70. package/dist/search.scss +84 -23
  71. package/dist/section.scss +25 -1
  72. package/dist/shareCartSideBar.scss +230 -0
  73. package/dist/shipping-estimator.scss +7 -3
  74. package/dist/social.scss +148 -38
  75. package/dist/sort.scss +11 -2
  76. package/dist/stack.scss +23 -3
  77. package/dist/static-text.scss +0 -1
  78. package/dist/store-locations.scss +887 -244
  79. package/dist/sub-category.scss +50 -19
  80. package/dist/tab-container-item.scss +80 -0
  81. package/dist/tab-container.scss +89 -0
  82. package/dist/tab-v2.scss +579 -0
  83. package/dist/table.scss +370 -91
  84. package/dist/tabs.scss +334 -74
  85. package/dist/text-temp-v2.scss +21 -9
  86. package/dist/types/builder/elements/add-order/index.d.ts +27 -0
  87. package/dist/types/builder/elements/create-form/index.d.ts +27 -0
  88. package/dist/types/builder/elements/form-builder/index.d.ts +2 -2
  89. package/dist/types/builder/elements/image/index.d.ts +13 -0
  90. package/dist/types/builder/enums/index.d.ts +5 -1
  91. package/dist/types/builder/index.d.ts +3 -1
  92. package/dist/types/builder/interfaces/global.d.ts +5 -0
  93. package/dist/types/builder/tools/element-edit/addOrder.d.ts +28 -0
  94. package/dist/types/builder/tools/element-edit/createForm.d.ts +15 -0
  95. package/dist/types/builder/tools/element-edit/index.d.ts +3 -1
  96. package/dist/uom-selector.scss +1569 -383
  97. package/dist/variant-picker.scss +1593 -481
  98. package/dist/video.scss +212 -53
  99. package/dist/volume-pricing.scss +775 -196
  100. package/dist/widget.scss +14 -0
  101. package/package.json +1 -1
  102. package/dist/editor-core.scss +0 -537
  103. package/dist/tab-panel.scss +0 -93
  104. package/dist/text-editor.scss +0 -331
package/dist/grid.scss CHANGED
@@ -16,6 +16,30 @@ $elementSelector: "[data-div-type='element']";
16
16
 
17
17
  // padding: var(--_ctm-mob-gri-lt-pg, var(--_ctm-tab-gri-lt-pg, var(--_ctm-gri-lt-pg)));
18
18
  // background: var(--_ctm-mob-gri-dn-bd-cr, var(--_ctm-tab-gri-dn-bd-cr, var(--_ctm-gri-dn-bd-cr)));
19
+ background-color: var(
20
+ --_ctm-mob-gri-dn-bd-cr,
21
+ var(--_ctm-tab-gri-dn-bd-cr, var(--_ctm-gri-dn-bd-cr))
22
+ );
23
+ background-image: var(
24
+ --_ctm-mob-gri-dn-bd-ie,
25
+ var(--_ctm-tab-gri-dn-bd-ie, var(--_ctm-gri-dn-bd-ie))
26
+ );
27
+ background-attachment: var(
28
+ --_ctm-mob-gri-dn-bd-at,
29
+ var(--_ctm-tab-gri-dn-bd-at, var(--_ctm-gri-dn-bd-at))
30
+ );
31
+ background-position: var(
32
+ --_ctm-mob-gri-dn-bd-pn,
33
+ var(--_ctm-tab-gri-dn-bd-pn, var(--_ctm-gri-dn-bd-pn))
34
+ );
35
+ background-repeat: var(
36
+ --_ctm-mob-gri-dn-bd-rt,
37
+ var(--_ctm-tab-gri-dn-bd-rt, var(--_ctm-gri-dn-bd-rt))
38
+ );
39
+ background-size: var(
40
+ --_ctm-mob-gri-dn-bd-se,
41
+ var(--_ctm-tab-gri-dn-bd-se, var(--_ctm-gri-dn-bd-se))
42
+ );
19
43
 
20
44
  &[data-show-shadow="false"] {
21
45
  --_hide-grid-shadow: none;
package/dist/hotspot.scss CHANGED
@@ -196,7 +196,7 @@ $data: (
196
196
  text-align: var(--_ctm-dn-tp-tt-dn-tt-an);
197
197
  letter-spacing: var(--_ctm-dn-tp-tt-dn-lr-sg);
198
198
  line-height: var(--_ctm-dn-tp-tt-dn-le-ht);
199
- text-decoration: var(--_ctm-dn-tp-tt-dn-lh, var(--_ctm-dn-tp-tt-dn-ue));
199
+ text-decoration: var(--_ctm-dn-tp-tt-dn-ue);
200
200
  }
201
201
  p {
202
202
  font-size: var(--_ctm-dn-tp-tt-dn-ft-se-dc);
@@ -211,6 +211,7 @@ $data: (
211
211
  }
212
212
  }
213
213
  .tooltip__image {
214
+ width: 100%;
214
215
  background-color: var(--_ctm-dn-tp-ie-dn-bd-cr);
215
216
  transition: transform 0.3s ease-in-out;
216
217
  display: flex;
@@ -218,9 +219,19 @@ $data: (
218
219
  align-items: var(--_ctm-dn-tp-ie-dn-vl-at);
219
220
  img {
220
221
  object-fit: var(--_ctm-dn-tp-ie-dn-ft-os);
222
+ height: -webkit-fill-available;
221
223
  max-width: 100%;
222
224
  rotate: calc(var(--_ctm-dn-tp-ie-dn-ud) * 1deg);
223
225
  scale: var(--_ctm-dn-tp-ie-dn-zm-ie);
226
+
227
+ &:hover {
228
+ &[data-on-img-hover="Zoom In"] {
229
+ transform: scale(1.08);
230
+ }
231
+ &[data-on-img-hover="Zoom Out"] {
232
+ transform: scale(0.92);
233
+ }
234
+ }
224
235
  }
225
236
  }
226
237
  }
@@ -258,11 +269,8 @@ $data: (
258
269
  }
259
270
  &[data-hotspot-tooltip-style-show-shadow="true"] {
260
271
  .hotspot__tooltip {
261
- box-shadow: var(
262
- --_show-shadow,
263
- var(--_ctm-dn-tp-dn-sw-ae) var(--_ctm-dn-tp-dn-sw-br) var(--_ctm-dn-tp-dn-sw-sd)
264
- var(--_ctm-dn-tp-dn-sw-cr)
265
- );
272
+ box-shadow: var(--_ctm-dn-tp-dn-sw-ae) var(--_ctm-dn-tp-dn-sw-br) var(--_ctm-dn-tp-dn-sw-sd)
273
+ var(--_ctm-dn-tp-dn-sw-cr);
266
274
  }
267
275
  }
268
276
  &[data-hotspot-tooltip-image-style-show-border="true"] {
@@ -284,11 +292,8 @@ $data: (
284
292
  }
285
293
  &[data-hotspot-style-show-shadow="true"] {
286
294
  .hotspot {
287
- box-shadow: var(
288
- --_show-shadow,
289
- var(--_ctm-dn-ht-se-sw-ae) var(--_ctm-dn-ht-se-sw-br) var(--_ctm-dn-ht-se-sw-sd)
290
- var(--_ctm-dn-ht-se-sw-cr)
291
- );
295
+ box-shadow: var(--_ctm-dn-ht-se-sw-ae) var(--_ctm-dn-ht-se-sw-br) var(--_ctm-dn-ht-se-sw-sd)
296
+ var(--_ctm-dn-ht-se-sw-cr);
292
297
  }
293
298
  }
294
299
  &[data-hotspot-style-show-border="true"] {
@@ -313,11 +318,8 @@ $data: (
313
318
  scale: var(--_ctm-dn-ie-se-zm-ie);
314
319
  transition: transform 0.3s ease-in-out;
315
320
  rotate: calc(var(--_ctm-dn-ie-se-ud) * 1deg);
316
- box-shadow: var(
317
- --_show-shadow,
318
- var(--_ctm-dn-ie-se-sw-ae) var(--_ctm-dn-ie-se-sw-br) var(--_ctm-dn-ie-se-sw-sd)
319
- var(--_ctm-dn-ie-se-sw-cr)
320
- );
321
+ box-shadow: var(--_ctm-dn-ie-se-sw-ae) var(--_ctm-dn-ie-se-sw-br) var(--_ctm-dn-ie-se-sw-sd)
322
+ var(--_ctm-dn-ie-se-sw-cr);
321
323
  &:hover {
322
324
  &[data-on-hover="Zoom Out"] {
323
325
  transform: scale(0.9998);
@@ -350,6 +352,15 @@ $data: (
350
352
  position: absolute;
351
353
  .hotspot__main {
352
354
  position: relative;
355
+ span {
356
+ svg {
357
+ width: var(--_ctm-dn-ht-se-in-se);
358
+ height: var(--_ctm-dn-ht-se-in-se);
359
+ path {
360
+ stroke: var(--_ctm-dn-ht-se-in-c1);
361
+ }
362
+ }
363
+ }
353
364
  .hotspot {
354
365
  background: var(--_ctm-dn-ht-se-bd-cr);
355
366
  // height: var(--_ctm-dn-tp-tt-dn-ft-se);
@@ -373,15 +384,6 @@ $data: (
373
384
  &[data-hotspot-shape="any"] {
374
385
  border-radius: var(--_ctm-dn-ht-se-br-rs);
375
386
  }
376
- span {
377
- svg {
378
- width: var(--_ctm-dn-ht-se-in-se);
379
- height: var(--_ctm-dn-ht-se-in-se);
380
- path {
381
- stroke: var(--_ctm-dn-ht-se-in-c1);
382
- }
383
- }
384
- }
385
387
  }
386
388
  }
387
389
  }
package/dist/icon-library.scss CHANGED
@@ -6,8 +6,17 @@ $resizeActive: '[data-cms-element-resizer="true"]';
6
6
 
7
7
  [data-div-type="element"] {
8
8
  &[data-element-type="iconLibrary"] {
9
- width: var(--_sf-el-wh-st-mx, calc(1% * var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh))));
10
- margin: var(--_ctm-lt-mn, --_tst-lt-mn);
9
+ width: var(
10
+ --_sf-el-wh-st-mx,
11
+ calc(
12
+ 1% *
13
+ var(
14
+ --_ctm-mob-ele-nw-wh-vl,
15
+ var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh)))
16
+ )
17
+ )
18
+ );
19
+ margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
11
20
  // height: var(--_ctm-lt-ht, --_tst-lt-ht);
12
21
 
13
22
  & > .wrapper {
@@ -15,15 +24,16 @@ $resizeActive: '[data-cms-element-resizer="true"]';
15
24
  height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht))) !important;
16
25
  }
17
26
  &[data-widget-border="true"] .icon__container {
18
- border-color: var(--_ctm-dn-br-cr, var(--_tst-dn-br-cr));
19
- border-style: var(--_ctm-dn-br-se, var(--_tst-dn-br-se));
20
- border-width: var(--_ctm-dn-br-wh, var(--_tst-dn-br-wh));
27
+ border-color: var(--_ctm-mob-dn-br-cr, var(--_ctm-tab-dn-br-cr, var(--_ctm-dn-br-cr)));
28
+ border-style: var(--_ctm-mob-dn-br-se, var(--_ctm-tab-dn-br-se, var(--_ctm-dn-br-se)));
29
+ border-width: var(--_ctm-mob-dn-br-wh, var(--_ctm-tab-dn-br-wh, var(--_ctm-dn-br-wh)));
21
30
  }
22
31
 
23
32
  &[data-widget-shadow="true"] .icon__container {
24
- box-shadow: var(--_ctm-dn-sw-ae, var(--_tst-dn-vo-tt-cr-dn-sw-ae))
25
- var(--_ctm-dn-sw-br, var(--_tst-vo-se-sw-br)) var(--_ctm-dn-sw-sd, var(--_tst-vo-se-sw-sd))
26
- var(--_ctm-dn-sw-cr, var(--_tst-dn-vo-tt-cr-dn-sw-cr));
33
+ box-shadow: var(--_ctm-mob-dn-sw-ae, var(--_ctm-tab-dn-sw-ae, var(--_ctm-dn-sw-ae)))
34
+ var(--_ctm-mob-dn-sw-br, var(--_ctm-tab-dn-sw-br, var(--_ctm-dn-sw-br)))
35
+ var(--_ctm-mob-dn-sw-sd, var(--_ctm-tab-dn-sw-sd, var(--_ctm-dn-sw-sd)))
36
+ var(--_ctm-mob-dn-sw-cr, var(--_ctm-tab-dn-sw-cr, var(--_ctm-dn-sw-cr)));
27
37
  }
28
38
 
29
39
  &[data-widget-shadow="false"] .icon__container {
@@ -36,8 +46,8 @@ $resizeActive: '[data-cms-element-resizer="true"]';
36
46
  align-items: center;
37
47
  width: 100%;
38
48
  height: 100%;
39
- background-color: var(--_ctm-dn-bd-cr, var(--_tst-dn-bd-cr));
40
- border-radius: var(--_ctm-dn-br-rs, var(--_tst-dn-br-rs));
49
+ background-color: var(--_ctm-mob-dn-bd-cr, var(--_ctm-tab-dn-bd-cr, var(--_ctm-dn-bd-cr)));
50
+ border-radius: var(--_ctm-mob-dn-br-rs, var(--_ctm-tab-dn-br-rs, var(--_ctm-dn-br-rs)));
41
51
 
42
52
  .custom-icon {
43
53
  object-fit: contain;
@@ -46,14 +56,15 @@ $resizeActive: '[data-cms-element-resizer="true"]';
46
56
  }
47
57
 
48
58
  .icon {
49
- background-color: var(--_ctm-dn-bd-cr, var(--_tst-dn-bd-cr));
59
+ background-color: var(--_ctm-mob-dn-bd-cr, var(--_ctm-tab-dn-bd-cr, var(--_ctm-dn-bd-cr)));
50
60
  svg {
51
- width: var(--_ctm-dn-in-se);
52
- height: var(--_ctm-dn-in-se);
61
+ width: var(--_ctm-mob-dn-in-se, var(--_ctm-tab-dn-in-se, var(--_ctm-dn-in-se)));
62
+ height: var(--_ctm-mob-dn-in-se, var(--_ctm-tab-dn-in-se, var(--_ctm-dn-in-se)));
53
63
  path {
54
- stroke: var(--_ctm-dn-in-c1);
55
- // fill: var(--_ctm-dn-in-c1, currentColor) !important;
64
+ stroke: var(--_ctm-mob-dn-in-c1, var(--_ctm-tab-dn-in-c1, var(--_ctm-dn-in-c1)));
65
+ // fill: var(--_ctm-mob-dn-in-c1, var(--_ctm-tab-dn-in-c1, var(--_ctm-dn-in-c1, currentColor))) !important;
56
66
  }
67
+
57
68
  path,
58
69
  rect,
59
70
  circle,