@wizco/fenixds-core 1.0.19 → 1.0.21

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 (4) hide show
  1. package/package.json +1 -1
  2. package/styles/core.css +244 -61
  3. package/styles/scss/forms.scss +124 -29
  4. package/styles/scss/variables.scss +34 -34
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@wizco/fenixds-core",
3
3
  "description": "Fenix design system é um produto da Wiz com ativos de design e código de front-end para ajudar as equipes na criação dos seus produtos.",
4
- "version": "1.0.19",
4
+ "version": "1.0.21",
5
5
  "private": false,
6
6
  "sideEffects": false,
7
7
  "author": "Raul Melo Fernandez",
package/styles/core.css CHANGED
@@ -19,43 +19,43 @@
19
19
  --wco-color-secondary-600: #844597;
20
20
  --wco-color-secondary-700: #633471;
21
21
  --wco-color-secondary-900: #42234b;
22
- --wco-color-neutral-50: #fcfcfc;
22
+ --wco-color-neutral-50: #FCFCFC;
23
23
  --wco-color-neutral-100: #E9EBEC;
24
24
  --wco-color-neutral-300: #C3C8CC;
25
- --wco-color-neutral-500: #8d9399;
26
- --wco-color-neutral-600: #6d747a;
27
- --wco-color-neutral-700: #50555a;
25
+ --wco-color-neutral-500: #8D9399;
26
+ --wco-color-neutral-600: #6D747A;
27
+ --wco-color-neutral-700: #50555A;
28
28
  --wco-color-neutral-900: #080809;
29
- --wco-color-bg: #eeebef;
30
- --wco-color-panel: #fcfcfc;
31
- --wco-color-success-50: #e9f5e9;
32
- --wco-color-success-100: #c0e0c0;
33
- --wco-color-success-300: #8ac88a;
34
- --wco-color-success-500: #5cb85c;
35
- --wco-color-success-600: #4ca74c;
36
- --wco-color-success-700: #3c963c;
37
- --wco-color-success-900: #1e6b1e;
38
- --wco-color-warning-50: #fff8e5;
39
- --wco-color-warning-100: #ffe6b3;
40
- --wco-color-warning-300: #ffc266;
41
- --wco-color-warning-500: #ffb84d;
42
- --wco-color-warning-600: #ffa833;
43
- --wco-color-warning-700: #ff981a;
44
- --wco-color-warning-900: #804d00;
45
- --wco-color-danger-50: #fcedee;
46
- --wco-color-danger-100: #f6cdd0;
47
- --wco-color-danger-300: #ee8f94;
48
- --wco-color-danger-500: #e85f58;
49
- --wco-color-danger-600: #e13f38;
50
- --wco-color-danger-700: #db1f18;
51
- --wco-color-danger-900: #80100a;
52
- --wco-color-info-50: #e5f5ff;
53
- --wco-color-info-100: #b3e0ff;
54
- --wco-color-info-300: #66b8ff;
55
- --wco-color-info-500: #4da6ff;
56
- --wco-color-info-600: #3394ff;
57
- --wco-color-info-700: #1a82ff;
58
- --wco-color-info-900: #004d80;
29
+ --wco-color-bg: #EEEBEF;
30
+ --wco-color-panel: #FCFCFC;
31
+ --wco-color-success-50: #DAFFE2;
32
+ --wco-color-success-100: #A1E5B0;
33
+ --wco-color-success-300: #43BF5E;
34
+ --wco-color-success-500: #008C1F;
35
+ --wco-color-success-600: #007019;
36
+ --wco-color-success-700: #005413;
37
+ --wco-color-success-900: #00380C;
38
+ --wco-color-warning-50: #FEF7EB;
39
+ --wco-color-warning-100: #FCE6C4;
40
+ --wco-color-warning-300: #F8BD63;
41
+ --wco-color-warning-500: #F6AC3C;
42
+ --wco-color-warning-600: #B06D08;
43
+ --wco-color-warning-700: #754905;
44
+ --wco-color-warning-900: #3B2403;
45
+ --wco-color-danger-50: #FEE4E4;
46
+ --wco-color-danger-100: #FC9393;
47
+ --wco-color-danger-300: #F94242;
48
+ --wco-color-danger-500: #E00707;
49
+ --wco-color-danger-600: #9D0505;
50
+ --wco-color-danger-700: #700404;
51
+ --wco-color-danger-900: #430202;
52
+ --wco-color-info-50: #E8F1FB;
53
+ --wco-color-info-100: #BBD5F4;
54
+ --wco-color-info-300: #5F9EE6;
55
+ --wco-color-info-500: #2072D1;
56
+ --wco-color-info-600: #175296;
57
+ --wco-color-info-700: #103A6B;
58
+ --wco-color-info-900: #0A2340;
59
59
  --wco-font-size-xxxs: 12px;
60
60
  --wco-font-size-xxs: 14px;
61
61
  --wco-font-size-xs: 16px;
@@ -620,7 +620,8 @@ a.btn {
620
620
  background-color: var(--wco-color-panel);
621
621
  width: 100%; }
622
622
 
623
- .form-field {
623
+ .form-field,
624
+ .wco-form-field {
624
625
  --wco-input-color-label: var(--wco-color-neutral-700, #50555a);
625
626
  --wco-input-color-outline: var(--wco-color-neutral-500, #8d9399);
626
627
  --wco-input-color-icon: var(--wco-color-primary-600, #bf5600);
@@ -634,24 +635,39 @@ a.btn {
634
635
  --wco-input-color-required: var(--wco-color-danger-600, #e00707);
635
636
  --wco-input-color-helptext: var(--wco-color-neutral-900, #6d747a);
636
637
  --wco-input-font: var(--wco-font-family, 'Figtree', sans-serif);
637
- --wco-input-padding: 16px; }
638
+ --wco-input-padding: 16px;
639
+ --wco-input-min-height: 48px; }
638
640
 
641
+ .wco-form-field,
639
642
  .form-field * {
640
643
  box-sizing: border-box; }
641
644
 
645
+ .wco-form-field,
642
646
  .form-field {
643
647
  display: flex;
644
648
  position: relative;
645
649
  accent-color: var(--wco-input-color-text);
646
650
  transition: box-shadow 300ms ease-in-out, border-color 300ms ease-in-out; }
651
+ .wco-form-field:has(select:required) label::after,
652
+ .wco-form-field input:required + label::after,
653
+ .wco-form-field textarea:required + label::after,
654
+ .wco-form-field input:invalid:not(:placeholder-shown):required + label,
655
+ .form-field:has(select:required) label::after,
647
656
  .form-field input:required + label::after,
648
657
  .form-field textarea:required + label::after,
649
658
  .form-field input:invalid:not(:placeholder-shown):required + label {
650
659
  content: " *";
651
660
  color: var(--wco-input-color-required); }
661
+ .wco-form-field .form-field__input,
662
+ .wco-form-field .form-field__textarea,
663
+ .wco-form-field input,
664
+ .wco-form-field textarea,
665
+ .wco-form-field select,
652
666
  .form-field .form-field__input,
653
667
  .form-field .form-field__textarea,
654
- .form-field .form-field__select {
668
+ .form-field input,
669
+ .form-field textarea,
670
+ .form-field select {
655
671
  border: var(--wco-input-border);
656
672
  border-radius: var(--wco-input-radius);
657
673
  font-size: var(--wco-input-size, 16px);
@@ -666,37 +682,97 @@ a.btn {
666
682
  outline: none;
667
683
  width: 100%;
668
684
  background-color: var(--wco-input-color-bg); }
685
+ .wco-form-field .form-field__input::placeholder,
686
+ .wco-form-field .form-field__textarea::placeholder,
687
+ .wco-form-field input::placeholder,
688
+ .wco-form-field textarea::placeholder,
689
+ .wco-form-field select::placeholder,
669
690
  .form-field .form-field__input::placeholder,
670
691
  .form-field .form-field__textarea::placeholder,
671
- .form-field .form-field__select::placeholder {
692
+ .form-field input::placeholder,
693
+ .form-field textarea::placeholder,
694
+ .form-field select::placeholder {
672
695
  color: var(--wco-input-color-placeholder);
673
696
  font-family: var(--wco-font-family); }
674
- .form-field .form-field__input:invalid:not(:placeholder-shown), .form-field .form-field__input.form-field--error:not(:placeholder-shown),
697
+ .wco-form-field .form-field__input:invalid:not(:placeholder-shown), .wco-form-field .form-field__input.wco-form-field--error:not(:placeholder-shown), .wco-form-field .form-field__input.form-field--error:not(:placeholder-shown), .wco-form-field .form-field__input.form--error:not(:placeholder-shown),
698
+ .wco-form-field .form-field__textarea:invalid:not(:placeholder-shown),
699
+ .wco-form-field .form-field__textarea.wco-form-field--error:not(:placeholder-shown),
700
+ .wco-form-field .form-field__textarea.form-field--error:not(:placeholder-shown),
701
+ .wco-form-field .form-field__textarea.form--error:not(:placeholder-shown),
702
+ .wco-form-field input:invalid:not(:placeholder-shown),
703
+ .wco-form-field input.wco-form-field--error:not(:placeholder-shown),
704
+ .wco-form-field input.form-field--error:not(:placeholder-shown),
705
+ .wco-form-field input.form--error:not(:placeholder-shown),
706
+ .wco-form-field textarea:invalid:not(:placeholder-shown),
707
+ .wco-form-field textarea.wco-form-field--error:not(:placeholder-shown),
708
+ .wco-form-field textarea.form-field--error:not(:placeholder-shown),
709
+ .wco-form-field textarea.form--error:not(:placeholder-shown),
710
+ .wco-form-field select:invalid:not(:placeholder-shown),
711
+ .wco-form-field select.wco-form-field--error:not(:placeholder-shown),
712
+ .wco-form-field select.form-field--error:not(:placeholder-shown),
713
+ .wco-form-field select.form--error:not(:placeholder-shown),
714
+ .form-field .form-field__input:invalid:not(:placeholder-shown),
715
+ .form-field .form-field__input.wco-form-field--error:not(:placeholder-shown),
716
+ .form-field .form-field__input.form-field--error:not(:placeholder-shown),
717
+ .form-field .form-field__input.form--error:not(:placeholder-shown),
675
718
  .form-field .form-field__textarea:invalid:not(:placeholder-shown),
719
+ .form-field .form-field__textarea.wco-form-field--error:not(:placeholder-shown),
676
720
  .form-field .form-field__textarea.form-field--error:not(:placeholder-shown),
677
- .form-field .form-field__select:invalid:not(:placeholder-shown),
678
- .form-field .form-field__select.form-field--error:not(:placeholder-shown) {
721
+ .form-field .form-field__textarea.form--error:not(:placeholder-shown),
722
+ .form-field input:invalid:not(:placeholder-shown),
723
+ .form-field input.wco-form-field--error:not(:placeholder-shown),
724
+ .form-field input.form-field--error:not(:placeholder-shown),
725
+ .form-field input.form--error:not(:placeholder-shown),
726
+ .form-field textarea:invalid:not(:placeholder-shown),
727
+ .form-field textarea.wco-form-field--error:not(:placeholder-shown),
728
+ .form-field textarea.form-field--error:not(:placeholder-shown),
729
+ .form-field textarea.form--error:not(:placeholder-shown),
730
+ .form-field select:invalid:not(:placeholder-shown),
731
+ .form-field select.wco-form-field--error:not(:placeholder-shown),
732
+ .form-field select.form-field--error:not(:placeholder-shown),
733
+ .form-field select.form--error:not(:placeholder-shown) {
679
734
  --input-border: 1px solid var(--input-color-error);
680
735
  --input-shadow: 0px 2px 0px 1px var(--input-color-error);
681
736
  color: var(--input-color-error); }
737
+ .wco-form-field .form-field__input.input-sm,
738
+ .wco-form-field .form-field__textarea.input-sm,
739
+ .wco-form-field input.input-sm,
740
+ .wco-form-field textarea.input-sm,
741
+ .wco-form-field select.input-sm,
682
742
  .form-field .form-field__input.input-sm,
683
743
  .form-field .form-field__textarea.input-sm,
684
- .form-field .form-field__select.input-sm {
744
+ .form-field input.input-sm,
745
+ .form-field textarea.input-sm,
746
+ .form-field select.input-sm {
685
747
  height: 32px; }
748
+ .wco-form-field .form-field__input.input-md,
749
+ .wco-form-field .form-field__textarea.input-md,
750
+ .wco-form-field input.input-md,
751
+ .wco-form-field textarea.input-md,
752
+ .wco-form-field select.input-md,
686
753
  .form-field .form-field__input.input-md,
687
754
  .form-field .form-field__textarea.input-md,
688
- .form-field .form-field__select.input-md {
755
+ .form-field input.input-md,
756
+ .form-field textarea.input-md,
757
+ .form-field select.input-md {
689
758
  height: 40px; }
759
+ .wco-form-field .form-field__input.input-lg,
760
+ .wco-form-field .form-field__textarea.input-lg,
761
+ .wco-form-field input.input-lg,
762
+ .wco-form-field textarea.input-lg,
763
+ .wco-form-field select.input-lg,
690
764
  .form-field .form-field__input.input-lg,
691
765
  .form-field .form-field__textarea.input-lg,
692
- .form-field .form-field__select.input-lg {
766
+ .form-field input.input-lg,
767
+ .form-field textarea.input-lg,
768
+ .form-field select.input-lg {
693
769
  height: 48px; }
770
+ .wco-form-field label,
694
771
  .form-field label {
695
772
  position: absolute;
696
773
  left: 0;
697
774
  top: 50%;
698
775
  transform: translateY(-50%);
699
- background-image: linear-gradient(0deg, var(--wco-input-color-bg, #fff) 11px, rgba(93, 118, 137, 0) 44%);
700
776
  color: var(--wco-input-color-label);
701
777
  font-family: var(--wco-input-font);
702
778
  font-size: var(--wco-input-size);
@@ -706,6 +782,18 @@ a.btn {
706
782
  transition: 100ms linear;
707
783
  transform-origin: left top;
708
784
  pointer-events: none; }
785
+ .wco-form-field label::before,
786
+ .form-field label::before {
787
+ content: '';
788
+ position: absolute;
789
+ top: calc(50% - -2px);
790
+ z-index: -1;
791
+ left: 0;
792
+ transform: translateY(-50%);
793
+ width: 100%;
794
+ height: 4px;
795
+ background-color: var(--wco-input-color-bg); }
796
+ .wco-form-field:has(input:focus, textarea:focus, select:focus),
709
797
  .form-field:has(input:focus, textarea:focus, select:focus) {
710
798
  --wco-input-color-label: var(--wco-color-primary-700);
711
799
  --wco-input-color-outline: var(--wco-color-primary-600);
@@ -713,71 +801,113 @@ a.btn {
713
801
  --wco-input-color-text: var(--wco-color-neutral-900);
714
802
  --wco-input-color-placeholder: var(--wco-color-neutral-600);
715
803
  --wco-input-shadow: inset 0px 0px 0px 1px var(--wco-input-color-outline); }
804
+ .wco-form-field:hover,
716
805
  .form-field:hover {
717
806
  --wco-input-color-label: var(--wco-color-neutral-700, #50555a);
718
807
  --wco-input-color-outline: var(--wco-color-neutral-900, #8d9399); }
719
- .form-field:has(input:disabled, textarea:disabled, select:disabled, .form-field__input.form-field--disabled) {
808
+ .wco-form-field:has(
809
+ input:disabled,
810
+ textarea:disabled,
811
+ select:disabled,
812
+ .form-field__input.form-field--disabled), .wco-form-field.form-disabled,
813
+ .form-field:has(
814
+ input:disabled,
815
+ textarea:disabled,
816
+ select:disabled,
817
+ .form-field__input.form-field--disabled),
818
+ .form-field.form-disabled {
720
819
  --wco-input-color-label: var(--wco-color-neutral-500, #C3C8CC);
721
820
  --wco-input-color-outline: var(--wco-color-neutral-300, #C3C8CC);
722
821
  --wco-input-color-icon: var(--wco-color-neutral-300, #C3C8CC);
723
822
  --wco-input-color-text: var(--wco-color-neutral-600, #C3C8CC);
724
823
  --wco-input-color-placeholder: var(--wco-color-neutral-300, #C3C8CC);
725
824
  --wco-input-color-bg: var(--wco-color-neutral-100, #E9EBEC); }
825
+ .wco-form-field:has(
826
+ input:read-only:not(:disabled),
827
+ textarea:read-only:not(:disabled)
828
+ ),
829
+ .wco-form-field .form--readonly:not(.form-field--disabled),
830
+ .wco-form-field .form-field--readonly:not(.form-field--disabled),
726
831
  .form-field:has(
727
832
  input:read-only:not(:disabled),
728
- textarea:read-only:not(:disabled),
729
- select:read-only:not(:disabled)
833
+ textarea:read-only:not(:disabled)
730
834
  ),
835
+ .form-field .form--readonly:not(.form-field--disabled),
731
836
  .form-field .form-field--readonly:not(.form-field--disabled) {
732
837
  --wco-input-color-label: var(--wco-color-neutral-600, #C3C8CC);
733
838
  --wco-input-color-outline: var(--wco-color-neutral-500, #C3C8CC);
734
839
  --wco-input-color-icon: var(--wco-color-neutral-300, #C3C8CC);
735
840
  --wco-input-color-text: var(--wco-color-neutral-900, #C3C8CC);
736
841
  --wco-input-color-bg: var(--wco-color-neutral-50, #E9EBEC); }
737
- .form-field.form-field--error:not(:placeholder-shown) ~ label, .form-field.form-field--error, .form-field:has(input:is(:placeholder-shown):invalid), .form-field:has(.form-field--error) {
842
+ .wco-form-field.form-field--error:not(:placeholder-shown) ~ label,
843
+ .wco-form-field.form--error:not(:placeholder-shown) ~ label, .wco-form-field.form-field--error, .wco-form-field:has(input:is(:placeholder-shown):invalid), .wco-form-field:has(.form-field--error), .wco-form-field.form--error,
844
+ .form-field.form-field--error:not(:placeholder-shown) ~ label,
845
+ .form-field.form--error:not(:placeholder-shown) ~ label,
846
+ .form-field.form-field--error,
847
+ .form-field:has(input:is(:placeholder-shown):invalid),
848
+ .form-field:has(.form-field--error),
849
+ .form-field.form--error {
738
850
  --wco-input-color-label: var(--wco-color-danger-600, #e00707);
739
851
  --wco-input-color-outline: var(--wco-color-danger-600, #e00707);
740
852
  --wco-input-color-icon: var(--wco-color-danger-600, #e00707);
741
853
  --wco-input-color-text: var(--wco-color-neutral-900, #e00707);
742
854
  --wco-input-shadow: inset 0px 0px 0px 1px var(--wco-input-color-outline); }
855
+ .wco-form-field textarea ~ label,
743
856
  .form-field textarea ~ label {
744
857
  top: 16px;
745
858
  transform: translateY(0); }
746
- .form-field select[value=""]:focus + label,
859
+ .wco-form-field:has(select) label,
860
+ .wco-form-field textarea:focus + label,
861
+ .wco-form-field input:focus + label,
862
+ .wco-form-field .readonly + label,
863
+ .form-field:has(select) label,
747
864
  .form-field textarea:focus + label,
748
865
  .form-field input:focus + label,
749
866
  .form-field .readonly + label {
750
867
  color: var(--wco-input-color-label);
751
868
  top: 0;
752
869
  transform: translateY(-50%) translateX(-10px) scale(0.9) !important; }
753
- .form-field select:not([value=""]) ~ label,
870
+ .wco-form-field textarea:not(:placeholder-shown) + label,
871
+ .wco-form-field input:not(:placeholder-shown) + label,
872
+ .wco-form-field .readonly + label,
754
873
  .form-field textarea:not(:placeholder-shown) + label,
755
874
  .form-field input:not(:placeholder-shown) + label,
756
875
  .form-field .readonly + label {
757
876
  top: 0;
758
877
  transform: translateY(-50%) translateX(-10px) scale(0.9) !important;
759
878
  font-weight: 500; }
879
+ .wco-form-field textarea:not(:focus)::placeholder,
880
+ .wco-form-field input:not(:focus)::placeholder,
760
881
  .form-field textarea:not(:focus)::placeholder,
761
882
  .form-field input:not(:focus)::placeholder {
762
883
  opacity: 0; }
884
+ .wco-form-field > span:first-child,
763
885
  .form-field > span:first-child {
764
886
  position: absolute;
765
887
  top: 50%;
766
888
  left: 12px;
767
889
  transform: translateY(-50%);
768
890
  color: var(--wco-input-color-icon); }
891
+ .wco-form-field > span ~ .form-field__input + label,
892
+ .wco-form-field > span ~ .form-field__select + label,
769
893
  .form-field > span ~ .form-field__input + label,
770
894
  .form-field > span ~ .form-field__select + label {
771
895
  margin-left: 44px; }
896
+ .wco-form-field > span ~ .form-field__select,
897
+ .wco-form-field > span ~ .form-field__input,
772
898
  .form-field > span ~ .form-field__select,
773
899
  .form-field > span ~ .form-field__input {
774
900
  padding-left: 44px; }
901
+ .wco-form-field > .form-field__select + label + span,
902
+ .wco-form-field > .form-field__input + label + span,
775
903
  .form-field > .form-field__select + label + span,
776
904
  .form-field > .form-field__input + label + span {
777
905
  position: absolute;
778
906
  top: 50%;
779
907
  right: 12px;
780
908
  transform: translateY(-50%); }
909
+ .wco-form-field > .form-field__select + label + span::before,
910
+ .wco-form-field > .form-field__input + label + span::before,
781
911
  .form-field > .form-field__select + label + span::before,
782
912
  .form-field > .form-field__input + label + span::before {
783
913
  content: '';
@@ -785,17 +915,68 @@ a.btn {
785
915
  top: 2px;
786
916
  width: 30px;
787
917
  height: 30px; }
788
- .form-field.form-field--suffixe label + span {
789
- color: var(--wco-input-color-icon); }
790
- .form-field.form-field--suffixe > .form-field__select,
791
- .form-field.form-field--suffixe > .form-field__input {
792
- padding-right: 44px; }
793
- .form-field .form-field__select {
918
+ .wco-form-field.form--sm,
919
+ .form-field.form--sm {
920
+ --wco-input-min-height: 32px; }
921
+ .wco-form-field.form--md,
922
+ .form-field.form--md {
923
+ --wco-input-min-height: 40px; }
924
+ .wco-form-field.form--lg,
925
+ .form-field.form--lg {
926
+ --wco-input-min-height: 48px; }
927
+ .wco-form-field:has(select) label,
928
+ .form-field:has(select) label {
929
+ z-index: 1; }
930
+ .wco-form-field:has(select) select,
931
+ .wco-form-field:has(select) select.form-field__select,
932
+ .form-field:has(select) select,
933
+ .form-field:has(select) select.form-field__select {
794
934
  appearance: none;
795
935
  -webkit-appearance: none;
796
- -moz-appearance: none; }
797
- .form-field .form-field__select ~ label ~ span {
798
- color: var(--input-default-color); }
936
+ -moz-appearance: none;
937
+ padding-right: var(--wco-spacing-md, 40px);
938
+ min-height: var(--wco-input-min-height);
939
+ padding-top: 0;
940
+ padding-bottom: 0; }
941
+ .wco-form-field:has(select).form--readonly,
942
+ .form-field:has(select).form--readonly {
943
+ pointer-events: none; }
944
+ .wco-form-field:has(select).form--readonly::after,
945
+ .form-field:has(select).form--readonly::after {
946
+ display: none; }
947
+ .wco-form-field:has(select)::after,
948
+ .form-field:has(select)::after {
949
+ content: '';
950
+ position: absolute;
951
+ top: 50%;
952
+ right: 12px;
953
+ transform: translateY(-50%);
954
+ width: 30px;
955
+ height: 100%;
956
+ background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.41 8.58984L12 13.1698L16.59 8.58984L18 9.99984L12 15.9998L6 9.99984L7.41 8.58984Z' fill='var(--wco-color-primary-600, black)'/%3E%3C/svg%3E%0A");
957
+ background-size: 30px;
958
+ background-position: center;
959
+ background-repeat: no-repeat; }
960
+ .wco-form-field:has(select + i):after,
961
+ .form-field:has(select + i):after {
962
+ display: none; }
963
+ .wco-form-field:has(select + i) select + i,
964
+ .form-field:has(select + i) select + i {
965
+ position: absolute;
966
+ top: 50%;
967
+ right: var(--wco-spacing-nano, 8px);
968
+ transform: translateY(-50%);
969
+ width: 30px; }
970
+ .wco-form-field:has(i + label) select,
971
+ .form-field:has(i + label) select {
972
+ padding-left: var(--wco-spacing-md, 40px); }
973
+ .wco-form-field:has(i + label) i,
974
+ .form-field:has(i + label) i {
975
+ position: absolute;
976
+ top: 50%;
977
+ left: var(--wco-spacing-nano, 8px);
978
+ transform: translateY(-50%);
979
+ width: 30px; }
799
980
 
800
981
  label.form-radio, .form-radio {
801
982
  --accent-color: var(--wco-color-primary-700);
@@ -866,6 +1047,8 @@ label.form-check, .form-check {
866
1047
  justify-content: center;
867
1048
  align-items: center;
868
1049
  gap: var(--wco-checkbox-checkbox-gap); }
1050
+ label.form-check.form--readonly, .form-check.form--readonly {
1051
+ pointer-events: none; }
869
1052
  label.form-check label, .form-check label {
870
1053
  display: inline-flex;
871
1054
  justify-content: center;
@@ -944,7 +1127,7 @@ label.form-check, .form-check {
944
1127
  background-color: var(--wco-checkbox-disabled-color-iconchecked); }
945
1128
  label.form-check input[type="checkbox"]:checked:disabled ~ .label, .form-check input[type="checkbox"]:checked:disabled ~ .label {
946
1129
  color: var(--wco-checkbox-disabled-color-label); }
947
- label.form-check.form-field--error, .form-check.form-field--error {
1130
+ label.form-check.form--error, label.form-check.form-field--error, .form-check.form--error, .form-check.form-field--error {
948
1131
  --wco-checkbox-default-color-label: var(--wco-color-danger-900);
949
1132
  --wco-checkbox-default-color-iconunchecked: var(--wco-color-danger-600);
950
1133
  --wco-checkbox-default-color-iconchecked: var(--wco-color-danger-600); }
package/styles/scss/forms.scss CHANGED
@@ -1,4 +1,6 @@
1
- .form-field {
1
+ .form-field,
2
+ .wco-form-field
3
+ {
2
4
  --wco-input-color-label: var(--wco-color-neutral-700, #50555a);
3
5
  --wco-input-color-outline: var(--wco-color-neutral-500, #8d9399);
4
6
  --wco-input-color-icon: var(--wco-color-primary-600, #bf5600);
@@ -13,18 +15,21 @@
13
15
  --wco-input-color-helptext: var(--wco-color-neutral-900, #6d747a);
14
16
  --wco-input-font: var(--wco-font-family, 'Figtree', sans-serif);
15
17
  --wco-input-padding: 16px;
18
+ --wco-input-min-height: 48px;
16
19
  }
17
20
 
21
+ .wco-form-field,
18
22
  .form-field * {
19
23
  box-sizing: border-box;
20
24
  }
21
-
25
+ .wco-form-field,
22
26
  .form-field {
23
27
  display: flex;
24
28
  position: relative;
25
29
  accent-color: var(--wco-input-color-text);
26
30
  transition: box-shadow 300ms ease-in-out, border-color 300ms ease-in-out;
27
31
  // input Invalid
32
+ &:has(select:required) label::after,
28
33
  input:required+label::after,
29
34
  textarea:required+label::after,
30
35
  input:invalid:not(:placeholder-shown):required+label{
@@ -35,7 +40,10 @@
35
40
  // input custom
36
41
  .form-field__input,
37
42
  .form-field__textarea,
38
- .form-field__select {
43
+ input,
44
+ textarea,
45
+ select
46
+ {
39
47
  border: var(--wco-input-border);
40
48
  border-radius: var(--wco-input-radius);
41
49
  font-size: var(--wco-input-size, 16px);
@@ -55,7 +63,11 @@
55
63
  font-family: var(--wco-font-family);
56
64
  }
57
65
  // native effects
58
- &:invalid:not(:placeholder-shown), &.form-field--error:not(:placeholder-shown) {
66
+ &:invalid:not(:placeholder-shown),
67
+ &.wco-form-field--error:not(:placeholder-shown),
68
+ &.form-field--error:not(:placeholder-shown),
69
+ &.form--error:not(:placeholder-shown)
70
+ {
59
71
  --input-border: 1px solid var(--input-color-error);
60
72
  --input-shadow: 0px 2px 0px 1px var(--input-color-error);
61
73
  color: var(--input-color-error);
@@ -71,7 +83,6 @@
71
83
  &.input-lg {
72
84
  height: 48px;
73
85
  }
74
-
75
86
  }
76
87
 
77
88
  label {
@@ -79,7 +90,6 @@
79
90
  left: 0;
80
91
  top: 50%;
81
92
  transform: translateY(-50%);
82
- background-image: linear-gradient(0deg, var(--wco-input-color-bg, #fff) 11px, rgba(93,118,137,0) 44%);
83
93
  color: var(--wco-input-color-label);
84
94
  font-family: var(--wco-input-font);
85
95
  font-size: var(--wco-input-size);
@@ -89,6 +99,17 @@
89
99
  transition: 100ms linear;
90
100
  transform-origin: left top;
91
101
  pointer-events: none;
102
+ &::before {
103
+ content: '';
104
+ position: absolute;
105
+ top: calc(50% - -2px);
106
+ z-index: -1;
107
+ left: 0;
108
+ transform: translateY(-50%);
109
+ width: 100%;
110
+ height: 4px;
111
+ background-color: var(--wco-input-color-bg);
112
+ }
92
113
  }
93
114
 
94
115
  //// States ////
@@ -101,6 +122,7 @@
101
122
  --wco-input-color-placeholder: var(--wco-color-neutral-600);
102
123
  --wco-input-shadow: inset 0px 0px 0px 1px var(--wco-input-color-outline);
103
124
  }
125
+
104
126
  /// Hover
105
127
  &:hover {
106
128
  --wco-input-color-label: var(--wco-color-neutral-700, #50555a);
@@ -108,7 +130,12 @@
108
130
  }
109
131
 
110
132
  /// Disabled
111
- &:has(input:disabled, textarea:disabled, select:disabled, .form-field__input.form-field--disabled) {
133
+ &:has(
134
+ input:disabled,
135
+ textarea:disabled,
136
+ select:disabled,
137
+ .form-field__input.form-field--disabled), &.form-disabled
138
+ {
112
139
  --wco-input-color-label: var(--wco-color-neutral-500, #C3C8CC);
113
140
  --wco-input-color-outline: var(--wco-color-neutral-300, #C3C8CC);
114
141
  --wco-input-color-icon: var(--wco-color-neutral-300, #C3C8CC);
@@ -120,9 +147,9 @@
120
147
  /// View Only
121
148
  &:has(
122
149
  input:read-only:not(:disabled),
123
- textarea:read-only:not(:disabled),
124
- select:read-only:not(:disabled)
150
+ textarea:read-only:not(:disabled)
125
151
  ),
152
+ .form--readonly:not(.form-field--disabled),
126
153
  .form-field--readonly:not(.form-field--disabled) {
127
154
  --wco-input-color-label: var(--wco-color-neutral-600, #C3C8CC);
128
155
  --wco-input-color-outline: var(--wco-color-neutral-500, #C3C8CC);
@@ -133,8 +160,11 @@
133
160
 
134
161
  /// Error
135
162
  &.form-field--error:not(:placeholder-shown) ~ label,
136
- &.form-field--error, &:has(input:is(:placeholder-shown):invalid),
137
- &:has(.form-field--error) {
163
+ &.form--error:not(:placeholder-shown) ~ label,
164
+ &.form-field--error,
165
+ &:has(input:is(:placeholder-shown):invalid),
166
+ &:has(.form-field--error),
167
+ &.form--error {
138
168
  --wco-input-color-label: var(--wco-color-danger-600, #e00707);
139
169
  --wco-input-color-outline: var(--wco-color-danger-600, #e00707);
140
170
  --wco-input-color-icon: var(--wco-color-danger-600, #e00707);
@@ -148,7 +178,8 @@
148
178
  transform: translateY(0);
149
179
  }
150
180
 
151
- select[value=""]:focus+label,
181
+
182
+ &:has(select) label,
152
183
  textarea:focus+label,
153
184
  input:focus+label,
154
185
  .readonly+label
@@ -158,7 +189,6 @@
158
189
  transform: translateY(-50%) translateX(-10px) scale(0.9) !important;
159
190
  }
160
191
 
161
- select:not([value=""]) ~ label,
162
192
  textarea:not(:placeholder-shown)+label,
163
193
  input:not(:placeholder-shown)+label,
164
194
  .readonly+label
@@ -206,26 +236,88 @@
206
236
  }
207
237
  }
208
238
 
209
- /// Input com ícone no final
210
- &.form-field--suffixe {
211
- label + span {
212
- color: var(--wco-input-color-icon);
239
+
240
+ //////////////
241
+ /// Tamanhos
242
+ //////////////
243
+ &.form--sm {
244
+ --wco-input-min-height: 32px;
245
+ }
246
+ &.form--md {
247
+ --wco-input-min-height: 40px;
248
+ }
249
+ &.form--lg {
250
+ --wco-input-min-height: 48px;
251
+ }
252
+
253
+ ///////////
254
+ /// Select
255
+ ///////////
256
+ &:has(select) {
257
+ label {
258
+ z-index: 1;
259
+ }
260
+
261
+ select,
262
+ select.form-field__select {
263
+ appearance: none;
264
+ -webkit-appearance: none;
265
+ -moz-appearance: none;
266
+ padding-right: var(--wco-spacing-md, 40px);
267
+ min-height: var(--wco-input-min-height);
268
+ padding-top: 0;
269
+ padding-bottom: 0;
270
+ }
271
+
272
+ &.form--readonly {
273
+ pointer-events: none;
274
+ &::after {
275
+ display: none;
276
+ }
277
+ }
278
+ &::after {
279
+ content: '';
280
+ position: absolute;
281
+ top: 50%;
282
+ right: 12px;
283
+ transform: translateY(-50%);
284
+ width: 30px;
285
+ height: 100%;
286
+ background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.41 8.58984L12 13.1698L16.59 8.58984L18 9.99984L12 15.9998L6 9.99984L7.41 8.58984Z' fill='var(--wco-color-primary-600, black)'/%3E%3C/svg%3E%0A");
287
+ background-size: 30px;
288
+ background-position: center;
289
+ background-repeat: no-repeat;
213
290
  }
214
- > .form-field__select,
215
- > .form-field__input {
216
- padding-right: 44px;
291
+
292
+ }
293
+ // ícone sufixo
294
+ &:has(select + i) {
295
+ &:after {
296
+ display: none;
297
+ }
298
+ select + i {
299
+ position: absolute;
300
+ top: 50%;
301
+ right: var(--wco-spacing-nano, 8px);
302
+ transform: translateY(-50%);
303
+ width: 30px;
217
304
  }
218
305
  }
219
306
 
220
- //// Select Custom
221
- .form-field__select {
222
- appearance: none;
223
- -webkit-appearance: none;
224
- -moz-appearance: none;
225
- ~ label ~ span {
226
- color: var(--input-default-color);
307
+ // ícone prefixo
308
+ &:has(i + label) {
309
+ select {
310
+ padding-left: var(--wco-spacing-md, 40px);
311
+ }
312
+ i {
313
+ position: absolute;
314
+ top: 50%;
315
+ left: var(--wco-spacing-nano, 8px);
316
+ transform: translateY(-50%);
317
+ width: 30px;
227
318
  }
228
319
  }
320
+
229
321
  }
230
322
 
231
323
  ///////////
@@ -322,8 +414,7 @@ label.form-check, .form-check {
322
414
  --wco-checkbox-checkbox-size: 18px;
323
415
  --wco-checkbox-checkbox-gap: 12px;
324
416
  --wco-checkbox-checkbox-radius: 4px;
325
-
326
-
417
+
327
418
 
328
419
 
329
420
  display: inline-flex;
@@ -331,6 +422,9 @@ label.form-check, .form-check {
331
422
  align-items: center;
332
423
  gap: var(--wco-checkbox-checkbox-gap);
333
424
 
425
+ &.form--readonly {
426
+ pointer-events: none;
427
+ }
334
428
 
335
429
 
336
430
 
@@ -451,6 +545,7 @@ label.form-check, .form-check {
451
545
  input[type="checkbox"]:checked:disabled ~ .label {
452
546
  color: var(--wco-checkbox-disabled-color-label);
453
547
  }
548
+ &.form--error,
454
549
  &.form-field--error {
455
550
  --wco-checkbox-default-color-label: var(--wco-color-danger-900);
456
551
  --wco-checkbox-default-color-iconunchecked: var(--wco-color-danger-600);
package/styles/scss/variables.scss CHANGED
@@ -16,43 +16,43 @@
16
16
  --wco-color-secondary-600: #844597;
17
17
  --wco-color-secondary-700: #633471;
18
18
  --wco-color-secondary-900: #42234b;
19
- --wco-color-neutral-50: #fcfcfc;
19
+ --wco-color-neutral-50: #FCFCFC;
20
20
  --wco-color-neutral-100: #E9EBEC;
21
21
  --wco-color-neutral-300: #C3C8CC;
22
- --wco-color-neutral-500: #8d9399;
23
- --wco-color-neutral-600: #6d747a;
24
- --wco-color-neutral-700: #50555a;
22
+ --wco-color-neutral-500: #8D9399;
23
+ --wco-color-neutral-600: #6D747A;
24
+ --wco-color-neutral-700: #50555A;
25
25
  --wco-color-neutral-900: #080809;
26
- --wco-color-bg: #eeebef;
27
- --wco-color-panel: #fcfcfc;
28
- --wco-color-success-50: #e9f5e9;
29
- --wco-color-success-100: #c0e0c0;
30
- --wco-color-success-300: #8ac88a;
31
- --wco-color-success-500: #5cb85c;
32
- --wco-color-success-600: #4ca74c;
33
- --wco-color-success-700: #3c963c;
34
- --wco-color-success-900: #1e6b1e;
35
- --wco-color-warning-50: #fff8e5;
36
- --wco-color-warning-100: #ffe6b3;
37
- --wco-color-warning-300: #ffc266;
38
- --wco-color-warning-500: #ffb84d;
39
- --wco-color-warning-600: #ffa833;
40
- --wco-color-warning-700: #ff981a;
41
- --wco-color-warning-900: #804d00;
42
- --wco-color-danger-50: #fcedee;
43
- --wco-color-danger-100: #f6cdd0;
44
- --wco-color-danger-300: #ee8f94;
45
- --wco-color-danger-500: #e85f58;
46
- --wco-color-danger-600: #e13f38;
47
- --wco-color-danger-700: #db1f18;
48
- --wco-color-danger-900: #80100a;
49
- --wco-color-info-50: #e5f5ff;
50
- --wco-color-info-100: #b3e0ff;
51
- --wco-color-info-300: #66b8ff;
52
- --wco-color-info-500: #4da6ff;
53
- --wco-color-info-600: #3394ff;
54
- --wco-color-info-700: #1a82ff;
55
- --wco-color-info-900: #004d80;
26
+ --wco-color-bg: #EEEBEF;
27
+ --wco-color-panel: #FCFCFC;
28
+ --wco-color-success-50: #DAFFE2;
29
+ --wco-color-success-100: #A1E5B0;
30
+ --wco-color-success-300: #43BF5E;
31
+ --wco-color-success-500: #008C1F;
32
+ --wco-color-success-600: #007019;
33
+ --wco-color-success-700: #005413;
34
+ --wco-color-success-900: #00380C;
35
+ --wco-color-warning-50: #FEF7EB;
36
+ --wco-color-warning-100: #FCE6C4;
37
+ --wco-color-warning-300: #F8BD63;
38
+ --wco-color-warning-500: #F6AC3C;
39
+ --wco-color-warning-600: #B06D08;
40
+ --wco-color-warning-700: #754905;
41
+ --wco-color-warning-900: #3B2403;
42
+ --wco-color-danger-50: #FEE4E4;
43
+ --wco-color-danger-100: #FC9393;
44
+ --wco-color-danger-300: #F94242;
45
+ --wco-color-danger-500: #E00707;
46
+ --wco-color-danger-600: #9D0505;
47
+ --wco-color-danger-700: #700404;
48
+ --wco-color-danger-900: #430202;
49
+ --wco-color-info-50: #E8F1FB;
50
+ --wco-color-info-100: #BBD5F4;
51
+ --wco-color-info-300: #5F9EE6;
52
+ --wco-color-info-500: #2072D1;
53
+ --wco-color-info-600: #175296;
54
+ --wco-color-info-700: #103A6B;
55
+ --wco-color-info-900: #0A2340;
56
56
  --wco-font-size-xxxs: 12px;
57
57
  --wco-font-size-xxs: 14px;
58
58
  --wco-font-size-xs: 16px;