@sc-360-v2/storefront-cms-library 0.3.28 → 0.3.30

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 (44) hide show
  1. package/dist/animation-control.scss +23 -0
  2. package/dist/builder.js +1 -1
  3. package/dist/bulk-order-pad.scss +328 -53
  4. package/dist/cart-details.scss +595 -300
  5. package/dist/cart-summary.scss +148 -40
  6. package/dist/cartAttributes.scss +24 -20
  7. package/dist/cartDropdownOverlay.scss +58 -10
  8. package/dist/checkout.scss +225 -79
  9. package/dist/contact-us.scss +3 -0
  10. package/dist/dropdownTemplate.scss +13 -2
  11. package/dist/fb-dropdown.scss +6 -2
  12. package/dist/filters.scss +0 -1
  13. package/dist/form-preview.scss +50 -9
  14. package/dist/form-zindex-module.scss +25 -0
  15. package/dist/functions.scss +72 -2
  16. package/dist/icons.js +1 -1
  17. package/dist/index.js +1 -1
  18. package/dist/light-box-v2.scss +1 -1
  19. package/dist/modal.scss +69 -31
  20. package/dist/order-status.scss +1 -0
  21. package/dist/position-module.scss +74 -0
  22. package/dist/prefix-list.scss +55 -0
  23. package/dist/quick-order-pad.scss +36 -8
  24. package/dist/responsive-behaviour.scss +21 -0
  25. package/dist/section.scss +13 -6
  26. package/dist/shareCartSideBar.scss +29 -14
  27. package/dist/submit-quote.scss +107 -49
  28. package/dist/types/builder/elements/form-builder/index.d.ts +14 -2
  29. package/dist/types/builder/interfaces/global.d.ts +13 -0
  30. package/dist/types/builder/tools/element-edit/amountEstimator.d.ts +441 -0
  31. package/dist/types/builder/tools/element-edit/buttonInstance.d.ts +364 -0
  32. package/dist/types/builder/tools/element-edit/cartSummary.d.ts +123 -55
  33. package/dist/types/builder/tools/element-edit/checkout.d.ts +120 -94
  34. package/dist/types/builder/tools/element-edit/common.d.ts +1 -0
  35. package/dist/types/builder/tools/element-edit/countdown.d.ts +384 -44
  36. package/dist/types/builder/tools/element-edit/dummy.d.ts +0 -0
  37. package/dist/types/builder/tools/element-edit/productActions.d.ts +390 -43
  38. package/dist/types/builder/tools/element-edit/quickLinks.d.ts +192 -22
  39. package/dist/types/builder/tools/element-edit/repeater.d.ts +439 -1
  40. package/dist/types/builder/tools/element-edit/table.d.ts +0 -1
  41. package/dist/types/builder/tools/element-edit/typographyInstance.d.ts +981 -0
  42. package/dist/types/builder/tools/element-edit/video.d.ts +192 -22
  43. package/dist/types/global/types.d.ts +2 -0
  44. package/package.json +1 -1
@@ -39,6 +39,16 @@ $dark-color: #343a40;
39
39
  padding: var(--_ctm-lt-pg);
40
40
  flex-direction: column;
41
41
  gap: var(--_ctm-lt-im-gp);
42
+ word-break: keep-all;
43
+ padding-bottom: 24px;
44
+
45
+ .chk_checkout_title {
46
+ font-size: 24px;
47
+ font-weight: 700;
48
+ line-height: 32px;
49
+ color: var(--_ctm-dn-it-hs-dn-cr);
50
+ font-family: var(--_ctm-dn-it-hs-dn-ft-fy);
51
+ }
42
52
 
43
53
  .accordion {
44
54
  border-radius: 4px;
@@ -50,7 +60,7 @@ $dark-color: #343a40;
50
60
  padding: 1rem;
51
61
  display: flex;
52
62
  justify-content: space-between;
53
- align-items: flex-start;
63
+ align-items: center;
54
64
  cursor: pointer;
55
65
  background-color: var(--_ctm-dn-sn-an-cr-dn-bd-cr);
56
66
  border-color: var(--_ctm-dn-sn-an-cr-dn-br-cr);
@@ -63,6 +73,7 @@ $dark-color: #343a40;
63
73
  .accordion-title {
64
74
  margin-right: 1rem;
65
75
  white-space: nowrap;
76
+ display: flex;
66
77
  color: var(--_ctm-dn-sn-an-te-dn-cr);
67
78
  font-family: var(--_ctm-dn-sn-an-te-dn-ft-fy);
68
79
  font-size: var(--_ctm-dn-sn-an-te-dn-ft-se);
@@ -72,9 +83,21 @@ $dark-color: #343a40;
72
83
  letter-spacing: var(--_ctm-dn-sn-an-te-dn-lr-sg);
73
84
  text-align: var(--_ctm-dn-sn-an-te-dn-tt-an);
74
85
  text-decoration: var(--_ctm-dn-sn-an-te-dn-ue);
86
+ span {
87
+ display: inline-block;
88
+ margin-right: 10px;
89
+ }
90
+ .steps {
91
+ width: 30px;
92
+ height: 30px;
93
+ border: 1px solid var(--_gray-300);
94
+ border-radius: 50%;
95
+ display: flex;
96
+ justify-content: center;
97
+ align-items: center;
98
+ }
75
99
  }
76
100
  .edit-btn {
77
- align-self: flex-end;
78
101
  cursor: pointer;
79
102
  padding: 0;
80
103
  background-color: var(--_ctm-dn-sn-an-bn-dn-bd-cr);
@@ -122,7 +145,7 @@ $dark-color: #343a40;
122
145
  display: flex;
123
146
  flex-direction: column;
124
147
  gap: 0.75rem;
125
- max-width: calc(100% - 200px);
148
+ max-width: 85%;
126
149
 
127
150
  @media (max-width: 500px) {
128
151
  max-width: 100%;
@@ -219,24 +242,53 @@ $dark-color: #343a40;
219
242
  }
220
243
 
221
244
  .chk_shipping_address_submit_btn {
222
- padding: 8px 24px;
245
+ padding: 16px 24px;
223
246
  width: fit-content;
224
- background-color: var(--_ctm-dn-it-bn-dn-bd-cr);
225
- border-color: var(--_ctm-dn-it-bn-dn-br-cr);
226
- border-radius: var(--_ctm-dn-it-bn-dn-br-rs);
227
- border-style: var(--_ctm-dn-it-bn-dn-br-se);
228
- border-width: var(--_ctm-dn-it-bn-dn-br-wh);
229
- color: var(--_ctm-dn-it-bn-dn-cr);
230
- font-family: var(--_ctm-dn-it-bn-dn-ft-fy);
231
- font-size: var(--_ctm-dn-it-bn-dn-ft-se);
232
- font-style: var(--_ctm-dn-it-bn-dn-ft-se-ic);
233
- font-weight: var(--_ctm-dn-it-bn-dn-ft-wt);
234
- line-height: var(--_ctm-dn-it-bn-dn-le-ht);
235
- letter-spacing: var(--_ctm-dn-it-bn-dn-lr-sg);
236
- box-shadow: var(--_ctm-dn-it-bn-dn-sw-ae) var(--_ctm-dn-it-bn-dn-sw-br)
237
- var(--_ctm-dn-it-bn-dn-sw-sd) var(--_ctm-dn-it-bn-dn-sw-cr);
238
- text-align: var(--_ctm-dn-it-bn-dn-tt-an);
239
- text-decoration: var(--_ctm-dn-it-bn-dn-ue);
247
+ background-color: var(--_primary-400);
248
+ color: var(--_base-white);
249
+ border-radius: 4px;
250
+ margin-top: 12px;
251
+ font-weight: 600;
252
+
253
+ &:hover {
254
+ background-color: var(--_primary-500);
255
+ }
256
+
257
+ // background-color: var(--_ctm-dn-it-bn-dn-dt-se-bd-cr);
258
+ // border-color: var(--_ctm-dn-it-bn-dn-dt-se-br-cr);
259
+ // border-radius: var(--_ctm-dn-it-bn-dn-dt-se-br-rs);
260
+ // border-style: var(--_ctm-dn-it-bn-dn-dt-se-br-se);
261
+ // border-width: var(--_ctm-dn-it-bn-dn-dt-se-br-wh);
262
+ // color: var(--_ctm-dn-it-bn-dn-dt-se-cr);
263
+ // font-family: var(--_ctm-dn-it-bn-dn-dt-se-ft-fy);
264
+ // font-size: var(--_ctm-dn-it-bn-dn-dt-se-ft-se);
265
+ // font-style: var(--_ctm-dn-it-bn-dn-dt-se-ft-se-ic);
266
+ // font-weight: var(--_ctm-dn-it-bn-dn-dt-se-ft-wt);
267
+ // line-height: var(--_ctm-dn-it-bn-dn-dt-se-le-ht);
268
+ // letter-spacing: var(--_ctm-dn-it-bn-dn-dt-se-lr-sg);
269
+ // box-shadow: var(--_ctm-dn-it-bn-dn-dt-se-sw-ae) var(--_ctm-dn-it-bn-dn-dt-se-sw-br)
270
+ // var(--_ctm-dn-it-bn-dn-dt-se-sw-sd) var(--_ctm-dn-it-bn-dn-dt-se-sw-cr);
271
+ // text-align: var(--_ctm-dn-it-bn-dn-dt-se-tt-an);
272
+ // text-decoration: var(--_ctm-dn-it-bn-dn-dt-se-ue);
273
+
274
+ // &:hover {
275
+ // background-color: var(--_ctm-dn-it-bn-dn-hr-se-bd-cr);
276
+ // border-color: var(--_ctm-dn-it-bn-dn-hr-se-br-cr);
277
+ // border-radius: var(--_ctm-dn-it-bn-dn-hr-se-br-rs);
278
+ // border-style: var(--_ctm-dn-it-bn-dn-hr-se-br-se);
279
+ // border-width: var(--_ctm-dn-it-bn-dn-hr-se-br-wh);
280
+ // color: var(--_ctm-dn-it-bn-dn-hr-se-cr);
281
+ // font-family: var(--_ctm-dn-it-bn-dn-hr-se-ft-fy);
282
+ // font-size: var(--_ctm-dn-it-bn-dn-hr-se-ft-se);
283
+ // font-style: var(--_ctm-dn-it-bn-dn-hr-se-ft-se-ic);
284
+ // font-weight: var(--_ctm-dn-it-bn-dn-hr-se-ft-wt);
285
+ // line-height: var(--_ctm-dn-it-bn-dn-hr-se-le-ht);
286
+ // letter-spacing: var(--_ctm-dn-it-bn-dn-hr-se-lr-sg);
287
+ // box-shadow: var(--_ctm-dn-it-bn-dn-hr-se-sw-ae) var(--_ctm-dn-it-bn-dn-hr-se-sw-br)
288
+ // var(--_ctm-dn-it-bn-dn-hr-se-sw-sd) var(--_ctm-dn-it-bn-dn-hr-se-sw-cr);
289
+ // text-align: var(--_ctm-dn-it-bn-dn-hr-se-tt-an);
290
+ // text-decoration: var(--_ctm-dn-it-bn-dn-hr-se-ue);
291
+ // }
240
292
  }
241
293
 
242
294
  .chk_shipping_address_use_as_billing_address_chkbx {
@@ -263,6 +315,9 @@ $dark-color: #343a40;
263
315
  flex-direction: column;
264
316
  gap: 16px;
265
317
  width: 100%;
318
+ &:not(:last-child) {
319
+ margin-bottom: 16px;
320
+ }
266
321
  }
267
322
 
268
323
  &_product_info_container {
@@ -285,8 +340,10 @@ $dark-color: #343a40;
285
340
  }
286
341
 
287
342
  &_product_image {
288
- height: 148px;
289
- width: 128px;
343
+ height: 120px;
344
+ width: 120px;
345
+ border: 1px solid var(--_gray-100);
346
+ border-radius: 6px;
290
347
  }
291
348
 
292
349
  &_product_info_wrapper {
@@ -299,7 +356,7 @@ $dark-color: #343a40;
299
356
  display: flex;
300
357
  flex-direction: row;
301
358
  gap: var(--_ctm-lt-im-gp);
302
- align-items: flex-start;
359
+ align-items: center;
303
360
 
304
361
  @media (max-width: 500px) {
305
362
  align-self: flex-end;
@@ -316,7 +373,7 @@ $dark-color: #343a40;
316
373
  &_shipping_option_container {
317
374
  display: flex;
318
375
  flex-direction: column;
319
- gap: 24px;
376
+ gap: 8px;
320
377
 
321
378
  @media (max-width: 500px) {
322
379
  flex-direction: row;
@@ -325,7 +382,7 @@ $dark-color: #343a40;
325
382
 
326
383
  &_shiping_option_heading_wrapper {
327
384
  display: grid;
328
- grid-template-columns: 1fr 2fr 2fr 0.5fr;
385
+ grid-template-columns: 1fr 2fr 2fr auto;
329
386
  gap: 16px;
330
387
  white-space: nowrap;
331
388
  align-items: center;
@@ -336,6 +393,7 @@ $dark-color: #343a40;
336
393
  }
337
394
 
338
395
  .chk_multi_address_icon {
396
+ cursor: pointer;
339
397
  &:hover {
340
398
  svg {
341
399
  path {
@@ -398,6 +456,10 @@ $dark-color: #343a40;
398
456
  }
399
457
 
400
458
  .shipping-method {
459
+ display: flex;
460
+ flex-direction: column;
461
+ gap: var(--_ctm-lt-im-gp);
462
+
401
463
  &__grid {
402
464
  display: grid;
403
465
  grid-template-columns: 1fr;
@@ -423,7 +485,6 @@ $dark-color: #343a40;
423
485
  &__option {
424
486
  display: flex;
425
487
  align-items: center;
426
- padding: 12px 16px;
427
488
  cursor: pointer;
428
489
  transition: all 0.2s ease;
429
490
 
@@ -496,25 +557,47 @@ $dark-color: #343a40;
496
557
  &__card_icon {
497
558
  width: 60px;
498
559
  height: 40px;
560
+ border-radius: 4px;
499
561
  }
500
562
 
501
563
  &__remove_card_btn {
502
- background-color: var(--_ctm-dn-sy-it-bn-dn-bd-cr);
503
- border-color: var(--_ctm-dn-sy-it-bn-dn-br-cr);
504
- border-radius: var(--_ctm-dn-sy-it-bn-dn-br-rs);
505
- border-style: var(--_ctm-dn-sy-it-bn-dn-br-se);
506
- border-width: var(--_ctm-dn-sy-it-bn-dn-br-wh);
507
- color: var(--_ctm-dn-sy-it-bn-dn-cr);
508
- font-family: var(--_ctm-dn-sy-it-bn-dn-ft-fy);
509
- font-size: var(--_ctm-dn-sy-it-bn-dn-ft-se);
510
- font-style: var(--_ctm-dn-sy-it-bn-dn-ft-se-ic);
511
- font-weight: var(--_ctm-dn-sy-it-bn-dn-ft-wt);
512
- line-height: var(--_ctm-dn-sy-it-bn-dn-le-ht);
513
- letter-spacing: var(--_ctm-dn-sy-it-bn-dn-lr-sg);
514
- box-shadow: var(--_ctm-dn-sy-it-bn-dn-sw-ae) var(--_ctm-dn-sy-it-bn-dn-sw-br)
515
- var(--_ctm-dn-sy-it-bn-dn-sw-sd) var(--_ctm-dn-sy-it-bn-dn-sw-cr);
516
- text-align: var(--_ctm-dn-sy-it-bn-dn-tt-an);
517
- text-decoration: var(--_ctm-dn-sy-it-bn-dn-ue);
564
+ background-color: var(--_ctm-dn-sy-it-bn-dn-dt-se-bd-cr);
565
+ border-color: var(--_ctm-dn-sy-it-bn-dn-dt-se-br-cr);
566
+ border-radius: var(--_ctm-dn-sy-it-bn-dn-dt-se-br-rs);
567
+ border-style: var(--_ctm-dn-sy-it-bn-dn-dt-se-br-se);
568
+ border-width: var(--_ctm-dn-sy-it-bn-dn-dt-se-br-wh);
569
+ color: var(--_ctm-dn-sy-it-bn-dn-dt-se-cr);
570
+ font-family: var(--_ctm-dn-sy-it-bn-dn-dt-se-ft-fy);
571
+ font-size: var(--_ctm-dn-sy-it-bn-dn-dt-se-ft-se);
572
+ font-style: var(--_ctm-dn-sy-it-bn-dn-dt-se-ft-se-ic);
573
+ font-weight: var(--_ctm-dn-sy-it-bn-dn-dt-se-ft-wt);
574
+ line-height: var(--_ctm-dn-sy-it-bn-dn-dt-se-le-ht);
575
+ letter-spacing: var(--_ctm-dn-sy-it-bn-dn-dt-se-lr-sg);
576
+ box-shadow: var(--_ctm-dn-sy-it-bn-dn-dt-se-sw-ae)
577
+ var(--_ctm-dn-sy-it-bn-dn-dt-se-sw-br) var(--_ctm-dn-sy-it-bn-dn-dt-se-sw-sd)
578
+ var(--_ctm-dn-sy-it-bn-dn-dt-se-sw-cr);
579
+ text-align: var(--_ctm-dn-sy-it-bn-dn-dt-se-tt-an);
580
+ text-decoration: var(--_ctm-dn-sy-it-bn-dn-dt-se-ue);
581
+
582
+ &:hover {
583
+ background-color: var(--_ctm-dn-sy-it-bn-dn-hr-se-bd-cr);
584
+ border-color: var(--_ctm-dn-sy-it-bn-dn-hr-se-br-cr);
585
+ border-radius: var(--_ctm-dn-sy-it-bn-dn-hr-se-br-rs);
586
+ border-style: var(--_ctm-dn-sy-it-bn-dn-hr-se-br-se);
587
+ border-width: var(--_ctm-dn-sy-it-bn-dn-hr-se-br-wh);
588
+ color: var(--_ctm-dn-sy-it-bn-dn-hr-se-cr);
589
+ font-family: var(--_ctm-dn-sy-it-bn-dn-hr-se-ft-fy);
590
+ font-size: var(--_ctm-dn-sy-it-bn-dn-hr-se-ft-se);
591
+ font-style: var(--_ctm-dn-sy-it-bn-dn-hr-se-ft-se-ic);
592
+ font-weight: var(--_ctm-dn-sy-it-bn-dn-hr-se-ft-wt);
593
+ line-height: var(--_ctm-dn-sy-it-bn-dn-hr-se-le-ht);
594
+ letter-spacing: var(--_ctm-dn-sy-it-bn-dn-hr-se-lr-sg);
595
+ box-shadow: var(--_ctm-dn-sy-it-bn-dn-hr-se-sw-ae)
596
+ var(--_ctm-dn-sy-it-bn-dn-hr-se-sw-br) var(--_ctm-dn-sy-it-bn-dn-hr-se-sw-sd)
597
+ var(--_ctm-dn-sy-it-bn-dn-hr-se-sw-cr);
598
+ text-align: var(--_ctm-dn-sy-it-bn-dn-hr-se-tt-an);
599
+ text-decoration: var(--_ctm-dn-sy-it-bn-dn-hr-se-ue);
600
+ }
518
601
  }
519
602
 
520
603
  &__info_wrapper {
@@ -714,7 +797,7 @@ $dark-color: #343a40;
714
797
  .chk_shipping_address_submit_btn {
715
798
  padding: 8px 24px;
716
799
  width: fit-content;
717
- background-color: var(--_ctm-dn-it-bn-dn-bd-cr);
800
+ background-color: var(--_ctm-dn-it-bn-dn-bd-cr, var(--_primary-400));
718
801
  border-color: var(--_ctm-dn-it-bn-dn-br-cr);
719
802
  border-radius: var(--_ctm-dn-it-bn-dn-br-rs);
720
803
  border-style: var(--_ctm-dn-it-bn-dn-br-se);
@@ -745,22 +828,43 @@ $dark-color: #343a40;
745
828
  }
746
829
 
747
830
  &_secondary_button {
748
- background-color: var(--_ctm-dn-sy-it-bn-dn-bd-cr);
749
- border-color: var(--_ctm-dn-sy-it-bn-dn-br-cr);
750
- border-radius: var(--_ctm-dn-sy-it-bn-dn-br-rs);
751
- border-style: var(--_ctm-dn-sy-it-bn-dn-br-se);
752
- border-width: var(--_ctm-dn-sy-it-bn-dn-br-wh);
753
- color: var(--_ctm-dn-sy-it-bn-dn-cr);
754
- font-family: var(--_ctm-dn-sy-it-bn-dn-ft-fy);
755
- font-size: var(--_ctm-dn-sy-it-bn-dn-ft-se);
756
- font-style: var(--_ctm-dn-sy-it-bn-dn-ft-se-ic);
757
- font-weight: var(--_ctm-dn-sy-it-bn-dn-ft-wt);
758
- line-height: var(--_ctm-dn-sy-it-bn-dn-le-ht);
759
- letter-spacing: var(--_ctm-dn-sy-it-bn-dn-lr-sg);
760
- box-shadow: var(--_ctm-dn-sy-it-bn-dn-sw-ae) var(--_ctm-dn-sy-it-bn-dn-sw-br)
761
- var(--_ctm-dn-sy-it-bn-dn-sw-sd) var(--_ctm-dn-sy-it-bn-dn-sw-cr);
762
- text-align: var(--_ctm-dn-sy-it-bn-dn-tt-an);
763
- text-decoration: var(--_ctm-dn-sy-it-bn-dn-ue);
831
+ background-color: var(--_ctm-dn-sy-it-bn-dn-dt-se-bd-cr);
832
+ border-color: var(--_ctm-dn-sy-it-bn-dn-dt-se-br-cr);
833
+ border-radius: var(--_ctm-dn-sy-it-bn-dn-dt-se-br-rs);
834
+ border-style: var(--_ctm-dn-sy-it-bn-dn-dt-se-br-se);
835
+ border-width: var(--_ctm-dn-sy-it-bn-dn-dt-se-br-wh);
836
+ color: var(--_ctm-dn-sy-it-bn-dn-dt-se-cr);
837
+ font-family: var(--_ctm-dn-sy-it-bn-dn-dt-se-ft-fy);
838
+ font-size: var(--_ctm-dn-sy-it-bn-dn-dt-se-ft-se);
839
+ font-style: var(--_ctm-dn-sy-it-bn-dn-dt-se-ft-se-ic);
840
+ font-weight: var(--_ctm-dn-sy-it-bn-dn-dt-se-ft-wt);
841
+ line-height: var(--_ctm-dn-sy-it-bn-dn-dt-se-le-ht);
842
+ letter-spacing: var(--_ctm-dn-sy-it-bn-dn-dt-se-lr-sg);
843
+ box-shadow: var(--_ctm-dn-sy-it-bn-dn-dt-se-sw-ae)
844
+ var(--_ctm-dn-sy-it-bn-dn-dt-se-sw-br) var(--_ctm-dn-sy-it-bn-dn-dt-se-sw-sd)
845
+ var(--_ctm-dn-sy-it-bn-dn-dt-se-sw-cr);
846
+ text-align: var(--_ctm-dn-sy-it-bn-dn-dt-se-tt-an);
847
+ text-decoration: var(--_ctm-dn-sy-it-bn-dn-dt-se-ue);
848
+
849
+ &:hover {
850
+ background-color: var(--_ctm-dn-sy-it-bn-dn-hr-se-bd-cr);
851
+ border-color: var(--_ctm-dn-sy-it-bn-dn-hr-se-br-cr);
852
+ border-radius: var(--_ctm-dn-sy-it-bn-dn-hr-se-br-rs);
853
+ border-style: var(--_ctm-dn-sy-it-bn-dn-hr-se-br-se);
854
+ border-width: var(--_ctm-dn-sy-it-bn-dn-hr-se-br-wh);
855
+ color: var(--_ctm-dn-sy-it-bn-dn-hr-se-cr);
856
+ font-family: var(--_ctm-dn-sy-it-bn-dn-hr-se-ft-fy);
857
+ font-size: var(--_ctm-dn-sy-it-bn-dn-hr-se-ft-se);
858
+ font-style: var(--_ctm-dn-sy-it-bn-dn-hr-se-ft-se-ic);
859
+ font-weight: var(--_ctm-dn-sy-it-bn-dn-hr-se-ft-wt);
860
+ line-height: var(--_ctm-dn-sy-it-bn-dn-hr-se-le-ht);
861
+ letter-spacing: var(--_ctm-dn-sy-it-bn-dn-hr-se-lr-sg);
862
+ box-shadow: var(--_ctm-dn-sy-it-bn-dn-hr-se-sw-ae)
863
+ var(--_ctm-dn-sy-it-bn-dn-hr-se-sw-br) var(--_ctm-dn-sy-it-bn-dn-hr-se-sw-sd)
864
+ var(--_ctm-dn-sy-it-bn-dn-hr-se-sw-cr);
865
+ text-align: var(--_ctm-dn-sy-it-bn-dn-hr-se-tt-an);
866
+ text-decoration: var(--_ctm-dn-sy-it-bn-dn-hr-se-ue);
867
+ }
764
868
  }
765
869
 
766
870
  &_button_wrapper {
@@ -777,6 +881,9 @@ $dark-color: #343a40;
777
881
  border-bottom-width: thin;
778
882
  display: flex;
779
883
  justify-content: space-between;
884
+ &.px_0 {
885
+ padding-inline: 0px;
886
+ }
780
887
  }
781
888
 
782
889
  .chk_payment-card {
@@ -931,23 +1038,54 @@ $dark-color: #343a40;
931
1038
  }
932
1039
 
933
1040
  .chk_submit-btn {
934
- padding: 8px 24px;
935
- background-color: var(--_ctm-dn-it-bn-dn-bd-cr);
936
- border-color: var(--_ctm-dn-it-bn-dn-br-cr);
937
- border-radius: var(--_ctm-dn-it-bn-dn-br-rs);
938
- border-style: var(--_ctm-dn-it-bn-dn-br-se);
939
- border-width: var(--_ctm-dn-it-bn-dn-br-wh);
940
- color: var(--_ctm-dn-it-bn-dn-cr);
941
- font-family: var(--_ctm-dn-it-bn-dn-ft-fy);
942
- font-size: var(--_ctm-dn-it-bn-dn-ft-se);
943
- font-style: var(--_ctm-dn-it-bn-dn-ft-se-ic);
944
- font-weight: var(--_ctm-dn-it-bn-dn-ft-wt);
945
- line-height: var(--_ctm-dn-it-bn-dn-le-ht);
946
- letter-spacing: var(--_ctm-dn-it-bn-dn-lr-sg);
947
- box-shadow: var(--_ctm-dn-it-bn-dn-sw-ae) var(--_ctm-dn-it-bn-dn-sw-br)
948
- var(--_ctm-dn-it-bn-dn-sw-sd) var(--_ctm-dn-it-bn-dn-sw-cr);
949
- text-align: var(--_ctm-dn-it-bn-dn-tt-an);
950
- text-decoration: var(--_ctm-dn-it-bn-dn-ue);
1041
+ padding: 16px 24px;
1042
+ width: fit-content;
1043
+ background-color: var(--_primary-400);
1044
+ color: var(--_base-white);
1045
+ border-radius: 4px;
1046
+ margin-top: 12px;
1047
+ font-weight: 600;
1048
+
1049
+ &:hover {
1050
+ background-color: var(--_primary-500);
1051
+ }
1052
+ // padding: 8px 24px;
1053
+ // width: fit-content;
1054
+ // background-color: var(--_ctm-dn-it-bn-dn-dt-se-bd-cr);
1055
+ // border-color: var(--_ctm-dn-it-bn-dn-dt-se-br-cr);
1056
+ // border-radius: var(--_ctm-dn-it-bn-dn-dt-se-br-rs);
1057
+ // border-style: var(--_ctm-dn-it-bn-dn-dt-se-br-se);
1058
+ // border-width: var(--_ctm-dn-it-bn-dn-dt-se-br-wh);
1059
+ // color: var(--_ctm-dn-it-bn-dn-dt-se-cr);
1060
+ // font-family: var(--_ctm-dn-it-bn-dn-dt-se-ft-fy);
1061
+ // font-size: var(--_ctm-dn-it-bn-dn-dt-se-ft-se);
1062
+ // font-style: var(--_ctm-dn-it-bn-dn-dt-se-ft-se-ic);
1063
+ // font-weight: var(--_ctm-dn-it-bn-dn-dt-se-ft-wt);
1064
+ // line-height: var(--_ctm-dn-it-bn-dn-dt-se-le-ht);
1065
+ // letter-spacing: var(--_ctm-dn-it-bn-dn-dt-se-lr-sg);
1066
+ // box-shadow: var(--_ctm-dn-it-bn-dn-dt-se-sw-ae) var(--_ctm-dn-it-bn-dn-dt-se-sw-br)
1067
+ // var(--_ctm-dn-it-bn-dn-dt-se-sw-sd) var(--_ctm-dn-it-bn-dn-dt-se-sw-cr);
1068
+ // text-align: var(--_ctm-dn-it-bn-dn-dt-se-tt-an);
1069
+ // text-decoration: var(--_ctm-dn-it-bn-dn-dt-se-ue);
1070
+
1071
+ // &:hover {
1072
+ // background-color: var(--_ctm-dn-it-bn-dn-hr-se-bd-cr);
1073
+ // border-color: var(--_ctm-dn-it-bn-dn-hr-se-br-cr);
1074
+ // border-radius: var(--_ctm-dn-it-bn-dn-hr-se-br-rs);
1075
+ // border-style: var(--_ctm-dn-it-bn-dn-hr-se-br-se);
1076
+ // border-width: var(--_ctm-dn-it-bn-dn-hr-se-br-wh);
1077
+ // color: var(--_ctm-dn-it-bn-dn-hr-se-cr);
1078
+ // font-family: var(--_ctm-dn-it-bn-dn-hr-se-ft-fy);
1079
+ // font-size: var(--_ctm-dn-it-bn-dn-hr-se-ft-se);
1080
+ // font-style: var(--_ctm-dn-it-bn-dn-hr-se-ft-se-ic);
1081
+ // font-weight: var(--_ctm-dn-it-bn-dn-hr-se-ft-wt);
1082
+ // line-height: var(--_ctm-dn-it-bn-dn-hr-se-le-ht);
1083
+ // letter-spacing: var(--_ctm-dn-it-bn-dn-hr-se-lr-sg);
1084
+ // box-shadow: var(--_ctm-dn-it-bn-dn-hr-se-sw-ae) var(--_ctm-dn-it-bn-dn-hr-se-sw-br)
1085
+ // var(--_ctm-dn-it-bn-dn-hr-se-sw-sd) var(--_ctm-dn-it-bn-dn-hr-se-sw-cr);
1086
+ // text-align: var(--_ctm-dn-it-bn-dn-hr-se-tt-an);
1087
+ // text-decoration: var(--_ctm-dn-it-bn-dn-hr-se-ue);
1088
+ // }
951
1089
  }
952
1090
 
953
1091
  .chk_checkbox_wrapper {
@@ -1078,7 +1216,7 @@ $dark-color: #343a40;
1078
1216
  align-items: center;
1079
1217
  background-color: var(--_ctm-dn-sn-an-bn-dn-bd-cr);
1080
1218
  border-color: var(--_ctm-dn-sn-an-bn-dn-br-cr);
1081
- border-radius: var(--_ctm-dn-sn-an-bn-dn-br-rs);
1219
+ // border-radius: var(--_ctm-dn-sn-an-bn-dn-br-rs);
1082
1220
  border-style: var(--_ctm-dn-sn-an-bn-dn-br-se);
1083
1221
  border-width: var(--_ctm-dn-sn-an-bn-dn-br-wh);
1084
1222
  color: var(--_ctm-dn-sn-an-bn-dn-cr);
@@ -1101,7 +1239,8 @@ $dark-color: #343a40;
1101
1239
  gap: 6px;
1102
1240
  background-color: var(--_ctm-dn-ne-cr-dn-bd-cr);
1103
1241
  border-color: var(--_ctm-dn-ne-cr-dn-br-cr);
1104
- border-radius: var(--_ctm-dn-ne-cr-dn-br-rs);
1242
+ // border-radius: var(--_ctm-dn-ne-cr-dn-br-rs);
1243
+ border-radius: 0 0 4px 4px;
1105
1244
  border-style: var(--_ctm-dn-ne-cr-dn-br-se);
1106
1245
  border-width: var(--_ctm-dn-ne-cr-dn-br-wh);
1107
1246
  color: var(--_ctm-dn-ne-cr-dn-cr);
@@ -1115,8 +1254,8 @@ $dark-color: #343a40;
1115
1254
  var(--_ctm-dn-ne-cr-dn-sw-sd) var(--_ctm-dn-ne-cr-dn-sw-cr);
1116
1255
  text-align: var(--_ctm-dn-ne-cr-dn-tt-an);
1117
1256
  text-decoration: var(--_ctm-dn-ne-cr-dn-ue);
1118
-
1119
1257
  .icon {
1258
+ display: flex;
1120
1259
  svg {
1121
1260
  width: var(--_ctm-dn-ne-cr-dn-in-se);
1122
1261
  height: var(--_ctm-dn-ne-cr-dn-in-se);
@@ -1167,4 +1306,11 @@ $dark-color: #343a40;
1167
1306
  }
1168
1307
  }
1169
1308
  }
1309
+
1310
+ .chk_primary_btn_link {
1311
+ color: var(--_primary-400);
1312
+ &:hover {
1313
+ color: var(--_primary-500);
1314
+ }
1315
+ }
1170
1316
  }
@@ -1,5 +1,6 @@
1
1
  @use "sass:map";
2
2
  @use "sass:list";
3
+ @use "./form-zindex-module.scss" as *;
3
4
 
4
5
  [data-div-type="element"] {
5
6
  &[data-element-type="contactUs"],
@@ -22,6 +23,8 @@
22
23
  // justify-content: center;
23
24
  // width: 100%;
24
25
  // height: 100%;
26
+
27
+ @include FlexFormZindexModuleStyles();
25
28
  }
26
29
 
27
30
  & form {
@@ -86,6 +86,12 @@
86
86
  .dropdown__clear__icon,
87
87
  .dropdown__icon {
88
88
  cursor: pointer;
89
+ .icon svg {
90
+ vertical-align: middle;
91
+ }
92
+ .icon.down svg {
93
+ transform: rotate(180deg);
94
+ }
89
95
  }
90
96
  .dropdown__clear__icon {
91
97
  position: absolute;
@@ -94,7 +100,7 @@
94
100
  .dropdown-menu {
95
101
  position: absolute;
96
102
  width: 100%;
97
- top: 35px;
103
+ top: 40px;
98
104
  left: 0px;
99
105
  right: 24px;
100
106
  background: white;
@@ -105,7 +111,6 @@
105
111
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
106
112
  z-index: 10;
107
113
  min-width: 240px;
108
- min-height: 300px;
109
114
  max-height: 300px;
110
115
 
111
116
  .dropdown-opt {
@@ -247,3 +252,9 @@
247
252
  text-overflow: ellipsis;
248
253
  white-space: nowrap;
249
254
  }
255
+ .no_data_found {
256
+ position: absolute;
257
+ top: 50%;
258
+ left: 50%;
259
+ transform: translate(-50%, -50%);
260
+ }
@@ -77,8 +77,11 @@
77
77
 
78
78
  ul {
79
79
  list-style: none;
80
- padding: 4px 0;
80
+ padding: 4px;
81
81
  margin: 0;
82
+ display: flex;
83
+ flex-direction: column;
84
+ gap: 2px;
82
85
 
83
86
  li {
84
87
  padding: 0;
@@ -93,6 +96,7 @@
93
96
  color: var(--_gray-700);
94
97
  cursor: pointer;
95
98
  transition: background 0.2s;
99
+ border-radius: 4px;
96
100
 
97
101
  input[type="checkbox"] {
98
102
  margin: 0;
@@ -105,7 +109,7 @@
105
109
  }
106
110
 
107
111
  &.selected {
108
- background-color: var(--_primary-100);
112
+ background-color: var(--_primary-25);
109
113
  color: var(--_primary-700);
110
114
  font-weight: 500;
111
115
  }
package/dist/filters.scss CHANGED
@@ -2176,7 +2176,6 @@ $resizeActive: '[data-cms-element-resizer="true"]';
2176
2176
  border: 1px solid #ddd;
2177
2177
  border-radius: 5px;
2178
2178
  white-space: nowrap;
2179
- z-index: 1;
2180
2179
  padding-inline: 15px;
2181
2180
  }
2182
2181