@sc-360-v2/storefront-cms-library 0.5.2 → 0.5.3

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 (9) hide show
  1. package/dist/dropdownTemplate.scss +1 -1
  2. package/dist/mega-menu-container.scss +103 -99
  3. package/dist/mega-menu.scss +2 -1
  4. package/dist/modal.scss +8 -1
  5. package/dist/multi-select-dropdown.scss +3 -2
  6. package/dist/order-status.scss +1 -1
  7. package/dist/product-image.scss +73 -0
  8. package/dist/quick-order-pad.scss +4 -4
  9. package/package.json +1 -1
package/dist/dropdownTemplate.scss CHANGED
@@ -22,7 +22,7 @@
22
22
  height: 40px;
23
23
  line-height: 40px;
24
24
  // outline: 2px solid var(--_base-white);
25
- border: 1px solid var(--_gray-300);
25
+ border: 1px solid var(--_thm-cs-be-se-3);
26
26
  &:focus-within {
27
27
  box-shadow: 0px 0px 0px 2px var(--_gray-100);
28
28
  }
package/dist/mega-menu-container.scss CHANGED
@@ -1,99 +1,103 @@
1
- @use "sass:map";
2
- @use "sass:list";
3
- @use "./functions.scss" as *;
4
- [data-div-type="element"] {
5
- &[data-element-type="mgContainer"] {
6
- // width: var(--_sf-con-nw-wh);
7
- // width: var(--_sf-el-wh-st-mx, calc(1% * var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh))));
8
- // width: calc(1% * var(--_ctm-mgcon-ele-nw-wh-vl, auto));
9
- // width: 100%;
10
- // height: var(--_ctm-con-lt-ht);
11
- // margin: var(--_ctm-mgcon-lt-mn, var(--_ctm-lt-mn, --_tst-lt-mn));
12
-
13
- // width: 100%;
14
- // background: var(--_ctm-mgcon-dn-bd-cr);
15
- // width: prepareMediaVariable(--_ctm-mgcon-lt-wh);
16
- width: 100vw;
17
- min-height: var(--_ctm-mgcon-lt-mn-ht);
18
- margin: prepareMediaVariable(--_ctm-mgcon-lt-mn);
19
-
20
- & > div {
21
- &.wrapper {
22
- // width: 100%;
23
- width: prepareMediaVariable(--_ctm-mgcon-lt-wh);
24
- margin-inline: auto;
25
- height: 100%;
26
- padding: var(--_ctm-mob-mgcon-lt-pg, var(--_ctm-tab-mgcon-lt-pg, var(--_ctm-mgcon-lt-pg)));
27
-
28
- background-color: var(
29
- --_ctm-mob-mgcon-dn-bd-cr,
30
- var(--_ctm-tab-mgcon-dn-bd-cr, var(--_ctm-mgcon-dn-bd-cr))
31
- );
32
- background-image: var(
33
- --_ctm-mob-mgcon-dn-bd-ie,
34
- var(--_ctm-tab-mgcon-dn-bd-ie, var(--_ctm-mgcon-dn-bd-ie))
35
- );
36
- background-attachment: var(
37
- --_ctm-mob-mgcon-dn-bd-at,
38
- var(--_ctm-tab-mgcon-dn-bd-at, var(--_ctm-mgcon-dn-bd-at))
39
- );
40
- background-position: var(
41
- --_ctm-mob-mgcon-dn-bd-pn,
42
- var(--_ctm-tab-mgcon-dn-bd-pn, var(--_ctm-mgcon-dn-bd-pn))
43
- );
44
- background-repeat: var(
45
- --_ctm-mob-mgcon-dn-bd-rt,
46
- var(--_ctm-tab-mgcon-dn-bd-rt, var(--_ctm-mgcon-dn-bd-rt))
47
- );
48
- background-size: var(
49
- --_ctm-mob-mgcon-dn-bd-se,
50
- var(--_ctm-tab-mgcon-dn-bd-se, var(--_ctm-mgcon-dn-bd-se))
51
- );
52
- border-radius: var(
53
- --_ctm-mob-mgcon-dn-br-rs,
54
- var(--_ctm-tab-mgcon-dn-br-rs, var(--_ctm-mgcon-dn-br-rs))
55
- );
56
- border-color: var(
57
- --_ctm-mob-mgcon-dn-br-cr,
58
- var(--_ctm-tab-mgcon-dn-br-cr, var(--_ctm-mgcon-dn-br-cr))
59
- );
60
- border-style: var(
61
- --_ctm-mob-mgcon-dn-br-se,
62
- var(--_ctm-tab-mgcon-dn-br-se, var(--_ctm-mgcon-dn-br-se))
63
- );
64
- border-width: var(
65
- --_ctm-mob-mgcon-dn-br-wh,
66
- var(--_ctm-tab-mgcon-dn-br-wh, var(--_ctm-mgcon-dn-br-wh))
67
- );
68
- box-shadow: prepareMediaVariable(--_ctm-mgcon-dn-sw-ae)
69
- prepareMediaVariable(--_ctm-mgcon-dn-sw-br) prepareMediaVariable(--_ctm-mgcon-dn-sw-sd)
70
- prepareMediaVariable(--_ctm-mgcon-dn-sw-cr);
71
- // box-shadow: var(
72
- // --_hover-show-shadow,
73
- // var(
74
- // --_sf-hr-bx-sw,
75
- // var(
76
- // --_show-shadow,
77
- // var(
78
- // --_ctm-mob-dn-dt-se-sw-ae,
79
- // var(--_ctm-tab-dn-dt-se-sw-ae, var(--_ctm-dn-dt-se-sw-ae))
80
- // )
81
- // var(
82
- // --_ctm-mob-dn-dt-se-sw-br,
83
- // var(--_ctm-tab-dn-dt-se-sw-br, var(--_ctm-dn-dt-se-sw-br))
84
- // )
85
- // var(
86
- // --_ctm-mob-dn-dt-se-sw-sd,
87
- // var(--_ctm-tab-dn-dt-se-sw-sd, var(--_ctm-dn-dt-se-sw-sd))
88
- // )
89
- // var(
90
- // --_ctm-mob-dn-dt-se-sw-cr,
91
- // var(--_ctm-tab-dn-dt-se-sw-cr, var(--_ctm-dn-dt-se-sw-cr))
92
- // )
93
- // )
94
- // )
95
- // );
96
- }
97
- }
98
- }
99
- }
1
+ @use "sass:map";
2
+ @use "sass:list";
3
+ @use "./functions.scss" as *;
4
+ $vtl: "[data-element-type='mega-menu'] > .vtl";
5
+ [data-div-type="element"] {
6
+ &[data-element-type="mgContainer"] {
7
+ // width: var(--_sf-con-nw-wh);
8
+ // width: var(--_sf-el-wh-st-mx, calc(1% * var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh))));
9
+ // width: calc(1% * var(--_ctm-mgcon-ele-nw-wh-vl, auto));
10
+ // width: 100%;
11
+ // height: var(--_ctm-con-lt-ht);
12
+ // margin: var(--_ctm-mgcon-lt-mn, var(--_ctm-lt-mn, --_tst-lt-mn));
13
+
14
+ // width: 100%;
15
+ // background: var(--_ctm-mgcon-dn-bd-cr);
16
+ // width: prepareMediaVariable(--_ctm-mgcon-lt-wh);
17
+ &:is(#{$vtl} *) {
18
+ --_sf-bm-gls-wdth-vl: prepareMediaVariable(--_ctm-mgcon-lt-wh);
19
+ }
20
+ width: var(--_sf-bm-gls-wdth-vl, 100vw);
21
+ min-height: var(--_ctm-mgcon-lt-mn-ht);
22
+ margin: prepareMediaVariable(--_ctm-mgcon-lt-mn);
23
+
24
+ & > div {
25
+ &.wrapper {
26
+ // width: 100%;
27
+ width: prepareMediaVariable(--_ctm-mgcon-lt-wh);
28
+ margin-inline: auto;
29
+ height: 100%;
30
+ padding: var(--_ctm-mob-mgcon-lt-pg, var(--_ctm-tab-mgcon-lt-pg, var(--_ctm-mgcon-lt-pg)));
31
+
32
+ background-color: var(
33
+ --_ctm-mob-mgcon-dn-bd-cr,
34
+ var(--_ctm-tab-mgcon-dn-bd-cr, var(--_ctm-mgcon-dn-bd-cr))
35
+ );
36
+ background-image: var(
37
+ --_ctm-mob-mgcon-dn-bd-ie,
38
+ var(--_ctm-tab-mgcon-dn-bd-ie, var(--_ctm-mgcon-dn-bd-ie))
39
+ );
40
+ background-attachment: var(
41
+ --_ctm-mob-mgcon-dn-bd-at,
42
+ var(--_ctm-tab-mgcon-dn-bd-at, var(--_ctm-mgcon-dn-bd-at))
43
+ );
44
+ background-position: var(
45
+ --_ctm-mob-mgcon-dn-bd-pn,
46
+ var(--_ctm-tab-mgcon-dn-bd-pn, var(--_ctm-mgcon-dn-bd-pn))
47
+ );
48
+ background-repeat: var(
49
+ --_ctm-mob-mgcon-dn-bd-rt,
50
+ var(--_ctm-tab-mgcon-dn-bd-rt, var(--_ctm-mgcon-dn-bd-rt))
51
+ );
52
+ background-size: var(
53
+ --_ctm-mob-mgcon-dn-bd-se,
54
+ var(--_ctm-tab-mgcon-dn-bd-se, var(--_ctm-mgcon-dn-bd-se))
55
+ );
56
+ border-radius: var(
57
+ --_ctm-mob-mgcon-dn-br-rs,
58
+ var(--_ctm-tab-mgcon-dn-br-rs, var(--_ctm-mgcon-dn-br-rs))
59
+ );
60
+ border-color: var(
61
+ --_ctm-mob-mgcon-dn-br-cr,
62
+ var(--_ctm-tab-mgcon-dn-br-cr, var(--_ctm-mgcon-dn-br-cr))
63
+ );
64
+ border-style: var(
65
+ --_ctm-mob-mgcon-dn-br-se,
66
+ var(--_ctm-tab-mgcon-dn-br-se, var(--_ctm-mgcon-dn-br-se))
67
+ );
68
+ border-width: var(
69
+ --_ctm-mob-mgcon-dn-br-wh,
70
+ var(--_ctm-tab-mgcon-dn-br-wh, var(--_ctm-mgcon-dn-br-wh))
71
+ );
72
+ box-shadow: prepareMediaVariable(--_ctm-mgcon-dn-sw-ae)
73
+ prepareMediaVariable(--_ctm-mgcon-dn-sw-br) prepareMediaVariable(--_ctm-mgcon-dn-sw-sd)
74
+ prepareMediaVariable(--_ctm-mgcon-dn-sw-cr);
75
+ // box-shadow: var(
76
+ // --_hover-show-shadow,
77
+ // var(
78
+ // --_sf-hr-bx-sw,
79
+ // var(
80
+ // --_show-shadow,
81
+ // var(
82
+ // --_ctm-mob-dn-dt-se-sw-ae,
83
+ // var(--_ctm-tab-dn-dt-se-sw-ae, var(--_ctm-dn-dt-se-sw-ae))
84
+ // )
85
+ // var(
86
+ // --_ctm-mob-dn-dt-se-sw-br,
87
+ // var(--_ctm-tab-dn-dt-se-sw-br, var(--_ctm-dn-dt-se-sw-br))
88
+ // )
89
+ // var(
90
+ // --_ctm-mob-dn-dt-se-sw-sd,
91
+ // var(--_ctm-tab-dn-dt-se-sw-sd, var(--_ctm-dn-dt-se-sw-sd))
92
+ // )
93
+ // var(
94
+ // --_ctm-mob-dn-dt-se-sw-cr,
95
+ // var(--_ctm-tab-dn-dt-se-sw-cr, var(--_ctm-dn-dt-se-sw-cr))
96
+ // )
97
+ // )
98
+ // )
99
+ // );
100
+ }
101
+ }
102
+ }
103
+ }
package/dist/mega-menu.scss CHANGED
@@ -405,7 +405,8 @@ $defaultValues: (
405
405
  left: 100%; // Need to Integrate top value
406
406
 
407
407
  &:is(#{$mgc}) {
408
- top: var(--_sf-mg-dm-ps-vl, 0px);
408
+ // top: var(--_sf-mg-dm-ps-vl, 0px);
409
+ top: 0px;
409
410
  }
410
411
  }
411
412
 
package/dist/modal.scss CHANGED
@@ -426,7 +426,7 @@ $input-height: 32px;
426
426
  $input-padding: 10px 12px;
427
427
 
428
428
  // Z-Index
429
- $z-index-modal: calc(var(--_higher-zIndex) + var(--_cs-et-zIndex) + 10);
429
+ $z-index-modal: calc(var(--_higher-zIndex) + var(--_cs-et-zIndex, 10) + 10);
430
430
  $z-index-backdrop: calc(var(--_higher-zIndex) + var(--_cs-et-zIndex) + 11);
431
431
  $z-index-wrapper: calc(var(--_higher-zIndex) + var(--_cs-et-zIndex) + 9);
432
432
  $z-index-minimized: calc(var(--_higher-zIndex) + var(--_cs-et-zIndex) + 12);
@@ -2146,6 +2146,13 @@ $shadow-md: 0 8px 20px rgba(0, 0, 0, 0.1);
2146
2146
  gap: 16px;
2147
2147
  }
2148
2148
 
2149
+ &.no-cart-btn {
2150
+ .min-toolbar {
2151
+ border-radius: $radius;
2152
+ padding-inline-end: 12px;
2153
+ }
2154
+ }
2155
+
2149
2156
  &.active {
2150
2157
  display: flex;
2151
2158
  background-color: var(--_base-white);
package/dist/multi-select-dropdown.scss CHANGED
@@ -96,7 +96,7 @@ $msd-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
96
96
  &:hover {
97
97
  // border: 1px solid var(--_gray-300);
98
98
  background-color: var(--_base-white);
99
- padding: 5px 10px;
99
+ // padding: 5px 10px;
100
100
  svg path {
101
101
  stroke: var(--_gray-900);
102
102
  }
@@ -107,6 +107,8 @@ $msd-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
107
107
  background-color: transparent;
108
108
  border: none !important;
109
109
  border-radius: 0px !important;
110
+ max-width: 270px;
111
+ min-width: 150px;
110
112
  }
111
113
  }
112
114
  }
@@ -121,7 +123,6 @@ $msd-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
121
123
  white-space: normal;
122
124
  word-break: break-all;
123
125
  overflow: hidden;
124
- max-width: 220px;
125
126
  }
126
127
 
127
128
  .msd__input {
package/dist/order-status.scss CHANGED
@@ -1999,7 +1999,7 @@ $defaultValues: (
1999
1999
  .breakup-item {
2000
2000
  display: flex;
2001
2001
  justify-content: space-between;
2002
- gap: 6px;
2002
+ gap: 12px;
2003
2003
  white-space: nowrap;
2004
2004
  .breakup-label {
2005
2005
  line-height: prepareMediaVariable(--_ctm-dn-or-io-bk-up-ds-le-ht);
package/dist/product-image.scss CHANGED
@@ -2,6 +2,11 @@
2
2
  @use "sass:list";
3
3
  @use "./functions.scss" as *;
4
4
 
5
+ $defaultValues: (
6
+ --_sf-mgn-wdth-vl: getListOfResponsive(1117px, 340px, 747px),
7
+ --_sf-mgn-height-vl: getListOfResponsive(1400px, 700px, 1040px),
8
+ );
9
+
5
10
  [data-div-type="element"] {
6
11
  &[data-element-type="productImage"] {
7
12
  // width: var(--_sf-nw-wh, var(--_tst-lt-wh));
@@ -1302,6 +1307,10 @@
1302
1307
  var(--_sf-sd-sw-cr, prepareMediaVariable(--_ctm-dn-tl-se-dt-se-sw-cr));
1303
1308
  }
1304
1309
 
1310
+ & > div {
1311
+ height: 100%;
1312
+ }
1313
+
1305
1314
  & img {
1306
1315
  width: 100%;
1307
1316
  height: 100%;
@@ -1316,6 +1325,9 @@
1316
1325
  img[data-has-link="true"] {
1317
1326
  cursor: pointer;
1318
1327
  }
1328
+ img[data-zoom="true"] {
1329
+ cursor: zoom-in;
1330
+ }
1319
1331
  width: 100%;
1320
1332
  max-width: 100%;
1321
1333
  height: 100%;
@@ -1636,3 +1648,64 @@
1636
1648
  }
1637
1649
  }
1638
1650
  }
1651
+
1652
+ // Product Magnifier
1653
+ .pim__main {
1654
+ position: var(--_p-fixed);
1655
+ inset: 0 0 0 0;
1656
+ background: rgba(0, 0, 0, 0.3);
1657
+ z-index: calc(var(--_higher-zIndex, 9999) + 24);
1658
+
1659
+ display: var(--_d-flex);
1660
+ align-items: center;
1661
+ justify-content: center;
1662
+ @include prepareMediaQueries($defaultValues);
1663
+
1664
+ & > .pim__wrapper {
1665
+ display: var(--_d-flex);
1666
+ align-items: center;
1667
+ justify-content: center;
1668
+ background: #fff;
1669
+ max-width: var(--_sf-mgn-wdth-vl, 1140px);
1670
+ height: 100dvh;
1671
+ overflow: clip;
1672
+ border: 1px solid #98a2b3;
1673
+ position: relative;
1674
+
1675
+ & > button {
1676
+ position: absolute;
1677
+ right: 20px;
1678
+ top: 20px;
1679
+ width: 40px;
1680
+ height: 40px;
1681
+ border-radius: 50%;
1682
+ background: #fff;
1683
+ z-index: 2;
1684
+
1685
+ display: var(--_d-flex);
1686
+ align-items: center;
1687
+ justify-content: center;
1688
+
1689
+ svg {
1690
+ width: 18px;
1691
+ height: 18px;
1692
+ path {
1693
+ color: #000;
1694
+ }
1695
+ }
1696
+ }
1697
+
1698
+ .pim__img__main {
1699
+ width: 100%;
1700
+ height: 100%;
1701
+
1702
+ & > .pim__img__wrapper {
1703
+ height: 100%;
1704
+ }
1705
+
1706
+ img {
1707
+ max-width: 100%;
1708
+ }
1709
+ }
1710
+ }
1711
+ }
package/dist/quick-order-pad.scss CHANGED
@@ -192,7 +192,7 @@ $input-padding: 10px 12px;
192
192
  .product_qty_price_wrapper {
193
193
  display: flex;
194
194
  justify-content: space-between;
195
- align-items: center;
195
+ align-items: flex-start;
196
196
  align-self: start;
197
197
  padding-block-start: 3px;
198
198
 
@@ -202,7 +202,7 @@ $input-padding: 10px 12px;
202
202
  flex-direction: column;
203
203
  align-items: flex-start;
204
204
  gap: 6px;
205
- width: 113px;
205
+ width: 125px;
206
206
 
207
207
  .product_qty_container {
208
208
  display: flex;
@@ -235,7 +235,7 @@ $input-padding: 10px 12px;
235
235
  height: 40px;
236
236
  display: flex;
237
237
  position: relative;
238
- width: 55px;
238
+ width: 75px;
239
239
  border-radius: 0px 4px 4px 0px;
240
240
  background: #fff;
241
241
  border-left: 1px solid var(--_thm-cs-be-se-3);
@@ -571,7 +571,7 @@ $input-padding: 10px 12px;
571
571
  }
572
572
 
573
573
  .product_actions_wrapper {
574
- padding-block: 12px;
574
+ padding-block: 5px;
575
575
  display: flex;
576
576
  justify-content: center;
577
577
  align-items: center;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sc-360-v2/storefront-cms-library",
3
- "version": "0.5.02",
3
+ "version": "0.5.03",
4
4
  "main": "/dist/index.js",
5
5
  "types": "./dist/index.d.ts",
6
6
  "exports": {