@nine-lab/nine-ux 0.1.127 → 0.1.129
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/dist/css/nineMenu.css +63 -0
- package/dist/nine-ux.js +2106 -1999
- package/dist/nine-ux.umd.js +44 -25
- package/package.json +1 -1
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
/* --- Root: nine-side-menu --- */
|
|
2
|
+
:host(nine-side-menu) {
|
|
3
|
+
opacity: 0.95; position: fixed; top: 0; bottom: 0; left: 0;
|
|
4
|
+
display: flex; flex-direction: column; z-index: 1002;
|
|
5
|
+
color: #fff; font-weight: 200; background: #181A31;
|
|
6
|
+
box-shadow: 4px 4px 10px rgba(69, 65, 78, .06);
|
|
7
|
+
overflow: hidden; width: var(--min-width);
|
|
8
|
+
transition: width 0.2s ease-in-out;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
:host(nine-side-menu.collapse) { width: var(--min-width); }
|
|
12
|
+
:host(nine-side-menu:not(.collapse)), :host(nine-side-menu.collapse:hover) { width: var(--max-width); }
|
|
13
|
+
|
|
14
|
+
/* --- Body & Layout --- */
|
|
15
|
+
:host(nine-side-menu) .body-wrapper,
|
|
16
|
+
& nine-side-menu-body {
|
|
17
|
+
flex: 1; display: flex; flex-direction: column; overflow-y: auto; overflow-x: hidden;
|
|
18
|
+
margin-top: 10px; width: 100%;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
/* --- Child: Head, Foot --- */
|
|
22
|
+
:host(nine-side-menu-head), :host(nine-side-menu-foot) {
|
|
23
|
+
display: flex; align-items: center; padding: 10px; height: 50px; box-sizing: border-box;
|
|
24
|
+
& .logo-box { color: #f0f0f0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; width: 100%; transition: width 0.3s; }
|
|
25
|
+
& .icon-box { display: flex; align-items: center; cursor: pointer; & .icon { fill: var(--icon-color, #eee); transition: opacity 0.3s; display: none; opacity: 0; } }
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
/* Head/Foot Collapse Logic */
|
|
29
|
+
:host(.collapse) nine-side-menu-head, :host(.collapse) nine-side-menu-foot {
|
|
30
|
+
& .logo-box { width: 0; }
|
|
31
|
+
& .icon:first-child { display: block; opacity: 1; }
|
|
32
|
+
&:hover .logo-box { width: 100%; }
|
|
33
|
+
}
|
|
34
|
+
:host(:not(.collapse)) nine-side-menu-head, :host(:not(.collapse)) nine-side-menu-foot {
|
|
35
|
+
& .icon:nth-child(2) { display: block; opacity: 1; }
|
|
36
|
+
& .icon-box:hover .icon:nth-child(2) { display: none; }
|
|
37
|
+
& .icon-box:hover .icon:nth-child(3) { display: block; opacity: 1; }
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
/* --- Child: Item --- */
|
|
41
|
+
:host(nine-side-menu-item) {
|
|
42
|
+
display: flex; position: relative; cursor: pointer; color: #999; font-weight: bold;
|
|
43
|
+
max-height: 64px; opacity: 1; transition: max-height 0.3s, opacity 0.3s, height 0.3s;
|
|
44
|
+
&.group { height: 48px; & .menubar { font-weight: 700; color: #fff; } }
|
|
45
|
+
&:not(.group) { height: 32px; & li::before { content: '•'; margin-right: 8px; margin-left: 16px; } & .icon, & .expand-icon { display: none; } }
|
|
46
|
+
&.active { color: #9FF2FF; background: rgba(255,255,255,0.05); }
|
|
47
|
+
&.hide { max-height: 0; opacity: 0; overflow: hidden; }
|
|
48
|
+
& li { display: flex; align-items: center; width: 100%; list-style: none; padding: 0 12px; box-sizing: border-box; }
|
|
49
|
+
& .menubar { margin-left: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: opacity 0.2s; }
|
|
50
|
+
& .icon { width: 18px; height: 18px; background-repeat: no-repeat; background-size: contain; }
|
|
51
|
+
& .expand-icon { width: 12px; height: 12px; position: absolute; right: 15px; background-repeat: no-repeat; background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="white" viewBox="0 0 16 16"><path d="M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z"/></svg>'); transition: transform 0.3s; }
|
|
52
|
+
&:not(.expand) .expand-icon { transform: rotate(180deg); }
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
/* Item Collapse Logic */
|
|
56
|
+
:host(.collapse:not(:hover)) nine-side-menu-item {
|
|
57
|
+
& li { justify-content: center; padding: 0; }
|
|
58
|
+
& .menubar, & .expand-icon { display: none; }
|
|
59
|
+
& .icon { width: 22px; height: 22px; }
|
|
60
|
+
&:not(.group) { height: 0; opacity: 0; }
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
@keyframes bounce { 0%, 20%, 50%, 80%, 100% { transform: translateX(0); } 40% { transform: translateX(-5px); } 60% { transform: translateX(5px); } }
|