codecheck

1
// core
2
.p-panelmenu .p-panelmenu-header-action {
3
    display: flex;
4
    align-items: center;
5
    user-select: none;
6
    cursor: pointer;
7
    position: relative;
8
    text-decoration: none;
9
}
10

11
.p-panelmenu .p-panelmenu-header-action:focus {
12
    z-index: 1;
13
}
14

15
.p-panelmenu .p-submenu-list {
16
    margin: 0;
17
    padding: 0;
18
    list-style: none;
19
}
20

21
.p-panelmenu .p-menuitem-link {
22
    display: flex;
23
    align-items: center;
24
    user-select: none;
25
    cursor: pointer;
26
    text-decoration: none;
27
    position: relative;
28
    overflow: hidden;
29
}
30

31
.p-panelmenu .p-menuitem-text {
32
    line-height: 1;
33
}
34

35
// theme
36
.p-panelmenu {
37
    .p-panelmenu-header {
38
        outline: 0 none;
39

40
        .p-panelmenu-header-content {
41
            border: $accordionHeaderBorder;
42
            color: $accordionHeaderTextColor;
43
            background: $accordionHeaderBg;
44
            border-radius: $borderRadius;
45
            transition: $listItemTransition;
46
            outline-color: transparent;
47

48
            .p-panelmenu-header-action {
49
                color: $accordionHeaderTextColor;
50
                padding: $accordionHeaderPadding;
51
                font-weight: $accordionHeaderFontWeight;
52

53
                .p-submenu-icon {
54
                    margin-right: $inlineSpacing;
55
                }
56

57
                .p-menuitem-icon {
58
                    margin-right: $inlineSpacing;
59
                }
60
            }
61
        }
62

63
        &:not(.p-disabled) {
64
            &:focus-visible {
65
                .p-panelmenu-header-content {
66
                    @include focused-inset();
67
                }
68
            }
69
        }
70

71
        &:not(.p-highlight):not(.p-disabled):hover {
72
            .p-panelmenu-header-content {
73
                background: $accordionHeaderHoverBg;
74
                border-color: $accordionHeaderHoverBorderColor;
75
                color: $accordionHeaderTextHoverColor;
76
            }
77
        }
78

79
        &:not(.p-disabled).p-highlight {
80
            .p-panelmenu-header-content {
81
                background: $accordionHeaderActiveBg;
82
                border-color: $accordionHeaderActiveBorderColor;
83
                color: $accordionHeaderTextActiveColor;
84
                border-bottom-right-radius: 0;
85
                border-bottom-left-radius: 0;
86
                margin-bottom: 0;
87
            }
88

89
            &:hover {
90
                .p-panelmenu-header-content {
91
                    border-color: $accordionHeaderActiveHoverBorderColor;
92
                    background: $accordionHeaderActiveHoverBg;
93
                    color: $accordionHeaderTextActiveHoverColor;
94
                }
95
            }
96
        }
97
    }
98

99
    .p-panelmenu-content {
100
        padding: $verticalMenuPadding;
101
        border: $accordionContentBorder;
102
        background: $accordionContentBg;
103
        color: $accordionContentTextColor;
104
        border-top: 0;
105
        border-top-right-radius: 0;
106
        border-top-left-radius: 0;
107
        border-bottom-right-radius: $borderRadius;
108
        border-bottom-left-radius: $borderRadius;
109

110
        .p-panelmenu-root-list {
111
            outline: 0 none;
112
        }
113

114
        .p-menuitem {
115
            @include menuitem();
116

117
            .p-menuitem-content {
118
                .p-menuitem-link { 
119
                    .p-submenu-icon {
120
                        margin-right: $inlineSpacing;
121
                    }
122
                }
123
            }
124
        }
125

126
        .p-menuitem-separator {
127
            border-top: $divider;
128
            margin: $menuSeparatorMargin;
129
        }
130

131
        .p-submenu-list:not(.p-panelmenu-root-list) {
132
            padding: $treeNodeChildrenPadding;
133
        }
134
    }
135

136
    .p-panelmenu-panel {
137
        margin-bottom: $accordionSpacing;
138

139
        @if $accordionSpacing == 0 {
140
            .p-panelmenu-header {
141
                .p-panelmenu-header-content {
142
                    border-radius: 0;
143
                }
144
            }
145

146
            .p-panelmenu-content {
147
                border-radius: 0;
148
            }
149

150
            &:not(:first-child) {
151
                .p-panelmenu-header {
152
                    .p-panelmenu-header-content {
153
                        border-top: 0 none;
154
                    }
155

156
                    &:not(.p-highlight):not(.p-disabled):hover,
157
                    &:not(.p-disabled).p-highlight:hover {
158
                        .p-panelmenu-header-content {
159
                            border-top: 0 none;
160
                        }
161
                    }
162
                }
163
            }
164

165
            &:first-child {
166
                .p-panelmenu-header {
167
                    .p-panelmenu-header-content {
168
                        border-top-right-radius: $borderRadius;
169
                        border-top-left-radius: $borderRadius;
170
                    }
171
                }
172
            }
173

174
            &:last-child {
175
                .p-panelmenu-header:not(.p-highlight) {
176
                    .p-panelmenu-header-content {
177
                        border-bottom-right-radius: $borderRadius;
178
                        border-bottom-left-radius: $borderRadius;
179
                    }
180
                }
181

182
                .p-panelmenu-content {
183
                    border-bottom-right-radius: $borderRadius;
184
                    border-bottom-left-radius: $borderRadius;
185
                }
186
            }
187
        } 
188
    }
189
}
190