@sc-360-v2/storefront-cms-library 0.3.95 → 0.3.97

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 (16) hide show
  1. package/dist/builder.js +1 -1
  2. package/dist/cart-details.scss +6 -0
  3. package/dist/cart-products-sidebar.scss +4 -3
  4. package/dist/cart-summary.scss +19 -16
  5. package/dist/cartDropdownOverlay.scss +34 -5
  6. package/dist/checkout.scss +13 -64
  7. package/dist/embroider-template-1.scss +56 -0
  8. package/dist/my-templates.scss +4 -3
  9. package/dist/order-status.scss +633 -626
  10. package/dist/request-for-quotes.scss +290 -276
  11. package/dist/tab-v2.scss +7 -2
  12. package/dist/types/builder/tools/element-edit/tabsV2.d.ts +53 -1
  13. package/dist/user-elements.scss +25 -12
  14. package/dist/widget.scss +2 -0
  15. package/dist/wishlist-overlay.scss +48 -0
  16. package/package.json +1 -1
package/dist/request-for-quotes.scss CHANGED
@@ -33,329 +33,314 @@
33
33
  // width: var(--_sf-el-wh-st-mx, calc(1% * var(--_ctm-ele-nw-wh-vl, var(--_sf-nw-wh))));
34
34
  // }
35
35
 
36
- width: 100%;
37
-
38
- & > .wrapper {
39
- // width: 100%;
40
- // height: 100%;
36
+ .quotes_wrapper {
37
+ display: flex;
38
+ flex-direction: column;
39
+ gap: 24px;
41
40
 
42
- .quotes_wrapper {
41
+ .quotes_header {
42
+ width: 100%;
43
43
  display: flex;
44
- flex-direction: column;
45
- gap: 24px;
46
44
 
47
- .quotes_header {
48
- width: 100%;
49
- display: flex;
50
-
51
- justify-content: space-between;
52
- align-items: center;
53
- h2 {
54
- font-size: 24px;
55
- color: var(--_gray-900);
56
- }
57
- .back_to_cart {
58
- color: var(--_primary-400);
59
- &:hover {
60
- text-decoration: underline;
61
- }
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;
62
55
  }
63
56
  }
57
+ }
64
58
 
65
- .quotes_body {
59
+ .quote-items {
60
+ flex: 2;
61
+ .quote-item {
62
+ // padding: 32px 0;
66
63
  display: flex;
67
- gap: 60px;
68
- justify-content: space-between;
69
- .quote-items {
70
- flex: 2;
71
- .quote-item {
72
- // padding: 32px 0;
64
+ gap: 24px;
65
+ &:not(:last-child) {
66
+ border-bottom: 1px dotted var(--_gray-400);
67
+ }
68
+ &:not(:last-child) {
69
+ padding-bottom: 16px;
70
+ }
71
+ &:not(:first-child) {
72
+ padding-top: 16px;
73
+ }
74
+
75
+ .quote-item__image {
76
+ width: 120px;
77
+ height: 120px;
78
+ object-fit: cover;
79
+ border-radius: 4px;
80
+ background-color: #f0f0f0;
81
+ }
82
+
83
+ .quote-item__details {
84
+ flex: 1;
85
+ display: flex;
86
+ flex-direction: column;
87
+
88
+ .quote-item__header {
89
+ margin-bottom: 16px;
90
+ padding-bottom: 16px;
73
91
  display: flex;
74
- gap: 24px;
75
- &:not(:last-child) {
76
- border-bottom: 1px dotted var(--_gray-400);
77
- }
78
- &:not(:last-child) {
79
- padding-bottom: 16px;
80
- }
81
- &:not(:first-child) {
82
- padding-top: 16px;
92
+ border-bottom: 1px dotted #d0d0d0;
93
+ flex-direction: column;
94
+ gap: 8px;
95
+
96
+ .quote-item__title {
97
+ font-size: 16px;
98
+ font-weight: 600;
99
+ // color: #111;
83
100
  }
84
101
 
85
- .quote-item__image {
86
- width: 120px;
87
- height: 120px;
88
- object-fit: cover;
89
- border-radius: 4px;
90
- background-color: #f0f0f0;
102
+ .quote-item__meta {
103
+ display: flex;
104
+ gap: 10px;
105
+ font-size: 14px;
106
+ font-weight: 400;
107
+ // color: var(--_gray-500);
91
108
  }
109
+ }
110
+
111
+ .quote-item__row {
112
+ display: flex;
113
+ gap: 16px;
114
+ align-items: flex-start;
92
115
 
93
- .quote-item__details {
94
- flex: 1;
116
+ .field {
95
117
  display: flex;
96
118
  flex-direction: column;
119
+ font-size: 14px;
120
+ &.price_column {
121
+ padding-right: 40px;
122
+ }
123
+
124
+ label {
125
+ margin-bottom: 6px;
126
+ font-weight: 500;
127
+ font-size: 14px;
128
+ // color: #333;
129
+ }
97
130
 
98
- .quote-item__header {
99
- margin-bottom: 16px;
100
- padding-bottom: 16px;
131
+ .value {
132
+ // font-weight: 600;
133
+ // font-size: 16px;
134
+ // // color: #111;
135
+ font-weight: 600;
136
+ font-size: 16px;
137
+ height: 39px;
101
138
  display: flex;
102
- border-bottom: 1px dotted #d0d0d0;
103
- flex-direction: column;
104
- gap: 8px;
139
+ align-items: center;
140
+ }
105
141
 
106
- .quote-item__title {
107
- font-size: 16px;
108
- font-weight: 600;
109
- // color: #111;
142
+ input {
143
+ height: 40px;
144
+ padding: 8px 12px;
145
+ font-size: 14px;
146
+ border: 1px solid #ccc;
147
+ border-radius: 4px;
148
+ outline: none;
149
+ width: 130px;
150
+
151
+ &:focus {
152
+ border-color: #2563eb;
153
+ box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.3);
110
154
  }
155
+ }
111
156
 
112
- .quote-item__meta {
157
+ .input-with-prefix {
158
+ display: flex;
159
+ align-items: center;
160
+ border: 1px solid #ccc;
161
+ border-radius: 4px;
162
+ overflow: hidden;
163
+ width: 130px;
164
+ height: 40px;
165
+ &:focus-within {
166
+ border: 1px solid var(--_primary-300);
167
+ outline: 2px solid var(--_primary-100);
168
+ }
169
+
170
+ span {
171
+ padding: 0 8px;
172
+ font-size: 15px;
173
+ color: var(--_gray-500);
113
174
  display: flex;
114
- gap: 10px;
115
- font-size: 14px;
116
- font-weight: 400;
117
- // color: var(--_gray-500);
175
+ align-items: center;
176
+ }
177
+
178
+ input {
179
+ border: none;
180
+ width: 100%;
181
+ height: 100%;
182
+ padding-left: 6px;
183
+ &:focus {
184
+ box-shadow: none;
185
+ outline: none;
186
+ }
118
187
  }
119
188
  }
189
+ }
190
+
191
+ .quote-item__totals {
192
+ display: flex;
193
+ flex-direction: column;
194
+ gap: 16px;
195
+ text-align: right;
196
+ margin-left: auto;
197
+ min-width: 180px;
120
198
 
121
- .quote-item__row {
199
+ .quote-total {
122
200
  display: flex;
123
- gap: 16px;
124
- align-items: flex-start;
201
+ flex-direction: column;
202
+ gap: 6px;
125
203
 
126
- .field {
204
+ > div {
127
205
  display: flex;
128
- flex-direction: column;
129
- font-size: 14px;
130
- &.price_column {
131
- padding-right: 40px;
132
- }
206
+ justify-content: flex-end;
207
+ align-items: baseline;
208
+ gap: 4px;
133
209
 
134
- label {
135
- margin-bottom: 6px;
136
- font-weight: 500;
210
+ .label {
137
211
  font-size: 14px;
138
- // color: #333;
212
+ // color: #444;
139
213
  }
140
214
 
141
- .value {
142
- // font-weight: 600;
143
- // font-size: 16px;
144
- // // color: #111;
145
- font-weight: 600;
146
- font-size: 16px;
147
- height: 39px;
148
- display: flex;
149
- align-items: center;
215
+ .amount {
216
+ font-size: 18px;
217
+ font-weight: 700;
218
+ // color: #111;
150
219
  }
220
+ }
151
221
 
152
- input {
153
- height: 40px;
154
- padding: 8px 12px;
155
- font-size: 14px;
156
- border: 1px solid #ccc;
157
- border-radius: 4px;
158
- outline: none;
159
- width: 130px;
160
-
161
- &:focus {
162
- border-color: #2563eb;
163
- box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.3);
164
- }
165
- }
222
+ small {
223
+ font-size: 13px;
224
+ // color: #888;
225
+ margin-top: 4px;
226
+ text-align: right;
227
+ display: flex;
228
+ justify-content: end;
229
+ }
166
230
 
167
- .input-with-prefix {
168
- display: flex;
169
- align-items: center;
170
- border: 1px solid #ccc;
171
- border-radius: 4px;
172
- overflow: hidden;
173
- width: 130px;
174
- height: 40px;
175
- &:focus-within {
176
- border: 1px solid var(--_primary-300);
177
- outline: 2px solid var(--_primary-100);
178
- }
179
-
180
- span {
181
- padding: 0 8px;
182
- font-size: 15px;
183
- color: var(--_gray-500);
184
- display: flex;
185
- align-items: center;
186
- }
187
-
188
- input {
189
- border: none;
190
- width: 100%;
191
- height: 100%;
192
- padding-left: 6px;
193
- &:focus {
194
- box-shadow: none;
195
- outline: none;
196
- }
197
- }
231
+ &.discounted {
232
+ .label {
233
+ color: #039855;
198
234
  }
199
- }
200
235
 
201
- .quote-item__totals {
202
- display: flex;
203
- flex-direction: column;
204
- gap: 16px;
205
- text-align: right;
206
- margin-left: auto;
207
- min-width: 180px;
208
-
209
- .quote-total {
210
- display: flex;
211
- flex-direction: column;
212
- gap: 6px;
213
-
214
- > div {
215
- display: flex;
216
- justify-content: flex-end;
217
- align-items: baseline;
218
- gap: 4px;
219
-
220
- .label {
221
- font-size: 14px;
222
- // color: #444;
223
- }
224
-
225
- .amount {
226
- font-size: 18px;
227
- font-weight: 700;
228
- // color: #111;
229
- }
230
- }
231
-
232
- small {
233
- font-size: 13px;
234
- // color: #888;
235
- margin-top: 4px;
236
- text-align: right;
237
- display: flex;
238
- justify-content: end;
239
- }
240
-
241
- &.discounted {
242
- .label {
243
- color: #039855;
244
- }
245
-
246
- .amount {
247
- color: #039855;
248
- }
249
- }
236
+ .amount {
237
+ color: #039855;
250
238
  }
251
239
  }
252
240
  }
253
241
  }
254
242
  }
255
243
  }
244
+ }
245
+ }
256
246
 
257
- .quote-summary {
258
- background: var(--_base-white);
259
- border: 1px solid var(--_gray-300);
260
- border-radius: 4px;
261
- width: 400px;
262
- overflow: hidden;
263
- height: fit-content;
264
- position: sticky;
265
- top: 10px;
266
-
267
- &__row {
268
- display: flex;
269
- justify-content: space-between;
270
- align-items: center;
271
- padding: 12px 0;
272
- border-bottom: 1px dotted #ccc;
247
+ .quote-summary {
248
+ background: var(--_base-white);
249
+ border: 1px solid var(--_gray-300);
250
+ border-radius: 4px;
251
+ width: 400px;
252
+ overflow: hidden;
253
+ height: fit-content;
254
+ position: sticky;
255
+ top: 10px;
273
256
 
274
- .label {
275
- font-size: 14px;
276
- font-weight: 400;
277
- // color: #666;
278
- }
257
+ &__row {
258
+ display: flex;
259
+ justify-content: space-between;
260
+ align-items: center;
261
+ padding: 12px 0;
262
+ border-bottom: 1px dotted #ccc;
279
263
 
280
- .value {
281
- font-size: 14px;
282
- font-weight: 500;
283
- // color: #333;
264
+ .label {
265
+ font-size: 14px;
266
+ font-weight: 400;
267
+ // color: #666;
268
+ }
284
269
 
285
- &.highlight {
286
- font-size: 14px;
287
- font-weight: 500;
288
- // color: #000;
289
- }
290
- }
270
+ .value {
271
+ font-size: 14px;
272
+ font-weight: 500;
273
+ // color: #333;
291
274
 
292
- &--quoted {
293
- margin-bottom: 20px;
294
- }
295
- .label-quote {
296
- font-size: 14px;
297
- font-weight: 400;
298
- // font-weight: 600;
299
- }
275
+ &.highlight {
276
+ font-size: 14px;
277
+ font-weight: 500;
278
+ // color: #000;
300
279
  }
280
+ }
301
281
 
302
- &__notes {
303
- width: 100%;
304
- height: 100px;
305
- padding: 12px;
306
- border: 1px solid #ddd;
307
- border-radius: 4px;
308
- resize: none;
309
- font-size: 14px;
310
- font-family: inherit;
311
- margin-bottom: 20px;
312
- box-sizing: border-box;
313
- margin-top: 6px;
282
+ &--quoted {
283
+ margin-bottom: 20px;
284
+ }
285
+ .label-quote {
286
+ font-size: 14px;
287
+ font-weight: 400;
288
+ // font-weight: 600;
289
+ }
290
+ }
314
291
 
315
- &::placeholder {
316
- color: #999;
317
- }
292
+ &__notes {
293
+ width: 100%;
294
+ height: 100px;
295
+ padding: 12px;
296
+ border: 1px solid #ddd;
297
+ border-radius: 4px;
298
+ resize: none;
299
+ font-size: 14px;
300
+ font-family: inherit;
301
+ margin-bottom: 20px;
302
+ box-sizing: border-box;
303
+ margin-top: 6px;
318
304
 
319
- &:focus {
320
- outline: none;
321
- border-color: var(--_primary-500);
322
- }
323
- }
305
+ &::placeholder {
306
+ color: #999;
307
+ }
324
308
 
325
- &__button {
326
- width: 100%;
327
- padding: 12px;
328
- // background-color: var(--_primary-400);
329
- // color: var(--_base-white);
330
- font-size: 16px;
331
- font-weight: 600;
332
- border: none;
333
- border-radius: 4px;
334
- cursor: pointer;
335
- transition: background-color 0.2s ease;
336
-
337
- &:hover {
338
- // background-color: var(--_primary-500);
339
- }
340
- }
341
- & > h3 {
342
- font-size: 16px;
343
- font-weight: 700;
344
- // color: var(--_gray-900);
345
- background-color: #f5f5f5;
346
- padding: 12px;
347
- border-bottom: 1px solid var(--_gray-300);
348
- }
349
- .quote-summary-body {
350
- padding: 0px 16px 16px 16px;
351
- }
309
+ &:focus {
310
+ outline: none;
311
+ border-color: var(--_primary-500);
352
312
  }
353
313
  }
314
+
315
+ &__button {
316
+ width: 100%;
317
+ padding: 12px;
318
+ // background-color: var(--_primary-400);
319
+ // color: var(--_base-white);
320
+ font-size: 16px;
321
+ font-weight: 600;
322
+ border: none;
323
+ border-radius: 4px;
324
+ cursor: pointer;
325
+ transition: background-color 0.2s ease;
326
+
327
+ &:hover {
328
+ // background-color: var(--_primary-500);
329
+ }
330
+ }
331
+ & > h3 {
332
+ font-size: 16px;
333
+ font-weight: 700;
334
+ // color: var(--_gray-900);
335
+ background-color: #f5f5f5;
336
+ padding: 12px;
337
+ border-bottom: 1px solid var(--_gray-300);
338
+ }
339
+ .quote-summary-body {
340
+ padding: 0px 16px 16px 16px;
341
+ }
354
342
  }
355
343
  }
356
- &[data-show-shadow="false"] {
357
- --_show-shadow: none;
358
- }
359
344
 
360
345
  .quotes_address_section {
361
346
  .address_card {
@@ -386,7 +371,7 @@
386
371
  display: flex;
387
372
  justify-content: space-between;
388
373
  align-items: center;
389
- margin-bottom: 12px;
374
+ margin-bottom: 8px;
390
375
  }
391
376
 
392
377
  &_text {
@@ -397,6 +382,8 @@
397
382
  white-space: nowrap;
398
383
  overflow: hidden;
399
384
  text-overflow: ellipsis;
385
+ display: inline-block;
386
+ margin-top: 4px;
400
387
  }
401
388
 
402
389
  &_select {
@@ -407,7 +394,7 @@
407
394
  // color: var(--_primary-400);
408
395
  color: var(--_thm-cs-tt-ls-as);
409
396
  text-decoration: none;
410
- font-weight: 600;
397
+ font-weight: 400;
411
398
  background: none;
412
399
  border: none;
413
400
  cursor: pointer;
@@ -419,11 +406,11 @@
419
406
  text-decoration: underline;
420
407
  }
421
408
  }
422
- &_divider {
423
- border: none;
424
- border-top: 1px dashed var(--_gray-300);
425
- margin: 16px 0;
426
- }
409
+ // &_divider {
410
+ // border: none;
411
+ // border-top: 1px dashed var(--_gray-300);
412
+ // margin: 16px 0;
413
+ // }
427
414
 
428
415
  &_footer {
429
416
  display: flex;
@@ -509,7 +496,11 @@
509
496
  padding-bottom: 24px;
510
497
  margin-top: 12px;
511
498
  .contact_title {
499
+ display: flex;
500
+ gap: 12px;
512
501
  font-weight: 600;
502
+ font-size: 14px;
503
+ cursor: pointer;
513
504
  .toggle_dropdown {
514
505
  display: inline-block;
515
506
  transition: transform 0.3s ease;
@@ -566,8 +557,12 @@
566
557
  color: var(--_gray-900);
567
558
  }
568
559
  &_shipping_details {
560
+ padding-bottom: 16px;
561
+ margin-bottom: 16px;
562
+ border-bottom: 1px dashed var(--_gray-300);
569
563
  // padding: 16px;
570
564
  // margin-top: 10px;
565
+
571
566
  .no_shipping_methods {
572
567
  background: var(--_gray-100);
573
568
  border-radius: 4px;
@@ -637,6 +632,15 @@
637
632
  // color: var(--_gray-900);
638
633
  font-size: 14px;
639
634
  }
635
+ &_shipping_selected_method {
636
+ display: flex;
637
+ justify-content: space-between;
638
+ gap: 48px;
639
+ }
640
+ &_shipping_title {
641
+ font-size: 14px;
642
+ font-weight: 600;
643
+ }
640
644
 
641
645
  &_shipping_confirm {
642
646
  padding: 12px;
@@ -652,7 +656,7 @@
652
656
  font-weight: 600;
653
657
  background-color: var(--_thm-py-bs-dt-se-bd-cr);
654
658
  color: var(--_thm-py-bs-dt-se-tt-cr);
655
- margin-block: 4px 16px;
659
+ margin-block: 4px 4px;
656
660
  &:hover {
657
661
  background-color: var(--_thm-py-bs-hr-se-bd-cr);
658
662
  color: var(--_thm-py-bs-hr-se-tt-cr);
@@ -667,6 +671,16 @@
667
671
  }
668
672
  }
669
673
 
674
+ width: 100%;
675
+
676
+ & > .wrapper {
677
+ // width: 100%;
678
+ // height: 100%;
679
+ }
680
+ &[data-show-shadow="false"] {
681
+ --_show-shadow: none;
682
+ }
683
+
670
684
  // .accordion-element {
671
685
  // background-color: var(
672
686
  // --_ctm-mob-dn-fq-wt-bd-cr,