@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/item-stock.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
  [data-div-type="element"] {
8
6
  &[data-element-type="itemStock"] {
@@ -37,15 +35,15 @@
37
35
  .item__stock__heading {
38
36
  position: relative;
39
37
  .item__stock__text {
40
- font-family: ctm-var(dn-im-sk-tt-ft-fy);
41
- font-size: ctm-var(dn-im-sk-tt-ft-se);
42
- color: ctm-var(dn-im-sk-tt-cr);
43
- font-weight: ctm-var(dn-im-sk-tt-ft-wt);
44
- font-style: ctm-var(dn-im-sk-tt-ft-se-ic);
45
- text-decoration: ctm-var(dn-im-sk-tt-ue);
46
- text-align: ctm-var(dn-im-sk-tt-tt-an);
47
- letter-spacing: ctm-var(dn-im-sk-tt-lr-sg);
48
- line-height: ctm-var(dn-im-sk-tt-le-ht);
38
+ font-family: prepareMediaVariable(dn-im-sk-tt-ft-fy);
39
+ font-size: prepareMediaVariable(dn-im-sk-tt-ft-se);
40
+ color: prepareMediaVariable(dn-im-sk-tt-cr);
41
+ font-weight: prepareMediaVariable(dn-im-sk-tt-ft-wt);
42
+ font-style: prepareMediaVariable(dn-im-sk-tt-ft-se-ic);
43
+ text-decoration: prepareMediaVariable(dn-im-sk-tt-ue);
44
+ text-align: prepareMediaVariable(dn-im-sk-tt-tt-an);
45
+ letter-spacing: prepareMediaVariable(dn-im-sk-tt-lr-sg);
46
+ line-height: prepareMediaVariable(dn-im-sk-tt-le-ht);
49
47
  }
50
48
  .stock_message_conatainer {
51
49
  display: flex;
@@ -53,24 +51,25 @@
53
51
  align-items: center;
54
52
  gap: 4px;
55
53
  mix-blend-mode: multiply;
56
- background-color: ctm-var(dn-im-sk-tt-bd-cr);
57
- border-width: ctm-var(dn-im-sk-tt-br-wh);
58
- border-color: ctm-var(dn-im-sk-tt-br-cr);
59
- border-style: ctm-var(dn-im-sk-tt-br-se);
60
- border-radius: ctm-var(dn-im-sk-tt-br-rs);
61
- box-shadow: ctm-var(dn-im-sk-tt-sw-ae) ctm-var(dn-im-sk-tt-sw-br)
62
- ctm-var(dn-im-sk-tt-sw-sd) ctm-var(dn-im-sk-tt-sw-cr);
54
+ background-color: prepareMediaVariable(dn-im-sk-tt-bd-cr);
55
+ border-width: prepareMediaVariable(dn-im-sk-tt-br-wh);
56
+ border-color: prepareMediaVariable(dn-im-sk-tt-br-cr);
57
+ border-style: prepareMediaVariable(dn-im-sk-tt-br-se);
58
+ border-radius: prepareMediaVariable(dn-im-sk-tt-br-rs);
59
+ box-shadow: prepareMediaVariable(dn-im-sk-tt-sw-ae)
60
+ prepareMediaVariable(dn-im-sk-tt-sw-br) prepareMediaVariable(dn-im-sk-tt-sw-sd)
61
+ prepareMediaVariable(dn-im-sk-tt-sw-cr);
63
62
 
64
63
  .stock_messages {
65
- font-family: ctm-var(dn-im-sk-tt-ft-fy);
66
- font-size: ctm-var(dn-im-sk-tt-ft-se);
67
- color: ctm-var(dn-im-sk-tt-cr);
68
- font-weight: ctm-var(dn-im-sk-tt-ft-wt);
69
- font-style: ctm-var(dn-im-sk-tt-ft-se-ic);
70
- text-decoration: ctm-var(dn-im-sk-tt-ue);
71
- text-align: ctm-var(dn-im-sk-tt-tt-an);
72
- letter-spacing: ctm-var(dn-im-sk-tt-lr-sg);
73
- line-height: ctm-var(dn-im-sk-tt-le-ht);
64
+ font-family: prepareMediaVariable(dn-im-sk-tt-ft-fy);
65
+ font-size: prepareMediaVariable(dn-im-sk-tt-ft-se);
66
+ color: prepareMediaVariable(dn-im-sk-tt-cr);
67
+ font-weight: prepareMediaVariable(dn-im-sk-tt-ft-wt);
68
+ font-style: prepareMediaVariable(dn-im-sk-tt-ft-se-ic);
69
+ text-decoration: prepareMediaVariable(dn-im-sk-tt-ue);
70
+ text-align: prepareMediaVariable(dn-im-sk-tt-tt-an);
71
+ letter-spacing: prepareMediaVariable(dn-im-sk-tt-lr-sg);
72
+ line-height: prepareMediaVariable(dn-im-sk-tt-le-ht);
74
73
  }
75
74
  }
76
75
  }
package/dist/menu-v2.scss CHANGED
@@ -74,10 +74,10 @@ $defaultValues: (
74
74
 
75
75
  [data-div-type="element"] {
76
76
  &[data-element-type="menu-v2"] {
77
- @include prepareMediaQueries($defaultValues);
78
77
  width: calc(1% * #{prepareMediaVariable(--_ctm-ele-nw-wh-vl)});
79
- // var(--_ctm-mob-ele-nw-wh-vl, var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl, auto)))
80
78
  margin: prepareMediaVariable(--_ctm-lt-mn);
79
+ @include prepareMediaQueries($defaultValues);
80
+ // var(--_ctm-mob-ele-nw-wh-vl, var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl, auto)))
81
81
 
82
82
  & > div {
83
83
  &.wrapper {
package/dist/modal.scss CHANGED
@@ -109,14 +109,13 @@ $active_btn_text_color: #fff;
109
109
  justify-content: center;
110
110
  border-radius: 4px;
111
111
  span {
112
- display: flex;
113
- svg {
114
- width: 20px;
115
- height: 20px;
116
- }
112
+ display: flex;
113
+ svg {
114
+ width: 20px;
115
+ height: 20px;
116
+ }
117
117
  }
118
118
 
119
-
120
119
  &:hover {
121
120
  background-color: var(--_gray-100);
122
121
  }
@@ -249,6 +248,7 @@ $shadow-md: 0 8px 20px rgba(0, 0, 0, 0.1);
249
248
  .modal-body {
250
249
  height: auto;
251
250
  display: flex;
251
+ flex-direction: column;
252
252
  width: 100%;
253
253
  flex: 1 1 auto;
254
254
  overflow-y: auto;
@@ -256,31 +256,50 @@ $shadow-md: 0 8px 20px rgba(0, 0, 0, 0.1);
256
256
  .wishlist-modal {
257
257
  display: flex;
258
258
  flex-direction: column;
259
- padding: 16px;
260
259
  width: 100%;
261
260
  .wishlist-modal-section {
261
+ padding: 16px 24px 24px 24px;
262
262
  gap: 16px !important;
263
- overflow: scroll;
264
- padding: 12px !important;
265
263
  overflow-x: hidden;
266
264
  display: flex;
267
265
  flex-direction: column;
266
+ input[type="text"] {
267
+ height: 40px;
268
+ border: 1px solid var(--_gray-300);
269
+ border-radius: 6px;
270
+ padding-inline: 16px;
271
+ }
272
+ }
273
+ }
274
+ .action-buttons {
275
+ display: flex;
276
+ gap: 1rem;
277
+ align-items: center;
278
+ justify-content: flex-end;
279
+ flex: 1 1 auto;
280
+ padding: 16px 24px;
281
+ border-top: 1px solid var(--_gray-200);
282
+ gap: 12px;
283
+ button {
284
+ padding: 12px 16px;
285
+ border-radius: 6px;
268
286
  }
269
- .action-buttons {
287
+ .create-btn {
270
288
  display: flex;
271
- gap: 1rem;
272
- align-items: flex-end;
273
- justify-content: flex-end;
274
- flex: 1 1 auto;
275
- padding: 10px 16px;
276
- gap: 0px;
277
- .create-btn {
278
- display: flex;
279
- height: 44px;
280
- padding: 8px 14px;
281
- justify-content: center;
282
- align-items: center;
283
- gap: 8px;
289
+ justify-content: center;
290
+ align-items: center;
291
+ gap: 8px;
292
+ background-color: var(--_primary-400);
293
+ color: var(--_base-white);
294
+
295
+ &:hover {
296
+ background-color: var(--_primary-500);
297
+ }
298
+ }
299
+ .discard-btn {
300
+ &:hover {
301
+ background-color: var(--_gray-50);
302
+ color: var(--_gray-900);
284
303
  }
285
304
  }
286
305
  }
@@ -302,7 +321,7 @@ $shadow-md: 0 8px 20px rgba(0, 0, 0, 0.1);
302
321
  // max-height: 100vh;
303
322
  // max-width: 1200px;
304
323
  max-height: calc(100vw - 24px);
305
- max-width: calc(100vw - 24px);
324
+ max-width: calc(100vw - 24px);
306
325
 
307
326
  .product-list {
308
327
  flex: 1;
@@ -346,61 +365,62 @@ $shadow-md: 0 8px 20px rgba(0, 0, 0, 0.1);
346
365
  padding: 16px;
347
366
 
348
367
  .left-col {
349
-
350
- .title {
351
- color: var(--_gray-900, #101828);
352
- font-size: 16px;
353
- font-weight: 700;
354
- line-height: 24px;
355
- text-transform: capitalize;
356
- display: flex;
357
- gap: 10px;
358
- align-items: center;
359
- // font-size: $font-size-lg;
360
- // font-weight: 600;
361
- // display: flex;
362
- // align-items: center;
363
- // gap: 6px;
364
- // color: var(--_gray-900);
365
- // line-height: 24px;
366
-
367
- .modal_heading_icon {
368
- width: 36px;
369
- height: 36px;
368
+ .title {
369
+ color: var(--_gray-900, #101828);
370
+ font-size: 16px;
371
+ font-weight: 700;
372
+ line-height: 24px;
373
+ text-transform: capitalize;
370
374
  display: flex;
375
+ gap: 10px;
371
376
  align-items: center;
372
- justify-content: center;
373
-
374
- svg {
375
- width: 20px;
376
- height: 20px;
377
+ // font-size: $font-size-lg;
378
+ // font-weight: 600;
379
+ // display: flex;
380
+ // align-items: center;
381
+ // gap: 6px;
382
+ // color: var(--_gray-900);
383
+ // line-height: 24px;
384
+
385
+ .modal_heading_icon {
386
+ width: 36px;
387
+ height: 36px;
388
+ display: flex;
389
+ align-items: center;
390
+ justify-content: center;
391
+
392
+ svg {
393
+ width: 20px;
394
+ height: 20px;
395
+ }
377
396
  }
378
- }
379
397
 
380
- .count {
381
- font-weight: 700;
382
- color: $gray-600;
383
- background-color: #f2f4f7;
384
- border-radius: 6px;
385
- font-size: $font-size-sm;
386
- // width: 25px;
387
- height: 25px;
388
- padding: 0 8px;
389
- display: flex;
390
- // align-items: center;
391
- justify-content: center;
398
+ .count {
399
+ font-weight: 700;
400
+ color: $gray-600;
401
+ background-color: #f2f4f7;
402
+ border-radius: 6px;
403
+ font-size: $font-size-sm;
404
+ // width: 25px;
405
+ height: 25px;
406
+ padding: 0 8px;
407
+ display: flex;
408
+ // align-items: center;
409
+ justify-content: center;
410
+ }
392
411
  }
393
412
  }
394
-
395
-
396
- }
397
- .actions {
413
+ .actions {
398
414
  display: flex;
399
415
  align-items: center;
400
416
  gap: 12px;
417
+ margin-left: 12px;
401
418
  svg {
402
419
  width: 16px;
403
420
  height: 16px;
421
+ path {
422
+ stroke: var(--_gray-600);
423
+ }
404
424
  }
405
425
  span {
406
426
  width: 32px;
@@ -412,11 +432,23 @@ $shadow-md: 0 8px 20px rgba(0, 0, 0, 0.1);
412
432
  display: flex;
413
433
  align-items: center;
414
434
  justify-content: center;
435
+ &[title="Enter Fullscreen"] {
436
+ svg {
437
+ width: 14px;
438
+ height: 14px;
439
+ path {
440
+ stroke: var(--_gray-500);
441
+ }
442
+ }
443
+ }
415
444
 
416
445
  &:hover {
417
446
  color: var(--_gray-900);
418
447
  background-color: var(--_gray-100);
419
448
  border-radius: 4px;
449
+ svg path {
450
+ stroke: var(--_gray-900);
451
+ }
420
452
  }
421
453
  }
422
454
  .sc_modal-close svg {
@@ -424,8 +456,6 @@ $shadow-md: 0 8px 20px rgba(0, 0, 0, 0.1);
424
456
  height: 20px !important;
425
457
  }
426
458
  }
427
-
428
-
429
459
  }
430
460
 
431
461
  .input-group {
@@ -597,9 +627,8 @@ $shadow-md: 0 8px 20px rgba(0, 0, 0, 0.1);
597
627
  .actions {
598
628
  display: flex;
599
629
  gap: 8px;
600
-
601
630
 
602
- span {
631
+ span {
603
632
  cursor: pointer;
604
633
  font-size: 16px;
605
634
  color: $text-light;
@@ -613,20 +642,20 @@ $shadow-md: 0 8px 20px rgba(0, 0, 0, 0.1);
613
642
  background-color: var(--_gray-50);
614
643
  border-radius: 4px;
615
644
  svg path {
616
- stroke: var(--_gray-900)
617
- }
645
+ stroke: var(--_gray-900);
646
+ }
618
647
  }
619
648
  &[title="Maximize"] {
620
649
  svg {
621
650
  width: 14px;
622
- height: 14px;
651
+ height: 14px;
623
652
  }
624
653
  }
625
654
 
626
655
  &[title="close"] {
627
656
  svg {
628
657
  width: 20px;
629
- height: 20px;
658
+ height: 20px;
630
659
  }
631
660
  }
632
661