codecheck

1
// core
2
.p-fluid .p-inputtext {
3
    width: 100%;
4
}
5

6
// theme
7
.p-inputtext {
8
    font-family: var(--font-family);
9
    font-feature-settings: var(--font-feature-settings, normal);
10
    font-size: $inputTextFontSize;
11
    color: $inputTextColor;
12
    background: $inputBg;
13
    padding: $inputPadding;
14
    border: $inputBorder;
15
    transition: $formElementTransition;
16
    appearance: none;
17
    border-radius: $borderRadius;
18
    outline-color: transparent;
19

20
    &:enabled:hover {
21
        border-color: $inputHoverBorderColor;
22
    }
23

24
    &:enabled:focus {
25
        @include focused-input();
26
    }
27

28
    &.p-invalid.p-component {
29
        @include invalid-input();
30
    }
31

32
    &.p-variant-filled {
33
        background-color: $inputFilledBg;
34

35
        &:enabled:hover {
36
            background-color: $inputFilledHoverBg;
37
        }
38

39
        &:enabled:focus {
40
            background-color: $inputFilledFocusBg;
41
        }
42
    }
43

44
    &.p-inputtext-sm {
45
        @include scaledFontSize($inputTextFontSize, $scaleSM);
46
        @include scaledPadding($inputPadding, $scaleSM);
47
    }
48

49
    &.p-inputtext-lg {
50
        @include scaledFontSize($inputTextFontSize, $scaleLG);
51
        @include scaledPadding($inputPadding, $scaleLG);
52
    }
53
}
54

55
.p-float-label > label {
56
    left: nth($inputPadding, 2);
57
    color: $inputPlaceholderTextColor;
58
    transition-duration: $transitionDuration;
59
}
60

61
.p-float-label > .p-invalid + label {
62
    color: $inputErrorBorderColor;
63
}
64

65
.p-icon-field-left > .p-inputtext {
66
    padding-left: nth($inputPadding, 2) * 2 + $primeIconFontSize;
67
}
68

69
.p-icon-field-left.p-float-label > label {
70
    left: nth($inputPadding, 2) * 2 + $primeIconFontSize;
71
}
72

73
.p-icon-field-right > .p-inputtext {
74
    padding-right: nth($inputPadding, 2) * 2 + $primeIconFontSize;
75
}
76

77
@include placeholder {
78
    color: $inputPlaceholderTextColor;
79
}
80

81
.p-input-filled {
82
    .p-inputtext {
83
        background-color: $inputFilledBg;
84

85
        &:enabled:hover {
86
            background-color: $inputFilledHoverBg;
87
        }
88

89
        &:enabled:focus {
90
            background-color: $inputFilledFocusBg;
91
        }
92
    }
93
}
94

95
.p-inputtext-sm {
96
    .p-inputtext {
97
        @include scaledFontSize($inputTextFontSize, $scaleSM);
98
        @include scaledPadding($inputPadding, $scaleSM);
99
    }
100
}
101

102
.p-inputtext-lg {
103
    .p-inputtext {
104
        @include scaledFontSize($inputTextFontSize, $scaleLG);
105
        @include scaledPadding($inputPadding, $scaleLG);
106
    }
107
}
108