codecheck

1
@use "sass:math";
2

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

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

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

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

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

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

43
.p-treeselect .p-treeselect-panel {
44
    min-width: 100%;
45
}
46

47
.p-treeselect-items-wrapper {
48
    overflow: auto;
49
}
50

51
.p-fluid .p-treeselect {
52
    display: flex;
53
}
54

55
// theme
56
.p-treeselect {
57
    background: $inputBg;
58
    border: $inputBorder;
59
    transition: $formElementTransition;
60
    border-radius: $borderRadius;
61
    outline-color: transparent;
62

63
    &:not(.p-disabled):hover {
64
        border-color: $inputHoverBorderColor;
65
    }
66

67
    &:not(.p-disabled).p-focus {
68
        @include focused-input();
69
    }
70

71
    &.p-variant-filled {
72
        background: $inputFilledBg;
73

74
        &:not(.p-disabled):hover {
75
            background-color: $inputFilledHoverBg;
76
        }
77

78
        &:not(.p-disabled).p-focus {
79
            background-color: $inputFilledFocusBg;
80
        }
81
    }
82

83
    .p-treeselect-label {
84
        padding: $inputPadding;
85
        transition: $formElementTransition;
86

87
        &.p-placeholder {
88
            color: $inputPlaceholderTextColor;
89
        }
90
    }
91

92
    &.p-treeselect-chip {
93
        .p-treeselect-token {
94
            padding: math.div(nth($inputPadding, 1), 2) nth($inputPadding, 2);
95
            margin-right: $inlineSpacing;
96
            background: $chipBg;
97
            color: $chipTextColor;
98
            border-radius: $chipBorderRadius;
99
        }
100
    }
101

102
    .p-treeselect-trigger {
103
        background: transparent;
104
        color: $inputIconColor;
105
        width: $inputGroupAddOnMinWidth;
106
        border-top-right-radius: $borderRadius;
107
        border-bottom-right-radius: $borderRadius;
108
    }
109

110
    &.p-invalid.p-component {
111
        @include invalid-input();
112
    }
113
}
114

115
.p-inputwrapper-filled {
116
    &.p-treeselect {
117
        &.p-treeselect-chip {
118
            .p-treeselect-label {
119
                padding: math.div(nth($inputPadding, 1), 2)
120
                    nth($inputPadding, 2);
121
            }
122
        }
123
    }
124
}
125

126
.p-treeselect-panel {
127
    background: $inputOverlayBg;
128
    color: $inputListTextColor;
129
    border: $inputOverlayBorder;
130
    border-radius: $borderRadius;
131
    box-shadow: $inputOverlayShadow;
132

133
    .p-treeselect-items-wrapper {
134
        .p-tree {
135
            border: 0 none;
136
        }
137

138
        .p-treeselect-empty-message {
139
            padding: $inputListItemPadding;
140
            color: $inputListItemTextColor;
141
            background: $inputListItemBg;
142
        }
143
    }
144
}
145

146
.p-input-filled {
147
    .p-treeselect {
148
        background: $inputFilledBg;
149

150
        &:not(.p-disabled):hover {
151
            background-color: $inputFilledHoverBg;
152
        }
153

154
        &:not(.p-disabled).p-focus {
155
            background-color: $inputFilledFocusBg;
156
        }
157
    }
158
}
159