codecheck

1
// core
2
.p-menubar {
3
    display: flex;
4
    align-items: center;
5
}
6

7
.p-menubar ul {
8
    margin: 0;
9
    padding: 0;
10
    list-style: none;
11
}
12

13
.p-menubar .p-menuitem-link {
14
    cursor: pointer;
15
    display: flex;
16
    align-items: center;
17
    text-decoration: none;
18
    overflow: hidden;
19
    position: relative;
20
}
21

22
.p-menubar .p-menuitem-text {
23
    line-height: 1;
24
}
25

26
.p-menubar .p-menuitem {
27
    position: relative;
28
}
29

30
.p-menubar-root-list {
31
    display: flex;
32
    align-items: center;
33
    flex-wrap: wrap;
34
}
35

36
.p-menubar-root-list > li ul {
37
    display: none;
38
    z-index: 1;
39
}
40

41
.p-menubar-root-list > .p-menuitem-active > .p-submenu-list {
42
    display: block;
43
}
44

45
.p-menubar .p-submenu-list {
46
    display: none;
47
    position: absolute;
48
    z-index: 1;
49
}
50

51
.p-menubar .p-submenu-list > .p-menuitem-active > .p-submenu-list {
52
    display: block;
53
    left: 100%;
54
    top: 0;
55
}
56

57
.p-menubar .p-submenu-list .p-menuitem .p-menuitem-content .p-menuitem-link .p-submenu-icon {
58
    margin-left: auto;
59
}
60

61
.p-menubar .p-menubar-end {
62
    margin-left: auto;
63
    align-self: center;
64
}
65

66
.p-menubar-button {
67
    display: none;
68
    cursor: pointer;
69
    align-items: center;
70
    justify-content: center;
71
    text-decoration: none;
72
}
73

74
.p-menubar.p-menubar-mobile {
75
    position: relative; 
76
}
77

78
.p-menubar.p-menubar-mobile .p-menubar-button {
79
    display: flex;
80
}
81

82
.p-menubar.p-menubar-mobile .p-menubar-root-list {
83
    position: absolute;
84
    display: none;
85
    width: 100%;
86
}
87

88
.p-menubar.p-menubar-mobile .p-submenu-list {
89
    width: 100%;
90
    position: static;
91
    box-shadow: none;
92
    border: 0 none;
93
}
94

95
.p-menubar.p-menubar-mobile .p-menubar-root-list .p-menuitem {
96
    width: 100%;
97
    position: static;
98
}
99

100
.p-menubar.p-menubar-mobile-active .p-menubar-root-list {
101
    display: flex;
102
    flex-direction: column;
103
    top: 100%;
104
    left: 0;
105
    z-index: 1;
106
}
107

108
// theme
109
.p-menubar {
110
    padding: $horizontalMenuPadding;
111
    background: $horizontalMenuBg;
112
    color: $horizontalMenuTextColor;
113
    border: $horizontalMenuBorder;
114
    border-radius: $borderRadius;
115

116
    .p-menubar-root-list {
117
        outline: 0 none;
118

119
        > .p-menuitem {
120
            @include horizontal-rootmenuitem();
121
        }
122
    }
123

124
    .p-menuitem {
125
        @include menuitem();
126
    }
127

128
    .p-submenu-list {
129
        padding: $verticalMenuPadding;
130
        background: $overlayMenuBg;
131
        border: $overlayMenuBorder;
132
        box-shadow: $overlayMenuShadow;
133
        min-width: $menuWidth;
134
        border-radius: $borderRadius;
135

136
        .p-menuitem-separator {
137
            border-top: $divider;
138
            margin: $menuSeparatorMargin;
139
        }
140

141
        .p-submenu-icon {
142
            font-size: $menuitemSubmenuIconFontSize;
143
        }
144
    }
145

146
    &.p-menubar-mobile {
147
        .p-menubar-button {
148
            width: $actionIconWidth;
149
            height: $actionIconHeight;
150
            color: $horizontalMenuRootMenuitemIconColor;
151
            border-radius: $actionIconBorderRadius;
152
            transition: $actionIconTransition;
153
            outline-color: transparent;
154
        
155
            &:hover {
156
                color: $horizontalMenuRootMenuitemIconHoverColor;
157
                background: $horizontalMenuRootMenuitemHoverBg;
158
            }
159
        
160
            &:focus {
161
                @include focused();
162
            }
163
        }
164

165
        .p-menubar-root-list {
166
            padding: $verticalMenuPadding;
167
            background: $overlayMenuBg;
168
            border: $overlayMenuBorder;
169
            box-shadow: $overlayMenuShadow;
170
    
171
            .p-menuitem-separator {
172
                border-top: $divider;
173
                margin: $menuSeparatorMargin;
174
            }
175
    
176
            .p-submenu-icon {
177
                font-size: $menuitemSubmenuIconFontSize;
178
            }
179

180
            .p-menuitem {
181
                .p-menuitem-content {
182
                    .p-menuitem-link {
183
                        .p-submenu-icon {
184
                            margin-left: auto;
185
                            transition: transform $transitionDuration;
186
                        }
187
                    }
188
                }
189

190

191
                &.p-menuitem-active {
192
                    > .p-menuitem-content {
193
                        > .p-menuitem-link {
194
                            > .p-submenu-icon {
195
                                transform: rotate(-180deg);
196
                            }
197
                        }
198
                    }
199
                }
200
            }
201

202
            .p-submenu-list {
203
                .p-submenu-icon {
204
                    transition: transform $transitionDuration;
205
                    transform: rotate(90deg);
206
                }
207

208
                .p-menuitem-active {
209
                    > .p-menuitem-content {
210
                        > .p-menuitem-link {
211
                            > .p-submenu-icon {
212
                                transform: rotate(-90deg);
213
                            }
214
                        }
215
                    }
216
                }
217
            }
218
    
219
            @include nested-submenu-indents(nth($menuitemPadding, 1), 2, 10);
220
        }
221
    }
222
}