codecheck

1
// core
2
.p-tree-container {
3
    margin: 0;
4
    padding: 0;
5
    list-style-type: none;
6
    overflow: auto;
7
}
8

9
.p-treenode-children {
10
    margin: 0;
11
    padding: 0;
12
    list-style-type: none;
13
}
14

15
.p-tree-wrapper {
16
    overflow: auto;
17
}
18

19
.p-treenode-selectable {
20
    cursor: pointer;
21
    user-select: none;
22
}
23

24
.p-tree-toggler {
25
    cursor: pointer;
26
    user-select: none;
27
    display: inline-flex;
28
    align-items: center;
29
    justify-content: center;
30
    overflow: hidden;
31
    position: relative;
32
    flex-shrink: 0;
33
}
34

35
.p-treenode-leaf > .p-treenode-content .p-tree-toggler {
36
    visibility: hidden;
37
}
38

39
.p-treenode-content {
40
    display: flex;
41
    align-items: center;
42
}
43

44
.p-tree-filter {
45
    width: 100%;
46
}
47

48
.p-tree-filter-container {
49
    position: relative;
50
    display: block;
51
    width: 100%;
52
}
53

54
.p-tree-filter-icon {
55
    position: absolute;
56
    top: 50%;
57
    margin-top: -0.5rem;
58
}
59

60
.p-tree-loading {
61
    position: relative;
62
    min-height: 4rem;
63
}
64

65
.p-tree .p-tree-loading-overlay {
66
    position: absolute;
67
    z-index: 1;
68
    display: flex;
69
    align-items: center;
70
    justify-content: center;
71
}
72

73
.p-tree-flex-scrollable {
74
    display: flex;
75
    flex: 1;
76
    height: 100%;
77
    flex-direction: column;
78
}
79

80
.p-tree-flex-scrollable .p-tree-wrapper {
81
    flex: 1;
82
}
83

84
// theme
85
.p-tree {
86
    border: $panelContentBorder;
87
    background: $panelContentBg;
88
    color: $panelContentTextColor;
89
    padding: $panelContentPadding;
90
    border-radius: $borderRadius;
91

92
    .p-tree-container {
93
        .p-treenode {
94
            padding: $treeNodePadding;
95
            outline: 0 none;
96

97
            &:focus > .p-treenode-content {
98
                @include focused-listitem();
99
            }
100

101
            .p-treenode-content {
102
                border-radius: $borderRadius;
103
                transition: $listItemTransition;
104
                padding: $treeNodeContentPadding;
105

106
                .p-tree-toggler {
107
                    margin-right: $inlineSpacing;
108
                    @include action-icon();
109
                }
110

111
                .p-treenode-icon {
112
                    margin-right: $inlineSpacing;
113
                    color: $treeNodeIconColor;
114
                }
115

116
                .p-checkbox {
117
                    margin-right: $inlineSpacing;
118

119
                    &.p-indeterminate {
120
                        .p-checkbox-icon {
121
                            color: $textColor;
122
                        }
123
                    }
124
                }
125

126
                &.p-highlight {
127
                    background: $highlightBg;
128
                    color: $highlightTextColor;
129

130
                    .p-tree-toggler,
131
                    .p-treenode-icon {
132
                        color: $highlightTextColor;
133

134
                        &:hover {
135
                            color: $highlightTextColor;
136
                        }
137
                    }
138
                }
139

140
                &.p-treenode-selectable:not(.p-highlight):hover {
141
                    background: $inputListItemHoverBg;
142
                    color: $inputListItemTextHoverColor;
143
                }
144
            }
145
        }
146
    }
147

148
    .p-tree-filter-container {
149
        margin-bottom: $inlineSpacing;
150

151
        .p-tree-filter {
152
            width: 100%;
153
            padding-right: nth($inputPadding, 2) + $primeIconFontSize;
154
        }
155

156
        .p-tree-filter-icon {
157
            right: nth($inputPadding, 2);
158
            color: $inputIconColor;
159
        }
160
    }
161

162
    .p-treenode-children {
163
        padding: $treeNodeChildrenPadding;
164
    }
165

166
    .p-tree-loading-icon {
167
        font-size: $loadingIconFontSize;
168

169
        &.p-icon {
170
            width:  $loadingIconFontSize;
171
            height: $loadingIconFontSize;
172
        }
173
    }
174
}
175