codecheck

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

8
.p-cascadeselect-trigger {
9
    display: flex;
10
    align-items: center;
11
    justify-content: center;
12
    flex-shrink: 0;
13
}
14

15
.p-cascadeselect-label {
16
    display: block;
17
    white-space: nowrap;
18
    overflow: hidden;
19
    flex: 1 1 auto;
20
    width: 1%;
21
    text-overflow: ellipsis;
22
    cursor: pointer;
23
}
24

25
.p-cascadeselect-label-empty {
26
    overflow: hidden;
27
    visibility: hidden;
28
}
29

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

34
.p-cascadeselect-item {
35
    cursor: pointer;
36
    font-weight: normal;
37
    white-space: nowrap;
38
}
39

40
.p-cascadeselect-item-content {
41
    display: flex;
42
    align-items: center;
43
    overflow: hidden;
44
    position: relative;
45
}
46

47
.p-cascadeselect-group-icon {
48
    margin-left: auto;
49
}
50

51
.p-cascadeselect-items {
52
    margin: 0;
53
    padding: 0;
54
    list-style-type: none;
55
    min-width: 100%;
56
}
57

58
.p-fluid .p-cascadeselect {
59
    display: flex;
60
}
61

62
.p-fluid .p-cascadeselect .p-cascadeselect-label {
63
    width: 1%;
64
}
65

66
.p-cascadeselect-sublist {
67
    position: absolute;
68
    min-width: 100%;
69
    z-index: 1;
70
    display: none;
71
}
72

73
.p-cascadeselect-item-active {
74
    overflow: visible;
75
}
76

77
.p-cascadeselect-item-active > .p-cascadeselect-sublist {
78
    display: block;
79
    left: 100%;
80
    top: 0;
81
}
82

83
.p-cascadeselect-enter-from,
84
.p-cascadeselect-leave-active {
85
    opacity: 0;
86
}
87

88
.p-cascadeselect-enter-active {
89
    transition: opacity 150ms;
90
}
91

92
// theme
93
.p-cascadeselect {
94
    background: $inputBg;
95
    border: $inputBorder;
96
    transition: $formElementTransition;
97
    border-radius: $borderRadius;
98
    outline-color: transparent;
99

100
    &:not(.p-disabled):hover {
101
        border-color: $inputHoverBorderColor;
102
    }
103

104
    &:not(.p-disabled).p-focus {
105
        @include focused-input();
106
    }
107

108
    &.p-variant-filled {
109
        background-color: $inputFilledBg;
110

111
        &:enabled:hover {
112
            background-color: $inputFilledHoverBg;
113
        }
114

115
        &:enabled:focus {
116
            background-color: $inputFilledFocusBg;
117
        }
118
    }
119

120
    .p-cascadeselect-label {
121
        background: transparent;
122
        border: 0 none;
123
        padding: $inputPadding;
124

125
        &.p-placeholder {
126
            color: $inputPlaceholderTextColor;
127
        }
128

129
        &:enabled:focus {
130
            outline: 0 none;
131
            box-shadow: none;
132
        }
133
    }
134

135
    .p-cascadeselect-trigger {
136
        background: transparent;
137
        color: $inputIconColor;
138
        width: $inputGroupAddOnMinWidth;
139
        border-top-right-radius: $borderRadius;
140
        border-bottom-right-radius: $borderRadius;
141
    }
142

143
    &.p-invalid.p-component {
144
        @include invalid-input();
145
    }
146
}
147

148
.p-cascadeselect-panel {
149
    background: $inputOverlayBg;
150
    color: $inputListTextColor;
151
    border: $inputOverlayBorder;
152
    border-radius: $borderRadius;
153
    box-shadow: $inputOverlayShadow;
154

155
    .p-cascadeselect-items {
156
        padding: $inputListPadding;
157

158
        .p-cascadeselect-item {
159
            margin: $inputListItemMargin;
160
            border: $inputListItemBorder;
161
            color: $inputListItemTextColor;
162
            background: $inputListItemBg;
163
            transition: $listItemTransition;
164
            border-radius: $inputListItemBorderRadius;
165

166
            &:first-child {
167
                margin-top: 0;
168
            }
169

170
            &:last-child {
171
                margin-bottom: 0;
172
            }
173

174
            &.p-highlight {
175
                color: $highlightTextColor;
176
                background: $highlightBg;
177

178
                &.p-focus {
179
                    background: $highlightFocusBg;
180
                }
181
            }
182

183
            &:not(.p-highlight):not(.p-disabled) {
184
                &.p-focus {
185
                    color: $inputListItemTextHoverColor;
186
                    background: $inputListItemHoverBg;
187
                }
188
            }
189

190
            .p-cascadeselect-item-content {
191
                padding: $inputListItemPadding;
192
            }
193

194
            .p-cascadeselect-group-icon {
195
                font-size: $menuitemSubmenuIconFontSize;
196
            }
197
        }
198
    }
199
}
200