@sc-360-v2/storefront-cms-library 0.4.1 → 0.4.3

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.
@@ -481,6 +481,450 @@ $resizeActive: '[data-cms-element-resizer="true"]';
481
481
  // padding: 1rem;
482
482
 
483
483
  .cart_item_wrapper {
484
+ .cart-item-attr-grid {
485
+ display: grid;
486
+ grid-template-columns: repeat(auto-fit, minmax(30%, 1fr));
487
+ gap: 1rem;
488
+ margin-top: 24px;
489
+ .attriTitle {
490
+ font-weight: 600;
491
+ font-size: 14px;
492
+ line-height: 20px;
493
+ color: #101828;
494
+ padding-bottom: 6px;
495
+ }
496
+ .attriDes {
497
+ font-weight: 400;
498
+ font-size: 14px;
499
+ line-height: 20px;
500
+ }
501
+ .attribute {
502
+ width: 100%;
503
+ display: flex;
504
+ flex-direction: column;
505
+ gap: 6px;
506
+ border: 1px solid var(--_gray-100);
507
+ border-radius: 4px;
508
+ padding: 10px;
509
+ .label {
510
+ display: block;
511
+ color: var(--_gray-700);
512
+ font-weight: 500;
513
+ font-size: 14px;
514
+ line-height: 20px;
515
+ &.required::after {
516
+ content: " *";
517
+ color: var(--_error-500);
518
+ }
519
+ }
520
+ .attribute_field {
521
+ width: 100% !important;
522
+ input {
523
+ background-color: var(--_base-white);
524
+ padding: 8px 12px;
525
+ border: 1px solid var(--_gray-300);
526
+ border-radius: 4px;
527
+ transition:
528
+ background-color 0.2s,
529
+ color 0.2s,
530
+ border-color 0.2s,
531
+ box-shadow 0.2s;
532
+ &::placeholder {
533
+ color: var(--_gray-500);
534
+ font-weight: 500;
535
+ font-size: 14px;
536
+ line-height: 24px;
537
+ }
538
+ &:focus {
539
+ outline: 0 none;
540
+ outline-offset: 0;
541
+ border-radius: 4px;
542
+ box-shadow:
543
+ 0px 1px 2px rgba(16, 24, 40, 0.05),
544
+ 0px 0px 0px 2px var(--primary-100);
545
+ border: 1px solid var(--primary-300);
546
+ }
547
+ }
548
+ .date_picker_container {
549
+ position: relative;
550
+ .svg_icon {
551
+ position: absolute;
552
+ left: 8px;
553
+ top: 9px;
554
+ }
555
+ .react-datepicker-wrapper {
556
+ .react-datepicker__input-container {
557
+ input {
558
+ padding-left: 32px !important;
559
+ }
560
+ }
561
+ }
562
+ }
563
+ .color-picker-container {
564
+ .custom_hex_color_picker_div {
565
+ margin-top: 8px;
566
+ label {
567
+ display: inline-block;
568
+ margin-bottom: 4px;
569
+ color: var(--_gray-700);
570
+ font-size: 14px;
571
+ font-weight: 500;
572
+ line-height: 20px;
573
+ }
574
+ }
575
+ .custom__div {
576
+ display: grid;
577
+ grid-template-columns: repeat(4, 1fr);
578
+ gap: 0;
579
+
580
+ label {
581
+ display: flex;
582
+ flex-direction: column;
583
+ color: var(--_gray-700);
584
+ font-size: 14px;
585
+ font-weight: 500;
586
+
587
+ input {
588
+ border: none;
589
+ border: 1px solid var(--_gray-300);
590
+ padding: 8px;
591
+ outline: none;
592
+ text-align: center;
593
+ border-radius: 0;
594
+ transition:
595
+ background-color 0.2s,
596
+ color 0.2s,
597
+ border-color 0.2s,
598
+ box-shadow 0.2s;
599
+
600
+ &:focus {
601
+ outline: 0 none;
602
+ outline-offset: 0;
603
+ border-radius: 4px;
604
+ box-shadow:
605
+ 0px 1px 2px rgba(16, 24, 40, 0.05),
606
+ 0px 0px 0px 2px var(--primary-100);
607
+ border: 1px solid var(--primary-300);
608
+ }
609
+ }
610
+
611
+ &:first-child input {
612
+ border-right: none;
613
+ border-top-left-radius: 4px;
614
+ border-bottom-left-radius: 4px;
615
+ }
616
+
617
+ &:last-child input {
618
+ border-left: none;
619
+ border-top-right-radius: 4px;
620
+ border-bottom-right-radius: 4px;
621
+ }
622
+
623
+ &:not(:first-child):not(:last-child) input {
624
+ border-radius: 0;
625
+ }
626
+ }
627
+ }
628
+ }
629
+ .attribute_form_field {
630
+ background-color: var(--_base-white);
631
+ padding: 8px 12px;
632
+ border: 1px solid var(--_gray-300);
633
+ border-radius: 4px;
634
+ height: 40px;
635
+ }
636
+ .attribute_text_area_field {
637
+ width: 100% !important;
638
+ transition:
639
+ background-color 0.2s,
640
+ color 0.2s,
641
+ border-color 0.2s,
642
+ box-shadow 0.2s;
643
+ &:focus {
644
+ outline: 0 none;
645
+ outline-offset: 0;
646
+ border-radius: 4px;
647
+ box-shadow:
648
+ 0px 1px 2px rgba(16, 24, 40, 0.05),
649
+ 0px 0px 0px 2px var(--primary-100);
650
+ border: 1px solid var(--primary-300);
651
+ }
652
+ }
653
+ .dropdown-input-section {
654
+ height: 40px;
655
+ background-color: var(--_base-white);
656
+ padding: 8px 12px;
657
+ border: 1px solid var(--_gray-300);
658
+ border-radius: 4px;
659
+ cursor: pointer;
660
+ transition:
661
+ background-color 0.2s,
662
+ color 0.2s,
663
+ border-color 0.2s,
664
+ box-shadow 0.2s;
665
+ &::placeholder {
666
+ color: var(--_gray-500);
667
+ font-weight: 500;
668
+ font-size: 14px;
669
+ line-height: 24px;
670
+ }
671
+ &:focus-within {
672
+ outline: 0 none;
673
+ outline-offset: 0;
674
+ border-radius: 4px;
675
+ box-shadow:
676
+ 0px 1px 2px rgba(16, 24, 40, 0.05),
677
+ 0px 0px 0px 2px var(--primary-100);
678
+ border: 1px solid var(--primary-300);
679
+ }
680
+ input {
681
+ border: none;
682
+ padding: 0;
683
+ &:focus {
684
+ box-shadow: none;
685
+ border: none;
686
+ }
687
+ }
688
+ .dropdown__icon {
689
+ .icon {
690
+ transition: rotate 0.4s ease-in-out;
691
+ }
692
+ }
693
+ }
694
+ &:focus {
695
+ border-color: var(--_primary-400);
696
+ outline: 2px solid var(--_primary-200);
697
+ }
698
+ &.error {
699
+ border-color: #dc2626;
700
+ background-color: #fef2f2;
701
+ }
702
+ .react-datepicker-wrapper {
703
+ width: 100%;
704
+ .react-datepicker__close-icon::after {
705
+ background-color: transparent;
706
+ font-size: 25px;
707
+ color: var(--_gray-500);
708
+ }
709
+ }
710
+ .custom-upload {
711
+ display: flex;
712
+ // flex-direction: column;
713
+ align-items: center;
714
+ align-self: stretch;
715
+ position: relative;
716
+ padding: 16px;
717
+ gap: 12px;
718
+ background-color: var(--_base-white);
719
+ border: 1px solid var(--_gray-300);
720
+ border-radius: 4px;
721
+ .clear_upload_icon {
722
+ // display: none;
723
+ width: 30px;
724
+ height: 30px;
725
+ // position: absolute;
726
+ // right: 0;
727
+ background: #fff;
728
+ border-radius: 50%;
729
+ margin-top: 3px;
730
+ padding: 3px;
731
+ .svg_icon {
732
+ // position: absolute;
733
+ // top: 4px;
734
+ // left: 5px;
735
+ svg {
736
+ width: 20px;
737
+ height: 20px;
738
+ }
739
+ }
740
+ &:hover {
741
+ .svg_icon {
742
+ svg {
743
+ path {
744
+ stroke: var(--_error-500);
745
+ }
746
+ }
747
+ }
748
+ }
749
+ }
750
+ .preview_image {
751
+ display: flex;
752
+ align-items: center;
753
+ gap: 8px;
754
+ img {
755
+ width: 40px;
756
+ height: 40px;
757
+
758
+ border-radius: 50%;
759
+ }
760
+ p {
761
+ color: var(--_gray-700);
762
+ font-size: 14px;
763
+ font-weight: 400;
764
+ line-height: 150%;
765
+ display: -webkit-box;
766
+ -webkit-box-orient: vertical;
767
+ -webkit-line-clamp: 1;
768
+ overflow: hidden;
769
+ }
770
+ }
771
+ &:hover {
772
+ .clear_upload_icon {
773
+ display: block;
774
+ }
775
+ }
776
+ .file_upload_text {
777
+ text-align: center;
778
+ display: flex;
779
+ flex-direction: column;
780
+ gap: 4px;
781
+ p {
782
+ strong {
783
+ color: var(--_primary-400);
784
+ font-size: 14px;
785
+ font-weight: 600;
786
+ line-height: 150%;
787
+ }
788
+ }
789
+ span {
790
+ color: var(--_gray-600);
791
+ font-size: 12px;
792
+ font-weight: 400;
793
+ line-height: 150%;
794
+ }
795
+ }
796
+ .uploadicon {
797
+ // padding: 10px;
798
+ // background: #f2f4f7;
799
+ display: inline-block;
800
+ // border-radius: 50%;
801
+ // color: var(--_gray-600);
802
+ }
803
+ .preview_file {
804
+ display: flex;
805
+ align-items: center;
806
+ gap: 8px;
807
+ .file_extension {
808
+ color: var(--_gray-700);
809
+ font-size: 14px;
810
+ font-weight: 400;
811
+ line-height: 150%;
812
+ display: -webkit-box;
813
+ -webkit-box-orient: vertical;
814
+ -webkit-line-clamp: 1;
815
+ overflow: hidden;
816
+ }
817
+ }
818
+ }
819
+ .has-file {
820
+ justify-content: space-between;
821
+ }
822
+ }
823
+
824
+ .input_percent_a {
825
+ position: relative;
826
+ .svg_icon {
827
+ position: absolute;
828
+ top: 12px;
829
+ right: 10px;
830
+ background-color: var(--_base-white);
831
+ }
832
+ }
833
+ // toggle styles
834
+ .input_toggle_switch_container {
835
+ display: flex;
836
+ gap: 10px;
837
+ padding: 16px;
838
+ .input_toggle_switch {
839
+ position: relative;
840
+ display: inline-block;
841
+ width: 68px;
842
+ height: 24px;
843
+
844
+ input[type="checkbox"] {
845
+ opacity: 0;
846
+ width: 0;
847
+ height: 0;
848
+
849
+ &:checked + .slider {
850
+ background-color: var(--_primary-700);
851
+
852
+ &::before {
853
+ transform: translateX(17px);
854
+ }
855
+ }
856
+ }
857
+
858
+ .slider {
859
+ position: absolute;
860
+ cursor: pointer;
861
+ top: 0;
862
+ left: 0;
863
+ right: 0;
864
+ bottom: 0;
865
+ background-color: #ccc;
866
+ transition: 0.4s;
867
+ border-radius: 28px;
868
+
869
+ &::before {
870
+ position: absolute;
871
+ content: "";
872
+ height: 20px;
873
+ width: 20px;
874
+ left: 3px;
875
+ bottom: 2px;
876
+ background-color: white;
877
+ border-radius: 50%;
878
+ transition: 0.4s;
879
+ }
880
+ }
881
+ }
882
+ .input_toggle_switch_text {
883
+ gap: 2px;
884
+ display: flex;
885
+ flex-direction: column;
886
+ .checkbox_title {
887
+ color: var(--_gray-700);
888
+ font-size: 16px;
889
+ font-weight: 500;
890
+ line-height: 24px;
891
+ }
892
+ .checkbox_des {
893
+ color: var(--_gray-600);
894
+ font-size: 16px;
895
+ font-weight: 400;
896
+ line-height: 24px;
897
+ }
898
+ }
899
+ &.active {
900
+ border: 1px solid var(--_primary-500);
901
+ border-radius: 4px;
902
+ background: var(--_primary-25);
903
+ }
904
+ }
905
+ }
906
+ .error-text {
907
+ font-size: 12px;
908
+ color: var(--_error-500);
909
+ }
910
+ .text_area_attribute {
911
+ width: 100%;
912
+ .input_textarea_a {
913
+ width: 100%;
914
+ }
915
+ }
916
+ .cart_item_attr_disabled {
917
+ pointer-events: none;
918
+
919
+ opacity: 0.5;
920
+ cursor: auto;
921
+ }
922
+
923
+ // .attr-grid-item input {
924
+ // border: 1px solid#000 !important;
925
+ // height: 40px;
926
+ // }
927
+ }
484
928
  border-radius: 4px;
485
929
  box-shadow: var(--_ctm-dn-ct-im-ss-sw-ae) var(--_ctm-dn-ct-im-ss-sw-br)
486
930
  var(--_ctm-dn-ct-im-ss-sw-sd) var(--_ctm-dn-ct-im-ss-sw-cr);
@@ -880,7 +1324,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
880
1324
  flex-direction: column;
881
1325
  align-items: flex-start;
882
1326
  gap: 6px;
883
- width: 120px;
1327
+ width: 113px;
884
1328
 
885
1329
  .product_qty_container {
886
1330
  display: flex;
@@ -903,19 +1347,41 @@ $resizeActive: '[data-cms-element-resizer="true"]';
903
1347
  line-height: 24px;
904
1348
  }
905
1349
  }
906
-
907
- .product_qty_number {
1350
+ .product_qty_input_container {
1351
+ height: 40px;
908
1352
  display: flex;
909
- padding: 8px 12px;
910
- align-items: center;
911
- gap: 8px;
912
- flex: 1 0 0;
913
- align-self: stretch;
1353
+ position: relative;
1354
+ max-width: 55px;
914
1355
  border-radius: 0px 4px 4px 0px;
915
1356
  background: #fff;
916
1357
  border-left: 1px solid #d0d5dd;
917
- max-width: 80px;
1358
+ padding: 8px 12px;
1359
+ .svg_icon {
1360
+ position: absolute;
1361
+ top: 8px;
1362
+ right: 0px;
1363
+ g {
1364
+ rect {
1365
+ fill: var(--_gray-500);
1366
+ width: 10px;
1367
+ height: 10px;
1368
+ }
1369
+ }
1370
+ }
1371
+ }
1372
+ .product_qty_number {
1373
+ // display: flex;
1374
+ // padding: 8px 12px;
1375
+ align-items: center;
1376
+ // gap: 8px;
1377
+ // flex: 1 0 0;
1378
+ // align-self: stretch;
1379
+ // border-radius: 0px 4px 4px 0px;
1380
+ // background: #fff;
1381
+ // border-left: 1px solid #d0d5dd;
1382
+ // max-width: 80px;
918
1383
  text-align: center;
1384
+ width: 75%;
919
1385
  &::-webkit-outer-spin-button,
920
1386
  &::-webkit-inner-spin-button {
921
1387
  -webkit-appearance: none;
@@ -1776,20 +2242,6 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1776
2242
  // }
1777
2243
  // }
1778
2244
 
1779
- .cart-item-attr-grid {
1780
- display: grid;
1781
- grid-template-columns: repeat(auto-fit, minmax(30%, 1fr));
1782
- gap: 1rem;
1783
- margin-top: 24px;
1784
-
1785
- .attr-grid-item {
1786
- padding: 1rem;
1787
- border: 1px solid var(--_gray-200);
1788
- border-radius: 6px;
1789
- background-color: var(--_base-white);
1790
- }
1791
- }
1792
-
1793
2245
  // cart wrapper styles
1794
2246
 
1795
2247
  .wrapper {
@@ -1032,6 +1032,7 @@ $resizeActive: '[data-cms-element-resizer="true"]';
1032
1032
  --_ctm-mob-dn-pt-wt-pt-pe-pg,
1033
1033
  var(--_ctm-tab-dn-pt-wt-pt-pe-pg, var(--_ctm-dn-pt-wt-pt-pe-pg))
1034
1034
  );
1035
+ margin-top: 2px;
1035
1036
  }
1036
1037
  .cart_summary_product_text {
1037
1038
  font-family: var(
package/dist/faq.scss CHANGED
@@ -194,9 +194,12 @@
194
194
  --_ctm-mob-dn-cd-an-im-bd-cr,
195
195
  var(--_ctm-tab-dn-cd-an-im-bd-cr, var(--_ctm-dn-cd-an-im-bd-cr))
196
196
  );
197
+ padding: var(
198
+ --_ctm-mob-dn-cd-an-im-pg-te,
199
+ var(--_ctm-tab-dn-cd-an-im-pg-te, var(--_ctm-dn-cd-an-im-pg-te))
200
+ );
197
201
 
198
202
  p {
199
- // padding-inline: var(--_sf-cd-gp);
200
203
  color: var(
201
204
  --_ctm-mob-dn-cd-an-im-cr,
202
205
  var(--_ctm-tab-dn-cd-an-im-cr, var(--_ctm-dn-cd-an-im-cr))
@@ -344,6 +347,10 @@
344
347
  --_ctm-mob-dn-ed-an-im-bd-cr,
345
348
  var(--_ctm-tab-dn-ed-an-im-bd-cr, var(--_ctm-dn-ed-an-im-bd-cr))
346
349
  );
350
+ padding: var(
351
+ --_ctm-mob-dn-ed-an-im-pg-te,
352
+ var(--_ctm-tab-dn-ed-an-im-pg-te, var(--_ctm-dn-ed-an-im-pg-te))
353
+ );
347
354
 
348
355
  color: var(
349
356
  --_ctm-mob-dn-ed-an-im-cr,
@@ -414,6 +421,10 @@
414
421
  --_ctm-mob-dn-ed-an-im-bd-cr-dc,
415
422
  var(--_ctm-tab-dn-ed-an-im-bd-cr-dc, var(--_ctm-dn-ed-an-im-bd-cr-dc))
416
423
  );
424
+ padding: var(
425
+ --_ctm-mob-dn-ed-an-im-pg-dc,
426
+ var(--_ctm-tab-dn-ed-an-im-pg-dc, var(--_ctm-dn-ed-an-im-pg-dc))
427
+ );
417
428
 
418
429
  color: var(
419
430
  --_ctm-mob-dn-ed-an-im-cr-dc,