@wizco/fenixds-core 1.0.20 → 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.
- package/package.json +1 -1
- package/styles/core.css +210 -27
- package/styles/scss/forms.scss +124 -29
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.
|
|
4
|
+
"version": "1.0.21",
|
|
5
5
|
"private": false,
|
|
6
6
|
"sideEffects": false,
|
|
7
7
|
"author": "Raul Melo Fernandez",
|
package/styles/core.css
CHANGED
|
@@ -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
|
|
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
|
|
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-
|
|
678
|
-
.form-field
|
|
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 .
|
|
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 .
|
|
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 .
|
|
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(
|
|
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,
|
|
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
|
|
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
|
|
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
|
|
789
|
-
|
|
790
|
-
|
|
791
|
-
.form-field.form
|
|
792
|
-
|
|
793
|
-
|
|
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
|
-
|
|
798
|
-
|
|
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
|
-
|
|
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),
|
|
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(
|
|
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
|
|
137
|
-
|
|
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
|
-
|
|
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
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
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
|
-
|
|
215
|
-
|
|
216
|
-
|
|
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
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
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);
|