@sc-360-v2/storefront-cms-library 0.3.62 → 0.3.64

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 (52) hide show
  1. package/dist/add-products-tab copy.scss +9 -8
  2. package/dist/add-products-tab.scss +9 -8
  3. package/dist/badge.scss +87 -83
  4. package/dist/builder.js +1 -1
  5. package/dist/cart-details.scss +82 -22
  6. package/dist/cart-summary.scss +18 -144
  7. package/dist/cart-wrapper.scss +127 -0
  8. package/dist/cartDropdownOverlay.scss +58 -4
  9. package/dist/checkbox-radio.scss +105 -0
  10. package/dist/checkout.scss +96 -573
  11. package/dist/dropdownTemplate.scss +58 -4
  12. package/dist/icon-list.scss +25 -19
  13. package/dist/icons.js +1 -1
  14. package/dist/image-for-product.scss +19 -0
  15. package/dist/index.js +1 -1
  16. package/dist/item-stock.scss +27 -26
  17. package/dist/mega-menu-container.scss +96 -0
  18. package/dist/mega-menu.scss +832 -0
  19. package/dist/menu-v2.scss +30 -5
  20. package/dist/modal.scss +218 -8
  21. package/dist/myTemplates.scss +345 -20
  22. package/dist/order-status.scss +18 -15
  23. package/dist/past-orders.scss +279 -271
  24. package/dist/payment-methods.scss +72 -69
  25. package/dist/position-module.scss +2 -1
  26. package/dist/prefix-list.scss +3 -0
  27. package/dist/quick-links.scss +49 -46
  28. package/dist/quick-order-pad.scss +3 -0
  29. package/dist/quotes.scss +123 -117
  30. package/dist/rfqs.scss +123 -117
  31. package/dist/simple-list.scss +264 -0
  32. package/dist/submit-quote.scss +81 -113
  33. package/dist/templates.scss +299 -0
  34. package/dist/types/builder/elements/cart-wrapper/index.d.ts +44 -0
  35. package/dist/types/builder/elements/mega-menu/index.d.ts +47 -0
  36. package/dist/types/builder/elements/mega-menu-container/index.d.ts +44 -0
  37. package/dist/types/builder/elements/simple-list/index.d.ts +47 -0
  38. package/dist/types/builder/enums/index.d.ts +10 -1
  39. package/dist/types/builder/index.d.ts +5 -1
  40. package/dist/types/builder/tools/element-edit/cart-wrapper.d.ts +16 -0
  41. package/dist/types/builder/tools/element-edit/index.d.ts +8 -1
  42. package/dist/types/builder/tools/element-edit/mega-menu.d.ts +41 -0
  43. package/dist/types/builder/tools/element-edit/megaMenuContainer.d.ts +9 -0
  44. package/dist/types/builder/tools/element-edit/my-templates.d.ts +23 -0
  45. package/dist/types/builder/tools/element-edit/optionBar.d.ts +23 -0
  46. package/dist/types/builder/tools/element-edit/quickLinks.d.ts +111 -50
  47. package/dist/types/builder/tools/element-edit/request-for-quote.d.ts +23 -0
  48. package/dist/types/builder/tools/element-edit/simple-list.d.ts +37 -0
  49. package/dist/types/website/constants/data-connectors.d.ts +18 -0
  50. package/dist/website.js +1 -1
  51. package/dist/widget.scss +7 -0
  52. package/package.json +1 -1
@@ -3,31 +3,356 @@
3
3
 
4
4
  [data-div-type="element"] {
5
5
  &[data-element-type="myTemplates"] {
6
- width: var(
7
- --_ctm-mob-ele-nw-wh-st-mx,
8
- var(
9
- --_ctm-tab-ele-nw-wh-st-mx,
10
- var(--_sf-el-wh-st-mx, calc(1% * var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh))))
11
- )
12
- );
6
+ width: 100%;
7
+ .template_wrapper {
8
+ width: 100%;
9
+ .template_section {
10
+ width: 100%;
11
+ display: flex;
12
+ justify-content: space-between;
13
+ align-items: center;
14
+ margin-bottom: 24px;
15
+ h2 {
16
+ font-size: 24px;
17
+ }
18
+ .back_to_cart {
19
+ color: var(--_primary-400);
20
+ &:hover {
21
+ text-decoration: underline;
22
+ }
23
+ }
24
+ }
25
+ .template_body {
26
+ display: flex;
27
+ gap: 60px;
28
+ justify-content: space-between;
29
+ .template_col_left {
30
+ width: 100%;
31
+ height: 400px;
32
+ background-color: var(--_gray-100);
13
33
 
14
- margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
34
+ .wishlist-modal {
35
+ display: flex;
36
+ flex-direction: column;
37
+ // gap: 1rem; //cart template modal issue
38
+ // padding: 10px 16px;
39
+ width: 100%;
40
+ overflow-y: auto;
15
41
 
16
- height: var(--_ctm-mob-lt-ht, var(--_ctm-tab-lt-ht, var(--_ctm-lt-ht))) !important;
42
+ .form-group {
43
+ display: flex;
44
+ flex-direction: column;
45
+ gap: 8px;
17
46
 
18
- // aspect-ratio: var(
19
- // --_ctm-mob-aspect-ratio,
20
- // var(--_ctm-tab-aspect-ratio, var(--_sf-aspect-ratio))
21
- // );
47
+ label {
48
+ display: block;
49
+ font-size: 0.875rem;
50
+ font-weight: 500;
51
+ color: #374151;
52
+ }
22
53
 
23
- position: relative;
54
+ .primary_text_label {
55
+ font-weight: 700;
56
+ }
24
57
 
25
- & > .wrapper {
26
- display: flex;
27
- align-items: center;
28
- justify-content: center;
29
- width: 100%;
30
- height: 100%;
58
+ input[type="radio"],
59
+ textarea {
60
+ width: 100%;
61
+ padding: 0.5rem 0.75rem;
62
+ font-size: 0.875rem;
63
+ border: 1px solid #d1d5db;
64
+ border-radius: 0.375rem;
65
+ outline: none;
66
+ box-sizing: border-box;
67
+ transition: all 0.2s;
68
+
69
+ &:focus {
70
+ border-color: #2563eb;
71
+ // box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.3);
72
+ }
73
+
74
+ &[type="radio"] {
75
+ width: fit-content;
76
+ height: fit-content;
77
+ }
78
+ }
79
+
80
+ .radio-group {
81
+ display: flex;
82
+ flex-direction: column;
83
+ gap: 12px;
84
+ font-weight: normal;
85
+
86
+ .radio-label {
87
+ display: inline-flex;
88
+ align-items: center;
89
+ gap: 8px;
90
+ cursor: pointer;
91
+ width: fit-content;
92
+
93
+ span {
94
+ color: var(--_gray-500);
95
+
96
+ span {
97
+ color: var(--_gray-900);
98
+ font-weight: 500;
99
+ }
100
+ }
101
+ }
102
+ }
103
+
104
+ textarea {
105
+ min-height: 100px;
106
+ resize: vertical;
107
+ }
108
+
109
+ .global-can-edit {
110
+ display: flex;
111
+ flex-direction: column;
112
+ align-items: flex-start;
113
+ margin-left: 20px;
114
+ margin-top: 6px;
115
+ gap: 6px;
116
+
117
+ input[type="checkbox"] {
118
+ margin: 0;
119
+ width: 16px;
120
+ height: 16px;
121
+ cursor: pointer;
122
+ }
123
+
124
+ span {
125
+ font-size: 0.875rem;
126
+ font-weight: 600;
127
+ color: var(--_gray-900);
128
+ margin-left: -15px;
129
+ }
130
+ }
131
+ }
132
+
133
+ .employee-row-wrapper {
134
+ display: flex;
135
+ flex-direction: column;
136
+ gap: 12px;
137
+ .employee-row {
138
+ display: flex;
139
+ align-items: center;
140
+ gap: 1rem;
141
+
142
+ .dropdown {
143
+ display: flex;
144
+ flex-direction: column;
145
+ gap: 6px;
146
+ }
147
+
148
+ // .dropdown {
149
+ // flex: 1;
150
+ // display: flex;
151
+ // flex-direction: column;
152
+ // gap: 8px;
153
+ // max-width: 400px;
154
+
155
+ // .quick-order-product-dropdown-section {
156
+ // &:focus {
157
+ // &:focus {
158
+ // border-color: #2563eb;
159
+ // box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.3);
160
+ // }
161
+ // }
162
+
163
+ // .dropdown-input-section {
164
+ // // padding: 0.5rem;
165
+
166
+ // .input-field {
167
+ // border: none;
168
+ // box-shadow: none;
169
+ // padding: 0px;
170
+ // }
171
+
172
+ // .dropdown-menu {
173
+ // top: 40px;
174
+ // }
175
+ // }
176
+ // }
177
+ // }
178
+
179
+ .checkbox-wrapper {
180
+ display: flex;
181
+ align-items: center;
182
+ flex-direction: column;
183
+ gap: 0.5rem;
184
+ white-space: nowrap;
185
+ align-self: stretch;
186
+ align-items: flex-start;
187
+
188
+ .checkbox-container {
189
+ display: flex;
190
+ width: 3.5rem;
191
+ align-items: center;
192
+ flex: 1 1 auto;
193
+ justify-content: center;
194
+
195
+ input[type="checkbox"] {
196
+ width: 20px;
197
+ height: 20px;
198
+ border: 1px solid #d0d5dd;
199
+ border-radius: 4px;
200
+ position: relative;
201
+ background-color: #fff;
202
+ transition: all 0.2s ease;
203
+
204
+ &::after {
205
+ content: "";
206
+ position: absolute;
207
+ display: none;
208
+ left: 5px;
209
+ top: 0.5px;
210
+ width: 5px;
211
+ height: 10px;
212
+ border: solid #fff;
213
+ border-width: 0 2px 2px 0;
214
+ transform: rotate(45deg);
215
+ }
216
+ }
217
+ }
218
+ }
219
+
220
+ .delete-icon-wrapper {
221
+ display: flex;
222
+ align-items: center;
223
+ flex-direction: column;
224
+ gap: 0.5rem;
225
+ white-space: nowrap;
226
+ align-self: stretch;
227
+ align-items: flex-start;
228
+ margin-left: 130px;
229
+
230
+ .delete-icon-container {
231
+ display: flex;
232
+ width: 100%;
233
+ align-items: center;
234
+ flex: 1 1 auto;
235
+ justify-content: center;
236
+
237
+ .delete-icon {
238
+ cursor: pointer;
239
+ display: flex;
240
+ svg {
241
+ width: 24px;
242
+ height: 24px;
243
+ path {
244
+ stroke: #6b7280; // gray-500
245
+ }
246
+
247
+ &:hover {
248
+ path {
249
+ stroke: #ef4444;
250
+ }
251
+ }
252
+ }
253
+ }
254
+ }
255
+ }
256
+ }
257
+ }
258
+
259
+ .action-buttons {
260
+ display: flex;
261
+ gap: 1rem;
262
+ align-items: flex-end;
263
+ justify-content: flex-end;
264
+ flex: 1 1 auto;
265
+
266
+ .create-btn {
267
+ background-color: #243dc6;
268
+ color: #fff;
269
+ padding: 12px 24px;
270
+ border-radius: 0.375rem;
271
+ border: none;
272
+ cursor: pointer;
273
+ line-height: 24px;
274
+ font-weight: 500;
275
+
276
+ &:hover {
277
+ background-color: #1d4ed8;
278
+ }
279
+ }
280
+
281
+ .discard-btn {
282
+ background: none;
283
+ border: none;
284
+ padding: 8px 16px;
285
+ color: var(--_gray-600);
286
+ font-size: 16px;
287
+ cursor: pointer;
288
+ line-height: 24px;
289
+ border-radius: 6px;
290
+
291
+ &:hover {
292
+ background-color: var(--_gray-50);
293
+ color: var(--_gray-900);
294
+ }
295
+ }
296
+ }
297
+ }
298
+ }
299
+ .template_col_right {
300
+ width: 400px;
301
+ height: fit-content;
302
+ background-color: var(--_base-white);
303
+ .template_summary_wrapper {
304
+ border: 1px solid var(--_gray-300);
305
+ border-radius: 4px;
306
+ width: 350px;
307
+ .template_summary_header {
308
+ padding: 12px 16px;
309
+ border-bottom: 1px solid var(--_gray-300);
310
+ font-size: 16px;
311
+ font-weight: 600;
312
+ background-color: #f5f5f5;
313
+ }
314
+ .template_summary_body {
315
+ .template_summary_items {
316
+ padding: 16px;
317
+ display: flex;
318
+ flex-direction: column;
319
+ gap: 8px;
320
+ .template_summary_item {
321
+ display: flex;
322
+ justify-content: space-between;
323
+ gap: 16px;
324
+ .template_summary_item_details {
325
+ display: flex;
326
+ gap: 16px;
327
+ .template_summary_item_pro_info {
328
+ h5 {
329
+ font-size: 16px;
330
+ font-weight: 600;
331
+ color: var(--_gray-900);
332
+ }
333
+ .template_summary_item_pro_qty {
334
+ color: var(--_gray-500);
335
+ font-size: 12px;
336
+ span {
337
+ display: block;
338
+ }
339
+ .qty {
340
+ color: var(--_gray-900);
341
+ }
342
+ }
343
+ }
344
+ }
345
+ .template_summary_item_detail_price {
346
+ font-size: 16px;
347
+ font-weight: 600;
348
+ color: var(--_gray-900);
349
+ }
350
+ }
351
+ }
352
+ }
353
+ }
354
+ }
355
+ }
31
356
  }
32
357
  }
33
358
  }
@@ -120,8 +120,8 @@
120
120
  .user-info {
121
121
  display: flex;
122
122
  flex-direction: column;
123
- padding-bottom: 12px;
124
- margin-bottom: 12px;
123
+ padding-bottom: 16px;
124
+ margin-bottom: 24px;
125
125
  border-bottom: 1px solid var(--_gray-200);
126
126
  gap: var(
127
127
  --_ctm-mob-dn-hr-cr-hr-wr-im-gp,
@@ -206,10 +206,11 @@
206
206
  --_ctm-mob-dn-hr-cr-ee-ds-ft-fy,
207
207
  var(--_ctm-tab-dn-hr-cr-ee-ds-ft-fy, var(--_ctm-dn-hr-cr-ee-ds-ft-fy))
208
208
  );
209
- font-size: var(
210
- --_ctm-mob-dn-hr-cr-ee-ds-ft-se,
211
- var(--_ctm-tab-dn-hr-cr-ee-ds-ft-se, var(--_ctm-dn-hr-cr-ee-ds-ft-se))
212
- );
209
+ // font-size: var(
210
+ // --_ctm-mob-dn-hr-cr-ee-ds-ft-se,
211
+ // var(--_ctm-tab-dn-hr-cr-ee-ds-ft-se, var(--_ctm-dn-hr-cr-ee-ds-ft-se))
212
+ // );
213
+ font-size: 14px;
213
214
  color: var(
214
215
  --_ctm-mob-dn-hr-cr-ee-ds-cr,
215
216
  var(--_ctm-tab-dn-hr-cr-ee-ds-cr, var(--_ctm-dn-hr-cr-ee-ds-cr))
@@ -266,7 +267,7 @@
266
267
  border-radius: 6px;
267
268
  border: 1px solid #d0d5dd;
268
269
  padding: 12px;
269
- margin-block: 16px;
270
+ margin-bottom: 24px;
270
271
 
271
272
  .check-icon {
272
273
  font-size: 28px;
@@ -485,10 +486,11 @@
485
486
  --_ctm-mob-dn-or-io-or-io-hr-bd-cr,
486
487
  var(--_ctm-tab-dn-or-io-or-io-hr-bd-cr, var(--_ctm-dn-or-io-or-io-hr-bd-cr))
487
488
  );
488
- border-color: var(
489
- --_ctm-mob-dn-or-io-or-io-hr-br-cr,
490
- var(--_ctm-tab-dn-or-io-or-io-hr-br-cr, var(--_ctm-dn-or-io-or-io-hr-br-cr))
491
- );
489
+ // border-color: var(
490
+ // --_ctm-mob-dn-or-io-or-io-hr-br-cr,
491
+ // var(--_ctm-tab-dn-or-io-or-io-hr-br-cr, var(--_ctm-dn-or-io-or-io-hr-br-cr))
492
+ // );
493
+ border: 1px solid var(--_gray-200);
492
494
  border-style: var(
493
495
  --_ctm-mob-dn-or-io-or-io-hr-br-se,
494
496
  var(--_ctm-tab-dn-or-io-or-io-hr-br-se, var(--_ctm-dn-or-io-or-io-hr-br-se))
@@ -1483,10 +1485,11 @@
1483
1485
  --_ctm-mob-dn-pt-wt-pt-ed-de-ft-fy-dc,
1484
1486
  var(--_ctm-tab-dn-pt-wt-pt-ed-de-ft-fy-dc, var(--_ctm-dn-pt-wt-pt-ed-de-ft-fy-dc))
1485
1487
  );
1486
- font-size: var(
1487
- --_ctm-mob-dn-pt-wt-pt-ed-de-ft-se-dc,
1488
- var(--_ctm-tab-dn-pt-wt-pt-ed-de-ft-se-dc, var(--_ctm-dn-pt-wt-pt-ed-de-ft-se-dc))
1489
- );
1488
+ // font-size: var(
1489
+ // --_ctm-mob-dn-pt-wt-pt-ed-de-ft-se-dc,
1490
+ // var(--_ctm-tab-dn-pt-wt-pt-ed-de-ft-se-dc, var(--_ctm-dn-pt-wt-pt-ed-de-ft-se-dc))
1491
+ // );
1492
+ font-size: 12px;
1490
1493
  color: var(
1491
1494
  --_ctm-mob-dn-pt-wt-pt-ed-de-cr-dc,
1492
1495
  var(--_ctm-tab-dn-pt-wt-pt-ed-de-cr-dc, var(--_ctm-dn-pt-wt-pt-ed-de-cr-dc))