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

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 (151) 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/allocations.scss +1603 -1603
  5. package/dist/amount-estimator.scss +1083 -1083
  6. package/dist/animation-control.scss +23 -23
  7. package/dist/badge.scss +388 -388
  8. package/dist/brand-basic-elements.scss +292 -292
  9. package/dist/brand.scss +93 -93
  10. package/dist/breadcrumbs.scss +802 -802
  11. package/dist/builder.js +1 -1
  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/contact-us.scss +105 -105
  38. package/dist/container.scss +114 -114
  39. package/dist/countdown.scss +751 -751
  40. package/dist/coupon.scss +1254 -1254
  41. package/dist/custom-fonts.scss +100 -100
  42. package/dist/customization-tree.scss +160 -160
  43. package/dist/default-dropdown.scss +240 -240
  44. package/dist/editCartItem.scss +111 -111
  45. package/dist/embed-temp.scss +72 -72
  46. package/dist/embroider-preview-element.scss +94 -94
  47. package/dist/embroider-template-1-v2.scss +937 -937
  48. package/dist/embroider-template-1.scss +482 -482
  49. package/dist/embroidery.scss +213 -213
  50. package/dist/employee-bulk-order.scss +4057 -4057
  51. package/dist/emtpy-templates.scss +165 -165
  52. package/dist/faq.scss +564 -564
  53. package/dist/fb-dropdown.scss +125 -125
  54. package/dist/filter-results.scss +323 -323
  55. package/dist/flex-text-editor.scss +271 -271
  56. package/dist/form-preview.scss +290 -290
  57. package/dist/form-zindex-module.scss +24 -24
  58. package/dist/gallery-slider-temp.scss +1234 -1234
  59. package/dist/global-styles.scss +86 -86
  60. package/dist/grid.scss +119 -119
  61. package/dist/hotspot.scss +397 -397
  62. package/dist/icon-library.scss +74 -74
  63. package/dist/image-for-product.scss +21 -21
  64. package/dist/image-temp.scss +168 -168
  65. package/dist/item-stock.scss +87 -87
  66. package/dist/layouter-item.scss +89 -89
  67. package/dist/layouter-pro-item.scss +80 -80
  68. package/dist/layouter-pro.scss +88 -88
  69. package/dist/light-box-v2.scss +105 -105
  70. package/dist/lightbox.scss +78 -78
  71. package/dist/line.scss +166 -166
  72. package/dist/loader.scss +37 -37
  73. package/dist/map.scss +962 -962
  74. package/dist/marchandiserSets.scss +60 -60
  75. package/dist/mega-menu-container.scss +99 -99
  76. package/dist/mega-menu.scss +838 -838
  77. package/dist/menu-item.scss +19 -19
  78. package/dist/menu.scss +162 -162
  79. package/dist/modal.scss +2267 -2267
  80. package/dist/multi-select-dropdown.scss +282 -282
  81. package/dist/my-wishlist.scss +17 -17
  82. package/dist/option-bar.scss +845 -845
  83. package/dist/order-processing.scss +61 -61
  84. package/dist/overflow-module.scss +63 -63
  85. package/dist/past-orders.scss +975 -975
  86. package/dist/payment-methods.scss +289 -289
  87. package/dist/pickup-locations.scss +1167 -1167
  88. package/dist/position-module.scss +95 -95
  89. package/dist/prefix-list.scss +86 -86
  90. package/dist/product-actions copy.scss +2765 -2765
  91. package/dist/product-actions.scss +2286 -2286
  92. package/dist/product-basic-elements.scss +770 -770
  93. package/dist/product-customizations.scss +149 -149
  94. package/dist/product-highlights copy.scss +217 -217
  95. package/dist/product-highlights.scss +311 -311
  96. package/dist/product-image copy.scss +787 -787
  97. package/dist/product-image.scss +12 -0
  98. package/dist/product-inventory.scss +1378 -1378
  99. package/dist/product-options.scss +1144 -1144
  100. package/dist/product-price.scss +2598 -2598
  101. package/dist/product-promotions.scss +2759 -2759
  102. package/dist/product.scss +97 -97
  103. package/dist/productDetails.scss +70 -70
  104. package/dist/quick-links.scss +552 -552
  105. package/dist/quick-order-pad.scss +237 -237
  106. package/dist/quota-details.scss +263 -263
  107. package/dist/quotes.scss +737 -737
  108. package/dist/repeater copy.scss +635 -635
  109. package/dist/repeater-grid-toggle.scss +58 -58
  110. package/dist/repeater-item.scss +90 -90
  111. package/dist/request-for-quotes.scss +746 -746
  112. package/dist/responsive-behaviour.scss +29 -29
  113. package/dist/rfqs.scss +736 -736
  114. package/dist/scroll.scss +222 -222
  115. package/dist/search-results-heading.scss +279 -279
  116. package/dist/shareCartSideBar.scss +254 -254
  117. package/dist/shipping-estimator.scss +41 -41
  118. package/dist/shipping-payments.scss +2467 -2467
  119. package/dist/simple-list.scss +259 -259
  120. package/dist/skeleton.scss +74 -74
  121. package/dist/social.scss +276 -276
  122. package/dist/sort.scss +89 -89
  123. package/dist/spotlight.scss +1663 -1663
  124. package/dist/stack.scss +129 -129
  125. package/dist/static-text.scss +52 -52
  126. package/dist/stockStatus.scss +64 -64
  127. package/dist/store-locations.scss +1398 -1398
  128. package/dist/sub-category.scss +74 -74
  129. package/dist/submit-quote.scss +275 -275
  130. package/dist/tab-container-item.scss +80 -80
  131. package/dist/tab-container.scss +89 -89
  132. package/dist/tab-v2.scss +583 -583
  133. package/dist/table-common.scss +506 -506
  134. package/dist/table.scss +685 -685
  135. package/dist/tabs.scss +395 -395
  136. package/dist/text-temp-v2.scss +139 -139
  137. package/dist/text-temp.scss +109 -109
  138. package/dist/toaster.scss +350 -350
  139. package/dist/toggle-button.scss +32 -32
  140. package/dist/transform-properties-module.scss +20 -20
  141. package/dist/types/builder/tools/element-edit/layouter.d.ts +2 -0
  142. package/dist/uom-selector.scss +1169 -1169
  143. package/dist/user-elements copy.scss +1437 -1437
  144. package/dist/variant-picker.scss +2384 -2384
  145. package/dist/video.scss +476 -476
  146. package/dist/volume-pricing copy 2.scss +1468 -1468
  147. package/dist/volume-pricing copy.scss +1077 -1077
  148. package/dist/volume-pricing.scss +1175 -1175
  149. package/dist/widget.scss +148 -148
  150. package/dist/wishlist-overlay.scss +48 -48
  151. package/package.json +1 -1
@@ -1,746 +1,746 @@
1
- @use "sass:map";
2
- @use "sass:list";
3
-
4
- [data-div-type="element"] {
5
- &[data-element-type="requestForQuote"] {
6
- margin: 0;
7
- // width: var(--_lt-wh);
8
- // height: var(--_lt-ht);
9
- // margin: var(--_lt-mn);
10
- // padding: var(--_lt-pg);
11
- // width: var(--_ctm-lt-wh, var(--_tst-lt-wh));
12
- // width: 50%;
13
- // width: var(--_sf-nw-wh, var(--_tst-lt-wh));
14
- // width: var(
15
- // --_sf-el-wh-st-mx,
16
- // calc(
17
- // 1% * var(--_ctm-mob-ele-nw-wh-vl, var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl)))
18
- // )
19
- // );
20
- // margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
21
-
22
- // height: clamp(var(--_ctm-lt-ht, 50px), 100px, auto) !important;
23
- // height: var(--_ctm-lt-ht);
24
- // height: ;
25
- // height: auto;
26
- // aspect-ratio: 1 / var(--_sf-aspect-ratio);
27
- // --_aspect-ratio: calc(
28
- // 1 * (var(--_ctm-lt-ht, var(--_tst-lt-ht)) / var(--_ctm-lt-wh, var(--_tst-lt-wh)))
29
- // );
30
-
31
- // &[data-element-sub-child="true"] {
32
- // // width: max(var(--_sf-nw-wh, var(--_tst-lt-wh)));
33
- // width: var(--_sf-el-wh-st-mx, calc(1% * var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh))));
34
- // }
35
-
36
- .quotes_wrapper {
37
- display: flex;
38
- flex-direction: column;
39
- gap: 24px;
40
-
41
- .quotes_header {
42
- width: 100%;
43
- display: flex;
44
-
45
- justify-content: space-between;
46
- align-items: center;
47
- h2 {
48
- font-size: 24px;
49
- color: var(--_gray-900);
50
- }
51
- .back_to_cart {
52
- color: var(--_primary-400);
53
- &:hover {
54
- text-decoration: underline;
55
- }
56
- }
57
- }
58
- .quotes_body {
59
- display: flex;
60
- // align-items: center;
61
- gap: 64px;
62
- justify-content: space-between;
63
- }
64
-
65
- .quote-items {
66
- flex: 2;
67
- .quote-item {
68
- // padding: 32px 0;
69
- display: flex;
70
- gap: 24px;
71
- &:not(:last-child) {
72
- border-bottom: 1px dotted var(--_gray-400);
73
- }
74
- &:not(:last-child) {
75
- padding-bottom: 16px;
76
- }
77
- &:not(:first-child) {
78
- padding-top: 16px;
79
- }
80
-
81
- .quote-item__image {
82
- width: 120px;
83
- height: 120px;
84
- object-fit: cover;
85
- border-radius: 4px;
86
- background-color: #f0f0f0;
87
- }
88
-
89
- .quote-item__details {
90
- flex: 1;
91
- display: flex;
92
- flex-direction: column;
93
-
94
- .quote-item__header {
95
- margin-bottom: 16px;
96
- padding-bottom: 16px;
97
- display: flex;
98
- border-bottom: 1px dotted #d0d0d0;
99
- flex-direction: column;
100
- gap: 8px;
101
-
102
- .quote-item__title {
103
- font-size: 16px;
104
- font-weight: 600;
105
- // color: #111;
106
- }
107
-
108
- .quote-item__meta {
109
- display: flex;
110
- gap: 8px;
111
- font-size: 14px;
112
- font-weight: 400;
113
- // color: var(--_gray-500);
114
- span {
115
- &:first-child {
116
- padding-right: 8px;
117
- border-right: 1px solid var(--_gray-900);
118
- }
119
- }
120
- }
121
- }
122
-
123
- .quote-item__row {
124
- display: flex;
125
- gap: 16px;
126
- align-items: flex-start;
127
-
128
- .field {
129
- display: flex;
130
- flex-direction: column;
131
- font-size: 14px;
132
- &.price_column {
133
- padding-right: 40px;
134
- }
135
-
136
- label {
137
- margin-bottom: 6px;
138
- font-weight: 500;
139
- font-size: 14px;
140
- // color: #333;
141
- }
142
-
143
- .value {
144
- // font-weight: 600;
145
- // font-size: 16px;
146
- // // color: #111;
147
- font-weight: 600;
148
- font-size: 16px;
149
- height: 39px;
150
- display: flex;
151
- align-items: center;
152
- }
153
-
154
- input {
155
- height: 40px;
156
- padding: 8px 12px;
157
- font-size: 14px;
158
- border: 1px solid #ccc;
159
- border-radius: 4px;
160
- outline: none;
161
- width: 130px;
162
-
163
- &:focus {
164
- border-color: #2563eb;
165
- box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.3);
166
- }
167
- }
168
-
169
- .input-with-prefix {
170
- display: flex;
171
- align-items: center;
172
- border: 1px solid #ccc;
173
- border-radius: 4px;
174
- overflow: hidden;
175
- width: 130px;
176
- height: 40px;
177
- &:focus-within {
178
- border: 1px solid var(--_primary-300);
179
- outline: 2px solid var(--_primary-100);
180
- }
181
-
182
- span {
183
- padding: 0 8px;
184
- font-size: 15px;
185
- color: var(--_gray-500);
186
- display: flex;
187
- align-items: center;
188
- }
189
-
190
- input {
191
- border: none;
192
- width: 100%;
193
- height: 100%;
194
- padding-left: 6px;
195
- &:focus {
196
- box-shadow: none;
197
- outline: none;
198
- }
199
- }
200
- }
201
- }
202
-
203
- .quote-item__totals {
204
- display: flex;
205
- flex-direction: column;
206
- gap: 16px;
207
- text-align: right;
208
- margin-left: auto;
209
- min-width: 180px;
210
-
211
- .quote-total {
212
- display: flex;
213
- flex-direction: column;
214
- gap: 6px;
215
-
216
- > div {
217
- display: flex;
218
- justify-content: flex-end;
219
- align-items: baseline;
220
- gap: 4px;
221
-
222
- .label {
223
- font-size: 14px;
224
- // color: #444;
225
- }
226
-
227
- .amount {
228
- font-size: 18px;
229
- font-weight: 700;
230
- // color: #111;
231
- }
232
- }
233
-
234
- small {
235
- font-size: 13px;
236
- // color: #888;
237
- margin-top: 4px;
238
- text-align: right;
239
- display: flex;
240
- justify-content: end;
241
- }
242
-
243
- &.discounted {
244
- .label {
245
- color: #039855;
246
- }
247
-
248
- .amount {
249
- color: #039855;
250
- }
251
- }
252
- }
253
- }
254
- }
255
- }
256
- }
257
- }
258
-
259
- .quote-summary {
260
- background: var(--_base-white);
261
- border: 1px solid var(--_gray-300);
262
- border-radius: 4px;
263
- width: 400px;
264
- overflow: hidden;
265
- height: fit-content;
266
- position: sticky;
267
- top: 10px;
268
-
269
- &__row {
270
- display: flex;
271
- justify-content: space-between;
272
- align-items: center;
273
- padding: 12px 0;
274
- border-bottom: 1px dotted #ccc;
275
-
276
- .label {
277
- font-size: 14px;
278
- font-weight: 400;
279
- // color: #666;
280
- }
281
-
282
- .value {
283
- font-size: 14px;
284
- font-weight: 500;
285
- // color: #333;
286
-
287
- &.highlight {
288
- font-size: 14px;
289
- font-weight: 500;
290
- // color: #000;
291
- }
292
- }
293
-
294
- &--quoted {
295
- margin-bottom: 20px;
296
- }
297
- .label-quote {
298
- font-size: 14px;
299
- font-weight: 400;
300
- // font-weight: 600;
301
- }
302
- }
303
-
304
- &__notes {
305
- width: 100%;
306
- height: 100px;
307
- padding: 12px;
308
- border: 1px solid #ddd;
309
- border-radius: 4px;
310
- resize: none;
311
- font-size: 14px;
312
- font-family: inherit;
313
- margin-bottom: 20px;
314
- box-sizing: border-box;
315
- margin-top: 6px;
316
-
317
- &::placeholder {
318
- color: #999;
319
- }
320
-
321
- &:focus {
322
- outline: none;
323
- border-color: var(--_primary-500);
324
- }
325
- }
326
-
327
- &__button {
328
- width: 100%;
329
- padding: 12px;
330
- // background-color: var(--_primary-400);
331
- // color: var(--_base-white);
332
- font-size: 16px;
333
- font-weight: 600;
334
- border: none;
335
- border-radius: 4px;
336
- cursor: pointer;
337
- transition: background-color 0.2s ease;
338
-
339
- &:hover {
340
- // background-color: var(--_primary-500);
341
- }
342
- }
343
- & > h3 {
344
- font-size: 16px;
345
- font-weight: 700;
346
- // color: var(--_gray-900);
347
- background-color: #f5f5f5;
348
- padding: 12px;
349
- border-bottom: 1px solid var(--_gray-300);
350
- }
351
- .quote-summary-body {
352
- padding: 0px 16px 16px 16px;
353
- }
354
- }
355
- }
356
-
357
- .quotes_address_section {
358
- .address_card {
359
- background: var(--_base-white);
360
- border: 1px solid var(--_gray-300);
361
- border-radius: 4px;
362
- width: 400px;
363
- overflow: hidden;
364
- height: fit-content;
365
- top: 10px;
366
- margin-bottom: 24px;
367
-
368
- & > h3 {
369
- font-size: 16px;
370
- font-weight: 700;
371
- background-color: #f5f5f5;
372
- padding: 12px;
373
- border-bottom: 1px solid var(--_gray-300);
374
- }
375
-
376
- &_body {
377
- padding: 16px;
378
- // max-height: calc(100vh - 420px);
379
- // overflow: auto;
380
- }
381
-
382
- &_row {
383
- display: flex;
384
- justify-content: space-between;
385
- align-items: center;
386
- margin-bottom: 8px;
387
- }
388
-
389
- &_text {
390
- font-size: 16px;
391
- font-weight: 700;
392
- width: 273px;
393
- height: 22px;
394
- white-space: nowrap;
395
- overflow: hidden;
396
- text-overflow: ellipsis;
397
- display: inline-block;
398
- margin-top: 4px;
399
- }
400
-
401
- &_select {
402
- display: flex;
403
- align-items: center;
404
- gap: 8px;
405
- font-size: 14px;
406
- // color: var(--_primary-400);
407
- color: var(--_thm-cs-tt-ls-as);
408
- text-decoration: none;
409
- font-weight: 400;
410
- background: none;
411
- border: none;
412
- cursor: pointer;
413
- span {
414
- display: flex;
415
- }
416
-
417
- &:hover {
418
- text-decoration: underline;
419
- }
420
- }
421
- // &_divider {
422
- // border: none;
423
- // border-top: 1px dashed var(--_gray-300);
424
- // margin: 16px 0;
425
- // }
426
-
427
- &_footer {
428
- display: flex;
429
- justify-content: space-between;
430
- align-items: flex-start;
431
- gap: 16px;
432
- }
433
-
434
- &_shipping,
435
- &_quoted {
436
- display: flex;
437
- flex-direction: column;
438
- justify-content: center;
439
- }
440
-
441
- &_label {
442
- font-size: 14px;
443
- // color: var(--_gray-700);
444
- font-weight: 500;
445
- margin-bottom: 6px;
446
- }
447
-
448
- &_value {
449
- font-size: 20px;
450
- font-weight: 700;
451
- // color: var(--_gray-900);
452
- height: 40px;
453
- display: flex;
454
- align-items: center;
455
- }
456
-
457
- &_input_box {
458
- display: flex;
459
- // align-items: center;
460
- border: 1px solid var(--_gray-300);
461
- border-radius: 6px;
462
- padding: 8px 12px;
463
- width: 128px;
464
- height: 40px;
465
- }
466
-
467
- &_currency {
468
- margin-right: 6px;
469
- font-weight: 600;
470
- color: var(--_gray-700);
471
- display: flex;
472
- }
473
-
474
- &_input {
475
- border: none;
476
- outline: none;
477
- font-size: 16px;
478
- font-weight: 400;
479
- color: var(--_gray-900);
480
- width: 100%;
481
- background: transparent;
482
- }
483
-
484
- // --- Extra styles for address list ---
485
- &_list_item {
486
- display: flex;
487
- flex-direction: column;
488
- // align-items: flex-start;
489
- gap: 6px;
490
- padding-bottom: 16px;
491
- &:first-child {
492
- padding-top: 0px;
493
- }
494
- &:not(:last-child) {
495
- border-bottom: 1px dashed var(--_gray-300);
496
- margin-bottom: 16px;
497
- }
498
-
499
- .address_card_row {
500
- width: 100%;
501
- margin-bottom: 0px;
502
- }
503
- }
504
- .contact_details {
505
- gap: 6px;
506
- display: flex;
507
- flex-direction: column;
508
- padding-bottom: 24px;
509
- margin-top: 12px;
510
- .contact_title {
511
- display: flex;
512
- gap: 12px;
513
- font-weight: 600;
514
- font-size: 14px;
515
- cursor: pointer;
516
- .toggle_dropdown {
517
- display: inline-block;
518
- transition: transform 0.3s ease;
519
- svg {
520
- width: 18px;
521
- height: 18px;
522
- }
523
- &.open {
524
- transform: rotate(180deg);
525
- }
526
- }
527
- }
528
- .secondary_val {
529
- font-weight: 500;
530
- }
531
- }
532
-
533
- &_address {
534
- font-size: 14px;
535
- // color: var(--_gray-500);
536
- font-weight: 400;
537
- line-height: 20px;
538
- padding-bottom: 12x;
539
- }
540
- &_details {
541
- display: flex;
542
- align-items: center;
543
- gap: 10px;
544
- // color: var(--_gray-900);
545
- font-size: 14px;
546
- cursor: pointer;
547
- .toggle_arrow {
548
- display: flex;
549
- transition: transform 0.3s ease;
550
- &.open {
551
- transform: rotate(180deg);
552
- }
553
- }
554
- &.no_caret {
555
- caret-color: transparent; /* hides the blinking cursor */
556
- pointer-events: none; /* prevents clicking/focus */
557
- }
558
- }
559
-
560
- &_contact_container {
561
- display: flex;
562
- align-items: center;
563
- gap: 10px;
564
- cursor: pointer;
565
- }
566
- &_contact {
567
- font-size: 14px;
568
- font-weight: 600;
569
- color: var(--_gray-900);
570
- }
571
- &_shipping_details {
572
- padding-bottom: 16px;
573
- margin-bottom: 16px;
574
- border-bottom: 1px dashed var(--_gray-300);
575
- // padding: 16px;
576
- // margin-top: 10px;
577
-
578
- .no_shipping_methods {
579
- background: var(--_gray-100);
580
- border-radius: 4px;
581
- padding: 16px;
582
- text-align: center;
583
- min-height: 100px;
584
- display: flex;
585
- align-items: center;
586
- justify-content: center;
587
- span {
588
- font-size: 16px;
589
- font-weight: 600;
590
- color: var(--_gray-700);
591
- }
592
- }
593
- }
594
-
595
- &_shipping_heading {
596
- font-size: 14px;
597
- font-weight: 600;
598
- // color: var(--_gray-900);
599
- background: #f5f5f5;
600
- padding: 6px;
601
- border-radius: 4px;
602
- margin-bottom: 12px;
603
- padding-left: 12px;
604
- }
605
-
606
- &_shipping_group {
607
- margin-bottom: 16px;
608
- gap: 6px;
609
- display: flex;
610
- flex-direction: column;
611
- }
612
-
613
- &_shipping_subheading {
614
- font-size: 14px;
615
- font-weight: 700;
616
- // color: var(--_gray-900);
617
- // margin-bottom: 2px;
618
- }
619
-
620
- &_shipping_option {
621
- display: flex;
622
- align-items: center;
623
- // justify-content: space-between;
624
- // padding: 10px 8px;
625
- border-radius: 6px;
626
- cursor: pointer;
627
- font-size: 14px;
628
- // color: var(--_gray-700);
629
- // margin-bottom: 8px;
630
- transition: background 0.2s ease;
631
-
632
- input[type="radio"] {
633
- accent-color: var(--_primary-400);
634
- margin-right: 12px;
635
- width: fit-content;
636
- }
637
-
638
- &:hover {
639
- // background: var(--_gray-100);
640
- }
641
- }
642
-
643
- &_shipping_label {
644
- // flex: 1;
645
- // margin-left: 6px;
646
- font-weight: 400;
647
- font-size: 14px;
648
- // color: var(--_gray-500);
649
- }
650
-
651
- &_shipping_price {
652
- font-weight: 600;
653
- // color: var(--_gray-900);
654
- font-size: 14px;
655
- }
656
- &_shipping_selected_method {
657
- display: flex;
658
- justify-content: space-between;
659
- gap: 48px;
660
- }
661
- &_shipping_title {
662
- font-size: 14px;
663
- font-weight: 600;
664
- }
665
-
666
- &_shipping_confirm {
667
- padding: 12px;
668
- }
669
- &_shipping_method {
670
- display: flex;
671
- flex-direction: column;
672
- gap: 8px;
673
- }
674
- .confirm_button {
675
- padding: 12px 24px;
676
- border-radius: 4px;
677
- font-weight: 600;
678
- background-color: var(--_thm-py-bs-dt-se-bd-cr);
679
- color: var(--_thm-py-bs-dt-se-tt-cr);
680
- margin-block: 4px 4px;
681
- &:hover {
682
- background-color: var(--_thm-py-bs-hr-se-bd-cr);
683
- color: var(--_thm-py-bs-hr-se-tt-cr);
684
- }
685
- }
686
- }
687
- .cpn__checkmark__icon {
688
- display: flex;
689
- svg path {
690
- // stroke: var(--_thm-cs-tt-ls-as);
691
- }
692
- }
693
- }
694
-
695
- width: 100%;
696
-
697
- & > .wrapper {
698
- // width: 100%;
699
- // height: 100%;
700
- }
701
- &[data-show-shadow="false"] {
702
- --_show-shadow: none;
703
- }
704
-
705
- // .accordion-element {
706
- // background-color: var(
707
- // --_ctm-mob-dn-fq-wt-bd-cr,
708
- // var(--_ctm-tab-dn-fq-wt-bd-cr, var(--_ctm-dn-fq-wt-bd-cr))
709
- // );
710
- // padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
711
- // display: flex;
712
- // flex-direction: column;
713
- // --_sf-gp: var(
714
- // --_ctm-mob-lt-im-sg,
715
- // var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg, var(--_ctm-lt-im-sg), 16px))
716
- // );
717
- // --_sf-cd-gp: calc(var(--_sf-gp) * 0.5);
718
- // row-gap: var(--_sf-gp);
719
- // width: 100%;
720
- // // height: 100%;
721
- // border-color: var(
722
- // --_ctm-mob-dn-fq-wt-br-cr,
723
- // var(--_ctm-tab-dn-fq-wt-br-cr, var(--_ctm-dn-fq-wt-br-cr))
724
- // );
725
- // border-style: var(
726
- // --_ctm-mob-dn-fq-wt-br-se,
727
- // var(--_ctm-tab-dn-fq-wt-br-se, var(--_ctm-dn-fq-wt-br-se))
728
- // );
729
- // border-width: var(
730
- // --_ctm-mob-dn-fq-wt-br-wh,
731
- // var(--_ctm-tab-dn-fq-wt-br-wh, var(--_ctm-dn-fq-wt-br-wh))
732
- // );
733
- // border-radius: var(
734
- // --_ctm-mob-dn-fq-wt-br-rs,
735
- // var(--_ctm-tab-dn-fq-wt-br-rs, var(--_ctm-dn-fq-wt-br-rs))
736
- // );
737
- // box-shadow: var(
738
- // --_show-shadow,
739
- // var(--_ctm-mob-dn-fq-wt-sw-ae, var(--_ctm-tab-dn-fq-wt-sw-ae, var(--_ctm-dn-fq-wt-sw-ae)))
740
- // var(--_ctm-mob-dn-fq-wt-sw-br, var(--_ctm-tab-dn-fq-wt-sw-br, var(--_ctm-dn-fq-wt-sw-br)))
741
- // var(--_ctm-mob-dn-fq-wt-sw-sd, var(--_ctm-tab-dn-fq-wt-sw-sd, var(--_ctm-dn-fq-wt-sw-sd)))
742
- // var(--_ctm-mob-dn-fq-wt-sw-cr, var(--_ctm-tab-dn-fq-wt-sw-cr, var(--_ctm-dn-fq-wt-sw-cr)))
743
- // );
744
- // }
745
- }
746
- }
1
+ @use "sass:map";
2
+ @use "sass:list";
3
+
4
+ [data-div-type="element"] {
5
+ &[data-element-type="requestForQuote"] {
6
+ margin: 0;
7
+ // width: var(--_lt-wh);
8
+ // height: var(--_lt-ht);
9
+ // margin: var(--_lt-mn);
10
+ // padding: var(--_lt-pg);
11
+ // width: var(--_ctm-lt-wh, var(--_tst-lt-wh));
12
+ // width: 50%;
13
+ // width: var(--_sf-nw-wh, var(--_tst-lt-wh));
14
+ // width: var(
15
+ // --_sf-el-wh-st-mx,
16
+ // calc(
17
+ // 1% * var(--_ctm-mob-ele-nw-wh-vl, var(--_ctm-tab-ele-nw-wh-vl, var(--_ctm-ele-nw-wh-vl)))
18
+ // )
19
+ // );
20
+ // margin: var(--_ctm-mob-lt-mn, var(--_ctm-tab-lt-mn, var(--_ctm-lt-mn)));
21
+
22
+ // height: clamp(var(--_ctm-lt-ht, 50px), 100px, auto) !important;
23
+ // height: var(--_ctm-lt-ht);
24
+ // height: ;
25
+ // height: auto;
26
+ // aspect-ratio: 1 / var(--_sf-aspect-ratio);
27
+ // --_aspect-ratio: calc(
28
+ // 1 * (var(--_ctm-lt-ht, var(--_tst-lt-ht)) / var(--_ctm-lt-wh, var(--_tst-lt-wh)))
29
+ // );
30
+
31
+ // &[data-element-sub-child="true"] {
32
+ // // width: max(var(--_sf-nw-wh, var(--_tst-lt-wh)));
33
+ // width: var(--_sf-el-wh-st-mx, calc(1% * var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh))));
34
+ // }
35
+
36
+ .quotes_wrapper {
37
+ display: flex;
38
+ flex-direction: column;
39
+ gap: 24px;
40
+
41
+ .quotes_header {
42
+ width: 100%;
43
+ display: flex;
44
+
45
+ justify-content: space-between;
46
+ align-items: center;
47
+ h2 {
48
+ font-size: 24px;
49
+ color: var(--_gray-900);
50
+ }
51
+ .back_to_cart {
52
+ color: var(--_primary-400);
53
+ &:hover {
54
+ text-decoration: underline;
55
+ }
56
+ }
57
+ }
58
+ .quotes_body {
59
+ display: flex;
60
+ // align-items: center;
61
+ gap: 64px;
62
+ justify-content: space-between;
63
+ }
64
+
65
+ .quote-items {
66
+ flex: 2;
67
+ .quote-item {
68
+ // padding: 32px 0;
69
+ display: flex;
70
+ gap: 24px;
71
+ &:not(:last-child) {
72
+ border-bottom: 1px dotted var(--_gray-400);
73
+ }
74
+ &:not(:last-child) {
75
+ padding-bottom: 16px;
76
+ }
77
+ &:not(:first-child) {
78
+ padding-top: 16px;
79
+ }
80
+
81
+ .quote-item__image {
82
+ width: 120px;
83
+ height: 120px;
84
+ object-fit: cover;
85
+ border-radius: 4px;
86
+ background-color: #f0f0f0;
87
+ }
88
+
89
+ .quote-item__details {
90
+ flex: 1;
91
+ display: flex;
92
+ flex-direction: column;
93
+
94
+ .quote-item__header {
95
+ margin-bottom: 16px;
96
+ padding-bottom: 16px;
97
+ display: flex;
98
+ border-bottom: 1px dotted #d0d0d0;
99
+ flex-direction: column;
100
+ gap: 8px;
101
+
102
+ .quote-item__title {
103
+ font-size: 16px;
104
+ font-weight: 600;
105
+ // color: #111;
106
+ }
107
+
108
+ .quote-item__meta {
109
+ display: flex;
110
+ gap: 8px;
111
+ font-size: 14px;
112
+ font-weight: 400;
113
+ // color: var(--_gray-500);
114
+ span {
115
+ &:first-child {
116
+ padding-right: 8px;
117
+ border-right: 1px solid var(--_gray-900);
118
+ }
119
+ }
120
+ }
121
+ }
122
+
123
+ .quote-item__row {
124
+ display: flex;
125
+ gap: 16px;
126
+ align-items: flex-start;
127
+
128
+ .field {
129
+ display: flex;
130
+ flex-direction: column;
131
+ font-size: 14px;
132
+ &.price_column {
133
+ padding-right: 40px;
134
+ }
135
+
136
+ label {
137
+ margin-bottom: 6px;
138
+ font-weight: 500;
139
+ font-size: 14px;
140
+ // color: #333;
141
+ }
142
+
143
+ .value {
144
+ // font-weight: 600;
145
+ // font-size: 16px;
146
+ // // color: #111;
147
+ font-weight: 600;
148
+ font-size: 16px;
149
+ height: 39px;
150
+ display: flex;
151
+ align-items: center;
152
+ }
153
+
154
+ input {
155
+ height: 40px;
156
+ padding: 8px 12px;
157
+ font-size: 14px;
158
+ border: 1px solid #ccc;
159
+ border-radius: 4px;
160
+ outline: none;
161
+ width: 130px;
162
+
163
+ &:focus {
164
+ border-color: #2563eb;
165
+ box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.3);
166
+ }
167
+ }
168
+
169
+ .input-with-prefix {
170
+ display: flex;
171
+ align-items: center;
172
+ border: 1px solid #ccc;
173
+ border-radius: 4px;
174
+ overflow: hidden;
175
+ width: 130px;
176
+ height: 40px;
177
+ &:focus-within {
178
+ border: 1px solid var(--_primary-300);
179
+ outline: 2px solid var(--_primary-100);
180
+ }
181
+
182
+ span {
183
+ padding: 0 8px;
184
+ font-size: 15px;
185
+ color: var(--_gray-500);
186
+ display: flex;
187
+ align-items: center;
188
+ }
189
+
190
+ input {
191
+ border: none;
192
+ width: 100%;
193
+ height: 100%;
194
+ padding-left: 6px;
195
+ &:focus {
196
+ box-shadow: none;
197
+ outline: none;
198
+ }
199
+ }
200
+ }
201
+ }
202
+
203
+ .quote-item__totals {
204
+ display: flex;
205
+ flex-direction: column;
206
+ gap: 16px;
207
+ text-align: right;
208
+ margin-left: auto;
209
+ min-width: 180px;
210
+
211
+ .quote-total {
212
+ display: flex;
213
+ flex-direction: column;
214
+ gap: 6px;
215
+
216
+ > div {
217
+ display: flex;
218
+ justify-content: flex-end;
219
+ align-items: baseline;
220
+ gap: 4px;
221
+
222
+ .label {
223
+ font-size: 14px;
224
+ // color: #444;
225
+ }
226
+
227
+ .amount {
228
+ font-size: 18px;
229
+ font-weight: 700;
230
+ // color: #111;
231
+ }
232
+ }
233
+
234
+ small {
235
+ font-size: 13px;
236
+ // color: #888;
237
+ margin-top: 4px;
238
+ text-align: right;
239
+ display: flex;
240
+ justify-content: end;
241
+ }
242
+
243
+ &.discounted {
244
+ .label {
245
+ color: #039855;
246
+ }
247
+
248
+ .amount {
249
+ color: #039855;
250
+ }
251
+ }
252
+ }
253
+ }
254
+ }
255
+ }
256
+ }
257
+ }
258
+
259
+ .quote-summary {
260
+ background: var(--_base-white);
261
+ border: 1px solid var(--_gray-300);
262
+ border-radius: 4px;
263
+ width: 400px;
264
+ overflow: hidden;
265
+ height: fit-content;
266
+ position: sticky;
267
+ top: 10px;
268
+
269
+ &__row {
270
+ display: flex;
271
+ justify-content: space-between;
272
+ align-items: center;
273
+ padding: 12px 0;
274
+ border-bottom: 1px dotted #ccc;
275
+
276
+ .label {
277
+ font-size: 14px;
278
+ font-weight: 400;
279
+ // color: #666;
280
+ }
281
+
282
+ .value {
283
+ font-size: 14px;
284
+ font-weight: 500;
285
+ // color: #333;
286
+
287
+ &.highlight {
288
+ font-size: 14px;
289
+ font-weight: 500;
290
+ // color: #000;
291
+ }
292
+ }
293
+
294
+ &--quoted {
295
+ margin-bottom: 20px;
296
+ }
297
+ .label-quote {
298
+ font-size: 14px;
299
+ font-weight: 400;
300
+ // font-weight: 600;
301
+ }
302
+ }
303
+
304
+ &__notes {
305
+ width: 100%;
306
+ height: 100px;
307
+ padding: 12px;
308
+ border: 1px solid #ddd;
309
+ border-radius: 4px;
310
+ resize: none;
311
+ font-size: 14px;
312
+ font-family: inherit;
313
+ margin-bottom: 20px;
314
+ box-sizing: border-box;
315
+ margin-top: 6px;
316
+
317
+ &::placeholder {
318
+ color: #999;
319
+ }
320
+
321
+ &:focus {
322
+ outline: none;
323
+ border-color: var(--_primary-500);
324
+ }
325
+ }
326
+
327
+ &__button {
328
+ width: 100%;
329
+ padding: 12px;
330
+ // background-color: var(--_primary-400);
331
+ // color: var(--_base-white);
332
+ font-size: 16px;
333
+ font-weight: 600;
334
+ border: none;
335
+ border-radius: 4px;
336
+ cursor: pointer;
337
+ transition: background-color 0.2s ease;
338
+
339
+ &:hover {
340
+ // background-color: var(--_primary-500);
341
+ }
342
+ }
343
+ & > h3 {
344
+ font-size: 16px;
345
+ font-weight: 700;
346
+ // color: var(--_gray-900);
347
+ background-color: #f5f5f5;
348
+ padding: 12px;
349
+ border-bottom: 1px solid var(--_gray-300);
350
+ }
351
+ .quote-summary-body {
352
+ padding: 0px 16px 16px 16px;
353
+ }
354
+ }
355
+ }
356
+
357
+ .quotes_address_section {
358
+ .address_card {
359
+ background: var(--_base-white);
360
+ border: 1px solid var(--_gray-300);
361
+ border-radius: 4px;
362
+ width: 400px;
363
+ overflow: hidden;
364
+ height: fit-content;
365
+ top: 10px;
366
+ margin-bottom: 24px;
367
+
368
+ & > h3 {
369
+ font-size: 16px;
370
+ font-weight: 700;
371
+ background-color: #f5f5f5;
372
+ padding: 12px;
373
+ border-bottom: 1px solid var(--_gray-300);
374
+ }
375
+
376
+ &_body {
377
+ padding: 16px;
378
+ // max-height: calc(100vh - 420px);
379
+ // overflow: auto;
380
+ }
381
+
382
+ &_row {
383
+ display: flex;
384
+ justify-content: space-between;
385
+ align-items: center;
386
+ margin-bottom: 8px;
387
+ }
388
+
389
+ &_text {
390
+ font-size: 16px;
391
+ font-weight: 700;
392
+ width: 273px;
393
+ height: 22px;
394
+ white-space: nowrap;
395
+ overflow: hidden;
396
+ text-overflow: ellipsis;
397
+ display: inline-block;
398
+ margin-top: 4px;
399
+ }
400
+
401
+ &_select {
402
+ display: flex;
403
+ align-items: center;
404
+ gap: 8px;
405
+ font-size: 14px;
406
+ // color: var(--_primary-400);
407
+ color: var(--_thm-cs-tt-ls-as);
408
+ text-decoration: none;
409
+ font-weight: 400;
410
+ background: none;
411
+ border: none;
412
+ cursor: pointer;
413
+ span {
414
+ display: flex;
415
+ }
416
+
417
+ &:hover {
418
+ text-decoration: underline;
419
+ }
420
+ }
421
+ // &_divider {
422
+ // border: none;
423
+ // border-top: 1px dashed var(--_gray-300);
424
+ // margin: 16px 0;
425
+ // }
426
+
427
+ &_footer {
428
+ display: flex;
429
+ justify-content: space-between;
430
+ align-items: flex-start;
431
+ gap: 16px;
432
+ }
433
+
434
+ &_shipping,
435
+ &_quoted {
436
+ display: flex;
437
+ flex-direction: column;
438
+ justify-content: center;
439
+ }
440
+
441
+ &_label {
442
+ font-size: 14px;
443
+ // color: var(--_gray-700);
444
+ font-weight: 500;
445
+ margin-bottom: 6px;
446
+ }
447
+
448
+ &_value {
449
+ font-size: 20px;
450
+ font-weight: 700;
451
+ // color: var(--_gray-900);
452
+ height: 40px;
453
+ display: flex;
454
+ align-items: center;
455
+ }
456
+
457
+ &_input_box {
458
+ display: flex;
459
+ // align-items: center;
460
+ border: 1px solid var(--_gray-300);
461
+ border-radius: 6px;
462
+ padding: 8px 12px;
463
+ width: 128px;
464
+ height: 40px;
465
+ }
466
+
467
+ &_currency {
468
+ margin-right: 6px;
469
+ font-weight: 600;
470
+ color: var(--_gray-700);
471
+ display: flex;
472
+ }
473
+
474
+ &_input {
475
+ border: none;
476
+ outline: none;
477
+ font-size: 16px;
478
+ font-weight: 400;
479
+ color: var(--_gray-900);
480
+ width: 100%;
481
+ background: transparent;
482
+ }
483
+
484
+ // --- Extra styles for address list ---
485
+ &_list_item {
486
+ display: flex;
487
+ flex-direction: column;
488
+ // align-items: flex-start;
489
+ gap: 6px;
490
+ padding-bottom: 16px;
491
+ &:first-child {
492
+ padding-top: 0px;
493
+ }
494
+ &:not(:last-child) {
495
+ border-bottom: 1px dashed var(--_gray-300);
496
+ margin-bottom: 16px;
497
+ }
498
+
499
+ .address_card_row {
500
+ width: 100%;
501
+ margin-bottom: 0px;
502
+ }
503
+ }
504
+ .contact_details {
505
+ gap: 6px;
506
+ display: flex;
507
+ flex-direction: column;
508
+ padding-bottom: 24px;
509
+ margin-top: 12px;
510
+ .contact_title {
511
+ display: flex;
512
+ gap: 12px;
513
+ font-weight: 600;
514
+ font-size: 14px;
515
+ cursor: pointer;
516
+ .toggle_dropdown {
517
+ display: inline-block;
518
+ transition: transform 0.3s ease;
519
+ svg {
520
+ width: 18px;
521
+ height: 18px;
522
+ }
523
+ &.open {
524
+ transform: rotate(180deg);
525
+ }
526
+ }
527
+ }
528
+ .secondary_val {
529
+ font-weight: 500;
530
+ }
531
+ }
532
+
533
+ &_address {
534
+ font-size: 14px;
535
+ // color: var(--_gray-500);
536
+ font-weight: 400;
537
+ line-height: 20px;
538
+ padding-bottom: 12x;
539
+ }
540
+ &_details {
541
+ display: flex;
542
+ align-items: center;
543
+ gap: 10px;
544
+ // color: var(--_gray-900);
545
+ font-size: 14px;
546
+ cursor: pointer;
547
+ .toggle_arrow {
548
+ display: flex;
549
+ transition: transform 0.3s ease;
550
+ &.open {
551
+ transform: rotate(180deg);
552
+ }
553
+ }
554
+ &.no_caret {
555
+ caret-color: transparent; /* hides the blinking cursor */
556
+ pointer-events: none; /* prevents clicking/focus */
557
+ }
558
+ }
559
+
560
+ &_contact_container {
561
+ display: flex;
562
+ align-items: center;
563
+ gap: 10px;
564
+ cursor: pointer;
565
+ }
566
+ &_contact {
567
+ font-size: 14px;
568
+ font-weight: 600;
569
+ color: var(--_gray-900);
570
+ }
571
+ &_shipping_details {
572
+ padding-bottom: 16px;
573
+ margin-bottom: 16px;
574
+ border-bottom: 1px dashed var(--_gray-300);
575
+ // padding: 16px;
576
+ // margin-top: 10px;
577
+
578
+ .no_shipping_methods {
579
+ background: var(--_gray-100);
580
+ border-radius: 4px;
581
+ padding: 16px;
582
+ text-align: center;
583
+ min-height: 100px;
584
+ display: flex;
585
+ align-items: center;
586
+ justify-content: center;
587
+ span {
588
+ font-size: 16px;
589
+ font-weight: 600;
590
+ color: var(--_gray-700);
591
+ }
592
+ }
593
+ }
594
+
595
+ &_shipping_heading {
596
+ font-size: 14px;
597
+ font-weight: 600;
598
+ // color: var(--_gray-900);
599
+ background: #f5f5f5;
600
+ padding: 6px;
601
+ border-radius: 4px;
602
+ margin-bottom: 12px;
603
+ padding-left: 12px;
604
+ }
605
+
606
+ &_shipping_group {
607
+ margin-bottom: 16px;
608
+ gap: 6px;
609
+ display: flex;
610
+ flex-direction: column;
611
+ }
612
+
613
+ &_shipping_subheading {
614
+ font-size: 14px;
615
+ font-weight: 700;
616
+ // color: var(--_gray-900);
617
+ // margin-bottom: 2px;
618
+ }
619
+
620
+ &_shipping_option {
621
+ display: flex;
622
+ align-items: center;
623
+ // justify-content: space-between;
624
+ // padding: 10px 8px;
625
+ border-radius: 6px;
626
+ cursor: pointer;
627
+ font-size: 14px;
628
+ // color: var(--_gray-700);
629
+ // margin-bottom: 8px;
630
+ transition: background 0.2s ease;
631
+
632
+ input[type="radio"] {
633
+ accent-color: var(--_primary-400);
634
+ margin-right: 12px;
635
+ width: fit-content;
636
+ }
637
+
638
+ &:hover {
639
+ // background: var(--_gray-100);
640
+ }
641
+ }
642
+
643
+ &_shipping_label {
644
+ // flex: 1;
645
+ // margin-left: 6px;
646
+ font-weight: 400;
647
+ font-size: 14px;
648
+ // color: var(--_gray-500);
649
+ }
650
+
651
+ &_shipping_price {
652
+ font-weight: 600;
653
+ // color: var(--_gray-900);
654
+ font-size: 14px;
655
+ }
656
+ &_shipping_selected_method {
657
+ display: flex;
658
+ justify-content: space-between;
659
+ gap: 48px;
660
+ }
661
+ &_shipping_title {
662
+ font-size: 14px;
663
+ font-weight: 600;
664
+ }
665
+
666
+ &_shipping_confirm {
667
+ padding: 12px;
668
+ }
669
+ &_shipping_method {
670
+ display: flex;
671
+ flex-direction: column;
672
+ gap: 8px;
673
+ }
674
+ .confirm_button {
675
+ padding: 12px 24px;
676
+ border-radius: 4px;
677
+ font-weight: 600;
678
+ background-color: var(--_thm-py-bs-dt-se-bd-cr);
679
+ color: var(--_thm-py-bs-dt-se-tt-cr);
680
+ margin-block: 4px 4px;
681
+ &:hover {
682
+ background-color: var(--_thm-py-bs-hr-se-bd-cr);
683
+ color: var(--_thm-py-bs-hr-se-tt-cr);
684
+ }
685
+ }
686
+ }
687
+ .cpn__checkmark__icon {
688
+ display: flex;
689
+ svg path {
690
+ // stroke: var(--_thm-cs-tt-ls-as);
691
+ }
692
+ }
693
+ }
694
+
695
+ width: 100%;
696
+
697
+ & > .wrapper {
698
+ // width: 100%;
699
+ // height: 100%;
700
+ }
701
+ &[data-show-shadow="false"] {
702
+ --_show-shadow: none;
703
+ }
704
+
705
+ // .accordion-element {
706
+ // background-color: var(
707
+ // --_ctm-mob-dn-fq-wt-bd-cr,
708
+ // var(--_ctm-tab-dn-fq-wt-bd-cr, var(--_ctm-dn-fq-wt-bd-cr))
709
+ // );
710
+ // padding: var(--_ctm-mob-lt-pg, var(--_ctm-tab-lt-pg, var(--_ctm-lt-pg)));
711
+ // display: flex;
712
+ // flex-direction: column;
713
+ // --_sf-gp: var(
714
+ // --_ctm-mob-lt-im-sg,
715
+ // var(--_ctm-tab-lt-im-sg, var(--_ctm-lt-im-sg, var(--_ctm-lt-im-sg), 16px))
716
+ // );
717
+ // --_sf-cd-gp: calc(var(--_sf-gp) * 0.5);
718
+ // row-gap: var(--_sf-gp);
719
+ // width: 100%;
720
+ // // height: 100%;
721
+ // border-color: var(
722
+ // --_ctm-mob-dn-fq-wt-br-cr,
723
+ // var(--_ctm-tab-dn-fq-wt-br-cr, var(--_ctm-dn-fq-wt-br-cr))
724
+ // );
725
+ // border-style: var(
726
+ // --_ctm-mob-dn-fq-wt-br-se,
727
+ // var(--_ctm-tab-dn-fq-wt-br-se, var(--_ctm-dn-fq-wt-br-se))
728
+ // );
729
+ // border-width: var(
730
+ // --_ctm-mob-dn-fq-wt-br-wh,
731
+ // var(--_ctm-tab-dn-fq-wt-br-wh, var(--_ctm-dn-fq-wt-br-wh))
732
+ // );
733
+ // border-radius: var(
734
+ // --_ctm-mob-dn-fq-wt-br-rs,
735
+ // var(--_ctm-tab-dn-fq-wt-br-rs, var(--_ctm-dn-fq-wt-br-rs))
736
+ // );
737
+ // box-shadow: var(
738
+ // --_show-shadow,
739
+ // var(--_ctm-mob-dn-fq-wt-sw-ae, var(--_ctm-tab-dn-fq-wt-sw-ae, var(--_ctm-dn-fq-wt-sw-ae)))
740
+ // var(--_ctm-mob-dn-fq-wt-sw-br, var(--_ctm-tab-dn-fq-wt-sw-br, var(--_ctm-dn-fq-wt-sw-br)))
741
+ // var(--_ctm-mob-dn-fq-wt-sw-sd, var(--_ctm-tab-dn-fq-wt-sw-sd, var(--_ctm-dn-fq-wt-sw-sd)))
742
+ // var(--_ctm-mob-dn-fq-wt-sw-cr, var(--_ctm-tab-dn-fq-wt-sw-cr, var(--_ctm-dn-fq-wt-sw-cr)))
743
+ // );
744
+ // }
745
+ }
746
+ }