@sc-360-v2/storefront-cms-library 0.3.58 → 0.3.60

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 (17) hide show
  1. package/dist/builder.js +1 -1
  2. package/dist/bulk-order-pad.scss +1 -0
  3. package/dist/buyForHeaders.scss +3 -6
  4. package/dist/cart-details.scss +1 -2
  5. package/dist/cart-summary.scss +10 -1
  6. package/dist/dropdownTemplate.scss +89 -18
  7. package/dist/employee-bulk-order.scss +470 -376
  8. package/dist/emtpy-templates.scss +53 -0
  9. package/dist/icons.js +1 -1
  10. package/dist/index.js +1 -1
  11. package/dist/language-selector.scss +1 -0
  12. package/dist/modal.scss +4 -2
  13. package/dist/order-status.scss +1315 -1257
  14. package/dist/types/builder/elements/form-builder/index.d.ts +4 -0
  15. package/dist/types/builder/enums/index.d.ts +1 -0
  16. package/dist/types/builder/tools/element-edit/cartSummary.d.ts +0 -1
  17. package/package.json +1 -1
package/dist/employee-bulk-order.scss CHANGED
@@ -124,14 +124,30 @@
124
124
  .em_add-product {
125
125
  position: absolute;
126
126
  right: 0;
127
+ .dropdown-with-input-section {
128
+ border: 0;
129
+ background-color: transparent;
130
+ &:focus-within {
131
+ border: 0;
132
+ outline: 0;
133
+ }
134
+ }
127
135
  .svg_icon {
128
136
  right: -10px;
129
- top: 0px;
137
+ top: -10px;
130
138
  }
131
139
  }
132
140
  .em_add-employee {
133
141
  position: absolute;
134
142
  bottom: 0;
143
+ .dropdown-with-input-section {
144
+ border: 0;
145
+ background-color: transparent;
146
+ &:focus-within {
147
+ border: 0;
148
+ outline: 0;
149
+ }
150
+ }
135
151
  .dropdown-menu {
136
152
  top: 38px;
137
153
  }
@@ -221,6 +237,7 @@
221
237
  }
222
238
  .em_profile_text {
223
239
  width: 100%;
240
+ text-align: center;
224
241
  }
225
242
  }
226
243
  .em_entity-status {
@@ -299,6 +316,11 @@
299
316
  gap: 8px;
300
317
  grid-template-columns: 40px auto;
301
318
  .image-section {
319
+ border-radius: 50%;
320
+ width: 32px;
321
+ height: 32px;
322
+ overflow: hidden;
323
+ background: var(--_gray-100);
302
324
  img {
303
325
  width: 100%;
304
326
  border-radius: 2px;
@@ -359,12 +381,20 @@
359
381
  overflow: auto;
360
382
  padding: 8px;
361
383
  color: var(--_gray-600);
362
- .no_variants {
384
+ .variant_info {
363
385
  display: flex;
364
386
  justify-content: center;
365
387
  align-items: center;
366
388
  height: 100%;
367
- color: var(--_gray-400);
389
+ border-radius: 4px;
390
+ &:has(.error) {
391
+ color: var(--_gray-400);
392
+ background-color: var(--_base-white);
393
+ }
394
+ &.error {
395
+ color: var(--_error-700);
396
+ background-color: var(--_error-50);
397
+ }
368
398
  }
369
399
  .variantOptionValues {
370
400
  height: 24px;
@@ -427,6 +457,14 @@
427
457
  }
428
458
  }
429
459
  }
460
+ .validation-info {
461
+ background-color: var(--_error-50);
462
+ color: var(--_error-700);
463
+ font-size: 14px;
464
+ text-align: center;
465
+ padding-block: 4px 6px;
466
+ margin-top: -1px;
467
+ }
430
468
  .em_pr_actions {
431
469
  display: flex;
432
470
  justify-content: end;
@@ -482,6 +520,7 @@
482
520
  gap: 8px;
483
521
  align-items: center;
484
522
  // padding: 8px 0;
523
+
485
524
  .em_opt_val {
486
525
  cursor: pointer;
487
526
  &:hover {
@@ -573,6 +612,10 @@
573
612
  font-weight: 600;
574
613
  font-size: 16px;
575
614
  color: #101828;
615
+ &:focus {
616
+ border: 1px solid var(--_primary-300);
617
+ outline: 2px solid var(--_primary-100);
618
+ }
576
619
  }
577
620
  .add_to_cart_btn_for_employee_bulk {
578
621
  height: 100%;
@@ -3493,465 +3536,516 @@
3493
3536
  border-radius: 6px;
3494
3537
  padding: 16px;
3495
3538
  color: #333333;
3496
- .order-header {
3497
- border-bottom: 1px solid #eaecf0;
3498
- padding-bottom: 24px;
3499
- .user-info {
3500
- display: flex;
3501
- flex-direction: column;
3502
- h3 {
3503
- font-size: 20px;
3504
- font-weight: 600;
3505
- color: #101828;
3506
- line-height: 30px;
3507
- span {
3508
- margin-left: 6px;
3509
- svg {
3510
- path {
3511
- stroke: #475467;
3539
+ .each-order {
3540
+ border: 1px solid var(--_gray-200);
3541
+ border-radius: 8px;
3542
+ padding: 16px;
3543
+ .order-header {
3544
+ border-bottom: 1px solid #eaecf0;
3545
+ padding-bottom: 24px;
3546
+ .user-info {
3547
+ display: flex;
3548
+ flex-direction: column;
3549
+ padding-bottom: 12px;
3550
+ margin-bottom: 12px;
3551
+ border-bottom: 1px solid var(--_gray-200);
3552
+ h3 {
3553
+ font-size: 20px;
3554
+ font-weight: 700;
3555
+ color: var(--_gray-900);
3556
+ line-height: 30px;
3557
+ margin-bottom: 6px;
3558
+ span {
3559
+ margin-left: 6px;
3560
+ svg {
3561
+ path {
3562
+ stroke: #475467;
3563
+ }
3512
3564
  }
3513
3565
  }
3514
3566
  }
3515
- }
3516
- .user-meta-list {
3517
- display: flex;
3518
- align-items: center;
3519
- gap: 12px;
3520
- .meta-item {
3567
+ .user-meta-list {
3521
3568
  display: flex;
3522
- flex-direction: row;
3523
3569
  align-items: center;
3524
- .meta-icon {
3525
- svg {
3526
- width: 12px;
3527
- height: 12px;
3570
+ gap: 12px;
3571
+ .meta-item {
3572
+ display: flex;
3573
+ flex-direction: row;
3574
+ align-items: center;
3575
+ .meta-icon {
3576
+ display: flex;
3577
+ svg {
3578
+ width: 18px;
3579
+ height: 18px;
3580
+ }
3581
+ padding-right: 6px;
3582
+ }
3583
+ .meta-text {
3584
+ font-size: 12px;
3585
+ font-weight: 400;
3586
+ color: #475467;
3587
+ line-height: 18px;
3588
+ }
3589
+ &:not(:first-child)::before {
3590
+ content: "";
3591
+ display: inline-block;
3592
+ width: 5px;
3593
+ height: 5px;
3594
+ background: #d0d5dd;
3595
+ border-radius: 50%;
3596
+ margin-right: 12px;
3528
3597
  }
3529
- padding-right: 6px;
3530
- }
3531
- .meta-text {
3532
- font-size: 12px;
3533
- font-weight: 400;
3534
- color: #475467;
3535
- line-height: 18px;
3536
- }
3537
- &:not(:first-child)::before {
3538
- content: "";
3539
- display: inline-block;
3540
- width: 5px;
3541
- height: 5px;
3542
- background: #d0d5dd;
3543
- border-radius: 50%;
3544
- margin-right: 12px;
3545
3598
  }
3546
3599
  }
3547
3600
  }
3548
3601
  }
3549
- }
3550
-
3551
- .order-successful {
3552
- display: flex;
3553
- align-items: center;
3554
- // background: #f0fdf4;
3555
- // border-radius: 6px;
3556
- // padding: 16px;
3557
- // margin-bottom: 24px;
3558
- background-color: #f6fef9;
3559
- border-radius: 6px;
3560
- border: 1px solid #d0d5dd;
3561
- padding: 12px;
3562
-
3563
- .check-icon {
3564
- font-size: 28px;
3565
- margin-right: 12px;
3566
- }
3567
3602
 
3568
- .success-text {
3603
+ .order-successful,
3604
+ .order-pending,
3605
+ .order-failed {
3569
3606
  display: flex;
3570
- flex-direction: column;
3571
- justify-content: center;
3572
- gap: 8px;
3573
- .success_toast_header {
3607
+ align-items: center;
3608
+ // background: #f0fdf4;
3609
+ // border-radius: 6px;
3610
+ // padding: 16px;
3611
+ // margin-bottom: 24px;
3612
+ background-color: #f6fef9;
3613
+ border-radius: 6px;
3614
+ border: 1px solid #d0d5dd;
3615
+ padding: 12px;
3616
+ margin-block: 16px;
3617
+
3618
+ .check-icon {
3619
+ font-size: 28px;
3620
+ margin-right: 12px;
3621
+ }
3622
+
3623
+ .success-text {
3574
3624
  display: flex;
3575
- gap: 6px;
3576
- align-items: center;
3577
- .success__dropdown__icon {
3578
- svg {
3579
- width: 32px;
3580
- height: 32px;
3581
- path {
3582
- stroke: #099250;
3583
- fill: #ffffff;
3584
- stroke-width: 0.8;
3625
+ flex-direction: column;
3626
+ justify-content: center;
3627
+ gap: 8px;
3628
+ .success_toast_header {
3629
+ display: flex;
3630
+ gap: 6px;
3631
+ align-items: center;
3632
+ .success__dropdown__icon {
3633
+ display: flex;
3634
+ svg {
3635
+ width: 24px;
3636
+ height: 24px;
3637
+ path {
3638
+ stroke: #099250;
3639
+ }
3585
3640
  }
3586
3641
  }
3642
+ h2 {
3643
+ color: #101828;
3644
+ font-size: 20px;
3645
+ font-weight: 600;
3646
+ line-height: 32px;
3647
+ font-family: "Lato";
3648
+ }
3587
3649
  }
3588
- h2 {
3589
- color: #101828;
3590
- font-size: 24px;
3591
- font-weight: 600;
3592
- line-height: 32px;
3593
- font-family: "Lato";
3650
+
3651
+ p {
3652
+ color: #475467;
3653
+ font-size: 14px;
3654
+ font-weight: 400;
3655
+ line-height: 20px;
3594
3656
  }
3595
3657
  }
3596
-
3597
- p {
3598
- color: #475467;
3599
- font-size: 14px;
3600
- font-weight: 400;
3601
- line-height: 20px;
3658
+ }
3659
+ .order-failed {
3660
+ background-color: var(--_error-100);
3661
+ border: 1px solid var(--_error-200);
3662
+ .success__dropdown__icon {
3663
+ svg path {
3664
+ stroke: var(--_error-700) !important;
3665
+ }
3602
3666
  }
3603
3667
  }
3604
- }
3605
- .error_toast_message_wrapper {
3606
- display: flex;
3607
- justify-content: space-between;
3608
- align-items: center;
3609
- background-color: #fffbfa;
3610
- border-radius: 6px;
3611
- border: 1px solid #fda29b;
3612
- padding: 12px;
3613
- .error_toast_message_left_section {
3668
+ .order-pending {
3669
+ background-color: #f5f6f9;
3670
+ border: 1px solid #c5d2fc;
3671
+ svg path {
3672
+ stroke: var(--_primary-700);
3673
+ }
3674
+ }
3675
+ .error_toast_message_wrapper {
3614
3676
  display: flex;
3615
- flex-direction: column;
3616
- gap: 8px;
3617
- .error_toast_message_header {
3677
+ justify-content: space-between;
3678
+ align-items: center;
3679
+ background-color: #fffbfa;
3680
+ border-radius: 6px;
3681
+ border: 1px solid #fda29b;
3682
+ padding: 12px;
3683
+ .error_toast_message_left_section {
3618
3684
  display: flex;
3685
+ flex-direction: column;
3619
3686
  gap: 8px;
3620
- align-items: center;
3621
- h2 {
3622
- color: #101828;
3623
- font-size: 24px;
3624
- font-weight: 600;
3625
- line-height: 32px;
3626
- font-family: "Lato";
3627
- }
3628
- .error__dropdown__icon {
3629
- svg {
3630
- width: 32px;
3631
- height: 32px;
3632
- path {
3633
- stroke: #d92d20;
3634
- fill: #ffffff;
3635
- stroke-width: 0.8;
3687
+ .error_toast_message_header {
3688
+ display: flex;
3689
+ gap: 8px;
3690
+ align-items: center;
3691
+ h2 {
3692
+ color: #101828;
3693
+ font-size: 24px;
3694
+ font-weight: 600;
3695
+ line-height: 32px;
3696
+ font-family: "Lato";
3697
+ }
3698
+ .error__dropdown__icon {
3699
+ svg {
3700
+ width: 32px;
3701
+ height: 32px;
3702
+ path {
3703
+ stroke: #d92d20;
3704
+ fill: #ffffff;
3705
+ stroke-width: 0.8;
3706
+ }
3636
3707
  }
3637
3708
  }
3638
3709
  }
3710
+ p {
3711
+ color: #475467;
3712
+ font-size: 14px;
3713
+ font-weight: 400;
3714
+ line-height: 20px;
3715
+ }
3639
3716
  }
3640
- p {
3641
- color: #475467;
3642
- font-size: 14px;
3643
- font-weight: 400;
3644
- line-height: 20px;
3717
+ .error_message_btn {
3718
+ background-color: #243dc6;
3719
+ color: #ffffff;
3720
+ border-radius: 6px;
3721
+ font-size: 16px;
3722
+ font-weight: 600;
3723
+ padding: 12px 24px;
3645
3724
  }
3646
3725
  }
3647
- .error_message_btn {
3648
- background-color: #243dc6;
3649
- color: #ffffff;
3650
- border-radius: 6px;
3651
- font-size: 16px;
3652
- font-weight: 600;
3653
- padding: 12px 24px;
3654
- }
3655
- }
3656
3726
 
3657
- .order-details-wrapper {
3658
- display: grid;
3659
- grid-template-columns: 2fr 1fr;
3660
- gap: 48px;
3661
- padding-bottom: 24px;
3662
- }
3727
+ .order-details-wrapper {
3728
+ display: grid;
3729
+ grid-template-columns: 2fr 1fr;
3730
+ gap: 48px;
3731
+ padding-bottom: 24px;
3732
+ }
3663
3733
 
3664
- .order-info-section {
3665
- display: flex;
3666
- flex-direction: column;
3667
- gap: 16px;
3668
- .order_info_header {
3669
- font-size: 14px;
3670
- font-weight: 600;
3671
- color: #101828;
3672
- padding: 12px 16px;
3673
- border: 1px solid #eaecf0;
3674
- border-radius: 6px;
3675
- background: #f5f5f5;
3676
- span {
3734
+ .order-info-section {
3735
+ display: flex;
3736
+ flex-direction: column;
3737
+ gap: 16px;
3738
+ .order_info_header {
3677
3739
  font-size: 14px;
3678
3740
  font-weight: 600;
3679
- color: var(--_gray-600);
3741
+ color: #101828;
3742
+ padding: 12px 16px;
3743
+ border: 1px solid #eaecf0;
3744
+ border-radius: 6px;
3745
+ background: #f5f5f5;
3746
+ span {
3747
+ font-size: 14px;
3748
+ font-weight: 600;
3749
+ color: var(--_gray-600);
3750
+ }
3680
3751
  }
3681
3752
  }
3682
- }
3683
- .quick-actions-section {
3684
- display: flex;
3685
- flex-direction: column;
3686
- gap: 16px;
3687
- .quick_actions_header {
3688
- font-size: 14px;
3689
- font-weight: 600;
3690
- color: #101828;
3691
- padding: 12px 16px;
3692
- border: 1px solid #eaecf0;
3693
- border-radius: 6px;
3694
- background: #f5f5f5;
3695
- span {
3753
+ .quick-actions-section {
3754
+ display: flex;
3755
+ flex-direction: column;
3756
+ gap: 16px;
3757
+ .quick_actions_header {
3696
3758
  font-size: 14px;
3697
3759
  font-weight: 600;
3698
- color: var(--_gray-600);
3760
+ color: #101828;
3761
+ padding: 12px 16px;
3762
+ border: 1px solid #eaecf0;
3763
+ border-radius: 6px;
3764
+ background: #f5f5f5;
3765
+ span {
3766
+ font-size: 14px;
3767
+ font-weight: 600;
3768
+ color: var(--_gray-600);
3769
+ }
3699
3770
  }
3700
3771
  }
3701
- }
3702
-
3703
- .order-info {
3704
- display: flex;
3705
- flex-direction: column;
3706
- /* space between the two rows */
3707
- .order-row {
3708
- display: grid;
3709
- gap: 12px 24px;
3710
- /* 12px vertical, 24px horizontal */
3711
-
3712
- /* First row: two equal columns + bottom border */
3713
- &:first-child {
3714
- grid-template-columns: repeat(2, 1fr);
3715
- border-bottom: 1px dashed var(--_gray-400);
3716
- padding-bottom: 24px;
3717
- }
3718
3772
 
3719
- /* Second row: three equal columns */
3720
- &:nth-child(2) {
3721
- grid-template-columns: repeat(3, 1fr);
3722
- margin-top: 24px;
3723
- }
3724
-
3725
- /* Each individual info‐cell styling */
3726
- > div {
3727
- strong {
3728
- display: block;
3729
- font-size: 14px;
3730
- color: var(--_gray-500);
3731
- line-height: 20px;
3732
- margin-bottom: 4px;
3733
- font-weight: 400;
3773
+ .order-info {
3774
+ display: flex;
3775
+ flex-direction: column;
3776
+ /* space between the two rows */
3777
+ .order-row {
3778
+ display: grid;
3779
+ gap: 12px 24px;
3780
+ /* 12px vertical, 24px horizontal */
3781
+
3782
+ /* First row: two equal columns + bottom border */
3783
+ &:first-child {
3784
+ grid-template-columns: repeat(2, 1fr);
3785
+ border-bottom: 1px dashed var(--_gray-400);
3786
+ padding-bottom: 24px;
3734
3787
  }
3735
3788
 
3736
- p {
3737
- margin: 0;
3738
- margin-bottom: 4px;
3739
- font-size: 20px;
3740
- font-weight: 600;
3741
- color: var(--_gray-900);
3742
- line-height: 30px;
3743
- }
3744
- .delivery_address {
3745
- font-size: 14px;
3746
- font-weight: 400;
3747
- color: var(--_gray-400);
3748
- line-height: 20px;
3749
- }
3750
- .shipping-type {
3751
- font-size: 14px;
3752
- font-weight: 400;
3753
- color: var(--_gray-900);
3754
- line-height: 20px;
3789
+ /* Second row: three equal columns */
3790
+ &:nth-child(2) {
3791
+ grid-template-columns: repeat(3, 1fr);
3792
+ margin-top: 24px;
3755
3793
  }
3756
3794
 
3757
- .status {
3758
- margin-left: 6px;
3759
- padding: 2px 8px;
3760
- border-radius: 4px;
3761
- font-size: 12;
3762
- font-weight: 500;
3763
- line-height: 18px;
3764
- }
3795
+ /* Each individual info‐cell styling */
3796
+ > div {
3797
+ strong {
3798
+ display: block;
3799
+ font-size: 14px;
3800
+ color: var(--_gray-500);
3801
+ line-height: 20px;
3802
+ margin-bottom: 4px;
3803
+ font-weight: 400;
3804
+ }
3765
3805
 
3766
- .link-button {
3767
- color: #243dc6;
3768
- font-size: 14px;
3769
- font-weight: 400;
3770
- line-height: 20px;
3771
- }
3806
+ p {
3807
+ margin: 0;
3808
+ margin-bottom: 4px;
3809
+ font-size: 20px;
3810
+ font-weight: 600;
3811
+ color: var(--_gray-900);
3812
+ line-height: 30px;
3813
+ }
3814
+ .delivery_address {
3815
+ font-size: 14px;
3816
+ font-weight: 400;
3817
+ color: var(--_gray-400);
3818
+ line-height: 20px;
3819
+ }
3820
+ .shipping-type {
3821
+ font-size: 14px;
3822
+ font-weight: 400;
3823
+ color: var(--_gray-900);
3824
+ line-height: 20px;
3825
+ }
3772
3826
 
3773
- .submitted {
3774
- font-size: 12px;
3775
- font-weight: 500;
3776
- line-height: 18px;
3777
- background: #eff8ff;
3778
- color: #0040c1;
3779
- display: inline-block;
3780
- height: 22px;
3781
- &::before {
3782
- content: "";
3827
+ .status {
3828
+ margin-left: 6px;
3829
+ padding: 2px 8px;
3830
+ border-radius: 4px;
3831
+ font-size: 12px;
3832
+ font-weight: 500;
3833
+ line-height: 18px;
3834
+
3835
+ display: inline-flex;
3836
+ align-items: center;
3837
+ gap: 8px;
3838
+ &::before {
3839
+ content: "";
3840
+ display: inline-block;
3841
+ width: 6px;
3842
+ height: 6px;
3843
+ border-radius: 50%;
3844
+ }
3845
+ &.success {
3846
+ background-color: var(--_success-200);
3847
+ &::before {
3848
+ background-color: var(--_success-700);
3849
+ }
3850
+ }
3851
+ &.failed {
3852
+ background-color: var(--_error-100);
3853
+ &::before {
3854
+ background-color: var(--_error-700);
3855
+ }
3856
+ }
3857
+ }
3858
+
3859
+ .link-button {
3860
+ color: #243dc6;
3861
+ font-size: 14px;
3862
+ font-weight: 400;
3863
+ line-height: 20px;
3864
+ }
3865
+
3866
+ .submitted {
3867
+ font-size: 12px;
3868
+ font-weight: 500;
3869
+ line-height: 18px;
3870
+ background: #eff8ff;
3871
+ color: #0040c1;
3783
3872
  display: inline-block;
3784
- width: 6px;
3785
- height: 6px;
3786
- background-color: #0040c1;
3787
- border-radius: 50%;
3788
- margin-right: 6px;
3789
- vertical-align: middle;
3790
- margin-top: -1px;
3873
+ height: 22px;
3874
+ &::before {
3875
+ content: "";
3876
+ display: inline-block;
3877
+ width: 6px;
3878
+ height: 6px;
3879
+ background-color: #0040c1;
3880
+ border-radius: 50%;
3881
+ margin-right: 6px;
3882
+ vertical-align: middle;
3883
+ margin-top: -1px;
3884
+ }
3791
3885
  }
3792
- }
3793
3886
 
3794
- .order-date {
3795
- font-size: 14px;
3796
- font-weight: 400;
3797
- color: var(--_gray-400);
3798
- line-height: 20px;
3799
- }
3887
+ .order-date {
3888
+ font-size: 14px;
3889
+ font-weight: 400;
3890
+ color: var(--_gray-400);
3891
+ line-height: 20px;
3892
+ }
3800
3893
 
3801
- .inclusive-tax {
3802
- margin-left: 4px;
3803
- font-size: 0.7rem;
3804
- color: #6b7280;
3894
+ .inclusive-tax {
3895
+ margin-left: 4px;
3896
+ font-size: 0.7rem;
3897
+ color: #6b7280;
3898
+ }
3805
3899
  }
3806
3900
  }
3807
3901
  }
3808
- }
3809
3902
 
3810
- .quick-actions {
3811
- display: flex;
3812
- flex-direction: column;
3813
- gap: 8px;
3814
- padding: 8px;
3815
- color: #243dc6;
3816
- .action-button {
3903
+ .quick-actions {
3904
+ display: flex;
3905
+ flex-direction: column;
3906
+ gap: 8px;
3817
3907
  padding: 8px;
3818
- font-size: 14px;
3819
- border-radius: 4px;
3820
- background: none;
3821
3908
  color: #243dc6;
3822
- cursor: pointer;
3823
- text-align: start;
3909
+ .action-button {
3910
+ padding: 8px;
3911
+ font-size: 14px;
3912
+ border-radius: 4px;
3913
+ background: none;
3914
+ color: #243dc6;
3915
+ cursor: pointer;
3916
+ text-align: start;
3824
3917
 
3825
- &:hover {
3826
- color: #0d60e5;
3918
+ &:hover {
3919
+ color: #0d60e5;
3920
+ }
3827
3921
  }
3828
3922
  }
3829
- }
3830
-
3831
- .cart-items {
3832
- h3 {
3833
- font-size: 14px;
3834
- color: #667085;
3835
- margin-bottom: 24px;
3836
- line-height: 20px;
3837
- font-weight: 400;
3838
- }
3839
3923
 
3840
- .items-grid {
3841
- display: grid;
3842
- grid-template-columns: repeat(3, 1fr);
3843
- gap: 24px;
3844
- margin-bottom: 24px;
3845
- }
3924
+ .cart-items {
3925
+ h3 {
3926
+ font-size: 14px;
3927
+ color: #667085;
3928
+ margin-bottom: 24px;
3929
+ line-height: 20px;
3930
+ font-weight: 400;
3931
+ }
3846
3932
 
3847
- .item-card {
3848
- gap: 12px;
3849
- display: flex;
3850
- align-items: flex-start;
3933
+ .items-grid {
3934
+ display: grid;
3935
+ grid-template-columns: repeat(3, 1fr);
3936
+ gap: 24px;
3937
+ margin-bottom: 24px;
3938
+ }
3851
3939
 
3852
- img {
3853
- width: 69px;
3854
- height: 80px;
3855
- object-fit: cover;
3856
- border-radius: 4px;
3940
+ .item-card {
3941
+ gap: 12px;
3857
3942
  display: flex;
3858
3943
  align-items: flex-start;
3859
- }
3860
3944
 
3861
- .item-details {
3862
- flex: 1;
3863
-
3864
- .item-name {
3865
- display: -webkit-box;
3866
- -webkit-line-clamp: 1;
3867
- -webkit-box-orient: vertical;
3868
- overflow: hidden;
3869
- text-overflow: ellipsis;
3870
- margin: 0 0 4px;
3871
- font-size: 14px;
3872
- font-weight: 600;
3873
- color: var(--_gray-900);
3874
- line-height: 20px;
3945
+ img {
3946
+ width: 69px;
3947
+ height: 80px;
3948
+ object-fit: cover;
3949
+ border-radius: 4px;
3950
+ display: flex;
3951
+ align-items: flex-start;
3875
3952
  }
3876
3953
 
3877
- .item-specs {
3878
- font-size: 12px;
3879
- color: #475467;
3880
- font-weight: 400;
3881
- }
3882
- .item-qty {
3883
- font-size: 12px;
3884
- font-weight: 400;
3885
- color: #475467;
3886
- span {
3954
+ .item-details {
3955
+ flex: 1;
3956
+
3957
+ .item-name {
3958
+ display: -webkit-box;
3959
+ -webkit-line-clamp: 1;
3960
+ -webkit-box-orient: vertical;
3961
+ overflow: hidden;
3962
+ text-overflow: ellipsis;
3963
+ margin: 0 0 4px;
3964
+ font-size: 14px;
3965
+ font-weight: 600;
3966
+ color: var(--_gray-900);
3967
+ line-height: 20px;
3968
+ }
3969
+
3970
+ .item-specs {
3971
+ font-size: 12px;
3972
+ color: #475467;
3973
+ font-weight: 400;
3974
+ }
3975
+ .item-qty {
3887
3976
  font-size: 12px;
3888
3977
  font-weight: 400;
3978
+ color: #475467;
3979
+ span {
3980
+ font-size: 12px;
3981
+ font-weight: 400;
3982
+ color: #101828;
3983
+ }
3984
+ }
3985
+ .estimated-delivery {
3986
+ margin: 0;
3987
+ font-size: 12px;
3988
+ color: var(--_gray-600);
3989
+ line-height: 18px;
3990
+ }
3991
+
3992
+ .delivery-date {
3993
+ margin: 0;
3994
+ font-size: 12px;
3995
+ font-weight: bold;
3889
3996
  color: #101828;
3890
3997
  }
3891
3998
  }
3892
- .estimated-delivery {
3893
- margin: 0;
3894
- font-size: 12px;
3895
- color: var(--_gray-600);
3896
- line-height: 18px;
3897
- }
3898
3999
 
3899
- .delivery-date {
3900
- margin: 0;
4000
+ .item-price {
3901
4001
  font-size: 12px;
3902
- font-weight: bold;
3903
- color: #101828;
4002
+ font-weight: 600;
4003
+ color: #1e293b;
4004
+ margin-left: 12px;
3904
4005
  }
3905
4006
  }
3906
4007
 
3907
- .item-price {
3908
- font-size: 12px;
3909
- font-weight: 600;
3910
- color: #1e293b;
3911
- margin-left: 12px;
3912
- }
3913
- }
3914
-
3915
- .show-more-wrapper {
3916
- margin: 32px 16px 16px 0px;
3917
- button {
3918
- padding: 12px 16px;
3919
- color: var(--_primary-400);
3920
- font-weight: 600;
3921
- border-radius: 6px;
3922
- &:hover {
3923
- background-color: var(--_primary-25);
4008
+ .show-more-wrapper {
4009
+ margin: 32px 16px 16px 0px;
4010
+ button {
4011
+ padding: 12px 16px;
4012
+ color: var(--_primary-400);
4013
+ font-weight: 600;
4014
+ border-radius: 6px;
4015
+ &:hover {
4016
+ background-color: var(--_primary-25);
4017
+ }
3924
4018
  }
3925
4019
  }
3926
4020
  }
3927
- }
3928
4021
 
3929
- .order-attributes {
3930
- border-top: 1px solid #eaecf0;
3931
- padding-top: 24px;
4022
+ .order-attributes {
4023
+ border-top: 1px solid #eaecf0;
4024
+ padding-top: 24px;
3932
4025
 
3933
- h4 {
3934
- font-size: 14px;
3935
- font-weight: 400;
3936
- color: var(--_gray-500);
3937
- line-height: 20px;
3938
- }
4026
+ h4 {
4027
+ font-size: 14px;
4028
+ font-weight: 400;
4029
+ color: var(--_gray-500);
4030
+ line-height: 20px;
4031
+ }
3939
4032
 
3940
- p {
3941
- font-size: 14px;
3942
- font-weight: 600;
3943
- line-height: 20px;
3944
- color: var(--_gray-900);
4033
+ p {
4034
+ font-size: 14px;
4035
+ font-weight: 600;
4036
+ line-height: 20px;
4037
+ color: var(--_gray-900);
4038
+ }
3945
4039
  }
3946
- }
3947
4040
 
3948
- @media (max-width: 768px) {
3949
- .order-details-wrapper {
3950
- grid-template-columns: 1fr;
3951
- }
4041
+ @media (max-width: 768px) {
4042
+ .order-details-wrapper {
4043
+ grid-template-columns: 1fr;
4044
+ }
3952
4045
 
3953
- .items-grid {
3954
- grid-template-columns: 1fr;
4046
+ .items-grid {
4047
+ grid-template-columns: 1fr;
4048
+ }
3955
4049
  }
3956
4050
  }
3957
4051
  }