@sc-360-v2/storefront-cms-library 0.2.97 → 0.2.99

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 (33) hide show
  1. package/dist/amount-estimator.scss +291 -226
  2. package/dist/builder.js +1 -1
  3. package/dist/button.scss +1 -1
  4. package/dist/buy-for-tab.scss +8 -7
  5. package/dist/cartDropdownOverlay.scss +0 -13
  6. package/dist/faq.scss +20 -24
  7. package/dist/icon-list.scss +76 -13
  8. package/dist/icons.js +1 -1
  9. package/dist/index.js +1 -1
  10. package/dist/map.scss +35 -35
  11. package/dist/menu-item.scss +19 -0
  12. package/dist/menu-v2.scss +695 -0
  13. package/dist/order-status.scss +483 -0
  14. package/dist/pickup-locations.scss +22 -19
  15. package/dist/product-options.scss +118 -76
  16. package/dist/quick-links.scss +186 -143
  17. package/dist/quotes.scss +1 -0
  18. package/dist/repeater-item.scss +1 -0
  19. package/dist/section.scss +29 -78
  20. package/dist/stack.scss +16 -61
  21. package/dist/store-locations.scss +21 -20
  22. package/dist/tab-v2.scss +8 -7
  23. package/dist/table-common.scss +510 -0
  24. package/dist/types/builder/tools/element-edit/amountEstimator.d.ts +6 -1
  25. package/dist/types/builder/tools/element-edit/icon-list.d.ts +73 -7
  26. package/dist/types/builder/tools/element-edit/menu_v2.d.ts +4 -0
  27. package/dist/types/builder/tools/element-edit/paymentMethods.d.ts +94 -1
  28. package/dist/uom-selector.scss +929 -1416
  29. package/dist/variant-picker.scss +416 -68
  30. package/dist/volume-pricing copy.scss +1092 -0
  31. package/dist/volume-pricing.scss +1007 -606
  32. package/dist/widget.scss +3 -0
  33. package/package.json +1 -1
package/dist/button.scss CHANGED
@@ -23,7 +23,7 @@
23
23
 
24
24
  & > .wrapper {
25
25
  // width: 100%;
26
- // height: 100%;
26
+ height: 100%;
27
27
  }
28
28
 
29
29
  &[data-show-shadow="false"] {
package/dist/buy-for-tab.scss CHANGED
@@ -446,15 +446,16 @@ $tabBodyWrapper: #{$tabBody}__wrapper;
446
446
  // width: max-content;
447
447
 
448
448
  font-family: var(
449
- --_sf-buy-sd-ft-fy,
450
- var(
451
- --_sf-buy-hr-ft-fy,
449
+ --_sf-buy-sd-ft-fy,
452
450
  var(
453
- --_ctm-mob-buy-dn-ts-dt-se-ft-fy,
454
- var(--_ctm-tab-buy-dn-ts-dt-se-ft-fy, var(--_ctm-buy-dn-ts-dt-se-ft-fy))
451
+ --_sf-buy-hr-ft-fy,
452
+ var(
453
+ --_ctm-mob-buy-dn-ts-dt-se-ft-fy,
454
+ var(--_ctm-tab-buy-dn-ts-dt-se-ft-fy, var(--_ctm-buy-dn-ts-dt-se-ft-fy))
455
+ )
455
456
  )
456
- )
457
- );
457
+ ),
458
+ sans-serif;
458
459
  font-size: var(
459
460
  --_sf-buy-sd-ft-sz,
460
461
  var(
package/dist/cartDropdownOverlay.scss CHANGED
@@ -125,16 +125,3 @@ $button-padding: 6px 12px;
125
125
  margin-bottom: 8px;
126
126
  }
127
127
  }
128
-
129
- // .overlay-panel {
130
- // background: white;
131
- // border: 1px solid #ccc;
132
- // box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.1);
133
- // border-radius: 6px;
134
- // padding: 10px;
135
- // max-height: 300px;
136
- // overflow-y: auto;
137
- // transition:
138
- // opacity 0.2s ease,
139
- // transform 0.2s ease;
140
- // }
package/dist/faq.scss CHANGED
@@ -97,14 +97,14 @@
97
97
  --_sf-show-icon-ff: none;
98
98
  }
99
99
  &[data-divider-show="true"] {
100
- .accordion-item:not(:last-child) {
101
- border-bottom: var(
102
- --_ctm-mob-dn-dr-dr-wh,
103
- var(--_ctm-tab-dn-dr-dr-wh, var(--_ctm-dn-dr-dr-wh))
104
- )
105
- var(--_ctm-mob-dn-dr-br-se, var(--_ctm-tab-dn-dr-br-se, var(--_ctm-dn-dr-br-se)))
106
- var(--_ctm-mob-dn-dr-br-cr, var(--_ctm-tab-dn-dr-br-cr, var(--_ctm-dn-dr-br-cr)));
107
- }
100
+ // .accordion-item:not(:last-child) {
101
+ // border-bottom: var(
102
+ // --_ctm-mob-dn-dr-dr-wh,
103
+ // var(--_ctm-tab-dn-dr-dr-wh, var(--_ctm-dn-dr-dr-wh))
104
+ // )
105
+ // var(--_ctm-mob-dn-dr-br-se, var(--_ctm-tab-dn-dr-br-se, var(--_ctm-dn-dr-br-se)))
106
+ // var(--_ctm-mob-dn-dr-br-cr, var(--_ctm-tab-dn-dr-br-cr, var(--_ctm-dn-dr-br-cr)));
107
+ // }
108
108
  }
109
109
  }
110
110
 
@@ -113,12 +113,12 @@
113
113
  display: grid;
114
114
  overflow: clip;
115
115
  // height: 30px;
116
- gap: var(
117
- --_ctm-mob-lt-te-ad-dn-sg,
118
- var(--_ctm-tab-lt-te-ad-dn-sg, var(--_ctm-lt-te-ad-dn-sg))
119
- );
120
116
 
121
- padding-block: var(--_ctm-lt-im-vl-pg, var(--_tst-lt-im-vl-pg));
117
+ // padding-block: var(--_ctm-lt-im-vl-pg, var(--_tst-lt-im-vl-pg));
118
+ // padding-inline: var(
119
+ // --_ctm-mob-lt-im-hl-pg,
120
+ // var(--_ctm-tab-lt-im-hl-pg, var(--_ctm-lt-im-hl-pg))
121
+ // );
122
122
 
123
123
  grid-template-rows: var(
124
124
  --_self-active-gtr,
@@ -189,15 +189,11 @@
189
189
  align-items: center;
190
190
  justify-content: var(--_sf-jc, space-between);
191
191
  cursor: pointer;
192
- padding-block-end: var(--_sf-dc-pd, var(--_sf-pd-cd));
192
+ // padding-block-end: var(--_sf-dc-pd, var(--_sf-pd-cd));
193
193
  background-color: var(
194
194
  --_ctm-mob-dn-cd-an-im-bd-cr,
195
195
  var(--_ctm-tab-dn-cd-an-im-bd-cr, var(--_ctm-dn-cd-an-im-bd-cr))
196
196
  );
197
- padding-inline: var(
198
- --_ctm-mob-lt-im-hl-pg,
199
- var(--_ctm-tab-lt-im-hl-pg, var(--_ctm-lt-im-hl-pg))
200
- );
201
197
 
202
198
  p {
203
199
  // padding-inline: var(--_sf-cd-gp);
@@ -281,6 +277,10 @@
281
277
  &[data-state="open"] {
282
278
  // overflow: inherit;
283
279
  // height: auto;
280
+ gap: var(
281
+ --_ctm-mob-lt-te-ad-dn-sg,
282
+ var(--_ctm-tab-lt-te-ad-dn-sg, var(--_ctm-lt-te-ad-dn-sg))
283
+ );
284
284
 
285
285
  --_self-active-gtr: minmax(
286
286
  var(
@@ -339,7 +339,7 @@
339
339
  align-items: center;
340
340
  justify-content: var(--_sf-jc, space-between);
341
341
  cursor: pointer;
342
- padding-block-end: var(--_sf-dc-pd, var(--_sf-pd-cd));
342
+ // padding-block-end: var(--_sf-dc-pd, var(--_sf-pd-cd));
343
343
  background-color: var(
344
344
  --_ctm-mob-dn-ed-an-im-bd-cr,
345
345
  var(--_ctm-tab-dn-ed-an-im-bd-cr, var(--_ctm-dn-ed-an-im-bd-cr))
@@ -412,15 +412,11 @@
412
412
  }
413
413
  .accordion-description {
414
414
  display: block;
415
- padding-block-end: var(--_sf-dc-pd-bt);
415
+ // padding-block-end: var(--_sf-dc-pd-bt);
416
416
  background-color: var(
417
417
  --_ctm-mob-dn-ed-an-im-bd-cr-dc,
418
418
  var(--_ctm-tab-dn-ed-an-im-bd-cr-dc, var(--_ctm-dn-ed-an-im-bd-cr-dc))
419
419
  );
420
- padding-inline: var(
421
- --_ctm-mob-lt-im-hl-pg,
422
- var(--_ctm-tab-lt-im-hl-pg, var(--_ctm-lt-im-hl-pg))
423
- );
424
420
 
425
421
  p {
426
422
  color: var(
package/dist/icon-list.scss CHANGED
@@ -5,6 +5,20 @@
5
5
  $item: "flex__icon_list_item";
6
6
  $icon: "flex__ili_span_icn";
7
7
  $text: "flex__ili_span_txt";
8
+ $textContaner: "flex__ili__container";
9
+ $desc: "flex__ili__description";
10
+ $pos: (
11
+ start: (
12
+ top: 0px,
13
+ ),
14
+ center: (
15
+ top: 50%,
16
+ transform: translateY(-50%),
17
+ ),
18
+ end: (
19
+ bottom: 0,
20
+ ),
21
+ );
8
22
  [data-div-type="element"] {
9
23
  &[data-element-type="icon-list"] {
10
24
  & > .wrapper {
@@ -88,20 +102,69 @@ $text: "flex__ili_span_txt";
88
102
  }
89
103
  }
90
104
 
91
- & > .#{$text} {
92
- font-family: var(--_txt-ht-ff, prepareMediaVariable(--_ctm-dn-tt-dt-se-ft-fy));
93
- font-size: var(--_txt-ht-fs, prepareMediaVariable(--_ctm-dn-tt-dt-se-ft-se));
94
- color: var(--_txt-ht-cr, prepareMediaVariable(--_ctm-dn-tt-dt-se-cr));
95
- font-weight: var(--_txt-ht-fw, prepareMediaVariable(--_ctm-dn-tt-dt-se-ft-wt));
96
- text-decoration: var(--_txt-ht-td, prepareMediaVariable(--_ctm-dn-tt-dt-se-ue));
97
- font-style: var(--_txt-ht-fst, prepareMediaVariable(--_ctm-dn-tt-dt-se-ft-se-ic));
98
- text-align: var(--_txt-ht-tl, prepareMediaQueries(--_ctm-dn-tt-dt-se-tt-an));
99
- letter-spacing: var(--_txt-ht-ls, prepareMediaQueries(--_ctm-dn-tt-dt-se-lr-sg));
100
- line-height: var(--_txt-ht-lt, prepareMediaQueries(--_ctm-dn-tt-dt-se-le-ht));
105
+ & > div {
106
+ &.#{$textContaner} {
107
+ display: var(--_d-flex);
108
+ flex-direction: column;
109
+ padding: prepareMediaVariable(--_ctm-dn-tt-cr-pg);
110
+ row-gap: prepareMediaVariable(--_ctm-dn-tt-cr-im-gp);
111
+ &[data-show-divider="true"] {
112
+ margin-inline-start: calc(
113
+ #{prepareMediaVariable(--_ctm-dn-lt-lt-gp)} + #{prepareMediaVariable(
114
+ --_ctm-dn-lt-dr-wt
115
+ )}
116
+ );
117
+ position: relative;
118
+ @each $key, $value in $pos {
119
+ &[data-divider-pos="#{$key}"] {
120
+ &::before {
121
+ @each $key1, $value1 in $value {
122
+ #{$key1}: #{$value1};
123
+ }
124
+ }
125
+ }
126
+ }
127
+ &::before {
128
+ content: "";
129
+ background: prepareMediaVariable(--_ctm-dn-tt-cr-dr-cr);
130
+ position: absolute;
131
+ left: calc(
132
+ -1 * calc(#{prepareMediaVariable(--_ctm-dn-lt-lt-gp)} + #{prepareMediaVariable(
133
+ --_ctm-dn-lt-dr-wt
134
+ )})
135
+ );
136
+ width: prepareMediaVariable(--_ctm-dn-tt-cr-dr-wt);
137
+ height: prepareMediaVariable(--_ctm-dn-tt-cr-dr-wh);
138
+ }
139
+ }
140
+ & > .#{$text} {
141
+ font-family: var(--_txt-ht-ff, prepareMediaVariable(--_ctm-dn-tt-dt-se-ft-fy)),
142
+ sans-serif;
143
+ font-size: var(--_txt-ht-fs, prepareMediaVariable(--_ctm-dn-tt-dt-se-ft-se));
144
+ color: var(--_txt-ht-cr, prepareMediaVariable(--_ctm-dn-tt-dt-se-cr));
145
+ font-weight: var(--_txt-ht-fw, prepareMediaVariable(--_ctm-dn-tt-dt-se-ft-wt));
146
+ text-decoration: var(--_txt-ht-td, prepareMediaVariable(--_ctm-dn-tt-dt-se-ue));
147
+ font-style: var(--_txt-ht-fst, prepareMediaVariable(--_ctm-dn-tt-dt-se-ft-se-ic));
148
+ text-align: var(--_txt-ht-tl, prepareMediaQueries(--_ctm-dn-tt-dt-se-tt-an));
149
+ letter-spacing: var(--_txt-ht-ls, prepareMediaQueries(--_ctm-dn-tt-dt-se-lr-sg));
150
+ line-height: var(--_txt-ht-lt, prepareMediaQueries(--_ctm-dn-tt-dt-se-le-ht));
151
+ }
101
152
 
102
- a {
103
- color: inherit;
104
- text-decoration: none;
153
+ & > .#{$desc} {
154
+ font-family: prepareMediaVariable(--_ctm-dn-tt-dt-se-ft-fy), sans-serif;
155
+ font-size: prepareMediaVariable(--_ctm-dn-tt-dt-se-ft-se);
156
+ color: prepareMediaVariable(--_ctm-dn-tt-dt-se-cr);
157
+ font-weight: prepareMediaVariable(--_ctm-dn-tt-dt-se-ft-wt);
158
+ text-decoration: prepareMediaVariable(--_ctm-dn-tt-dt-se-ue);
159
+ font-style: prepareMediaVariable(--_ctm-dn-tt-dt-se-ft-se-ic);
160
+ text-align: prepareMediaQueries(--_ctm-dn-tt-dt-se-tt-an);
161
+ letter-spacing: prepareMediaQueries(--_ctm-dn-tt-dt-se-lr-sg);
162
+ line-height: prepareMediaQueries(--_ctm-dn-tt-dt-se-le-ht);
163
+ }
164
+ a {
165
+ color: inherit;
166
+ text-decoration: none;
167
+ }
105
168
  }
106
169
  }
107
170
  }