codecheck

1
// core
2
.p-listbox-list-wrapper {
3
    overflow: auto;
4
}
5

6
.p-listbox-list {
7
    list-style-type: none;
8
    margin: 0;
9
    padding: 0;
10
}
11

12
.p-listbox-item {
13
    cursor: pointer;
14
    position: relative;
15
    overflow: hidden;
16
}
17

18
.p-listbox-item-group {
19
    cursor: auto;
20
}
21

22
.p-listbox-filter-container {
23
    position: relative;
24
}
25

26
.p-listbox-filter-icon {
27
    position: absolute;
28
    top: 50%;
29
    margin-top: -0.5rem;
30
}
31

32
.p-listbox-filter {
33
    width: 100%;
34
}
35

36
// theme
37
.p-listbox {
38
    background: $inputListBg;
39
    color: $inputListTextColor;
40
    border: $inputListBorder;
41
    border-radius: $borderRadius;
42
    transition: $formElementTransition;
43
    outline-color: transparent;
44

45
    .p-listbox-header {
46
        padding: $inputListHeaderPadding;
47
        border-bottom: $inputListHeaderBorder;
48
        color: $inputListHeaderTextColor;
49
        background: $inputListHeaderBg;
50
        margin: $inputListHeaderMargin;
51
        border-top-right-radius: $borderRadius;
52
        border-top-left-radius: $borderRadius;
53

54
        .p-listbox-filter {
55
            padding-right: nth($inputPadding, 2) + $primeIconFontSize;
56
        }
57

58
        .p-listbox-filter-icon {
59
            right: nth($inputPadding, 2);
60
            color: $inputIconColor;
61
        }
62
    }
63

64
    .p-listbox-list {
65
        padding: $inputListPadding;
66
        outline: 0 none;
67

68
        .p-listbox-item {
69
            margin: $inputListItemMargin;
70
            padding: $inputListItemPadding;
71
            border: $inputListItemBorder;
72
            color: $inputListItemTextColor;
73
            transition: $listItemTransition;
74
            border-radius: $inputListItemBorderRadius;
75

76
            &:first-child {
77
                margin-top: 0;
78
            }
79

80
            &:last-child {
81
                margin-bottom: 0;
82
            }
83

84
            &.p-highlight {
85
                color: $highlightTextColor;
86
                background: $highlightBg;
87
            }
88
        }
89

90
        .p-listbox-item-group {
91
            margin: $submenuHeaderMargin;
92
            padding: $submenuHeaderPadding;
93
            color: $submenuHeaderTextColor;
94
            background: $submenuHeaderBg;
95
            font-weight: $submenuHeaderFontWeight;
96
        }
97

98
        .p-listbox-empty-message {
99
            padding: $inputListItemPadding;
100
            color: $inputListItemTextColor;
101
            background: $inputListItemBg;
102
        }
103
    }
104

105
    &:not(.p-disabled) {
106
        .p-listbox-item {
107
            &.p-highlight {
108
                &.p-focus {
109
                    background: $highlightFocusBg;
110
                }
111
            }
112

113
            &:not(.p-highlight):not(.p-disabled) {
114
                &.p-focus {
115
                    color: $inputListItemTextHoverColor;
116
                    background: $inputListItemHoverBg;
117
                }
118

119
                &:hover {
120
                    color: $inputListItemTextHoverColor;
121
                    background: $inputListItemHoverBg;
122

123
                    &.p-focus {
124
                        color: $inputListItemTextHoverColor;
125
                        background: $inputListItemHoverBg;
126
                    }
127
                }
128
            }
129
        }
130
    }
131

132
    &.p-focus {
133
        @include focused-input();
134
    }
135

136
    &.p-invalid {
137
        @include invalid-input();
138
    }
139
}