codecheck

1
@use "sass:math";
2

3
// core
4
.p-autocomplete {
5
    display: inline-flex;
6
}
7

8
.p-autocomplete-loader {
9
    position: absolute;
10
    top: 50%;
11
    margin-top: -0.5rem;
12
}
13

14
.p-autocomplete-dd .p-autocomplete-input {
15
    flex: 1 1 auto;
16
    width: 1%;
17
}
18

19
.p-autocomplete-dd .p-autocomplete-input,
20
.p-autocomplete-dd .p-autocomplete-multiple-container {
21
    border-top-right-radius: 0;
22
    border-bottom-right-radius: 0;
23
}
24

25
.p-autocomplete-dd .p-autocomplete-dropdown {
26
    border-top-left-radius: 0;
27
    border-bottom-left-radius: 0px;
28
}
29

30
.p-autocomplete .p-autocomplete-panel {
31
    min-width: 100%;
32
}
33

34
.p-autocomplete-panel {
35
    position: absolute;
36
    overflow: auto;
37
    top: 0;
38
    left: 0;
39
}
40

41
.p-autocomplete-items {
42
    margin: 0;
43
    padding: 0;
44
    list-style-type: none;
45
}
46

47
.p-autocomplete-item {
48
    cursor: pointer;
49
    white-space: nowrap;
50
    position: relative;
51
    overflow: hidden;
52
}
53

54
.p-autocomplete-multiple-container {
55
    margin: 0;
56
    padding: 0;
57
    list-style-type: none;
58
    cursor: text;
59
    overflow: hidden;
60
    display: flex;
61
    align-items: center;
62
    flex-wrap: wrap;
63
}
64

65
.p-autocomplete-token {
66
    cursor: default;
67
    display: inline-flex;
68
    align-items: center;
69
    flex: 0 0 auto;
70
}
71

72
.p-autocomplete-token-icon {
73
    cursor: pointer;
74
}
75

76
.p-autocomplete-input-token {
77
    flex: 1 1 auto;
78
    display: inline-flex;
79
}
80

81
.p-autocomplete-input-token input {
82
    border: 0 none;
83
    outline: 0 none;
84
    background-color: transparent;
85
    margin: 0;
86
    padding: 0;
87
    box-shadow: none;
88
    border-radius: 0;
89
    width: 100%;
90
}
91

92
.p-fluid .p-autocomplete {
93
    display: flex;
94
}
95

96
.p-fluid .p-autocomplete-dd .p-autocomplete-input {
97
    width: 1%;
98
}
99

100
// theme
101
.p-autocomplete {
102
    .p-autocomplete-loader {
103
        right: nth($inputPadding, 2);
104
    }
105

106
    &.p-autocomplete-dd {
107
        .p-autocomplete-loader {
108
            right: nth($inputPadding, 2) + $buttonIconOnlyWidth;
109
        }
110
    }
111

112
    &:not(.p-disabled):hover {
113
        .p-autocomplete-multiple-container {
114
            border-color: $inputHoverBorderColor;
115
        }
116
    }
117

118
    &:not(.p-disabled).p-focus {
119
        .p-autocomplete-multiple-container {
120
            @include focused-input();
121
        }
122
    }
123

124
    .p-autocomplete-multiple-container {
125
        padding: math.div(nth($inputPadding, 1), 2) nth($inputPadding, 2);
126
        gap: $inlineSpacing;
127
        outline-color: transparent;
128

129
        .p-autocomplete-input-token {
130
            padding: math.div(nth($inputPadding, 1), 2) 0;
131

132
            input {
133
                font-family: var(--font-family);
134
                font-feature-settings: var(--font-feature-settings, normal);
135
                font-size: $inputTextFontSize;
136
                color: $textColor;
137
                padding: 0;
138
                margin: 0;
139
            }
140
        }
141

142
        .p-autocomplete-token {
143
            padding: math.div(nth($inputPadding, 1), 2) nth($inputPadding, 2);
144
            background: $chipBg;
145
            color: $chipTextColor;
146
            border-radius: $chipBorderRadius;
147

148
            .p-autocomplete-token-icon {
149
                margin-left: $inlineSpacing;
150
            }
151

152
            &.p-focus {
153
                background: $chipFocusBg;
154
                color: $chipFocusTextColor;
155
            }
156
        }
157
    }
158

159
    &.p-invalid.p-component > .p-inputtext {
160
        @include invalid-input();
161
    }
162
}
163

164
.p-autocomplete-panel {
165
    background: $inputOverlayBg;
166
    color: $inputListTextColor;
167
    border: $inputOverlayBorder;
168
    border-radius: $borderRadius;
169
    box-shadow: $inputOverlayShadow;
170

171
    .p-autocomplete-items {
172
        padding: $inputListPadding;
173

174
        .p-autocomplete-item {
175
            margin: $inputListItemMargin;
176
            padding: $inputListItemPadding;
177
            border: $inputListItemBorder;
178
            color: $inputListItemTextColor;
179
            background: $inputListItemBg;
180
            transition: $listItemTransition;
181
            border-radius: $inputListItemBorderRadius;
182

183
            &:first-child {
184
                margin-top: 0;
185
            }
186

187
            &:last-child {
188
                margin-bottom: 0;
189
            }
190

191
            &.p-highlight {
192
                color: $highlightTextColor;
193
                background: $highlightBg;
194

195
                &.p-focus {
196
                    background: $highlightFocusBg;
197
                }
198
            }
199

200
            &:not(.p-highlight):not(.p-disabled) {
201
                &.p-focus {
202
                    color: $inputListItemTextHoverColor;
203
                    background: $inputListItemHoverBg;
204
                }
205
            }
206
        }
207

208
        .p-autocomplete-item-group {
209
            margin: $submenuHeaderMargin;
210
            padding: $submenuHeaderPadding;
211
            color: $submenuHeaderTextColor;
212
            background: $submenuHeaderBg;
213
            font-weight: $submenuHeaderFontWeight;
214
        }
215
    }
216
}
217