@sc-360-v2/storefront-cms-library 0.3.87 → 0.3.89

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.
@@ -245,7 +245,7 @@
245
245
  .template_summary_wrapper {
246
246
  border: 1px solid var(--_gray-300);
247
247
  border-radius: 4px;
248
- width: 360px;
248
+ width: 350px;
249
249
  .template_summary_header {
250
250
  padding: 12px 16px;
251
251
  border-bottom: 1px solid var(--_gray-300);
@@ -262,22 +262,15 @@
262
262
  .template_summary_item {
263
263
  display: flex;
264
264
  justify-content: space-between;
265
- gap: 12px;
265
+ gap: 16px;
266
266
  .template_summary_item_details {
267
267
  display: flex;
268
- gap: 12px;
268
+ gap: 16px;
269
269
  .template_summary_item_pro_info {
270
270
  h5 {
271
271
  font-size: 16px;
272
272
  font-weight: 600;
273
273
  color: var(--_gray-900);
274
- width: 160px;
275
- display: -webkit-box;
276
- line-clamp: 2;
277
- -webkit-line-clamp: 2;
278
- -webkit-box-orient: vertical;
279
- overflow: hidden;
280
- text-overflow: ellipsis;
281
274
  }
282
275
  .template_summary_item_pro_qty {
283
276
  color: var(--_gray-500);
@@ -106,7 +106,7 @@
106
106
  .quote-item__title {
107
107
  font-size: 16px;
108
108
  font-weight: 600;
109
- color: #111;
109
+ // color: #111;
110
110
  }
111
111
 
112
112
  .quote-item__meta {
@@ -272,18 +272,19 @@
272
272
 
273
273
  .label {
274
274
  font-size: 14px;
275
- color: #666;
275
+ font-weight: 400;
276
+ // color: #666;
276
277
  }
277
278
 
278
279
  .value {
279
- font-size: 16px;
280
+ font-size: 14px;
280
281
  font-weight: 500;
281
- color: #333;
282
+ // color: #333;
282
283
 
283
284
  &.highlight {
284
- font-size: 20px;
285
- font-weight: 700;
286
- color: #000;
285
+ font-size: 14px;
286
+ font-weight: 500;
287
+ // color: #000;
287
288
  }
288
289
  }
289
290
 
@@ -291,7 +292,9 @@
291
292
  margin-bottom: 20px;
292
293
  }
293
294
  .label-quote {
294
- font-weight: 600;
295
+ font-size: 14px;
296
+ font-weight: 400;
297
+ // font-weight: 600;
295
298
  }
296
299
  }
297
300
 
@@ -320,9 +323,9 @@
320
323
 
321
324
  &__button {
322
325
  width: 100%;
323
- padding: 14px;
324
- background-color: var(--_primary-400);
325
- color: var(--_base-white);
326
+ padding: 12px;
327
+ // background-color: var(--_primary-400);
328
+ // color: var(--_base-white);
326
329
  font-size: 16px;
327
330
  font-weight: 600;
328
331
  border: none;
@@ -331,13 +334,13 @@
331
334
  transition: background-color 0.2s ease;
332
335
 
333
336
  &:hover {
334
- background-color: var(--_primary-500);
337
+ // background-color: var(--_primary-500);
335
338
  }
336
339
  }
337
340
  & > h3 {
338
341
  font-size: 16px;
339
342
  font-weight: 700;
340
- color: var(--_gray-900);
343
+ // color: var(--_gray-900);
341
344
  background-color: #f5f5f5;
342
345
  padding: 12px;
343
346
  border-bottom: 1px solid var(--_gray-300);
@@ -367,7 +370,6 @@
367
370
  & > h3 {
368
371
  font-size: 16px;
369
372
  font-weight: 700;
370
- color: var(--_gray-900);
371
373
  background-color: #f5f5f5;
372
374
  padding: 12px;
373
375
  border-bottom: 1px solid var(--_gray-300);
@@ -389,7 +391,11 @@
389
391
  &_text {
390
392
  font-size: 16px;
391
393
  font-weight: 700;
392
- color: var(--_gray-900);
394
+ width: 273px;
395
+ height: 22px;
396
+ white-space: nowrap;
397
+ overflow: hidden;
398
+ text-overflow: ellipsis;
393
399
  }
394
400
 
395
401
  &_select {
@@ -397,12 +403,16 @@
397
403
  align-items: center;
398
404
  gap: 8px;
399
405
  font-size: 14px;
400
- color: var(--_primary-400);
406
+ // color: var(--_primary-400);
407
+ color: var(--_thm-cs-tt-ls-as);
401
408
  text-decoration: none;
402
409
  font-weight: 600;
403
410
  background: none;
404
411
  border: none;
405
412
  cursor: pointer;
413
+ span {
414
+ display: flex;
415
+ }
406
416
 
407
417
  &:hover {
408
418
  text-decoration: underline;
@@ -430,7 +440,7 @@
430
440
 
431
441
  &_label {
432
442
  font-size: 14px;
433
- color: var(--_gray-700);
443
+ // color: var(--_gray-700);
434
444
  font-weight: 500;
435
445
  margin-bottom: 6px;
436
446
  }
@@ -438,7 +448,7 @@
438
448
  &_value {
439
449
  font-size: 20px;
440
450
  font-weight: 700;
441
- color: var(--_gray-900);
451
+ // color: var(--_gray-900);
442
452
  height: 40px;
443
453
  display: flex;
444
454
  align-items: center;
@@ -458,6 +468,7 @@
458
468
  margin-right: 6px;
459
469
  font-weight: 600;
460
470
  color: var(--_gray-700);
471
+ display: flex;
461
472
  }
462
473
 
463
474
  &_input {
@@ -490,12 +501,38 @@
490
501
  margin-bottom: 0px;
491
502
  }
492
503
  }
504
+ .contact_details {
505
+ gap: 6px;
506
+ display: flex;
507
+ flex-direction: column;
508
+ padding-bottom: 24px;
509
+ }
493
510
 
494
511
  &_address {
495
512
  font-size: 14px;
496
- color: var(--_gray-500);
513
+ // color: var(--_gray-500);
497
514
  font-weight: 400;
498
515
  line-height: 20px;
516
+ padding-bottom: 6px;
517
+ }
518
+ &_details {
519
+ display: flex;
520
+ align-items: center;
521
+ gap: 10px;
522
+ // color: var(--_gray-900);
523
+ font-size: 14px;
524
+ cursor: pointer;
525
+ .toggle_arrow {
526
+ display: flex;
527
+ transition: transform 0.3s ease;
528
+ &.open {
529
+ transform: rotate(180deg);
530
+ }
531
+ }
532
+ &.no_caret {
533
+ caret-color: transparent; /* hides the blinking cursor */
534
+ pointer-events: none; /* prevents clicking/focus */
535
+ }
499
536
  }
500
537
 
501
538
  &_contact_container {
@@ -511,39 +548,49 @@
511
548
  }
512
549
  &_shipping_details {
513
550
  // padding: 16px;
514
- margin-top: 10px;
551
+ // margin-top: 10px;
552
+ .no_shipping_methods {
553
+ background: var(--_gray-100);
554
+ border-radius: 4px;
555
+ padding: 16px;
556
+ text-align: center;
557
+ }
515
558
  }
516
559
 
517
560
  &_shipping_heading {
518
561
  font-size: 14px;
519
562
  font-weight: 600;
520
- color: var(--_gray-900);
521
- background: var(--_gray-100);
563
+ // color: var(--_gray-900);
564
+ background: #f5f5f5;
522
565
  padding: 4px 6px;
523
566
  border-radius: 4px;
524
567
  margin-bottom: 12px;
568
+ padding-left: 12px;
525
569
  }
526
570
 
527
571
  &_shipping_group {
528
572
  margin-bottom: 12px;
573
+ gap: 12px;
574
+ display: flex;
575
+ flex-direction: column;
529
576
  }
530
577
 
531
578
  &_shipping_subheading {
532
579
  font-size: 14px;
533
580
  font-weight: 700;
534
- color: var(--_gray-900);
535
- margin-bottom: 2px;
581
+ // color: var(--_gray-900);
582
+ // margin-bottom: 2px;
536
583
  }
537
584
 
538
585
  &_shipping_option {
539
586
  display: flex;
540
587
  align-items: center;
541
588
  // justify-content: space-between;
542
- padding: 10px 8px;
589
+ // padding: 10px 8px;
543
590
  border-radius: 6px;
544
591
  cursor: pointer;
545
592
  font-size: 14px;
546
- color: var(--_gray-700);
593
+ // color: var(--_gray-700);
547
594
  // margin-bottom: 8px;
548
595
  transition: background 0.2s ease;
549
596
 
@@ -554,7 +601,7 @@
554
601
  }
555
602
 
556
603
  &:hover {
557
- background: var(--_gray-100);
604
+ // background: var(--_gray-100);
558
605
  }
559
606
  }
560
607
 
@@ -563,12 +610,12 @@
563
610
  // margin-left: 6px;
564
611
  font-weight: 400;
565
612
  font-size: 14px;
566
- color: var(--_gray-500);
613
+ // color: var(--_gray-500);
567
614
  }
568
615
 
569
616
  &_shipping_price {
570
617
  font-weight: 600;
571
- color: var(--_gray-900);
618
+ // color: var(--_gray-900);
572
619
  font-size: 14px;
573
620
  }
574
621
 
@@ -583,6 +630,9 @@
583
630
  }
584
631
  .cpn__checkmark__icon {
585
632
  display: flex;
633
+ svg path {
634
+ // stroke: var(--_thm-cs-tt-ls-as);
635
+ }
586
636
  }
587
637
  }
588
638
 
package/dist/section.scss CHANGED
@@ -144,6 +144,10 @@ div[data-div-type="element"] {
144
144
  a {
145
145
  color: inherit;
146
146
  text-decoration: none;
147
+ &.disabled {
148
+ opacity: 0.5;
149
+ pointer-events: none;
150
+ }
147
151
  }
148
152
  }
149
153
  &[data-view-state="full"] {
@@ -3,6 +3,7 @@
3
3
  border-radius: 6px;
4
4
  position: var(--_p-relative);
5
5
  overflow: hidden;
6
+ display: inline-block;
6
7
  &.rounded {
7
8
  border-radius: 50%;
8
9
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sc-360-v2/storefront-cms-library",
3
- "version": "0.3.87",
3
+ "version": "0.3.89",
4
4
  "main": "/dist/index.js",
5
5
  "types": "./dist/index.d.ts",
6
6
  "exports": {