@sc-360-v2/storefront-cms-library 0.3.38 → 0.3.39

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 (35) hide show
  1. package/dist/add-products-tab.scss +388 -0
  2. package/dist/badge.scss +84 -82
  3. package/dist/builder.js +1 -1
  4. package/dist/bulk-order-pad.scss +29 -34
  5. package/dist/cart-details.scss +54 -57
  6. package/dist/cart-products-sidebar.scss +113 -83
  7. package/dist/cartAttributes.scss +180 -183
  8. package/dist/cartDropdownOverlay.scss +49 -27
  9. package/dist/checkout.scss +127 -38
  10. package/dist/customization-tree.scss +42 -10
  11. package/dist/dropdownTemplate.scss +35 -25
  12. package/dist/employee-bulk-order.scss +219 -47
  13. package/dist/empty-states.scss +66 -66
  14. package/dist/functions.scss +7 -5
  15. package/dist/icons.js +1 -1
  16. package/dist/index.js +1 -1
  17. package/dist/item-stock.scss +27 -28
  18. package/dist/menu-v2.scss +2 -2
  19. package/dist/modal.scss +104 -75
  20. package/dist/past-orders.scss +272 -258
  21. package/dist/payment-methods.scss +70 -71
  22. package/dist/prefix-list.scss +1 -0
  23. package/dist/product-actions.scss +68 -68
  24. package/dist/product-sizechart.scss +13 -13
  25. package/dist/quick-links.scss +47 -48
  26. package/dist/quick-order-pad.scss +51 -51
  27. package/dist/quotes.scss +118 -116
  28. package/dist/rfqs.scss +118 -116
  29. package/dist/types/builder/elements/add-products-tab/index.d.ts +46 -0
  30. package/dist/types/builder/enums/index.d.ts +2 -0
  31. package/dist/types/builder/index.d.ts +2 -1
  32. package/dist/types/builder/tools/element-edit/addProductsTab.d.ts +418 -0
  33. package/dist/types/builder/tools/element-edit/index.d.ts +2 -1
  34. package/dist/widget.scss +1 -0
  35. package/package.json +1 -1
package/dist/quotes.scss CHANGED
@@ -1,8 +1,6 @@
1
1
  @use "sass:map";
2
2
  @use "sass:list";
3
- @function ctm-var($base) {
4
- @return unquote("var(--_ctm-mob-#{$base}, var(--_ctm-tab-#{$base}, var(--_ctm-#{$base})))");
5
- }
3
+ @use "./functions.scss" as *;
6
4
 
7
5
  $resizerId: "[data-cms-tool='cms-element-resizer']";
8
6
  $resizeActive: '[data-cms-element-resizer="true"]';
@@ -51,22 +49,22 @@ $resizeActive: '[data-cms-element-resizer="true"]';
51
49
  //border: 1px solid var(--_primary-100);
52
50
  //background: #fff;
53
51
  width: 349px;
54
- font-family: ctm-var(dn-wt-se-ft-fy);
55
- font-size: ctm-var(dn-wt-se-ft-se);
56
- color: ctm-var(dn-wt-se-cr);
57
- font-weight: ctm-var(dn-wt-se-ft-wt);
58
- font-style: ctm-var(dn-wt-se-ft-se-ic);
59
- text-decoration: ctm-var(dn-wt-se-ue);
60
- text-align: ctm-var(dn-wt-se-tt-an);
61
- letter-spacing: ctm-var(dn-wt-se-lr-sg);
62
- line-height: ctm-var(dn-wt-se-le-ht);
63
- background-color: ctm-var(dn-wt-se-bd-cr);
64
- border-width: ctm-var(dn-wt-se-br-wh);
65
- border-color: ctm-var(dn-wt-se-br-cr);
66
- border-style: ctm-var(dn-wt-se-br-se);
67
- border-radius: ctm-var(dn-wt-se-br-rs);
68
- box-shadow: ctm-var(dn-wt-se-sw-ae) ctm-var(dn-wt-se-sw-br) ctm-var(dn-wt-se-sw-sd)
69
- ctm-var(dn-wt-se-sw-cr);
52
+ font-family: prepareMediaVariable(dn-wt-se-ft-fy);
53
+ font-size: prepareMediaVariable(dn-wt-se-ft-se);
54
+ color: prepareMediaVariable(dn-wt-se-cr);
55
+ font-weight: prepareMediaVariable(dn-wt-se-ft-wt);
56
+ font-style: prepareMediaVariable(dn-wt-se-ft-se-ic);
57
+ text-decoration: prepareMediaVariable(dn-wt-se-ue);
58
+ text-align: prepareMediaVariable(dn-wt-se-tt-an);
59
+ letter-spacing: prepareMediaVariable(dn-wt-se-lr-sg);
60
+ line-height: prepareMediaVariable(dn-wt-se-le-ht);
61
+ background-color: prepareMediaVariable(dn-wt-se-bd-cr);
62
+ border-width: prepareMediaVariable(dn-wt-se-br-wh);
63
+ border-color: prepareMediaVariable(dn-wt-se-br-cr);
64
+ border-style: prepareMediaVariable(dn-wt-se-br-se);
65
+ border-radius: prepareMediaVariable(dn-wt-se-br-rs);
66
+ box-shadow: prepareMediaVariable(dn-wt-se-sw-ae) prepareMediaVariable(dn-wt-se-sw-br)
67
+ prepareMediaVariable(dn-wt-se-sw-sd) prepareMediaVariable(dn-wt-se-sw-cr);
70
68
  .quotes_card {
71
69
  display: flex;
72
70
  flex-direction: column;
@@ -87,15 +85,15 @@ $resizeActive: '[data-cms-element-resizer="true"]';
87
85
  // font-size: 20px;
88
86
  // font-weight: 600;
89
87
  // line-height: 30px;
90
- font-family: ctm-var(dn-wt-se-ft-fy);
91
- font-size: ctm-var(dn-wt-se-ft-se);
92
- color: ctm-var(dn-wt-se-cr);
93
- font-weight: ctm-var(dn-wt-se-ft-wt);
94
- font-style: ctm-var(dn-wt-se-ft-se-ic);
95
- text-decoration: ctm-var(dn-wt-se-ue);
96
- text-align: ctm-var(dn-wt-se-tt-an);
97
- letter-spacing: ctm-var(dn-wt-se-lr-sg);
98
- line-height: ctm-var(dn-wt-se-le-ht);
88
+ font-family: prepareMediaVariable(dn-wt-se-ft-fy);
89
+ font-size: prepareMediaVariable(dn-wt-se-ft-se);
90
+ color: prepareMediaVariable(dn-wt-se-cr);
91
+ font-weight: prepareMediaVariable(dn-wt-se-ft-wt);
92
+ font-style: prepareMediaVariable(dn-wt-se-ft-se-ic);
93
+ text-decoration: prepareMediaVariable(dn-wt-se-ue);
94
+ text-align: prepareMediaVariable(dn-wt-se-tt-an);
95
+ letter-spacing: prepareMediaVariable(dn-wt-se-lr-sg);
96
+ line-height: prepareMediaVariable(dn-wt-se-le-ht);
99
97
  }
100
98
  }
101
99
 
@@ -107,13 +105,13 @@ $resizeActive: '[data-cms-element-resizer="true"]';
107
105
  align-self: stretch;
108
106
  //border-radius: 0px 0px 6px 6px;
109
107
 
110
- background-color: ctm-var(dn-im-se-bd-cr);
111
- border-width: ctm-var(dn-im-se-br-wh);
112
- border-color: ctm-var(dn-im-se-br-cr);
113
- border-style: ctm-var(dn-im-se-br-se);
114
- border-radius: ctm-var(dn-im-se-br-rs);
115
- box-shadow: ctm-var(dn-im-se-sw-ae) ctm-var(dn-im-se-sw-br) ctm-var(dn-im-se-sw-sd)
116
- ctm-var(dn-im-se-sw-cr);
108
+ background-color: prepareMediaVariable(dn-im-se-bd-cr);
109
+ border-width: prepareMediaVariable(dn-im-se-br-wh);
110
+ border-color: prepareMediaVariable(dn-im-se-br-cr);
111
+ border-style: prepareMediaVariable(dn-im-se-br-se);
112
+ border-radius: prepareMediaVariable(dn-im-se-br-rs);
113
+ box-shadow: prepareMediaVariable(dn-im-se-sw-ae) prepareMediaVariable(dn-im-se-sw-br)
114
+ prepareMediaVariable(dn-im-se-sw-sd) prepareMediaVariable(dn-im-se-sw-cr);
117
115
 
118
116
  .content {
119
117
  display: flex;
@@ -124,15 +122,15 @@ $resizeActive: '[data-cms-element-resizer="true"]';
124
122
  gap: 12px;
125
123
  flex: 1 0 0;
126
124
  align-self: stretch;
127
- font-family: ctm-var(dn-im-se-ft-fy);
128
- font-size: ctm-var(dn-im-se-ft-se);
129
- color: ctm-var(dn-im-se-cr);
130
- font-weight: ctm-var(dn-im-se-ft-wt);
131
- font-style: ctm-var(dn-im-se-ft-se-ic);
132
- text-decoration: ctm-var(dn-im-se-ue);
133
- text-align: ctm-var(dn-im-se-tt-an);
134
- letter-spacing: ctm-var(dn-im-se-lr-sg);
135
- line-height: ctm-var(dn-im-se-le-ht);
125
+ font-family: prepareMediaVariable(dn-im-se-ft-fy);
126
+ font-size: prepareMediaVariable(dn-im-se-ft-se);
127
+ color: prepareMediaVariable(dn-im-se-cr);
128
+ font-weight: prepareMediaVariable(dn-im-se-ft-wt);
129
+ font-style: prepareMediaVariable(dn-im-se-ft-se-ic);
130
+ text-decoration: prepareMediaVariable(dn-im-se-ue);
131
+ text-align: prepareMediaVariable(dn-im-se-tt-an);
132
+ letter-spacing: prepareMediaVariable(dn-im-se-lr-sg);
133
+ line-height: prepareMediaVariable(dn-im-se-le-ht);
136
134
 
137
135
  .metric_wrapper {
138
136
  display: flex;
@@ -147,22 +145,23 @@ $resizeActive: '[data-cms-element-resizer="true"]';
147
145
  // font-size: 14px;
148
146
  // font-weight: 600;
149
147
  // line-height: 20px;
150
- font-family: ctm-var(dn-qe-id-ft-fy);
151
- font-size: ctm-var(dn-qe-id-ft-se);
152
- color: ctm-var(dn-qe-id-cr);
153
- font-weight: ctm-var(dn-qe-id-ft-wt);
154
- font-style: ctm-var(dn-qe-id-ft-se-ic);
155
- text-decoration: ctm-var(dn-qe-id-ue);
156
- text-align: ctm-var(dn-qe-id-tt-an);
157
- letter-spacing: ctm-var(dn-qe-id-lr-sg);
158
- line-height: ctm-var(dn-qe-id-le-ht);
159
- background-color: ctm-var(dn-qe-id-bd-cr);
160
- border-width: ctm-var(dn-qe-id-br-wh);
161
- border-color: ctm-var(dn-qe-id-br-cr);
162
- border-style: ctm-var(dn-qe-id-br-se);
163
- border-radius: ctm-var(dn-qe-id-br-rs);
164
- box-shadow: ctm-var(dn-qe-id-sw-ae) ctm-var(dn-qe-id-sw-br) ctm-var(dn-qe-id-sw-sd)
165
- ctm-var(dn-qe-id-sw-cr);
148
+ font-family: prepareMediaVariable(dn-qe-id-ft-fy);
149
+ font-size: prepareMediaVariable(dn-qe-id-ft-se);
150
+ color: prepareMediaVariable(dn-qe-id-cr);
151
+ font-weight: prepareMediaVariable(dn-qe-id-ft-wt);
152
+ font-style: prepareMediaVariable(dn-qe-id-ft-se-ic);
153
+ text-decoration: prepareMediaVariable(dn-qe-id-ue);
154
+ text-align: prepareMediaVariable(dn-qe-id-tt-an);
155
+ letter-spacing: prepareMediaVariable(dn-qe-id-lr-sg);
156
+ line-height: prepareMediaVariable(dn-qe-id-le-ht);
157
+ background-color: prepareMediaVariable(dn-qe-id-bd-cr);
158
+ border-width: prepareMediaVariable(dn-qe-id-br-wh);
159
+ border-color: prepareMediaVariable(dn-qe-id-br-cr);
160
+ border-style: prepareMediaVariable(dn-qe-id-br-se);
161
+ border-radius: prepareMediaVariable(dn-qe-id-br-rs);
162
+ box-shadow: prepareMediaVariable(dn-qe-id-sw-ae)
163
+ prepareMediaVariable(dn-qe-id-sw-br) prepareMediaVariable(dn-qe-id-sw-sd)
164
+ prepareMediaVariable(dn-qe-id-sw-cr);
166
165
  }
167
166
 
168
167
  .status_badge {
@@ -173,28 +172,29 @@ $resizeActive: '[data-cms-element-resizer="true"]';
173
172
  // border-radius: 16px;
174
173
  // background: #fff4ed;
175
174
  mix-blend-mode: multiply;
176
- background-color: ctm-var(dn-qe-ss-bd-cr);
177
- border-width: ctm-var(dn-qe-ss-br-wh);
178
- border-color: ctm-var(dn-qe-ss-br-cr);
179
- border-style: ctm-var(dn-qe-ss-br-se);
180
- border-radius: ctm-var(dn-qe-ss-br-rs);
181
- box-shadow: ctm-var(dn-qe-ss-sw-ae) ctm-var(dn-qe-ss-sw-br) ctm-var(dn-qe-ss-sw-sd)
182
- ctm-var(dn-qe-ss-sw-cr);
175
+ background-color: prepareMediaVariable(dn-qe-ss-bd-cr);
176
+ border-width: prepareMediaVariable(dn-qe-ss-br-wh);
177
+ border-color: prepareMediaVariable(dn-qe-ss-br-cr);
178
+ border-style: prepareMediaVariable(dn-qe-ss-br-se);
179
+ border-radius: prepareMediaVariable(dn-qe-ss-br-rs);
180
+ box-shadow: prepareMediaVariable(dn-qe-ss-sw-ae)
181
+ prepareMediaVariable(dn-qe-ss-sw-br) prepareMediaVariable(dn-qe-ss-sw-sd)
182
+ prepareMediaVariable(dn-qe-ss-sw-cr);
183
183
 
184
184
  .quote_status {
185
185
  // color: #b93815;
186
186
  // text-align: center;
187
187
  // font-size: 12px;
188
188
  // line-height: 18px;
189
- font-family: ctm-var(dn-qe-ss-ft-fy);
190
- font-size: ctm-var(dn-qe-ss-ft-se);
191
- color: ctm-var(dn-qe-ss-cr);
192
- font-weight: ctm-var(dn-qe-ss-ft-wt);
193
- font-style: ctm-var(dn-qe-ss-ft-se-ic);
194
- text-decoration: ctm-var(dn-qe-ss-ue);
195
- text-align: ctm-var(dn-qe-ss-tt-an);
196
- letter-spacing: ctm-var(dn-qe-ss-lr-sg);
197
- line-height: ctm-var(dn-qe-ss-le-ht);
189
+ font-family: prepareMediaVariable(dn-qe-ss-ft-fy);
190
+ font-size: prepareMediaVariable(dn-qe-ss-ft-se);
191
+ color: prepareMediaVariable(dn-qe-ss-cr);
192
+ font-weight: prepareMediaVariable(dn-qe-ss-ft-wt);
193
+ font-style: prepareMediaVariable(dn-qe-ss-ft-se-ic);
194
+ text-decoration: prepareMediaVariable(dn-qe-ss-ue);
195
+ text-align: prepareMediaVariable(dn-qe-ss-tt-an);
196
+ letter-spacing: prepareMediaVariable(dn-qe-ss-lr-sg);
197
+ line-height: prepareMediaVariable(dn-qe-ss-le-ht);
198
198
  }
199
199
  }
200
200
 
@@ -205,22 +205,23 @@ $resizeActive: '[data-cms-element-resizer="true"]';
205
205
  // font-weight: 400;
206
206
  // line-height: 18px;
207
207
 
208
- font-family: ctm-var(dn-rd-on-ft-fy);
209
- font-size: ctm-var(dn-rd-on-ft-se);
210
- color: ctm-var(dn-rd-on-cr);
211
- font-weight: ctm-var(dn-rd-on-ft-wt);
212
- font-style: ctm-var(dn-rd-on-ft-se-ic);
213
- text-decoration: ctm-var(dn-rd-on-ue);
214
- text-align: ctm-var(dn-rd-on-tt-an);
215
- letter-spacing: ctm-var(dn-rd-on-lr-sg);
216
- line-height: ctm-var(dn-rd-on-le-ht);
217
- background-color: ctm-var(dn-rd-on-bd-cr);
218
- border-width: ctm-var(dn-rd-on-br-wh);
219
- border-color: ctm-var(dn-rd-on-br-cr);
220
- border-style: ctm-var(dn-rd-on-br-se);
221
- border-radius: ctm-var(dn-rd-on-br-rs);
222
- box-shadow: ctm-var(dn-rd-on-sw-ae) ctm-var(dn-rd-on-sw-br) ctm-var(dn-rd-on-sw-sd)
223
- ctm-var(dn-rd-on-sw-cr);
208
+ font-family: prepareMediaVariable(dn-rd-on-ft-fy);
209
+ font-size: prepareMediaVariable(dn-rd-on-ft-se);
210
+ color: prepareMediaVariable(dn-rd-on-cr);
211
+ font-weight: prepareMediaVariable(dn-rd-on-ft-wt);
212
+ font-style: prepareMediaVariable(dn-rd-on-ft-se-ic);
213
+ text-decoration: prepareMediaVariable(dn-rd-on-ue);
214
+ text-align: prepareMediaVariable(dn-rd-on-tt-an);
215
+ letter-spacing: prepareMediaVariable(dn-rd-on-lr-sg);
216
+ line-height: prepareMediaVariable(dn-rd-on-le-ht);
217
+ background-color: prepareMediaVariable(dn-rd-on-bd-cr);
218
+ border-width: prepareMediaVariable(dn-rd-on-br-wh);
219
+ border-color: prepareMediaVariable(dn-rd-on-br-cr);
220
+ border-style: prepareMediaVariable(dn-rd-on-br-se);
221
+ border-radius: prepareMediaVariable(dn-rd-on-br-rs);
222
+ box-shadow: prepareMediaVariable(dn-rd-on-sw-ae)
223
+ prepareMediaVariable(dn-rd-on-sw-br) prepareMediaVariable(dn-rd-on-sw-sd)
224
+ prepareMediaVariable(dn-rd-on-sw-cr);
224
225
  }
225
226
 
226
227
  .quotes_amount {
@@ -229,22 +230,23 @@ $resizeActive: '[data-cms-element-resizer="true"]';
229
230
  // font-size: 14px;
230
231
  // font-weight: 600;
231
232
  // line-height: 20px;
232
- font-family: ctm-var(dn-qe-id-ft-fy);
233
- font-size: ctm-var(dn-qe-id-ft-se);
234
- color: ctm-var(dn-qe-id-cr);
235
- font-weight: ctm-var(dn-qe-id-ft-wt);
236
- font-style: ctm-var(dn-qe-id-ft-se-ic);
237
- text-decoration: ctm-var(dn-qe-id-ue);
238
- text-align: ctm-var(dn-qe-id-tt-an);
239
- letter-spacing: ctm-var(dn-qe-id-lr-sg);
240
- line-height: ctm-var(dn-qe-id-le-ht);
241
- background-color: ctm-var(dn-qe-id-bd-cr);
242
- border-width: ctm-var(dn-qe-id-br-wh);
243
- border-color: ctm-var(dn-qe-id-br-cr);
244
- border-style: ctm-var(dn-qe-id-br-se);
245
- border-radius: ctm-var(dn-qe-id-br-rs);
246
- box-shadow: ctm-var(dn-qe-id-sw-ae) ctm-var(dn-qe-id-sw-br) ctm-var(dn-qe-id-sw-sd)
247
- ctm-var(dn-qe-id-sw-cr);
233
+ font-family: prepareMediaVariable(dn-qe-id-ft-fy);
234
+ font-size: prepareMediaVariable(dn-qe-id-ft-se);
235
+ color: prepareMediaVariable(dn-qe-id-cr);
236
+ font-weight: prepareMediaVariable(dn-qe-id-ft-wt);
237
+ font-style: prepareMediaVariable(dn-qe-id-ft-se-ic);
238
+ text-decoration: prepareMediaVariable(dn-qe-id-ue);
239
+ text-align: prepareMediaVariable(dn-qe-id-tt-an);
240
+ letter-spacing: prepareMediaVariable(dn-qe-id-lr-sg);
241
+ line-height: prepareMediaVariable(dn-qe-id-le-ht);
242
+ background-color: prepareMediaVariable(dn-qe-id-bd-cr);
243
+ border-width: prepareMediaVariable(dn-qe-id-br-wh);
244
+ border-color: prepareMediaVariable(dn-qe-id-br-cr);
245
+ border-style: prepareMediaVariable(dn-qe-id-br-se);
246
+ border-radius: prepareMediaVariable(dn-qe-id-br-rs);
247
+ box-shadow: prepareMediaVariable(dn-qe-id-sw-ae)
248
+ prepareMediaVariable(dn-qe-id-sw-br) prepareMediaVariable(dn-qe-id-sw-sd)
249
+ prepareMediaVariable(dn-qe-id-sw-cr);
248
250
  }
249
251
  }
250
252
  .quotes_action {
@@ -295,7 +297,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
295
297
  gap: var(--_ctm-mob-lt-sg-bn-is, var(--_ctm-tab-lt-sg-bn-is, var(--_ctm-lt-sg-bn-is)));
296
298
 
297
299
  &[data-control-type="Bottom"][data-slider-control="Arrows"] {
298
- height: calc(100% - calc(ctm-var(dn-pn-as-aw-se) + 10px));
300
+ height: calc(100% - calc(prepareMediaVariable(dn-pn-as-aw-se) + 10px));
299
301
  }
300
302
 
301
303
  &[data-control-type="Bottom"][data-slider-control="Pagination Line"] {
@@ -472,8 +474,8 @@ $resizeActive: '[data-cms-element-resizer="true"]';
472
474
  padding: 10px;
473
475
  border-radius: 50%;
474
476
  border: none;
475
- width: ctm-var(dn-pn-as-aw-se);
476
- height: ctm-var(dn-pn-as-aw-se);
477
+ width: prepareMediaVariable(dn-pn-as-aw-se);
478
+ height: prepareMediaVariable(dn-pn-as-aw-se);
477
479
  display: flex;
478
480
  align-items: center;
479
481
  justify-content: center;
@@ -491,8 +493,8 @@ $resizeActive: '[data-cms-element-resizer="true"]';
491
493
  .right-button {
492
494
  border-radius: 50%;
493
495
  border: none;
494
- width: ctm-var(dn-pn-as-aw-se);
495
- height: ctm-var(dn-pn-as-aw-se);
496
+ width: prepareMediaVariable(dn-pn-as-aw-se);
497
+ height: prepareMediaVariable(dn-pn-as-aw-se);
496
498
 
497
499
  display: flex;
498
500
  align-items: center;
@@ -514,11 +516,11 @@ $resizeActive: '[data-cms-element-resizer="true"]';
514
516
  display: flex;
515
517
 
516
518
  svg {
517
- width: calc(ctm-var(dn-pn-as-aw-se) * 0.5);
518
- height: calc(ctm-var(dn-pn-as-aw-se) * 0.5);
519
+ width: calc(prepareMediaVariable(dn-pn-as-aw-se) * 0.5);
520
+ height: calc(prepareMediaVariable(dn-pn-as-aw-se) * 0.5);
519
521
 
520
522
  path {
521
- stroke: ctm-var(dn-pn-as-aw-cr);
523
+ stroke: prepareMediaVariable(dn-pn-as-aw-cr);
522
524
  }
523
525
  }
524
526
  }