@sc-360-v2/storefront-cms-library 0.5.49 → 0.5.51

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 (48) hide show
  1. package/dist/brand-basic-elements.scss +109 -46
  2. package/dist/brand.scss +6 -0
  3. package/dist/breadcrumbs.scss +144 -51
  4. package/dist/builder.js +1 -1
  5. package/dist/bundle.scss +74 -48
  6. package/dist/bundleDetails.scss +1360 -275
  7. package/dist/button copy.scss +271 -271
  8. package/dist/cart.scss +85 -4
  9. package/dist/category.scss +25 -4
  10. package/dist/container.scss +20 -17
  11. package/dist/embed-temp.scss +2 -2
  12. package/dist/hotspot.scss +12 -3
  13. package/dist/language-selector.scss +42 -0
  14. package/dist/line.scss +54 -36
  15. package/dist/login.scss +225 -69
  16. package/dist/map.scss +354 -147
  17. package/dist/marchandiserSets.scss +34 -0
  18. package/dist/product-actions.scss +53 -0
  19. package/dist/product-basic-elements.scss +50 -4
  20. package/dist/productDetails.scss +33 -0
  21. package/dist/quick-links.scss +23 -2
  22. package/dist/repeater copy.scss +635 -635
  23. package/dist/repeater-grid-toggle.scss +93 -3
  24. package/dist/repeater-item.scss +5 -1
  25. package/dist/review-cart.scss +7 -1
  26. package/dist/search.scss +45 -5
  27. package/dist/styles.css +1 -1
  28. package/dist/tab-v2.scss +724 -583
  29. package/dist/text-temp-v2.scss +7 -1
  30. package/dist/types/builder/tools/element-edit/breadcrumbs.d.ts +26 -0
  31. package/dist/types/builder/tools/element-edit/bundle.d.ts +104 -4
  32. package/dist/types/builder/tools/element-edit/cart.d.ts +7 -0
  33. package/dist/types/builder/tools/element-edit/map.d.ts +0 -1
  34. package/dist/types/builder/tools/element-edit/quickLinks.d.ts +6 -0
  35. package/dist/types/builder/tools/element-edit/search.d.ts +4 -61
  36. package/dist/types/builder/tools/element-edit/tabsV2.d.ts +110 -1
  37. package/dist/upload-media.scss +14 -2
  38. package/package.json +1 -1
  39. package/dist/add-products-tab copy.scss +0 -1122
  40. package/dist/allocationDetails copy.scss +0 -757
  41. package/dist/bulk-variant-picker copy.scss +0 -1121
  42. package/dist/bundleDetails copy.scss +0 -1431
  43. package/dist/product-actions copy.scss +0 -2765
  44. package/dist/product-highlights copy.scss +0 -217
  45. package/dist/product-image copy.scss +0 -787
  46. package/dist/user-elements copy.scss +0 -1437
  47. package/dist/volume-pricing copy 2.scss +0 -1468
  48. package/dist/volume-pricing copy.scss +0 -1076
package/dist/bundle.scss CHANGED
@@ -30,22 +30,31 @@ $resizeActive: '[data-cms-element-resizer="true"]';
30
30
  --_sf-icn-bg,
31
31
  #{prepareMediaVariable(--_ctm-dn-sr-nn-ss-#{$TYPE}-sr-dt-se-bd-cr)}
32
32
  );
33
- border-color: var(
34
- --_sf-icn-br,
35
- #{prepareMediaVariable(--_ctm-dn-sr-nn-ss-#{$TYPE}-sr-dt-se-br-cr)}
36
- );
37
- border-width: var(
38
- --_sf-icn-bw,
39
- #{prepareMediaVariable(--_ctm-dn-sr-nn-ss-#{$TYPE}-sr-dt-se-br-wh)}
40
- );
41
- border-style: var(
42
- --_sf-icn-bs,
43
- #{prepareMediaVariable(--_ctm-dn-sr-nn-ss-#{$TYPE}-sr-dt-se-br-se)}
44
- );
45
33
  border-radius: var(
46
34
  --_sf-icn-brs,
47
35
  #{prepareMediaVariable(--_ctm-dn-sr-nn-ss-#{$TYPE}-sr-dt-se-br-rs)}
48
36
  );
37
+ // Border is only drawn when the "Show Border" toggle is on. The renderer emits
38
+ // data-show-border="false" when the toggle is off; an absent/"true" value keeps
39
+ // the border (so existing arrows that don't set the attribute are unaffected).
40
+ &:not([data-show-border="false"]) {
41
+ border-color: var(
42
+ --_sf-icn-br,
43
+ #{prepareMediaVariable(--_ctm-dn-sr-nn-ss-#{$TYPE}-sr-dt-se-br-cr)}
44
+ );
45
+ border-width: var(
46
+ --_sf-icn-bw,
47
+ #{prepareMediaVariable(--_ctm-dn-sr-nn-ss-#{$TYPE}-sr-dt-se-br-wh)}
48
+ );
49
+ border-style: var(
50
+ --_sf-icn-bs,
51
+ #{prepareMediaVariable(--_ctm-dn-sr-nn-ss-#{$TYPE}-sr-dt-se-br-se)}
52
+ );
53
+ }
54
+ // Hide the arrow glyph when the "Show Icon" toggle is off.
55
+ &[data-show-icon="false"] > span {
56
+ display: none;
57
+ }
49
58
  &:disabled {
50
59
  opacity: 0.65;
51
60
  cursor: no-drop;
@@ -507,18 +516,22 @@ $resizeActive: '[data-cms-element-resizer="true"]';
507
516
  row-gap: var(--_sf-gp);
508
517
  width: 100%;
509
518
  // height: 100%;
510
- border-color: var(
511
- --_ctm-mob-dn-be-ts-wt-se-br-cr,
512
- var(--_ctm-tab-dn-be-ts-wt-se-br-cr, var(--_ctm-dn-be-ts-wt-se-br-cr))
513
- );
514
- border-style: var(
515
- --_ctm-mob-dn-be-ts-wt-se-br-se,
516
- var(--_ctm-tab-dn-be-ts-wt-se-br-se, var(--_ctm-dn-be-ts-wt-se-br-se))
517
- );
518
- border-width: var(
519
- --_ctm-mob-dn-be-ts-wt-se-br-wh,
520
- var(--_ctm-tab-dn-be-ts-wt-se-br-wh, var(--_ctm-dn-be-ts-wt-se-br-wh))
521
- );
519
+ // Border only drawn when the widget's "Show Border" toggle is on. The
520
+ // renderer emits data-show-border="true"/"" on the .bundle__tabs container.
521
+ &[data-show-border="true"] {
522
+ border-color: var(
523
+ --_ctm-mob-dn-be-ts-wt-se-br-cr,
524
+ var(--_ctm-tab-dn-be-ts-wt-se-br-cr, var(--_ctm-dn-be-ts-wt-se-br-cr))
525
+ );
526
+ border-style: var(
527
+ --_ctm-mob-dn-be-ts-wt-se-br-se,
528
+ var(--_ctm-tab-dn-be-ts-wt-se-br-se, var(--_ctm-dn-be-ts-wt-se-br-se))
529
+ );
530
+ border-width: var(
531
+ --_ctm-mob-dn-be-ts-wt-se-br-wh,
532
+ var(--_ctm-tab-dn-be-ts-wt-se-br-wh, var(--_ctm-dn-be-ts-wt-se-br-wh))
533
+ );
534
+ }
522
535
  border-radius: var(
523
536
  --_ctm-mob-dn-be-ts-wt-se-br-rs,
524
537
  var(--_ctm-tab-dn-be-ts-wt-se-br-rs, var(--_ctm-dn-be-ts-wt-se-br-rs))
@@ -994,18 +1007,22 @@ $resizeActive: '[data-cms-element-resizer="true"]';
994
1007
  row-gap: var(--_sf-gp);
995
1008
  width: 100%;
996
1009
  // height: 100%;
997
- border-color: var(
998
- --_ctm-mob-dn-cy-ts-wt-se-br-cr,
999
- var(--_ctm-tab-dn-cy-ts-wt-se-br-cr, var(--_ctm-dn-cy-ts-wt-se-br-cr))
1000
- );
1001
- border-style: var(
1002
- --_ctm-mob-dn-cy-ts-wt-se-br-se,
1003
- var(--_ctm-tab-dn-cy-ts-wt-se-br-se, var(--_ctm-dn-cy-ts-wt-se-br-se))
1004
- );
1005
- border-width: var(
1006
- --_ctm-mob-dn-cy-ts-wt-se-br-wh,
1007
- var(--_ctm-tab-dn-cy-ts-wt-se-br-wh, var(--_ctm-dn-cy-ts-wt-se-br-wh))
1008
- );
1010
+ // Border only drawn when the widget's "Show Border" toggle is on. The
1011
+ // renderer emits data-show-border="true"/"" on the .category__tabs container.
1012
+ &[data-show-border="true"] {
1013
+ border-color: var(
1014
+ --_ctm-mob-dn-cy-ts-wt-se-br-cr,
1015
+ var(--_ctm-tab-dn-cy-ts-wt-se-br-cr, var(--_ctm-dn-cy-ts-wt-se-br-cr))
1016
+ );
1017
+ border-style: var(
1018
+ --_ctm-mob-dn-cy-ts-wt-se-br-se,
1019
+ var(--_ctm-tab-dn-cy-ts-wt-se-br-se, var(--_ctm-dn-cy-ts-wt-se-br-se))
1020
+ );
1021
+ border-width: var(
1022
+ --_ctm-mob-dn-cy-ts-wt-se-br-wh,
1023
+ var(--_ctm-tab-dn-cy-ts-wt-se-br-wh, var(--_ctm-dn-cy-ts-wt-se-br-wh))
1024
+ );
1025
+ }
1009
1026
  border-radius: var(
1010
1027
  --_ctm-mob-dn-cy-ts-wt-se-br-rs,
1011
1028
  var(--_ctm-tab-dn-cy-ts-wt-se-br-rs, var(--_ctm-dn-cy-ts-wt-se-br-rs))
@@ -2283,9 +2300,12 @@ $resizeActive: '[data-cms-element-resizer="true"]';
2283
2300
  gap: prepareMediaVariable(--_ctm-lt-im-gp);
2284
2301
  justify-content: space-between;
2285
2302
  background-color: prepareMediaVariable(--_ctm-dn-te-cd-dn-bd-cr);
2286
- border-width: prepareMediaVariable(--_ctm-dn-te-cd-dn-br-wh);
2287
- border-style: prepareMediaVariable(--_ctm-dn-te-cd-dn-br-se);
2288
- border-color: prepareMediaVariable(--_ctm-dn-te-cd-dn-br-cr);
2303
+ // Border only drawn when the tile card's "Show Border" toggle is on.
2304
+ &[data-show-border="true"] {
2305
+ border-width: prepareMediaVariable(--_ctm-dn-te-cd-dn-br-wh);
2306
+ border-style: prepareMediaVariable(--_ctm-dn-te-cd-dn-br-se);
2307
+ border-color: prepareMediaVariable(--_ctm-dn-te-cd-dn-br-cr);
2308
+ }
2289
2309
  border-radius: prepareMediaVariable(--_ctm-dn-te-cd-dn-br-rs);
2290
2310
  box-shadow: prepareMediaVariable(--_ctm-dn-te-cd-dn-sw-ae)
2291
2311
  prepareMediaVariable(--_ctm-dn-te-cd-dn-sw-br)
@@ -2357,22 +2377,25 @@ $resizeActive: '[data-cms-element-resizer="true"]';
2357
2377
  height: calc(prepareMediaVariable(--_ctm-lt-ie-ht) * 2);
2358
2378
 
2359
2379
  &.images-1 {
2360
- grid-template-columns: 1fr;
2361
- grid-template-rows: 1fr;
2380
+ // Single tile sits in the top-left cell at the same size as a
2381
+ // full 2x2 grid; the other three cells remain empty space.
2382
+ grid-template-columns: 1fr 1fr;
2383
+ grid-template-rows: 1fr 1fr;
2362
2384
  }
2363
2385
 
2364
2386
  &.images-2 {
2365
2387
  grid-template-columns: 1fr 1fr;
2366
- grid-template-rows: 1fr;
2388
+ // Keep the full two-row height: the two tiles stay in the top
2389
+ // row at 50% each and the bottom row remains empty space.
2390
+ grid-template-rows: 1fr 1fr;
2367
2391
  }
2368
2392
 
2369
2393
  &.images-3 {
2370
2394
  grid-template-columns: 1fr 1fr;
2371
2395
  grid-template-rows: 1fr 1fr;
2372
2396
 
2373
- .product-image-wrapper:last-child {
2374
- grid-column: 1 / -1; // span both columns
2375
- }
2397
+ // The third tile stays in a single column (50% width) like the
2398
+ // tiles above; the fourth cell is left as empty space.
2376
2399
  }
2377
2400
 
2378
2401
  &.images-4 {
@@ -2403,9 +2426,12 @@ $resizeActive: '[data-cms-element-resizer="true"]';
2403
2426
  justify-content: center;
2404
2427
  align-items: center;
2405
2428
  background-color: prepareMediaVariable(--_ctm-dn-te-cd-ie-dn-bd-cr);
2406
- border-width: prepareMediaVariable(--_ctm-dn-te-cd-ie-dn-br-wh);
2407
- border-color: prepareMediaVariable(--_ctm-dn-te-cd-ie-dn-br-cr);
2408
- border-style: prepareMediaVariable(--_ctm-dn-te-cd-ie-dn-br-se);
2429
+ // Border only drawn when the tile card image's "Show Border" toggle is on.
2430
+ &[data-show-border="true"] {
2431
+ border-width: prepareMediaVariable(--_ctm-dn-te-cd-ie-dn-br-wh);
2432
+ border-color: prepareMediaVariable(--_ctm-dn-te-cd-ie-dn-br-cr);
2433
+ border-style: prepareMediaVariable(--_ctm-dn-te-cd-ie-dn-br-se);
2434
+ }
2409
2435
  border-radius: prepareMediaVariable(--_ctm-dn-te-cd-ie-dn-br-rs);
2410
2436
  box-shadow: prepareMediaVariable(--_ctm-dn-te-cd-ie-dn-sw-ae)
2411
2437
  prepareMediaVariable(--_ctm-dn-te-cd-ie-dn-sw-br)