codecheck

1
// core
2
.p-megamenu {
3
    display: flex;
4
    position: relative;
5
}
6

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

13
.p-megamenu .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-megamenu .p-menuitem-text {
23
    line-height: 1;
24
}
25

26
.p-megamenu-panel {
27
    display: none;
28
    width: auto;
29
    z-index: 1;
30
    left: 0;
31
    min-width: 100%;
32
}
33

34
.p-megamenu-panel:not(.p-megamenu-mobile) {
35
    position: absolute;
36
}
37

38
.p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel {
39
    display: block;
40
}
41

42
.p-megamenu-submenu {
43
    margin: 0;
44
    padding: 0;
45
    list-style: none;
46
}
47

48
.p-megamenu-button {
49
    display: none;
50
    cursor: pointer;
51
    align-items: center;
52
    justify-content: center;
53
    text-decoration: none;
54
}
55

56
/* Horizontal */
57
.p-megamenu-horizontal {
58
    align-items: center;
59
}
60

61
.p-megamenu-horizontal .p-megamenu-root-list {
62
    display: flex;
63
    align-items: center;
64
    flex-wrap: wrap;
65
}
66

67
.p-megamenu-horizontal .p-megamenu-end {
68
    margin-left: auto;
69
    align-self: center;
70
}
71

72
/* Vertical */
73
.p-megamenu-vertical {
74
    flex-direction: column;
75
}
76

77
.p-megamenu-vertical:not(.p-megamenu-mobile) {
78
    display: inline-flex;
79
}
80

81
.p-megamenu-vertical .p-megamenu-root-list {
82
    flex-direction: column;
83
}
84

85
.p-megamenu-vertical:not(.p-megamenu-mobile) .p-megamenu-root-list > .p-menuitem-active > .p-megamenu-panel {
86
    left: 100%;
87
    top: 0;
88
}
89

90
.p-megamenu-vertical .p-megamenu-root-list > .p-menuitem > .p-menuitem-content > .p-menuitem-link > .p-submenu-icon {
91
    margin-left: auto;
92
}
93

94
.p-megamenu-grid {
95
    display: flex;
96
}
97

98
.p-megamenu-col-2,
99
.p-megamenu-col-3,
100
.p-megamenu-col-4,
101
.p-megamenu-col-6,
102
.p-megamenu-col-12 {
103
    flex: 0 0 auto;
104
    padding: 0.5rem;
105
}
106

107
.p-megamenu-col-2 {
108
    width: 16.6667%;
109
}
110

111
.p-megamenu-col-3 {
112
    width: 25%;
113
}
114

115
.p-megamenu-col-4 {
116
    width: 33.3333%;
117
}
118

119
.p-megamenu-col-6 {
120
    width: 50%;
121
}
122

123
.p-megamenu-col-12 {
124
    width: 100%;
125
}
126

127
.p-megamenu.p-megamenu-mobile .p-megamenu-button {
128
    display: flex;
129
}
130

131
.p-megamenu.p-megamenu-mobile .p-megamenu-root-list {
132
    position: absolute;
133
    display: none;
134
    width: 100%;
135
}
136

137
.p-megamenu.p-megamenu-mobile .p-submenu-list {
138
    width: 100%;
139
    position: static;
140
    box-shadow: none;
141
    border: 0 none;
142
}
143

144
.p-megamenu.p-megamenu-mobile .p-megamenu-root-list .p-menuitem {
145
    width: 100%;
146
    position: static;
147
}
148

149
.p-megamenu.p-megamenu-mobile-active .p-megamenu-root-list {
150
    display: flex;
151
    flex-direction: column;
152
    top: 100%;
153
    left: 0;
154
    z-index: 1;
155
}
156

157
.p-megamenu.p-megamenu-mobile .p-megamenu-grid {
158
    flex-wrap: wrap;
159
    overflow: auto;
160
    max-height: 90%;
161
}
162

163
// theme
164
.p-megamenu {
165
    padding: $horizontalMenuPadding;
166
    background: $horizontalMenuBg;
167
    color: $horizontalMenuTextColor;
168
    border: $horizontalMenuBorder;
169
    border-radius: $borderRadius;
170

171
    .p-megamenu-root-list {  
172
        outline: 0 none;
173
    }
174

175
    .p-menuitem {
176
        @include menuitem();
177
    }
178

179
    .p-megamenu-panel {
180
        background: $overlayMenuBg;
181
        color: $menuTextColor;
182
        border: $overlayMenuBorder;
183
        box-shadow: $overlayMenuShadow;
184
        border-radius: $borderRadius;
185
    }
186

187
    .p-submenu-header {
188
        margin: $submenuHeaderMargin;
189
        padding: $submenuHeaderPadding;
190
        color: $submenuHeaderTextColor;
191
        background: $submenuHeaderBg;
192
        font-weight: $submenuHeaderFontWeight;
193
        border-top-right-radius: $borderRadius; 
194
        border-top-left-radius: $borderRadius; 
195
    }
196

197
    .p-submenu-list {
198
        padding: $verticalMenuPadding;
199
        min-width: $menuWidth;
200

201
        .p-menuitem-separator {
202
            border-top: $divider;
203
            margin: $menuSeparatorMargin;
204
        }
205
    }
206

207
    &.p-megamenu-vertical {
208
        min-width: $menuWidth;
209
        padding: $verticalMenuPadding;
210
    }
211

212
    &.p-megamenu-horizontal {
213
        .p-megamenu-root-list {  
214
            > .p-menuitem {
215
                @include horizontal-rootmenuitem();
216
            }
217
        }
218
    }
219

220
    &.p-megamenu-mobile {
221
        &.p-megamenu-vertical {
222
            width: 100%;
223
            padding: $horizontalMenuPadding;
224
        }
225

226
        .p-megamenu-button {
227
            width: $actionIconWidth;
228
            height: $actionIconHeight;
229
            color: $horizontalMenuRootMenuitemIconColor;
230
            border-radius: $actionIconBorderRadius;
231
            transition: $actionIconTransition;
232
            outline-color: transparent;
233
        
234
            &:hover {
235
                color: $horizontalMenuRootMenuitemIconHoverColor;
236
                background: $horizontalMenuRootMenuitemHoverBg;
237
            }
238
        
239
            &:focus {
240
                @include focused();
241
            }
242
        }
243

244
        .p-megamenu-root-list {
245
            padding: $verticalMenuPadding;
246
            background: $overlayMenuBg;
247
            border: $overlayMenuBorder;
248
            box-shadow: $overlayMenuShadow;
249
    
250
            .p-menuitem-separator {
251
                border-top: $divider;
252
                margin: $menuSeparatorMargin;
253
            }
254
    
255
            .p-submenu-icon {
256
                font-size: $menuitemSubmenuIconFontSize;
257
            }
258

259
            .p-menuitem {
260
                .p-menuitem-content {
261
                    .p-menuitem-link {
262
                        .p-submenu-icon {
263
                            margin-left: auto;
264
                            transition: transform $transitionDuration;
265
                        }
266
                    }
267
                }
268

269

270
                &.p-menuitem-active {
271
                    > .p-menuitem-content {
272
                        > .p-menuitem-link {
273
                            > .p-submenu-icon {
274
                                transform: rotate(-180deg);
275
                            }
276
                        }
277
                    }
278
                }
279
            }
280

281
            .p-submenu-list {
282
                .p-submenu-icon {
283
                    transition: transform $transitionDuration;
284
                    transform: rotate(90deg);
285
                }
286

287
                .p-menuitem-active {
288
                    > .p-menuitem-content {
289
                        > .p-menuitem-link {
290
                            > .p-submenu-icon {
291
                                transform: rotate(-90deg);
292
                            }
293
                        }
294
                    }
295
                }
296
            }
297
    
298
            @include nested-submenu-indents(nth($menuitemPadding, 1), 2, 2);
299
        }
300
    }
301
}
302