@nine-lab/nine-ux 0.1.138 → 0.1.140
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 +101 -11
- package/dist/nine-ux.js +208 -168
- package/dist/nine-ux.umd.js +57 -25
- package/package.json +1 -1
package/dist/css/nineMenu.css
CHANGED
|
@@ -34,16 +34,6 @@
|
|
|
34
34
|
|
|
35
35
|
/* --- [3] 하위 요소 내부 UI 제어 (중요: 자식 내부는 슬롯 선택자로 제어) --- */
|
|
36
36
|
|
|
37
|
-
/* Head/Foot 내부 텍스트 및 아이콘 */
|
|
38
|
-
::slotted(nine-side-menu-head) .logo-box, ::slotted(nine-side-menu-foot) .logo-box {
|
|
39
|
-
color: #f0f0f0; white-space: nowrap; overflow: hidden;
|
|
40
|
-
text-overflow: ellipsis; text-align: center; width: 100%;
|
|
41
|
-
transition: width 0.3s ease-out;
|
|
42
|
-
}
|
|
43
|
-
|
|
44
|
-
::slotted(nine-side-menu-head) .icon-box, ::slotted(nine-side-menu-foot) .icon-box {
|
|
45
|
-
display: flex; align-items: center;
|
|
46
|
-
}
|
|
47
37
|
|
|
48
38
|
/* Collapse 상태 시 UI 숨김 처리 */
|
|
49
39
|
:host(.collapse:not(.hover)) ::slotted(nine-side-menu-head) .logo-box { width: 0; opacity: 0; }
|
|
@@ -63,4 +53,104 @@
|
|
|
63
53
|
}
|
|
64
54
|
|
|
65
55
|
/* 애니메이션 */
|
|
66
|
-
@keyframes bounce { 0%, 20%, 50%, 80%, 100% { transform: translateX(0); } 40% { transform: translateX(-5px); } 60% { transform: translateX(5px); } }
|
|
56
|
+
@keyframes bounce { 0%, 20%, 50%, 80%, 100% { transform: translateX(0); } 40% { transform: translateX(-5px); } 60% { transform: translateX(5px); } }
|
|
57
|
+
|
|
58
|
+
|
|
59
|
+
|
|
60
|
+
|
|
61
|
+
|
|
62
|
+
/* ==========================================================================
|
|
63
|
+
[1] 기본 컴포넌트 구조 스타일 (:host 대신 태그명 직접 지정)
|
|
64
|
+
========================================================================== */
|
|
65
|
+
nine-side-menu-head {
|
|
66
|
+
display: flex;
|
|
67
|
+
align-items: center; /* 수직 중앙 정렬 */
|
|
68
|
+
padding: 10px; /* 여백 추가 */
|
|
69
|
+
height: 40px;
|
|
70
|
+
justify-content: center;
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
/* ==========================================================================
|
|
74
|
+
[2] 로고 박스 (Logo Box) 영역 및 애니메이션
|
|
75
|
+
========================================================================== */
|
|
76
|
+
nine-side-menu-head .logo-box {
|
|
77
|
+
color: #f0f0f0;
|
|
78
|
+
white-space: nowrap;
|
|
79
|
+
overflow: hidden;
|
|
80
|
+
text-overflow: ellipsis;
|
|
81
|
+
text-align: center;
|
|
82
|
+
width: 100%;
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
/* 접힌 상태(.collapse)일 때 로고 숨기기 */
|
|
86
|
+
nine-side-menu.collapse nine-side-menu-head .logo-box {
|
|
87
|
+
width: 0;
|
|
88
|
+
transition: width 0.5s ease-out;
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
/* 펼쳐진 상태이거나, 접혔어도 마우스 오버(hover) 상태이면 로고 보여주기 */
|
|
92
|
+
nine-side-menu:not(.collapse) nine-side-menu-head .logo-box,
|
|
93
|
+
nine-side-menu.hover nine-side-menu-head .logo-box {
|
|
94
|
+
width: 100%;
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
/* ==========================================================================
|
|
98
|
+
[3] 아이콘 박스 (Icon Box) 및 SVG 아이콘 제어
|
|
99
|
+
========================================================================== */
|
|
100
|
+
nine-side-menu-head .icon-box {
|
|
101
|
+
display: flex;
|
|
102
|
+
align-items: center;
|
|
103
|
+
overflow: hidden;
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
nine-side-menu-head .icon {
|
|
107
|
+
fill: var(--icon-color, #eee); /* 아이콘 색상 기본값 지정 */
|
|
108
|
+
cursor: pointer;
|
|
109
|
+
transition: opacity 0.3s ease-in-out;
|
|
110
|
+
|
|
111
|
+
/* 💡 기본적으로 모든 아이콘은 숨겨두고 opacity를 0으로 세팅 */
|
|
112
|
+
display: none;
|
|
113
|
+
opacity: 0;
|
|
114
|
+
}
|
|
115
|
+
|
|
116
|
+
/* --------------------------------------------------------------------------
|
|
117
|
+
[케이스 A] 메뉴가 접혀있을 때 (.collapse)
|
|
118
|
+
--------------------------------================================---------- */
|
|
119
|
+
/* 첫 번째 아이콘(점 3개) 노출 */
|
|
120
|
+
nine-side-menu.collapse nine-side-menu-head .icon:nth-of-type(1) {
|
|
121
|
+
display: block;
|
|
122
|
+
opacity: 1;
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
/* --------------------------------------------------------------------------
|
|
126
|
+
[케이스 B] 메뉴가 펼쳐져 있을 때 (:not(.collapse))
|
|
127
|
+
--------------------------------================================---------- */
|
|
128
|
+
/* 기본 상태: 두 번째 아이콘 노출, 첫 번째/세 번째 숨김 */
|
|
129
|
+
nine-side-menu:not(.collapse) nine-side-menu-head .icon:nth-of-type(1) {
|
|
130
|
+
display: none;
|
|
131
|
+
opacity: 0;
|
|
132
|
+
}
|
|
133
|
+
|
|
134
|
+
nine-side-menu:not(.collapse) nine-side-menu-head .icon:nth-of-type(2) {
|
|
135
|
+
display: block;
|
|
136
|
+
opacity: 1;
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
nine-side-menu:not(.collapse) nine-side-menu-head .icon:nth-of-type(3) {
|
|
140
|
+
display: none;
|
|
141
|
+
opacity: 0;
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
/* --------------------------------------------------------------------------
|
|
145
|
+
[케이스 C] 펼쳐진 상태에서 아이콘 박스에 마우스 올렸을 때 (:hover)
|
|
146
|
+
--------------------------------================================---------- */
|
|
147
|
+
/* 두 번째 아이콘 숨기고, 세 번째 아이콘 노출 */
|
|
148
|
+
nine-side-menu:not(.collapse) nine-side-menu-head .icon-box:hover .icon:nth-of-type(2) {
|
|
149
|
+
display: none;
|
|
150
|
+
opacity: 0;
|
|
151
|
+
}
|
|
152
|
+
|
|
153
|
+
nine-side-menu:not(.collapse) nine-side-menu-head .icon-box:hover .icon:nth-of-type(3) {
|
|
154
|
+
display: block;
|
|
155
|
+
opacity: 1;
|
|
156
|
+
}
|