@flusys/ng-layout 4.0.0-rc → 4.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +138 -15
- package/assets/layout/_footer.scss +7 -0
- package/assets/layout/_responsive.scss +18 -0
- package/assets/layout/_topbar.scss +159 -128
- package/assets/layout/_topbar_nav.scss +350 -0
- package/assets/layout/layout.scss +2 -1
- package/fesm2022/flusys-ng-layout.mjs +1031 -468
- package/fesm2022/flusys-ng-layout.mjs.map +1 -1
- package/package.json +5 -4
- package/types/flusys-ng-layout.d.ts +63 -7
|
@@ -0,0 +1,350 @@
|
|
|
1
|
+
@use "mixins" as *;
|
|
2
|
+
|
|
3
|
+
// Define common values as variables
|
|
4
|
+
$submenu-box-shadow:
|
|
5
|
+
0px 3px 5px rgba(0, 0, 0, 0.02),
|
|
6
|
+
0px 0px 2px rgba(0, 0, 0, 0.05),
|
|
7
|
+
0px 1px 4px rgba(0, 0, 0, 0.08);
|
|
8
|
+
$submenu-padding: 0.5rem;
|
|
9
|
+
$submenu-min-width: 200px;
|
|
10
|
+
$submenu-margin-left: 8px;
|
|
11
|
+
$submenu-transition-delay: 200ms;
|
|
12
|
+
$submenu-font-size: 0.813rem;
|
|
13
|
+
$submenu-icon-margin: 0.5rem;
|
|
14
|
+
|
|
15
|
+
// Mixin for submenu base styles
|
|
16
|
+
@mixin submenu-base($z-index, $position: absolute) {
|
|
17
|
+
display: flex;
|
|
18
|
+
visibility: hidden;
|
|
19
|
+
pointer-events: none;
|
|
20
|
+
position: $position;
|
|
21
|
+
background-color: var(--surface-overlay);
|
|
22
|
+
border: 1px solid var(--surface-border);
|
|
23
|
+
border-radius: var(--content-border-radius);
|
|
24
|
+
box-shadow: $submenu-box-shadow;
|
|
25
|
+
flex-direction: column;
|
|
26
|
+
gap: 0;
|
|
27
|
+
padding: $submenu-padding;
|
|
28
|
+
margin: 0;
|
|
29
|
+
min-width: $submenu-min-width;
|
|
30
|
+
z-index: $z-index;
|
|
31
|
+
list-style: none;
|
|
32
|
+
max-height: none !important;
|
|
33
|
+
overflow: visible !important;
|
|
34
|
+
transition:
|
|
35
|
+
visibility 0s $submenu-transition-delay,
|
|
36
|
+
pointer-events 0s $submenu-transition-delay;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
// Mixin for showing submenu on hover
|
|
40
|
+
@mixin show-submenu {
|
|
41
|
+
visibility: visible;
|
|
42
|
+
pointer-events: auto;
|
|
43
|
+
transition: none;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
// Mixin for anchor link styles in submenus
|
|
47
|
+
@mixin submenu-anchor {
|
|
48
|
+
display: flex;
|
|
49
|
+
align-items: center;
|
|
50
|
+
padding: 0.5rem 1rem;
|
|
51
|
+
justify-content: flex-start;
|
|
52
|
+
border-radius: 0;
|
|
53
|
+
width: 100%;
|
|
54
|
+
color: var(--text-color);
|
|
55
|
+
text-decoration: none;
|
|
56
|
+
font-size: $submenu-font-size;
|
|
57
|
+
font-weight: 500;
|
|
58
|
+
transition: background-color var(--element-transition-duration);
|
|
59
|
+
|
|
60
|
+
.layout-menuitem-icon {
|
|
61
|
+
margin-right: $submenu-icon-margin;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
.layout-menuitem-text {
|
|
65
|
+
color: inherit;
|
|
66
|
+
flex: 1;
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
&:hover {
|
|
70
|
+
background-color: var(--surface-hover);
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
&.active-route {
|
|
74
|
+
background-color: var(--p-primary-color);
|
|
75
|
+
color: var(--p-primary-contrast-color);
|
|
76
|
+
}
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
// Mixin to generate nested submenu levels 2-6
|
|
80
|
+
@mixin nested-submenu-levels {
|
|
81
|
+
// Level 2+ nesting: Generate for 5 levels (2-6) with recursion
|
|
82
|
+
> ul {
|
|
83
|
+
@include submenu-base(1002, absolute);
|
|
84
|
+
left: 97%;
|
|
85
|
+
top: 0;
|
|
86
|
+
right: auto;
|
|
87
|
+
bottom: auto;
|
|
88
|
+
margin-left: $submenu-margin-left;
|
|
89
|
+
|
|
90
|
+
> li {
|
|
91
|
+
margin: 0;
|
|
92
|
+
white-space: nowrap;
|
|
93
|
+
display: flex;
|
|
94
|
+
align-items: center;
|
|
95
|
+
position: relative;
|
|
96
|
+
overflow: visible;
|
|
97
|
+
|
|
98
|
+
> a {
|
|
99
|
+
@include submenu-anchor;
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
// Level 3 submenu
|
|
103
|
+
> ul {
|
|
104
|
+
@include submenu-base(1003, absolute);
|
|
105
|
+
left: 97%;
|
|
106
|
+
top: 0;
|
|
107
|
+
right: auto;
|
|
108
|
+
bottom: auto;
|
|
109
|
+
margin-left: $submenu-margin-left;
|
|
110
|
+
|
|
111
|
+
> li {
|
|
112
|
+
margin: 0;
|
|
113
|
+
white-space: nowrap;
|
|
114
|
+
display: flex;
|
|
115
|
+
align-items: center;
|
|
116
|
+
position: relative;
|
|
117
|
+
overflow: visible;
|
|
118
|
+
|
|
119
|
+
> a {
|
|
120
|
+
@include submenu-anchor;
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
// Level 4 submenu
|
|
124
|
+
> ul {
|
|
125
|
+
@include submenu-base(1004, absolute);
|
|
126
|
+
left: 97%;
|
|
127
|
+
top: 0;
|
|
128
|
+
right: auto;
|
|
129
|
+
bottom: auto;
|
|
130
|
+
margin-left: $submenu-margin-left;
|
|
131
|
+
|
|
132
|
+
> li {
|
|
133
|
+
margin: 0;
|
|
134
|
+
white-space: nowrap;
|
|
135
|
+
display: flex;
|
|
136
|
+
align-items: center;
|
|
137
|
+
position: relative;
|
|
138
|
+
overflow: visible;
|
|
139
|
+
|
|
140
|
+
> a {
|
|
141
|
+
@include submenu-anchor;
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
// Level 5 submenu
|
|
145
|
+
> ul {
|
|
146
|
+
@include submenu-base(1005, absolute);
|
|
147
|
+
left: 97%;
|
|
148
|
+
top: 0;
|
|
149
|
+
right: auto;
|
|
150
|
+
bottom: auto;
|
|
151
|
+
margin-left: $submenu-margin-left;
|
|
152
|
+
|
|
153
|
+
> li {
|
|
154
|
+
margin: 0;
|
|
155
|
+
white-space: nowrap;
|
|
156
|
+
display: flex;
|
|
157
|
+
align-items: center;
|
|
158
|
+
position: relative;
|
|
159
|
+
overflow: visible;
|
|
160
|
+
|
|
161
|
+
> a {
|
|
162
|
+
@include submenu-anchor;
|
|
163
|
+
}
|
|
164
|
+
|
|
165
|
+
// Level 6 submenu
|
|
166
|
+
> ul {
|
|
167
|
+
@include submenu-base(1006, absolute);
|
|
168
|
+
left: 97%;
|
|
169
|
+
top: 0;
|
|
170
|
+
right: auto;
|
|
171
|
+
bottom: auto;
|
|
172
|
+
margin-left: $submenu-margin-left;
|
|
173
|
+
}
|
|
174
|
+
|
|
175
|
+
// Show Level 6 submenu on hover
|
|
176
|
+
&:hover > ul,
|
|
177
|
+
> ul:hover {
|
|
178
|
+
@include show-submenu;
|
|
179
|
+
}
|
|
180
|
+
}
|
|
181
|
+
}
|
|
182
|
+
|
|
183
|
+
// Show Level 5 submenu on hover
|
|
184
|
+
&:hover > ul,
|
|
185
|
+
> ul:hover {
|
|
186
|
+
@include show-submenu;
|
|
187
|
+
}
|
|
188
|
+
}
|
|
189
|
+
}
|
|
190
|
+
|
|
191
|
+
// Show Level 4 submenu on hover
|
|
192
|
+
&:hover > ul,
|
|
193
|
+
> ul:hover {
|
|
194
|
+
@include show-submenu;
|
|
195
|
+
}
|
|
196
|
+
}
|
|
197
|
+
}
|
|
198
|
+
|
|
199
|
+
// Show Level 3 submenu on hover
|
|
200
|
+
&:hover > ul,
|
|
201
|
+
> ul:hover {
|
|
202
|
+
@include show-submenu;
|
|
203
|
+
}
|
|
204
|
+
}
|
|
205
|
+
}
|
|
206
|
+
|
|
207
|
+
// Show Level 2+ submenus on hover
|
|
208
|
+
&:hover > ul,
|
|
209
|
+
> ul:hover {
|
|
210
|
+
@include show-submenu;
|
|
211
|
+
}
|
|
212
|
+
}
|
|
213
|
+
|
|
214
|
+
.layout-topbar-nav-horizontal {
|
|
215
|
+
display: flex;
|
|
216
|
+
flex-direction: row;
|
|
217
|
+
align-items: center;
|
|
218
|
+
flex: 1 1 auto;
|
|
219
|
+
padding: 0 1rem;
|
|
220
|
+
overflow-x: auto;
|
|
221
|
+
overflow-y: visible;
|
|
222
|
+
-webkit-overflow-scrolling: touch;
|
|
223
|
+
scrollbar-width: none;
|
|
224
|
+
|
|
225
|
+
&::-webkit-scrollbar {
|
|
226
|
+
display: none;
|
|
227
|
+
}
|
|
228
|
+
|
|
229
|
+
&.layout-topbar-nav-hidden {
|
|
230
|
+
display: none;
|
|
231
|
+
}
|
|
232
|
+
|
|
233
|
+
.layout-menu {
|
|
234
|
+
display: flex;
|
|
235
|
+
flex-direction: row;
|
|
236
|
+
margin: 0;
|
|
237
|
+
padding: 0;
|
|
238
|
+
align-items: center;
|
|
239
|
+
gap: 0.25rem;
|
|
240
|
+
flex-shrink: 0;
|
|
241
|
+
|
|
242
|
+
// Reset sidebar menu nested margins in topbar mode
|
|
243
|
+
a {
|
|
244
|
+
margin-left: 0 !important;
|
|
245
|
+
}
|
|
246
|
+
|
|
247
|
+
> ul {
|
|
248
|
+
display: flex;
|
|
249
|
+
flex-direction: row;
|
|
250
|
+
gap: 0.25rem;
|
|
251
|
+
margin: 0;
|
|
252
|
+
padding: 0;
|
|
253
|
+
list-style: none;
|
|
254
|
+
align-items: center;
|
|
255
|
+
flex-shrink: 0;
|
|
256
|
+
// Override menuitem component styles for topbar
|
|
257
|
+
max-height: none !important;
|
|
258
|
+
overflow: visible !important;
|
|
259
|
+
|
|
260
|
+
> li {
|
|
261
|
+
margin-top: 0;
|
|
262
|
+
white-space: nowrap;
|
|
263
|
+
flex-shrink: 0;
|
|
264
|
+
position: relative;
|
|
265
|
+
|
|
266
|
+
// Create invisible hover bridge between parent and submenu
|
|
267
|
+
&::before {
|
|
268
|
+
content: "";
|
|
269
|
+
position: absolute;
|
|
270
|
+
top: 100%;
|
|
271
|
+
left: 0;
|
|
272
|
+
right: 0;
|
|
273
|
+
height: 12px;
|
|
274
|
+
pointer-events: auto;
|
|
275
|
+
z-index: 1000;
|
|
276
|
+
}
|
|
277
|
+
|
|
278
|
+
// Root level menu item anchor
|
|
279
|
+
> a {
|
|
280
|
+
display: flex;
|
|
281
|
+
align-items: center;
|
|
282
|
+
padding: 0.5rem 0.75rem;
|
|
283
|
+
font-size: 0.813rem;
|
|
284
|
+
white-space: nowrap;
|
|
285
|
+
border-radius: var(--content-border-radius);
|
|
286
|
+
transition: background-color var(--element-transition-duration);
|
|
287
|
+
|
|
288
|
+
.layout-menuitem-icon {
|
|
289
|
+
margin-right: 0.5rem;
|
|
290
|
+
}
|
|
291
|
+
|
|
292
|
+
.layout-submenu-toggler {
|
|
293
|
+
display: inline;
|
|
294
|
+
margin-left: 0.5rem;
|
|
295
|
+
font-size: 0.75rem;
|
|
296
|
+
}
|
|
297
|
+
|
|
298
|
+
&:hover {
|
|
299
|
+
background-color: var(--surface-hover);
|
|
300
|
+
}
|
|
301
|
+
|
|
302
|
+
&.active-route {
|
|
303
|
+
background-color: var(--p-primary-color);
|
|
304
|
+
color: var(--p-primary-contrast-color);
|
|
305
|
+
}
|
|
306
|
+
}
|
|
307
|
+
|
|
308
|
+
// Level 1: Direct submenu (fixed positioning)
|
|
309
|
+
> ul {
|
|
310
|
+
@include submenu-base(1001, fixed);
|
|
311
|
+
bottom: auto;
|
|
312
|
+
left: var(--submenu-left);
|
|
313
|
+
top: var(--submenu-top);
|
|
314
|
+
right: auto;
|
|
315
|
+
|
|
316
|
+
// Level 1 menu items
|
|
317
|
+
> li {
|
|
318
|
+
margin: 0;
|
|
319
|
+
margin-top: 0px !important;
|
|
320
|
+
white-space: nowrap;
|
|
321
|
+
display: flex;
|
|
322
|
+
align-items: center;
|
|
323
|
+
position: relative;
|
|
324
|
+
overflow: visible;
|
|
325
|
+
|
|
326
|
+
> a {
|
|
327
|
+
@include submenu-anchor;
|
|
328
|
+
}
|
|
329
|
+
|
|
330
|
+
// Level 2 and beyond: Nested submenus (absolute positioning)
|
|
331
|
+
@include nested-submenu-levels;
|
|
332
|
+
}
|
|
333
|
+
}
|
|
334
|
+
|
|
335
|
+
// Show Level 1 submenu on hover or active state
|
|
336
|
+
&:hover > ul,
|
|
337
|
+
&.active-menuitem > ul,
|
|
338
|
+
> ul:hover {
|
|
339
|
+
@include show-submenu;
|
|
340
|
+
}
|
|
341
|
+
|
|
342
|
+
// Handle active state with children
|
|
343
|
+
&.active-menuitem > a {
|
|
344
|
+
background-color: var(--p-primary-color);
|
|
345
|
+
color: var(--p-primary-contrast-color);
|
|
346
|
+
}
|
|
347
|
+
}
|
|
348
|
+
}
|
|
349
|
+
}
|
|
350
|
+
}
|