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

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 (42) 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/buyForHeaders.scss +120 -2
  6. package/dist/buyForPopup.scss +41 -7
  7. package/dist/cart-details.scss +62 -65
  8. package/dist/cart-products-sidebar.scss +113 -83
  9. package/dist/cartAttributes.scss +277 -183
  10. package/dist/cartDropdownOverlay.scss +55 -27
  11. package/dist/checkout.scss +1017 -640
  12. package/dist/customization-tree.scss +42 -10
  13. package/dist/dropdownTemplate.scss +35 -25
  14. package/dist/employee-bulk-order.scss +219 -47
  15. package/dist/empty-states.scss +66 -66
  16. package/dist/functions.js +1 -1
  17. package/dist/functions.scss +7 -5
  18. package/dist/icons.js +1 -1
  19. package/dist/index.js +1 -1
  20. package/dist/item-stock.scss +27 -28
  21. package/dist/menu-v2.scss +2 -2
  22. package/dist/modal.scss +128 -75
  23. package/dist/past-orders.scss +272 -258
  24. package/dist/payment-methods.scss +70 -71
  25. package/dist/prefix-list.scss +1 -0
  26. package/dist/product-actions.scss +68 -68
  27. package/dist/product-sizechart.scss +13 -13
  28. package/dist/quick-links.scss +47 -48
  29. package/dist/quick-order-pad.scss +51 -51
  30. package/dist/quotes.scss +118 -116
  31. package/dist/review-cart.scss +196 -0
  32. package/dist/rfqs.scss +118 -116
  33. package/dist/types/builder/elements/add-products-tab/index.d.ts +46 -0
  34. package/dist/types/builder/enums/index.d.ts +2 -0
  35. package/dist/types/builder/index.d.ts +2 -1
  36. package/dist/types/builder/tools/element-edit/addProductsTab.d.ts +542 -0
  37. package/dist/types/builder/tools/element-edit/cartSummary.d.ts +1747 -38
  38. package/dist/types/builder/tools/element-edit/checkout.d.ts +793 -254
  39. package/dist/types/builder/tools/element-edit/index.d.ts +2 -1
  40. package/dist/video.scss +16 -7
  41. package/dist/widget.scss +2 -0
  42. package/package.json +1 -1
package/dist/cartAttributes.scss CHANGED
@@ -25,7 +25,8 @@
25
25
  display: flex;
26
26
  align-items: center;
27
27
  justify-content: center;
28
- width: 100%;
28
+ min-width: 280px;
29
+ max-width: 100%;
29
30
  height: auto;
30
31
  }
31
32
 
@@ -74,9 +75,9 @@
74
75
  flex-wrap: wrap;
75
76
  gap: 16px;
76
77
  margin-top: 20px;
77
- max-height: 500px;
78
- overflow-y: auto;
79
- padding: 2px;
78
+ // max-height: 500px;
79
+ overflow-y: auto;
80
+ padding: 2px;
80
81
  .attribute {
81
82
  width: 100%;
82
83
  display: flex;
@@ -94,196 +95,193 @@
94
95
  font-size: 14px;
95
96
  font-weight: 500;
96
97
  line-height: 20px;
97
- margin-bottom: 10px;
98
98
  display: block;
99
99
  &.required::after {
100
100
  content: " *";
101
101
  color: var(--_error-500);
102
-
103
102
 
104
- [data-div-type="element"] {
105
- &[data-element-type="cartAttributes"] {
106
- // width: var(
107
- // --_ctm-mob-ele-nw-wh-st-mx,
108
- // var(
109
- // --_ctm-tab-ele-nw-wh-st-mx,
110
- // var(--_sf-el-wh-st-mx, calc(1% * var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh))))
111
- // )
112
- // );
103
+ [data-div-type="element"] {
104
+ &[data-element-type="cartAttributes"] {
105
+ // width: var(
106
+ // --_ctm-mob-ele-nw-wh-st-mx,
107
+ // var(
108
+ // --_ctm-tab-ele-nw-wh-st-mx,
109
+ // var(--_sf-el-wh-st-mx, calc(1% * var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh))))
110
+ // )
111
+ // );
113
112
 
114
- // margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
113
+ // margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
115
114
 
116
- height: max-content;
117
- min-width: 240px;
115
+ height: max-content;
116
+ min-width: 240px;
118
117
 
119
- // aspect-ratio: var(
120
- // --_ctm-mob-aspect-ratio,
121
- // var(--_ctm-tab-aspect-ratio, var(--_sf-aspect-ratio))
122
- // );
118
+ // aspect-ratio: var(
119
+ // --_ctm-mob-aspect-ratio,
120
+ // var(--_ctm-tab-aspect-ratio, var(--_sf-aspect-ratio))
121
+ // );
123
122
 
124
- & > .wrapper {
125
- display: flex;
126
- align-items: center;
127
- justify-content: center;
128
- width: 100%;
129
- height: auto;
130
- }
123
+ & > .wrapper {
124
+ display: flex;
125
+ align-items: center;
126
+ justify-content: center;
127
+ width: 100%;
128
+ height: auto;
129
+ }
131
130
 
132
- .cart__section {
133
- display: flex;
134
- align-items: center;
135
- cursor: pointer;
136
- gap: 8px;
137
- }
138
- .cart-attribute-container {
139
- display: flex;
140
- flex-direction: column;
141
- gap: 20px;
142
- background-color: var(--_ctm-dn-ct-as-cr-bd-cr);
143
- margin: var(--_ctm-dn-ct-as-cr-mn);
144
- padding: var(--_ctm-lt-pg);
145
- border-color: var(--_ctm-dn-ct-as-cr-br-cr);
146
- border-style: var(--_ctm-dn-ct-as-cr-br-se);
147
- border-width: var(--_ctm-dn-ct-as-cr-br-wh);
148
- border-radius: var(--_ctm-dn-ct-as-cr-br-rs);
149
- // box-shadow: var();
150
- }
151
- .cart-attribute-title {
152
- color: var(--_ctm-dn-ct-as-hr-cr);
153
- font-family: var(--_ctm-dn-ct-as-hr-ft-fy);
154
- font-size: var(--_ctm-dn-ct-as-hr-ft-se);
155
- font-weight: var(--_ctm-dn-ct-as-hr-ft-wt);
156
- font-style: var(--_ctm-dn-ct-as-hr-ft-se-ic);
157
- text-align: var(--_ctm-dn-ct-as-hr-tt-an);
158
- letter-spacing: var(--_ctm-dn-ct-as-hr-lr-sg);
159
- line-height: var(--_ctm-dn-ct-as-hr-le-ht);
160
- text-decoration: var(--_ctm-dn-ct-as-hr-ue);
161
- background-color: var(--_ctm-dn-ct-as-hr-bd-cr);
162
- padding: var(--_ctm-dn-ct-as-hr-pg);
163
- margin: var(--_ctm-dn-ct-as-hr-mn);
164
- border-color: var(--_ctm-dn-ct-as-hr-br-cr);
165
- border-style: var(--_ctm-dn-ct-as-hr-br-se);
166
- border-width: var(--_ctm-dn-ct-as-hr-br-wh);
167
- border-radius: var(--_ctm-dn-ct-as-hr-br-rs);
168
- // box-shadow: var();
169
- }
170
- .attributes-section-body {
171
- padding: 0;
172
- width: 100%;
173
- display: flex;
174
- flex-wrap: wrap;
175
- gap: 16px;
176
- margin-top: 20px;
177
- .attribute {
178
- width: 100%;
179
- .label {
180
- display: block;
181
- font-size: var(--_ctm-dn-ct-as-is-ll-ft-se);
182
- font-weight: var(--_ctm-dn-ct-as-is-ll-ft-wt);
183
- color: var(--_ctm-dn-ct-as-is-ll-cr);
184
- margin-bottom: 0.5rem;
185
- letter-spacing: var(--_ctm-dn-ct-as-is-ll-lr-sg);
186
- line-height: var(--_ctm-dn-ct-as-is-ll-le-ht);
187
- margin-bottom: 10px;
188
- &.required::after {
189
- content: " *";
190
- color: var(--_error-500);
191
- }
192
- }
193
- }
194
- .error-text {
195
- font-size: 12px;
196
- color: var(--_error-500);
197
- }
198
- .attribute_field {
199
- width: 100%;
200
- .attribute_form_field {
201
- width: 100%;
202
- }
203
-
204
- .attribute_form_field {
205
- width: 100% !important;
206
- padding: 12px;
207
- border-radius: var(--_ctm-dn-ct-as-is-fd-br-rs);
208
- border-style: var(--_ctm-dn-ct-as-is-fd-br-se);
209
- border-width: var(--_ctm-dn-ct-as-is-fd-br-wh);
210
- border-color: var(--_ctm-dn-ct-as-is-fd-br-cr);
211
- outline: none;
212
- transition: border-color 0.2s ease-in-out;
213
- font-size: 14px;
214
- height: 40px;
131
+ .cart__section {
132
+ display: flex;
133
+ align-items: center;
134
+ cursor: pointer;
135
+ gap: 8px;
136
+ }
137
+ .cart-attribute-container {
138
+ display: flex;
139
+ flex-direction: column;
140
+ gap: 20px;
141
+ background-color: var(--_ctm-dn-ct-as-cr-bd-cr);
142
+ margin: var(--_ctm-dn-ct-as-cr-mn);
143
+ padding: var(--_ctm-lt-pg);
144
+ border-color: var(--_ctm-dn-ct-as-cr-br-cr);
145
+ border-style: var(--_ctm-dn-ct-as-cr-br-se);
146
+ border-width: var(--_ctm-dn-ct-as-cr-br-wh);
147
+ border-radius: var(--_ctm-dn-ct-as-cr-br-rs);
148
+ // box-shadow: var();
149
+ }
150
+ .cart-attribute-title {
151
+ color: var(--_ctm-dn-ct-as-hr-cr);
152
+ font-family: var(--_ctm-dn-ct-as-hr-ft-fy);
153
+ font-size: var(--_ctm-dn-ct-as-hr-ft-se);
154
+ font-weight: var(--_ctm-dn-ct-as-hr-ft-wt);
155
+ font-style: var(--_ctm-dn-ct-as-hr-ft-se-ic);
156
+ text-align: var(--_ctm-dn-ct-as-hr-tt-an);
157
+ letter-spacing: var(--_ctm-dn-ct-as-hr-lr-sg);
158
+ line-height: var(--_ctm-dn-ct-as-hr-le-ht);
159
+ text-decoration: var(--_ctm-dn-ct-as-hr-ue);
160
+ background-color: var(--_ctm-dn-ct-as-hr-bd-cr);
161
+ padding: var(--_ctm-dn-ct-as-hr-pg);
162
+ margin: var(--_ctm-dn-ct-as-hr-mn);
163
+ border-color: var(--_ctm-dn-ct-as-hr-br-cr);
164
+ border-style: var(--_ctm-dn-ct-as-hr-br-se);
165
+ border-width: var(--_ctm-dn-ct-as-hr-br-wh);
166
+ border-radius: var(--_ctm-dn-ct-as-hr-br-rs);
167
+ // box-shadow: var();
168
+ }
169
+ .attributes-section-body {
170
+ padding: 0;
171
+ width: 100%;
172
+ display: flex;
173
+ flex-wrap: wrap;
174
+ gap: 16px;
175
+ margin-top: 20px;
176
+ .attribute {
177
+ width: 100%;
178
+ .label {
179
+ display: block;
180
+ font-size: var(--_ctm-dn-ct-as-is-ll-ft-se);
181
+ font-weight: var(--_ctm-dn-ct-as-is-ll-ft-wt);
182
+ color: var(--_ctm-dn-ct-as-is-ll-cr);
183
+ margin-bottom: 0.5rem;
184
+ letter-spacing: var(--_ctm-dn-ct-as-is-ll-lr-sg);
185
+ line-height: var(--_ctm-dn-ct-as-is-ll-le-ht);
186
+ margin-bottom: 10px;
187
+ &.required::after {
188
+ content: " *";
189
+ color: var(--_error-500);
190
+ }
191
+ }
192
+ }
193
+ .error-text {
194
+ font-size: 12px;
195
+ color: var(--_error-500);
196
+ }
197
+ .attribute_field {
198
+ width: 100%;
199
+ .attribute_form_field {
200
+ width: 100%;
201
+ }
215
202
 
216
- &:focus {
217
- border-color: var(--_primary-400);
218
- outline: 2px solid var(--_primary-200);
219
- }
220
- &.error {
221
- border-color: #dc2626;
222
- background-color: #fef2f2;
223
- }
224
- .react-datepicker-wrapper {
225
- width: 100%;
226
- .react-datepicker__close-icon::after {
227
- background-color: transparent;
228
- font-size: 25px;
229
- color: var(--_gray-500);
230
- }
231
- }
232
- }
203
+ .attribute_form_field {
204
+ width: 100% !important;
205
+ padding: 12px;
206
+ border-radius: var(--_ctm-dn-ct-as-is-fd-br-rs);
207
+ border-style: var(--_ctm-dn-ct-as-is-fd-br-se);
208
+ border-width: var(--_ctm-dn-ct-as-is-fd-br-wh);
209
+ border-color: var(--_ctm-dn-ct-as-is-fd-br-cr);
210
+ outline: none;
211
+ transition: border-color 0.2s ease-in-out;
212
+ font-size: 14px;
213
+ height: 40px;
233
214
 
234
- textarea {
235
- min-height: 100px;
236
- resize: vertical;
237
- }
238
- }
239
- .text_area_attribute {
240
- width: 100%;
241
- .input_textarea_a {
242
- width: 100%;
243
- }
244
- }
245
- .cart_item_attr_disabled {
246
- pointer-events: none;
247
- opacity: 0.5;
248
- cursor: auto;
249
- }
250
- }
251
- }
252
- }
215
+ &:focus {
216
+ border-color: var(--_primary-400);
217
+ outline: 2px solid var(--_primary-200);
218
+ }
219
+ &.error {
220
+ border-color: #dc2626;
221
+ background-color: #fef2f2;
222
+ }
223
+ .react-datepicker-wrapper {
224
+ width: 100%;
225
+ .react-datepicker__close-icon::after {
226
+ background-color: transparent;
227
+ font-size: 25px;
228
+ color: var(--_gray-500);
229
+ }
230
+ }
231
+ }
253
232
 
254
- .custom-upload {
255
- text-align: center;
256
- border: 1px solid var(--_gray-200);
257
- border-radius: 6px;
258
- padding: 16px;
259
- &:hover {
260
- cursor: pointer;
261
- border: 1px solid var(--_primary-200);
262
- background: var(--_primary-25);
263
- }
264
- .uploadicon {
265
- padding: 10px;
266
- background: #f2f4f7;
267
- display: inline-block;
268
- border-radius: 50%;
269
- margin-bottom: 12px;
270
- color: var(--_gray-600);
271
- }
272
- p {
273
- padding-bottom: 4px;
274
- color: var(--_gray-600);
275
- font-size: 14px;
276
- strong {
277
- color: var(--_primary-400);
278
- font-weight: 600;
279
- }
280
- }
281
- span {
282
- color: var(--_gray-600);
283
- font-size: 12px;
284
- }
285
- }
233
+ textarea {
234
+ min-height: 100px;
235
+ resize: vertical;
236
+ }
237
+ }
238
+ .text_area_attribute {
239
+ width: 100%;
240
+ .input_textarea_a {
241
+ width: 100%;
242
+ }
243
+ }
244
+ .cart_item_attr_disabled {
245
+ pointer-events: none;
246
+ opacity: 0.5;
247
+ cursor: auto;
248
+ }
249
+ }
250
+ }
251
+ }
286
252
 
253
+ .custom-upload {
254
+ text-align: center;
255
+ border: 1px solid var(--_gray-200);
256
+ border-radius: 6px;
257
+ padding: 16px;
258
+ &:hover {
259
+ cursor: pointer;
260
+ border: 1px solid var(--_primary-200);
261
+ background: var(--_primary-25);
262
+ }
263
+ .uploadicon {
264
+ padding: 10px;
265
+ background: #f2f4f7;
266
+ display: inline-block;
267
+ border-radius: 50%;
268
+ margin-bottom: 12px;
269
+ color: var(--_gray-600);
270
+ }
271
+ p {
272
+ padding-bottom: 4px;
273
+ color: var(--_gray-600);
274
+ font-size: 14px;
275
+ strong {
276
+ color: var(--_primary-400);
277
+ font-weight: 600;
278
+ }
279
+ }
280
+ span {
281
+ color: var(--_gray-600);
282
+ font-size: 12px;
283
+ }
284
+ }
287
285
  }
288
286
  }
289
287
  }
@@ -294,8 +292,8 @@
294
292
  .attribute_field {
295
293
  width: 100%;
296
294
  .react-datepicker-wrapper {
297
- width: 100%;
298
- }
295
+ width: 100%;
296
+ }
299
297
 
300
298
  .attribute_form_field {
301
299
  width: 100%;
@@ -356,6 +354,103 @@
356
354
  }
357
355
  }
358
356
 
357
+ // toggle styles
358
+ .input_toggle_switch {
359
+ position: relative;
360
+ display: inline-block;
361
+ width: 50px;
362
+ height: 28px;
363
+
364
+ input[type="checkbox"] {
365
+ opacity: 0;
366
+ width: 0;
367
+ height: 0;
368
+
369
+ &:checked + .slider {
370
+ background-color: #4caf50;
371
+
372
+ &::before {
373
+ transform: translateX(22px);
374
+ }
375
+ }
376
+ }
377
+
378
+ .slider {
379
+ position: absolute;
380
+ cursor: pointer;
381
+ top: 0;
382
+ left: 0;
383
+ right: 0;
384
+ bottom: 0;
385
+ background-color: #ccc;
386
+ transition: 0.4s;
387
+ border-radius: 28px;
388
+
389
+ &::before {
390
+ position: absolute;
391
+ content: "";
392
+ height: 22px;
393
+ width: 22px;
394
+ left: 3px;
395
+ bottom: 3px;
396
+ background-color: white;
397
+ border-radius: 50%;
398
+ transition: 0.4s;
399
+ }
400
+ }
401
+ }
402
+
403
+ // input radio styles
404
+ .input_radio_a {
405
+ position: relative;
406
+ display: inline-flex;
407
+ align-items: center;
408
+ cursor: pointer;
409
+ height: 20px;
410
+ width: 20px;
411
+
412
+ input[type="radio"] {
413
+ opacity: 0;
414
+ width: 0;
415
+ height: 0;
416
+
417
+ &:checked + .custom_radio::after {
418
+ display: block;
419
+ }
420
+ }
421
+
422
+ .custom_radio {
423
+ height: 18px;
424
+ width: 18px;
425
+ border-radius: 50%;
426
+ background-color: var(--_base-white);
427
+ border: 2px solid var(--_gray-600);
428
+ position: relative;
429
+ transition: border-color 0.3s ease;
430
+
431
+ &::after {
432
+ content: "";
433
+ position: absolute;
434
+ top: 3px;
435
+ left: 3px;
436
+ width: 8px;
437
+ height: 8px;
438
+ border-radius: 50%;
439
+ background-color: var(--_primary-400);
440
+ display: none;
441
+ }
442
+ }
443
+
444
+ input[type="radio"]:checked + .custom_radio {
445
+ border-color: var(--_primary-400);
446
+ }
447
+
448
+ &.disabled {
449
+ opacity: 0.5;
450
+ pointer-events: none;
451
+ }
452
+ }
453
+
359
454
  .custom-upload {
360
455
  // text-align: center;
361
456
  // border: 1px solid var(--_gray-200);
@@ -428,4 +523,3 @@
428
523
  background: #fff;
429
524
  }
430
525
  }
431
-
package/dist/cartDropdownOverlay.scss CHANGED
@@ -25,25 +25,45 @@ $button-padding: 6px 12px;
25
25
  // font-weight: 500;
26
26
  // padding: $spacing-sm;
27
27
  white-space: nowrap;
28
- color: var(--_ctm-mob-dn-pt-as-ss-cr,
29
- var(--_ctm-tab-dn-pt-as-ss-cr, var(--_ctm-dn-pt-as-ss-cr)));
30
- font-family: var(--_sf-hr-ff,
31
- var(--_ctm-mob-dn-pt-as-ss-ft-fy,
32
- var(--_ctm-tab-dn-pt-as-ss-ft-fy, var(--_ctm-dn-pt-as-ss-ft-fy))));
33
- font-size: var(--_ctm-mob-dn-pt-as-ss-ft-se,
34
- var(--_ctm-tab-dn-pt-as-ss-ft-se, var(--_ctm-dn-pt-as-ss-ft-se)));
35
- font-weight: var(--_ctm-mob-dn-pt-as-ss-ft-wt,
36
- var(--_ctm-tab-dn-pt-as-ss-ft-wt, var(--_ctm-dn-pt-as-ss-ft-wt)));
37
- font-style: var(--_ctm-mob-dn-pt-as-ss-ft-se-ic,
38
- var(--_ctm-tab-dn-pt-as-ss-ft-se-ic, var(--_ctm-dn-pt-as-ss-ft-se-ic)));
39
- text-align: var(--_ctm-mob-dn-pt-as-ss-tt-an,
40
- var(--_ctm-tab-dn-pt-as-ss-tt-an, var(--_ctm-dn-pt-as-ss-tt-an)));
41
- letter-spacing: var(--_ctm-mob-dn-pt-as-ss-lr-sg,
42
- var(--_ctm-tab-dn-pt-as-ss-lr-sg, var(--_ctm-dn-pt-as-ss-lr-sg)));
43
- line-height: var(--_ctm-mob-dn-pt-as-ss-le-ht,
44
- var(--_ctm-tab-dn-pt-as-ss-le-ht, var(--_ctm-dn-pt-as-ss-le-ht)));
45
- text-decoration: var(--_ctm-mob-dn-pt-as-ss-ue,
46
- var(--_ctm-tab-dn-pt-as-ss-ue, var(--_ctm-dn-pt-as-ss-ue)));
28
+ color: var(
29
+ --_ctm-mob-dn-pt-as-ss-cr,
30
+ var(--_ctm-tab-dn-pt-as-ss-cr, var(--_ctm-dn-pt-as-ss-cr))
31
+ );
32
+ font-family: var(
33
+ --_sf-hr-ff,
34
+ var(
35
+ --_ctm-mob-dn-pt-as-ss-ft-fy,
36
+ var(--_ctm-tab-dn-pt-as-ss-ft-fy, var(--_ctm-dn-pt-as-ss-ft-fy))
37
+ )
38
+ );
39
+ font-size: var(
40
+ --_ctm-mob-dn-pt-as-ss-ft-se,
41
+ var(--_ctm-tab-dn-pt-as-ss-ft-se, var(--_ctm-dn-pt-as-ss-ft-se))
42
+ );
43
+ font-weight: var(
44
+ --_ctm-mob-dn-pt-as-ss-ft-wt,
45
+ var(--_ctm-tab-dn-pt-as-ss-ft-wt, var(--_ctm-dn-pt-as-ss-ft-wt))
46
+ );
47
+ font-style: var(
48
+ --_ctm-mob-dn-pt-as-ss-ft-se-ic,
49
+ var(--_ctm-tab-dn-pt-as-ss-ft-se-ic, var(--_ctm-dn-pt-as-ss-ft-se-ic))
50
+ );
51
+ text-align: var(
52
+ --_ctm-mob-dn-pt-as-ss-tt-an,
53
+ var(--_ctm-tab-dn-pt-as-ss-tt-an, var(--_ctm-dn-pt-as-ss-tt-an))
54
+ );
55
+ letter-spacing: var(
56
+ --_ctm-mob-dn-pt-as-ss-lr-sg,
57
+ var(--_ctm-tab-dn-pt-as-ss-lr-sg, var(--_ctm-dn-pt-as-ss-lr-sg))
58
+ );
59
+ line-height: var(
60
+ --_ctm-mob-dn-pt-as-ss-le-ht,
61
+ var(--_ctm-tab-dn-pt-as-ss-le-ht, var(--_ctm-dn-pt-as-ss-le-ht))
62
+ );
63
+ text-decoration: var(
64
+ --_ctm-mob-dn-pt-as-ss-ue,
65
+ var(--_ctm-tab-dn-pt-as-ss-ue, var(--_ctm-dn-pt-as-ss-ue))
66
+ );
47
67
  }
48
68
 
49
69
  .overlay-panel {
@@ -53,7 +73,7 @@ $button-padding: 6px 12px;
53
73
  background: $background-color;
54
74
  box-shadow: $shadow;
55
75
  border-radius: $border-radius;
56
- padding: $spacing-sm;
76
+ // padding: $spacing-sm;
57
77
  z-index: 20;
58
78
  display: flex;
59
79
  flex-direction: column;
@@ -64,7 +84,7 @@ $button-padding: 6px 12px;
64
84
  display: flex;
65
85
  align-items: center;
66
86
  justify-content: space-between;
67
- padding: 2px 12px 10px 12px;
87
+ padding: 10px 12px 16px 16px;
68
88
  border-bottom: 1px solid #eee;
69
89
 
70
90
  span {
@@ -82,7 +102,8 @@ $button-padding: 6px 12px;
82
102
  transition: color 0.2s ease-in-out;
83
103
 
84
104
  &:hover {
85
- color: darken($primary-color, 5%);
105
+ // color: darken($primary-color, 5%);
106
+ color: color-mix(in srgb, #{$primary-color} 95%, var(--_base-black));
86
107
  }
87
108
 
88
109
  &:focus {
@@ -93,6 +114,7 @@ $button-padding: 6px 12px;
93
114
 
94
115
  .options-container {
95
116
  max-height: 200px;
117
+ padding: 4px;
96
118
  overflow-y: auto;
97
119
 
98
120
  .option {
@@ -108,7 +130,7 @@ $button-padding: 6px 12px;
108
130
  .label-content {
109
131
  width: 100%;
110
132
  align-items: center;
111
-
133
+ cursor: auto;
112
134
  }
113
135
  }
114
136
 
@@ -118,7 +140,7 @@ $button-padding: 6px 12px;
118
140
  gap: 4px;
119
141
 
120
142
  .option-description {
121
- &>div {
143
+ & > div {
122
144
  max-width: 204px;
123
145
  white-space: nowrap;
124
146
  overflow: hidden;
@@ -148,12 +170,12 @@ $button-padding: 6px 12px;
148
170
  }
149
171
  }
150
172
 
151
-
152
173
  .footer {
153
174
  display: flex;
154
175
  justify-content: space-between;
155
176
  padding: 0px $spacing-md;
156
177
  gap: $spacing-md;
178
+ border-top: 1px solid var(--_gray-200);
157
179
 
158
180
  .dropdown_overlay_secondary_button {
159
181
  background: transparent;
@@ -187,8 +209,14 @@ $button-padding: 6px 12px;
187
209
  flex: 1 0 0;
188
210
  margin: $spacing-md 0px;
189
211
 
212
+ &.disabled {
213
+ opacity: 0.5;
214
+ pointer-events: none;
215
+ }
216
+
190
217
  &:hover {
191
- background-color: lighten($primary-color, $amount: 5%);
218
+ // background-color: lighten($primary-color, $amount: 5%);
219
+ background-color: color-mix(in srgb, #{$primary-color} 95%, var(--_base-white));
192
220
  }
193
221
  }
194
222
 
@@ -211,4 +239,4 @@ $button-padding: 6px 12px;
211
239
  /* shows above the button */
212
240
  margin-bottom: 8px;
213
241
  }
214
- }
242
+ }