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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (42) hide show
  1. package/dist/add-products-tab.scss +388 -0
  2. package/dist/badge.scss +84 -82
  3. package/dist/builder.js +1 -1
  4. package/dist/bulk-order-pad.scss +29 -34
  5. package/dist/buyForHeaders.scss +120 -2
  6. package/dist/buyForPopup.scss +41 -7
  7. package/dist/cart-details.scss +62 -65
  8. package/dist/cart-products-sidebar.scss +113 -83
  9. package/dist/cartAttributes.scss +277 -183
  10. package/dist/cartDropdownOverlay.scss +55 -27
  11. package/dist/checkout.scss +1017 -640
  12. package/dist/customization-tree.scss +42 -10
  13. package/dist/dropdownTemplate.scss +35 -25
  14. package/dist/employee-bulk-order.scss +219 -47
  15. package/dist/empty-states.scss +66 -66
  16. package/dist/functions.js +1 -1
  17. package/dist/functions.scss +7 -5
  18. package/dist/icons.js +1 -1
  19. package/dist/index.js +1 -1
  20. package/dist/item-stock.scss +27 -28
  21. package/dist/menu-v2.scss +2 -2
  22. package/dist/modal.scss +128 -75
  23. package/dist/past-orders.scss +272 -258
  24. package/dist/payment-methods.scss +70 -71
  25. package/dist/prefix-list.scss +1 -0
  26. package/dist/product-actions.scss +68 -68
  27. package/dist/product-sizechart.scss +13 -13
  28. package/dist/quick-links.scss +47 -48
  29. package/dist/quick-order-pad.scss +51 -51
  30. package/dist/quotes.scss +118 -116
  31. package/dist/review-cart.scss +196 -0
  32. package/dist/rfqs.scss +118 -116
  33. package/dist/types/builder/elements/add-products-tab/index.d.ts +46 -0
  34. package/dist/types/builder/enums/index.d.ts +2 -0
  35. package/dist/types/builder/index.d.ts +2 -1
  36. package/dist/types/builder/tools/element-edit/addProductsTab.d.ts +542 -0
  37. package/dist/types/builder/tools/element-edit/cartSummary.d.ts +1747 -38
  38. package/dist/types/builder/tools/element-edit/checkout.d.ts +793 -254
  39. package/dist/types/builder/tools/element-edit/index.d.ts +2 -1
  40. package/dist/video.scss +16 -7
  41. package/dist/widget.scss +2 -0
  42. package/package.json +1 -1
package/dist/quotes.scss CHANGED
@@ -1,8 +1,6 @@
1
1
  @use "sass:map";
2
2
  @use "sass:list";
3
- @function ctm-var($base) {
4
- @return unquote("var(--_ctm-mob-#{$base}, var(--_ctm-tab-#{$base}, var(--_ctm-#{$base})))");
5
- }
3
+ @use "./functions.scss" as *;
6
4
 
7
5
  $resizerId: "[data-cms-tool='cms-element-resizer']";
8
6
  $resizeActive: '[data-cms-element-resizer="true"]';
@@ -51,22 +49,22 @@ $resizeActive: '[data-cms-element-resizer="true"]';
51
49
  //border: 1px solid var(--_primary-100);
52
50
  //background: #fff;
53
51
  width: 349px;
54
- font-family: ctm-var(dn-wt-se-ft-fy);
55
- font-size: ctm-var(dn-wt-se-ft-se);
56
- color: ctm-var(dn-wt-se-cr);
57
- font-weight: ctm-var(dn-wt-se-ft-wt);
58
- font-style: ctm-var(dn-wt-se-ft-se-ic);
59
- text-decoration: ctm-var(dn-wt-se-ue);
60
- text-align: ctm-var(dn-wt-se-tt-an);
61
- letter-spacing: ctm-var(dn-wt-se-lr-sg);
62
- line-height: ctm-var(dn-wt-se-le-ht);
63
- background-color: ctm-var(dn-wt-se-bd-cr);
64
- border-width: ctm-var(dn-wt-se-br-wh);
65
- border-color: ctm-var(dn-wt-se-br-cr);
66
- border-style: ctm-var(dn-wt-se-br-se);
67
- border-radius: ctm-var(dn-wt-se-br-rs);
68
- box-shadow: ctm-var(dn-wt-se-sw-ae) ctm-var(dn-wt-se-sw-br) ctm-var(dn-wt-se-sw-sd)
69
- ctm-var(dn-wt-se-sw-cr);
52
+ font-family: prepareMediaVariable(dn-wt-se-ft-fy);
53
+ font-size: prepareMediaVariable(dn-wt-se-ft-se);
54
+ color: prepareMediaVariable(dn-wt-se-cr);
55
+ font-weight: prepareMediaVariable(dn-wt-se-ft-wt);
56
+ font-style: prepareMediaVariable(dn-wt-se-ft-se-ic);
57
+ text-decoration: prepareMediaVariable(dn-wt-se-ue);
58
+ text-align: prepareMediaVariable(dn-wt-se-tt-an);
59
+ letter-spacing: prepareMediaVariable(dn-wt-se-lr-sg);
60
+ line-height: prepareMediaVariable(dn-wt-se-le-ht);
61
+ background-color: prepareMediaVariable(dn-wt-se-bd-cr);
62
+ border-width: prepareMediaVariable(dn-wt-se-br-wh);
63
+ border-color: prepareMediaVariable(dn-wt-se-br-cr);
64
+ border-style: prepareMediaVariable(dn-wt-se-br-se);
65
+ border-radius: prepareMediaVariable(dn-wt-se-br-rs);
66
+ box-shadow: prepareMediaVariable(dn-wt-se-sw-ae) prepareMediaVariable(dn-wt-se-sw-br)
67
+ prepareMediaVariable(dn-wt-se-sw-sd) prepareMediaVariable(dn-wt-se-sw-cr);
70
68
  .quotes_card {
71
69
  display: flex;
72
70
  flex-direction: column;
@@ -87,15 +85,15 @@ $resizeActive: '[data-cms-element-resizer="true"]';
87
85
  // font-size: 20px;
88
86
  // font-weight: 600;
89
87
  // line-height: 30px;
90
- font-family: ctm-var(dn-wt-se-ft-fy);
91
- font-size: ctm-var(dn-wt-se-ft-se);
92
- color: ctm-var(dn-wt-se-cr);
93
- font-weight: ctm-var(dn-wt-se-ft-wt);
94
- font-style: ctm-var(dn-wt-se-ft-se-ic);
95
- text-decoration: ctm-var(dn-wt-se-ue);
96
- text-align: ctm-var(dn-wt-se-tt-an);
97
- letter-spacing: ctm-var(dn-wt-se-lr-sg);
98
- line-height: ctm-var(dn-wt-se-le-ht);
88
+ font-family: prepareMediaVariable(dn-wt-se-ft-fy);
89
+ font-size: prepareMediaVariable(dn-wt-se-ft-se);
90
+ color: prepareMediaVariable(dn-wt-se-cr);
91
+ font-weight: prepareMediaVariable(dn-wt-se-ft-wt);
92
+ font-style: prepareMediaVariable(dn-wt-se-ft-se-ic);
93
+ text-decoration: prepareMediaVariable(dn-wt-se-ue);
94
+ text-align: prepareMediaVariable(dn-wt-se-tt-an);
95
+ letter-spacing: prepareMediaVariable(dn-wt-se-lr-sg);
96
+ line-height: prepareMediaVariable(dn-wt-se-le-ht);
99
97
  }
100
98
  }
101
99
 
@@ -107,13 +105,13 @@ $resizeActive: '[data-cms-element-resizer="true"]';
107
105
  align-self: stretch;
108
106
  //border-radius: 0px 0px 6px 6px;
109
107
 
110
- background-color: ctm-var(dn-im-se-bd-cr);
111
- border-width: ctm-var(dn-im-se-br-wh);
112
- border-color: ctm-var(dn-im-se-br-cr);
113
- border-style: ctm-var(dn-im-se-br-se);
114
- border-radius: ctm-var(dn-im-se-br-rs);
115
- box-shadow: ctm-var(dn-im-se-sw-ae) ctm-var(dn-im-se-sw-br) ctm-var(dn-im-se-sw-sd)
116
- ctm-var(dn-im-se-sw-cr);
108
+ background-color: prepareMediaVariable(dn-im-se-bd-cr);
109
+ border-width: prepareMediaVariable(dn-im-se-br-wh);
110
+ border-color: prepareMediaVariable(dn-im-se-br-cr);
111
+ border-style: prepareMediaVariable(dn-im-se-br-se);
112
+ border-radius: prepareMediaVariable(dn-im-se-br-rs);
113
+ box-shadow: prepareMediaVariable(dn-im-se-sw-ae) prepareMediaVariable(dn-im-se-sw-br)
114
+ prepareMediaVariable(dn-im-se-sw-sd) prepareMediaVariable(dn-im-se-sw-cr);
117
115
 
118
116
  .content {
119
117
  display: flex;
@@ -124,15 +122,15 @@ $resizeActive: '[data-cms-element-resizer="true"]';
124
122
  gap: 12px;
125
123
  flex: 1 0 0;
126
124
  align-self: stretch;
127
- font-family: ctm-var(dn-im-se-ft-fy);
128
- font-size: ctm-var(dn-im-se-ft-se);
129
- color: ctm-var(dn-im-se-cr);
130
- font-weight: ctm-var(dn-im-se-ft-wt);
131
- font-style: ctm-var(dn-im-se-ft-se-ic);
132
- text-decoration: ctm-var(dn-im-se-ue);
133
- text-align: ctm-var(dn-im-se-tt-an);
134
- letter-spacing: ctm-var(dn-im-se-lr-sg);
135
- line-height: ctm-var(dn-im-se-le-ht);
125
+ font-family: prepareMediaVariable(dn-im-se-ft-fy);
126
+ font-size: prepareMediaVariable(dn-im-se-ft-se);
127
+ color: prepareMediaVariable(dn-im-se-cr);
128
+ font-weight: prepareMediaVariable(dn-im-se-ft-wt);
129
+ font-style: prepareMediaVariable(dn-im-se-ft-se-ic);
130
+ text-decoration: prepareMediaVariable(dn-im-se-ue);
131
+ text-align: prepareMediaVariable(dn-im-se-tt-an);
132
+ letter-spacing: prepareMediaVariable(dn-im-se-lr-sg);
133
+ line-height: prepareMediaVariable(dn-im-se-le-ht);
136
134
 
137
135
  .metric_wrapper {
138
136
  display: flex;
@@ -147,22 +145,23 @@ $resizeActive: '[data-cms-element-resizer="true"]';
147
145
  // font-size: 14px;
148
146
  // font-weight: 600;
149
147
  // line-height: 20px;
150
- font-family: ctm-var(dn-qe-id-ft-fy);
151
- font-size: ctm-var(dn-qe-id-ft-se);
152
- color: ctm-var(dn-qe-id-cr);
153
- font-weight: ctm-var(dn-qe-id-ft-wt);
154
- font-style: ctm-var(dn-qe-id-ft-se-ic);
155
- text-decoration: ctm-var(dn-qe-id-ue);
156
- text-align: ctm-var(dn-qe-id-tt-an);
157
- letter-spacing: ctm-var(dn-qe-id-lr-sg);
158
- line-height: ctm-var(dn-qe-id-le-ht);
159
- background-color: ctm-var(dn-qe-id-bd-cr);
160
- border-width: ctm-var(dn-qe-id-br-wh);
161
- border-color: ctm-var(dn-qe-id-br-cr);
162
- border-style: ctm-var(dn-qe-id-br-se);
163
- border-radius: ctm-var(dn-qe-id-br-rs);
164
- box-shadow: ctm-var(dn-qe-id-sw-ae) ctm-var(dn-qe-id-sw-br) ctm-var(dn-qe-id-sw-sd)
165
- ctm-var(dn-qe-id-sw-cr);
148
+ font-family: prepareMediaVariable(dn-qe-id-ft-fy);
149
+ font-size: prepareMediaVariable(dn-qe-id-ft-se);
150
+ color: prepareMediaVariable(dn-qe-id-cr);
151
+ font-weight: prepareMediaVariable(dn-qe-id-ft-wt);
152
+ font-style: prepareMediaVariable(dn-qe-id-ft-se-ic);
153
+ text-decoration: prepareMediaVariable(dn-qe-id-ue);
154
+ text-align: prepareMediaVariable(dn-qe-id-tt-an);
155
+ letter-spacing: prepareMediaVariable(dn-qe-id-lr-sg);
156
+ line-height: prepareMediaVariable(dn-qe-id-le-ht);
157
+ background-color: prepareMediaVariable(dn-qe-id-bd-cr);
158
+ border-width: prepareMediaVariable(dn-qe-id-br-wh);
159
+ border-color: prepareMediaVariable(dn-qe-id-br-cr);
160
+ border-style: prepareMediaVariable(dn-qe-id-br-se);
161
+ border-radius: prepareMediaVariable(dn-qe-id-br-rs);
162
+ box-shadow: prepareMediaVariable(dn-qe-id-sw-ae)
163
+ prepareMediaVariable(dn-qe-id-sw-br) prepareMediaVariable(dn-qe-id-sw-sd)
164
+ prepareMediaVariable(dn-qe-id-sw-cr);
166
165
  }
167
166
 
168
167
  .status_badge {
@@ -173,28 +172,29 @@ $resizeActive: '[data-cms-element-resizer="true"]';
173
172
  // border-radius: 16px;
174
173
  // background: #fff4ed;
175
174
  mix-blend-mode: multiply;
176
- background-color: ctm-var(dn-qe-ss-bd-cr);
177
- border-width: ctm-var(dn-qe-ss-br-wh);
178
- border-color: ctm-var(dn-qe-ss-br-cr);
179
- border-style: ctm-var(dn-qe-ss-br-se);
180
- border-radius: ctm-var(dn-qe-ss-br-rs);
181
- box-shadow: ctm-var(dn-qe-ss-sw-ae) ctm-var(dn-qe-ss-sw-br) ctm-var(dn-qe-ss-sw-sd)
182
- ctm-var(dn-qe-ss-sw-cr);
175
+ background-color: prepareMediaVariable(dn-qe-ss-bd-cr);
176
+ border-width: prepareMediaVariable(dn-qe-ss-br-wh);
177
+ border-color: prepareMediaVariable(dn-qe-ss-br-cr);
178
+ border-style: prepareMediaVariable(dn-qe-ss-br-se);
179
+ border-radius: prepareMediaVariable(dn-qe-ss-br-rs);
180
+ box-shadow: prepareMediaVariable(dn-qe-ss-sw-ae)
181
+ prepareMediaVariable(dn-qe-ss-sw-br) prepareMediaVariable(dn-qe-ss-sw-sd)
182
+ prepareMediaVariable(dn-qe-ss-sw-cr);
183
183
 
184
184
  .quote_status {
185
185
  // color: #b93815;
186
186
  // text-align: center;
187
187
  // font-size: 12px;
188
188
  // line-height: 18px;
189
- font-family: ctm-var(dn-qe-ss-ft-fy);
190
- font-size: ctm-var(dn-qe-ss-ft-se);
191
- color: ctm-var(dn-qe-ss-cr);
192
- font-weight: ctm-var(dn-qe-ss-ft-wt);
193
- font-style: ctm-var(dn-qe-ss-ft-se-ic);
194
- text-decoration: ctm-var(dn-qe-ss-ue);
195
- text-align: ctm-var(dn-qe-ss-tt-an);
196
- letter-spacing: ctm-var(dn-qe-ss-lr-sg);
197
- line-height: ctm-var(dn-qe-ss-le-ht);
189
+ font-family: prepareMediaVariable(dn-qe-ss-ft-fy);
190
+ font-size: prepareMediaVariable(dn-qe-ss-ft-se);
191
+ color: prepareMediaVariable(dn-qe-ss-cr);
192
+ font-weight: prepareMediaVariable(dn-qe-ss-ft-wt);
193
+ font-style: prepareMediaVariable(dn-qe-ss-ft-se-ic);
194
+ text-decoration: prepareMediaVariable(dn-qe-ss-ue);
195
+ text-align: prepareMediaVariable(dn-qe-ss-tt-an);
196
+ letter-spacing: prepareMediaVariable(dn-qe-ss-lr-sg);
197
+ line-height: prepareMediaVariable(dn-qe-ss-le-ht);
198
198
  }
199
199
  }
200
200
 
@@ -205,22 +205,23 @@ $resizeActive: '[data-cms-element-resizer="true"]';
205
205
  // font-weight: 400;
206
206
  // line-height: 18px;
207
207
 
208
- font-family: ctm-var(dn-rd-on-ft-fy);
209
- font-size: ctm-var(dn-rd-on-ft-se);
210
- color: ctm-var(dn-rd-on-cr);
211
- font-weight: ctm-var(dn-rd-on-ft-wt);
212
- font-style: ctm-var(dn-rd-on-ft-se-ic);
213
- text-decoration: ctm-var(dn-rd-on-ue);
214
- text-align: ctm-var(dn-rd-on-tt-an);
215
- letter-spacing: ctm-var(dn-rd-on-lr-sg);
216
- line-height: ctm-var(dn-rd-on-le-ht);
217
- background-color: ctm-var(dn-rd-on-bd-cr);
218
- border-width: ctm-var(dn-rd-on-br-wh);
219
- border-color: ctm-var(dn-rd-on-br-cr);
220
- border-style: ctm-var(dn-rd-on-br-se);
221
- border-radius: ctm-var(dn-rd-on-br-rs);
222
- box-shadow: ctm-var(dn-rd-on-sw-ae) ctm-var(dn-rd-on-sw-br) ctm-var(dn-rd-on-sw-sd)
223
- ctm-var(dn-rd-on-sw-cr);
208
+ font-family: prepareMediaVariable(dn-rd-on-ft-fy);
209
+ font-size: prepareMediaVariable(dn-rd-on-ft-se);
210
+ color: prepareMediaVariable(dn-rd-on-cr);
211
+ font-weight: prepareMediaVariable(dn-rd-on-ft-wt);
212
+ font-style: prepareMediaVariable(dn-rd-on-ft-se-ic);
213
+ text-decoration: prepareMediaVariable(dn-rd-on-ue);
214
+ text-align: prepareMediaVariable(dn-rd-on-tt-an);
215
+ letter-spacing: prepareMediaVariable(dn-rd-on-lr-sg);
216
+ line-height: prepareMediaVariable(dn-rd-on-le-ht);
217
+ background-color: prepareMediaVariable(dn-rd-on-bd-cr);
218
+ border-width: prepareMediaVariable(dn-rd-on-br-wh);
219
+ border-color: prepareMediaVariable(dn-rd-on-br-cr);
220
+ border-style: prepareMediaVariable(dn-rd-on-br-se);
221
+ border-radius: prepareMediaVariable(dn-rd-on-br-rs);
222
+ box-shadow: prepareMediaVariable(dn-rd-on-sw-ae)
223
+ prepareMediaVariable(dn-rd-on-sw-br) prepareMediaVariable(dn-rd-on-sw-sd)
224
+ prepareMediaVariable(dn-rd-on-sw-cr);
224
225
  }
225
226
 
226
227
  .quotes_amount {
@@ -229,22 +230,23 @@ $resizeActive: '[data-cms-element-resizer="true"]';
229
230
  // font-size: 14px;
230
231
  // font-weight: 600;
231
232
  // line-height: 20px;
232
- font-family: ctm-var(dn-qe-id-ft-fy);
233
- font-size: ctm-var(dn-qe-id-ft-se);
234
- color: ctm-var(dn-qe-id-cr);
235
- font-weight: ctm-var(dn-qe-id-ft-wt);
236
- font-style: ctm-var(dn-qe-id-ft-se-ic);
237
- text-decoration: ctm-var(dn-qe-id-ue);
238
- text-align: ctm-var(dn-qe-id-tt-an);
239
- letter-spacing: ctm-var(dn-qe-id-lr-sg);
240
- line-height: ctm-var(dn-qe-id-le-ht);
241
- background-color: ctm-var(dn-qe-id-bd-cr);
242
- border-width: ctm-var(dn-qe-id-br-wh);
243
- border-color: ctm-var(dn-qe-id-br-cr);
244
- border-style: ctm-var(dn-qe-id-br-se);
245
- border-radius: ctm-var(dn-qe-id-br-rs);
246
- box-shadow: ctm-var(dn-qe-id-sw-ae) ctm-var(dn-qe-id-sw-br) ctm-var(dn-qe-id-sw-sd)
247
- ctm-var(dn-qe-id-sw-cr);
233
+ font-family: prepareMediaVariable(dn-qe-id-ft-fy);
234
+ font-size: prepareMediaVariable(dn-qe-id-ft-se);
235
+ color: prepareMediaVariable(dn-qe-id-cr);
236
+ font-weight: prepareMediaVariable(dn-qe-id-ft-wt);
237
+ font-style: prepareMediaVariable(dn-qe-id-ft-se-ic);
238
+ text-decoration: prepareMediaVariable(dn-qe-id-ue);
239
+ text-align: prepareMediaVariable(dn-qe-id-tt-an);
240
+ letter-spacing: prepareMediaVariable(dn-qe-id-lr-sg);
241
+ line-height: prepareMediaVariable(dn-qe-id-le-ht);
242
+ background-color: prepareMediaVariable(dn-qe-id-bd-cr);
243
+ border-width: prepareMediaVariable(dn-qe-id-br-wh);
244
+ border-color: prepareMediaVariable(dn-qe-id-br-cr);
245
+ border-style: prepareMediaVariable(dn-qe-id-br-se);
246
+ border-radius: prepareMediaVariable(dn-qe-id-br-rs);
247
+ box-shadow: prepareMediaVariable(dn-qe-id-sw-ae)
248
+ prepareMediaVariable(dn-qe-id-sw-br) prepareMediaVariable(dn-qe-id-sw-sd)
249
+ prepareMediaVariable(dn-qe-id-sw-cr);
248
250
  }
249
251
  }
250
252
  .quotes_action {
@@ -295,7 +297,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
295
297
  gap: var(--_ctm-mob-lt-sg-bn-is, var(--_ctm-tab-lt-sg-bn-is, var(--_ctm-lt-sg-bn-is)));
296
298
 
297
299
  &[data-control-type="Bottom"][data-slider-control="Arrows"] {
298
- height: calc(100% - calc(ctm-var(dn-pn-as-aw-se) + 10px));
300
+ height: calc(100% - calc(prepareMediaVariable(dn-pn-as-aw-se) + 10px));
299
301
  }
300
302
 
301
303
  &[data-control-type="Bottom"][data-slider-control="Pagination Line"] {
@@ -472,8 +474,8 @@ $resizeActive: '[data-cms-element-resizer="true"]';
472
474
  padding: 10px;
473
475
  border-radius: 50%;
474
476
  border: none;
475
- width: ctm-var(dn-pn-as-aw-se);
476
- height: ctm-var(dn-pn-as-aw-se);
477
+ width: prepareMediaVariable(dn-pn-as-aw-se);
478
+ height: prepareMediaVariable(dn-pn-as-aw-se);
477
479
  display: flex;
478
480
  align-items: center;
479
481
  justify-content: center;
@@ -491,8 +493,8 @@ $resizeActive: '[data-cms-element-resizer="true"]';
491
493
  .right-button {
492
494
  border-radius: 50%;
493
495
  border: none;
494
- width: ctm-var(dn-pn-as-aw-se);
495
- height: ctm-var(dn-pn-as-aw-se);
496
+ width: prepareMediaVariable(dn-pn-as-aw-se);
497
+ height: prepareMediaVariable(dn-pn-as-aw-se);
496
498
 
497
499
  display: flex;
498
500
  align-items: center;
@@ -514,11 +516,11 @@ $resizeActive: '[data-cms-element-resizer="true"]';
514
516
  display: flex;
515
517
 
516
518
  svg {
517
- width: calc(ctm-var(dn-pn-as-aw-se) * 0.5);
518
- height: calc(ctm-var(dn-pn-as-aw-se) * 0.5);
519
+ width: calc(prepareMediaVariable(dn-pn-as-aw-se) * 0.5);
520
+ height: calc(prepareMediaVariable(dn-pn-as-aw-se) * 0.5);
519
521
 
520
522
  path {
521
- stroke: ctm-var(dn-pn-as-aw-cr);
523
+ stroke: prepareMediaVariable(dn-pn-as-aw-cr);
522
524
  }
523
525
  }
524
526
  }
package/dist/review-cart.scss ADDED
@@ -0,0 +1,196 @@
1
+ .review_cart-main {
2
+ border: 1px solid var(--_gray-200);
3
+ border-radius: 6px;
4
+ margin: 24px;
5
+ padding: 24px 24px 8px 24px;
6
+ max-height: 550px;
7
+ overflow-y: auto;
8
+ .review_header {
9
+ padding-bottom: 24px;
10
+ border-bottom: 1px solid var(--_gray-200);
11
+ display: flex;
12
+ justify-content: space-between;
13
+ align-items: center;
14
+ h2 {
15
+ font-size: 16px;
16
+ font-weight: 700;
17
+ color: var(--_gray-900);
18
+ line-height: 24px;
19
+ span {
20
+ margin-left: 6px;
21
+ }
22
+ }
23
+ ul {
24
+ display: flex;
25
+ align-items: center;
26
+ li {
27
+ line-height: 20px;
28
+ font-size: 14px;
29
+ font-weight: 400;
30
+ color: var(--_gray-600);
31
+ span {
32
+ vertical-align: middle;
33
+ margin-right: 6px;
34
+ }
35
+ &::after {
36
+ content: "";
37
+ width: 5px;
38
+ height: 5px;
39
+ border-radius: 50%;
40
+ background: var(--_gray-300);
41
+ display: inline-block;
42
+ margin: 0 12px;
43
+ }
44
+ &:last-child::after {
45
+ width: 0;
46
+ margin: 0;
47
+ }
48
+ }
49
+ }
50
+ }
51
+ .shipping_address {
52
+ display: flex;
53
+ padding: 24px 0;
54
+ border-bottom: 1px solid var(--_gray-200);
55
+ .shipping {
56
+ min-width: 45%;
57
+ margin-right: 16px;
58
+ border-right: 1px solid var(--_gray-200);
59
+ &:last-of-type {
60
+ border-right: 0;
61
+ }
62
+
63
+ h6 {
64
+ color: var(--_gray-500);
65
+ font-weight: 400;
66
+ font-size: 14px;
67
+ line-height: 20px;
68
+ }
69
+ .shipping_details {
70
+ font-size: 14px;
71
+ font-weight: 600;
72
+ color: var(--_gray-900);
73
+ line-height: 20px;
74
+ }
75
+ }
76
+ .cart_main {
77
+ width: 10%;
78
+ display: flex;
79
+ gap: 16px;
80
+ align-items: center;
81
+ .cart_icon {
82
+ position: relative;
83
+ .badge {
84
+ position: absolute;
85
+ top: -9px;
86
+ background: #ffd700;
87
+ border-radius: 4px;
88
+ left: 15px;
89
+ padding: 2px;
90
+ line-height: normal;
91
+ color: #1f1930;
92
+ font-weight: 400;
93
+ }
94
+ }
95
+ .cart_content {
96
+ display: flex;
97
+ flex-direction: column;
98
+ .cart_amount {
99
+ color: var(--_gray-900);
100
+ font-size: 14px;
101
+ font-weight: 600;
102
+ line-height: 20px;
103
+ }
104
+ }
105
+ }
106
+ }
107
+ }
108
+
109
+ .cart-items {
110
+ h6 {
111
+ font-size: 14px;
112
+ font-weight: 600;
113
+ color: var(--_gray-900);
114
+ margin: 24px 0;
115
+ line-height: 20px;
116
+ }
117
+ }
118
+ .cart_item-grid {
119
+ display: grid;
120
+ grid-template-columns: repeat(2, 1fr);
121
+ gap: 24px 38px;
122
+ padding-right: 12px;
123
+ .cart_item-card {
124
+ display: flex;
125
+ gap: 12px;
126
+ img {
127
+ width: 60px;
128
+ height: 60px;
129
+ object-fit: cover;
130
+ border-radius: 4px;
131
+ }
132
+ .product_item-details {
133
+ .product_item-name {
134
+ font-size: 14px;
135
+ font-weight: 700;
136
+ line-height: 18px;
137
+ color: var(--_gray-900);
138
+ }
139
+ .delivery-date {
140
+ color: var(--_gray-900);
141
+ font-weight: 700;
142
+ font-size: 14px;
143
+ }
144
+ .product_item-specs {
145
+ display: flex;
146
+ li {
147
+ color: var(--_gray-600);
148
+ font-size: 14px;
149
+ font-weight: 400;
150
+ line-height: 18px;
151
+ &::after {
152
+ content: " / ";
153
+ padding: 0 4px;
154
+ }
155
+ &:last-child::after {
156
+ content: "";
157
+ padding: 0;
158
+ }
159
+ }
160
+ }
161
+ }
162
+ }
163
+ .product_item-price {
164
+ margin-left: auto;
165
+ color: var(--_gray-900);
166
+ font-size: 14px;
167
+ font-weight: 700;
168
+ }
169
+ }
170
+
171
+ .order_attributes {
172
+ padding-block: 24px;
173
+ border-top: 1px solid var(--_gray-200);
174
+
175
+ .order_label {
176
+ font-size: 14px;
177
+ color: var(--_gray-600);
178
+ }
179
+ .order_description {
180
+ font-size: 14px;
181
+ color: var(--_gray-900);
182
+ }
183
+ }
184
+
185
+ .show-more-wrapper {
186
+ margin: 32px 16px 16px 0px;
187
+ button {
188
+ padding: 12px 16px;
189
+ color: var(--_primary-400);
190
+ font-weight: 600;
191
+ border-radius: 6px;
192
+ &:hover {
193
+ background-color: var(--_primary-25);
194
+ }
195
+ }
196
+ }