newtil-css 0.2.76 → 0.2.78
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/LICENSE +21 -21
- package/README.md +237 -42
- package/dist/components.css +6 -0
- package/dist/components.js +3 -0
- package/dist/index.d.ts +4 -7
- package/dist/index.js +4 -8
- package/dist/js/n-layout.js +1 -1
- package/dist/style.css +8 -12
- package/dist/utils.css +3 -0
- package/dist/utils.js +3 -0
- package/index.d.ts +4 -7
- package/index.js +4 -8
- package/package.json +64 -53
- package/dist/types/n-bar.d.ts +0 -3
- package/dist/types/n-layout.d.ts +0 -3
package/LICENSE
CHANGED
|
@@ -1,21 +1,21 @@
|
|
|
1
|
-
MIT License
|
|
2
|
-
|
|
3
|
-
Copyright (c) 2024 newlecture-corp
|
|
4
|
-
|
|
5
|
-
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
-
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
-
in the Software without restriction, including without limitation the rights
|
|
8
|
-
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
-
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
-
furnished to do so, subject to the following conditions:
|
|
11
|
-
|
|
12
|
-
The above copyright notice and this permission notice shall be included in all
|
|
13
|
-
copies or substantial portions of the Software.
|
|
14
|
-
|
|
15
|
-
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
-
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
-
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
-
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
-
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
-
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
-
SOFTWARE.
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2024 newlecture-corp
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
package/README.md
CHANGED
|
@@ -1,42 +1,237 @@
|
|
|
1
|
-
<
|
|
2
|
-
<
|
|
3
|
-
<
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
</
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
<p>
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
1
|
+
<div align="center">
|
|
2
|
+
<a href="https://newlecture-corp.github.io/newtil-css/">
|
|
3
|
+
<img
|
|
4
|
+
src="https://github.com/newlecture-corp/newtil-css/blob/main/docs/public/logo.png"
|
|
5
|
+
alt="newtil-css"
|
|
6
|
+
height="120"
|
|
7
|
+
/>
|
|
8
|
+
</a>
|
|
9
|
+
|
|
10
|
+
<h1>Newtil CSS</h1>
|
|
11
|
+
|
|
12
|
+
<p>
|
|
13
|
+
<strong>유틸리티 중심의 현대적인 CSS 라이브러리</strong>
|
|
14
|
+
</p>
|
|
15
|
+
|
|
16
|
+
<p>
|
|
17
|
+
<a href="https://newlecture-corp.github.io/newtil-css/">
|
|
18
|
+
<img src="https://img.shields.io/badge/docs-visit-blue?style=flat-square" alt="Documentation" />
|
|
19
|
+
</a>
|
|
20
|
+
<a href="https://github.com/newlecture-corp/newtil-css/blob/main/LICENSE">
|
|
21
|
+
<img src="https://img.shields.io/badge/license-MIT-green?style=flat-square" alt="License" />
|
|
22
|
+
</a>
|
|
23
|
+
<a href="https://www.newlecture.com">
|
|
24
|
+
<img src="https://img.shields.io/badge/by-뉴렉처-orange?style=flat-square" alt="Newlecture" />
|
|
25
|
+
</a>
|
|
26
|
+
</p>
|
|
27
|
+
</div>
|
|
28
|
+
|
|
29
|
+
---
|
|
30
|
+
|
|
31
|
+
## ✨ 주요 특징
|
|
32
|
+
|
|
33
|
+
### 🎯 순수 CSS와 100% 동일한 명명 규칙
|
|
34
|
+
CSS 속성을 그대로 클래스명으로 사용하여 학습 곡선을 최소화합니다.
|
|
35
|
+
|
|
36
|
+
```html
|
|
37
|
+
<!-- CSS: display: flex; justify-content: center; -->
|
|
38
|
+
<div class="d:flex jc:center">...</div>
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
### 🎨 Google Icons 완벽 지원
|
|
42
|
+
Google Material Icons를 간편하게 사용할 수 있습니다.
|
|
43
|
+
|
|
44
|
+
```html
|
|
45
|
+
<i class="n-icon">home</i>
|
|
46
|
+
<i class="n-icon">search</i>
|
|
47
|
+
```
|
|
48
|
+
|
|
49
|
+
### 🔧 CSS 변수 기반 컴포넌트
|
|
50
|
+
사용자 정의가 쉬운 유연한 컴포넌트 시스템을 제공합니다.
|
|
51
|
+
|
|
52
|
+
```css
|
|
53
|
+
.n-section {
|
|
54
|
+
--padding: var(--space-4);
|
|
55
|
+
--bd-radius: var(--space-3);
|
|
56
|
+
}
|
|
57
|
+
```
|
|
58
|
+
|
|
59
|
+
### 🌓 다크 모드 자동 지원
|
|
60
|
+
`prefers-color-scheme`을 통해 자동으로 다크 모드를 지원합니다.
|
|
61
|
+
|
|
62
|
+
### 📱 반응형 디자인
|
|
63
|
+
모바일부터 데스크톱까지 모든 화면 크기에 최적화되어 있습니다.
|
|
64
|
+
|
|
65
|
+
---
|
|
66
|
+
|
|
67
|
+
## 🚀 빠른 시작
|
|
68
|
+
|
|
69
|
+
### CDN으로 설치
|
|
70
|
+
```html
|
|
71
|
+
<link href="https://newlecture-corp.github.io/newtil-css/dist/style.css" rel="stylesheet" />
|
|
72
|
+
```
|
|
73
|
+
|
|
74
|
+
### npm으로 설치
|
|
75
|
+
```bash
|
|
76
|
+
npm install newtil-css
|
|
77
|
+
```
|
|
78
|
+
|
|
79
|
+
### 기본 사용법
|
|
80
|
+
```html
|
|
81
|
+
<!DOCTYPE html>
|
|
82
|
+
<html lang="ko">
|
|
83
|
+
<head>
|
|
84
|
+
<link href="path/to/newtil-css/style.css" rel="stylesheet" />
|
|
85
|
+
</head>
|
|
86
|
+
<body>
|
|
87
|
+
<div class="n-layout">
|
|
88
|
+
<header class="n-header">
|
|
89
|
+
<h1>My App</h1>
|
|
90
|
+
</header>
|
|
91
|
+
<main>
|
|
92
|
+
<section class="n-section section-type:card">
|
|
93
|
+
<h1>Welcome</h1>
|
|
94
|
+
<p>Newtil CSS로 빠르게 시작하세요!</p>
|
|
95
|
+
</section>
|
|
96
|
+
</main>
|
|
97
|
+
</div>
|
|
98
|
+
</body>
|
|
99
|
+
</html>
|
|
100
|
+
```
|
|
101
|
+
|
|
102
|
+
---
|
|
103
|
+
|
|
104
|
+
## 📦 주요 컴포넌트
|
|
105
|
+
|
|
106
|
+
### Layout
|
|
107
|
+
```html
|
|
108
|
+
<div class="n-layout">
|
|
109
|
+
<header class="n-header">...</header>
|
|
110
|
+
<aside>...</aside>
|
|
111
|
+
<main>...</main>
|
|
112
|
+
<footer>...</footer>
|
|
113
|
+
</div>
|
|
114
|
+
```
|
|
115
|
+
|
|
116
|
+
### Section
|
|
117
|
+
```html
|
|
118
|
+
<section class="n-section section-type:card">
|
|
119
|
+
<h1>제목</h1>
|
|
120
|
+
<div>내용</div>
|
|
121
|
+
</section>
|
|
122
|
+
```
|
|
123
|
+
|
|
124
|
+
**Section Types:**
|
|
125
|
+
- `section-type:card` - 경계선이 있는 카드 스타일
|
|
126
|
+
- `section-type:glass` - Glassmorphism 효과
|
|
127
|
+
- `section-type:elevated` - 그림자 효과
|
|
128
|
+
|
|
129
|
+
### List
|
|
130
|
+
```html
|
|
131
|
+
<ul class="n-list list-sep:solid list-dir:column">
|
|
132
|
+
<li>항목 1</li>
|
|
133
|
+
<li>항목 2</li>
|
|
134
|
+
<li>항목 3</li>
|
|
135
|
+
</ul>
|
|
136
|
+
```
|
|
137
|
+
|
|
138
|
+
### Button
|
|
139
|
+
```html
|
|
140
|
+
<button class="n-btn btn-color:main btn-style:fill">
|
|
141
|
+
클릭하세요
|
|
142
|
+
</button>
|
|
143
|
+
```
|
|
144
|
+
|
|
145
|
+
### Form
|
|
146
|
+
```html
|
|
147
|
+
<input class="n-input" type="text" placeholder="입력하세요" />
|
|
148
|
+
<select class="n-select">
|
|
149
|
+
<option>옵션 1</option>
|
|
150
|
+
</select>
|
|
151
|
+
```
|
|
152
|
+
|
|
153
|
+
---
|
|
154
|
+
|
|
155
|
+
## 🎨 유틸리티 클래스
|
|
156
|
+
|
|
157
|
+
### 레이아웃
|
|
158
|
+
```html
|
|
159
|
+
<div class="d:flex jc:center ai:center gap:4">...</div>
|
|
160
|
+
<div class="d:grid gtc:3">...</div>
|
|
161
|
+
```
|
|
162
|
+
|
|
163
|
+
### 간격
|
|
164
|
+
```html
|
|
165
|
+
<div class="p:4 m:2">...</div>
|
|
166
|
+
<div class="px:4 py:2">...</div>
|
|
167
|
+
```
|
|
168
|
+
|
|
169
|
+
### 색상
|
|
170
|
+
```html
|
|
171
|
+
<div class="c:main bg:base-1">...</div>
|
|
172
|
+
```
|
|
173
|
+
|
|
174
|
+
### 크기
|
|
175
|
+
```html
|
|
176
|
+
<div class="w:100p h:50vh">...</div>
|
|
177
|
+
```
|
|
178
|
+
|
|
179
|
+
---
|
|
180
|
+
|
|
181
|
+
## 📚 문서
|
|
182
|
+
|
|
183
|
+
자세한 사용법과 예제는 [공식 문서](https://newlecture-corp.github.io/newtil-css/)를 참고하세요.
|
|
184
|
+
|
|
185
|
+
### 주요 문서
|
|
186
|
+
- [컴포넌트 가이드](https://newlecture-corp.github.io/newtil-css/components)
|
|
187
|
+
- [유틸리티 클래스](https://newlecture-corp.github.io/newtil-css/utilities)
|
|
188
|
+
- [커스터마이징](https://newlecture-corp.github.io/newtil-css/customization)
|
|
189
|
+
- [예제 모음](https://newlecture-corp.github.io/newtil-css/examples)
|
|
190
|
+
|
|
191
|
+
---
|
|
192
|
+
|
|
193
|
+
## 🤝 기여하기
|
|
194
|
+
|
|
195
|
+
기여는 언제나 환영합니다!
|
|
196
|
+
|
|
197
|
+
1. Fork the Project
|
|
198
|
+
2. Create your Feature Branch (`git checkout -b feature/AmazingFeature`)
|
|
199
|
+
3. Commit your Changes (`git commit -m 'Add some AmazingFeature'`)
|
|
200
|
+
4. Push to the Branch (`git push origin feature/AmazingFeature`)
|
|
201
|
+
5. Open a Pull Request
|
|
202
|
+
|
|
203
|
+
---
|
|
204
|
+
|
|
205
|
+
## 📖 참고 자료
|
|
206
|
+
|
|
207
|
+
- [MDN Web Docs](https://developer.mozilla.org/) - CSS 레퍼런스
|
|
208
|
+
- [Google Material Icons](https://fonts.google.com/icons) - 아이콘 라이브러리
|
|
209
|
+
- [CSS Tricks](https://css-tricks.com/) - CSS 팁과 트릭
|
|
210
|
+
|
|
211
|
+
---
|
|
212
|
+
|
|
213
|
+
## 📄 라이선스
|
|
214
|
+
|
|
215
|
+
이 프로젝트는 MIT 라이선스 하에 배포됩니다. 자세한 내용은 [LICENSE](LICENSE) 파일을 참고하세요.
|
|
216
|
+
|
|
217
|
+
---
|
|
218
|
+
|
|
219
|
+
## 👨💻 제작자
|
|
220
|
+
|
|
221
|
+
**뉴렉처 (Newlecture)**
|
|
222
|
+
|
|
223
|
+
- Website: [https://www.newlecture.com](https://www.newlecture.com)
|
|
224
|
+
- GitHub: [@newlecture-corp](https://github.com/newlecture-corp)
|
|
225
|
+
|
|
226
|
+
---
|
|
227
|
+
|
|
228
|
+
<div align="center">
|
|
229
|
+
<p>
|
|
230
|
+
Made with ❤️ by <a href="https://www.newlecture.com">뉴렉처</a>
|
|
231
|
+
</p>
|
|
232
|
+
<p>
|
|
233
|
+
<a href="https://newlecture-corp.github.io/newtil-css/">Documentation</a> •
|
|
234
|
+
<a href="https://github.com/newlecture-corp/newtil-css/issues">Report Bug</a> •
|
|
235
|
+
<a href="https://github.com/newlecture-corp/newtil-css/issues">Request Feature</a>
|
|
236
|
+
</p>
|
|
237
|
+
</div>
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200");:root{--header-height:64px;--footer-height:120px;--background-color:var(--color-base-1);--text-color:var(--color-base-9);--border-color:var(--color-base-4);--border-width:1px}@media (prefers-color-scheme:dark){:root{--border-color:var(--color-base-7);--border-width:0.5px;--background-color:var(--color-base-9);--text-color:var(--color-base-2)}}html:has(.n-layout){height:100%}body:has(.n-layout){height:100%}.n-layout{display:grid;grid-template-areas:"header" "main" "footer";grid-template-columns:1fr;grid-template-rows:min-content 1fr min-content;height:100%;min-height:100vh;overflow-x:hidden;&>:where(header,.n-header,*>.n-header){box-shadow:1px 1px 1px var(--border-color,--color-base-3);grid-area:header;height:var(--header-height,64px)}&>:where(main,.n-main,*>.n-main){grid-area:main}&>:where(footer,.n-footer,*>.n-footer){border-top:1px solid var(--border-color,--color-base-3);grid-area:footer;height:var(--footer-height,120px)}&:has(>aside,>.n-aside){grid-template-areas:"header header" "aside main" "footer footer";grid-template-columns:min-content 1fr;overflow-x:hidden;position:relative;transition:grid-template-columns .5s ease;transition:grid-template-areas .5s ease;will-change:grid-template-columns,grid-template-areas;&>:where(aside,.n-aside,*>.n-aside){border-right:1px solid var(--border-color,--color-base-3);grid-area:aside;position:relative;resize:horizontal;transition:transform .5s ease;will-change:transform}&.layout-aside-width\:responsive:not(.layout-aside-width\:resizable)
|
|
2
|
+
&>:where(aside,.n-aside,*>.n-aside){transition:width .5s ease;width:100%}&.layout-aside-width\:min-content:not(.layout-aside-width\:resizable)
|
|
3
|
+
&>:where(aside,.n-aside,*>.n-aside){width:min-content}&.layout-aside-width\:slide-out{grid-template-columns:0 1fr;overflow-x:hidden;transition:grid-template-columns .5s ease;&>:where(aside,.n-aside,*>.n-aside){overflow:hidden;pointer-events:none;transform:translateX(-100%);z-index:-1}}&.layout-aside-width\:resizable>:where(aside,.n-aside,*>.n-aside):after{background-image:linear-gradient(to right,transparent 0,transparent 1px),linear-gradient(to right,transparent 0,transparent 1px),linear-gradient(to right,var(--color-base-4) 0,var(--color-base-4) 1px);background-position:1px 0,2px 0,0 0;background-repeat:repeat-y;background-size:1px 8px,1px 8px,1px 100%;content:"";cursor:ew-resize;height:100%;position:absolute;right:-2px;top:0;transition:background-image .2s ease;width:4px;z-index:10}&.layout-aside\:resizable>:where(aside,.n-aside,*>.n-aside):hover:after{background-image:linear-gradient(to right,transparent 0,transparent 1px),linear-gradient(to right,transparent 0,transparent 1px),linear-gradient(to right,var(--color-base-6) 0,var(--color-base-6) 1px);background-position:1px 0,2px 0,0 0;background-repeat:repeat-y;background-size:1px 6px,1px 6px,1px 100%}&.layout-aside\:resizable>:where(aside,.n-aside,*>.n-aside).resizing:after{background-image:linear-gradient(to right,transparent 0,transparent 1px),linear-gradient(to right,transparent 0,transparent 1px),linear-gradient(to right,var(--color-main-1) 0,var(--color-main-1) 1px);background-position:1px 0,2px 0,0 0;background-repeat:repeat-y;background-size:1px 4px,1px 4px,1px 100%}&.layout-aside-pos\:right{grid-template-areas:"header header" "main aside" "footer footer";grid-template-columns:1fr min-content;overflow-x:hidden;&>:where(aside,.n-aside,*>.n-aside){border-left:1px solid var(--border-color,--color-base-3);border-right:none}&.layout-aside-width\:slide-out{grid-template-columns:1fr 0;overflow-x:hidden;transition:grid-template-columns .5s ease;&>:where(aside,.n-aside,*>.n-aside){overflow:hidden;pointer-events:none;transform:translateX(100%);z-index:-1}}&.layout-aside-width\:resizable>:where(aside,.n-aside,*>.n-aside):after{background-image:linear-gradient(to left,transparent 0,transparent 1px),linear-gradient(to left,transparent 0,transparent 1px),linear-gradient(to left,var(--color-base-4) 0,var(--color-base-4) 1px);background-position:1px 0,2px 0,0 0;background-repeat:repeat-y;background-size:1px 8px,1px 8px,1px 100%;left:-2px;right:auto}&.layout-aside-width\:resizable>:where(aside,.n-aside,*>.n-aside):hover:after{background-image:linear-gradient(to left,transparent 0,transparent 1px),linear-gradient(to left,transparent 0,transparent 1px),linear-gradient(to left,var(--color-base-6) 0,var(--color-base-6) 1px);background-position:1px 0,2px 0,0 0;background-repeat:repeat-y;background-size:1px 6px,1px 6px,1px 100%}&.layout-aside-width\:resizable>:where(aside,.n-aside,*>.n-aside).resizing:after{background-image:linear-gradient(to left,transparent 0,transparent 1px),linear-gradient(to left,transparent 0,transparent 1px),linear-gradient(to left,var(--color-main-1) 0,var(--color-main-1) 1px);background-position:1px 0,2px 0,0 0;background-repeat:repeat-y;background-size:1px 4px,1px 4px,1px 100%}}}}.n-layout{&>.n-header:has(.n-aside-toggle:checked)~:where(aside,.n-aside,*>aside,*>.n-aside){background-color:var(--background-color,--color-base-1);height:100%;left:0;position:absolute;top:0;transform:translateX(-100%)}}@media (max-width:640px){.n-layout{&.layout-aside-width\:responsive{grid-template-areas:"header header" "aside main" "footer footer";grid-template-columns:min-content 1fr}}}.n-section{--padding:var(--space-4);--gap:var(--space-4);--bd-color:var(--color-base-3);--bd-color-hover:var(--color-base-4);--bd-width:1px;--bd-radius:var(--space-3);--title-color:var(--color-base-7);--title-size:var(--size-8);--title-fw:var(--font-weight-7);--bg-color-glass:rgba(var(--rgb-base-2),0.4);--bg-color-glass-hover:rgba(var(--rgb-base-4),0.4)}@media (prefers-color-scheme:dark){.n-section{--title-color:var(--color-base-1);--bd-color:var(--color-base-6);--bd-color-hover:var(--color-base-4);--bd-width:0.5px;--bg-color-glass:rgba(var(--rgb-base-8),0.4);--bg-color-glass-hover:rgba(var(--rgb-base-8),0.6)}}.n-section{display:flex;flex-direction:column;overflow:clip;&.hover:hover{cursor:pointer}&.section-type\:card{border:var(--bd-width) solid var(--bd-color);border-radius:var(--bd-radius);&.hover:hover{border:var(--bd-width) solid var(--bd-color-hover)}}&.section-type\:glass{backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);background:var(--bg-color-glass);transition:background .3s ease,backdrop-filter .3s ease,border .3s ease;&.hover:hover{backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);background:var(--bg-color-glass-hover)}}&.section-type\:elevated{box-shadow:var(--shadow-lg);&.hover:hover{box-shadow:var(--shadow-xl)}}&>h1,&>header{border-bottom:var(--bd-width) solid var(--bd-color);max-width:100%;min-width:0;overflow:hidden;padding:var(--padding);text-overflow:ellipsis;white-space:nowrap;width:100%}&>h1,&>header,&>header>h1{align-items:center;color:var(--title-color);display:flex;font-size:var(--title-size);font-weight:var(--title-fw)}&>h1+*,&>header+*{max-height:2000px;opacity:1;overflow:hidden;padding:var(--padding);transition:max-height .6s ease,opacity .6s ease,padding .6s ease}&:has(.n-list.list-dir\:column),&:has(.n-list.list-direction\:column)>*{&>h1+*,&>header+*{padding:0}}&.content-toggle\:hide{&>h1,&>header{border-bottom:none}&>h1+*,&>header+*{max-height:0;opacity:0;padding-bottom:0;padding-top:0}}}:where(.n-frame,.n-frame\:ruled,.n-frame\:outlined){>h1,>header{align-items:center;display:flex;width:100%}>h1,>header>h1{font-size:var(--panel-header-fs,var(--font-size-7,16px));font-weight:var(--panel-header-fw,var(--font-weight-2,bold))}>:is(table,ul,dl,form,div,.content){align-items:var(--content-align,start);display:flex;flex-direction:var(--content-direction,column);justify-content:var(--content-justify,start);list-style:var(--list-style,circle);overflow:hidden;position:relative;width:var(--panel-content-width,100%);>:where(li,dt,dd,.item){align-items:start;display:flex;flex-direction:row;flex-direction:column;padding:1em 1.5em;width:100%}}}:where(.n-frame,.n-frame\:ruled,.n-frame\:outlined):has(>h1,>header){>:is(table,ul,dl,form,div,.content){padding-top:1em}}.list-title\:underline{>h1,>header{border-bottom:1px solid var(--panel-header-bd-bottom,var(--color-base-3));padding-bottom:10px}}.list-item-style\:circle{>:where(table,ul,dl,form,div,.content){list-style:var(--list-style,circle)}}.n-frame\:outlined.n-frame-item\:card{>:where(table,ul,dl,form,div,.content){>:where(li,dt,dd,section){align-items:start;flex-direction:column;padding:1em 1.5em}}}.n-frame\:outlined{>:where(table,ul,dl,form,div,.content){gap:1em;>:where(li,dt,dd,section){align-items:center;border:1px solid var(--panel-header-bd-bottom,var(--color-base-3));display:flex;min-height:40px;padding:0 10px}}}.n-frame\:outlined.outlined-gap\:1{>:where(table,ul,dl,form,div,.content){gap:var(--space-1,4px)}}.n-frame\:outlined.outlined-gap\:2{>:where(table,ul,dl,form,div,.content){gap:var(--space-2,8px)}}.n-frame\:ruled{>:where(table,ul,dl,form,div,.content){>:where(li,dt,dd){line-height:2.5em;position:relative}>:where(li,dt,dd,section):after{background-color:var(--panel-header-bd-bottom,var(--color-base-3));bottom:0;content:"";display:flex;height:1px;padding:0;position:absolute;width:100%}>:where(li,dt,dd):last-child:after{display:none;min-height:40px}}}.n-frame\:ruled:has(section):before{align-items:center;color:red;content:"ruled-list 클래스 박스 안에 section 태그를 포함할 수 없습니다.";display:flex;font-weight:700;justify-content:center;padding:20px 20px 0;width:100%}.n-form{--form-border-radius:16px;--form-padding:24px;--input-padding-x:12px;--input-input-height:36px;--input-textarea-min-height:58px;--input-border-radius:6px;--input-border-color:var(--color-base-3);--input-underline-border-width:1.6px;--input-border-color-focus:var(--color-sub-2);--input-border-color-success:#37b24d;--input-color-warning:var(--color-accent-1);--input-border-color-warning:var(--color-accent-1);display:flex;flex-direction:column;gap:var(--space-5);>div{display:flex;flex-direction:column;gap:5px;padding:5px 0;width:100%;label{display:flex;flex-direction:column;gap:5px;>span{display:inline-flex;font-weight:500;width:100%}>input[type=email],>input[type=number],>input[type=password],>input[type=search],>input[type=tel],>input[type=text],>input[type=url],>textarea{background-color:var(--color-base-1);border:1px solid var(--input-border-color);border-radius:var(--input-border-radius);box-shadow:0 1px 1.5px 0 rgba(0,0,0,.05);color:rgba(var(--rgb-base-7),.85);cursor:default;flex-grow:1;font-size:14px;line-height:150%;padding:4px var(--input-padding-x);transition:border .12s}>textarea{height:auto;min-height:100px;overflow-y:auto}}}&.n-label-pos\:left{>div{label{align-items:center;flex-direction:row;width:100%;>span{text-wrap:nowrap;display:inline-flex;justify-content:center;overflow:hidden;text-overflow:ellipsis " [..]";white-space:nowrap;width:20%}>span:after{content:" : "}input{flex-grow:1}}}}}.n-input{--input-padding-x:12px;--input-input-height:36px;--input-textarea-min-height:58px;--input-border-color:var(--color-base-3);--input-border-radius:6px;--input-underline-border-width:1.6px;--input-border-color-focus:var(--color-sub-2);--input-border-color-success:#37b24d;--input-color-warning:var(--color-accent-1);--input-border-color-warning:var(--color-accent-1)}.n-input,input[type=email].n-input,input[type=number].n-input,input[type=password].n-input,input[type=search].n-input,input[type=tel].n-input,input[type=text].n-input,input[type=url].n-input,textarea.n-input{background-color:var(--color-base-1);border:1px solid var(--input-border-color);border-radius:var(--input-border-radius);box-shadow:0 1px 1.5px 0 rgba(0,0,0,.05);color:rgba(var(--rgb-base-10),.85);padding:4px var(--input-padding-x);width:100%}.n-input,.n-input-type\:outline,.n-input\:outline,input[type=email].n-input,input[type=email].n-input-type\:outline,input[type=email].n-input\:outline,input[type=number].n-input,input[type=number].n-input-type\:outline,input[type=number].n-input\:outline,input[type=password].n-input,input[type=password].n-input-type\:outline,input[type=password].n-input\:outline,input[type=search].n-input,input[type=search].n-input-type\:outline,input[type=search].n-input\:outline,input[type=tel].n-input,input[type=tel].n-input-type\:outline,input[type=tel].n-input\:outline,input[type=text].n-input,input[type=text].n-input-type\:outline,input[type=text].n-input\:outline,input[type=url].n-input,input[type=url].n-input-type\:outline,input[type=url].n-input\:outline{height:var(--input-input-height)}.n-input-type\:underline,.n-input\:underline,input[type=email].n-input-type\:underline,input[type=email].n-input\:underline,input[type=number].n-input-type\:underline,input[type=number].n-input\:underline,input[type=password].n-input-type\:underline,input[type=password].n-input\:underline,input[type=search].n-input-type\:underline,input[type=search].n-input\:underline,input[type=tel].n-input-type\:underline,input[type=tel].n-input\:underline,input[type=text].n-input-type\:underline,input[type=text].n-input\:underline,input[type=url].n-input-type\:underline,input[type=url].n-input\:underline{background-color:transparent;border-left:none;border-radius:0;border-right:none;border-top:none;border-width:var(--input-underline-border-width);box-shadow:none;transition-duration:.2s;transition-property:border-color}textarea.n-input{height:100%;min-height:var(--input-textarea-min-height);resize:none}.n-input.n-input-status\:focus,input[type=email].n-input.n-input-status\:focus,input[type=email].n-input:focus,input[type=number].n-input.n-input-status\:focus,input[type=number].n-input:focus,input[type=password].n-input.n-input-status\:focus,input[type=password].n-input:focus,input[type=search].n-input.n-input-status\:focus,input[type=search].n-input:focus,input[type=tel].n-input.n-input-status\:focus,input[type=tel].n-input:focus,input[type=text].n-input.n-input-status\:focus,input[type=text].n-input:focus,input[type=url].n-input.n-input-status\:focus,input[type=url].n-input:focus,textarea.n-input.n-input-status\:focus,textarea.n-input:focus{border-color:var(--input-border-color-focus)}.n-input.n-input-status\:success,input[type=email].n-input.n-input-status\:success,input[type=number].n-input.n-input-status\:success,input[type=password].n-input.n-input-status\:success,input[type=search].n-input.n-input-status\:success,input[type=tel].n-input.n-input-status\:success,input[type=text].n-input.n-input-status\:success,input[type=url].n-input.n-input-status\:success,textarea.n-input.n-input-status\:success{border-color:var(--input-border-color-success)}.n-input.n-input-status\:warning,input[type=email].n-input.n-input-status\:warning,input[type=number].n-input.n-input-status\:warning,input[type=password].n-input.n-input-status\:warning,input[type=search].n-input.n-input-status\:warning,input[type=tel].n-input.n-input-status\:warning,input[type=text].n-input.n-input-status\:warning,input[type=url].n-input.n-input-status\:warning,textarea.n-input.n-input-status\:warning{border-color:var(--input-border-color-warning);color:var(--input-color-warning)}.n-input.n-input-status\:disabled,input[type=email].n-input.n-input-status\:disabled,input[type=email].n-input:disabled,input[type=number].n-input.n-input-status\:disabled,input[type=number].n-input:disabled,input[type=password].n-input.n-input-status\:disabled,input[type=password].n-input:disabled,input[type=search].n-input.n-input-status\:disabled,input[type=search].n-input:disabled,input[type=tel].n-input.n-input-status\:disabled,input[type=tel].n-input:disabled,input[type=text].n-input.n-input-status\:disabled,input[type=text].n-input:disabled,input[type=url].n-input.n-input-status\:disabled,input[type=url].n-input:disabled,textarea.n-input.n-input-status\:disabled,textarea.n-input:disabled{background-color:rgba(var(--rgb-base-2),.6);border-color:var(--color-base-4);color:rgba(var(--rgb-base-10),.27);cursor:not-allowed}.n-input::placeholder{color:var(--color-base-5);font-size:var(--font-size-2);font-weight:var(--font-weight-1);letter-spacing:-.02em;line-height:150%}.n-input.n-input-status\:disabled::placeholder,.n-input:disabled::placeholder{color:rgba(var(--rgb-base-10),.27)}label:has(+.n-input){align-items:center;display:flex;font-size:var(--font-size-2);font-weight:var(--font-weight-2);letter-spacing:-.02em;line-height:150%;margin-right:var(--space-2)}.n-input+label{align-items:center;display:flex;font-size:var(--font-size-2);font-weight:var(--font-weight-2);letter-spacing:-.02em;line-height:150%;margin-left:var(--space-2)}label:has(.n-input){align-items:center;display:flex;font-size:var(--font-size-2);font-weight:var(--font-weight-2);gap:var(--space-2);letter-spacing:-.02em;line-height:150%;width:100%}label:has(.n-input.n-input-label\:top){align-items:start;flex-direction:column;gap:var(--space-1)}label:has(.n-input.n-input-label\:bottom){align-items:start;flex-direction:column-reverse;gap:var(--space-1)}:is(.n-header,.n-header\:sticky){--header-height:64px;--header-border-width:1px;--header-border-color:var(--color-base-3);--header-padding:var(--space-4);align-items:center;box-shadow:1px 1px 1px var(--header-border-color,--color-base-3);display:flex;flex-direction:row;flex-shrink:0;grid-area:header;height:var(--header-height,64px);justify-content:start;padding:0 var(--header-padding,var(--space-4));position:relative;>:is(h1,.title){font-size:24px;font-weight:700}>:is(.nav,nav){display:flex;position:absolute;right:var(--space-4);>ul{align-items:center;display:flex;>li>a{vertical-align:top}}>ul.hide{display:none}>ul.show{display:flex}}>.content{align-items:center;display:flex;flex-direction:row;justify-content:start;margin:0 auto;max-width:var(--header-content-width,1200px);position:relative;width:100%;>:is(h1,.title){font-size:24px;font-weight:700}>:is(.nav,nav){display:flex;position:absolute;right:0;>ul{align-items:center;display:flex;>li>a{vertical-align:top}}}>ul.hide{display:none}>ul.show{display:flex}}}.n-header\:sticky{position:sticky;top:0;width:100%;z-index:1000}.n-header.content-pos\:left{>.content{margin:initial}}.n-header.content-pos\:center{>.content{margin:0 auto}}.n-header.content-pos\:right{>.content{margin:0 0 0 auto}}.n-header.menu-pos\:right{>:is(.nav,nav){left:auto;right:var(--space-4)}>.content{>:is(.nav,nav){left:auto;right:0}}}.n-header.menu-pos\:left{>:is(.nav,nav){left:0;right:auto}>.content{>:is(.nav,nav){left:0;right:auto}}}.n-header.logo-pos\:left{>.title,>h1{margin:0 auto 0 0}>.content{>:is(.title,h1){margin:0 auto 0 0}}}.n-header.logo-pos\:center{>.title,>h1{margin:0 auto}>.content{>:is(.title,h1){margin:0 auto}}}.n-header.logo-pos\:right{>.title,>h1{margin:0 0 0 auto}>.content{>.title,>h1{margin:0 0 0 auto}}}.n-header .mobile-menu{background:var(--color-base-1);border:1px solid var(--color-base-3);border-radius:4px;box-shadow:0 4px 12px rgba(0,0,0,.15);display:none;min-width:200px;position:absolute;right:0;top:100%;z-index:1001}.n-header .mobile-menu.is\:open{display:flex;flex-direction:column}.n-header .mobile-menu-header{align-items:center;display:flex;justify-content:flex-end;padding:.5rem}.n-header .mobile-menu-title{font-size:1.25rem;font-weight:600;margin:0}.n-header .mobile-menu-content{padding:1rem}.n-header .mobile-menu\:1{background:var(--color-base-1);border:1px solid var(--color-base-3);border-radius:4px;box-shadow:0 4px 12px rgba(0,0,0,.15);display:none;min-width:200px;position:absolute;right:0;top:100%;z-index:1001}.n-header .mobile-menu\:1.is\:open{display:flex;flex-direction:column}.n-header .mobile-menu\:2{background:var(--color-base-1);border-top:1px solid var(--color-base-3);bottom:0;box-shadow:0 -4px 12px rgba(0,0,0,.15);left:0;padding:1rem;position:fixed;right:0;transform:translateY(100%);transition:transform .3s ease;z-index:1001}.n-header .mobile-menu\:2.is\:open{transform:translateY(0)}.n-header .mobile-menu\:3{background:rgba(0,0,0,.8);bottom:0;display:none;flex-direction:column;left:0;position:fixed;right:0;top:0;z-index:1001}.n-footer,.n-header .mobile-menu\:3.is\:open{display:flex}.n-footer{border-top:var(--border-width,1px) solid var(--border-color,--color-base-3);flex-direction:column;flex-shrink:0;height:var(--footer-height,auto);padding:var(--footer-padding,var(--space-5))}.n-modal{--modal-border-radius:16px;--modal-border:none;--modal-box-shadow:rgba(0,0,0,.08) 0 16px 20px -4px,rgba(0,0,0,.03) 0 8px 8px -4px;--modal-z-index:1200;background-color:rgba(0,0,0,.5);background-color:var(--color-base-1);border:var(--modal-border);border-radius:var(--modal-border-radius);box-shadow:var(--modal-box-shadow);content:"";height:100vh;left:0;max-width:90vw;padding:16px 24px;position:fixed;position:fixed;right:50%;top:0;top:50%;transform:translate(50%,-50%);width:100vw;z-index:var(--modal-z-index,10);z-index:var(--modal-z-index)}:root{--heading-font-size:var(--font-size-7)}.n-heading{align-items:center;display:flex;font-size:var(--heading-font-size);font-weight:700;unicode-bidi:isolate;.heading-truncate{word-wrap:normal;text-wrap:nowrap;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;>a{word-wrap:normal;text-wrap:nowrap;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}.heading-overflow-clamp{text-wrap:nowrap;-webkit-box-orient:vertical;-webkit-line-clamp:1;display:-webkit-box;overflow:hidden;width:100%}}.n-table{--n-table-bg-color:var(--color-base-1);background-color:var(--n-table-bg-color);border-collapse:collapse;table-layout:fixed;width:100%;>thead{--n-thead-bg-color:var(--color-base-2);background-color:var(--n-thead-bg-color)}>:is(thead,tbody)>tr{--n-tr-height:40px;--n-tr-border-color:var(--color-base-3);border-top:1px solid var(--n-tr-border-color);height:var(--n-tr-height);position:relative}>:is(thead,tbody)>tr>:is(th,td){text-align:center;vertical-align:middle;img,input{vertical-align:middle}&:has(img){padding:8px}}>tbody>tr:nth-child(odd):has(.n-row-expander:checked)
|
|
4
|
+
label:has(.n-row-expander):before{content:"\e5c5";font-family:Material Symbols Outlined;font-size:24px}>tbody>tr:nth-child(odd):has(.n-row-expander:checked)+tr{display:table-row}}.n-table\:expandable{>tbody>tr:nth-child(odd):not(:has(.n-row-expander))>td:last-child:after{align-items:center;background-color:rgba(var(--rgb-base-1),.7);color:red;content:"오류 : n-table:expandable은 n-row-expander가 필요합니다.";display:flex;height:100%;justify-content:center;left:0;position:absolute;top:0;width:100%}>tbody>tr:nth-child(odd):has(.n-row-expander:checked)
|
|
5
|
+
label:has(.n-row-expander):before{content:"\e5c7";font-family:Material Symbols Outlined;font-size:24px}>tbody>tr:nth-child(odd):has(.n-row-expander:not(:checked))+tr{display:none}>tbody>tr:nth-child(odd):has(.n-row-expander:not(:checked))
|
|
6
|
+
label:has(.n-row-expander):before{content:"\e5c5"}>tbody>tr:nth-child(odd):has(.n-row-expander:checked)+tr{display:table-row;>td{line-height:normal;overflow:hidden;padding:10px;text-align:start}}}.n-list{--n-list-gap:var(--space-2);--n-list-sep-color:var(--color-base-5)}@media (prefers-color-scheme:dark){.n-list{--n-list-sep-color:var(--color-base-7,#333a44)}}.n-list{align-items:center;display:flex;flex-direction:row;text-overflow:ellipsis;&>*{align-items:center;box-sizing:border-box;display:flex;justify-content:center;padding:var(--space-2) var(--space-4);position:relative}&.hover>:hover{background-color:var(--color-background-onhover);color:var(--color-text-onhover)}&.list-sep,&.list-sep\:dashed,&.list-sep\:dot,&.list-sep\:dotted,&.list-sep\:solid,&.list-seperator,&.list-seperator\:dashed,&.list-seperator\:dot,&.list-seperator\:dotted,&.list-seperator\:solid{gap:var(--n-list-gap)}&.list-sep>*+:before,&.list-sep\:dashed>*+:before,&.list-sep\:dot>*+:before,&.list-sep\:dotted>*+:before,&.list-sep\:solid>*+:before,&.list-seperator>*+:before,&.list-seperator\:dashed>*+:before,&.list-seperator\:dot>*+:before,&.list-seperator\:dotted>*+:before,&.list-seperator\:solid>*+:before{background-image:linear-gradient(to bottom,var(--n-list-sep-color) 50%,transparent 50%);background-repeat:repeat-y;background-size:1px 4px;bottom:25%;content:"";left:calc(var(--n-list-gap)*-.7);pointer-events:none;position:absolute;top:25%;width:1px}&.list-sep\:none,&.list-seperator\:none{&>*+:before{display:none}}&.list-sep\:solid,&.list-seperator\:solid{&>*+:before{background-image:linear-gradient(to bottom,var(--n-list-sep-color) 100%,transparent 100%)}}&.list-sep\:dotted,&.list-seperator\:dotted{&>*+:before{background-image:linear-gradient(to bottom,var(--n-list-sep-color) 50%,transparent 50%)}}&.list-sep\:dot,&.list-seperator\:dot{&>*+:before{background-image:radial-gradient(circle,var(--n-list-sep-color) 1.5px,transparent 1.6px);background-image:linear-gradient(to bottom,var(--n-list-sep-color) 50%,transparent 50%);background-repeat:no-repeat;background-size:3px 9px;background-size:3px 4px;bottom:45%;top:45%;width:3px}}&.list-sep\:dashed,&.list-seperator\:dashed{&>*+:before{background-image:linear-gradient(to bottom,var(--n-list-sep-color) 50%,transparent 50%)}}&.list-fit\:fill>*{flex:1 0 auto}&.list-fit\:shrink>*{flex:0 1 auto;min-width:0}&.list-fit\:noshrink{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}&.list-fit\:content>*,&.list-fit\:noshrink>*{flex:0 0 auto}&.list-fit\:wrap>*{flex-wrap:wrap}&.list-fit\:nowrap>*{flex-wrap:nowrap}&.list-vertical-align\:left{justify-content:flex-start}&.list-vertical-align\:center{justify-content:center}&.list-vertical-align\:right{justify-content:flex-end}&.list-active,&.list-active\:bar,&.list-active\:color{&>*{cursor:pointer;transition:background-color .3s ease,color .3s ease,opacity .3s ease;& label,input{cursor:pointer}&.active,&:has(input:checked){background-color:var(--color-background-onactive);color:var(--color-text-onactive)}}}&.list-active\:bar{&>*{&.active{background-color:transparent;color:var(--color-text-onactive);& .n-icon{color:var(--color-icon-onactive)}}&:hover{background-color:transparent;& .n-icon{color:var(--color-icon-onhover)}}&.active:after{background-color:var(--color-background-onactive)}&.active:after,&:hover:after{bottom:0;content:"";height:3px;left:0;opacity:1;position:absolute;right:0}&:hover:after{background-color:var(--color-background-onhover)}&:not(.active):not(:hover):after{opacity:0}}}&.gap\:1{--n-list-gap:var(--space-1)}&.gap\:1,&.gap\:2{gap:var(--n-list-gap)}&.gap\:2{--n-list-gap:var(--space-2)}&.gap\:3{--n-list-gap:var(--space-3)}&.gap\:3,&.gap\:4{gap:var(--n-list-gap)}&.gap\:4{--n-list-gap:var(--space-4)}&.gap\:5{--n-list-gap:var(--space-5)}&.gap\:5,&.gap\:6{gap:var(--n-list-gap)}&.gap\:6{--n-list-gap:var(--space-6)}&.gap\:7{--n-list-gap:var(--space-7)}&.gap\:7,&.gap\:8{gap:var(--n-list-gap)}&.gap\:8{--n-list-gap:var(--space-8)}&.list-dir\:column,&.list-direction\:column{--n-list-gap:0;align-items:flex-start;flex-direction:column;&>*{display:flex;justify-content:flex-start;width:100%}&>*+:before{display:none}&.list-sep,&.list-sep\:dashed,&.list-sep\:dot,&.list-sep\:dotted,&.list-sep\:solid,&.list-seperator,&.list-seperator\:dashed,&.list-seperator\:dot,&.list-seperator\:dotted,&.list-seperator\:solid{&>*+:before{background-image:linear-gradient(to right,var(--n-list-sep-color) 50%,transparent 50%);background-repeat:repeat-x;background-size:4px 1px;content:"";display:block;height:1px;left:0;pointer-events:none;position:absolute;right:0;top:0;width:auto}}&.list-sep\:none,&.list-seperator\:none{&>*+:before{display:none}}&.list-sep\:solid,&.list-seperator\:solid{&>*+:before{background-image:linear-gradient(to right,var(--n-list-sep-color) 100%,transparent 100%);background-size:100% 1px}}&.list-sep\:dotted,&.list-seperator\:dotted{&>*+:before{background-image:linear-gradient(to right,var(--n-list-sep-color) 50%,transparent 50%);background-size:4px 1px}}&.list-sep\:dashed,&.list-seperator\:dashed{&>*+:before{background-image:linear-gradient(to right,var(--n-list-sep-color) 50%,transparent 50%);background-size:8px 1px}}&.list-align\:left>*{justify-content:flex-start}&.list-align\:center>*{justify-content:center}&.list-align\:right>*{justify-content:flex-end}&.list-valign\:top>*,&.list-vertical-align\:top>*{align-items:flex-start}&.list-valign\:center>*,&.list-vertical-align\:center>*{align-items:center}&.list-valign\:bottom>*,&.list-vertical-align\:bottom>*{align-items:flex-end}}& .w\:grow{flex-grow:1}&.list-type\:aside-menu{flex-direction:column;overflow:hidden;width:100%;&>*{align-items:center;border:none;display:flex;flex-shrink:0;justify-content:flex-start;overflow:hidden;padding:10px;width:100%}}}.n-list\:wrap{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}.n-list\:dl{display:flex;flex-direction:column;>div{display:flex;flex-direction:row;padding:var(--space-2) 0;>dt{font-weight:700;&:after{content:":"}}>dd{flex-grow:1;margin-left:var(--space-2)}}>div:last-child{border-bottom:none}}.n-list\:dl.dl-sperator\:solid{>div{border-bottom:1px solid var(--color-base-5)}}.n-list\:dl.dl-sperator\:ruled{>div{border-bottom:1px dashed var(--color-base-5)}}@media (hover:hover) and (pointer:fine){.n-list{&.list-type\:aside-menu{&>li:hover{background-color:var(--color-hover-bg);color:var(--color-hover-text)}}}}.list-type\:cols{--column-width:300px;display:grid;gap:var(--space-2);grid-template-columns:repeat(auto-fill,minmax(var(--column-width),1fr));&.column-width\:1{--column-width:250px}&.column-width\:2{--column-width:300px}&.column-width\:3{--column-width:350px}&.column-width\:4{--column-width:400px}&.column-width\:5{--column-width:450px}&.column-width\:6{--column-width:500px}&.column-width\:auto{--column-width:auto}&.column-width\:100p{--column-width:100%}&.column-width\:50p{--column-width:50%}&.column-width\:33p{--column-width:33.33%}&.column-width\:25p{--column-width:25%}}:root{--icon-size:24px}.n-icon{align-items:center;display:inline-flex;height:var(--icon-size);overflow:hidden;transition:all .2s ease-in-out;visibility:visible;width:var(--icon-size);&:before{align-items:center;content:"";display:inline-flex;flex-shrink:0;font-family:Material Symbols Outlined;font-size:var(--icon-size);height:var(--icon-size);overflow:hidden;vertical-align:top;width:var(--icon-size)}&.n-hover:not(.n-deco):hover{background-color:var(--color-base-3);border-radius:50%;transform:scale(1.4);&:before{transform:scale(.72)}}}.icon-style\:outlined:before{font-family:Material Symbols Outlined}.icon-style\:filled:before{font-variation-settings:"FILL" 1}.icon-style\:rounded:before{font-family:Material Symbols Rounded}.icon-style\:sharp:before{font-family:Material Symbols Sharp}.icon-color\:main-1:before{color:var(--color-main-1)}.icon-color\:main-2:before{color:var(--color-main-2)}.icon-color\:main-3:before{color:var(--color-main-3)}.icon-color\:sub-1:before{color:var(--color-sub-1)}.icon-color\:sub-2:before{color:var(--color-sub-2)}.icon-color\:sub-3:before{color:var(--color-sub-3)}.icon-color\:accent-1:before{color:var(--color-accent-1)}.icon-color\:accent-2:before{color:var(--color-accent-2)}.icon-color\:accent-3:before{color:var(--color-accent-3)}.icon-color\:base-1:before{color:var(--color-base-1)}.icon-color\:base-2:before{color:var(--color-base-2)}.icon-color\:base-3:before{color:var(--color-base-3)}.icon-color\:base-4:before{color:var(--color-base-4)}.icon-color\:base-5:before{color:var(--color-base-5)}.icon-color\:base-6:before{color:var(--color-base-6)}.icon-color\:base-7:before{color:var(--color-base-7)}.icon-color\:base-8:before{color:var(--color-base-8)}.icon-color\:base-9:before{color:var(--color-base-9)}.icon-color\:base-10:before{color:var(--color-base-10)}.icon-size\:1{--icon-size:var(--size-1)}.icon-size\:2{--icon-size:var(--size-2)}.icon-size\:3{--icon-size:var(--size-3)}.icon-size\:4{--icon-size:var(--size-4)}.icon-size\:5{--icon-size:var(--size-5)}.icon-size\:6{--icon-size:var(--size-6)}.icon-size\:7{--icon-size:var(--size-7)}.icon-size\:8{--icon-size:var(--size-8)}.icon-size\:9{--icon-size:var(--size-9)}.icon-size\:10{--icon-size:var(--size-10)}.icon-size\:11{--icon-size:var(--size-11)}.icon-size\:12{--icon-size:var(--size-12)}.icon-size\:13{--icon-size:var(--size-13)}@media (min-width:640px){.sm\:n-icon{align-items:center;display:inline-flex;height:var(--icon-size);overflow:hidden;width:var(--icon-size)}.sm\:n-icon:before{content:"\e87d";font-family:Material Symbols Outlined;font-size:var(--icon-size)}.sm\:icon-color\:main-1:before{color:var(--color-main-1)}.sm\:icon-color\:main-2:before{color:var(--color-main-2)}.sm\:icon-color\:main-3:before{color:var(--color-main-3)}.sm\:icon-color\:sub-1:before{color:var(--color-sub-1)}.sm\:icon-color\:sub-2:before{color:var(--color-sub-2)}.sm\:icon-color\:sub-3:before{color:var(--color-sub-3)}.sm\:icon-color\:accent-1:before{color:var(--color-accent-1)}.sm\:icon-color\:accent-2:before{color:var(--color-accent-2)}.sm\:icon-color\:accent-3:before{color:var(--color-accent-3)}.sm\:icon-color\:base-1:before{color:var(--color-base-1)}.sm\:icon-color\:base-2:before{color:var(--color-base-2)}.sm\:icon-color\:base-3:before{color:var(--color-base-3)}.sm\:icon-color\:base-4:before{color:var(--color-base-4)}.sm\:icon-color\:base-5:before{color:var(--color-base-5)}.sm\:icon-color\:base-6:before{color:var(--color-base-6)}.sm\:icon-color\:base-7:before{color:var(--color-base-7)}.sm\:icon-color\:base-8:before{color:var(--color-base-8)}.sm\:icon-color\:base-9:before{color:var(--color-base-9)}.sm\:icon-color\:base-10:before{color:var(--color-base-10)}.sm\:icon-size\:1{--icon-size:var(--size-1)}.sm\:icon-size\:2{--icon-size:var(--size-2)}.sm\:icon-size\:3{--icon-size:var(--size-3)}.sm\:icon-size\:4{--icon-size:var(--size-4)}.sm\:icon-size\:5{--icon-size:var(--size-5)}.sm\:icon-size\:6{--icon-size:var(--size-6)}.sm\:icon-size\:7{--icon-size:var(--size-7)}.sm\:icon-size\:8{--icon-size:var(--size-8)}.sm\:icon-size\:9{--icon-size:var(--size-9)}.sm\:icon-size\:10{--icon-size:var(--size-10)}.sm\:icon-size\:11{--icon-size:var(--size-11)}.sm\:icon-size\:12{--icon-size:var(--size-12)}.sm\:icon-size\:13{--icon-size:var(--size-13)}.sm\:icon-size\:xs:before{font-size:var(--font-size-xs)}.sm\:icon-size\:sm:before{font-size:var(--font-size-sm)}.sm\:icon-size\:base:before{font-size:var(--font-size-base)}.sm\:icon-size\:lg:before{font-size:var(--font-size-lg)}.sm\:icon-size\:xl:before{font-size:var(--font-size-xl)}.sm\:icon-size\:2xl:before{font-size:var(--font-size-2xl)}.sm\:icon-size\:3xl:before{font-size:var(--font-size-3xl)}.sm\:icon-size\:4xl:before{font-size:var(--font-size-4xl)}}@media (min-width:768px){.md\:n-icon{align-items:center;display:inline-flex;height:var(--icon-size);overflow:hidden;width:var(--icon-size)}.md\:icon-size\:1{--icon-size:var(--size-1)}.md\:icon-size\:2{--icon-size:var(--size-2)}.md\:icon-size\:3{--icon-size:var(--size-3)}.md\:icon-size\:4{--icon-size:var(--size-4)}.md\:icon-size\:5{--icon-size:var(--size-5)}.md\:icon-size\:6{--icon-size:var(--size-6)}.md\:icon-size\:7{--icon-size:var(--size-7)}.md\:icon-size\:8{--icon-size:var(--size-8)}.md\:icon-size\:9{--icon-size:var(--size-9)}.md\:icon-size\:10{--icon-size:var(--size-10)}.md\:icon-size\:11{--icon-size:var(--size-11)}.md\:icon-size\:12{--icon-size:var(--size-12)}.md\:icon-size\:13{--icon-size:var(--size-13)}.md\:n-icon:before{font-family:Material Symbols Outlined;font-size:var(--icon-size)}}@media (min-width:1024px){.lg\:n-icon{align-items:center;display:inline-flex;height:var(--icon-size);overflow:hidden;width:var(--icon-size)}.lg\:icon-size\:1{--icon-size:var(--size-1)}.lg\:icon-size\:2{--icon-size:var(--size-2)}.lg\:icon-size\:3{--icon-size:var(--size-3)}.lg\:icon-size\:4{--icon-size:var(--size-4)}.lg\:icon-size\:5{--icon-size:var(--size-5)}.lg\:icon-size\:6{--icon-size:var(--size-6)}.lg\:icon-size\:7{--icon-size:var(--size-7)}.lg\:icon-size\:8{--icon-size:var(--size-8)}.lg\:icon-size\:9{--icon-size:var(--size-9)}.lg\:icon-size\:10{--icon-size:var(--size-10)}.lg\:icon-size\:11{--icon-size:var(--size-11)}.lg\:icon-size\:12{--icon-size:var(--size-12)}.lg\:icon-size\:13{--icon-size:var(--size-13)}.lg\:n-icon:before{font-family:Material Symbols Outlined;font-size:var(--icon-size)}.lg\:icon-color\:main-1:before{color:var(--color-main-1)}.lg\:icon-color\:main-2:before{color:var(--color-main-2)}.lg\:icon-color\:main-3:before{color:var(--color-main-3)}.lg\:icon-color\:sub-1:before{color:var(--color-sub-1)}.lg\:icon-color\:sub-2:before{color:var(--color-sub-2)}.lg\:icon-color\:sub-3:before{color:var(--color-sub-3)}.lg\:icon-color\:accent-1:before{color:var(--color-accent-1)}.lg\:icon-color\:accent-2:before{color:var(--color-accent-2)}.lg\:icon-color\:accent-3:before{color:var(--color-accent-3)}.lg\:icon-color\:base-1:before{color:var(--color-base-1)}.lg\:icon-color\:base-2:before{color:var(--color-base-2)}.lg\:icon-color\:base-3:before{color:var(--color-base-3)}.lg\:icon-color\:base-4:before{color:var(--color-base-4)}.lg\:icon-color\:base-5:before{color:var(--color-base-5)}.lg\:icon-color\:base-6:before{color:var(--color-base-6)}.lg\:icon-color\:base-7:before{color:var(--color-base-7)}.lg\:icon-color\:base-8:before{color:var(--color-base-8)}.lg\:icon-color\:base-9:before{color:var(--color-base-9)}.lg\:icon-color\:base-10:before{color:var(--color-base-10)}.lg\:icon-size\:xs:before{font-size:var(--font-size-xs)}.lg\:icon-size\:sm:before{font-size:var(--font-size-sm)}.lg\:icon-size\:base:before{font-size:var(--font-size-base)}.lg\:icon-size\:lg:before{font-size:var(--font-size-lg)}.lg\:icon-size\:xl:before{font-size:var(--font-size-xl)}.lg\:icon-size\:2xl:before{font-size:var(--font-size-2xl)}.lg\:icon-size\:3xl:before{font-size:var(--font-size-3xl)}.lg\:icon-size\:4xl:before{font-size:var(--font-size-4xl)}}@media (min-width:1280px){.xl\:n-icon{align-items:center;display:inline-flex;height:var(--icon-size);overflow:hidden;width:var(--icon-size)}.xl\:icon-size\:1{--icon-size:var(--size-1)}.xl\:icon-size\:2{--icon-size:var(--size-2)}.xl\:icon-size\:3{--icon-size:var(--size-3)}.xl\:icon-size\:4{--icon-size:var(--size-4)}.xl\:icon-size\:5{--icon-size:var(--size-5)}.xl\:icon-size\:6{--icon-size:var(--size-6)}.xl\:icon-size\:7{--icon-size:var(--size-7)}.xl\:icon-size\:8{--icon-size:var(--size-8)}.xl\:icon-size\:9{--icon-size:var(--size-9)}.xl\:icon-size\:10{--icon-size:var(--size-10)}.xl\:icon-size\:11{--icon-size:var(--size-11)}.xl\:icon-size\:12{--icon-size:var(--size-12)}.xl\:icon-size\:13{--icon-size:var(--size-13)}.xl\:n-icon:before{font-family:Material Symbols Outlined;font-size:var(--icon-size)}.xl\:icon-color\:main-1:before{color:var(--color-main-1)}.xl\:icon-color\:main-2:before{color:var(--color-main-2)}.xl\:icon-color\:main-3:before{color:var(--color-main-3)}.xl\:icon-color\:sub-1:before{color:var(--color-sub-1)}.xl\:icon-color\:sub-2:before{color:var(--color-sub-2)}.xl\:icon-color\:sub-3:before{color:var(--color-sub-3)}.xl\:icon-color\:accent-1:before{color:var(--color-accent-1)}.xl\:icon-color\:accent-2:before{color:var(--color-accent-2)}.xl\:icon-color\:accent-3:before{color:var(--color-accent-3)}.xl\:icon-color\:base-1:before{color:var(--color-base-1)}.xl\:icon-color\:base-2:before{color:var(--color-base-2)}.xl\:icon-color\:base-3:before{color:var(--color-base-3)}.xl\:icon-color\:base-4:before{color:var(--color-base-4)}.xl\:icon-color\:base-5:before{color:var(--color-base-5)}.xl\:icon-color\:base-6:before{color:var(--color-base-6)}.xl\:icon-color\:base-7:before{color:var(--color-base-7)}.xl\:icon-color\:base-8:before{color:var(--color-base-8)}.xl\:icon-color\:base-9:before{color:var(--color-base-9)}.xl\:icon-color\:base-10:before{color:var(--color-base-10)}.xl\:icon-size\:xs:before{font-size:var(--font-size-xs)}.xl\:icon-size\:sm:before{font-size:var(--font-size-sm)}.xl\:icon-size\:base:before{font-size:var(--font-size-base)}.xl\:icon-size\:lg:before{font-size:var(--font-size-lg)}.xl\:icon-size\:xl:before{font-size:var(--font-size-xl)}.xl\:icon-size\:2xl:before{font-size:var(--font-size-2xl)}.xl\:icon-size\:3xl:before{font-size:var(--font-size-3xl)}.xl\:icon-size\:4xl:before{font-size:var(--font-size-4xl)}}.n-btn{--btn-font-size:14px;--btn-border-color:var(--color-base-4);--btn-border-radius:6px;--btn-bg-color:var(--color-base-1);--btn-text-color:var(--color-base-6);--btn-padding:8px 16px;--btn-active-color:rgba(var(--rgb-main-1),0.7);--btn-hover-color:rgba(var(--rgb-base-4),0.7);--btn-sep-color:var(--color-base-7,#333a44)}@media (prefers-color-scheme:dark){.n-btn{--btn-border-color:var(--color-base-3);--btn-bg-color:var(--color-base-7);--btn-text-color:var(--color-base-2);--btn-active-color:rgba(var(--rgb-main-1),0.7);--btn-sep-color:var(--color-base-7,#333a44)}}.n-btn{align-items:center;background-color:var(--btn-bg-color);border:1px solid var(--btn-border-color);border-radius:var(--btn-border-radius);box-sizing:border-box;color:var(--btn-text-color);cursor:pointer;display:inline-flex;font-family:inherit;font-size:var(--btn-font-size,14px);font-weight:400;height:auto;justify-content:center;line-height:1.4em;padding:var(--btn-padding);position:relative;transition:background-color .15s ease,border-color .15s ease,color .15s ease;user-select:none;white-space:nowrap;width:auto;&:before{align-items:center;display:inline-flex;font-family:Material Symbols Outlined;font-size:var(--icon-size);height:var(--icon-size);justify-content:center;overflow:hidden;width:var(--icon-size)}&:hover{--btn-bg-color:var(--btn-hover-color);text-decoration:none}&:active{--btn-bg-color:var(--btn-active-color);--btn-border-color:var(--btn-border-color);--btn-text-color:var(--btn-text-color)}&:focus-visible{outline:2px solid var(--color-main-1,rgba(0,123,255,.5));outline-offset:1px}}.n-btn.n-icon:not(.n-deco){--btn-padding:4px;text-indent:-999px;&:before{text-indent:0}}.n-btn.n-icon.n-deco{text-indent:0}.btn-type\:rounded{border-radius:var(--btn-border-radius,8px)}.btn-type\:circle{border-radius:50%}.btn-size\:1{--btn-padding:var(--space-1) calc(var(--space-1)*2)}.btn-size\:2{--btn-padding:var(--space-2) calc(var(--space-2)*2)}.btn-size\:3{--btn-padding:var(--space-3) calc(var(--space-3)*2)}.btn-size\:4{--btn-padding:var(--space-4) calc(var(--space-4)*2)}.btn-size\:5{--btn-padding:var(--space-5) calc(var(--space-5)*2)}.btn-size\:6{--btn-padding:var(--space-6) calc(var(--space-6)*2)}.btn-size\:7{--btn-padding:var(--space-7) calc(var(--space-7)*2)}.btn-size\:8{--btn-padding:var(--space-8) calc(var(--space-8)*2)}.btn-size\:9{--btn-padding:var(--space-9) calc(var(--space-9)*2)}.btn-size\:ex{--btn-padding:var(--space-20) calc(var(--space-20)*2)}.btn-size\:inline{line-height:1em;padding:0}.btn-size\:small{--btn-font-size:var(--font-size-xs);--btn-padding:var(--space-1) var(--space-2);line-height:1em}.btn-color\:main-1{--btn-bg-color:var(--color-main-1);--btn-border-color:var(--color-main-1);--btn-text-color:var(--color-base-1);&:hover{--btn-bg-color:var(--color-main-2);--btn-border-color:var(--color-main-2);--btn-text-color:var(--color-base-2)}&:active{--btn-bg-color:var(--color-main-3);--btn-text-color:var(--color-base-1)}}.btn-color\:main-2{--btn-bg-color:var(--color-main-2);--btn-border-color:var(--color-main-2);--btn-text-color:var(--color-base-1);&:hover{--btn-bg-color:var(--color-main-3);--btn-border-color:var(--color-main-3);--btn-text-color:var(--color-base-2)}&:active{--btn-bg-color:var(--color-main-1);--btn-text-color:var(--color-base-1)}}.btn-color\:main-3{--btn-bg-color:var(--color-main-3);--btn-border-color:var(--color-main-3);--btn-text-color:var(--color-base-1);&:hover{--btn-bg-color:var(--color-main-1);--btn-border-color:var(--color-main-1);--btn-text-color:var(--color-base-2)}&:active{--btn-bg-color:var(--color-main-2);--btn-text-color:var(--color-base-1)}}.btn-color\:sub-1{--btn-bg-color:var(--color-sub-1);--btn-border-color:var(--color-sub-1);--btn-text-color:var(--color-base-1);&:hover{--btn-bg-color:var(--color-sub-2);--btn-border-color:var(--color-sub-2);--btn-text-color:var(--color-base-2)}&:active{--btn-bg-color:var(--color-sub-3);--btn-text-color:var(--color-base-1)}}.btn-color\:sub-2{--btn-bg-color:var(--color-sub-2);--btn-border-color:var(--color-sub-2);--btn-text-color:var(--color-base-1);&:hover{--btn-bg-color:var(--color-sub-3);--btn-border-color:var(--color-sub-3);--btn-text-color:var(--color-base-2)}&:active{--btn-bg-color:var(--color-sub-1);--btn-text-color:var(--color-base-1)}}.btn-color\:sub-3{--btn-bg-color:var(--color-sub-3);--btn-border-color:var(--color-sub-3);--btn-text-color:var(--color-base-1);&:hover{--btn-bg-color:var(--color-sub-1);--btn-border-color:var(--color-sub-1);--btn-text-color:var(--color-base-2)}&:active{--btn-bg-color:var(--color-sub-2);--btn-text-color:var(--color-base-1)}}.btn-color\:accent-1{--btn-bg-color:var(--color-accent-1);--btn-border-color:var(--color-accent-1);--btn-text-color:var(--color-base-1);&:hover{--btn-bg-color:var(--color-accent-2);--btn-border-color:var(--color-accent-2);--btn-text-color:var(--color-base-2)}&:active{--btn-bg-color:var(--color-accent-3);--btn-text-color:var(--color-base-1)}}.btn-color\:accent-2{--btn-bg-color:var(--color-accent-2);--btn-border-color:var(--color-accent-2);--btn-text-color:var(--color-base-1);&:hover{--btn-bg-color:var(--color-accent-3);--btn-border-color:var(--color-accent-3);--btn-text-color:var(--color-base-2)}&:active{--btn-bg-color:var(--color-accent-1);--btn-text-color:var(--color-base-1)}}.btn-color\:accent-3{--btn-bg-color:var(--color-accent-3);--btn-border-color:var(--color-accent-3);--btn-text-color:var(--color-base-1);&:hover{--btn-bg-color:var(--color-accent-1);--btn-border-color:var(--color-accent-1);--btn-text-color:var(--color-base-2)}&:active{--btn-bg-color:var(--color-accent-2);--btn-text-color:var(--color-base-1)}}@media (min-width:640px){.md\:n-btn{--btn-font-size:14px;--btn-border-color:var(--color-base-3);--btn-border-radius:8px;--btn-bg-hover:var(--color-base-2);align-items:center;background-color:transparent;border:1px solid var(--btn-border-color,var(--color-base-3));border-radius:var(--btn-border-radius,8px);box-sizing:content-box;color:inherit;cursor:pointer;display:inline-flex;font-family:inherit;font-size:var(--btn-font-size,14px);font-weight:500;justify-content:center;line-height:1em;padding:var(--btn-padding,8px 16px);position:relative;transition:border-color .3s,background-color .3s;user-select:none;white-space:nowrap;width:auto;&:before{align-items:center;display:inline-flex;justify-content:center}}.md\:n-btn:hover{background-color:var(--btn-bg-hover,var(--color-base-2));text-decoration:none}.md\:n-btn\:static{cursor:unset}.md\:btn-size\:inline{line-height:1em;padding:0}.md\:btn-size\:small{--btn-font-size:12px;line-height:1em;padding:var(--btn-padding,4px 8px)}.md\:btn-size\:1{--btn-font-size:14px;padding:var(--btn-padding,8px 16px)}.md\:btn-size\:2{--btn-font-size:16px;padding:var(--btn-padding,10px 18px)}.md\:btn-size\:3{font-size:18px;padding:var(--btn-padding,12px 20px)}.md\:btn-size\:1:is(.n-icon){mask-size:var(--icon-size-1)}.md\:btn-size\:2:is(.n-icon){mask-size:var(--icon-size-2)}.md\:btn-size\:3:is(.n-icon){mask-size:var(--icon-size-3)}.md\:btn-color\:main{background-color:var(--color-main-1);border-color:var(--color-main-2);color:var(--color-base-1)}.md\:btn-color\:main:hover{--btn-bg-hover:var(--color-main-1)}.md\:btn-color\:sub{border-color:var(--color-sub-2);color:var(--color-base-1)}.md\:btn-color\:sub:hover{--btn-bg-hover:rgba(var(--rgb-sub-1),0.7)}.md\:btn-color\:accent{border-color:var(--color-accent-2);color:var(--color-base-1)}.md\:btn-color\:accent:hover{--btn-bg-hover:rgba(var(--rgb-accent-1),0.9)}.md\:btn-color\:accent:is(.n-icon):before{background-color:var(--color-base-1)}.md\:btn-size\:1:is(.n-icon):not(.n-deco),.md\:btn:is(.n-icon):not(.n-deco){--btn-padding:8px;text-indent:-999px}.md\:btn-size\:2:is(.n-icon):not(.n-deco){--btn-padding:10px}.md\:btn-size\:3:is(.n-icon):not(.n-deco){--btn-padding:12px}}@media (min-width:1024px){.lg\:n-btn{--btn-font-size:14px;--btn-border-color:var(--color-base-3);--btn-border-radius:8px;--btn-bg-hover:var(--color-base-2);align-items:center;background-color:transparent;border:1px solid var(--btn-border-color,var(--color-base-3));border-radius:var(--btn-border-radius,8px);box-sizing:content-box;color:inherit;cursor:pointer;display:inline-flex;font-family:inherit;font-size:var(--btn-font-size,14px);font-weight:500;justify-content:center;line-height:1em;padding:var(--btn-padding,8px 16px);position:relative;transition:border-color .3s,background-color .3s;user-select:none;white-space:nowrap;width:auto;&:before{align-items:center;display:inline-flex;justify-content:center}}.lg\:n-btn:hover{background-color:var(--btn-bg-hover,var(--color-base-2));text-decoration:none}.lg\:n-btn\:static{cursor:unset}.lg\:btn-size\:inline{line-height:1em;padding:0}.lg\:btn-size\:small{--btn-font-size:12px;line-height:1em;padding:var(--btn-padding,4px 8px)}.lg\:btn-size\:1{--btn-font-size:14px;padding:var(--btn-padding,8px 16px)}.lg\:btn-size\:2{--btn-font-size:16px;padding:var(--btn-padding,10px 18px)}.lg\:btn-size\:3{font-size:18px;padding:var(--btn-padding,12px 20px)}.lg\:btn-size\:1:is(.n-icon){mask-size:var(--icon-size-1)}.lg\:btn-size\:2:is(.n-icon){mask-size:var(--icon-size-2)}.lg\:btn-size\:3:is(.n-icon){mask-size:var(--icon-size-3)}.lg\:btn-color\:main{border-color:var(--color-main-2);color:var(--color-base-1)}.lg\:btn-color\:main:hover{--btn-bg-hover:var(--color-main-1)}.lg\:btn-color\:sub{border-color:var(--color-sub-2);color:var(--color-base-1)}.lg\:btn-color\:sub:hover{--btn-bg-hover:rgba(var(--rgb-sub-1),0.7)}.lg\:btn-color\:accent{border-color:var(--color-accent-2);color:var(--color-base-1)}.lg\:btn-color\:accent:hover{--btn-bg-hover:rgba(var(--rgb-accent-1),0.9)}.lg\:btn-size\:1:is(.n-icon):not(.n-deco),.lg\:n-btn:is(.n-icon):not(.n-deco){--btn-padding:8px;text-indent:-999px}.lg\:btn-size\:2:is(.n-icon):not(.n-deco){--btn-padding:10px}.lg\:btn-size\:3:is(.n-icon):not(.n-deco){--btn-padding:12px}}.n-deco{--deco-gap:4px;align-items:center;display:inline-flex;gap:var(--deco-gap);justify-content:center;text-align:center;text-indent:0;width:auto;&:before{align-items:center;display:inline-flex;flex-shrink:0;font-family:Material Symbols Outlined;font-size:var(--icon-size);height:var(--icon-size);justify-content:center;overflow:hidden;width:var(--icon-size)}}.deco-pos\:bottom,.deco-pos\:top{flex-direction:column;gap:0;height:auto}:is(li,dt,dd,td,th,div):has(>.deco-pos\:bottom),:is(li,dt,dd,td,th,div):has(>.deco-pos\:top){height:auto;padding-bottom:5px;padding-top:5px}.deco-pos\:left:before,.deco-pos\:top:before{order:unset}.deco-pos\:bottom:before,.deco-pos\:right:before{order:1}.deco-pos\:bottom,.deco-pos\:top{width:auto}:not(.n-deco).deco-pos\:bottom,:not(.n-deco).deco-pos\:left,:not(.n-deco).deco-pos\:right,:not(.n-deco).deco-pos\:top{align-items:center;display:flex;flex-direction:row;justify-content:center;overflow:visible;position:relative}:not(.n-deco).deco-pos\:bottom:before,:not(.n-deco).deco-pos\:left:before,:not(.n-deco).deco-pos\:right:before,:not(.n-deco).deco-pos\:top:before{border:1px solid red;color:red;content:"Error: n-deco is missing.";display:flex;font-family:Arial,Helvetica,sans-serif;font-size:12px;height:100%;left:0;position:absolute;top:0;width:150px}.deco-gap\:0{--deco-gap:0px}.deco-gap\:1{--deco-gap:5px}.deco-gap\:2{--deco-gap:10px}@media screen and (min-width:576px){.sm\:n-deco{--deco-gap:10px;--deco-size:24px;gap:var(--deco-gap);text-align:center;text-indent:0;width:auto}.sm\:deco-pos\:bottom,.sm\:deco-pos\:top{flex-direction:column;gap:0;height:auto}:is(li,dt,dd,td,th,div):has(>.sm\:deco-pos\:bottom),:is(li,dt,dd,td,th,div):has(>.sm\:deco-pos\:top){height:auto;padding-bottom:5px;padding-top:5px}.sm\:deco-pos\:left,.sm\:deco-pos\:top{&:before{order:unset}}.sm\:deco-pos\:bottom:before,.sm\:deco-pos\:right:before{order:1}.sm\:deco-pos\:left,.sm\:deco-pos\:right{flex-direction:row;gap:var(--deco-gap)}.sm\:deco-gap\:0{--deco-gap:0px}.sm\:deco-gap\:1{--deco-gap:5px}.sm\:deco-gap\:2{--deco-gap:10px}}@media screen and (min-width:768px){.md\:n-deco{--deco-gap:10px;--deco-size:24px;gap:var(--deco-gap);text-align:center;text-indent:0;width:auto}.md\:deco-pos\:bottom,.md\:deco-pos\:top{flex-direction:column;gap:0;height:auto}:is(li,dt,dd,td,th,div):has(>.md\:deco-pos\:bottom),:is(li,dt,dd,td,th,div):has(>.md\:deco-pos\:top){height:auto;padding-bottom:5px;padding-top:5px}.md\:deco-pos\:left,.md\:deco-pos\:top{&:before{order:unset}}.md\:deco-pos\:bottom:before,.md\:deco-pos\:right:before{order:1}.md\:deco-pos\:left,.md\:deco-pos\:right{flex-direction:row;gap:var(--deco-gap)}.md\:deco-gap\:0{--deco-gap:0px}.md\:deco-gap\:1{--deco-gap:5px}.md\:deco-gap\:2{--deco-gap:10px}}@media screen and (min-width:992px){.lg\:n-deco{--deco-gap:10px;--deco-size:24px;gap:var(--deco-gap);text-align:center;text-indent:0;width:auto}.lg\:deco-pos\:bottom,.lg\:deco-pos\:top{flex-direction:column;gap:0;height:auto}:is(li,dt,dd,td,th,div):has(>.lg\:deco-pos\:bottom),:is(li,dt,dd,td,th,div):has(>.lg\:deco-pos\:top){height:auto;padding-bottom:5px;padding-top:5px}.lg\:deco-pos\:left,.lg\:deco-pos\:top{&:before{order:unset}}.lg\:deco-pos\:bottom:before,.lg\:deco-pos\:right:before{order:1}.lg\:deco-pos\:left,.lg\:deco-pos\:right{flex-direction:row;gap:var(--deco-gap)}.lg\:deco-gap\:0{--deco-gap:0px}.lg\:deco-gap\:1{--deco-gap:5px}.lg\:deco-gap\:2{--deco-gap:10px}}@media screen and (min-width:1200px){.xl\:n-deco{--deco-gap:10px;--deco-size:24px;gap:var (--deco-gap);text-align:center;text-indent:0;width:auto}.xl\:deco-pos\:bottom,.xl\:deco-pos\:top{flex-direction:column;gap:0;height:auto}:is(li,dt,dd,td,th,div):has(>.xl\:deco-pos\:bottom),:is(li,dt,dd,td,th,div):has(>.xl\:deco-pos\:top){height:auto;padding-bottom:5px;padding-top:5px}.xl\:deco-pos\:left,.xl\:deco-pos\:top{&:before{order:unset}}.xl\:deco-pos\:bottom:before,.xl\:deco-pos\:right:before{order:1}.xl\:deco-pos\:left,.xl\:deco-pos\:right{flex-direction:row;gap:var(--deco-gap)}.xl\:deco-gap\:0{--deco-gap:0px}.xl\:deco-gap\:1{--deco-gap:5px}.xl\:deco-gap\:2{--deco-gap:10px}}
|
package/dist/index.d.ts
CHANGED
|
@@ -1,7 +1,4 @@
|
|
|
1
|
-
// CSS 파일을 가져옴
|
|
2
|
-
import "./dist/
|
|
3
|
-
import "./dist/
|
|
4
|
-
|
|
5
|
-
// JavaScript 모듈을 가져옴
|
|
6
|
-
export { default as initLayout } from "./dist/js/n-layout";
|
|
7
|
-
export { default as initBar } from "./dist/js/n-layout";
|
|
1
|
+
// CSS 파일을 가져옴
|
|
2
|
+
import "./dist/style.css";
|
|
3
|
+
import "./dist/utils.css";
|
|
4
|
+
import "./dist/components.css";
|
package/dist/index.js
CHANGED
|
@@ -1,8 +1,4 @@
|
|
|
1
|
-
// CSS 파일을 가져옴
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
import "./dist/
|
|
5
|
-
|
|
6
|
-
// JavaScript 모듈을 가져옴
|
|
7
|
-
export { default as initLayout } from "./dist/js/n-layout";
|
|
8
|
-
export { default as initBar } from "./dist/js/n-bar";
|
|
1
|
+
// CSS 파일을 가져옴
|
|
2
|
+
import "./dist/style.css";
|
|
3
|
+
import "./dist/utils.css";
|
|
4
|
+
import "./dist/components.css";
|
package/dist/js/n-layout.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
|
|
1
|
+
class t{constructor(){this.isResizing=!1,this.startX=0,this.startWidth=0,this.currentAside=null,this.minWidth=200,this.maxWidth=600,this.init()}init(){"loading"===document.readyState?document.addEventListener("DOMContentLoaded",(()=>this.bindEvents())):this.bindEvents()}bindEvents(){document.addEventListener("mousedown",this.handleMouseDown.bind(this)),document.addEventListener("mousemove",this.handleMouseMove.bind(this)),document.addEventListener("mouseup",this.handleMouseUp.bind(this)),document.addEventListener("touchstart",this.handleTouchStart.bind(this)),document.addEventListener("touchmove",this.handleTouchMove.bind(this)),document.addEventListener("touchend",this.handleTouchEnd.bind(this)),document.addEventListener("keydown",this.handleKeyDown.bind(this)),document.addEventListener("mousemove",this.handleHover.bind(this))}handleMouseDown(t){const e=this.findResizableAside(t.target);e&&this.isInResizeArea(t,e)&&this.startResize(t.clientX,e)}handleMouseMove(t){this.isResizing&&this.updateResize(t.clientX)}handleHover(t){if(this.isResizing)return;const e=this.findResizableAside(t.target);e&&this.isInResizeArea(t,e)?document.body.style.cursor="ew-resize":"ew-resize"===document.body.style.cursor&&(document.body.style.cursor="")}handleMouseUp(){this.stopResize()}handleTouchStart(t){const e=this.findResizableAside(t.target);e&&this.isInResizeArea(t.touches[0],e)&&(t.preventDefault(),this.startResize(t.touches[0].clientX,e))}handleTouchMove(t){this.isResizing&&(t.preventDefault(),this.updateResize(t.touches[0].clientX))}handleTouchEnd(){this.stopResize()}handleKeyDown(t){"Escape"===t.key&&this.isResizing&&this.stopResize()}findResizableAside(t){const e=t.closest("aside, .n-aside");if(!e)return null;const s=e.closest(".n-layout");return s&&s.classList.contains("layout-aside-width:resizable")?(s.classList.contains("layout-aside-width:responsive")&&s.classList.remove("layout-aside-width:responsive"),e):null}isInResizeArea(t,e){const s=e.getBoundingClientRect(),i=e.closest(".n-layout");if(i&&i.classList.contains("layout-aside-pos:right")){return t.clientX-s.left<=8}return s.right-t.clientX<=8}startResize(t,e){this.isResizing=!0,this.currentAside=e,this.startX=t,this.startWidth=e.offsetWidth,e.classList.add("resizing"),document.body.style.cursor="ew-resize",document.body.style.userSelect="none"}updateResize(t){if(!this.isResizing||!this.currentAside)return;const e=t-this.startX;let s=this.startWidth+e;const i=this.currentAside.closest(".n-layout");i&&i.classList.contains("layout-aside-pos:right")&&(s=this.startWidth-e),s=Math.max(this.minWidth,Math.min(this.maxWidth,s)),this.currentAside.style.width=`${s}px`,i&&i.style.setProperty("--aside-width",`${s}px`),this.preventHorizontalScroll()}preventHorizontalScroll(){const t=this.currentAside?.closest(".n-layout");if(t){const e=window.innerWidth;if(t.scrollWidth>e){const t=e-100;this.currentAside.offsetWidth>t&&(this.currentAside.style.width=`${t}px`)}}}stopResize(){this.isResizing&&(this.currentAside&&this.currentAside.classList.remove("resizing"),this.isResizing=!1,this.currentAside=null,this.startX=0,this.startWidth=0,document.body.style.cursor="",document.body.style.userSelect="")}}new t,window.NLayoutResizer=t;
|