@bigtablet/design-system 1.17.3 → 1.17.4
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/package.json +4 -4
- package/dist/vanilla/bigtablet.css +0 -1058
- package/dist/vanilla/bigtablet.js +0 -778
- package/dist/vanilla/examples/index.html +0 -548
- package/src/styles/scss/_a11y.scss +0 -7
- package/src/styles/scss/_breakpoints.scss +0 -28
- package/src/styles/scss/_colors.scss +0 -51
- package/src/styles/scss/_layout.scss +0 -52
- package/src/styles/scss/_motion.scss +0 -28
- package/src/styles/scss/_radius.scss +0 -6
- package/src/styles/scss/_shadows.scss +0 -20
- package/src/styles/scss/_skeleton.scss +0 -69
- package/src/styles/scss/_spacing.scss +0 -12
- package/src/styles/scss/_typography.scss +0 -77
- package/src/styles/scss/_z-index.scss +0 -3
- package/src/styles/scss/token.scss +0 -10
|
@@ -1,548 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html lang="ko">
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset="UTF-8">
|
|
5
|
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
-
<title>Bigtablet Design System - Vanilla Examples</title>
|
|
7
|
-
|
|
8
|
-
<!-- Pretendard Font -->
|
|
9
|
-
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css">
|
|
10
|
-
|
|
11
|
-
<!-- Bigtablet CSS -->
|
|
12
|
-
<link rel="stylesheet" href="../bigtablet.css">
|
|
13
|
-
|
|
14
|
-
<style>
|
|
15
|
-
* {
|
|
16
|
-
margin: 0;
|
|
17
|
-
padding: 0;
|
|
18
|
-
box-sizing: border-box;
|
|
19
|
-
}
|
|
20
|
-
|
|
21
|
-
body {
|
|
22
|
-
font-family: var(--bt-font-family, "Pretendard", sans-serif);
|
|
23
|
-
background: var(--bt-color-background-secondary, #fafafa);
|
|
24
|
-
color: var(--bt-color-text-primary, #1a1a1a);
|
|
25
|
-
line-height: 1.5;
|
|
26
|
-
padding: 2rem;
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
.container {
|
|
30
|
-
max-width: 960px;
|
|
31
|
-
margin: 0 auto;
|
|
32
|
-
}
|
|
33
|
-
|
|
34
|
-
h1 {
|
|
35
|
-
font-size: 2rem;
|
|
36
|
-
font-weight: 700;
|
|
37
|
-
margin-bottom: 2rem;
|
|
38
|
-
}
|
|
39
|
-
|
|
40
|
-
h2 {
|
|
41
|
-
font-size: 1.25rem;
|
|
42
|
-
font-weight: 600;
|
|
43
|
-
margin: 2rem 0 1rem;
|
|
44
|
-
padding-bottom: 0.5rem;
|
|
45
|
-
border-bottom: 1px solid var(--bt-color-border, #e5e5e5);
|
|
46
|
-
}
|
|
47
|
-
|
|
48
|
-
.section {
|
|
49
|
-
background: var(--bt-color-background, #fff);
|
|
50
|
-
border-radius: var(--bt-radius-lg, 12px);
|
|
51
|
-
padding: 1.5rem;
|
|
52
|
-
margin-bottom: 1.5rem;
|
|
53
|
-
box-shadow: var(--bt-shadow-sm, 0 2px 4px rgba(0,0,0,0.04));
|
|
54
|
-
}
|
|
55
|
-
|
|
56
|
-
.demo-row {
|
|
57
|
-
display: flex;
|
|
58
|
-
flex-wrap: wrap;
|
|
59
|
-
gap: 1rem;
|
|
60
|
-
align-items: center;
|
|
61
|
-
margin-bottom: 1rem;
|
|
62
|
-
}
|
|
63
|
-
|
|
64
|
-
.demo-row:last-child {
|
|
65
|
-
margin-bottom: 0;
|
|
66
|
-
}
|
|
67
|
-
|
|
68
|
-
code {
|
|
69
|
-
background: var(--bt-color-background-neutral, #f3f3f3);
|
|
70
|
-
padding: 0.125rem 0.375rem;
|
|
71
|
-
border-radius: 4px;
|
|
72
|
-
font-size: 0.875rem;
|
|
73
|
-
}
|
|
74
|
-
|
|
75
|
-
pre {
|
|
76
|
-
background: #1e293b;
|
|
77
|
-
color: #e2e8f0;
|
|
78
|
-
padding: 1rem;
|
|
79
|
-
border-radius: 8px;
|
|
80
|
-
overflow-x: auto;
|
|
81
|
-
font-size: 0.875rem;
|
|
82
|
-
margin-top: 1rem;
|
|
83
|
-
}
|
|
84
|
-
</style>
|
|
85
|
-
</head>
|
|
86
|
-
<body>
|
|
87
|
-
<div class="container">
|
|
88
|
-
<h1>Bigtablet Design System</h1>
|
|
89
|
-
<p style="margin-bottom: 2rem; color: var(--bt-color-text-secondary);">
|
|
90
|
-
Vanilla HTML/CSS/JS 환경에서 사용하는 예제입니다.
|
|
91
|
-
</p>
|
|
92
|
-
|
|
93
|
-
<!-- Button -->
|
|
94
|
-
<div class="section">
|
|
95
|
-
<h2>Button</h2>
|
|
96
|
-
<div class="demo-row">
|
|
97
|
-
<button class="bt-button bt-button--md bt-button--primary">Primary</button>
|
|
98
|
-
<button class="bt-button bt-button--md bt-button--secondary">Secondary</button>
|
|
99
|
-
<button class="bt-button bt-button--md bt-button--ghost">Ghost</button>
|
|
100
|
-
<button class="bt-button bt-button--md bt-button--danger">Danger</button>
|
|
101
|
-
</div>
|
|
102
|
-
<div class="demo-row">
|
|
103
|
-
<button class="bt-button bt-button--sm bt-button--primary">Small</button>
|
|
104
|
-
<button class="bt-button bt-button--md bt-button--primary">Medium</button>
|
|
105
|
-
<button class="bt-button bt-button--lg bt-button--primary">Large</button>
|
|
106
|
-
</div>
|
|
107
|
-
<div class="demo-row">
|
|
108
|
-
<button class="bt-button bt-button--md bt-button--primary" disabled>Disabled</button>
|
|
109
|
-
</div>
|
|
110
|
-
|
|
111
|
-
<pre><code><button class="bt-button bt-button--md bt-button--primary">Primary</button>
|
|
112
|
-
<button class="bt-button bt-button--md bt-button--secondary">Secondary</button>
|
|
113
|
-
<button class="bt-button bt-button--md bt-button--ghost">Ghost</button>
|
|
114
|
-
<button class="bt-button bt-button--md bt-button--danger">Danger</button></code></pre>
|
|
115
|
-
</div>
|
|
116
|
-
|
|
117
|
-
<!-- TextField -->
|
|
118
|
-
<div class="section">
|
|
119
|
-
<h2>TextField</h2>
|
|
120
|
-
<div class="demo-row">
|
|
121
|
-
<div class="bt-text-field" style="width: 300px;">
|
|
122
|
-
<label class="bt-text-field__label">Label</label>
|
|
123
|
-
<div class="bt-text-field__wrap">
|
|
124
|
-
<input type="text" class="bt-text-field__input bt-text-field__input--outline bt-text-field__input--md" placeholder="Enter text...">
|
|
125
|
-
</div>
|
|
126
|
-
</div>
|
|
127
|
-
</div>
|
|
128
|
-
<div class="demo-row">
|
|
129
|
-
<div class="bt-text-field" style="width: 300px;">
|
|
130
|
-
<label class="bt-text-field__label">Filled Variant</label>
|
|
131
|
-
<div class="bt-text-field__wrap">
|
|
132
|
-
<input type="text" class="bt-text-field__input bt-text-field__input--filled bt-text-field__input--md" placeholder="Enter text...">
|
|
133
|
-
</div>
|
|
134
|
-
</div>
|
|
135
|
-
</div>
|
|
136
|
-
<div class="demo-row">
|
|
137
|
-
<div class="bt-text-field" style="width: 300px;">
|
|
138
|
-
<label class="bt-text-field__label">With Error</label>
|
|
139
|
-
<div class="bt-text-field__wrap">
|
|
140
|
-
<input type="text" class="bt-text-field__input bt-text-field__input--outline bt-text-field__input--md bt-text-field__input--error" value="Invalid value">
|
|
141
|
-
</div>
|
|
142
|
-
<span class="bt-text-field__helper bt-text-field__helper--error">This field is required</span>
|
|
143
|
-
</div>
|
|
144
|
-
</div>
|
|
145
|
-
|
|
146
|
-
<pre><code><div class="bt-text-field">
|
|
147
|
-
<label class="bt-text-field__label">Label</label>
|
|
148
|
-
<div class="bt-text-field__wrap">
|
|
149
|
-
<input type="text" class="bt-text-field__input bt-text-field__input--outline bt-text-field__input--md" placeholder="Enter text...">
|
|
150
|
-
</div>
|
|
151
|
-
</div></code></pre>
|
|
152
|
-
</div>
|
|
153
|
-
|
|
154
|
-
<!-- Checkbox -->
|
|
155
|
-
<div class="section">
|
|
156
|
-
<h2>Checkbox</h2>
|
|
157
|
-
<div class="demo-row">
|
|
158
|
-
<label class="bt-checkbox">
|
|
159
|
-
<input type="checkbox" class="bt-checkbox__input">
|
|
160
|
-
<span class="bt-checkbox__box"></span>
|
|
161
|
-
<span class="bt-checkbox__label">Checkbox Label</span>
|
|
162
|
-
</label>
|
|
163
|
-
</div>
|
|
164
|
-
<div class="demo-row">
|
|
165
|
-
<label class="bt-checkbox">
|
|
166
|
-
<input type="checkbox" class="bt-checkbox__input" checked>
|
|
167
|
-
<span class="bt-checkbox__box"></span>
|
|
168
|
-
<span class="bt-checkbox__label">Checked</span>
|
|
169
|
-
</label>
|
|
170
|
-
</div>
|
|
171
|
-
<div class="demo-row">
|
|
172
|
-
<label class="bt-checkbox">
|
|
173
|
-
<input type="checkbox" class="bt-checkbox__input" disabled>
|
|
174
|
-
<span class="bt-checkbox__box"></span>
|
|
175
|
-
<span class="bt-checkbox__label">Disabled</span>
|
|
176
|
-
</label>
|
|
177
|
-
</div>
|
|
178
|
-
|
|
179
|
-
<pre><code><label class="bt-checkbox">
|
|
180
|
-
<input type="checkbox" class="bt-checkbox__input">
|
|
181
|
-
<span class="bt-checkbox__box"></span>
|
|
182
|
-
<span class="bt-checkbox__label">Checkbox Label</span>
|
|
183
|
-
</label></code></pre>
|
|
184
|
-
</div>
|
|
185
|
-
|
|
186
|
-
<!-- Radio -->
|
|
187
|
-
<div class="section">
|
|
188
|
-
<h2>Radio</h2>
|
|
189
|
-
<div class="demo-row" style="flex-direction: column; align-items: flex-start;">
|
|
190
|
-
<label class="bt-radio">
|
|
191
|
-
<input type="radio" name="demo-radio" class="bt-radio__input" checked>
|
|
192
|
-
<span class="bt-radio__dot"></span>
|
|
193
|
-
<span class="bt-radio__label">Option 1</span>
|
|
194
|
-
</label>
|
|
195
|
-
<label class="bt-radio">
|
|
196
|
-
<input type="radio" name="demo-radio" class="bt-radio__input">
|
|
197
|
-
<span class="bt-radio__dot"></span>
|
|
198
|
-
<span class="bt-radio__label">Option 2</span>
|
|
199
|
-
</label>
|
|
200
|
-
<label class="bt-radio">
|
|
201
|
-
<input type="radio" name="demo-radio" class="bt-radio__input">
|
|
202
|
-
<span class="bt-radio__dot"></span>
|
|
203
|
-
<span class="bt-radio__label">Option 3</span>
|
|
204
|
-
</label>
|
|
205
|
-
</div>
|
|
206
|
-
|
|
207
|
-
<pre><code><label class="bt-radio">
|
|
208
|
-
<input type="radio" name="group" class="bt-radio__input">
|
|
209
|
-
<span class="bt-radio__dot"></span>
|
|
210
|
-
<span class="bt-radio__label">Option 1</span>
|
|
211
|
-
</label></code></pre>
|
|
212
|
-
</div>
|
|
213
|
-
|
|
214
|
-
<!-- Switch -->
|
|
215
|
-
<div class="section">
|
|
216
|
-
<h2>Switch</h2>
|
|
217
|
-
<div class="demo-row">
|
|
218
|
-
<button class="bt-switch" data-bt-switch>
|
|
219
|
-
<span class="bt-switch__thumb"></span>
|
|
220
|
-
</button>
|
|
221
|
-
<span>Off</span>
|
|
222
|
-
</div>
|
|
223
|
-
<div class="demo-row">
|
|
224
|
-
<button class="bt-switch bt-switch--on" data-bt-switch>
|
|
225
|
-
<span class="bt-switch__thumb"></span>
|
|
226
|
-
</button>
|
|
227
|
-
<span>On</span>
|
|
228
|
-
</div>
|
|
229
|
-
<div class="demo-row">
|
|
230
|
-
<button class="bt-switch bt-switch--sm" data-bt-switch>
|
|
231
|
-
<span class="bt-switch__thumb"></span>
|
|
232
|
-
</button>
|
|
233
|
-
<span>Small</span>
|
|
234
|
-
</div>
|
|
235
|
-
<div class="demo-row">
|
|
236
|
-
<button class="bt-switch bt-switch--lg" data-bt-switch>
|
|
237
|
-
<span class="bt-switch__thumb"></span>
|
|
238
|
-
</button>
|
|
239
|
-
<span>Large</span>
|
|
240
|
-
</div>
|
|
241
|
-
|
|
242
|
-
<pre><code><button class="bt-switch" data-bt-switch>
|
|
243
|
-
<span class="bt-switch__thumb"></span>
|
|
244
|
-
</button>
|
|
245
|
-
|
|
246
|
-
<!-- On state -->
|
|
247
|
-
<button class="bt-switch bt-switch--on" data-bt-switch>
|
|
248
|
-
<span class="bt-switch__thumb"></span>
|
|
249
|
-
</button></code></pre>
|
|
250
|
-
</div>
|
|
251
|
-
|
|
252
|
-
<!-- Select -->
|
|
253
|
-
<div class="section">
|
|
254
|
-
<h2>Select</h2>
|
|
255
|
-
<div class="demo-row">
|
|
256
|
-
<div class="bt-select" data-bt-select style="width: 300px;">
|
|
257
|
-
<label class="bt-select__label">Select Option</label>
|
|
258
|
-
<button type="button" class="bt-select__control bt-select__control--outline bt-select__control--md">
|
|
259
|
-
<span class="bt-select__placeholder">Select...</span>
|
|
260
|
-
<span class="bt-select__icon">
|
|
261
|
-
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
262
|
-
<path d="M6 9l6 6 6-6"/>
|
|
263
|
-
</svg>
|
|
264
|
-
</span>
|
|
265
|
-
</button>
|
|
266
|
-
<ul class="bt-select__list" style="display: none;">
|
|
267
|
-
<li class="bt-select__option" data-value="apple">Apple</li>
|
|
268
|
-
<li class="bt-select__option" data-value="banana">Banana</li>
|
|
269
|
-
<li class="bt-select__option" data-value="cherry">Cherry</li>
|
|
270
|
-
<li class="bt-select__option is-disabled" data-value="disabled">Disabled Option</li>
|
|
271
|
-
<li class="bt-select__option" data-value="elderberry">Elderberry</li>
|
|
272
|
-
</ul>
|
|
273
|
-
</div>
|
|
274
|
-
</div>
|
|
275
|
-
|
|
276
|
-
<pre><code><div class="bt-select" data-bt-select>
|
|
277
|
-
<label class="bt-select__label">Select Option</label>
|
|
278
|
-
<button type="button" class="bt-select__control bt-select__control--outline bt-select__control--md">
|
|
279
|
-
<span class="bt-select__placeholder">Select...</span>
|
|
280
|
-
<span class="bt-select__icon">▼</span>
|
|
281
|
-
</button>
|
|
282
|
-
<ul class="bt-select__list">
|
|
283
|
-
<li class="bt-select__option" data-value="apple">Apple</li>
|
|
284
|
-
<li class="bt-select__option" data-value="banana">Banana</li>
|
|
285
|
-
</ul>
|
|
286
|
-
</div></code></pre>
|
|
287
|
-
</div>
|
|
288
|
-
|
|
289
|
-
<!-- Card -->
|
|
290
|
-
<div class="section">
|
|
291
|
-
<h2>Card</h2>
|
|
292
|
-
<div class="demo-row">
|
|
293
|
-
<div class="bt-card bt-card--bordered bt-card--p-md" style="width: 300px;">
|
|
294
|
-
<div class="bt-card__title">Card Title</div>
|
|
295
|
-
<p>This is a card component with bordered style and medium padding.</p>
|
|
296
|
-
</div>
|
|
297
|
-
<div class="bt-card bt-card--shadow-md bt-card--p-md" style="width: 300px;">
|
|
298
|
-
<div class="bt-card__title">Shadow Card</div>
|
|
299
|
-
<p>This card uses shadow instead of border.</p>
|
|
300
|
-
</div>
|
|
301
|
-
</div>
|
|
302
|
-
|
|
303
|
-
<pre><code><div class="bt-card bt-card--bordered bt-card--p-md">
|
|
304
|
-
<div class="bt-card__title">Card Title</div>
|
|
305
|
-
<p>Card content goes here.</p>
|
|
306
|
-
</div></code></pre>
|
|
307
|
-
</div>
|
|
308
|
-
|
|
309
|
-
<!-- Spinner -->
|
|
310
|
-
<div class="section">
|
|
311
|
-
<h2>Spinner</h2>
|
|
312
|
-
<div class="demo-row">
|
|
313
|
-
<div class="bt-spinner bt-spinner--sm"></div>
|
|
314
|
-
<div class="bt-spinner bt-spinner--md"></div>
|
|
315
|
-
<div class="bt-spinner bt-spinner--lg"></div>
|
|
316
|
-
<div class="bt-spinner bt-spinner--xl"></div>
|
|
317
|
-
</div>
|
|
318
|
-
|
|
319
|
-
<pre><code><div class="bt-spinner bt-spinner--md"></div></code></pre>
|
|
320
|
-
</div>
|
|
321
|
-
|
|
322
|
-
<!-- Pagination -->
|
|
323
|
-
<div class="section">
|
|
324
|
-
<h2>Pagination</h2>
|
|
325
|
-
<nav class="bt-pagination" data-bt-pagination data-page="3" data-total-pages="10">
|
|
326
|
-
<!-- JS가 자동으로 렌더링 -->
|
|
327
|
-
</nav>
|
|
328
|
-
|
|
329
|
-
<pre><code><nav class="bt-pagination" data-bt-pagination data-page="3" data-total-pages="10">
|
|
330
|
-
<!-- JS가 자동으로 렌더링 -->
|
|
331
|
-
</nav>
|
|
332
|
-
|
|
333
|
-
<script>
|
|
334
|
-
// 또는 수동 초기화
|
|
335
|
-
const pagination = Bigtablet.Pagination('#my-pagination', {
|
|
336
|
-
page: 1,
|
|
337
|
-
totalPages: 10,
|
|
338
|
-
onChange: (page) => console.log('Page:', page)
|
|
339
|
-
});
|
|
340
|
-
</script></code></pre>
|
|
341
|
-
</div>
|
|
342
|
-
|
|
343
|
-
<!-- Modal -->
|
|
344
|
-
<div class="section">
|
|
345
|
-
<h2>Modal</h2>
|
|
346
|
-
<div class="demo-row">
|
|
347
|
-
<button class="bt-button bt-button--md bt-button--primary" data-bt-modal-open="demo-modal">
|
|
348
|
-
Open Modal
|
|
349
|
-
</button>
|
|
350
|
-
</div>
|
|
351
|
-
|
|
352
|
-
<div id="demo-modal" class="bt-modal" data-bt-modal>
|
|
353
|
-
<div class="bt-modal__panel" style="width: 400px;">
|
|
354
|
-
<div class="bt-modal__header">Modal Title</div>
|
|
355
|
-
<div class="bt-modal__body">
|
|
356
|
-
<p>This is the modal content. You can put any HTML here.</p>
|
|
357
|
-
</div>
|
|
358
|
-
<div class="bt-modal__footer">
|
|
359
|
-
<button class="bt-button bt-button--md bt-button--secondary" data-modal-close>Cancel</button>
|
|
360
|
-
<button class="bt-button bt-button--md bt-button--primary" data-modal-close>Confirm</button>
|
|
361
|
-
</div>
|
|
362
|
-
</div>
|
|
363
|
-
</div>
|
|
364
|
-
|
|
365
|
-
<pre><code><button data-bt-modal-open="my-modal">Open Modal</button>
|
|
366
|
-
|
|
367
|
-
<div id="my-modal" class="bt-modal" data-bt-modal>
|
|
368
|
-
<div class="bt-modal__panel">
|
|
369
|
-
<div class="bt-modal__header">Title</div>
|
|
370
|
-
<div class="bt-modal__body">Content</div>
|
|
371
|
-
<div class="bt-modal__footer">
|
|
372
|
-
<button data-modal-close>Close</button>
|
|
373
|
-
</div>
|
|
374
|
-
</div>
|
|
375
|
-
</div></code></pre>
|
|
376
|
-
</div>
|
|
377
|
-
|
|
378
|
-
<!-- Alert -->
|
|
379
|
-
<div class="section">
|
|
380
|
-
<h2>Alert (JavaScript)</h2>
|
|
381
|
-
<div class="demo-row">
|
|
382
|
-
<button class="bt-button bt-button--md bt-button--primary" onclick="showInfoAlert()">Info Alert</button>
|
|
383
|
-
<button class="bt-button bt-button--md bt-button--secondary" onclick="showConfirmAlert()">Confirm Alert</button>
|
|
384
|
-
<button class="bt-button bt-button--md bt-button--danger" onclick="showErrorAlert()">Error Alert</button>
|
|
385
|
-
</div>
|
|
386
|
-
|
|
387
|
-
<pre><code>// Info Alert
|
|
388
|
-
Bigtablet.Alert({
|
|
389
|
-
title: '알림',
|
|
390
|
-
message: '작업이 완료되었습니다.',
|
|
391
|
-
variant: 'info'
|
|
392
|
-
});
|
|
393
|
-
|
|
394
|
-
// Confirm Alert
|
|
395
|
-
Bigtablet.Alert({
|
|
396
|
-
title: '확인',
|
|
397
|
-
message: '정말 삭제하시겠습니까?',
|
|
398
|
-
variant: 'warning',
|
|
399
|
-
showCancel: true,
|
|
400
|
-
onConfirm: () => console.log('Confirmed!'),
|
|
401
|
-
onCancel: () => console.log('Cancelled')
|
|
402
|
-
});</code></pre>
|
|
403
|
-
</div>
|
|
404
|
-
|
|
405
|
-
<!-- DatePicker -->
|
|
406
|
-
<div class="section">
|
|
407
|
-
<h2>DatePicker</h2>
|
|
408
|
-
<div class="demo-row">
|
|
409
|
-
<div class="bt-date-picker" style="width: 300px;">
|
|
410
|
-
<label class="bt-date-picker__label">
|
|
411
|
-
Date
|
|
412
|
-
<span class="bt-date-picker__label-required">*</span>
|
|
413
|
-
</label>
|
|
414
|
-
<div class="bt-date-picker__fields">
|
|
415
|
-
<select class="bt-date-picker__select">
|
|
416
|
-
<option value="">Year</option>
|
|
417
|
-
<option value="2024">2024</option>
|
|
418
|
-
<option value="2025">2025</option>
|
|
419
|
-
<option value="2026">2026</option>
|
|
420
|
-
</select>
|
|
421
|
-
<select class="bt-date-picker__select">
|
|
422
|
-
<option value="">Month</option>
|
|
423
|
-
<option value="1">1</option>
|
|
424
|
-
<option value="2">2</option>
|
|
425
|
-
<option value="3">3</option>
|
|
426
|
-
<option value="4">4</option>
|
|
427
|
-
<option value="5">5</option>
|
|
428
|
-
<option value="6">6</option>
|
|
429
|
-
<option value="7">7</option>
|
|
430
|
-
<option value="8">8</option>
|
|
431
|
-
<option value="9">9</option>
|
|
432
|
-
<option value="10">10</option>
|
|
433
|
-
<option value="11">11</option>
|
|
434
|
-
<option value="12">12</option>
|
|
435
|
-
</select>
|
|
436
|
-
<select class="bt-date-picker__select">
|
|
437
|
-
<option value="">Day</option>
|
|
438
|
-
<option value="1">1</option>
|
|
439
|
-
<option value="2">2</option>
|
|
440
|
-
<!-- ... -->
|
|
441
|
-
<option value="31">31</option>
|
|
442
|
-
</select>
|
|
443
|
-
</div>
|
|
444
|
-
</div>
|
|
445
|
-
</div>
|
|
446
|
-
|
|
447
|
-
<pre><code><div class="bt-date-picker">
|
|
448
|
-
<label class="bt-date-picker__label">Date</label>
|
|
449
|
-
<div class="bt-date-picker__fields">
|
|
450
|
-
<select class="bt-date-picker__select">
|
|
451
|
-
<option value="">Year</option>
|
|
452
|
-
<option value="2024">2024</option>
|
|
453
|
-
</select>
|
|
454
|
-
<select class="bt-date-picker__select">
|
|
455
|
-
<option value="">Month</option>
|
|
456
|
-
<option value="1">1</option>
|
|
457
|
-
</select>
|
|
458
|
-
<select class="bt-date-picker__select">
|
|
459
|
-
<option value="">Day</option>
|
|
460
|
-
<option value="1">1</option>
|
|
461
|
-
</select>
|
|
462
|
-
</div>
|
|
463
|
-
</div></code></pre>
|
|
464
|
-
</div>
|
|
465
|
-
|
|
466
|
-
<!-- FileInput -->
|
|
467
|
-
<div class="section">
|
|
468
|
-
<h2>FileInput</h2>
|
|
469
|
-
<div class="demo-row">
|
|
470
|
-
<div class="bt-file-input">
|
|
471
|
-
<input type="file" class="bt-file-input__control" id="file-input">
|
|
472
|
-
<label class="bt-file-input__label" for="file-input">Choose File</label>
|
|
473
|
-
</div>
|
|
474
|
-
</div>
|
|
475
|
-
|
|
476
|
-
<pre><code><div class="bt-file-input">
|
|
477
|
-
<input type="file" class="bt-file-input__control" id="file-input">
|
|
478
|
-
<label class="bt-file-input__label" for="file-input">Choose File</label>
|
|
479
|
-
</div></code></pre>
|
|
480
|
-
</div>
|
|
481
|
-
|
|
482
|
-
</div>
|
|
483
|
-
|
|
484
|
-
<!-- Bigtablet JS -->
|
|
485
|
-
<script src="../bigtablet.js"></script>
|
|
486
|
-
<script>
|
|
487
|
-
// Alert examples
|
|
488
|
-
function showInfoAlert() {
|
|
489
|
-
Bigtablet.Alert({
|
|
490
|
-
title: '알림',
|
|
491
|
-
message: '작업이 성공적으로 완료되었습니다.',
|
|
492
|
-
variant: 'info'
|
|
493
|
-
});
|
|
494
|
-
}
|
|
495
|
-
|
|
496
|
-
function showConfirmAlert() {
|
|
497
|
-
Bigtablet.Alert({
|
|
498
|
-
title: '확인',
|
|
499
|
-
message: '이 항목을 삭제하시겠습니까?',
|
|
500
|
-
variant: 'warning',
|
|
501
|
-
showCancel: true,
|
|
502
|
-
confirmText: '삭제',
|
|
503
|
-
cancelText: '취소',
|
|
504
|
-
onConfirm: () => console.log('삭제됨'),
|
|
505
|
-
onCancel: () => console.log('취소됨')
|
|
506
|
-
});
|
|
507
|
-
}
|
|
508
|
-
|
|
509
|
-
function showErrorAlert() {
|
|
510
|
-
Bigtablet.Alert({
|
|
511
|
-
title: '오류',
|
|
512
|
-
message: '요청을 처리하는 중 오류가 발생했습니다.',
|
|
513
|
-
variant: 'error'
|
|
514
|
-
});
|
|
515
|
-
}
|
|
516
|
-
|
|
517
|
-
// Select example with options
|
|
518
|
-
document.addEventListener('DOMContentLoaded', function() {
|
|
519
|
-
const selectEl = document.querySelector('[data-bt-select]');
|
|
520
|
-
if (selectEl && selectEl._btSelect) {
|
|
521
|
-
// Already initialized by auto-init
|
|
522
|
-
} else if (selectEl) {
|
|
523
|
-
const options = [
|
|
524
|
-
{ value: 'apple', label: 'Apple' },
|
|
525
|
-
{ value: 'banana', label: 'Banana' },
|
|
526
|
-
{ value: 'cherry', label: 'Cherry' },
|
|
527
|
-
{ value: 'disabled', label: 'Disabled Option', disabled: true },
|
|
528
|
-
{ value: 'elderberry', label: 'Elderberry' }
|
|
529
|
-
];
|
|
530
|
-
|
|
531
|
-
Bigtablet.Select(selectEl, {
|
|
532
|
-
options,
|
|
533
|
-
placeholder: 'Select a fruit...',
|
|
534
|
-
onChange: (value, option) => {
|
|
535
|
-
console.log('Selected:', value, option);
|
|
536
|
-
}
|
|
537
|
-
});
|
|
538
|
-
}
|
|
539
|
-
|
|
540
|
-
// Pagination change handler
|
|
541
|
-
const paginationEl = document.querySelector('[data-bt-pagination]');
|
|
542
|
-
if (paginationEl && paginationEl._btPagination) {
|
|
543
|
-
// You can set onChange after init if needed
|
|
544
|
-
}
|
|
545
|
-
});
|
|
546
|
-
</script>
|
|
547
|
-
</body>
|
|
548
|
-
</html>
|
|
@@ -1,28 +0,0 @@
|
|
|
1
|
-
$breakpoint_mobile: 360px;
|
|
2
|
-
$breakpoint_tablet: 768px;
|
|
3
|
-
$breakpoint_laptop: 1024px;
|
|
4
|
-
$breakpoint_desktop: 1280px;
|
|
5
|
-
|
|
6
|
-
@mixin mobile {
|
|
7
|
-
@media (max-width: #{$breakpoint_tablet - 1}) {
|
|
8
|
-
@content;
|
|
9
|
-
}
|
|
10
|
-
}
|
|
11
|
-
|
|
12
|
-
@mixin tablet {
|
|
13
|
-
@media (min-width: $breakpoint_tablet) and (max-width: #{$breakpoint_laptop - 1}) {
|
|
14
|
-
@content;
|
|
15
|
-
}
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
@mixin laptop {
|
|
19
|
-
@media (min-width: $breakpoint_laptop) and (max-width: #{$breakpoint_desktop - 1}) {
|
|
20
|
-
@content;
|
|
21
|
-
}
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
@mixin desktop {
|
|
25
|
-
@media (min-width: $breakpoint_desktop) {
|
|
26
|
-
@content;
|
|
27
|
-
}
|
|
28
|
-
}
|
|
@@ -1,51 +0,0 @@
|
|
|
1
|
-
/* Primary */
|
|
2
|
-
$color_primary: #000000;
|
|
3
|
-
$color_primary_hover: #333333;
|
|
4
|
-
|
|
5
|
-
/* Background */
|
|
6
|
-
$color_background: #ffffff;
|
|
7
|
-
$color_background_secondary: #fafafa;
|
|
8
|
-
$color_background_neutral: #F3F3F3;
|
|
9
|
-
$color_background_muted: #f0f0f0;
|
|
10
|
-
$color_background_primary: #47555E;
|
|
11
|
-
|
|
12
|
-
/* Background - Dark Palette (for modern/tech sections) */
|
|
13
|
-
$color_background_dark: #1E293B;
|
|
14
|
-
$color_background_darker: #0F172A;
|
|
15
|
-
$color_background_darkest: #020617;
|
|
16
|
-
|
|
17
|
-
/* Text */
|
|
18
|
-
$color_text_primary: #1a1a1a;
|
|
19
|
-
$color_text_secondary: #666666;
|
|
20
|
-
$color_text_tertiary: #999999;
|
|
21
|
-
|
|
22
|
-
$text_strong: #1f2937;
|
|
23
|
-
$text_normal: #3b3b3b;
|
|
24
|
-
$text_subtle: #6b7280;
|
|
25
|
-
$text_disabled: #9ca3af;
|
|
26
|
-
$text_inverse: #ffffff;
|
|
27
|
-
|
|
28
|
-
/* Border */
|
|
29
|
-
$color_border: #e5e5e5;
|
|
30
|
-
$color_border_light: rgba(0, 0, 0, 0.08);
|
|
31
|
-
|
|
32
|
-
/* Status */
|
|
33
|
-
$color_success: #10b981;
|
|
34
|
-
$color_error: #ef4444;
|
|
35
|
-
$color_warning: #f59e0b;
|
|
36
|
-
$color_info: #3b82f6;
|
|
37
|
-
|
|
38
|
-
/* Accent - Tech Blue */
|
|
39
|
-
$color_accent: #3B82F6;
|
|
40
|
-
$color_accent_light: #60A5FA;
|
|
41
|
-
$color_accent_dark: #2563EB;
|
|
42
|
-
|
|
43
|
-
/* Overlay */
|
|
44
|
-
$color_overlay: rgba(0, 0, 0, 0.5);
|
|
45
|
-
$color_overlay_light: rgba(0, 0, 0, 0.3);
|
|
46
|
-
$color_overlay_strong: rgba(0, 0, 0, 0.7);
|
|
47
|
-
|
|
48
|
-
/* Glass Effect */
|
|
49
|
-
$color_glass_light: rgba(255, 255, 255, 0.08);
|
|
50
|
-
$color_glass_border: rgba(255, 255, 255, 0.12);
|
|
51
|
-
$color_glass_dark: rgba(0, 0, 0, 0.4);
|
|
@@ -1,52 +0,0 @@
|
|
|
1
|
-
/* Flex Utilities */
|
|
2
|
-
@mixin flex_center { display: flex; align-items: center; justify-content: center; }
|
|
3
|
-
@mixin flex_left { display: flex; align-items: center; justify-content: flex-start; }
|
|
4
|
-
@mixin flex_right { display: flex; align-items: center; justify-content: flex-end; }
|
|
5
|
-
@mixin flex_between { display: flex; align-items: center; justify-content: space-between; }
|
|
6
|
-
|
|
7
|
-
@mixin flex_column { display: flex; flex-direction: column; }
|
|
8
|
-
@mixin flex_column_center { display: flex; flex-direction: column; align-items: center; justify-content: center; }
|
|
9
|
-
@mixin flex_column_start { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; }
|
|
10
|
-
|
|
11
|
-
/* Glass Effect Mixins */
|
|
12
|
-
@mixin glass_light {
|
|
13
|
-
background: rgba(255, 255, 255, 0.08);
|
|
14
|
-
backdrop-filter: blur(12px);
|
|
15
|
-
-webkit-backdrop-filter: blur(12px);
|
|
16
|
-
border: 1px solid rgba(255, 255, 255, 0.12);
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
@mixin glass_dark {
|
|
20
|
-
background: rgba(0, 0, 0, 0.4);
|
|
21
|
-
backdrop-filter: blur(12px);
|
|
22
|
-
-webkit-backdrop-filter: blur(12px);
|
|
23
|
-
border: 1px solid rgba(255, 255, 255, 0.08);
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
@mixin glass_card {
|
|
27
|
-
background: rgba(255, 255, 255, 0.05);
|
|
28
|
-
backdrop-filter: blur(20px);
|
|
29
|
-
-webkit-backdrop-filter: blur(20px);
|
|
30
|
-
border: 1px solid rgba(255, 255, 255, 0.1);
|
|
31
|
-
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
|
|
32
|
-
}
|
|
33
|
-
|
|
34
|
-
/* Hover Lift Effect */
|
|
35
|
-
@mixin hover_lift($y: -4px, $shadow: 0 12px 24px rgba(0, 0, 0, 0.15)) {
|
|
36
|
-
transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
|
|
37
|
-
box-shadow 0.25s cubic-bezier(0.16, 1, 0.3, 1);
|
|
38
|
-
|
|
39
|
-
&:hover {
|
|
40
|
-
transform: translateY($y);
|
|
41
|
-
box-shadow: $shadow;
|
|
42
|
-
}
|
|
43
|
-
}
|
|
44
|
-
|
|
45
|
-
/* Glow on Hover */
|
|
46
|
-
@mixin hover_glow($color: rgba(59, 130, 246, 0.4)) {
|
|
47
|
-
transition: box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1);
|
|
48
|
-
|
|
49
|
-
&:hover {
|
|
50
|
-
box-shadow: 0 0 30px $color;
|
|
51
|
-
}
|
|
52
|
-
}
|