codecheck

1
// core
2
.p-dropdown {
3
    display: inline-flex;
4
    cursor: pointer;
5
    position: relative;
6
    user-select: none;
7
}
8

9
.p-dropdown-clear-icon {
10
    position: absolute;
11
    top: 50%;
12
    margin-top: -0.5rem;
13
}
14

15
.p-dropdown-trigger {
16
    display: flex;
17
    align-items: center;
18
    justify-content: center;
19
    flex-shrink: 0;
20
}
21

22
.p-dropdown-label {
23
    display: block;
24
    white-space: nowrap;
25
    overflow: hidden;
26
    flex: 1 1 auto;
27
    width: 1%;
28
    text-overflow: ellipsis;
29
    cursor: pointer;
30
}
31

32
.p-dropdown-label-empty {
33
    overflow: hidden;
34
    opacity: 0;
35
}
36

37
input.p-dropdown-label {
38
    cursor: default;
39
}
40

41
.p-dropdown .p-dropdown-panel {
42
    min-width: 100%;
43
}
44

45
.p-dropdown-panel {
46
    position: absolute;
47
    top: 0;
48
    left: 0;
49
}
50

51
.p-dropdown-items-wrapper {
52
    overflow: auto;
53
}
54

55
.p-dropdown-item {
56
    cursor: pointer;
57
    font-weight: normal;
58
    white-space: nowrap;
59
    position: relative;
60
    overflow: hidden;
61
    display: flex;
62
    align-items: center;
63
}
64

65
.p-dropdown-item-group {
66
    cursor: auto;
67
}
68

69
.p-dropdown-items {
70
    margin: 0;
71
    padding: 0;
72
    list-style-type: none;
73
}
74

75
.p-dropdown-filter {
76
    width: 100%;
77
}
78

79
.p-dropdown-filter-container {
80
    position: relative;
81
}
82

83
.p-dropdown-filter-icon {
84
    position: absolute;
85
    top: 50%;
86
    margin-top: -0.5rem;
87
}
88

89
.p-fluid .p-dropdown {
90
    display: flex;
91
}
92

93
.p-fluid .p-dropdown .p-dropdown-label {
94
    width: 1%;
95
}
96

97
// theme
98
.p-dropdown {
99
    background: $inputBg;
100
    border: $inputBorder;
101
    transition: $formElementTransition;
102
    border-radius: $borderRadius;
103
    outline-color: transparent;
104

105
    &:not(.p-disabled):hover {
106
        border-color: $inputHoverBorderColor;
107
    }
108

109
    &:not(.p-disabled).p-focus {
110
        @include focused-input();
111
    }
112

113
    &.p-variant-filled {
114
        background: $inputFilledBg;
115

116
        &:not(.p-disabled):hover {
117
            background-color: $inputFilledHoverBg;
118
        }
119

120
        &:not(.p-disabled).p-focus {
121
            background-color: $inputFilledFocusBg;
122

123
            .p-inputtext {
124
                background-color: transparent;
125
            }
126
        }
127
    }
128

129
    &.p-dropdown-clearable {
130
        .p-dropdown-label {
131
            padding-right: nth($inputPadding, 2) + $primeIconFontSize;
132
        }
133
    }
134

135
    .p-dropdown-label {
136
        background: transparent;
137
        border: 0 none;
138

139
        &.p-placeholder {
140
            color: $inputPlaceholderTextColor;
141
        }
142

143
        &:focus,
144
        &:enabled:focus {
145
            outline: 0 none;
146
            box-shadow: none;
147
        }
148
    }
149

150
    .p-dropdown-trigger {
151
        background: transparent;
152
        color: $inputIconColor;
153
        width: $inputGroupAddOnMinWidth;
154
        border-top-right-radius: $borderRadius;
155
        border-bottom-right-radius: $borderRadius;
156
    }
157

158
    .p-dropdown-clear-icon {
159
        color: $inputIconColor;
160
        right: $inputGroupAddOnMinWidth;
161
    }
162

163
    &.p-invalid.p-component {
164
        @include invalid-input();
165
    }
166
}
167

168
.p-dropdown-panel {
169
    background: $inputOverlayBg;
170
    color: $inputListTextColor;
171
    border: $inputOverlayBorder;
172
    border-radius: $borderRadius;
173
    box-shadow: $inputOverlayShadow;
174

175
    .p-dropdown-header {
176
        padding: $inputListHeaderPadding;
177
        border-bottom: $inputListHeaderBorder;
178
        color: $inputListHeaderTextColor;
179
        background: $inputOverlayHeaderBg;
180
        margin: $inputListHeaderMargin;
181
        border-top-right-radius: $borderRadius;
182
        border-top-left-radius: $borderRadius;
183

184
        .p-dropdown-filter {
185
            padding-right: nth($inputPadding, 2) + $primeIconFontSize;
186
            margin-right: -1 * (nth($inputPadding, 2) + $primeIconFontSize);
187
        }
188

189
        .p-dropdown-filter-icon {
190
            right: nth($inputPadding, 2);
191
            color: $inputIconColor;
192
        }
193
    }
194

195
    .p-dropdown-items {
196
        padding: $inputListPadding;
197

198
        .p-dropdown-item {
199
            margin: $inputListItemMargin;
200
            padding: $inputListItemPadding;
201
            border: $inputListItemBorder;
202
            color: $inputListItemTextColor;
203
            background: $inputListItemBg;
204
            transition: $listItemTransition;
205
            border-radius: $inputListItemBorderRadius;
206

207
            &:first-child {
208
                margin-top: 0;
209
            }
210

211
            &:last-child {
212
                margin-bottom: 0;
213
            }
214

215
            &.p-highlight {
216
                color: $highlightTextColor;
217
                background: $highlightBg;
218

219
                &.p-focus {
220
                    background: $highlightFocusBg;
221
                }
222
            }
223

224
            &:not(.p-highlight):not(.p-disabled) {
225
                &.p-focus {
226
                    color: $inputListItemTextHoverColor;
227
                    background: $inputListItemHoverBg;
228
                }
229
            }
230

231
            .p-dropdown-check-icon {
232
                position: relative;
233
                margin-left: -1 * $inlineSpacing;
234
                margin-right: $inlineSpacing;
235
            }
236
        }
237

238
        .p-dropdown-item-group {
239
            margin: $submenuHeaderMargin;
240
            padding: $submenuHeaderPadding;
241
            color: $submenuHeaderTextColor;
242
            background: $submenuHeaderBg;
243
            font-weight: $submenuHeaderFontWeight;
244
        }
245

246
        .p-dropdown-empty-message {
247
            padding: $inputListItemPadding;
248
            color: $inputListItemTextColor;
249
            background: $inputListItemBg;
250
        }
251
    }
252
}
253