codecheck

1
@use "sass:math";
2

3
// core
4
.p-multiselect {
5
    display: inline-flex;
6
    cursor: pointer;
7
    user-select: none;
8
}
9

10
.p-multiselect-trigger {
11
    display: flex;
12
    align-items: center;
13
    justify-content: center;
14
    flex-shrink: 0;
15
}
16

17
.p-multiselect-label-container {
18
    overflow: hidden;
19
    flex: 1 1 auto;
20
    cursor: pointer;
21
}
22

23
.p-multiselect-label {
24
    display: block;
25
    white-space: nowrap;
26
    cursor: pointer;
27
    overflow: hidden;
28
    text-overflow: ellipsis;
29
}
30

31
.p-multiselect-label-empty {
32
    overflow: hidden;
33
    visibility: hidden;
34
}
35

36
.p-multiselect-token {
37
    cursor: default;
38
    display: inline-flex;
39
    align-items: center;
40
    flex: 0 0 auto;
41
}
42

43
.p-multiselect-token-icon {
44
    cursor: pointer;
45
}
46

47
.p-multiselect .p-multiselect-panel {
48
    min-width: 100%;
49
}
50

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

55
.p-multiselect-items {
56
    margin: 0;
57
    padding: 0;
58
    list-style-type: none;
59
}
60

61
.p-multiselect-item {
62
    cursor: pointer;
63
    display: flex;
64
    align-items: center;
65
    font-weight: normal;
66
    white-space: nowrap;
67
    position: relative;
68
    overflow: hidden;
69
}
70

71
.p-multiselect-item-group {
72
    cursor: auto;
73
}
74

75
.p-multiselect-header {
76
    display: flex;
77
    align-items: center;
78
    justify-content: space-between;
79
}
80

81
.p-multiselect-filter-container {
82
    position: relative;
83
    flex: 1 1 auto;
84
}
85

86
.p-multiselect-filter-icon {
87
    position: absolute;
88
    top: 50%;
89
    margin-top: -0.5rem;
90
}
91

92
.p-multiselect-filter-container .p-inputtext {
93
    width: 100%;
94
}
95

96
.p-multiselect-close {
97
    display: flex;
98
    align-items: center;
99
    justify-content: center;
100
    flex-shrink: 0;
101
    overflow: hidden;
102
    position: relative;
103
    margin-left: auto;
104
}
105

106
.p-fluid .p-multiselect {
107
    display: flex;
108
}
109

110
// theme
111
.p-multiselect {
112
    background: $inputBg;
113
    border: $inputBorder;
114
    transition: $formElementTransition;
115
    border-radius: $borderRadius;
116
    outline-color: transparent;
117

118
    &:not(.p-disabled):hover {
119
        border-color: $inputHoverBorderColor;
120
    }
121

122
    &:not(.p-disabled).p-focus {
123
        @include focused-input();
124
    }
125

126
    &.p-variant-filled {
127
        background: $inputFilledBg;
128

129
        &:not(.p-disabled):hover {
130
            background-color: $inputFilledHoverBg;
131
        }
132

133
        &:not(.p-disabled).p-focus {
134
            background-color: $inputFilledFocusBg;
135
        }
136
    }
137

138
    .p-multiselect-label {
139
        padding: $inputPadding;
140
        transition: $formElementTransition;
141

142
        &.p-placeholder {
143
            color: $inputPlaceholderTextColor;
144
        }
145
    }
146

147
    &.p-multiselect-chip {
148
        .p-multiselect-token {
149
            padding: math.div(nth($inputPadding, 1), 2) nth($inputPadding, 2);
150
            margin-right: $inlineSpacing;
151
            background: $chipBg;
152
            color: $chipTextColor;
153
            border-radius: $chipBorderRadius;
154

155
            .p-multiselect-token-icon {
156
                margin-left: $inlineSpacing;
157
            }
158
        }
159
    }
160

161
    .p-multiselect-trigger {
162
        background: transparent;
163
        color: $inputIconColor;
164
        width: $inputGroupAddOnMinWidth;
165
        border-top-right-radius: $borderRadius;
166
        border-bottom-right-radius: $borderRadius;
167
    }
168

169
    &.p-invalid.p-component {
170
        @include invalid-input();
171
    }
172
}
173

174
.p-inputwrapper-filled {
175
    &.p-multiselect {
176
        &.p-multiselect-chip {
177
            .p-multiselect-label {
178
                padding: math.div(nth($inputPadding, 1), 2)
179
                    nth($inputPadding, 2);
180
            }
181
        }
182
    }
183
}
184

185
.p-multiselect-panel {
186
    background: $inputOverlayBg;
187
    color: $inputListTextColor;
188
    border: $inputOverlayBorder;
189
    border-radius: $borderRadius;
190
    box-shadow: $inputOverlayShadow;
191

192
    .p-multiselect-header {
193
        padding: $inputListHeaderPadding;
194
        border-bottom: $inputListHeaderBorder;
195
        color: $inputListHeaderTextColor;
196
        background: $inputOverlayHeaderBg;
197
        margin: $inputListHeaderMargin;
198
        border-top-right-radius: $borderRadius;
199
        border-top-left-radius: $borderRadius;
200

201
        .p-multiselect-filter-container {
202
            .p-inputtext {
203
                padding-right: nth($inputPadding, 2) + $primeIconFontSize;
204
            }
205

206
            .p-multiselect-filter-icon {
207
                right: nth($inputPadding, 2);
208
                color: $inputIconColor;
209
            }
210
        }
211

212
        .p-checkbox {
213
            margin-right: $inlineSpacing;
214
        }
215

216
        .p-multiselect-close {
217
            margin-left: $inlineSpacing;
218
            @include action-icon();
219
        }
220
    }
221

222
    .p-multiselect-items {
223
        padding: $inputListPadding;
224

225
        .p-multiselect-item {
226
            margin: $inputListItemMargin;
227
            padding: $inputListItemPadding;
228
            border: $inputListItemBorder;
229
            color: $inputListItemTextColor;
230
            background: $inputListItemBg;
231
            transition: $listItemTransition;
232
            border-radius: $inputListItemBorderRadius;
233

234
            &:first-child {
235
                margin-top: 0;
236
            }
237

238
            &:last-child {
239
                margin-bottom: 0;
240
            }
241

242
            &.p-highlight {
243
                color: $highlightTextColor;
244
                background: $highlightBg;
245

246
                &.p-focus {
247
                    background: $highlightFocusBg;
248
                }
249
            }
250

251
            &:not(.p-highlight):not(.p-disabled) {
252
                &.p-focus {
253
                    color: $inputListItemTextHoverColor;
254
                    background: $inputListItemHoverBg;
255
                }
256
            }
257

258
            .p-checkbox {
259
                margin-right: $inlineSpacing;
260
            }
261
        }
262

263
        .p-multiselect-item-group {
264
            margin: $submenuHeaderMargin;
265
            padding: $submenuHeaderPadding;
266
            color: $submenuHeaderTextColor;
267
            background: $submenuHeaderBg;
268
            font-weight: $submenuHeaderFontWeight;
269
        }
270

271
        .p-multiselect-empty-message {
272
            padding: $inputListItemPadding;
273
            color: $inputListItemTextColor;
274
            background: $inputListItemBg;
275
        }
276
    }
277
}
278

279