@sc-360-v2/storefront-cms-library 0.3.29 → 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 (39) hide show
  1. package/dist/animation-control.scss +23 -0
  2. package/dist/builder.js +1 -1
  3. package/dist/bulk-order-pad.scss +72 -7
  4. package/dist/cart-details.scss +570 -278
  5. package/dist/cart-summary.scss +102 -73
  6. package/dist/cartDropdownOverlay.scss +10 -5
  7. package/dist/checkout.scss +130 -77
  8. package/dist/contact-us.scss +3 -0
  9. package/dist/dropdownTemplate.scss +13 -2
  10. package/dist/fb-dropdown.scss +6 -2
  11. package/dist/form-preview.scss +24 -1
  12. package/dist/form-zindex-module.scss +25 -0
  13. package/dist/functions.scss +72 -2
  14. package/dist/icons.js +1 -1
  15. package/dist/index.js +1 -1
  16. package/dist/light-box-v2.scss +1 -1
  17. package/dist/modal.scss +60 -33
  18. package/dist/position-module.scss +74 -0
  19. package/dist/prefix-list.scss +55 -0
  20. package/dist/quick-order-pad.scss +36 -8
  21. package/dist/responsive-behaviour.scss +21 -0
  22. package/dist/section.scss +13 -9
  23. package/dist/shareCartSideBar.scss +4 -2
  24. package/dist/submit-quote.scss +107 -49
  25. package/dist/types/builder/interfaces/global.d.ts +13 -0
  26. package/dist/types/builder/tools/element-edit/amountEstimator.d.ts +441 -0
  27. package/dist/types/builder/tools/element-edit/buttonInstance.d.ts +364 -0
  28. package/dist/types/builder/tools/element-edit/cartSummary.d.ts +2 -2
  29. package/dist/types/builder/tools/element-edit/common.d.ts +1 -0
  30. package/dist/types/builder/tools/element-edit/countdown.d.ts +384 -44
  31. package/dist/types/builder/tools/element-edit/dummy.d.ts +0 -0
  32. package/dist/types/builder/tools/element-edit/productActions.d.ts +390 -43
  33. package/dist/types/builder/tools/element-edit/quickLinks.d.ts +192 -22
  34. package/dist/types/builder/tools/element-edit/repeater.d.ts +439 -1
  35. package/dist/types/builder/tools/element-edit/table.d.ts +0 -1
  36. package/dist/types/builder/tools/element-edit/typographyInstance.d.ts +981 -0
  37. package/dist/types/builder/tools/element-edit/video.d.ts +192 -22
  38. package/dist/types/global/types.d.ts +2 -0
  39. package/package.json +1 -1
@@ -30,11 +30,12 @@ $resizeActive: '[data-cms-element-resizer="true"]';
30
30
  align-items: center;
31
31
  align-self: stretch;
32
32
  border-radius: 4px;
33
- border: 0.5px solid #d0d5dd;
34
- background: #fff;
33
+ border: 1px solid var(--_gray-300);
34
+ background: var(--_base-white);
35
35
  // gap: var(--_ctm-lt-im-gp);
36
36
  padding: var(--_ctm-lt-pg);
37
37
  word-break: keep-all;
38
+ overflow: hidden;
38
39
 
39
40
  .cart_summary_heading_wrapper {
40
41
  display: flex;
@@ -49,7 +50,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
49
50
  border-width: var(--_ctm-dn-te-cr-dn-br-wh);
50
51
  box-shadow: var(--_ctm-dn-te-cr-dn-sw-ae) var(--_ctm-dn-te-cr-dn-sw-br)
51
52
  var(--_ctm-dn-te-cr-dn-sw-sd) var(--_ctm-dn-te-cr-dn-sw-cr);
52
-
53
+ border-bottom: 1px solid var(--_gray-300);
53
54
  .cart_summary_heading {
54
55
  width: 100%;
55
56
  color: var(--_ctm-dn-te-dn-cr);
@@ -124,8 +125,8 @@ $resizeActive: '[data-cms-element-resizer="true"]';
124
125
  width: 100%;
125
126
  padding: 8px 12px;
126
127
  border-radius: 8px;
127
- border: 1px solid #d0d5dd;
128
- background-color: #ffffff;
128
+ border: 1px solid var(--_gray-200);
129
+ background-color: var(--_base-white);
129
130
  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
130
131
  font-size: 16px;
131
132
  line-height: 24px;
@@ -136,16 +137,19 @@ $resizeActive: '[data-cms-element-resizer="true"]';
136
137
  display: flex;
137
138
  flex: 1 0 0;
138
139
  flex-wrap: wrap;
139
- color: green;
140
+ color: var(--_success-500);
140
141
  }
141
142
 
142
143
  .error_message {
143
144
  display: flex;
144
145
  flex: 1 0 0;
145
146
  flex-wrap: wrap;
146
- color: red;
147
+ color: var(--_error-500);
147
148
  }
148
149
  }
150
+ .border_dashed {
151
+ border: 1px dashed var(--_gray-300);
152
+ }
149
153
 
150
154
  .subtotal_wrapper {
151
155
  display: flex;
@@ -205,82 +209,107 @@ $resizeActive: '[data-cms-element-resizer="true"]';
205
209
  }
206
210
 
207
211
  .cart_summary_primary_btn_wrapper {
208
- padding: var(--_ctm-lt-bn-pg) calc(var(--_ctm-lt-bn-pg) * 2);
212
+ // padding: var(--_ctm-lt-bn-pg) calc(var(--_ctm-lt-bn-pg) * 2);
213
+ // width: 100%;
214
+ // background-color: var(--_ctm-dn-py-bn-dn-dt-se-bd-cr);
215
+ // border-color: var(--_ctm-dn-py-bn-dn-dt-se-br-cr);
216
+ // border-radius: var(--_ctm-dn-py-bn-dn-dt-se-br-rs);
217
+ // border-style: var(--_ctm-dn-py-bn-dn-dt-se-br-se);
218
+ // border-width: var(--_ctm-dn-py-bn-dn-dt-se-br-wh);
219
+ // color: var(--_ctm-dn-py-bn-dn-dt-se-cr);
220
+ // font-family: var(--_ctm-dn-py-bn-dn-dt-se-ft-fy);
221
+ // font-size: var(--_ctm-dn-py-bn-dn-dt-se-ft-se);
222
+ // font-style: var(--_ctm-dn-py-bn-dn-dt-se-ft-se-ic);
223
+ // font-weight: var(--_ctm-dn-py-bn-dn-dt-se-ft-wt);
224
+ // line-height: var(--_ctm-dn-py-bn-dn-dt-se-le-ht);
225
+ // letter-spacing: var(--_ctm-dn-py-bn-dn-dt-se-lr-sg);
226
+ // box-shadow: var(--_ctm-dn-py-bn-dn-dt-se-sw-ae) var(--_ctm-dn-py-bn-dn-dt-se-sw-br)
227
+ // var(--_ctm-dn-py-bn-dn-dt-se-sw-sd) var(--_ctm-dn-py-bn-dn-dt-se-sw-cr);
228
+ // text-align: var(--_ctm-dn-py-bn-dn-dt-se-tt-an);
229
+ // text-decoration: var(--_ctm-dn-py-bn-dn-dt-se-ue);
230
+
231
+ // &:hover {
232
+ // background-color: var(--_ctm-dn-py-bn-dn-hr-se-bd-cr);
233
+ // border-color: var(--_ctm-dn-py-bn-dn-hr-se-br-cr);
234
+ // border-radius: var(--_ctm-dn-py-bn-dn-hr-se-br-rs);
235
+ // border-style: var(--_ctm-dn-py-bn-dn-hr-se-br-se);
236
+ // border-width: var(--_ctm-dn-py-bn-dn-hr-se-br-wh);
237
+ // color: var(--_ctm-dn-py-bn-dn-hr-se-cr);
238
+ // font-family: var(--_ctm-dn-py-bn-dn-hr-se-ft-fy);
239
+ // font-size: var(--_ctm-dn-py-bn-dn-hr-se-ft-se);
240
+ // font-style: var(--_ctm-dn-py-bn-dn-hr-se-ft-se-ic);
241
+ // font-weight: var(--_ctm-dn-py-bn-dn-hr-se-ft-wt);
242
+ // line-height: var(--_ctm-dn-py-bn-dn-hr-se-le-ht);
243
+ // letter-spacing: var(--_ctm-dn-py-bn-dn-hr-se-lr-sg);
244
+ // box-shadow: var(--_ctm-dn-py-bn-dn-hr-se-sw-ae) var(--_ctm-dn-py-bn-dn-hr-se-sw-br)
245
+ // var(--_ctm-dn-py-bn-dn-hr-se-sw-sd) var(--_ctm-dn-py-bn-dn-hr-se-sw-cr);
246
+ // text-align: var(--_ctm-dn-py-bn-dn-hr-se-tt-an);
247
+ // text-decoration: var(--_ctm-dn-py-bn-dn-hr-se-ue);
248
+ // }
249
+ padding: 16px 24px;
250
+ width: fit-content;
251
+ background-color: var(--_primary-400);
252
+ color: var(--_base-white);
253
+ border-radius: 4px;
254
+ margin-top: 12px;
255
+ font-weight: 600;
209
256
  width: 100%;
210
- background-color: var(--_ctm-dn-py-bn-dn-dt-se-bd-cr);
211
- border-color: var(--_ctm-dn-py-bn-dn-dt-se-br-cr);
212
- border-radius: var(--_ctm-dn-py-bn-dn-dt-se-br-rs);
213
- border-style: var(--_ctm-dn-py-bn-dn-dt-se-br-se);
214
- border-width: var(--_ctm-dn-py-bn-dn-dt-se-br-wh);
215
- color: var(--_ctm-dn-py-bn-dn-dt-se-cr);
216
- font-family: var(--_ctm-dn-py-bn-dn-dt-se-ft-fy);
217
- font-size: var(--_ctm-dn-py-bn-dn-dt-se-ft-se);
218
- font-style: var(--_ctm-dn-py-bn-dn-dt-se-ft-se-ic);
219
- font-weight: var(--_ctm-dn-py-bn-dn-dt-se-ft-wt);
220
- line-height: var(--_ctm-dn-py-bn-dn-dt-se-le-ht);
221
- letter-spacing: var(--_ctm-dn-py-bn-dn-dt-se-lr-sg);
222
- box-shadow: var(--_ctm-dn-py-bn-dn-dt-se-sw-ae) var(--_ctm-dn-py-bn-dn-dt-se-sw-br)
223
- var(--_ctm-dn-py-bn-dn-dt-se-sw-sd) var(--_ctm-dn-py-bn-dn-dt-se-sw-cr);
224
- text-align: var(--_ctm-dn-py-bn-dn-dt-se-tt-an);
225
- text-decoration: var(--_ctm-dn-py-bn-dn-dt-se-ue);
226
257
 
227
258
  &:hover {
228
- background-color: var(--_ctm-dn-py-bn-dn-hr-se-bd-cr);
229
- border-color: var(--_ctm-dn-py-bn-dn-hr-se-br-cr);
230
- border-radius: var(--_ctm-dn-py-bn-dn-hr-se-br-rs);
231
- border-style: var(--_ctm-dn-py-bn-dn-hr-se-br-se);
232
- border-width: var(--_ctm-dn-py-bn-dn-hr-se-br-wh);
233
- color: var(--_ctm-dn-py-bn-dn-hr-se-cr);
234
- font-family: var(--_ctm-dn-py-bn-dn-hr-se-ft-fy);
235
- font-size: var(--_ctm-dn-py-bn-dn-hr-se-ft-se);
236
- font-style: var(--_ctm-dn-py-bn-dn-hr-se-ft-se-ic);
237
- font-weight: var(--_ctm-dn-py-bn-dn-hr-se-ft-wt);
238
- line-height: var(--_ctm-dn-py-bn-dn-hr-se-le-ht);
239
- letter-spacing: var(--_ctm-dn-py-bn-dn-hr-se-lr-sg);
240
- box-shadow: var(--_ctm-dn-py-bn-dn-hr-se-sw-ae) var(--_ctm-dn-py-bn-dn-hr-se-sw-br)
241
- var(--_ctm-dn-py-bn-dn-hr-se-sw-sd) var(--_ctm-dn-py-bn-dn-hr-se-sw-cr);
242
- text-align: var(--_ctm-dn-py-bn-dn-hr-se-tt-an);
243
- text-decoration: var(--_ctm-dn-py-bn-dn-hr-se-ue);
259
+ background-color: var(--_primary-500);
244
260
  }
245
261
  }
246
262
 
247
263
  .submit_quotes {
248
- padding: var(--_ctm-lt-bn-pg) calc(var(--_ctm-lt-bn-pg) * 2);
264
+ // padding: var(--_ctm-lt-bn-pg) calc(var(--_ctm-lt-bn-pg) * 2);
265
+ // width: 100%;
266
+ // border-color: var(--_ctm-dn-py-bn-dn-dt-se-bd-cr);
267
+ // border-radius: var(--_ctm-dn-py-bn-dn-dt-se-br-rs);
268
+ // border-style: var(--_ctm-dn-py-bn-dn-dt-se-br-se);
269
+ // border-width: 1px;
270
+ // background: white;
271
+ // color: var(--_ctm-dn-py-bn-dn-dt-se-bd-cr);
272
+ // font-family: var(--_ctm-dn-py-bn-dn-dt-se-ft-fy);
273
+ // font-size: var(--_ctm-dn-py-bn-dn-dt-se-ft-se);
274
+ // font-style: var(--_ctm-dn-py-bn-dn-dt-se-ft-se-ic);
275
+ // font-weight: var(--_ctm-dn-py-bn-dn-dt-se-ft-wt);
276
+ // line-height: var(--_ctm-dn-py-bn-dn-dt-se-le-ht);
277
+ // letter-spacing: var(--_ctm-dn-py-bn-dn-dt-se-lr-sg);
278
+ // box-shadow: var(--_ctm-dn-py-bn-dn-dt-se-sw-ae) var(--_ctm-dn-py-bn-dn-dt-se-sw-br)
279
+ // var(--_ctm-dn-py-bn-dn-dt-se-sw-sd) var(--_ctm-dn-py-bn-dn-dt-se-sw-cr);
280
+ // text-align: var(--_ctm-dn-py-bn-dn-dt-se-tt-an);
281
+ // text-decoration: var(--_ctm-dn-py-bn-dn-dt-se-ue);
282
+
283
+ // &:hover {
284
+ // border-color: var(--_ctm-dn-py-bn-dn-hr-se-bd-cr);
285
+ // border-radius: var(--_ctm-dn-py-bn-dn-hr-se-br-rs);
286
+ // border-style: var(--_ctm-dn-py-bn-dn-hr-se-br-se);
287
+ // border-width: 1px;
288
+ // background: white;
289
+ // color: var(--_ctm-dn-py-bn-dn-hr-se-bd-cr);
290
+ // font-family: var(--_ctm-dn-py-bn-dn-hr-se-ft-fy);
291
+ // font-size: var(--_ctm-dn-py-bn-dn-hr-se-ft-se);
292
+ // font-style: var(--_ctm-dn-py-bn-dn-hr-se-ft-se-ic);
293
+ // font-weight: var(--_ctm-dn-py-bn-dn-hr-se-ft-wt);
294
+ // line-height: var(--_ctm-dn-py-bn-dn-hr-se-le-ht);
295
+ // letter-spacing: var(--_ctm-dn-py-bn-dn-hr-se-lr-sg);
296
+ // box-shadow: var(--_ctm-dn-py-bn-dn-hr-se-sw-ae) var(--_ctm-dn-py-bn-dn-hr-se-sw-br)
297
+ // var(--_ctm-dn-py-bn-dn-hr-se-sw-sd) var(--_ctm-dn-py-bn-dn-hr-se-sw-cr);
298
+ // text-align: var(--_ctm-dn-py-bn-dn-hr-se-tt-an);
299
+ // text-decoration: var(--_ctm-dn-py-bn-dn-hr-se-ue);
300
+ // }
301
+ padding: 16px 24px;
302
+ width: fit-content;
303
+ background-color: var(--_base-white);
304
+ color: var(--_gray-600);
305
+ border-radius: 4px;
306
+ font-weight: 600;
249
307
  width: 100%;
250
- border-color: var(--_ctm-dn-py-bn-dn-dt-se-bd-cr);
251
- border-radius: var(--_ctm-dn-py-bn-dn-dt-se-br-rs);
252
- border-style: var(--_ctm-dn-py-bn-dn-dt-se-br-se);
253
- border-width: 1px;
254
- background: white;
255
- color: var(--_ctm-dn-py-bn-dn-dt-se-bd-cr);
256
- font-family: var(--_ctm-dn-py-bn-dn-dt-se-ft-fy);
257
- font-size: var(--_ctm-dn-py-bn-dn-dt-se-ft-se);
258
- font-style: var(--_ctm-dn-py-bn-dn-dt-se-ft-se-ic);
259
- font-weight: var(--_ctm-dn-py-bn-dn-dt-se-ft-wt);
260
- line-height: var(--_ctm-dn-py-bn-dn-dt-se-le-ht);
261
- letter-spacing: var(--_ctm-dn-py-bn-dn-dt-se-lr-sg);
262
- box-shadow: var(--_ctm-dn-py-bn-dn-dt-se-sw-ae) var(--_ctm-dn-py-bn-dn-dt-se-sw-br)
263
- var(--_ctm-dn-py-bn-dn-dt-se-sw-sd) var(--_ctm-dn-py-bn-dn-dt-se-sw-cr);
264
- text-align: var(--_ctm-dn-py-bn-dn-dt-se-tt-an);
265
- text-decoration: var(--_ctm-dn-py-bn-dn-dt-se-ue);
308
+ border: 1px solid var(--_gray-300);
266
309
 
267
310
  &:hover {
268
- border-color: var(--_ctm-dn-py-bn-dn-hr-se-bd-cr);
269
- border-radius: var(--_ctm-dn-py-bn-dn-hr-se-br-rs);
270
- border-style: var(--_ctm-dn-py-bn-dn-hr-se-br-se);
271
- border-width: 1px;
272
- background: white;
273
- color: var(--_ctm-dn-py-bn-dn-hr-se-bd-cr);
274
- font-family: var(--_ctm-dn-py-bn-dn-hr-se-ft-fy);
275
- font-size: var(--_ctm-dn-py-bn-dn-hr-se-ft-se);
276
- font-style: var(--_ctm-dn-py-bn-dn-hr-se-ft-se-ic);
277
- font-weight: var(--_ctm-dn-py-bn-dn-hr-se-ft-wt);
278
- line-height: var(--_ctm-dn-py-bn-dn-hr-se-le-ht);
279
- letter-spacing: var(--_ctm-dn-py-bn-dn-hr-se-lr-sg);
280
- box-shadow: var(--_ctm-dn-py-bn-dn-hr-se-sw-ae) var(--_ctm-dn-py-bn-dn-hr-se-sw-br)
281
- var(--_ctm-dn-py-bn-dn-hr-se-sw-sd) var(--_ctm-dn-py-bn-dn-hr-se-sw-cr);
282
- text-align: var(--_ctm-dn-py-bn-dn-hr-se-tt-an);
283
- text-decoration: var(--_ctm-dn-py-bn-dn-hr-se-ue);
311
+ background-color: var(--_primary-50);
312
+ color: var(--_primary-500);
284
313
  }
285
314
  }
286
315
 
@@ -77,7 +77,8 @@ $button-padding: 6px 12px;
77
77
  z-index: 1000;
78
78
  display: flex;
79
79
  flex-direction: column;
80
- // width: 220px;
80
+ width: 260px;
81
+ top: 24px;
81
82
  .header-template {
82
83
  display: flex;
83
84
  align-items: center;
@@ -111,11 +112,13 @@ $button-padding: 6px 12px;
111
112
  .option {
112
113
  display: flex;
113
114
  align-items: center;
114
- padding: 8px $spacing-md;
115
+ padding: 12px;
115
116
  cursor: pointer;
116
117
  font-size: $font-size;
117
- min-height: 48px;
118
118
  border-radius: 4px;
119
+ &:not(:last-child) {
120
+ margin-bottom: 2px;
121
+ }
119
122
 
120
123
  &.disabled {
121
124
  .label-content {
@@ -131,7 +134,8 @@ $button-padding: 6px 12px;
131
134
  }
132
135
 
133
136
  &:hover {
134
- background-color: var(--_gray-100);
137
+ background-color: var(--_primary-25);
138
+ color: var(--_primary-500);
135
139
  }
136
140
 
137
141
  input {
@@ -145,7 +149,8 @@ $button-padding: 6px 12px;
145
149
  }
146
150
 
147
151
  &:has(input[type="radio"]:checked) {
148
- background-color: var(--_gray-200);
152
+ background-color: var(--_primary-25);
153
+ color: $primary-color;
149
154
  }
150
155
  }
151
156
 
@@ -40,6 +40,7 @@ $dark-color: #343a40;
40
40
  flex-direction: column;
41
41
  gap: var(--_ctm-lt-im-gp);
42
42
  word-break: keep-all;
43
+ padding-bottom: 24px;
43
44
 
44
45
  .chk_checkout_title {
45
46
  font-size: 24px;
@@ -59,7 +60,7 @@ $dark-color: #343a40;
59
60
  padding: 1rem;
60
61
  display: flex;
61
62
  justify-content: space-between;
62
- align-items: flex-start;
63
+ align-items: center;
63
64
  cursor: pointer;
64
65
  background-color: var(--_ctm-dn-sn-an-cr-dn-bd-cr);
65
66
  border-color: var(--_ctm-dn-sn-an-cr-dn-br-cr);
@@ -72,6 +73,7 @@ $dark-color: #343a40;
72
73
  .accordion-title {
73
74
  margin-right: 1rem;
74
75
  white-space: nowrap;
76
+ display: flex;
75
77
  color: var(--_ctm-dn-sn-an-te-dn-cr);
76
78
  font-family: var(--_ctm-dn-sn-an-te-dn-ft-fy);
77
79
  font-size: var(--_ctm-dn-sn-an-te-dn-ft-se);
@@ -81,9 +83,21 @@ $dark-color: #343a40;
81
83
  letter-spacing: var(--_ctm-dn-sn-an-te-dn-lr-sg);
82
84
  text-align: var(--_ctm-dn-sn-an-te-dn-tt-an);
83
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
+ }
84
99
  }
85
100
  .edit-btn {
86
- align-self: flex-end;
87
101
  cursor: pointer;
88
102
  padding: 0;
89
103
  background-color: var(--_ctm-dn-sn-an-bn-dn-bd-cr);
@@ -228,43 +242,53 @@ $dark-color: #343a40;
228
242
  }
229
243
 
230
244
  .chk_shipping_address_submit_btn {
231
- padding: 8px 24px;
245
+ padding: 16px 24px;
232
246
  width: fit-content;
233
- background-color: var(--_ctm-dn-it-bn-dn-dt-se-bd-cr);
234
- border-color: var(--_ctm-dn-it-bn-dn-dt-se-br-cr);
235
- border-radius: var(--_ctm-dn-it-bn-dn-dt-se-br-rs);
236
- border-style: var(--_ctm-dn-it-bn-dn-dt-se-br-se);
237
- border-width: var(--_ctm-dn-it-bn-dn-dt-se-br-wh);
238
- color: var(--_ctm-dn-it-bn-dn-dt-se-cr);
239
- font-family: var(--_ctm-dn-it-bn-dn-dt-se-ft-fy);
240
- font-size: var(--_ctm-dn-it-bn-dn-dt-se-ft-se);
241
- font-style: var(--_ctm-dn-it-bn-dn-dt-se-ft-se-ic);
242
- font-weight: var(--_ctm-dn-it-bn-dn-dt-se-ft-wt);
243
- line-height: var(--_ctm-dn-it-bn-dn-dt-se-le-ht);
244
- letter-spacing: var(--_ctm-dn-it-bn-dn-dt-se-lr-sg);
245
- box-shadow: var(--_ctm-dn-it-bn-dn-dt-se-sw-ae) var(--_ctm-dn-it-bn-dn-dt-se-sw-br)
246
- var(--_ctm-dn-it-bn-dn-dt-se-sw-sd) var(--_ctm-dn-it-bn-dn-dt-se-sw-cr);
247
- text-align: var(--_ctm-dn-it-bn-dn-dt-se-tt-an);
248
- text-decoration: var(--_ctm-dn-it-bn-dn-dt-se-ue);
247
+ background-color: var(--_primary-400);
248
+ color: var(--_base-white);
249
+ border-radius: 4px;
250
+ margin-top: 12px;
251
+ font-weight: 600;
249
252
 
250
253
  &:hover {
251
- background-color: var(--_ctm-dn-it-bn-dn-hr-se-bd-cr);
252
- border-color: var(--_ctm-dn-it-bn-dn-hr-se-br-cr);
253
- border-radius: var(--_ctm-dn-it-bn-dn-hr-se-br-rs);
254
- border-style: var(--_ctm-dn-it-bn-dn-hr-se-br-se);
255
- border-width: var(--_ctm-dn-it-bn-dn-hr-se-br-wh);
256
- color: var(--_ctm-dn-it-bn-dn-hr-se-cr);
257
- font-family: var(--_ctm-dn-it-bn-dn-hr-se-ft-fy);
258
- font-size: var(--_ctm-dn-it-bn-dn-hr-se-ft-se);
259
- font-style: var(--_ctm-dn-it-bn-dn-hr-se-ft-se-ic);
260
- font-weight: var(--_ctm-dn-it-bn-dn-hr-se-ft-wt);
261
- line-height: var(--_ctm-dn-it-bn-dn-hr-se-le-ht);
262
- letter-spacing: var(--_ctm-dn-it-bn-dn-hr-se-lr-sg);
263
- box-shadow: var(--_ctm-dn-it-bn-dn-hr-se-sw-ae) var(--_ctm-dn-it-bn-dn-hr-se-sw-br)
264
- var(--_ctm-dn-it-bn-dn-hr-se-sw-sd) var(--_ctm-dn-it-bn-dn-hr-se-sw-cr);
265
- text-align: var(--_ctm-dn-it-bn-dn-hr-se-tt-an);
266
- text-decoration: var(--_ctm-dn-it-bn-dn-hr-se-ue);
254
+ background-color: var(--_primary-500);
267
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
+ // }
268
292
  }
269
293
 
270
294
  .chk_shipping_address_use_as_billing_address_chkbx {
@@ -291,6 +315,9 @@ $dark-color: #343a40;
291
315
  flex-direction: column;
292
316
  gap: 16px;
293
317
  width: 100%;
318
+ &:not(:last-child) {
319
+ margin-bottom: 16px;
320
+ }
294
321
  }
295
322
 
296
323
  &_product_info_container {
@@ -313,8 +340,10 @@ $dark-color: #343a40;
313
340
  }
314
341
 
315
342
  &_product_image {
316
- height: 148px;
317
- width: 128px;
343
+ height: 120px;
344
+ width: 120px;
345
+ border: 1px solid var(--_gray-100);
346
+ border-radius: 6px;
318
347
  }
319
348
 
320
349
  &_product_info_wrapper {
@@ -327,7 +356,7 @@ $dark-color: #343a40;
327
356
  display: flex;
328
357
  flex-direction: row;
329
358
  gap: var(--_ctm-lt-im-gp);
330
- align-items: flex-start;
359
+ align-items: center;
331
360
 
332
361
  @media (max-width: 500px) {
333
362
  align-self: flex-end;
@@ -344,7 +373,7 @@ $dark-color: #343a40;
344
373
  &_shipping_option_container {
345
374
  display: flex;
346
375
  flex-direction: column;
347
- gap: 24px;
376
+ gap: 8px;
348
377
 
349
378
  @media (max-width: 500px) {
350
379
  flex-direction: row;
@@ -353,7 +382,7 @@ $dark-color: #343a40;
353
382
 
354
383
  &_shiping_option_heading_wrapper {
355
384
  display: grid;
356
- grid-template-columns: 1fr 2fr 2fr 0.5fr;
385
+ grid-template-columns: 1fr 2fr 2fr auto;
357
386
  gap: 16px;
358
387
  white-space: nowrap;
359
388
  align-items: center;
@@ -364,6 +393,7 @@ $dark-color: #343a40;
364
393
  }
365
394
 
366
395
  .chk_multi_address_icon {
396
+ cursor: pointer;
367
397
  &:hover {
368
398
  svg {
369
399
  path {
@@ -527,6 +557,7 @@ $dark-color: #343a40;
527
557
  &__card_icon {
528
558
  width: 60px;
529
559
  height: 40px;
560
+ border-radius: 4px;
530
561
  }
531
562
 
532
563
  &__remove_card_btn {
@@ -766,7 +797,7 @@ $dark-color: #343a40;
766
797
  .chk_shipping_address_submit_btn {
767
798
  padding: 8px 24px;
768
799
  width: fit-content;
769
- background-color: var(--_ctm-dn-it-bn-dn-bd-cr);
800
+ background-color: var(--_ctm-dn-it-bn-dn-bd-cr, var(--_primary-400));
770
801
  border-color: var(--_ctm-dn-it-bn-dn-br-cr);
771
802
  border-radius: var(--_ctm-dn-it-bn-dn-br-rs);
772
803
  border-style: var(--_ctm-dn-it-bn-dn-br-se);
@@ -850,6 +881,9 @@ $dark-color: #343a40;
850
881
  border-bottom-width: thin;
851
882
  display: flex;
852
883
  justify-content: space-between;
884
+ &.px_0 {
885
+ padding-inline: 0px;
886
+ }
853
887
  }
854
888
 
855
889
  .chk_payment-card {
@@ -1004,43 +1038,54 @@ $dark-color: #343a40;
1004
1038
  }
1005
1039
 
1006
1040
  .chk_submit-btn {
1007
- padding: 8px 24px;
1041
+ padding: 16px 24px;
1008
1042
  width: fit-content;
1009
- background-color: var(--_ctm-dn-it-bn-dn-dt-se-bd-cr);
1010
- border-color: var(--_ctm-dn-it-bn-dn-dt-se-br-cr);
1011
- border-radius: var(--_ctm-dn-it-bn-dn-dt-se-br-rs);
1012
- border-style: var(--_ctm-dn-it-bn-dn-dt-se-br-se);
1013
- border-width: var(--_ctm-dn-it-bn-dn-dt-se-br-wh);
1014
- color: var(--_ctm-dn-it-bn-dn-dt-se-cr);
1015
- font-family: var(--_ctm-dn-it-bn-dn-dt-se-ft-fy);
1016
- font-size: var(--_ctm-dn-it-bn-dn-dt-se-ft-se);
1017
- font-style: var(--_ctm-dn-it-bn-dn-dt-se-ft-se-ic);
1018
- font-weight: var(--_ctm-dn-it-bn-dn-dt-se-ft-wt);
1019
- line-height: var(--_ctm-dn-it-bn-dn-dt-se-le-ht);
1020
- letter-spacing: var(--_ctm-dn-it-bn-dn-dt-se-lr-sg);
1021
- box-shadow: var(--_ctm-dn-it-bn-dn-dt-se-sw-ae) var(--_ctm-dn-it-bn-dn-dt-se-sw-br)
1022
- var(--_ctm-dn-it-bn-dn-dt-se-sw-sd) var(--_ctm-dn-it-bn-dn-dt-se-sw-cr);
1023
- text-align: var(--_ctm-dn-it-bn-dn-dt-se-tt-an);
1024
- text-decoration: var(--_ctm-dn-it-bn-dn-dt-se-ue);
1043
+ background-color: var(--_primary-400);
1044
+ color: var(--_base-white);
1045
+ border-radius: 4px;
1046
+ margin-top: 12px;
1047
+ font-weight: 600;
1025
1048
 
1026
1049
  &:hover {
1027
- background-color: var(--_ctm-dn-it-bn-dn-hr-se-bd-cr);
1028
- border-color: var(--_ctm-dn-it-bn-dn-hr-se-br-cr);
1029
- border-radius: var(--_ctm-dn-it-bn-dn-hr-se-br-rs);
1030
- border-style: var(--_ctm-dn-it-bn-dn-hr-se-br-se);
1031
- border-width: var(--_ctm-dn-it-bn-dn-hr-se-br-wh);
1032
- color: var(--_ctm-dn-it-bn-dn-hr-se-cr);
1033
- font-family: var(--_ctm-dn-it-bn-dn-hr-se-ft-fy);
1034
- font-size: var(--_ctm-dn-it-bn-dn-hr-se-ft-se);
1035
- font-style: var(--_ctm-dn-it-bn-dn-hr-se-ft-se-ic);
1036
- font-weight: var(--_ctm-dn-it-bn-dn-hr-se-ft-wt);
1037
- line-height: var(--_ctm-dn-it-bn-dn-hr-se-le-ht);
1038
- letter-spacing: var(--_ctm-dn-it-bn-dn-hr-se-lr-sg);
1039
- box-shadow: var(--_ctm-dn-it-bn-dn-hr-se-sw-ae) var(--_ctm-dn-it-bn-dn-hr-se-sw-br)
1040
- var(--_ctm-dn-it-bn-dn-hr-se-sw-sd) var(--_ctm-dn-it-bn-dn-hr-se-sw-cr);
1041
- text-align: var(--_ctm-dn-it-bn-dn-hr-se-tt-an);
1042
- text-decoration: var(--_ctm-dn-it-bn-dn-hr-se-ue);
1050
+ background-color: var(--_primary-500);
1043
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
+ // }
1044
1089
  }
1045
1090
 
1046
1091
  .chk_checkbox_wrapper {
@@ -1171,7 +1216,7 @@ $dark-color: #343a40;
1171
1216
  align-items: center;
1172
1217
  background-color: var(--_ctm-dn-sn-an-bn-dn-bd-cr);
1173
1218
  border-color: var(--_ctm-dn-sn-an-bn-dn-br-cr);
1174
- border-radius: var(--_ctm-dn-sn-an-bn-dn-br-rs);
1219
+ // border-radius: var(--_ctm-dn-sn-an-bn-dn-br-rs);
1175
1220
  border-style: var(--_ctm-dn-sn-an-bn-dn-br-se);
1176
1221
  border-width: var(--_ctm-dn-sn-an-bn-dn-br-wh);
1177
1222
  color: var(--_ctm-dn-sn-an-bn-dn-cr);
@@ -1194,7 +1239,8 @@ $dark-color: #343a40;
1194
1239
  gap: 6px;
1195
1240
  background-color: var(--_ctm-dn-ne-cr-dn-bd-cr);
1196
1241
  border-color: var(--_ctm-dn-ne-cr-dn-br-cr);
1197
- 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;
1198
1244
  border-style: var(--_ctm-dn-ne-cr-dn-br-se);
1199
1245
  border-width: var(--_ctm-dn-ne-cr-dn-br-wh);
1200
1246
  color: var(--_ctm-dn-ne-cr-dn-cr);
@@ -1208,8 +1254,8 @@ $dark-color: #343a40;
1208
1254
  var(--_ctm-dn-ne-cr-dn-sw-sd) var(--_ctm-dn-ne-cr-dn-sw-cr);
1209
1255
  text-align: var(--_ctm-dn-ne-cr-dn-tt-an);
1210
1256
  text-decoration: var(--_ctm-dn-ne-cr-dn-ue);
1211
-
1212
1257
  .icon {
1258
+ display: flex;
1213
1259
  svg {
1214
1260
  width: var(--_ctm-dn-ne-cr-dn-in-se);
1215
1261
  height: var(--_ctm-dn-ne-cr-dn-in-se);
@@ -1260,4 +1306,11 @@ $dark-color: #343a40;
1260
1306
  }
1261
1307
  }
1262
1308
  }
1309
+
1310
+ .chk_primary_btn_link {
1311
+ color: var(--_primary-400);
1312
+ &:hover {
1313
+ color: var(--_primary-500);
1314
+ }
1315
+ }
1263
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
+ }