@sc-360-v2/storefront-cms-library 0.4.57 → 0.4.59

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 (149) hide show
  1. package/dist/add-existing-form.scss +66 -66
  2. package/dist/add-order.scss +377 -377
  3. package/dist/add-products-tab copy.scss +1132 -1132
  4. package/dist/allocationDetails.scss +3 -0
  5. package/dist/allocations.scss +1603 -1603
  6. package/dist/amount-estimator.scss +1083 -1083
  7. package/dist/animation-control.scss +23 -23
  8. package/dist/badge.scss +388 -388
  9. package/dist/brand-basic-elements.scss +292 -292
  10. package/dist/brand.scss +93 -93
  11. package/dist/breadcrumbs.scss +802 -802
  12. package/dist/bulk-order-pad.scss +677 -677
  13. package/dist/bulk-variant-picker copy.scss +1121 -1121
  14. package/dist/bulk-variant-picker.scss +3294 -3294
  15. package/dist/bundle copy.scss +2805 -2805
  16. package/dist/bundle.scss +2383 -2383
  17. package/dist/bundleDetails copy.scss +1431 -1431
  18. package/dist/button copy.scss +271 -271
  19. package/dist/button.scss +292 -292
  20. package/dist/buy-for-tab-container.scss +90 -90
  21. package/dist/buy-for-tabs-container-item.scss +80 -80
  22. package/dist/buyForHeaders.scss +6718 -6718
  23. package/dist/cart-products-sidebar.scss +211 -211
  24. package/dist/cart-summary.scss +2728 -2728
  25. package/dist/cart-wrapper.scss +127 -127
  26. package/dist/cartGrouping.scss +89 -89
  27. package/dist/category-groups-element.scss +138 -138
  28. package/dist/category.scss +73 -73
  29. package/dist/categoryDetails.scss +61 -61
  30. package/dist/categoryWidget.scss +34 -34
  31. package/dist/checkbox-radio.scss +124 -124
  32. package/dist/code-temp.scss +58 -58
  33. package/dist/colorpicker_v2.scss +52 -52
  34. package/dist/common-element.scss +35 -35
  35. package/dist/confirm-modal.scss +351 -351
  36. package/dist/confirmationModal.scss +139 -139
  37. package/dist/container.scss +114 -114
  38. package/dist/countdown.scss +751 -751
  39. package/dist/coupon.scss +1254 -1254
  40. package/dist/custom-fonts.scss +100 -100
  41. package/dist/customization-tree.scss +160 -160
  42. package/dist/default-dropdown.scss +240 -240
  43. package/dist/editCartItem.scss +111 -111
  44. package/dist/embed-temp.scss +72 -72
  45. package/dist/embroider-preview-element.scss +94 -94
  46. package/dist/embroider-template-1-v2.scss +937 -937
  47. package/dist/embroider-template-1.scss +482 -482
  48. package/dist/embroidery.scss +213 -213
  49. package/dist/employee-bulk-order.scss +4057 -4057
  50. package/dist/emtpy-templates.scss +165 -165
  51. package/dist/faq.scss +564 -564
  52. package/dist/fb-dropdown.scss +125 -125
  53. package/dist/filter-results.scss +323 -323
  54. package/dist/flex-text-editor.scss +271 -271
  55. package/dist/form-preview.scss +290 -290
  56. package/dist/form-zindex-module.scss +24 -24
  57. package/dist/gallery-slider-temp.scss +1234 -1234
  58. package/dist/global-styles.scss +86 -86
  59. package/dist/grid.scss +119 -119
  60. package/dist/hotspot.scss +397 -397
  61. package/dist/icon-library.scss +74 -74
  62. package/dist/image-for-product.scss +21 -21
  63. package/dist/image-temp.scss +168 -168
  64. package/dist/item-stock.scss +87 -87
  65. package/dist/layouter-item.scss +89 -89
  66. package/dist/layouter-pro-item.scss +80 -80
  67. package/dist/layouter-pro.scss +88 -88
  68. package/dist/light-box-v2.scss +105 -105
  69. package/dist/lightbox.scss +78 -78
  70. package/dist/line.scss +166 -166
  71. package/dist/loader.scss +37 -37
  72. package/dist/map.scss +962 -962
  73. package/dist/marchandiserSets.scss +60 -60
  74. package/dist/mega-menu-container.scss +99 -99
  75. package/dist/mega-menu.scss +838 -838
  76. package/dist/menu-item.scss +19 -19
  77. package/dist/menu.scss +162 -162
  78. package/dist/modal.scss +2267 -2267
  79. package/dist/multi-select-dropdown.scss +282 -282
  80. package/dist/my-wishlist.scss +17 -17
  81. package/dist/option-bar.scss +845 -845
  82. package/dist/order-processing.scss +61 -61
  83. package/dist/overflow-module.scss +63 -63
  84. package/dist/past-orders.scss +975 -975
  85. package/dist/payment-methods.scss +289 -289
  86. package/dist/pickup-locations.scss +1167 -1167
  87. package/dist/position-module.scss +95 -95
  88. package/dist/prefix-list.scss +86 -86
  89. package/dist/product-actions copy.scss +2765 -2765
  90. package/dist/product-actions.scss +2286 -2286
  91. package/dist/product-basic-elements.scss +770 -770
  92. package/dist/product-customizations.scss +149 -149
  93. package/dist/product-highlights copy.scss +217 -217
  94. package/dist/product-highlights.scss +311 -311
  95. package/dist/product-image copy.scss +787 -787
  96. package/dist/product-image-allocation.scss +3 -0
  97. package/dist/product-inventory.scss +1378 -1378
  98. package/dist/product-options.scss +1144 -1144
  99. package/dist/product-price.scss +2598 -2598
  100. package/dist/product-promotions.scss +2759 -2759
  101. package/dist/product.scss +97 -97
  102. package/dist/productDetails.scss +70 -70
  103. package/dist/quick-links.scss +552 -552
  104. package/dist/quick-order-pad.scss +237 -237
  105. package/dist/quota-details.scss +263 -263
  106. package/dist/quotes.scss +737 -737
  107. package/dist/repeater copy.scss +635 -635
  108. package/dist/repeater-grid-toggle.scss +58 -58
  109. package/dist/repeater-item.scss +90 -90
  110. package/dist/request-for-quotes.scss +746 -746
  111. package/dist/responsive-behaviour.scss +29 -29
  112. package/dist/rfqs.scss +736 -736
  113. package/dist/scroll.scss +222 -222
  114. package/dist/search-results-heading.scss +279 -279
  115. package/dist/shareCartSideBar.scss +254 -254
  116. package/dist/shipping-estimator.scss +41 -41
  117. package/dist/shipping-payments.scss +2467 -2467
  118. package/dist/simple-list.scss +259 -259
  119. package/dist/skeleton.scss +74 -74
  120. package/dist/social.scss +276 -276
  121. package/dist/sort.scss +89 -89
  122. package/dist/spotlight.scss +1663 -1663
  123. package/dist/stack.scss +129 -129
  124. package/dist/static-text.scss +52 -52
  125. package/dist/stockStatus.scss +64 -64
  126. package/dist/store-locations.scss +1398 -1398
  127. package/dist/sub-category.scss +74 -74
  128. package/dist/submit-quote.scss +275 -275
  129. package/dist/tab-container-item.scss +80 -80
  130. package/dist/tab-container.scss +89 -89
  131. package/dist/tab-v2.scss +583 -583
  132. package/dist/table-common.scss +506 -506
  133. package/dist/table.scss +685 -685
  134. package/dist/tabs.scss +395 -395
  135. package/dist/text-temp-v2.scss +139 -139
  136. package/dist/text-temp.scss +109 -109
  137. package/dist/toaster.scss +350 -350
  138. package/dist/toggle-button.scss +32 -32
  139. package/dist/transform-properties-module.scss +20 -20
  140. package/dist/uom-selector.scss +1169 -1169
  141. package/dist/user-elements copy.scss +1437 -1437
  142. package/dist/variant-picker.scss +2384 -2384
  143. package/dist/video.scss +476 -476
  144. package/dist/volume-pricing copy 2.scss +1468 -1468
  145. package/dist/volume-pricing copy.scss +1077 -1077
  146. package/dist/volume-pricing.scss +1175 -1175
  147. package/dist/widget.scss +148 -148
  148. package/dist/wishlist-overlay.scss +48 -48
  149. package/package.json +1 -1
package/dist/modal.scss CHANGED
@@ -1,2267 +1,2267 @@
1
- //modalv1
2
- // Variables
3
- $modal_background_color: var(--_base-white);
4
- $backdrop_color: rgba(0, 0, 0, 0.2);
5
- $box_shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
6
- $modal_width: 618px;
7
- $modal_padding: 24px;
8
- $border_radius: 10px;
9
- $header_font_size: 18px;
10
- $header_font_weight: 600;
11
- $close_btn_font_size: 24px;
12
- $close_btn_size: 35px;
13
- $footer_btn_background_color: #ffffff;
14
- $footer_btn_padding: 10px 15px;
15
- $footer_btn_font_size: 14px;
16
- $primary_100: var(--Primary-100, #ced4f6);
17
- $primary_500: var(--Primary-500, #162578);
18
- $gray_900: var(--Gray-900, #101828);
19
- $gap_between_elements: 24px;
20
- $padding_horizontal: 24px;
21
- $box_shadow_active: 0px 1px 2px rgba(16, 24, 40, 0.05);
22
- $divider_color: #eaecf0;
23
- $border_color: #d0d5dd;
24
- $modal_padding_body: 10px $padding_horizontal;
25
- $btn_margin: 0 5px;
26
- $divider_height: 1px;
27
- $inactive_btn_text_color: #fff;
28
- $active_btn_text_color: #fff;
29
-
30
- @mixin flexbox($justify: flex-start, $align: center, $gap: 12px) {
31
- display: flex;
32
- justify-content: $justify;
33
- align-items: $align;
34
- gap: $gap;
35
- }
36
-
37
- .modal-main-element {
38
- .modal-backdrop {
39
- position: fixed;
40
- top: 0;
41
- left: 0;
42
- width: 100%;
43
- height: 100%;
44
- background-color: $backdrop_color;
45
- z-index: calc(var(--_higher-zIndex) + var(--_cs-et-zIndex) + 9);
46
- animation: fadeIn 0.4s forwards;
47
- cursor: auto;
48
- }
49
-
50
- .modal-container {
51
- position: fixed;
52
- top: 50%;
53
- left: 50%;
54
- transform: translate(-50%, -50%);
55
- background-color: $modal_background_color;
56
- width: var(--_sf-ml-wh, 450px);
57
- max-width: min(75%, 850px);
58
- padding: $modal_padding;
59
- box-shadow: $box_shadow;
60
- border-radius: $border_radius;
61
- display: flex;
62
- flex-direction: column;
63
- z-index: calc(var(--_higher-zIndex) + var(--_cs-et-zIndex) + 10);
64
- cursor: auto;
65
-
66
- &.media__modal {
67
- width: 60%;
68
-
69
- .modal-body {
70
- overflow: hidden;
71
- }
72
-
73
- .modal-footer {
74
- justify-content: flex-end;
75
- gap: 12px;
76
- }
77
- }
78
- }
79
-
80
- .modal-header {
81
- position: relative;
82
- display: flex;
83
- align-items: center;
84
- justify-content: space-between;
85
- padding-bottom: 6px;
86
-
87
- h2 {
88
- font-size: $header_font_size;
89
- font-weight: $header_font_weight;
90
- margin: 0;
91
- color: $gray_900;
92
- }
93
-
94
- p {
95
- font-size: 14px;
96
- color: #475467;
97
- margin-top: 4px;
98
- }
99
-
100
- .modal-close-btn {
101
- width: $close_btn_size;
102
- height: $close_btn_size;
103
- font-size: $close_btn_font_size;
104
- background: none;
105
- border: none;
106
- cursor: pointer;
107
- display: flex;
108
- align-items: center;
109
- justify-content: center;
110
- border-radius: 4px;
111
- span {
112
- display: flex;
113
- svg {
114
- width: 20px;
115
- height: 20px;
116
- }
117
- }
118
-
119
- &:hover {
120
- background-color: var(--_gray-100);
121
- }
122
- }
123
- }
124
-
125
- .modal-body {
126
- font-size: 14px;
127
- color: $gray_900;
128
- }
129
-
130
- .modal-footer {
131
- @include flexbox(flex-end, center, 10px);
132
- flex-wrap: wrap;
133
- bottom: 0;
134
- width: 100%;
135
- margin-top: 24px;
136
- }
137
- .modal-footer-wrapper {
138
- display: flex;
139
- width: 100%;
140
- gap: 12px;
141
-
142
- .wishlist_button_wrapper {
143
- position: relative;
144
- width: 100%;
145
- .wishlist_btn {
146
- width: 100%;
147
- display: flex;
148
- justify-content: center;
149
- align-items: center;
150
- color: var(--_primary-400);
151
- height: 100%;
152
- &:hover {
153
- text-decoration: underline;
154
- color: var(--_primary-500);
155
- }
156
- }
157
- .wishlist_list_overlay {
158
- position: absolute;
159
- z-index: 10;
160
- top: 44px;
161
- left: 41px;
162
- min-height: 80px;
163
- max-height: 190px;
164
- width: 250px;
165
- overflow-y: auto;
166
- border-radius: 4px;
167
- background-color: var(--_base-white);
168
- box-shadow: 0px 0px 4px rgb(0, 0, 0, 0.1);
169
- border: 1px solid var(--_gray-200);
170
-
171
- .empty_message {
172
- height: 200px;
173
- display: flex;
174
- justify-content: center;
175
- align-items: center;
176
- padding: 24px;
177
- font-size: 16px;
178
- font-weight: 500;
179
- text-align: center;
180
- .dots {
181
- display: inline-flex;
182
- width: 20px; /* fixed space so text doesn’t shift */
183
- justify-content: space-between;
184
- align-items: flex-end;
185
- margin-left: 6px;
186
- margin-bottom: -9px;
187
- }
188
-
189
- .dots span {
190
- animation: blink 1.5s infinite;
191
- opacity: 0;
192
- width: 2px;
193
- height: 2px;
194
- border-radius: 50%;
195
- background-color: var(--_gray-700);
196
- }
197
-
198
- .dots span:nth-child(1) {
199
- animation-delay: 0s;
200
- }
201
- .dots span:nth-child(2) {
202
- animation-delay: 0.3s;
203
- }
204
- .dots span:nth-child(3) {
205
- animation-delay: 0.6s;
206
- }
207
-
208
- @keyframes blink {
209
- 0% {
210
- opacity: 0;
211
- }
212
- 50% {
213
- opacity: 1;
214
- }
215
- 100% {
216
- opacity: 0;
217
- }
218
- }
219
- }
220
- .wishlist_overlay_header {
221
- display: flex;
222
- justify-content: space-between;
223
- align-items: center;
224
- padding: 12px;
225
- font-size: 14px;
226
- font-weight: 600;
227
- }
228
- .wishlist_list_items {
229
- display: flex;
230
- flex-direction: column;
231
-
232
- .wishlist_item {
233
- display: flex;
234
- align-items: center;
235
- gap: 8px;
236
- color: var(--_gray-700);
237
- padding: 12px;
238
- border-radius: 4px;
239
- cursor: pointer;
240
- position: relative;
241
- margin: 4px;
242
- &.active {
243
- color: var(--_primary-400);
244
- }
245
-
246
- &:not(:last-child) {
247
- margin-bottom: 2px;
248
- }
249
-
250
- &:hover {
251
- background-color: var(--_primary-25);
252
- color: var(--_primary-400);
253
- }
254
-
255
- input {
256
- display: none; // hide default checkbox
257
- }
258
-
259
- .custom_checkbox {
260
- width: 18px;
261
- height: 18px;
262
- border: 2px solid var(--_gray-400);
263
- border-radius: 4px;
264
- display: inline-flex;
265
- align-items: center;
266
- justify-content: center;
267
- transition: all 0.2s ease-in-out;
268
- background-color: #fff;
269
-
270
- &::after {
271
- content: "";
272
- width: 8px;
273
- height: 4px;
274
- border-left: 2px solid #fff;
275
- border-bottom: 2px solid #fff;
276
- transform: rotate(-45deg);
277
- opacity: 0;
278
- transition: opacity 0.2s ease-in-out;
279
- margin-bottom: 4px;
280
- }
281
- }
282
-
283
- input:checked + .custom_checkbox {
284
- background-color: var(--_primary-400);
285
- border-color: var(--_primary-400);
286
-
287
- &::after {
288
- opacity: 1; // show tick mark
289
- }
290
- }
291
-
292
- .label_text {
293
- font-size: 14px;
294
- font-weight: 500;
295
- }
296
- }
297
- }
298
-
299
- .wishlist_overlay_footer {
300
- display: flex;
301
- justify-content: space-between;
302
- align-items: center;
303
- padding: 8px;
304
- font-size: 14px;
305
- font-weight: 600;
306
- border-top: 1px solid var(--_gray-200);
307
- padding: 8px;
308
-
309
- .btn {
310
- padding: 8px 12px;
311
- width: 100%;
312
- border-radius: 4px;
313
- text-align: center;
314
- width: 100%;
315
- font-weight: 500;
316
- text-decoration: none !important;
317
- &.primary {
318
- background-color: var(--_primary-400);
319
- color: var(--_base-white);
320
- font-size: 14px;
321
- }
322
- &.secondary {
323
- color: var(--_gray-700);
324
- &:hover {
325
- color: var(--_gray-900);
326
-
327
- background-color: var(--_gray-100);
328
- }
329
- }
330
- }
331
- }
332
-
333
- .no_wishlist,
334
- .loading_state {
335
- min-height: 80px;
336
- display: flex;
337
- justify-content: center;
338
- align-items: center;
339
- font-size: 14px;
340
- font-weight: 700;
341
- color: var(--_gray-700);
342
- }
343
- }
344
- }
345
-
346
- .modal-footer-secondary-btn {
347
- padding: 12px 24px;
348
- border-radius: 4px;
349
- background-color: var(--_base-white);
350
- color: var(--_primary-400);
351
- font-weight: 500;
352
- width: 100%;
353
- display: flex;
354
- justify-content: center;
355
- // &:hover {
356
- // text-decoration: underline;
357
- // }
358
- }
359
-
360
- .modal-footer-danger-btn {
361
- padding: 12px 24px;
362
- border-radius: 4px;
363
- background-color: #d92d20;
364
- color: #fff;
365
- font-weight: 600;
366
- width: 100%;
367
- display: flex;
368
- border: 1px solid #d92d20;
369
- justify-content: center;
370
- align-items: center;
371
-
372
- &:hover {
373
- // background-color: darken(#d92d20, 5%);
374
- background-color: color-mix(in srgb, #d92d20 95%, var(--_base-black) 5%);
375
- }
376
- }
377
- }
378
-
379
- @keyframes fadeIn {
380
- from {
381
- opacity: 0;
382
- }
383
- to {
384
- opacity: 1;
385
- }
386
- }
387
- }
388
-
389
- //modalv2 css
390
- // Colors
391
- $white: var(--_white);
392
- $black: var(--base-black);
393
- $gray-100: #f9fafb;
394
- $gray-300: #e5e7eb;
395
- $gray-400: #ccc;
396
- $gray-600: #737373;
397
- $gray-700: #6b7280;
398
- $gray-800: #444;
399
- $gray-900: #111827;
400
-
401
- $primary: var(--_primary-400);
402
- $primary-hover: var(--_primary-500);
403
- $text-dark: #222;
404
- $text-medium: #374151;
405
- $text-light: #666;
406
-
407
- // Typography
408
- $font-base: "Segoe UI";
409
- $font-size-base: 14px;
410
- $font-size-sm: 12px;
411
- $font-size-md: 15px;
412
- $font-size-lg: 18px;
413
-
414
- // Spacing & Sizes
415
- $radius: 6px;
416
- $radius-lg: 8px;
417
- $input-height: 32px;
418
- $input-padding: 10px 12px;
419
-
420
- // Z-Index
421
- $z-index-modal: calc(var(--_higher-zIndex) + var(--_cs-et-zIndex) + 10);
422
- $z-index-backdrop: calc(var(--_higher-zIndex) + var(--_cs-et-zIndex) + 11);
423
- $z-index-wrapper: calc(var(--_higher-zIndex) + var(--_cs-et-zIndex) + 9);
424
- $z-index-minimized: calc(var(--_higher-zIndex) + var(--_cs-et-zIndex) + 12);
425
- $z-index-min-cart: calc(
426
- var(--_higher-zIndex) + var(--_cs-et-zIndex) + 13
427
- ); // Higher z-index for min cart
428
-
429
- // Shadows
430
- $shadow-md: 0 8px 20px rgba(0, 0, 0, 0.1);
431
-
432
- .modalV2-main {
433
- position: fixed;
434
- z-index: 9999;
435
- inset: 0;
436
- background: rgba(0, 0, 0, 0.4);
437
-
438
- .modalV2-wrapper {
439
- overflow: hidden !important;
440
- position: fixed;
441
- left: 50%;
442
- transition:
443
- all 0.4s ease-in-out,
444
- transform 0.4s ease-in-out;
445
- background: $white;
446
- border-radius: $radius-lg;
447
- // padding: 0px 20px;
448
- width: 75%;
449
- max-width: calc(1280px - 10%);
450
- font-family: $font-base;
451
- box-shadow: $shadow-md;
452
- z-index: $z-index-wrapper;
453
- max-height: 70vh;
454
- overflow: scroll;
455
- display: flex;
456
- flex-direction: column;
457
- .modal-body {
458
- height: auto;
459
- display: flex;
460
- flex-direction: column;
461
- width: 100%;
462
- flex: 1 1 auto;
463
- overflow-y: auto;
464
-
465
- // Payment with checkout started
466
- .retry-order-overlay {
467
- .retry-order-container {
468
- max-width: 960px;
469
- margin: 0 auto;
470
- .chk_payment-options {
471
- form {
472
- display: flex;
473
- flex-direction: column;
474
- gap: 24px;
475
- }
476
- display: flex;
477
- flex-direction: column;
478
- margin-block: 12px;
479
- .chk_payment_options_form {
480
- display: flex;
481
- flex-direction: column;
482
- overflow: hidden;
483
- }
484
- .payment_program {
485
- // padding: 0 12px;
486
-
487
- display: flex;
488
- flex-direction: column;
489
- gap: 16px;
490
-
491
- .payment_program_header {
492
- display: flex;
493
- justify-content: space-between;
494
- // gap: 8px;
495
- align-items: center;
496
-
497
- // margin-bottom: 16px;
498
-
499
- &_label {
500
- display: flex;
501
- justify-content: space-between;
502
- align-items: center;
503
- &_title {
504
- font-size: 14px;
505
- font-weight: 600;
506
- color: var(--_gray-600);
507
- }
508
- }
509
- &_pds {
510
- font-size: 14px;
511
- font-weight: 600;
512
- &_label {
513
- font-size: 14px;
514
- color: var(--_gray-600);
515
- }
516
- &_value {
517
- font-size: 14px;
518
- color: var(--_gray-900);
519
- }
520
- }
521
- .chk_checkbox_wrapper {
522
- display: flex;
523
- width: fit-content;
524
- align-items: center;
525
- gap: 12px;
526
-
527
- .discard_btn {
528
- padding: 12px 16px;
529
- border-radius: 4px;
530
- color: var(--_gray-600);
531
- &:hover {
532
- background-color: var(--_gray-100);
533
- }
534
- }
535
-
536
- input[type="checkbox"] {
537
- display: none;
538
- }
539
- .payment_program_title {
540
- font-size: 16px;
541
- font-weight: 700;
542
- color: var(--_gray-900);
543
- }
544
-
545
- .chk_shipping_address_use_as_billing_address_chkbx {
546
- display: flex;
547
- align-items: center;
548
- cursor: pointer;
549
- gap: 10px;
550
-
551
- color: var(--_gray-900);
552
- font-weight: 500;
553
- font-size: 14px;
554
-
555
- .custom-checkbox {
556
- width: 20px;
557
- height: 20px;
558
- border: 1px solid #d0d5dd;
559
- border-radius: 4px;
560
- position: relative;
561
- background-color: #fff;
562
- transition: all 0.2s ease;
563
-
564
- &::after {
565
- content: "";
566
- position: absolute;
567
- display: none;
568
- left: 6px;
569
- top: 0.5px;
570
- width: 5px;
571
- height: 10px;
572
- border: solid #fff;
573
- border-width: 0 2px 2px 0;
574
- transform: rotate(45deg);
575
- }
576
- }
577
- }
578
-
579
- input[type="checkbox"]:checked + label {
580
- .custom-checkbox {
581
- background-color: #004dff;
582
- border-color: #004dff;
583
-
584
- &::after {
585
- display: block;
586
- }
587
- }
588
- }
589
- }
590
- }
591
- }
592
- .gift_crd_chk_payment_option {
593
- border: 1px solid var(--_gray-300);
594
- border-radius: 6px;
595
- .add_gift_card {
596
- display: flex;
597
- gap: 12px;
598
- padding: 16px;
599
-
600
- .gc_icon {
601
- svg {
602
- width: 18px;
603
- height: 14px;
604
- }
605
- }
606
-
607
- .gc_info {
608
- display: flex;
609
- flex-direction: column;
610
- gap: 6px;
611
-
612
- .gc_title {
613
- font-size: 14px;
614
- font-weight: 600;
615
- }
616
- }
617
- }
618
- .payment_heading {
619
- padding: 16px;
620
- .chk_payment_options_heading {
621
- padding: 0;
622
- font-weight: 600;
623
- }
624
- }
625
- // gift card styles
626
- .chk_gft_crd_wrapper {
627
- display: flex;
628
- justify-content: space-between;
629
- align-items: center;
630
- padding: 16px 16px 0 16px;
631
- &_item {
632
- display: flex;
633
- align-items: center;
634
- gap: 16px;
635
- &_icon {
636
- width: 40px;
637
- height: 40px;
638
- border: 1px solid var(--_gray-200);
639
- border-radius: 6px;
640
- display: flex;
641
- justify-content: center;
642
- align-items: center;
643
- }
644
- &_info {
645
- display: flex;
646
- flex-direction: column;
647
- &_title {
648
- font-size: 14px;
649
- margin-bottom: 4px;
650
- font-weight: 600;
651
- }
652
- &_desc {
653
- display: flex;
654
- gap: 4px;
655
- &_value {
656
- font-size: 12px;
657
- color: var(--_gray-600);
658
- }
659
- &_label {
660
- font-size: 12px;
661
- color: var(--_gray-900);
662
- }
663
- }
664
- }
665
- &_pin {
666
- margin-left: 36px;
667
- input[type="number"] {
668
- border: 1px solid var(--_gray-300);
669
- border-radius: 4px;
670
- background-color: var(--_base-white);
671
- width: 95px;
672
- height: 44px;
673
- padding-inline: 10px;
674
- &:focus {
675
- outline: 2px solid var(--_primary-100);
676
- border: 1px solid var(--_primary-300);
677
- }
678
- }
679
- }
680
- }
681
-
682
- &_input {
683
- border: 1px solid var(--_gray-300);
684
- border-radius: 4px;
685
- background-color: var(--_base-white);
686
- height: 44px;
687
- width: 120px;
688
- display: flex;
689
- align-items: center;
690
- gap: 8px;
691
- padding-left: 10px;
692
- input[type="number"] {
693
- background-color: var(--_base-white);
694
- padding-right: 10px;
695
- }
696
- &:focus-within {
697
- outline: 2px solid var(--_primary-100);
698
- border: 1px solid var(--_primary-300);
699
- }
700
- }
701
- }
702
- .chk_gft_crd_wrapper {
703
- &_btn {
704
- text-align: left;
705
- margin-bottom: 16px;
706
- color: var(--_primary-400);
707
- &:hover {
708
- text-decoration: underline;
709
- }
710
- }
711
- }
712
- }
713
-
714
- .chk_payment_option_wrapper {
715
- display: flex;
716
- flex-direction: column;
717
- overflow: hidden;
718
- border-radius: 6px;
719
- border: 1px solid var(--_gray-300);
720
-
721
- .pp_pmnt_method_groups {
722
- &:not(:last-child) {
723
- border-bottom: 1px solid var(--_gray-200);
724
- padding-bottom: 16px;
725
- }
726
- .pp_ppm_section {
727
- background-color: var(--_base-white);
728
- border-bottom: 1px solid var(--_gray-300);
729
- padding: 14px 12px;
730
-
731
- display: flex;
732
- justify-content: space-between;
733
- gap: 8px;
734
- .pp_ppm_section_label {
735
- font-size: 14px;
736
- font-weight: 700;
737
- color: var(--_gray-900);
738
- }
739
- .pp_ppm_section_value {
740
- font-size: 14px;
741
- font-weight: 600;
742
- color: var(--_gray-600);
743
- .pp_ppm_section_value_label {
744
- font-weight: 500;
745
- color: var(--_gray-500);
746
- }
747
- .pp_ppm_section_value_amount {
748
- font-weight: 500;
749
- color: var(--_gray-500);
750
- }
751
- }
752
- }
753
- .payment_methods {
754
- // padding: 12px;
755
- display: grid;
756
- gap: 8px;
757
- .chk_payment_option {
758
- .add_new_credit_card {
759
- padding: 16px 16px 0px 16px;
760
- display: flex;
761
- justify-content: space-between;
762
- font-weight: 600;
763
- .cc_tertiary_btn {
764
- // color: var(--_primary-400);
765
- color: var(--_thm-cs-tt-ls-as);
766
- font-size: 14px;
767
- &:hover {
768
- text-decoration: underline;
769
- }
770
- }
771
- }
772
- .chk_payment_section_wrapper {
773
- width: 100%;
774
- display: flex;
775
- justify-content: space-between;
776
- padding: 16px;
777
-
778
- .chk_payment_section {
779
- display: flex;
780
- justify-content: space-between;
781
- align-items: center;
782
- width: 100%;
783
- .chk_payment_section_col_left {
784
- display: flex;
785
- gap: 12px;
786
- svg {
787
- width: 24px;
788
- height: 24px;
789
- }
790
- .chk_payment_section_method {
791
- display: flex;
792
- flex-direction: column;
793
- .chk_payment_section_method_name {
794
- font-size: 14px;
795
- font-weight: 700;
796
- line-height: 20px;
797
- color: var(--_gray-700);
798
- }
799
- & > div {
800
- display: flex;
801
- gap: 2px;
802
- .label {
803
- font-size: 12px;
804
- color: var(--_gray-500);
805
- font-weight: 400;
806
- }
807
- .price {
808
- font-size: 12px;
809
- color: var(--_gray-900);
810
- font-weight: 500;
811
- }
812
- }
813
- }
814
- }
815
- &_col_right {
816
- .chk_currency_inp {
817
- height: 44px;
818
- border: 1px solid var(--_gray-200);
819
- border-radius: 4px;
820
- background-color: var(--_base-white);
821
- display: flex;
822
- width: 120px;
823
- overflow: hidden;
824
- align-items: center;
825
- padding-inline: 12px;
826
- gap: 12px;
827
- padding: 8px 12px;
828
- border: 1px solid var(--_gray-300);
829
- border-radius: 4px;
830
- &:focus-within {
831
- border: 1px solid var(--_primary-200);
832
- outline: 2px solid var(--_primary-50);
833
- }
834
- input {
835
- height: inherit;
836
- background-color: var(--_base-white);
837
- &:disabled {
838
- opacity: 0.8;
839
- cursor: not-allowed;
840
- }
841
- }
842
- }
843
- }
844
- }
845
-
846
- .chk_payment_options_heading {
847
- color: var(--_gray-900);
848
- font-size: 16px;
849
- font-weight: 700;
850
- .chk_primary_btn_link {
851
- }
852
- }
853
-
854
- // payment other options styles
855
- .chk_pmnt_other_options {
856
- display: flex;
857
- justify-content: space-between;
858
- gap: 80px;
859
- padding: 16px;
860
- .chk_pmnt_other_options_left_container {
861
- display: flex;
862
- gap: 12px;
863
- .chk_pmnt_option_info_wrapper {
864
- display: flex;
865
- gap: 12px;
866
- .cards {
867
- display: flex;
868
- flex-direction: column;
869
- gap: 8px;
870
- .chk_payment_options_name {
871
- font-weight: 600;
872
- }
873
- span {
874
- font-size: 12px;
875
- .chk_payment_options_label {
876
- color: var(--_gray-600);
877
- }
878
- .chk_payment_options_value {
879
- color: var(--_gray-900);
880
- }
881
- }
882
- }
883
- }
884
- }
885
- .chk_pmnt_other_options_container {
886
- padding: 16px;
887
- }
888
- }
889
-
890
- &__other_option_wrapper {
891
- display: flex;
892
- width: 100%;
893
- justify-content: space-between;
894
- padding: 16px;
895
-
896
- @media (max-width: 500px) {
897
- flex-direction: column;
898
- }
899
- }
900
-
901
- &_left_container {
902
- display: flex;
903
- gap: 12px;
904
- align-items: flex-start;
905
- .chk_payment_option__info_wrapper {
906
- display: flex;
907
- gap: 0px;
908
- }
909
-
910
- @media (max-width: 500px) {
911
- flex-wrap: wrap;
912
- }
913
- }
914
-
915
- &__left_wrapper {
916
- display: flex;
917
- flex-direction: column;
918
- align-items: flex-start;
919
- gap: 16px;
920
- }
921
-
922
- &__card_icon {
923
- width: 60px;
924
- height: 40px;
925
- }
926
-
927
- &__info_wrapper {
928
- display: flex;
929
- flex-direction: column;
930
- }
931
-
932
- &_right_container {
933
- display: flex;
934
- gap: 6px;
935
- align-items: flex-start;
936
-
937
- @media (max-width: 500px) {
938
- justify-content: flex-end;
939
- }
940
- }
941
-
942
- &_input {
943
- display: flex;
944
- padding: 9px 12px;
945
- align-items: center;
946
- max-width: 96px;
947
- background-color: var(--_base-white);
948
- border: 1px solid var(--_gray-300);
949
- border-radius: 6px;
950
- color: var(--_gray-700);
951
-
952
- &:focus-within {
953
- border: 1px solid var(--_primary-300);
954
- outline: 2px solid var(--_primary-100);
955
- }
956
-
957
- .icon {
958
- svg {
959
- path {
960
- stroke: var(--_primary-400);
961
- }
962
- }
963
- }
964
-
965
- .input_field {
966
- background-color: var(--_base-white);
967
- border: 1px solid var(--_gray-300);
968
- border-radius: 6px;
969
- color: var(--_gray-700);
970
-
971
- &:focus-within {
972
- border: 1px solid var(--_primary-300);
973
- outline: 2px solid var(--_primary-100);
974
- }
975
- }
976
- }
977
- }
978
- .chk_cred_form_details {
979
- border-top: 1px solid var(--_gray-100);
980
- padding: 16px;
981
- .chk_basic_form_title {
982
- font-size: 14px;
983
- margin-bottom: 16px;
984
- font-weight: 600;
985
- }
986
- .chk_form_fields {
987
- h3 {
988
- font-size: 14px;
989
- margin-bottom: 8px;
990
- }
991
- display: flex;
992
- flex-direction: column;
993
- gap: 24px;
994
- width: 500px;
995
- .chk_form_field {
996
- width: 100%;
997
- &.expiry_details {
998
- width: 80px;
999
- }
1000
-
1001
- display: flex;
1002
- flex-direction: column;
1003
- gap: 6px;
1004
- width: 100%;
1005
-
1006
- .chk_form_field_label {
1007
- // font-size: 14px;
1008
- // color: var(--_gray-600);
1009
- padding-bottom: 2px;
1010
- color: var(--_gray-700);
1011
- }
1012
- .chk_form_field_inp {
1013
- width: -webkit-fill-available;
1014
- height: 40px;
1015
- background-color: var(--_base-white);
1016
- color: var(--_gray-600);
1017
- border: 1px solid var(--_gray-300);
1018
- border-radius: 6px;
1019
- height: 40px;
1020
- padding: 8px 12px;
1021
- &::placeholder {
1022
- color: var(--_gray-600);
1023
- }
1024
- input &:focus-within {
1025
- border: 1px solid var(--_primary-300);
1026
- outline: 2px solid var(--_primary-100);
1027
- }
1028
- }
1029
- .error_msg {
1030
- display: block;
1031
- color: var(--_error-700);
1032
- font-size: 12px;
1033
- }
1034
- }
1035
-
1036
- .checkbox {
1037
- width: auto;
1038
-
1039
- label {
1040
- display: flex;
1041
- align-items: center;
1042
- gap: 8px;
1043
- cursor: pointer;
1044
- position: relative;
1045
- user-select: none;
1046
-
1047
- input[type="checkbox"] {
1048
- display: none;
1049
-
1050
- &:checked + .custom-checkbox::after {
1051
- opacity: 1;
1052
- }
1053
- }
1054
-
1055
- .custom-checkbox {
1056
- width: 16px;
1057
- height: 16px;
1058
- border: 2px solid var(--_primary-400);
1059
- border-radius: 4px;
1060
- position: relative;
1061
- display: inline-block;
1062
- box-sizing: border-box;
1063
-
1064
- &::after {
1065
- content: "";
1066
- position: absolute;
1067
- left: 3px;
1068
- top: 0px;
1069
- width: 4px;
1070
- height: 8px;
1071
- border: solid var(--_primary-400);
1072
- border-width: 0 1px 1px 0;
1073
- transform: rotate(45deg);
1074
- opacity: 0;
1075
- transition: opacity 0.2s ease-in-out;
1076
- }
1077
- }
1078
- }
1079
- }
1080
- .expiry_details {
1081
- display: flex;
1082
- gap: 12px;
1083
- .cvv_inp {
1084
- width: 110px;
1085
- }
1086
- }
1087
- }
1088
- .chk_form_actions {
1089
- display: flex;
1090
- gap: 12px;
1091
- .chk_sav_btn {
1092
- padding: 12px 16px;
1093
- background-color: var(--_primary-400);
1094
- border-radius: 6px;
1095
- color: var(--_base-white);
1096
- font-size: 14px;
1097
- &:hover {
1098
- background-color: var(--_primary-500);
1099
- }
1100
- }
1101
- .chk_can_btn {
1102
- padding: 12px 16px;
1103
- background-color: transparent;
1104
- border-radius: 6px;
1105
- color: var(--_gray-600);
1106
- padding-inline: 10px;
1107
- font-size: 14px;
1108
-
1109
- &:hover {
1110
- background-color: var(--_gray-50);
1111
- color: var(--_gray-900);
1112
- }
1113
- }
1114
- }
1115
- }
1116
- }
1117
- .add_credit_card {
1118
- display: flex;
1119
- gap: 12px;
1120
- padding: 16px;
1121
-
1122
- .cc_icon {
1123
- svg {
1124
- width: 18px;
1125
- height: 14px;
1126
- }
1127
- }
1128
-
1129
- .cc_info {
1130
- display: flex;
1131
- justify-content: space-between;
1132
- width: 100%;
1133
- gap: 6px;
1134
-
1135
- .cc_title {
1136
- font-size: 14px;
1137
- font-weight: 600;
1138
- }
1139
- }
1140
- }
1141
- .add_new_credit_card {
1142
- display: flex;
1143
- justify-content: space-between;
1144
- align-items: center;
1145
- padding-inline: 16px;
1146
- }
1147
- .cc_tertiary_btn {
1148
- // color: var(--_primary-400);
1149
- color: var(--_thm-cs-tt-ls-as);
1150
-
1151
- &:hover {
1152
- // color: var(--_primary-500);
1153
- color: var(--_thm-cs-tt-ls-as);
1154
- text-decoration: underline;
1155
- }
1156
- }
1157
- }
1158
- }
1159
- }
1160
-
1161
- .payment_heading {
1162
- display: flex;
1163
- justify-content: space-between;
1164
- border-bottom: 1px solid var(--_gray-100);
1165
- font-weight: 600;
1166
- gap: 8px;
1167
- }
1168
-
1169
- .gc_tertiary_btn {
1170
- color: var(--_primary-400);
1171
- font-size: 14px;
1172
- line-height: auto;
1173
-
1174
- &:hover {
1175
- color: var(--_thm-cs-tt-ls-as);
1176
- text-decoration: underline;
1177
- }
1178
- }
1179
- .chk_payment_options_heading {
1180
- color: var(--_gray-900);
1181
- font-size: 16px;
1182
- font-weight: 700;
1183
- display: flex;
1184
- justify-content: space-between;
1185
- gap: 8px;
1186
- display: flex;
1187
- justify-content: space-between;
1188
- gap: 8px;
1189
- }
1190
- }
1191
- .chk_payment_cred_section {
1192
- display: flex;
1193
- justify-content: space-between;
1194
- align-items: center;
1195
- padding: 16px 16px 8px 16px;
1196
-
1197
- .chk_currency_inp {
1198
- height: 44px;
1199
- border: 1px solid var(--_gray-200);
1200
- border-radius: 4px;
1201
- background-color: var(--_base-white);
1202
- display: flex;
1203
- width: 120px;
1204
- overflow: hidden;
1205
- align-items: center;
1206
- padding: 8px 12px;
1207
- gap: 12px;
1208
- &:focus-within {
1209
- border: 1px solid var(--_primary-200);
1210
- outline: 2px solid var(--_primary-50);
1211
- }
1212
- input {
1213
- height: inherit;
1214
- background-color: var(--_base-white);
1215
- &:disabled {
1216
- opacity: 0.8;
1217
- cursor: not-allowed;
1218
- }
1219
- }
1220
- }
1221
- .chk_payment_cred_section_col_left {
1222
- .chk_payment_cred_section_col_left_crd_details {
1223
- display: flex;
1224
- gap: 80px;
1225
- align-items: center;
1226
- & > div {
1227
- display: flex;
1228
- gap: 12px;
1229
- .card_icon {
1230
- width: 60px;
1231
- height: 40px;
1232
- border-radius: 4px;
1233
- }
1234
- .card_details {
1235
- .card_details_num {
1236
- font-weight: 600;
1237
- color: var(--_gray-900);
1238
- font-size: 14px;
1239
- line-height: 20px;
1240
- }
1241
- & > div {
1242
- display: flex;
1243
- .card_details_label {
1244
- color: var(--_gray-500);
1245
- font-size: 12px;
1246
- font-weight: 400;
1247
- }
1248
- .card_details_value {
1249
- color: var(--_gray-900);
1250
- font-size: 12px;
1251
- font-weight: 500;
1252
- }
1253
- }
1254
- }
1255
- }
1256
- }
1257
- }
1258
- }
1259
-
1260
- // giftcard form styles
1261
- .chk_gift_card_details {
1262
- border-top: 1px solid var(--_gray-300);
1263
- padding: 16px;
1264
- .chk_gift_card_form {
1265
- display: flex;
1266
- flex-direction: column;
1267
- gap: 16px;
1268
- max-width: 480px;
1269
- .chk_gift_cart_form_title {
1270
- font-size: 14px;
1271
- font-weight: 600;
1272
- }
1273
-
1274
- .chk_gift_form_fields {
1275
- display: flex;
1276
- gap: 12px;
1277
- width: 100%;
1278
- .chk_gift_inp_field {
1279
- display: flex;
1280
- flex-direction: column;
1281
- gap: 6px;
1282
- width: 100%;
1283
- label {
1284
- color: var(--_gray-600);
1285
- }
1286
- .chk_gift_inp {
1287
- border: 1px solid var(--_gray-300);
1288
- border-radius: 6px;
1289
- height: 40px;
1290
- padding-inline: 10px;
1291
- &:placeholder-shown {
1292
- padding-left: 10px;
1293
- color: var(--_gray-400);
1294
- }
1295
- &:focus {
1296
- border: 1px solid var(--_primary-300);
1297
- outline: 2px solid var(--_primary-100);
1298
- }
1299
- }
1300
- &.pin {
1301
- width: 110px;
1302
- }
1303
- .error_msg {
1304
- display: block;
1305
- color: var(--_error-700);
1306
- font-size: 12px;
1307
- }
1308
- }
1309
- .error_msg {
1310
- color: var(--_error-700);
1311
- font-size: 14px;
1312
- }
1313
- }
1314
- }
1315
- }
1316
- .chk_form_actions {
1317
- display: flex;
1318
- gap: 12px;
1319
- .chk_sav_btn {
1320
- padding: 12px 16px;
1321
- background-color: var(--_primary-400);
1322
- border-radius: 6px;
1323
- color: var(--_base-white);
1324
- font-size: 14px;
1325
- &:hover {
1326
- background-color: var(--_primary-500);
1327
- }
1328
- }
1329
- .chk_can_btn {
1330
- padding: 12px 16px;
1331
- background-color: transparent;
1332
- border-radius: 6px;
1333
- color: var(--_gray-600);
1334
- padding-inline: 10px;
1335
- font-size: 14px;
1336
-
1337
- &:hover {
1338
- background-color: var(--_gray-50);
1339
- color: var(--_gray-900);
1340
- }
1341
- }
1342
- }
1343
- }
1344
- }
1345
-
1346
- // Payment with checkout end
1347
-
1348
- .dropdown-with-input-section {
1349
- // border: 0.5px solid var(--_gray-300);
1350
- .dropdown-menu {
1351
- margin-left: -7px !important;
1352
- }
1353
- }
1354
-
1355
- .wishlist-modal {
1356
- display: flex;
1357
- flex-direction: column;
1358
- width: 100%;
1359
- .wishlist-modal-section {
1360
- padding: 16px 24px 24px 24px;
1361
- gap: 16px !important;
1362
- overflow-x: hidden;
1363
- display: flex;
1364
- flex-direction: column;
1365
- input[type="text"] {
1366
- height: 40px;
1367
- border: 1px solid var(--_gray-300);
1368
- border-radius: 6px;
1369
- padding-inline: 16px;
1370
- }
1371
- }
1372
- }
1373
- // .action-buttons {
1374
- // display: flex;
1375
- // gap: 1rem;
1376
- // align-items: center;
1377
- // justify-content: flex-end;
1378
- // flex: 1 1 auto;
1379
- // padding: 16px 24px;
1380
- // border-top: 1px solid var(--_gray-200);
1381
- // gap: 12px;
1382
- // button {
1383
- // padding: 12px 16px;
1384
- // border-radius: 6px;
1385
- // }
1386
- // .create-btn {
1387
- // display: flex;
1388
- // justify-content: center;
1389
- // align-items: center;
1390
- // gap: 8px;
1391
- // background-color: var(--_primary-400);
1392
- // color: var(--_base-white);
1393
- // &.disabled {
1394
- // opacity: 0.5;
1395
- // pointer-events: none;
1396
- // }
1397
- // .loader {
1398
- // animation: rotate-icon 1s linear infinite;
1399
- // display: inline-block;
1400
- // transform-origin: center;
1401
-
1402
- // svg path {
1403
- // stroke: var(--_primary-200);
1404
- // }
1405
- // }
1406
-
1407
- // &:hover {
1408
- // background-color: var(--_primary-500);
1409
- // }
1410
- // }
1411
- // .discard-btn {
1412
- // &:hover {
1413
- // background-color: var(--_gray-50);
1414
- // color: var(--_gray-900);
1415
- // }
1416
- // }
1417
- // }
1418
-
1419
- // processing loader
1420
- .pmnt_process_container {
1421
- display: flex;
1422
- justify-content: center;
1423
- align-items: center;
1424
- height: 100%;
1425
- width: 100%;
1426
- background-color: var(--_gray-100);
1427
- .process_load_wrapper {
1428
- .process_loader_content {
1429
- display: flex;
1430
- flex-direction: column;
1431
- /* gap: 8px; */
1432
- justify-content: center;
1433
- align-items: center;
1434
- p {
1435
- margin-top: 8px;
1436
- }
1437
- .process_loader_box {
1438
- .processing_loader {
1439
- position: relative;
1440
- width: 64px;
1441
- height: 64px;
1442
- margin-bottom: 24px;
1443
- &::before,
1444
- &::after {
1445
- content: "";
1446
- position: absolute;
1447
- border-radius: 50%;
1448
- }
1449
-
1450
- // Background stroke
1451
- &::before {
1452
- width: 100%;
1453
- height: 100%;
1454
- border: 6px solid #e0e0e0;
1455
- }
1456
-
1457
- // Animated stroke
1458
- &::after {
1459
- width: 100%;
1460
- height: 100%;
1461
- border: 6px solid transparent;
1462
- border-top-color: #243dc6;
1463
- animation: processing_loader_spin 1s linear infinite;
1464
- }
1465
- }
1466
- h3 {
1467
- margin-block: 10px;
1468
- }
1469
- }
1470
- @keyframes processing_loader_spin {
1471
- 0% {
1472
- transform: rotate(0deg);
1473
- }
1474
- 100% {
1475
- transform: rotate(360deg);
1476
- }
1477
- }
1478
- }
1479
- }
1480
- }
1481
- }
1482
- &.fullscreen {
1483
- transition:
1484
- all 0.5s ease-in-out,
1485
- transform 0.5s ease-in-out;
1486
- top: 50%;
1487
- left: 50%;
1488
- width: 99vw;
1489
- height: 98vh;
1490
- border-radius: $radius-lg;
1491
- transform: translate(-50%, -50%);
1492
- box-shadow: none;
1493
- z-index: $z-index-modal;
1494
- display: flex;
1495
- flex-direction: column;
1496
- // max-height: 100vh;
1497
- // max-width: 1200px;
1498
- max-height: calc(100vw - 12px);
1499
- max-width: calc(100vw - 12px);
1500
-
1501
- .product-list {
1502
- flex: 1;
1503
- overflow-y: auto;
1504
- margin-top: 24px;
1505
- }
1506
-
1507
- .footer-bar {
1508
- border-top: 1px solid $gray-300;
1509
- margin: 0px;
1510
- padding: 10px 16px;
1511
- display: flex;
1512
- align-items: center;
1513
- }
1514
- }
1515
-
1516
- &.center {
1517
- top: 50%;
1518
- transform: translate(-50%, -50%);
1519
- }
1520
-
1521
- &.bottom {
1522
- bottom: 5%;
1523
- transform: translate(-50%, 0%);
1524
- height: 100%;
1525
- }
1526
-
1527
- .top-bar-emp-bulk-order {
1528
- position: sticky;
1529
- top: 0;
1530
- background: $white;
1531
- z-index: var(--_higher-zIndex);
1532
- // padding: 0 16px;
1533
- border-bottom: 1px solid #d0d5dd;
1534
- .title-bar {
1535
- display: flex;
1536
- justify-content: space-between;
1537
- align-items: center;
1538
- // padding: 15px 0px;
1539
- // height: 60px;
1540
- padding: 8px 8px 8px 16px;
1541
-
1542
- .left-col {
1543
- .title {
1544
- color: var(--_gray-900);
1545
- font-size: 16px;
1546
- font-weight: 600;
1547
- line-height: 24px;
1548
- display: flex;
1549
- gap: 8px;
1550
- align-items: center;
1551
- span {
1552
- display: flex;
1553
- svg {
1554
- width: 20px;
1555
- height: 20px;
1556
- }
1557
- }
1558
-
1559
- .modal_heading_icon {
1560
- display: flex;
1561
- align-items: center;
1562
- justify-content: center;
1563
-
1564
- svg {
1565
- width: 20px;
1566
- height: 20px;
1567
- }
1568
- }
1569
-
1570
- .count {
1571
- font-weight: 700;
1572
- color: $gray-600;
1573
- background-color: #f2f4f7;
1574
- border-radius: 6px;
1575
- font-size: $font-size-sm;
1576
- // width: 25px;
1577
- height: 25px;
1578
- padding: 0 8px;
1579
- display: flex;
1580
- // align-items: center;
1581
- justify-content: center;
1582
- }
1583
- }
1584
- }
1585
- .right_col {
1586
- display: flex;
1587
- align-items: center;
1588
- gap: 12px;
1589
- .bulk-order-pad-header-body {
1590
- .checkout_btn {
1591
- padding: 8px 16px;
1592
- border-radius: 4px;
1593
- background-color: var(--_thm-cs-at-py);
1594
- color: var(--_base-white);
1595
- }
1596
- }
1597
- .employee_bulk_order_header {
1598
- display: flex;
1599
- justify-self: end;
1600
- align-items: center;
1601
-
1602
- .single_payment_action {
1603
- display: flex;
1604
- align-items: center;
1605
- gap: 6px;
1606
- }
1607
- .svg_icon {
1608
- display: flex;
1609
- align-items: center;
1610
- cursor: pointer;
1611
- }
1612
-
1613
- .employee_bulk_order_header_item {
1614
- color: #344054;
1615
- font-size: 14px;
1616
- display: flex;
1617
- justify-content: center;
1618
- align-items: center;
1619
- gap: 4px;
1620
- position: relative;
1621
- line-height: 20px;
1622
- &:after {
1623
- content: "";
1624
- width: 1px;
1625
- height: 24px;
1626
- background: #d0d5dd;
1627
- position: absolute;
1628
- right: -12px;
1629
- }
1630
-
1631
- .single_checkout_sec_opt {
1632
- display: flex;
1633
- gap: 8px;
1634
- }
1635
-
1636
- .disabled {
1637
- opacity: 0.4;
1638
- }
1639
- }
1640
-
1641
- .emp_info {
1642
- display: flex;
1643
- padding-right: 16px;
1644
- .emp_info_item {
1645
- color: var(--_gray-600);
1646
- font-size: 14px;
1647
- display: flex;
1648
- justify-content: center;
1649
- align-items: center;
1650
- position: relative;
1651
- line-height: 20px;
1652
- .emp_count {
1653
- font-size: 16px;
1654
- color: var(--_gray-900);
1655
- font-weight: 600;
1656
- margin-left: 4px;
1657
- }
1658
- &:not(:last-child):after {
1659
- content: "";
1660
- background: var(--_gray-400);
1661
- width: 4px;
1662
- height: 4px;
1663
- border-radius: 50%;
1664
- margin-inline: 8px;
1665
- display: inline-block;
1666
- }
1667
-
1668
- .single_checkout_sec_opt {
1669
- display: flex;
1670
- gap: 8px;
1671
- }
1672
-
1673
- .disabled {
1674
- opacity: 0.4;
1675
- }
1676
- }
1677
- }
1678
- .emp_options_wrapper {
1679
- display: flex;
1680
- align-items: center;
1681
- gap: 8px;
1682
- &::after {
1683
- content: "";
1684
- display: inline-block;
1685
- height: 20px;
1686
- background-color: var(--_gray-200);
1687
- width: 1px;
1688
- margin-inline-start: 18px;
1689
- }
1690
- &::before {
1691
- content: "";
1692
- display: inline-block;
1693
- height: 20px;
1694
- background-color: var(--_gray-200);
1695
- width: 1px;
1696
- margin-inline: 8px;
1697
- }
1698
- .user_icon {
1699
- width: 30px;
1700
- height: 30px;
1701
- display: flex;
1702
- justify-content: center;
1703
- align-items: center;
1704
- cursor: pointer;
1705
- &.active {
1706
- background-color: var(--_gray-50);
1707
- }
1708
- & > span {
1709
- display: flex;
1710
- }
1711
- &:hover {
1712
- background-color: var(--_gray-100);
1713
- }
1714
- }
1715
- .emp_options {
1716
- position: absolute;
1717
- top: 44px;
1718
- width: 300px;
1719
- background-color: var(--_base-white);
1720
- border: 1px solid var(--_gray-200);
1721
- border-radius: 4px;
1722
- z-index: 10;
1723
- box-shadow: 0 0 24px rgba(0, 0, 0, 0.1);
1724
- .emp_options_header {
1725
- padding: 12px;
1726
- font-size: 14px;
1727
- font-weight: 600;
1728
- color: var(--_gray-600);
1729
- border-bottom: 1px solid var(--_gray-200);
1730
- }
1731
- .emp_options_list {
1732
- padding: 12px;
1733
- .emp_options_list_item {
1734
- display: flex;
1735
- justify-content: space-between;
1736
- align-items: center;
1737
- gap: 8px;
1738
- .emp_options_list_item_label {
1739
- display: flex;
1740
- gap: 12px;
1741
- }
1742
-
1743
- // &:hover {
1744
- // background-color: var(--_primary-25);
1745
- // color: var(--_primary-400);
1746
- // }
1747
- }
1748
- p {
1749
- font-size: 12px;
1750
- color: var(--_gray-500);
1751
- padding-block: 4px 16px;
1752
- }
1753
- }
1754
- .emp_options_footer {
1755
- display: flex;
1756
- border-top: 1px solid var(--_gray-200);
1757
-
1758
- & > div {
1759
- flex-basis: 50%;
1760
- display: flex;
1761
- justify-content: center;
1762
- align-items: center;
1763
- padding: 16px;
1764
- cursor: pointer;
1765
- &:first-child {
1766
- border-right: 1px solid var(--_gray-200);
1767
- }
1768
- &:hover {
1769
- background-color: var(--_primary-25);
1770
- svg path {
1771
- stroke: var(--_primary-400);
1772
- }
1773
- }
1774
- }
1775
- }
1776
- }
1777
- }
1778
-
1779
- .em_or_ss_wp {
1780
- position: relative;
1781
- &:hover {
1782
- .em_or_ss_wp_cr {
1783
- display: block;
1784
- }
1785
- .em_or_ss_wp_bn {
1786
- background-color: var(--_gray-50);
1787
- }
1788
- }
1789
- .em_or_ss_wp_bn {
1790
- display: flex;
1791
- justify-content: center;
1792
- align-items: center;
1793
- /* border: 1px solid red; */
1794
- height: 30px;
1795
- width: 40px;
1796
-
1797
- cursor: pointer;
1798
- top: 120%;
1799
- &.disabled {
1800
- opacity: 0.5;
1801
- pointer-events: none;
1802
- }
1803
- }
1804
- .em_or_ss_wp_cr {
1805
- position: absolute;
1806
- z-index: calc(var(--_higher-zIndex) + var(--_emp-bulk-order-settings-zIndex));
1807
- min-width: 200px;
1808
- min-height: 100px;
1809
- border-radius: 4px;
1810
- background-color: var(--_base-white);
1811
- box-shadow: 0px 0px 24px rgb(0, 0, 0, 0.1);
1812
- display: none;
1813
- .em_or_ss_wp_cr_hr {
1814
- color: var(--_gray-600);
1815
- font-weight: 600;
1816
- font-size: 14px;
1817
- padding: 12px;
1818
- border-bottom: 1px solid var(--_gray-200);
1819
- }
1820
- ul {
1821
- list-style: none;
1822
- li {
1823
- padding: 10px 12px;
1824
- font-size: 14px;
1825
- font-weight: normal;
1826
- color: var(--_gray-700);
1827
- display: flex;
1828
- align-items: center;
1829
- gap: 12px;
1830
- cursor: pointer;
1831
- margin: 4px;
1832
- border-radius: 4px;
1833
- & > span svg path {
1834
- stroke: var(--_gray-500);
1835
- }
1836
- & > span {
1837
- display: flex;
1838
- }
1839
- &:hover {
1840
- background-color: var(--_primary-25);
1841
- color: var(--_primary-400);
1842
- }
1843
- }
1844
- }
1845
- }
1846
- }
1847
-
1848
- .emp_btns {
1849
- display: flex;
1850
- align-items: center;
1851
- gap: 12px;
1852
- &::after {
1853
- content: "";
1854
- display: inline-block;
1855
- height: 20px;
1856
- width: 1px;
1857
- background-color: var(--_gray-200);
1858
- }
1859
- &::before {
1860
- content: "";
1861
- display: inline-block;
1862
- height: 20px;
1863
- width: 1px;
1864
- background-color: var(--_gray-200);
1865
- }
1866
- .emp_btn {
1867
- padding: 8px 12px;
1868
- border-radius: 4px;
1869
- text-decoration: none;
1870
-
1871
- &.emp_primary {
1872
- color: var(--_base-white);
1873
- background-color: var(--_primary-500);
1874
- &:hover {
1875
- background-color: var(--_primary-500);
1876
- }
1877
- }
1878
- &.emp_tertiary_secondary {
1879
- color: var(--_gray-600);
1880
- margin-inline: 4px;
1881
- &:hover {
1882
- background-color: var(--_gray-50);
1883
- color: var(--_gray-900);
1884
- }
1885
- }
1886
- }
1887
- }
1888
- .emp_review_cart_btn {
1889
- padding: 8px 16px;
1890
- border: 1px solid var(--_gray-300);
1891
- border-radius: 6px;
1892
- color: var(--_gray-700);
1893
- cursor: pointer;
1894
- &:hover {
1895
- background-color: var(--_gray-50);
1896
- }
1897
- }
1898
- .emp_discard_btn {
1899
- padding-inline: 16px;
1900
- border-radius: 6px;
1901
- color: var(--_gray-700);
1902
- cursor: pointer;
1903
- height: 32px;
1904
- display: flex;
1905
- align-items: center;
1906
- &.disabled {
1907
- pointer-events: none;
1908
- opacity: 0.8;
1909
- }
1910
- &:hover {
1911
- background-color: var(--_gray-50);
1912
- }
1913
- }
1914
- .action_item {
1915
- cursor: pointer;
1916
- }
1917
- .em_order_settings_act {
1918
- width: 40px;
1919
- }
1920
- .em_btn_act {
1921
- padding-inline: 16px;
1922
- height: 32px;
1923
- border-radius: 4px;
1924
- }
1925
-
1926
- .em_review_btn {
1927
- background: #243dc6;
1928
- color: #fff;
1929
- }
1930
-
1931
- .em_btn_act_disabled {
1932
- pointer-events: none;
1933
- opacity: 0.8;
1934
- }
1935
- }
1936
- }
1937
- .actions {
1938
- display: flex;
1939
- align-items: center;
1940
- gap: 12px;
1941
- margin-left: 12px;
1942
- svg {
1943
- width: 16px;
1944
- height: 16px;
1945
- path {
1946
- stroke: var(--_gray-600);
1947
- }
1948
- }
1949
- span {
1950
- width: 32px;
1951
- height: 32px;
1952
- cursor: pointer;
1953
- font-size: 16px;
1954
- color: $text-light;
1955
- transition: color 0.2s;
1956
- display: flex;
1957
- align-items: center;
1958
- justify-content: center;
1959
- &[title="Enter Fullscreen"] {
1960
- svg {
1961
- width: 14px;
1962
- height: 14px;
1963
- path {
1964
- stroke: var(--_gray-500);
1965
- }
1966
- }
1967
- }
1968
-
1969
- &:hover {
1970
- color: var(--_gray-900);
1971
- background-color: var(--_gray-100);
1972
- border-radius: 4px;
1973
- svg path {
1974
- stroke: var(--_gray-900);
1975
- }
1976
- }
1977
- }
1978
- .sc_modal-close svg {
1979
- width: 20px !important;
1980
- height: 20px !important;
1981
- }
1982
- }
1983
- }
1984
-
1985
- .input-group {
1986
- display: flex;
1987
- gap: 12px;
1988
-
1989
- .qty-input {
1990
- padding: $input-padding;
1991
- border: 1px solid $gray-400;
1992
- border-radius: $radius;
1993
- font-size: $font-size-base;
1994
- transition: border 0.2s;
1995
- width: 120px;
1996
-
1997
- &:focus {
1998
- border-color: $primary;
1999
- outline: none;
2000
- }
2001
- }
2002
-
2003
- .or-text {
2004
- align-self: center;
2005
- font-weight: 600;
2006
- color: $gray-800;
2007
- font-size: $font-size-base;
2008
- }
2009
-
2010
- .add-btn {
2011
- background-color: $primary;
2012
- color: $white;
2013
- padding: 10px 16px;
2014
- border-radius: $radius;
2015
- font-weight: 600;
2016
- font-size: $font-size-base;
2017
- cursor: pointer;
2018
- transition: background-color 0.2s;
2019
-
2020
- &:hover {
2021
- background-color: $primary-hover;
2022
- }
2023
- }
2024
- }
2025
- }
2026
-
2027
- .footer-bar {
2028
- position: sticky;
2029
- bottom: 0;
2030
- display: flex;
2031
- align-items: center;
2032
- justify-content: space-between;
2033
- padding: 10px 16px;
2034
- border-top: 1px solid $gray-300;
2035
- font-size: $font-size-base;
2036
- background: $footer_btn_background_color;
2037
-
2038
- .summary {
2039
- display: flex;
2040
- gap: 24px;
2041
- span {
2042
- font-weight: 700;
2043
- line-height: 20px;
2044
- font-size: 14px;
2045
- color: var(--_gray-900);
2046
- .footer_label {
2047
- font-weight: 400;
2048
- color: var(--_gray-500);
2049
- }
2050
- }
2051
- }
2052
-
2053
- .footer-actions {
2054
- display: flex;
2055
- gap: 10px;
2056
-
2057
- .cancel-btn {
2058
- // border-radius: $radius;
2059
- padding: 10px 14px;
2060
- // font-weight: 500;
2061
- // font-size: $font-size-base;
2062
- // color: var(--_gray-900);
2063
- // cursor: pointer;
2064
- // transition: background 0.2s;
2065
-
2066
- // &:hover {
2067
- // background: var(--_gray-100);
2068
- // }
2069
- }
2070
-
2071
- .cart-btn {
2072
- // background: $primary;
2073
- // color: $white;
2074
- // border-radius: $radius;
2075
- padding: 10px 16px;
2076
- // font-weight: 600;
2077
- // font-size: $font-size-base;
2078
- // display: flex;
2079
- // align-items: center;
2080
- // gap: 8px;
2081
- // cursor: pointer;
2082
- // transition: background 0.2s;
2083
- // span {
2084
- // display: flex;
2085
- // }
2086
- // svg path {
2087
- // stroke: var(--_base-white);
2088
- // }
2089
-
2090
- // &:hover {
2091
- // background: $primary-hover;
2092
- // }
2093
- & > span {
2094
- display: flex;
2095
- svg path {
2096
- stroke: var(--_base-white);
2097
- }
2098
- }
2099
- &.disabled {
2100
- opacity: 0.4;
2101
- pointer-events: none;
2102
- }
2103
- }
2104
- }
2105
- }
2106
- }
2107
-
2108
- .modalV2-backdrop {
2109
- position: fixed;
2110
- inset: 0;
2111
- background: rgba(0, 0, 0, 0.4);
2112
- z-index: $z-index-backdrop;
2113
- }
2114
-
2115
- .modalV2-min {
2116
- position: fixed;
2117
- transition:
2118
- all 0.4s ease-in-out,
2119
- transform 0.4s ease-in-out;
2120
- right: 20px;
2121
- bottom: 20px;
2122
- padding: 0; /* Remove padding from the main min container */
2123
- border-radius: $radius;
2124
- box-shadow: $shadow-md;
2125
- z-index: $z-index-minimized;
2126
- display: none;
2127
- flex-direction: row; /* Align items in a row */
2128
- align-items: center;
2129
- gap: 10px; /* Adjust gap between elements */
2130
- font-size: $font-size-base;
2131
- background-color: transparent; /* Make the main container transparent */
2132
-
2133
- .min-toolbar {
2134
- background-color: var(--_base-white);
2135
- display: flex;
2136
- align-items: center; /* Align items vertically in the toolbar */
2137
- padding-inline-start: 16px; /* Add padding to the toolbar */
2138
- border-radius: $radius 0 0 $radius; /* Rounded left corners */
2139
- gap: 16px;
2140
- }
2141
-
2142
- &.active {
2143
- display: flex;
2144
- background-color: var(--_base-white);
2145
- }
2146
-
2147
- .cart-btn {
2148
- background: $primary;
2149
- color: $white;
2150
- border: none; /* Remove border */
2151
- border-radius: 0 $radius $radius 0; /* Rounded right corners */
2152
- padding: 12px 16px;
2153
- font-weight: 600;
2154
- font-size: $font-size-sm;
2155
- display: flex;
2156
- align-items: center;
2157
- gap: 4px;
2158
- cursor: pointer;
2159
- transition: background 0.2s;
2160
- z-index: $z-index-min-cart;
2161
-
2162
- &:hover {
2163
- background: $primary-hover;
2164
- }
2165
- }
2166
-
2167
- .actions {
2168
- display: flex;
2169
- gap: 8px;
2170
-
2171
- span {
2172
- cursor: pointer;
2173
- font-size: 16px;
2174
- color: $text-light;
2175
- transition: color 0.2s;
2176
- width: 32px;
2177
- height: 32px;
2178
- display: flex;
2179
- align-items: center;
2180
- justify-content: center;
2181
- &:hover {
2182
- background-color: var(--_gray-50);
2183
- border-radius: 4px;
2184
- svg path {
2185
- stroke: var(--_gray-900);
2186
- }
2187
- }
2188
- &[title="Maximize"] {
2189
- svg {
2190
- width: 14px;
2191
- height: 14px;
2192
- }
2193
- }
2194
-
2195
- &[title="close"] {
2196
- svg {
2197
- width: 20px;
2198
- height: 20px;
2199
- }
2200
- }
2201
-
2202
- svg {
2203
- width: 20px;
2204
- height: 20px;
2205
- }
2206
-
2207
- &:hover {
2208
- color: $black;
2209
- }
2210
- }
2211
- }
2212
- }
2213
- .action-buttons {
2214
- display: flex;
2215
- gap: 1rem;
2216
- align-items: center;
2217
- justify-content: flex-end;
2218
- flex: 1 1 auto;
2219
- padding: 16px 24px;
2220
- border-top: 1px solid var(--_gray-200);
2221
- gap: 12px;
2222
- button {
2223
- padding: 12px 16px;
2224
- border-radius: 6px;
2225
- }
2226
- .create-btn {
2227
- display: flex;
2228
- justify-content: center;
2229
- align-items: center;
2230
- gap: 8px;
2231
- background-color: var(--_primary-400);
2232
- color: var(--_base-white);
2233
- &.disabled {
2234
- opacity: 0.5;
2235
- pointer-events: none;
2236
- }
2237
- .loader {
2238
- animation: rotate-icon 1s linear infinite;
2239
- display: inline-block;
2240
- transform-origin: center;
2241
-
2242
- svg path {
2243
- stroke: var(--_primary-200);
2244
- }
2245
- }
2246
-
2247
- &:hover {
2248
- background-color: var(--_primary-500);
2249
- }
2250
- }
2251
- .discard-btn {
2252
- &:hover {
2253
- background-color: var(--_gray-50);
2254
- color: var(--_gray-900);
2255
- }
2256
- }
2257
- }
2258
- }
2259
-
2260
- @keyframes rotate-icon {
2261
- 0% {
2262
- transform: rotate(0deg);
2263
- }
2264
- 100% {
2265
- transform: rotate(360deg);
2266
- }
2267
- }
1
+ //modalv1
2
+ // Variables
3
+ $modal_background_color: var(--_base-white);
4
+ $backdrop_color: rgba(0, 0, 0, 0.2);
5
+ $box_shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
6
+ $modal_width: 618px;
7
+ $modal_padding: 24px;
8
+ $border_radius: 10px;
9
+ $header_font_size: 18px;
10
+ $header_font_weight: 600;
11
+ $close_btn_font_size: 24px;
12
+ $close_btn_size: 35px;
13
+ $footer_btn_background_color: #ffffff;
14
+ $footer_btn_padding: 10px 15px;
15
+ $footer_btn_font_size: 14px;
16
+ $primary_100: var(--Primary-100, #ced4f6);
17
+ $primary_500: var(--Primary-500, #162578);
18
+ $gray_900: var(--Gray-900, #101828);
19
+ $gap_between_elements: 24px;
20
+ $padding_horizontal: 24px;
21
+ $box_shadow_active: 0px 1px 2px rgba(16, 24, 40, 0.05);
22
+ $divider_color: #eaecf0;
23
+ $border_color: #d0d5dd;
24
+ $modal_padding_body: 10px $padding_horizontal;
25
+ $btn_margin: 0 5px;
26
+ $divider_height: 1px;
27
+ $inactive_btn_text_color: #fff;
28
+ $active_btn_text_color: #fff;
29
+
30
+ @mixin flexbox($justify: flex-start, $align: center, $gap: 12px) {
31
+ display: flex;
32
+ justify-content: $justify;
33
+ align-items: $align;
34
+ gap: $gap;
35
+ }
36
+
37
+ .modal-main-element {
38
+ .modal-backdrop {
39
+ position: fixed;
40
+ top: 0;
41
+ left: 0;
42
+ width: 100%;
43
+ height: 100%;
44
+ background-color: $backdrop_color;
45
+ z-index: calc(var(--_higher-zIndex) + var(--_cs-et-zIndex) + 9);
46
+ animation: fadeIn 0.4s forwards;
47
+ cursor: auto;
48
+ }
49
+
50
+ .modal-container {
51
+ position: fixed;
52
+ top: 50%;
53
+ left: 50%;
54
+ transform: translate(-50%, -50%);
55
+ background-color: $modal_background_color;
56
+ width: var(--_sf-ml-wh, 450px);
57
+ max-width: min(75%, 850px);
58
+ padding: $modal_padding;
59
+ box-shadow: $box_shadow;
60
+ border-radius: $border_radius;
61
+ display: flex;
62
+ flex-direction: column;
63
+ z-index: calc(var(--_higher-zIndex) + var(--_cs-et-zIndex) + 10);
64
+ cursor: auto;
65
+
66
+ &.media__modal {
67
+ width: 60%;
68
+
69
+ .modal-body {
70
+ overflow: hidden;
71
+ }
72
+
73
+ .modal-footer {
74
+ justify-content: flex-end;
75
+ gap: 12px;
76
+ }
77
+ }
78
+ }
79
+
80
+ .modal-header {
81
+ position: relative;
82
+ display: flex;
83
+ align-items: center;
84
+ justify-content: space-between;
85
+ padding-bottom: 6px;
86
+
87
+ h2 {
88
+ font-size: $header_font_size;
89
+ font-weight: $header_font_weight;
90
+ margin: 0;
91
+ color: $gray_900;
92
+ }
93
+
94
+ p {
95
+ font-size: 14px;
96
+ color: #475467;
97
+ margin-top: 4px;
98
+ }
99
+
100
+ .modal-close-btn {
101
+ width: $close_btn_size;
102
+ height: $close_btn_size;
103
+ font-size: $close_btn_font_size;
104
+ background: none;
105
+ border: none;
106
+ cursor: pointer;
107
+ display: flex;
108
+ align-items: center;
109
+ justify-content: center;
110
+ border-radius: 4px;
111
+ span {
112
+ display: flex;
113
+ svg {
114
+ width: 20px;
115
+ height: 20px;
116
+ }
117
+ }
118
+
119
+ &:hover {
120
+ background-color: var(--_gray-100);
121
+ }
122
+ }
123
+ }
124
+
125
+ .modal-body {
126
+ font-size: 14px;
127
+ color: $gray_900;
128
+ }
129
+
130
+ .modal-footer {
131
+ @include flexbox(flex-end, center, 10px);
132
+ flex-wrap: wrap;
133
+ bottom: 0;
134
+ width: 100%;
135
+ margin-top: 24px;
136
+ }
137
+ .modal-footer-wrapper {
138
+ display: flex;
139
+ width: 100%;
140
+ gap: 12px;
141
+
142
+ .wishlist_button_wrapper {
143
+ position: relative;
144
+ width: 100%;
145
+ .wishlist_btn {
146
+ width: 100%;
147
+ display: flex;
148
+ justify-content: center;
149
+ align-items: center;
150
+ color: var(--_primary-400);
151
+ height: 100%;
152
+ &:hover {
153
+ text-decoration: underline;
154
+ color: var(--_primary-500);
155
+ }
156
+ }
157
+ .wishlist_list_overlay {
158
+ position: absolute;
159
+ z-index: 10;
160
+ top: 44px;
161
+ left: 41px;
162
+ min-height: 80px;
163
+ max-height: 190px;
164
+ width: 250px;
165
+ overflow-y: auto;
166
+ border-radius: 4px;
167
+ background-color: var(--_base-white);
168
+ box-shadow: 0px 0px 4px rgb(0, 0, 0, 0.1);
169
+ border: 1px solid var(--_gray-200);
170
+
171
+ .empty_message {
172
+ height: 200px;
173
+ display: flex;
174
+ justify-content: center;
175
+ align-items: center;
176
+ padding: 24px;
177
+ font-size: 16px;
178
+ font-weight: 500;
179
+ text-align: center;
180
+ .dots {
181
+ display: inline-flex;
182
+ width: 20px; /* fixed space so text doesn’t shift */
183
+ justify-content: space-between;
184
+ align-items: flex-end;
185
+ margin-left: 6px;
186
+ margin-bottom: -9px;
187
+ }
188
+
189
+ .dots span {
190
+ animation: blink 1.5s infinite;
191
+ opacity: 0;
192
+ width: 2px;
193
+ height: 2px;
194
+ border-radius: 50%;
195
+ background-color: var(--_gray-700);
196
+ }
197
+
198
+ .dots span:nth-child(1) {
199
+ animation-delay: 0s;
200
+ }
201
+ .dots span:nth-child(2) {
202
+ animation-delay: 0.3s;
203
+ }
204
+ .dots span:nth-child(3) {
205
+ animation-delay: 0.6s;
206
+ }
207
+
208
+ @keyframes blink {
209
+ 0% {
210
+ opacity: 0;
211
+ }
212
+ 50% {
213
+ opacity: 1;
214
+ }
215
+ 100% {
216
+ opacity: 0;
217
+ }
218
+ }
219
+ }
220
+ .wishlist_overlay_header {
221
+ display: flex;
222
+ justify-content: space-between;
223
+ align-items: center;
224
+ padding: 12px;
225
+ font-size: 14px;
226
+ font-weight: 600;
227
+ }
228
+ .wishlist_list_items {
229
+ display: flex;
230
+ flex-direction: column;
231
+
232
+ .wishlist_item {
233
+ display: flex;
234
+ align-items: center;
235
+ gap: 8px;
236
+ color: var(--_gray-700);
237
+ padding: 12px;
238
+ border-radius: 4px;
239
+ cursor: pointer;
240
+ position: relative;
241
+ margin: 4px;
242
+ &.active {
243
+ color: var(--_primary-400);
244
+ }
245
+
246
+ &:not(:last-child) {
247
+ margin-bottom: 2px;
248
+ }
249
+
250
+ &:hover {
251
+ background-color: var(--_primary-25);
252
+ color: var(--_primary-400);
253
+ }
254
+
255
+ input {
256
+ display: none; // hide default checkbox
257
+ }
258
+
259
+ .custom_checkbox {
260
+ width: 18px;
261
+ height: 18px;
262
+ border: 2px solid var(--_gray-400);
263
+ border-radius: 4px;
264
+ display: inline-flex;
265
+ align-items: center;
266
+ justify-content: center;
267
+ transition: all 0.2s ease-in-out;
268
+ background-color: #fff;
269
+
270
+ &::after {
271
+ content: "";
272
+ width: 8px;
273
+ height: 4px;
274
+ border-left: 2px solid #fff;
275
+ border-bottom: 2px solid #fff;
276
+ transform: rotate(-45deg);
277
+ opacity: 0;
278
+ transition: opacity 0.2s ease-in-out;
279
+ margin-bottom: 4px;
280
+ }
281
+ }
282
+
283
+ input:checked + .custom_checkbox {
284
+ background-color: var(--_primary-400);
285
+ border-color: var(--_primary-400);
286
+
287
+ &::after {
288
+ opacity: 1; // show tick mark
289
+ }
290
+ }
291
+
292
+ .label_text {
293
+ font-size: 14px;
294
+ font-weight: 500;
295
+ }
296
+ }
297
+ }
298
+
299
+ .wishlist_overlay_footer {
300
+ display: flex;
301
+ justify-content: space-between;
302
+ align-items: center;
303
+ padding: 8px;
304
+ font-size: 14px;
305
+ font-weight: 600;
306
+ border-top: 1px solid var(--_gray-200);
307
+ padding: 8px;
308
+
309
+ .btn {
310
+ padding: 8px 12px;
311
+ width: 100%;
312
+ border-radius: 4px;
313
+ text-align: center;
314
+ width: 100%;
315
+ font-weight: 500;
316
+ text-decoration: none !important;
317
+ &.primary {
318
+ background-color: var(--_primary-400);
319
+ color: var(--_base-white);
320
+ font-size: 14px;
321
+ }
322
+ &.secondary {
323
+ color: var(--_gray-700);
324
+ &:hover {
325
+ color: var(--_gray-900);
326
+
327
+ background-color: var(--_gray-100);
328
+ }
329
+ }
330
+ }
331
+ }
332
+
333
+ .no_wishlist,
334
+ .loading_state {
335
+ min-height: 80px;
336
+ display: flex;
337
+ justify-content: center;
338
+ align-items: center;
339
+ font-size: 14px;
340
+ font-weight: 700;
341
+ color: var(--_gray-700);
342
+ }
343
+ }
344
+ }
345
+
346
+ .modal-footer-secondary-btn {
347
+ padding: 12px 24px;
348
+ border-radius: 4px;
349
+ background-color: var(--_base-white);
350
+ color: var(--_primary-400);
351
+ font-weight: 500;
352
+ width: 100%;
353
+ display: flex;
354
+ justify-content: center;
355
+ // &:hover {
356
+ // text-decoration: underline;
357
+ // }
358
+ }
359
+
360
+ .modal-footer-danger-btn {
361
+ padding: 12px 24px;
362
+ border-radius: 4px;
363
+ background-color: #d92d20;
364
+ color: #fff;
365
+ font-weight: 600;
366
+ width: 100%;
367
+ display: flex;
368
+ border: 1px solid #d92d20;
369
+ justify-content: center;
370
+ align-items: center;
371
+
372
+ &:hover {
373
+ // background-color: darken(#d92d20, 5%);
374
+ background-color: color-mix(in srgb, #d92d20 95%, var(--_base-black) 5%);
375
+ }
376
+ }
377
+ }
378
+
379
+ @keyframes fadeIn {
380
+ from {
381
+ opacity: 0;
382
+ }
383
+ to {
384
+ opacity: 1;
385
+ }
386
+ }
387
+ }
388
+
389
+ //modalv2 css
390
+ // Colors
391
+ $white: var(--_white);
392
+ $black: var(--base-black);
393
+ $gray-100: #f9fafb;
394
+ $gray-300: #e5e7eb;
395
+ $gray-400: #ccc;
396
+ $gray-600: #737373;
397
+ $gray-700: #6b7280;
398
+ $gray-800: #444;
399
+ $gray-900: #111827;
400
+
401
+ $primary: var(--_primary-400);
402
+ $primary-hover: var(--_primary-500);
403
+ $text-dark: #222;
404
+ $text-medium: #374151;
405
+ $text-light: #666;
406
+
407
+ // Typography
408
+ $font-base: "Segoe UI";
409
+ $font-size-base: 14px;
410
+ $font-size-sm: 12px;
411
+ $font-size-md: 15px;
412
+ $font-size-lg: 18px;
413
+
414
+ // Spacing & Sizes
415
+ $radius: 6px;
416
+ $radius-lg: 8px;
417
+ $input-height: 32px;
418
+ $input-padding: 10px 12px;
419
+
420
+ // Z-Index
421
+ $z-index-modal: calc(var(--_higher-zIndex) + var(--_cs-et-zIndex) + 10);
422
+ $z-index-backdrop: calc(var(--_higher-zIndex) + var(--_cs-et-zIndex) + 11);
423
+ $z-index-wrapper: calc(var(--_higher-zIndex) + var(--_cs-et-zIndex) + 9);
424
+ $z-index-minimized: calc(var(--_higher-zIndex) + var(--_cs-et-zIndex) + 12);
425
+ $z-index-min-cart: calc(
426
+ var(--_higher-zIndex) + var(--_cs-et-zIndex) + 13
427
+ ); // Higher z-index for min cart
428
+
429
+ // Shadows
430
+ $shadow-md: 0 8px 20px rgba(0, 0, 0, 0.1);
431
+
432
+ .modalV2-main {
433
+ position: fixed;
434
+ z-index: 9999;
435
+ inset: 0;
436
+ background: rgba(0, 0, 0, 0.4);
437
+
438
+ .modalV2-wrapper {
439
+ overflow: hidden !important;
440
+ position: fixed;
441
+ left: 50%;
442
+ transition:
443
+ all 0.4s ease-in-out,
444
+ transform 0.4s ease-in-out;
445
+ background: $white;
446
+ border-radius: $radius-lg;
447
+ // padding: 0px 20px;
448
+ width: 75%;
449
+ max-width: calc(1280px - 10%);
450
+ font-family: $font-base;
451
+ box-shadow: $shadow-md;
452
+ z-index: $z-index-wrapper;
453
+ max-height: 70vh;
454
+ overflow: scroll;
455
+ display: flex;
456
+ flex-direction: column;
457
+ .modal-body {
458
+ height: auto;
459
+ display: flex;
460
+ flex-direction: column;
461
+ width: 100%;
462
+ flex: 1 1 auto;
463
+ overflow-y: auto;
464
+
465
+ // Payment with checkout started
466
+ .retry-order-overlay {
467
+ .retry-order-container {
468
+ max-width: 960px;
469
+ margin: 0 auto;
470
+ .chk_payment-options {
471
+ form {
472
+ display: flex;
473
+ flex-direction: column;
474
+ gap: 24px;
475
+ }
476
+ display: flex;
477
+ flex-direction: column;
478
+ margin-block: 12px;
479
+ .chk_payment_options_form {
480
+ display: flex;
481
+ flex-direction: column;
482
+ overflow: hidden;
483
+ }
484
+ .payment_program {
485
+ // padding: 0 12px;
486
+
487
+ display: flex;
488
+ flex-direction: column;
489
+ gap: 16px;
490
+
491
+ .payment_program_header {
492
+ display: flex;
493
+ justify-content: space-between;
494
+ // gap: 8px;
495
+ align-items: center;
496
+
497
+ // margin-bottom: 16px;
498
+
499
+ &_label {
500
+ display: flex;
501
+ justify-content: space-between;
502
+ align-items: center;
503
+ &_title {
504
+ font-size: 14px;
505
+ font-weight: 600;
506
+ color: var(--_gray-600);
507
+ }
508
+ }
509
+ &_pds {
510
+ font-size: 14px;
511
+ font-weight: 600;
512
+ &_label {
513
+ font-size: 14px;
514
+ color: var(--_gray-600);
515
+ }
516
+ &_value {
517
+ font-size: 14px;
518
+ color: var(--_gray-900);
519
+ }
520
+ }
521
+ .chk_checkbox_wrapper {
522
+ display: flex;
523
+ width: fit-content;
524
+ align-items: center;
525
+ gap: 12px;
526
+
527
+ .discard_btn {
528
+ padding: 12px 16px;
529
+ border-radius: 4px;
530
+ color: var(--_gray-600);
531
+ &:hover {
532
+ background-color: var(--_gray-100);
533
+ }
534
+ }
535
+
536
+ input[type="checkbox"] {
537
+ display: none;
538
+ }
539
+ .payment_program_title {
540
+ font-size: 16px;
541
+ font-weight: 700;
542
+ color: var(--_gray-900);
543
+ }
544
+
545
+ .chk_shipping_address_use_as_billing_address_chkbx {
546
+ display: flex;
547
+ align-items: center;
548
+ cursor: pointer;
549
+ gap: 10px;
550
+
551
+ color: var(--_gray-900);
552
+ font-weight: 500;
553
+ font-size: 14px;
554
+
555
+ .custom-checkbox {
556
+ width: 20px;
557
+ height: 20px;
558
+ border: 1px solid #d0d5dd;
559
+ border-radius: 4px;
560
+ position: relative;
561
+ background-color: #fff;
562
+ transition: all 0.2s ease;
563
+
564
+ &::after {
565
+ content: "";
566
+ position: absolute;
567
+ display: none;
568
+ left: 6px;
569
+ top: 0.5px;
570
+ width: 5px;
571
+ height: 10px;
572
+ border: solid #fff;
573
+ border-width: 0 2px 2px 0;
574
+ transform: rotate(45deg);
575
+ }
576
+ }
577
+ }
578
+
579
+ input[type="checkbox"]:checked + label {
580
+ .custom-checkbox {
581
+ background-color: #004dff;
582
+ border-color: #004dff;
583
+
584
+ &::after {
585
+ display: block;
586
+ }
587
+ }
588
+ }
589
+ }
590
+ }
591
+ }
592
+ .gift_crd_chk_payment_option {
593
+ border: 1px solid var(--_gray-300);
594
+ border-radius: 6px;
595
+ .add_gift_card {
596
+ display: flex;
597
+ gap: 12px;
598
+ padding: 16px;
599
+
600
+ .gc_icon {
601
+ svg {
602
+ width: 18px;
603
+ height: 14px;
604
+ }
605
+ }
606
+
607
+ .gc_info {
608
+ display: flex;
609
+ flex-direction: column;
610
+ gap: 6px;
611
+
612
+ .gc_title {
613
+ font-size: 14px;
614
+ font-weight: 600;
615
+ }
616
+ }
617
+ }
618
+ .payment_heading {
619
+ padding: 16px;
620
+ .chk_payment_options_heading {
621
+ padding: 0;
622
+ font-weight: 600;
623
+ }
624
+ }
625
+ // gift card styles
626
+ .chk_gft_crd_wrapper {
627
+ display: flex;
628
+ justify-content: space-between;
629
+ align-items: center;
630
+ padding: 16px 16px 0 16px;
631
+ &_item {
632
+ display: flex;
633
+ align-items: center;
634
+ gap: 16px;
635
+ &_icon {
636
+ width: 40px;
637
+ height: 40px;
638
+ border: 1px solid var(--_gray-200);
639
+ border-radius: 6px;
640
+ display: flex;
641
+ justify-content: center;
642
+ align-items: center;
643
+ }
644
+ &_info {
645
+ display: flex;
646
+ flex-direction: column;
647
+ &_title {
648
+ font-size: 14px;
649
+ margin-bottom: 4px;
650
+ font-weight: 600;
651
+ }
652
+ &_desc {
653
+ display: flex;
654
+ gap: 4px;
655
+ &_value {
656
+ font-size: 12px;
657
+ color: var(--_gray-600);
658
+ }
659
+ &_label {
660
+ font-size: 12px;
661
+ color: var(--_gray-900);
662
+ }
663
+ }
664
+ }
665
+ &_pin {
666
+ margin-left: 36px;
667
+ input[type="number"] {
668
+ border: 1px solid var(--_gray-300);
669
+ border-radius: 4px;
670
+ background-color: var(--_base-white);
671
+ width: 95px;
672
+ height: 44px;
673
+ padding-inline: 10px;
674
+ &:focus {
675
+ outline: 2px solid var(--_primary-100);
676
+ border: 1px solid var(--_primary-300);
677
+ }
678
+ }
679
+ }
680
+ }
681
+
682
+ &_input {
683
+ border: 1px solid var(--_gray-300);
684
+ border-radius: 4px;
685
+ background-color: var(--_base-white);
686
+ height: 44px;
687
+ width: 120px;
688
+ display: flex;
689
+ align-items: center;
690
+ gap: 8px;
691
+ padding-left: 10px;
692
+ input[type="number"] {
693
+ background-color: var(--_base-white);
694
+ padding-right: 10px;
695
+ }
696
+ &:focus-within {
697
+ outline: 2px solid var(--_primary-100);
698
+ border: 1px solid var(--_primary-300);
699
+ }
700
+ }
701
+ }
702
+ .chk_gft_crd_wrapper {
703
+ &_btn {
704
+ text-align: left;
705
+ margin-bottom: 16px;
706
+ color: var(--_primary-400);
707
+ &:hover {
708
+ text-decoration: underline;
709
+ }
710
+ }
711
+ }
712
+ }
713
+
714
+ .chk_payment_option_wrapper {
715
+ display: flex;
716
+ flex-direction: column;
717
+ overflow: hidden;
718
+ border-radius: 6px;
719
+ border: 1px solid var(--_gray-300);
720
+
721
+ .pp_pmnt_method_groups {
722
+ &:not(:last-child) {
723
+ border-bottom: 1px solid var(--_gray-200);
724
+ padding-bottom: 16px;
725
+ }
726
+ .pp_ppm_section {
727
+ background-color: var(--_base-white);
728
+ border-bottom: 1px solid var(--_gray-300);
729
+ padding: 14px 12px;
730
+
731
+ display: flex;
732
+ justify-content: space-between;
733
+ gap: 8px;
734
+ .pp_ppm_section_label {
735
+ font-size: 14px;
736
+ font-weight: 700;
737
+ color: var(--_gray-900);
738
+ }
739
+ .pp_ppm_section_value {
740
+ font-size: 14px;
741
+ font-weight: 600;
742
+ color: var(--_gray-600);
743
+ .pp_ppm_section_value_label {
744
+ font-weight: 500;
745
+ color: var(--_gray-500);
746
+ }
747
+ .pp_ppm_section_value_amount {
748
+ font-weight: 500;
749
+ color: var(--_gray-500);
750
+ }
751
+ }
752
+ }
753
+ .payment_methods {
754
+ // padding: 12px;
755
+ display: grid;
756
+ gap: 8px;
757
+ .chk_payment_option {
758
+ .add_new_credit_card {
759
+ padding: 16px 16px 0px 16px;
760
+ display: flex;
761
+ justify-content: space-between;
762
+ font-weight: 600;
763
+ .cc_tertiary_btn {
764
+ // color: var(--_primary-400);
765
+ color: var(--_thm-cs-tt-ls-as);
766
+ font-size: 14px;
767
+ &:hover {
768
+ text-decoration: underline;
769
+ }
770
+ }
771
+ }
772
+ .chk_payment_section_wrapper {
773
+ width: 100%;
774
+ display: flex;
775
+ justify-content: space-between;
776
+ padding: 16px;
777
+
778
+ .chk_payment_section {
779
+ display: flex;
780
+ justify-content: space-between;
781
+ align-items: center;
782
+ width: 100%;
783
+ .chk_payment_section_col_left {
784
+ display: flex;
785
+ gap: 12px;
786
+ svg {
787
+ width: 24px;
788
+ height: 24px;
789
+ }
790
+ .chk_payment_section_method {
791
+ display: flex;
792
+ flex-direction: column;
793
+ .chk_payment_section_method_name {
794
+ font-size: 14px;
795
+ font-weight: 700;
796
+ line-height: 20px;
797
+ color: var(--_gray-700);
798
+ }
799
+ & > div {
800
+ display: flex;
801
+ gap: 2px;
802
+ .label {
803
+ font-size: 12px;
804
+ color: var(--_gray-500);
805
+ font-weight: 400;
806
+ }
807
+ .price {
808
+ font-size: 12px;
809
+ color: var(--_gray-900);
810
+ font-weight: 500;
811
+ }
812
+ }
813
+ }
814
+ }
815
+ &_col_right {
816
+ .chk_currency_inp {
817
+ height: 44px;
818
+ border: 1px solid var(--_gray-200);
819
+ border-radius: 4px;
820
+ background-color: var(--_base-white);
821
+ display: flex;
822
+ width: 120px;
823
+ overflow: hidden;
824
+ align-items: center;
825
+ padding-inline: 12px;
826
+ gap: 12px;
827
+ padding: 8px 12px;
828
+ border: 1px solid var(--_gray-300);
829
+ border-radius: 4px;
830
+ &:focus-within {
831
+ border: 1px solid var(--_primary-200);
832
+ outline: 2px solid var(--_primary-50);
833
+ }
834
+ input {
835
+ height: inherit;
836
+ background-color: var(--_base-white);
837
+ &:disabled {
838
+ opacity: 0.8;
839
+ cursor: not-allowed;
840
+ }
841
+ }
842
+ }
843
+ }
844
+ }
845
+
846
+ .chk_payment_options_heading {
847
+ color: var(--_gray-900);
848
+ font-size: 16px;
849
+ font-weight: 700;
850
+ .chk_primary_btn_link {
851
+ }
852
+ }
853
+
854
+ // payment other options styles
855
+ .chk_pmnt_other_options {
856
+ display: flex;
857
+ justify-content: space-between;
858
+ gap: 80px;
859
+ padding: 16px;
860
+ .chk_pmnt_other_options_left_container {
861
+ display: flex;
862
+ gap: 12px;
863
+ .chk_pmnt_option_info_wrapper {
864
+ display: flex;
865
+ gap: 12px;
866
+ .cards {
867
+ display: flex;
868
+ flex-direction: column;
869
+ gap: 8px;
870
+ .chk_payment_options_name {
871
+ font-weight: 600;
872
+ }
873
+ span {
874
+ font-size: 12px;
875
+ .chk_payment_options_label {
876
+ color: var(--_gray-600);
877
+ }
878
+ .chk_payment_options_value {
879
+ color: var(--_gray-900);
880
+ }
881
+ }
882
+ }
883
+ }
884
+ }
885
+ .chk_pmnt_other_options_container {
886
+ padding: 16px;
887
+ }
888
+ }
889
+
890
+ &__other_option_wrapper {
891
+ display: flex;
892
+ width: 100%;
893
+ justify-content: space-between;
894
+ padding: 16px;
895
+
896
+ @media (max-width: 500px) {
897
+ flex-direction: column;
898
+ }
899
+ }
900
+
901
+ &_left_container {
902
+ display: flex;
903
+ gap: 12px;
904
+ align-items: flex-start;
905
+ .chk_payment_option__info_wrapper {
906
+ display: flex;
907
+ gap: 0px;
908
+ }
909
+
910
+ @media (max-width: 500px) {
911
+ flex-wrap: wrap;
912
+ }
913
+ }
914
+
915
+ &__left_wrapper {
916
+ display: flex;
917
+ flex-direction: column;
918
+ align-items: flex-start;
919
+ gap: 16px;
920
+ }
921
+
922
+ &__card_icon {
923
+ width: 60px;
924
+ height: 40px;
925
+ }
926
+
927
+ &__info_wrapper {
928
+ display: flex;
929
+ flex-direction: column;
930
+ }
931
+
932
+ &_right_container {
933
+ display: flex;
934
+ gap: 6px;
935
+ align-items: flex-start;
936
+
937
+ @media (max-width: 500px) {
938
+ justify-content: flex-end;
939
+ }
940
+ }
941
+
942
+ &_input {
943
+ display: flex;
944
+ padding: 9px 12px;
945
+ align-items: center;
946
+ max-width: 96px;
947
+ background-color: var(--_base-white);
948
+ border: 1px solid var(--_gray-300);
949
+ border-radius: 6px;
950
+ color: var(--_gray-700);
951
+
952
+ &:focus-within {
953
+ border: 1px solid var(--_primary-300);
954
+ outline: 2px solid var(--_primary-100);
955
+ }
956
+
957
+ .icon {
958
+ svg {
959
+ path {
960
+ stroke: var(--_primary-400);
961
+ }
962
+ }
963
+ }
964
+
965
+ .input_field {
966
+ background-color: var(--_base-white);
967
+ border: 1px solid var(--_gray-300);
968
+ border-radius: 6px;
969
+ color: var(--_gray-700);
970
+
971
+ &:focus-within {
972
+ border: 1px solid var(--_primary-300);
973
+ outline: 2px solid var(--_primary-100);
974
+ }
975
+ }
976
+ }
977
+ }
978
+ .chk_cred_form_details {
979
+ border-top: 1px solid var(--_gray-100);
980
+ padding: 16px;
981
+ .chk_basic_form_title {
982
+ font-size: 14px;
983
+ margin-bottom: 16px;
984
+ font-weight: 600;
985
+ }
986
+ .chk_form_fields {
987
+ h3 {
988
+ font-size: 14px;
989
+ margin-bottom: 8px;
990
+ }
991
+ display: flex;
992
+ flex-direction: column;
993
+ gap: 24px;
994
+ width: 500px;
995
+ .chk_form_field {
996
+ width: 100%;
997
+ &.expiry_details {
998
+ width: 80px;
999
+ }
1000
+
1001
+ display: flex;
1002
+ flex-direction: column;
1003
+ gap: 6px;
1004
+ width: 100%;
1005
+
1006
+ .chk_form_field_label {
1007
+ // font-size: 14px;
1008
+ // color: var(--_gray-600);
1009
+ padding-bottom: 2px;
1010
+ color: var(--_gray-700);
1011
+ }
1012
+ .chk_form_field_inp {
1013
+ width: -webkit-fill-available;
1014
+ height: 40px;
1015
+ background-color: var(--_base-white);
1016
+ color: var(--_gray-600);
1017
+ border: 1px solid var(--_gray-300);
1018
+ border-radius: 6px;
1019
+ height: 40px;
1020
+ padding: 8px 12px;
1021
+ &::placeholder {
1022
+ color: var(--_gray-600);
1023
+ }
1024
+ input &:focus-within {
1025
+ border: 1px solid var(--_primary-300);
1026
+ outline: 2px solid var(--_primary-100);
1027
+ }
1028
+ }
1029
+ .error_msg {
1030
+ display: block;
1031
+ color: var(--_error-700);
1032
+ font-size: 12px;
1033
+ }
1034
+ }
1035
+
1036
+ .checkbox {
1037
+ width: auto;
1038
+
1039
+ label {
1040
+ display: flex;
1041
+ align-items: center;
1042
+ gap: 8px;
1043
+ cursor: pointer;
1044
+ position: relative;
1045
+ user-select: none;
1046
+
1047
+ input[type="checkbox"] {
1048
+ display: none;
1049
+
1050
+ &:checked + .custom-checkbox::after {
1051
+ opacity: 1;
1052
+ }
1053
+ }
1054
+
1055
+ .custom-checkbox {
1056
+ width: 16px;
1057
+ height: 16px;
1058
+ border: 2px solid var(--_primary-400);
1059
+ border-radius: 4px;
1060
+ position: relative;
1061
+ display: inline-block;
1062
+ box-sizing: border-box;
1063
+
1064
+ &::after {
1065
+ content: "";
1066
+ position: absolute;
1067
+ left: 3px;
1068
+ top: 0px;
1069
+ width: 4px;
1070
+ height: 8px;
1071
+ border: solid var(--_primary-400);
1072
+ border-width: 0 1px 1px 0;
1073
+ transform: rotate(45deg);
1074
+ opacity: 0;
1075
+ transition: opacity 0.2s ease-in-out;
1076
+ }
1077
+ }
1078
+ }
1079
+ }
1080
+ .expiry_details {
1081
+ display: flex;
1082
+ gap: 12px;
1083
+ .cvv_inp {
1084
+ width: 110px;
1085
+ }
1086
+ }
1087
+ }
1088
+ .chk_form_actions {
1089
+ display: flex;
1090
+ gap: 12px;
1091
+ .chk_sav_btn {
1092
+ padding: 12px 16px;
1093
+ background-color: var(--_primary-400);
1094
+ border-radius: 6px;
1095
+ color: var(--_base-white);
1096
+ font-size: 14px;
1097
+ &:hover {
1098
+ background-color: var(--_primary-500);
1099
+ }
1100
+ }
1101
+ .chk_can_btn {
1102
+ padding: 12px 16px;
1103
+ background-color: transparent;
1104
+ border-radius: 6px;
1105
+ color: var(--_gray-600);
1106
+ padding-inline: 10px;
1107
+ font-size: 14px;
1108
+
1109
+ &:hover {
1110
+ background-color: var(--_gray-50);
1111
+ color: var(--_gray-900);
1112
+ }
1113
+ }
1114
+ }
1115
+ }
1116
+ }
1117
+ .add_credit_card {
1118
+ display: flex;
1119
+ gap: 12px;
1120
+ padding: 16px;
1121
+
1122
+ .cc_icon {
1123
+ svg {
1124
+ width: 18px;
1125
+ height: 14px;
1126
+ }
1127
+ }
1128
+
1129
+ .cc_info {
1130
+ display: flex;
1131
+ justify-content: space-between;
1132
+ width: 100%;
1133
+ gap: 6px;
1134
+
1135
+ .cc_title {
1136
+ font-size: 14px;
1137
+ font-weight: 600;
1138
+ }
1139
+ }
1140
+ }
1141
+ .add_new_credit_card {
1142
+ display: flex;
1143
+ justify-content: space-between;
1144
+ align-items: center;
1145
+ padding-inline: 16px;
1146
+ }
1147
+ .cc_tertiary_btn {
1148
+ // color: var(--_primary-400);
1149
+ color: var(--_thm-cs-tt-ls-as);
1150
+
1151
+ &:hover {
1152
+ // color: var(--_primary-500);
1153
+ color: var(--_thm-cs-tt-ls-as);
1154
+ text-decoration: underline;
1155
+ }
1156
+ }
1157
+ }
1158
+ }
1159
+ }
1160
+
1161
+ .payment_heading {
1162
+ display: flex;
1163
+ justify-content: space-between;
1164
+ border-bottom: 1px solid var(--_gray-100);
1165
+ font-weight: 600;
1166
+ gap: 8px;
1167
+ }
1168
+
1169
+ .gc_tertiary_btn {
1170
+ color: var(--_primary-400);
1171
+ font-size: 14px;
1172
+ line-height: auto;
1173
+
1174
+ &:hover {
1175
+ color: var(--_thm-cs-tt-ls-as);
1176
+ text-decoration: underline;
1177
+ }
1178
+ }
1179
+ .chk_payment_options_heading {
1180
+ color: var(--_gray-900);
1181
+ font-size: 16px;
1182
+ font-weight: 700;
1183
+ display: flex;
1184
+ justify-content: space-between;
1185
+ gap: 8px;
1186
+ display: flex;
1187
+ justify-content: space-between;
1188
+ gap: 8px;
1189
+ }
1190
+ }
1191
+ .chk_payment_cred_section {
1192
+ display: flex;
1193
+ justify-content: space-between;
1194
+ align-items: center;
1195
+ padding: 16px 16px 8px 16px;
1196
+
1197
+ .chk_currency_inp {
1198
+ height: 44px;
1199
+ border: 1px solid var(--_gray-200);
1200
+ border-radius: 4px;
1201
+ background-color: var(--_base-white);
1202
+ display: flex;
1203
+ width: 120px;
1204
+ overflow: hidden;
1205
+ align-items: center;
1206
+ padding: 8px 12px;
1207
+ gap: 12px;
1208
+ &:focus-within {
1209
+ border: 1px solid var(--_primary-200);
1210
+ outline: 2px solid var(--_primary-50);
1211
+ }
1212
+ input {
1213
+ height: inherit;
1214
+ background-color: var(--_base-white);
1215
+ &:disabled {
1216
+ opacity: 0.8;
1217
+ cursor: not-allowed;
1218
+ }
1219
+ }
1220
+ }
1221
+ .chk_payment_cred_section_col_left {
1222
+ .chk_payment_cred_section_col_left_crd_details {
1223
+ display: flex;
1224
+ gap: 80px;
1225
+ align-items: center;
1226
+ & > div {
1227
+ display: flex;
1228
+ gap: 12px;
1229
+ .card_icon {
1230
+ width: 60px;
1231
+ height: 40px;
1232
+ border-radius: 4px;
1233
+ }
1234
+ .card_details {
1235
+ .card_details_num {
1236
+ font-weight: 600;
1237
+ color: var(--_gray-900);
1238
+ font-size: 14px;
1239
+ line-height: 20px;
1240
+ }
1241
+ & > div {
1242
+ display: flex;
1243
+ .card_details_label {
1244
+ color: var(--_gray-500);
1245
+ font-size: 12px;
1246
+ font-weight: 400;
1247
+ }
1248
+ .card_details_value {
1249
+ color: var(--_gray-900);
1250
+ font-size: 12px;
1251
+ font-weight: 500;
1252
+ }
1253
+ }
1254
+ }
1255
+ }
1256
+ }
1257
+ }
1258
+ }
1259
+
1260
+ // giftcard form styles
1261
+ .chk_gift_card_details {
1262
+ border-top: 1px solid var(--_gray-300);
1263
+ padding: 16px;
1264
+ .chk_gift_card_form {
1265
+ display: flex;
1266
+ flex-direction: column;
1267
+ gap: 16px;
1268
+ max-width: 480px;
1269
+ .chk_gift_cart_form_title {
1270
+ font-size: 14px;
1271
+ font-weight: 600;
1272
+ }
1273
+
1274
+ .chk_gift_form_fields {
1275
+ display: flex;
1276
+ gap: 12px;
1277
+ width: 100%;
1278
+ .chk_gift_inp_field {
1279
+ display: flex;
1280
+ flex-direction: column;
1281
+ gap: 6px;
1282
+ width: 100%;
1283
+ label {
1284
+ color: var(--_gray-600);
1285
+ }
1286
+ .chk_gift_inp {
1287
+ border: 1px solid var(--_gray-300);
1288
+ border-radius: 6px;
1289
+ height: 40px;
1290
+ padding-inline: 10px;
1291
+ &:placeholder-shown {
1292
+ padding-left: 10px;
1293
+ color: var(--_gray-400);
1294
+ }
1295
+ &:focus {
1296
+ border: 1px solid var(--_primary-300);
1297
+ outline: 2px solid var(--_primary-100);
1298
+ }
1299
+ }
1300
+ &.pin {
1301
+ width: 110px;
1302
+ }
1303
+ .error_msg {
1304
+ display: block;
1305
+ color: var(--_error-700);
1306
+ font-size: 12px;
1307
+ }
1308
+ }
1309
+ .error_msg {
1310
+ color: var(--_error-700);
1311
+ font-size: 14px;
1312
+ }
1313
+ }
1314
+ }
1315
+ }
1316
+ .chk_form_actions {
1317
+ display: flex;
1318
+ gap: 12px;
1319
+ .chk_sav_btn {
1320
+ padding: 12px 16px;
1321
+ background-color: var(--_primary-400);
1322
+ border-radius: 6px;
1323
+ color: var(--_base-white);
1324
+ font-size: 14px;
1325
+ &:hover {
1326
+ background-color: var(--_primary-500);
1327
+ }
1328
+ }
1329
+ .chk_can_btn {
1330
+ padding: 12px 16px;
1331
+ background-color: transparent;
1332
+ border-radius: 6px;
1333
+ color: var(--_gray-600);
1334
+ padding-inline: 10px;
1335
+ font-size: 14px;
1336
+
1337
+ &:hover {
1338
+ background-color: var(--_gray-50);
1339
+ color: var(--_gray-900);
1340
+ }
1341
+ }
1342
+ }
1343
+ }
1344
+ }
1345
+
1346
+ // Payment with checkout end
1347
+
1348
+ .dropdown-with-input-section {
1349
+ // border: 0.5px solid var(--_gray-300);
1350
+ .dropdown-menu {
1351
+ margin-left: -7px !important;
1352
+ }
1353
+ }
1354
+
1355
+ .wishlist-modal {
1356
+ display: flex;
1357
+ flex-direction: column;
1358
+ width: 100%;
1359
+ .wishlist-modal-section {
1360
+ padding: 16px 24px 24px 24px;
1361
+ gap: 16px !important;
1362
+ overflow-x: hidden;
1363
+ display: flex;
1364
+ flex-direction: column;
1365
+ input[type="text"] {
1366
+ height: 40px;
1367
+ border: 1px solid var(--_gray-300);
1368
+ border-radius: 6px;
1369
+ padding-inline: 16px;
1370
+ }
1371
+ }
1372
+ }
1373
+ // .action-buttons {
1374
+ // display: flex;
1375
+ // gap: 1rem;
1376
+ // align-items: center;
1377
+ // justify-content: flex-end;
1378
+ // flex: 1 1 auto;
1379
+ // padding: 16px 24px;
1380
+ // border-top: 1px solid var(--_gray-200);
1381
+ // gap: 12px;
1382
+ // button {
1383
+ // padding: 12px 16px;
1384
+ // border-radius: 6px;
1385
+ // }
1386
+ // .create-btn {
1387
+ // display: flex;
1388
+ // justify-content: center;
1389
+ // align-items: center;
1390
+ // gap: 8px;
1391
+ // background-color: var(--_primary-400);
1392
+ // color: var(--_base-white);
1393
+ // &.disabled {
1394
+ // opacity: 0.5;
1395
+ // pointer-events: none;
1396
+ // }
1397
+ // .loader {
1398
+ // animation: rotate-icon 1s linear infinite;
1399
+ // display: inline-block;
1400
+ // transform-origin: center;
1401
+
1402
+ // svg path {
1403
+ // stroke: var(--_primary-200);
1404
+ // }
1405
+ // }
1406
+
1407
+ // &:hover {
1408
+ // background-color: var(--_primary-500);
1409
+ // }
1410
+ // }
1411
+ // .discard-btn {
1412
+ // &:hover {
1413
+ // background-color: var(--_gray-50);
1414
+ // color: var(--_gray-900);
1415
+ // }
1416
+ // }
1417
+ // }
1418
+
1419
+ // processing loader
1420
+ .pmnt_process_container {
1421
+ display: flex;
1422
+ justify-content: center;
1423
+ align-items: center;
1424
+ height: 100%;
1425
+ width: 100%;
1426
+ background-color: var(--_gray-100);
1427
+ .process_load_wrapper {
1428
+ .process_loader_content {
1429
+ display: flex;
1430
+ flex-direction: column;
1431
+ /* gap: 8px; */
1432
+ justify-content: center;
1433
+ align-items: center;
1434
+ p {
1435
+ margin-top: 8px;
1436
+ }
1437
+ .process_loader_box {
1438
+ .processing_loader {
1439
+ position: relative;
1440
+ width: 64px;
1441
+ height: 64px;
1442
+ margin-bottom: 24px;
1443
+ &::before,
1444
+ &::after {
1445
+ content: "";
1446
+ position: absolute;
1447
+ border-radius: 50%;
1448
+ }
1449
+
1450
+ // Background stroke
1451
+ &::before {
1452
+ width: 100%;
1453
+ height: 100%;
1454
+ border: 6px solid #e0e0e0;
1455
+ }
1456
+
1457
+ // Animated stroke
1458
+ &::after {
1459
+ width: 100%;
1460
+ height: 100%;
1461
+ border: 6px solid transparent;
1462
+ border-top-color: #243dc6;
1463
+ animation: processing_loader_spin 1s linear infinite;
1464
+ }
1465
+ }
1466
+ h3 {
1467
+ margin-block: 10px;
1468
+ }
1469
+ }
1470
+ @keyframes processing_loader_spin {
1471
+ 0% {
1472
+ transform: rotate(0deg);
1473
+ }
1474
+ 100% {
1475
+ transform: rotate(360deg);
1476
+ }
1477
+ }
1478
+ }
1479
+ }
1480
+ }
1481
+ }
1482
+ &.fullscreen {
1483
+ transition:
1484
+ all 0.5s ease-in-out,
1485
+ transform 0.5s ease-in-out;
1486
+ top: 50%;
1487
+ left: 50%;
1488
+ width: 99vw;
1489
+ height: 98vh;
1490
+ border-radius: $radius-lg;
1491
+ transform: translate(-50%, -50%);
1492
+ box-shadow: none;
1493
+ z-index: $z-index-modal;
1494
+ display: flex;
1495
+ flex-direction: column;
1496
+ // max-height: 100vh;
1497
+ // max-width: 1200px;
1498
+ max-height: calc(100vw - 12px);
1499
+ max-width: calc(100vw - 12px);
1500
+
1501
+ .product-list {
1502
+ flex: 1;
1503
+ overflow-y: auto;
1504
+ margin-top: 24px;
1505
+ }
1506
+
1507
+ .footer-bar {
1508
+ border-top: 1px solid $gray-300;
1509
+ margin: 0px;
1510
+ padding: 10px 16px;
1511
+ display: flex;
1512
+ align-items: center;
1513
+ }
1514
+ }
1515
+
1516
+ &.center {
1517
+ top: 50%;
1518
+ transform: translate(-50%, -50%);
1519
+ }
1520
+
1521
+ &.bottom {
1522
+ bottom: 5%;
1523
+ transform: translate(-50%, 0%);
1524
+ height: 100%;
1525
+ }
1526
+
1527
+ .top-bar-emp-bulk-order {
1528
+ position: sticky;
1529
+ top: 0;
1530
+ background: $white;
1531
+ z-index: var(--_higher-zIndex);
1532
+ // padding: 0 16px;
1533
+ border-bottom: 1px solid #d0d5dd;
1534
+ .title-bar {
1535
+ display: flex;
1536
+ justify-content: space-between;
1537
+ align-items: center;
1538
+ // padding: 15px 0px;
1539
+ // height: 60px;
1540
+ padding: 8px 8px 8px 16px;
1541
+
1542
+ .left-col {
1543
+ .title {
1544
+ color: var(--_gray-900);
1545
+ font-size: 16px;
1546
+ font-weight: 600;
1547
+ line-height: 24px;
1548
+ display: flex;
1549
+ gap: 8px;
1550
+ align-items: center;
1551
+ span {
1552
+ display: flex;
1553
+ svg {
1554
+ width: 20px;
1555
+ height: 20px;
1556
+ }
1557
+ }
1558
+
1559
+ .modal_heading_icon {
1560
+ display: flex;
1561
+ align-items: center;
1562
+ justify-content: center;
1563
+
1564
+ svg {
1565
+ width: 20px;
1566
+ height: 20px;
1567
+ }
1568
+ }
1569
+
1570
+ .count {
1571
+ font-weight: 700;
1572
+ color: $gray-600;
1573
+ background-color: #f2f4f7;
1574
+ border-radius: 6px;
1575
+ font-size: $font-size-sm;
1576
+ // width: 25px;
1577
+ height: 25px;
1578
+ padding: 0 8px;
1579
+ display: flex;
1580
+ // align-items: center;
1581
+ justify-content: center;
1582
+ }
1583
+ }
1584
+ }
1585
+ .right_col {
1586
+ display: flex;
1587
+ align-items: center;
1588
+ gap: 12px;
1589
+ .bulk-order-pad-header-body {
1590
+ .checkout_btn {
1591
+ padding: 8px 16px;
1592
+ border-radius: 4px;
1593
+ background-color: var(--_thm-cs-at-py);
1594
+ color: var(--_base-white);
1595
+ }
1596
+ }
1597
+ .employee_bulk_order_header {
1598
+ display: flex;
1599
+ justify-self: end;
1600
+ align-items: center;
1601
+
1602
+ .single_payment_action {
1603
+ display: flex;
1604
+ align-items: center;
1605
+ gap: 6px;
1606
+ }
1607
+ .svg_icon {
1608
+ display: flex;
1609
+ align-items: center;
1610
+ cursor: pointer;
1611
+ }
1612
+
1613
+ .employee_bulk_order_header_item {
1614
+ color: #344054;
1615
+ font-size: 14px;
1616
+ display: flex;
1617
+ justify-content: center;
1618
+ align-items: center;
1619
+ gap: 4px;
1620
+ position: relative;
1621
+ line-height: 20px;
1622
+ &:after {
1623
+ content: "";
1624
+ width: 1px;
1625
+ height: 24px;
1626
+ background: #d0d5dd;
1627
+ position: absolute;
1628
+ right: -12px;
1629
+ }
1630
+
1631
+ .single_checkout_sec_opt {
1632
+ display: flex;
1633
+ gap: 8px;
1634
+ }
1635
+
1636
+ .disabled {
1637
+ opacity: 0.4;
1638
+ }
1639
+ }
1640
+
1641
+ .emp_info {
1642
+ display: flex;
1643
+ padding-right: 16px;
1644
+ .emp_info_item {
1645
+ color: var(--_gray-600);
1646
+ font-size: 14px;
1647
+ display: flex;
1648
+ justify-content: center;
1649
+ align-items: center;
1650
+ position: relative;
1651
+ line-height: 20px;
1652
+ .emp_count {
1653
+ font-size: 16px;
1654
+ color: var(--_gray-900);
1655
+ font-weight: 600;
1656
+ margin-left: 4px;
1657
+ }
1658
+ &:not(:last-child):after {
1659
+ content: "";
1660
+ background: var(--_gray-400);
1661
+ width: 4px;
1662
+ height: 4px;
1663
+ border-radius: 50%;
1664
+ margin-inline: 8px;
1665
+ display: inline-block;
1666
+ }
1667
+
1668
+ .single_checkout_sec_opt {
1669
+ display: flex;
1670
+ gap: 8px;
1671
+ }
1672
+
1673
+ .disabled {
1674
+ opacity: 0.4;
1675
+ }
1676
+ }
1677
+ }
1678
+ .emp_options_wrapper {
1679
+ display: flex;
1680
+ align-items: center;
1681
+ gap: 8px;
1682
+ &::after {
1683
+ content: "";
1684
+ display: inline-block;
1685
+ height: 20px;
1686
+ background-color: var(--_gray-200);
1687
+ width: 1px;
1688
+ margin-inline-start: 18px;
1689
+ }
1690
+ &::before {
1691
+ content: "";
1692
+ display: inline-block;
1693
+ height: 20px;
1694
+ background-color: var(--_gray-200);
1695
+ width: 1px;
1696
+ margin-inline: 8px;
1697
+ }
1698
+ .user_icon {
1699
+ width: 30px;
1700
+ height: 30px;
1701
+ display: flex;
1702
+ justify-content: center;
1703
+ align-items: center;
1704
+ cursor: pointer;
1705
+ &.active {
1706
+ background-color: var(--_gray-50);
1707
+ }
1708
+ & > span {
1709
+ display: flex;
1710
+ }
1711
+ &:hover {
1712
+ background-color: var(--_gray-100);
1713
+ }
1714
+ }
1715
+ .emp_options {
1716
+ position: absolute;
1717
+ top: 44px;
1718
+ width: 300px;
1719
+ background-color: var(--_base-white);
1720
+ border: 1px solid var(--_gray-200);
1721
+ border-radius: 4px;
1722
+ z-index: 10;
1723
+ box-shadow: 0 0 24px rgba(0, 0, 0, 0.1);
1724
+ .emp_options_header {
1725
+ padding: 12px;
1726
+ font-size: 14px;
1727
+ font-weight: 600;
1728
+ color: var(--_gray-600);
1729
+ border-bottom: 1px solid var(--_gray-200);
1730
+ }
1731
+ .emp_options_list {
1732
+ padding: 12px;
1733
+ .emp_options_list_item {
1734
+ display: flex;
1735
+ justify-content: space-between;
1736
+ align-items: center;
1737
+ gap: 8px;
1738
+ .emp_options_list_item_label {
1739
+ display: flex;
1740
+ gap: 12px;
1741
+ }
1742
+
1743
+ // &:hover {
1744
+ // background-color: var(--_primary-25);
1745
+ // color: var(--_primary-400);
1746
+ // }
1747
+ }
1748
+ p {
1749
+ font-size: 12px;
1750
+ color: var(--_gray-500);
1751
+ padding-block: 4px 16px;
1752
+ }
1753
+ }
1754
+ .emp_options_footer {
1755
+ display: flex;
1756
+ border-top: 1px solid var(--_gray-200);
1757
+
1758
+ & > div {
1759
+ flex-basis: 50%;
1760
+ display: flex;
1761
+ justify-content: center;
1762
+ align-items: center;
1763
+ padding: 16px;
1764
+ cursor: pointer;
1765
+ &:first-child {
1766
+ border-right: 1px solid var(--_gray-200);
1767
+ }
1768
+ &:hover {
1769
+ background-color: var(--_primary-25);
1770
+ svg path {
1771
+ stroke: var(--_primary-400);
1772
+ }
1773
+ }
1774
+ }
1775
+ }
1776
+ }
1777
+ }
1778
+
1779
+ .em_or_ss_wp {
1780
+ position: relative;
1781
+ &:hover {
1782
+ .em_or_ss_wp_cr {
1783
+ display: block;
1784
+ }
1785
+ .em_or_ss_wp_bn {
1786
+ background-color: var(--_gray-50);
1787
+ }
1788
+ }
1789
+ .em_or_ss_wp_bn {
1790
+ display: flex;
1791
+ justify-content: center;
1792
+ align-items: center;
1793
+ /* border: 1px solid red; */
1794
+ height: 30px;
1795
+ width: 40px;
1796
+
1797
+ cursor: pointer;
1798
+ top: 120%;
1799
+ &.disabled {
1800
+ opacity: 0.5;
1801
+ pointer-events: none;
1802
+ }
1803
+ }
1804
+ .em_or_ss_wp_cr {
1805
+ position: absolute;
1806
+ z-index: calc(var(--_higher-zIndex) + var(--_emp-bulk-order-settings-zIndex));
1807
+ min-width: 200px;
1808
+ min-height: 100px;
1809
+ border-radius: 4px;
1810
+ background-color: var(--_base-white);
1811
+ box-shadow: 0px 0px 24px rgb(0, 0, 0, 0.1);
1812
+ display: none;
1813
+ .em_or_ss_wp_cr_hr {
1814
+ color: var(--_gray-600);
1815
+ font-weight: 600;
1816
+ font-size: 14px;
1817
+ padding: 12px;
1818
+ border-bottom: 1px solid var(--_gray-200);
1819
+ }
1820
+ ul {
1821
+ list-style: none;
1822
+ li {
1823
+ padding: 10px 12px;
1824
+ font-size: 14px;
1825
+ font-weight: normal;
1826
+ color: var(--_gray-700);
1827
+ display: flex;
1828
+ align-items: center;
1829
+ gap: 12px;
1830
+ cursor: pointer;
1831
+ margin: 4px;
1832
+ border-radius: 4px;
1833
+ & > span svg path {
1834
+ stroke: var(--_gray-500);
1835
+ }
1836
+ & > span {
1837
+ display: flex;
1838
+ }
1839
+ &:hover {
1840
+ background-color: var(--_primary-25);
1841
+ color: var(--_primary-400);
1842
+ }
1843
+ }
1844
+ }
1845
+ }
1846
+ }
1847
+
1848
+ .emp_btns {
1849
+ display: flex;
1850
+ align-items: center;
1851
+ gap: 12px;
1852
+ &::after {
1853
+ content: "";
1854
+ display: inline-block;
1855
+ height: 20px;
1856
+ width: 1px;
1857
+ background-color: var(--_gray-200);
1858
+ }
1859
+ &::before {
1860
+ content: "";
1861
+ display: inline-block;
1862
+ height: 20px;
1863
+ width: 1px;
1864
+ background-color: var(--_gray-200);
1865
+ }
1866
+ .emp_btn {
1867
+ padding: 8px 12px;
1868
+ border-radius: 4px;
1869
+ text-decoration: none;
1870
+
1871
+ &.emp_primary {
1872
+ color: var(--_base-white);
1873
+ background-color: var(--_primary-500);
1874
+ &:hover {
1875
+ background-color: var(--_primary-500);
1876
+ }
1877
+ }
1878
+ &.emp_tertiary_secondary {
1879
+ color: var(--_gray-600);
1880
+ margin-inline: 4px;
1881
+ &:hover {
1882
+ background-color: var(--_gray-50);
1883
+ color: var(--_gray-900);
1884
+ }
1885
+ }
1886
+ }
1887
+ }
1888
+ .emp_review_cart_btn {
1889
+ padding: 8px 16px;
1890
+ border: 1px solid var(--_gray-300);
1891
+ border-radius: 6px;
1892
+ color: var(--_gray-700);
1893
+ cursor: pointer;
1894
+ &:hover {
1895
+ background-color: var(--_gray-50);
1896
+ }
1897
+ }
1898
+ .emp_discard_btn {
1899
+ padding-inline: 16px;
1900
+ border-radius: 6px;
1901
+ color: var(--_gray-700);
1902
+ cursor: pointer;
1903
+ height: 32px;
1904
+ display: flex;
1905
+ align-items: center;
1906
+ &.disabled {
1907
+ pointer-events: none;
1908
+ opacity: 0.8;
1909
+ }
1910
+ &:hover {
1911
+ background-color: var(--_gray-50);
1912
+ }
1913
+ }
1914
+ .action_item {
1915
+ cursor: pointer;
1916
+ }
1917
+ .em_order_settings_act {
1918
+ width: 40px;
1919
+ }
1920
+ .em_btn_act {
1921
+ padding-inline: 16px;
1922
+ height: 32px;
1923
+ border-radius: 4px;
1924
+ }
1925
+
1926
+ .em_review_btn {
1927
+ background: #243dc6;
1928
+ color: #fff;
1929
+ }
1930
+
1931
+ .em_btn_act_disabled {
1932
+ pointer-events: none;
1933
+ opacity: 0.8;
1934
+ }
1935
+ }
1936
+ }
1937
+ .actions {
1938
+ display: flex;
1939
+ align-items: center;
1940
+ gap: 12px;
1941
+ margin-left: 12px;
1942
+ svg {
1943
+ width: 16px;
1944
+ height: 16px;
1945
+ path {
1946
+ stroke: var(--_gray-600);
1947
+ }
1948
+ }
1949
+ span {
1950
+ width: 32px;
1951
+ height: 32px;
1952
+ cursor: pointer;
1953
+ font-size: 16px;
1954
+ color: $text-light;
1955
+ transition: color 0.2s;
1956
+ display: flex;
1957
+ align-items: center;
1958
+ justify-content: center;
1959
+ &[title="Enter Fullscreen"] {
1960
+ svg {
1961
+ width: 14px;
1962
+ height: 14px;
1963
+ path {
1964
+ stroke: var(--_gray-500);
1965
+ }
1966
+ }
1967
+ }
1968
+
1969
+ &:hover {
1970
+ color: var(--_gray-900);
1971
+ background-color: var(--_gray-100);
1972
+ border-radius: 4px;
1973
+ svg path {
1974
+ stroke: var(--_gray-900);
1975
+ }
1976
+ }
1977
+ }
1978
+ .sc_modal-close svg {
1979
+ width: 20px !important;
1980
+ height: 20px !important;
1981
+ }
1982
+ }
1983
+ }
1984
+
1985
+ .input-group {
1986
+ display: flex;
1987
+ gap: 12px;
1988
+
1989
+ .qty-input {
1990
+ padding: $input-padding;
1991
+ border: 1px solid $gray-400;
1992
+ border-radius: $radius;
1993
+ font-size: $font-size-base;
1994
+ transition: border 0.2s;
1995
+ width: 120px;
1996
+
1997
+ &:focus {
1998
+ border-color: $primary;
1999
+ outline: none;
2000
+ }
2001
+ }
2002
+
2003
+ .or-text {
2004
+ align-self: center;
2005
+ font-weight: 600;
2006
+ color: $gray-800;
2007
+ font-size: $font-size-base;
2008
+ }
2009
+
2010
+ .add-btn {
2011
+ background-color: $primary;
2012
+ color: $white;
2013
+ padding: 10px 16px;
2014
+ border-radius: $radius;
2015
+ font-weight: 600;
2016
+ font-size: $font-size-base;
2017
+ cursor: pointer;
2018
+ transition: background-color 0.2s;
2019
+
2020
+ &:hover {
2021
+ background-color: $primary-hover;
2022
+ }
2023
+ }
2024
+ }
2025
+ }
2026
+
2027
+ .footer-bar {
2028
+ position: sticky;
2029
+ bottom: 0;
2030
+ display: flex;
2031
+ align-items: center;
2032
+ justify-content: space-between;
2033
+ padding: 10px 16px;
2034
+ border-top: 1px solid $gray-300;
2035
+ font-size: $font-size-base;
2036
+ background: $footer_btn_background_color;
2037
+
2038
+ .summary {
2039
+ display: flex;
2040
+ gap: 24px;
2041
+ span {
2042
+ font-weight: 700;
2043
+ line-height: 20px;
2044
+ font-size: 14px;
2045
+ color: var(--_gray-900);
2046
+ .footer_label {
2047
+ font-weight: 400;
2048
+ color: var(--_gray-500);
2049
+ }
2050
+ }
2051
+ }
2052
+
2053
+ .footer-actions {
2054
+ display: flex;
2055
+ gap: 10px;
2056
+
2057
+ .cancel-btn {
2058
+ // border-radius: $radius;
2059
+ padding: 10px 14px;
2060
+ // font-weight: 500;
2061
+ // font-size: $font-size-base;
2062
+ // color: var(--_gray-900);
2063
+ // cursor: pointer;
2064
+ // transition: background 0.2s;
2065
+
2066
+ // &:hover {
2067
+ // background: var(--_gray-100);
2068
+ // }
2069
+ }
2070
+
2071
+ .cart-btn {
2072
+ // background: $primary;
2073
+ // color: $white;
2074
+ // border-radius: $radius;
2075
+ padding: 10px 16px;
2076
+ // font-weight: 600;
2077
+ // font-size: $font-size-base;
2078
+ // display: flex;
2079
+ // align-items: center;
2080
+ // gap: 8px;
2081
+ // cursor: pointer;
2082
+ // transition: background 0.2s;
2083
+ // span {
2084
+ // display: flex;
2085
+ // }
2086
+ // svg path {
2087
+ // stroke: var(--_base-white);
2088
+ // }
2089
+
2090
+ // &:hover {
2091
+ // background: $primary-hover;
2092
+ // }
2093
+ & > span {
2094
+ display: flex;
2095
+ svg path {
2096
+ stroke: var(--_base-white);
2097
+ }
2098
+ }
2099
+ &.disabled {
2100
+ opacity: 0.4;
2101
+ pointer-events: none;
2102
+ }
2103
+ }
2104
+ }
2105
+ }
2106
+ }
2107
+
2108
+ .modalV2-backdrop {
2109
+ position: fixed;
2110
+ inset: 0;
2111
+ background: rgba(0, 0, 0, 0.4);
2112
+ z-index: $z-index-backdrop;
2113
+ }
2114
+
2115
+ .modalV2-min {
2116
+ position: fixed;
2117
+ transition:
2118
+ all 0.4s ease-in-out,
2119
+ transform 0.4s ease-in-out;
2120
+ right: 20px;
2121
+ bottom: 20px;
2122
+ padding: 0; /* Remove padding from the main min container */
2123
+ border-radius: $radius;
2124
+ box-shadow: $shadow-md;
2125
+ z-index: $z-index-minimized;
2126
+ display: none;
2127
+ flex-direction: row; /* Align items in a row */
2128
+ align-items: center;
2129
+ gap: 10px; /* Adjust gap between elements */
2130
+ font-size: $font-size-base;
2131
+ background-color: transparent; /* Make the main container transparent */
2132
+
2133
+ .min-toolbar {
2134
+ background-color: var(--_base-white);
2135
+ display: flex;
2136
+ align-items: center; /* Align items vertically in the toolbar */
2137
+ padding-inline-start: 16px; /* Add padding to the toolbar */
2138
+ border-radius: $radius 0 0 $radius; /* Rounded left corners */
2139
+ gap: 16px;
2140
+ }
2141
+
2142
+ &.active {
2143
+ display: flex;
2144
+ background-color: var(--_base-white);
2145
+ }
2146
+
2147
+ .cart-btn {
2148
+ background: $primary;
2149
+ color: $white;
2150
+ border: none; /* Remove border */
2151
+ border-radius: 0 $radius $radius 0; /* Rounded right corners */
2152
+ padding: 12px 16px;
2153
+ font-weight: 600;
2154
+ font-size: $font-size-sm;
2155
+ display: flex;
2156
+ align-items: center;
2157
+ gap: 4px;
2158
+ cursor: pointer;
2159
+ transition: background 0.2s;
2160
+ z-index: $z-index-min-cart;
2161
+
2162
+ &:hover {
2163
+ background: $primary-hover;
2164
+ }
2165
+ }
2166
+
2167
+ .actions {
2168
+ display: flex;
2169
+ gap: 8px;
2170
+
2171
+ span {
2172
+ cursor: pointer;
2173
+ font-size: 16px;
2174
+ color: $text-light;
2175
+ transition: color 0.2s;
2176
+ width: 32px;
2177
+ height: 32px;
2178
+ display: flex;
2179
+ align-items: center;
2180
+ justify-content: center;
2181
+ &:hover {
2182
+ background-color: var(--_gray-50);
2183
+ border-radius: 4px;
2184
+ svg path {
2185
+ stroke: var(--_gray-900);
2186
+ }
2187
+ }
2188
+ &[title="Maximize"] {
2189
+ svg {
2190
+ width: 14px;
2191
+ height: 14px;
2192
+ }
2193
+ }
2194
+
2195
+ &[title="close"] {
2196
+ svg {
2197
+ width: 20px;
2198
+ height: 20px;
2199
+ }
2200
+ }
2201
+
2202
+ svg {
2203
+ width: 20px;
2204
+ height: 20px;
2205
+ }
2206
+
2207
+ &:hover {
2208
+ color: $black;
2209
+ }
2210
+ }
2211
+ }
2212
+ }
2213
+ .action-buttons {
2214
+ display: flex;
2215
+ gap: 1rem;
2216
+ align-items: center;
2217
+ justify-content: flex-end;
2218
+ flex: 1 1 auto;
2219
+ padding: 16px 24px;
2220
+ border-top: 1px solid var(--_gray-200);
2221
+ gap: 12px;
2222
+ button {
2223
+ padding: 12px 16px;
2224
+ border-radius: 6px;
2225
+ }
2226
+ .create-btn {
2227
+ display: flex;
2228
+ justify-content: center;
2229
+ align-items: center;
2230
+ gap: 8px;
2231
+ background-color: var(--_primary-400);
2232
+ color: var(--_base-white);
2233
+ &.disabled {
2234
+ opacity: 0.5;
2235
+ pointer-events: none;
2236
+ }
2237
+ .loader {
2238
+ animation: rotate-icon 1s linear infinite;
2239
+ display: inline-block;
2240
+ transform-origin: center;
2241
+
2242
+ svg path {
2243
+ stroke: var(--_primary-200);
2244
+ }
2245
+ }
2246
+
2247
+ &:hover {
2248
+ background-color: var(--_primary-500);
2249
+ }
2250
+ }
2251
+ .discard-btn {
2252
+ &:hover {
2253
+ background-color: var(--_gray-50);
2254
+ color: var(--_gray-900);
2255
+ }
2256
+ }
2257
+ }
2258
+ }
2259
+
2260
+ @keyframes rotate-icon {
2261
+ 0% {
2262
+ transform: rotate(0deg);
2263
+ }
2264
+ 100% {
2265
+ transform: rotate(360deg);
2266
+ }
2267
+ }