@sc-360-v2/storefront-cms-library 0.2.89 → 0.2.90

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 (20) hide show
  1. package/dist/allocationDetails.scss +49 -45
  2. package/dist/allocations.scss +22 -4
  3. package/dist/builder.js +1 -1
  4. package/dist/cart-details.scss +227 -227
  5. package/dist/checkout.scss +149 -80
  6. package/dist/icons.js +1 -1
  7. package/dist/index.js +1 -1
  8. package/dist/menu.scss +3 -0
  9. package/dist/product-customizations.scss +149 -0
  10. package/dist/quick-order-pad.scss +403 -0
  11. package/dist/repeater copy.scss +633 -0
  12. package/dist/repeater.scss +351 -20
  13. package/dist/types/builder/enums/index.d.ts +0 -1
  14. package/dist/types/builder/index.d.ts +1 -2
  15. package/dist/types/builder/tools/element-edit/index.d.ts +1 -2
  16. package/dist/types/builder/tools/element-edit/repeater.d.ts +8 -1
  17. package/dist/widget.scss +2 -0
  18. package/package.json +1 -1
  19. package/dist/types/builder/elements/product-customizations/index.d.ts +0 -30
  20. package/dist/types/builder/tools/element-edit/productCustomizations.d.ts +0 -396
package/dist/cart-details.scss CHANGED
@@ -85,233 +85,6 @@ $resizeActive: '[data-cms-element-resizer="true"]';
85
85
  }
86
86
  }
87
87
  }
88
-
89
- .cart_products_wrapper {
90
- max-height: 100vh;
91
- overflow: auto;
92
- display: flex;
93
- // padding: 0px 60px 0px 96px;
94
- flex-direction: column;
95
- align-items: flex-start;
96
- gap: 24px;
97
- align-self: stretch;
98
- padding: 8px;
99
- .cart_item_wrapper {
100
- border-radius: 4px;
101
- box-shadow: var(--_ctm-dn-ct-im-ss-sw-ae) var(--_ctm-dn-ct-im-ss-sw-br)
102
- var(--_ctm-dn-ct-im-ss-sw-sd) var(--_ctm-dn-ct-im-ss-sw-cr);
103
- margin: var(--_ctm-dn-ct-im-ss-mn);
104
- padding: var(--_ctm-dn-ct-im-ss-pg);
105
- background: var(--_ctm-dn-ct-im-ss-bd-cr);
106
- max-width: 100%;
107
- min-width: 100%;
108
- border-style: var(--_ctm-dn-ct-im-ss-br-se);
109
- border-color: var(--_ctm-dn-ct-im-ss-br-cr);
110
- border-width: var(--_ctm-dn-ct-im-ss-br-wh);
111
-
112
- .cart_product_wrapper {
113
- display: flex;
114
- justify-content: space-between;
115
- align-items: flex-start;
116
- align-self: stretch;
117
-
118
- .cart_product_left_wrapper {
119
- display: flex;
120
- align-items: flex-start;
121
- gap: 16px;
122
-
123
- .checkbox_wrapper {
124
- width: fit-content;
125
- }
126
-
127
- .product_info_wrapper {
128
- display: flex;
129
- width: 320px;
130
- flex-direction: column;
131
- justify-content: space-between;
132
- align-items: flex-start;
133
- align-self: stretch;
134
-
135
- .product_info_container {
136
- display: flex;
137
- flex-direction: column;
138
- align-items: flex-start;
139
- gap: 2px;
140
- align-self: stretch;
141
-
142
- .product_title {
143
- color: var(--_ctm-dn-pt-ne-ss-cr);
144
- font-size: 18px;
145
- font-weight: 700;
146
- align-self: stretch;
147
- line-height: 28px;
148
- }
149
-
150
- .product_code {
151
- display: flex;
152
- align-items: center;
153
- gap: 6px;
154
- align-self: stretch;
155
-
156
- p {
157
- color: #475467;
158
- font-size: 14px;
159
- font-weight: 400;
160
- line-height: 20px;
161
- }
162
- }
163
-
164
- .product_options {
165
- display: flex;
166
- align-items: center;
167
- gap: 4px;
168
- align-self: stretch;
169
-
170
- p {
171
- color: #475467;
172
- font-size: 14px;
173
- font-weight: 400;
174
- line-height: 20px; /* 142.857% */
175
- }
176
- }
177
- }
178
-
179
- .product_customization_container {
180
- display: flex;
181
- align-items: center;
182
- gap: 18px;
183
-
184
- .customization_button {
185
- display: flex;
186
- justify-content: center;
187
- align-items: center;
188
- gap: 8px;
189
- color: #243dc6;
190
- font-size: 14px;
191
- font-weight: 400;
192
- line-height: 20px;
193
-
194
- &:hover {
195
- font-weight: 600;
196
- }
197
- }
198
- }
199
- }
200
- }
201
-
202
- .cart_product_right_wrapper {
203
- display: flex;
204
- flex-direction: column;
205
- justify-content: space-between;
206
- align-items: flex-end;
207
- align-self: stretch;
208
-
209
- .product_qty_price_wrapper {
210
- display: flex;
211
- justify-content: flex-end;
212
- align-items: center;
213
- gap: 31px;
214
- align-self: stretch;
215
-
216
- .product_qty_wrapper {
217
- display: flex;
218
- width: 124px;
219
- flex-direction: column;
220
- align-items: flex-start;
221
- gap: 6px;
222
-
223
- .product_qty_container {
224
- display: flex;
225
- align-items: flex-start;
226
- align-self: stretch;
227
- border-radius: 4px;
228
- border: 0.5px solid #d0d5dd;
229
- background: #fff;
230
- box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
231
-
232
- .product_qty_label {
233
- display: flex;
234
- padding: 8px 12px;
235
- align-items: center;
236
- border-radius: 8px 0px 0px 8px;
237
- p {
238
- color: #475467;
239
- font-size: 16px;
240
- font-weight: 400;
241
- line-height: 24px;
242
- }
243
- }
244
-
245
- .product_qty_number {
246
- display: flex;
247
- padding: 8px 12px;
248
- align-items: center;
249
- gap: 8px;
250
- flex: 1 0 0;
251
- align-self: stretch;
252
- border-radius: 0px 4px 4px 0px;
253
- background: #fff;
254
- border-left: 1px solid #d0d5dd;
255
- }
256
- }
257
- }
258
-
259
- .product_price {
260
- color: #101828;
261
- text-align: right;
262
- font-size: 20px;
263
- font-weight: 700;
264
- line-height: 30px;
265
- white-space: nowrap;
266
- }
267
- }
268
-
269
- .product_actions_wrapper {
270
- display: flex;
271
- align-items: center;
272
- gap: 16px;
273
-
274
- .product_action_button {
275
- display: flex;
276
- justify-content: center;
277
- align-items: center;
278
- gap: 8px;
279
- color: #243dc6;
280
- font-size: 14px;
281
- font-weight: 400;
282
- line-height: 20px;
283
- white-space: nowrap;
284
-
285
- &:hover {
286
- font-weight: 600;
287
- }
288
- }
289
-
290
- .remove_button {
291
- display: flex;
292
- justify-content: center;
293
- align-items: center;
294
- color: #667085;
295
- font-size: 14px;
296
- font-weight: 400;
297
- line-height: 20px;
298
-
299
- &:hover {
300
- font-weight: 600;
301
- }
302
- }
303
- }
304
- }
305
- }
306
- }
307
-
308
- .brand_group_wrapper {
309
- .brand_title {
310
- margin-bottom: 8px;
311
- padding: 4px;
312
- }
313
- }
314
- }
315
88
  }
316
89
  }
317
90
  }
@@ -385,3 +158,230 @@ $resizeActive: '[data-cms-element-resizer="true"]';
385
158
  }
386
159
  }
387
160
  }
161
+ .cart_products_wrapper {
162
+ max-height: 100vh;
163
+ overflow: auto;
164
+ display: flex;
165
+ // padding: 0px 60px 0px 96px;
166
+ flex-direction: column;
167
+ align-items: flex-start;
168
+ gap: 24px;
169
+ align-self: stretch;
170
+ padding: 8px;
171
+
172
+ .cart_item_wrapper {
173
+ border-radius: 4px;
174
+ box-shadow: var(--_ctm-dn-ct-im-ss-sw-ae) var(--_ctm-dn-ct-im-ss-sw-br)
175
+ var(--_ctm-dn-ct-im-ss-sw-sd) var(--_ctm-dn-ct-im-ss-sw-cr);
176
+ margin: var(--_ctm-dn-ct-im-ss-mn);
177
+ padding: var(--_ctm-dn-ct-im-ss-pg);
178
+ background: var(--_ctm-dn-ct-im-ss-bd-cr);
179
+ max-width: 100%;
180
+ min-width: 100%;
181
+ border-style: var(--_ctm-dn-ct-im-ss-br-se);
182
+ border-color: var(--_ctm-dn-ct-im-ss-br-cr);
183
+ border-width: var(--_ctm-dn-ct-im-ss-br-wh);
184
+
185
+ .cart_product_wrapper {
186
+ display: flex;
187
+ justify-content: space-between;
188
+ align-items: flex-start;
189
+ align-self: stretch;
190
+
191
+ .cart_product_left_wrapper {
192
+ display: flex;
193
+ align-items: flex-start;
194
+ gap: 16px;
195
+
196
+ .checkbox_wrapper {
197
+ width: fit-content;
198
+ }
199
+
200
+ .product_info_wrapper {
201
+ display: flex;
202
+ width: 320px;
203
+ flex-direction: column;
204
+ justify-content: space-between;
205
+ align-items: flex-start;
206
+ align-self: stretch;
207
+
208
+ .product_info_container {
209
+ display: flex;
210
+ flex-direction: column;
211
+ align-items: flex-start;
212
+ gap: 2px;
213
+ align-self: stretch;
214
+
215
+ .product_title {
216
+ color: var(--_ctm-dn-pt-ne-ss-cr);
217
+ font-size: 18px;
218
+ font-weight: 700;
219
+ align-self: stretch;
220
+ line-height: 28px;
221
+ }
222
+
223
+ .product_code {
224
+ display: flex;
225
+ align-items: center;
226
+ gap: 6px;
227
+ align-self: stretch;
228
+
229
+ p {
230
+ color: #475467;
231
+ font-size: 14px;
232
+ font-weight: 400;
233
+ line-height: 20px;
234
+ }
235
+ }
236
+
237
+ .product_options {
238
+ display: flex;
239
+ align-items: center;
240
+ gap: 4px;
241
+ align-self: stretch;
242
+
243
+ p {
244
+ color: #475467;
245
+ font-size: 14px;
246
+ font-weight: 400;
247
+ line-height: 20px; /* 142.857% */
248
+ }
249
+ }
250
+ }
251
+
252
+ .product_customization_container {
253
+ display: flex;
254
+ align-items: center;
255
+ gap: 18px;
256
+
257
+ .customization_button {
258
+ display: flex;
259
+ justify-content: center;
260
+ align-items: center;
261
+ gap: 8px;
262
+ color: #243dc6;
263
+ font-size: 14px;
264
+ font-weight: 400;
265
+ line-height: 20px;
266
+
267
+ &:hover {
268
+ font-weight: 600;
269
+ }
270
+ }
271
+ }
272
+ }
273
+ }
274
+
275
+ .cart_product_right_wrapper {
276
+ display: flex;
277
+ flex-direction: column;
278
+ justify-content: space-between;
279
+ align-items: flex-end;
280
+ align-self: stretch;
281
+
282
+ .product_qty_price_wrapper {
283
+ display: flex;
284
+ justify-content: flex-end;
285
+ align-items: center;
286
+ gap: 31px;
287
+ align-self: stretch;
288
+
289
+ .product_qty_wrapper {
290
+ display: flex;
291
+ width: 124px;
292
+ flex-direction: column;
293
+ align-items: flex-start;
294
+ gap: 6px;
295
+
296
+ .product_qty_container {
297
+ display: flex;
298
+ align-items: flex-start;
299
+ align-self: stretch;
300
+ border-radius: 4px;
301
+ border: 0.5px solid #d0d5dd;
302
+ background: #fff;
303
+ box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
304
+
305
+ .product_qty_label {
306
+ display: flex;
307
+ padding: 8px 12px;
308
+ align-items: center;
309
+ border-radius: 8px 0px 0px 8px;
310
+ p {
311
+ color: #475467;
312
+ font-size: 16px;
313
+ font-weight: 400;
314
+ line-height: 24px;
315
+ }
316
+ }
317
+
318
+ .product_qty_number {
319
+ display: flex;
320
+ padding: 8px 12px;
321
+ align-items: center;
322
+ gap: 8px;
323
+ flex: 1 0 0;
324
+ align-self: stretch;
325
+ border-radius: 0px 4px 4px 0px;
326
+ background: #fff;
327
+ border-left: 1px solid #d0d5dd;
328
+ }
329
+ }
330
+ }
331
+
332
+ .product_price {
333
+ color: #101828;
334
+ text-align: right;
335
+ font-size: 20px;
336
+ font-weight: 700;
337
+ line-height: 30px;
338
+ white-space: nowrap;
339
+ }
340
+ }
341
+
342
+ .product_actions_wrapper {
343
+ display: flex;
344
+ align-items: center;
345
+ gap: 16px;
346
+
347
+ .product_action_button {
348
+ display: flex;
349
+ justify-content: center;
350
+ align-items: center;
351
+ gap: 8px;
352
+ color: #243dc6;
353
+ font-size: 14px;
354
+ font-weight: 400;
355
+ line-height: 20px;
356
+ white-space: nowrap;
357
+
358
+ &:hover {
359
+ font-weight: 600;
360
+ }
361
+ }
362
+
363
+ .remove_button {
364
+ display: flex;
365
+ justify-content: center;
366
+ align-items: center;
367
+ color: #667085;
368
+ font-size: 14px;
369
+ font-weight: 400;
370
+ line-height: 20px;
371
+
372
+ &:hover {
373
+ font-weight: 600;
374
+ }
375
+ }
376
+ }
377
+ }
378
+ }
379
+ }
380
+
381
+ .brand_group_wrapper {
382
+ .brand_title {
383
+ margin-bottom: 8px;
384
+ padding: 4px;
385
+ }
386
+ }
387
+ }
package/dist/checkout.scss CHANGED
@@ -67,103 +67,172 @@ $dark-color: #343a40;
67
67
 
68
68
  .accordion-body {
69
69
  padding: 1rem 0;
70
+ .shipping-address {
71
+ .accordion-summary {
72
+ flex: 1;
73
+ display: flex;
74
+ flex-direction: column;
75
+ color: $dark-color;
76
+ font-size: 0.95rem;
77
+ gap: 0.25rem;
78
+
79
+ .summary-content {
80
+ display: flex;
81
+ flex-direction: row;
82
+ justify-content: space-between;
83
+ gap: 0.5rem;
84
+ margin-bottom: 25px;
85
+
86
+ .shipping-summary {
87
+ display: flex;
88
+ flex-direction: column;
89
+ gap: 0.3rem;
90
+
91
+ .address {
92
+ font-weight: 500;
93
+ color: $dark-color;
94
+ line-height: 1.5;
95
+ }
96
+
97
+ .contact {
98
+ font-size: 0.875rem;
99
+ color: $dark-color;
100
+ line-height: 1.4;
101
+ }
102
+ }
70
103
 
71
- .accordion-summary {
72
- flex: 1;
73
- display: flex;
74
- flex-direction: column;
75
- color: $dark-color;
76
- font-size: 0.95rem;
77
- gap: 0.25rem;
104
+ .right-btn {
105
+ display: flex;
106
+ gap: 10px;
107
+ }
108
+ }
109
+ }
110
+ .change-link {
111
+ color: $primary-color;
112
+ font-size: 0.875rem;
113
+ text-decoration: underline;
114
+ cursor: pointer;
115
+ align-self: flex-start;
116
+ white-space: nowrap;
117
+ }
78
118
 
79
- .summary-content {
119
+ form {
120
+ display: flex;
121
+ flex-direction: column;
122
+ gap: 0.75rem;
123
+ max-width: calc(100% - 200px);
124
+ }
125
+ .form-group {
80
126
  display: flex;
81
- flex-direction: row;
82
127
  justify-content: space-between;
83
- gap: 0.5rem;
84
- margin-bottom: 25px;
128
+ flex-direction: row;
129
+ gap: 30px;
130
+ }
85
131
 
86
- .shipping-summary {
87
- display: flex;
88
- flex-direction: column;
89
- gap: 0.3rem;
132
+ input,
133
+ select {
134
+ font-size: 14px;
135
+ padding: 10px;
136
+ border: 1px solid $secondary-color;
137
+ border-radius: 4px;
138
+ width: -webkit-fill-available;
139
+ }
90
140
 
91
- .address {
92
- font-weight: 500;
93
- color: $dark-color;
94
- line-height: 1.5;
95
- }
141
+ input[type="checkbox"] {
142
+ width: auto;
143
+ }
96
144
 
97
- .contact {
98
- font-size: 0.875rem;
99
- color: $dark-color;
100
- line-height: 1.4;
101
- }
145
+ label {
146
+ display: flex;
147
+ align-items: center;
148
+ gap: 0.5rem;
149
+ font-size: 14px;
150
+ }
151
+
152
+ .checkbox-group {
153
+ display: flex;
154
+ align-items: center;
155
+ justify-content: start;
156
+ gap: 8px;
157
+ }
158
+
159
+ .submit-btn {
160
+ align-self: flex-start;
161
+ margin-top: 1rem;
162
+ background-color: $primary-color;
163
+ color: $light-color;
164
+ border: none;
165
+ padding: 0.5rem 1rem;
166
+ font-size: 14px;
167
+ border-radius: 4px;
168
+ cursor: pointer;
169
+
170
+ &:hover {
171
+ opacity: 0.8;
102
172
  }
103
173
  }
104
174
  }
105
- .change-link {
106
- color: $primary-color;
107
- font-size: 0.875rem;
108
- text-decoration: underline;
109
- cursor: pointer;
110
- align-self: flex-start;
111
- white-space: nowrap;
112
- }
113
175
 
114
- form {
115
- display: flex;
116
- flex-direction: column;
117
- gap: 0.75rem;
118
- max-width: calc(100% - 200px);
119
- }
120
- .form-group {
121
- display: flex;
122
- justify-content: space-between;
123
- flex-direction: row;
124
- gap: 30px;
125
- }
176
+ .shipping-method {
177
+ &__grid {
178
+ display: grid;
179
+ grid-template-columns: 1fr;
180
+ gap: 32px;
126
181
 
127
- input,
128
- select {
129
- font-size: 14px;
130
- padding: 10px;
131
- border: 1px solid $secondary-color;
132
- border-radius: 4px;
133
- width: -webkit-fill-available;
134
- }
182
+ @media (min-width: 768px) {
183
+ grid-template-columns: 1fr 1fr;
184
+ }
185
+ }
135
186
 
136
- input[type="checkbox"] {
137
- width: auto;
138
- }
187
+ &__group {
188
+ display: flex;
189
+ flex-direction: column;
190
+ }
139
191
 
140
- label {
141
- display: flex;
142
- align-items: center;
143
- gap: 0.5rem;
144
- font-size: 14px;
145
- }
192
+ &__group-title {
193
+ font-size: 16px;
194
+ font-weight: 600;
195
+ margin-bottom: 12px;
196
+ color: #1f2937;
197
+ }
146
198
 
147
- .checkbox-group {
148
- display: flex;
149
- align-items: center;
150
- justify-content: start;
151
- gap: 8px;
152
- }
199
+ &__options {
200
+ display: flex;
201
+ flex-direction: column;
202
+ gap: 12px;
203
+ }
153
204
 
154
- .submit-btn {
155
- align-self: flex-start;
156
- margin-top: 1rem;
157
- background-color: $primary-color;
158
- color: $light-color;
159
- border: none;
160
- padding: 0.5rem 1rem;
161
- font-size: 14px;
162
- border-radius: 4px;
163
- cursor: pointer;
205
+ &__option {
206
+ display: flex;
207
+ align-items: center;
208
+ padding: 12px 16px;
209
+ cursor: pointer;
210
+ transition: all 0.2s ease;
211
+
212
+ input[type="radio"] {
213
+ margin-right: 12px;
214
+ width: 16px;
215
+ height: 16px;
216
+ accent-color: #2563eb;
217
+ cursor: pointer;
218
+ }
164
219
 
165
- &:hover {
166
- opacity: 0.8;
220
+ .label-text {
221
+ flex: 1;
222
+ color: #374151;
223
+ font-size: 0.95rem;
224
+ }
225
+
226
+ .label-price {
227
+ font-weight: 600;
228
+ color: #111827;
229
+ font-size: 0.95rem;
230
+ }
231
+
232
+ &.selected {
233
+ background-color: #f0f5ff;
234
+ border-color: #2563eb;
235
+ }
167
236
  }
168
237
  }
169
238
  }