bulma-tailwind 0.1.0
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 -0
- package/README.md +67 -0
- package/dist/bulma-tailwind.css +3352 -0
- package/package.json +32 -0
- package/src/bulma-tailwind.css +45 -0
- package/src/components/breadcrumb.css +48 -0
- package/src/components/card.css +17 -0
- package/src/components/dropdown.css +31 -0
- package/src/components/menu.css +20 -0
- package/src/components/message.css +76 -0
- package/src/components/modal.css +26 -0
- package/src/components/navbar.css +20 -0
- package/src/components/pagination.css +40 -0
- package/src/components/panel.css +31 -0
- package/src/components/tabs.css +38 -0
- package/src/elements/box.css +6 -0
- package/src/elements/button.css +169 -0
- package/src/elements/content.css +61 -0
- package/src/elements/delete.css +39 -0
- package/src/elements/icon.css +18 -0
- package/src/elements/image.css +46 -0
- package/src/elements/notification.css +98 -0
- package/src/elements/progress.css +59 -0
- package/src/elements/table.css +129 -0
- package/src/elements/tag.css +120 -0
- package/src/elements/title.css +21 -0
- package/src/example/components.html +341 -0
- package/src/example/dist/bulma-tailwind.css +3352 -0
- package/src/example/elements.html +605 -0
- package/src/example/form.html +262 -0
- package/src/example/index.html +146 -0
- package/src/example/layout.html +193 -0
- package/src/example/misc.html +164 -0
- package/src/footer.css +5 -0
- package/src/form/checkbox-radio.css +8 -0
- package/src/form/file.css +44 -0
- package/src/form/general.css +129 -0
- package/src/form/input.css +9 -0
- package/src/form/select.css +39 -0
- package/src/form/textarea.css +315 -0
- package/src/layout/columns.css +25 -0
- package/src/layout/container.css +12 -0
- package/src/layout/hero.css +8 -0
- package/src/layout/level.css +31 -0
- package/src/layout/section.css +11 -0
- package/src/media-object.css +8 -0
- package/src/theme.css +39 -0
|
@@ -0,0 +1,341 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<title>Components - Bulma Tailwind</title>
|
|
7
|
+
<link rel="stylesheet" href="./dist/bulma-tailwind.css">
|
|
8
|
+
<style>
|
|
9
|
+
body { background: #fafafa; font-family: system-ui; margin: 0; padding: 2rem; }
|
|
10
|
+
.demo-section {
|
|
11
|
+
background: white;
|
|
12
|
+
border-radius: 12px;
|
|
13
|
+
padding: 1.5rem;
|
|
14
|
+
margin-bottom: 2rem;
|
|
15
|
+
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
|
|
16
|
+
}
|
|
17
|
+
.demo-title {
|
|
18
|
+
font-size: 1.5rem;
|
|
19
|
+
font-weight: bold;
|
|
20
|
+
margin-bottom: 1rem;
|
|
21
|
+
border-left: 4px solid #485fc7;
|
|
22
|
+
padding-left: 1rem;
|
|
23
|
+
display: flex;
|
|
24
|
+
justify-content: space-between;
|
|
25
|
+
align-items: center;
|
|
26
|
+
}
|
|
27
|
+
.demo-row { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; margin-bottom: 1rem; }
|
|
28
|
+
.copy-btn {
|
|
29
|
+
padding: 0.5rem 1rem;
|
|
30
|
+
background: #485fc7;
|
|
31
|
+
color: white;
|
|
32
|
+
border: none;
|
|
33
|
+
border-radius: 6px;
|
|
34
|
+
cursor: pointer;
|
|
35
|
+
font-size: 0.875rem;
|
|
36
|
+
transition: background 0.2s;
|
|
37
|
+
}
|
|
38
|
+
.copy-btn:hover {
|
|
39
|
+
background: #3e4db5;
|
|
40
|
+
}
|
|
41
|
+
.copy-btn.copied {
|
|
42
|
+
background: #48c78e;
|
|
43
|
+
}
|
|
44
|
+
.code-container {
|
|
45
|
+
display: none;
|
|
46
|
+
background: #f5f5f5;
|
|
47
|
+
padding: 1rem;
|
|
48
|
+
border-radius: 6px;
|
|
49
|
+
margin-top: 1rem;
|
|
50
|
+
overflow-x: auto;
|
|
51
|
+
}
|
|
52
|
+
.code-container pre {
|
|
53
|
+
margin: 0;
|
|
54
|
+
font-family: 'Courier New', monospace;
|
|
55
|
+
font-size: 0.875rem;
|
|
56
|
+
}
|
|
57
|
+
</style>
|
|
58
|
+
</head>
|
|
59
|
+
<body>
|
|
60
|
+
<div style="max-width: 1200px; margin: 0 auto;">
|
|
61
|
+
<a href="index.html" class="button is-link is-small">← Back to home</a>
|
|
62
|
+
<h1 class="title is-1">Components</h1>
|
|
63
|
+
|
|
64
|
+
<!-- Breadcrumb -->
|
|
65
|
+
<div class="demo-section" id="section-1">
|
|
66
|
+
<div class="demo-title">
|
|
67
|
+
<span>Breadcrumbs (.breadcrumb)</span>
|
|
68
|
+
<button class="copy-btn" onclick="copyCode('section-1')">Copy code</button>
|
|
69
|
+
</div>
|
|
70
|
+
<nav class="breadcrumb" aria-label="breadcrumbs">
|
|
71
|
+
<ul>
|
|
72
|
+
<li><a href="#">Home</a></li>
|
|
73
|
+
<li><a href="#">Documentation</a></li>
|
|
74
|
+
<li class="is-active"><a href="#">Components</a></li>
|
|
75
|
+
</ul>
|
|
76
|
+
</nav>
|
|
77
|
+
<nav class="breadcrumb has-arrow-separator is-centered">
|
|
78
|
+
<ul><li><a>One</a></li><li><a>Two</a></li><li class="is-active"><a>Three</a></li></ul>
|
|
79
|
+
</nav>
|
|
80
|
+
<div class="code-container" id="code-section-1">
|
|
81
|
+
<pre><nav class="breadcrumb" aria-label="breadcrumbs">
|
|
82
|
+
<ul>
|
|
83
|
+
<li><a href="#">Home</a></li>
|
|
84
|
+
<li><a href="#">Documentation</a></li>
|
|
85
|
+
<li class="is-active"><a href="#">Components</a></li>
|
|
86
|
+
</ul>
|
|
87
|
+
</nav>
|
|
88
|
+
<nav class="breadcrumb has-arrow-separator is-centered">
|
|
89
|
+
<ul>
|
|
90
|
+
<li><a>One</a></li>
|
|
91
|
+
<li><a>Two</a></li>
|
|
92
|
+
<li class="is-active"><a>Three</a></li>
|
|
93
|
+
</ul>
|
|
94
|
+
</nav></pre>
|
|
95
|
+
</div>
|
|
96
|
+
</div>
|
|
97
|
+
|
|
98
|
+
<!-- Card -->
|
|
99
|
+
<div class="demo-section" id="section-2">
|
|
100
|
+
<div class="demo-title">
|
|
101
|
+
<span>Card (.card)</span>
|
|
102
|
+
<button class="copy-btn" onclick="copyCode('section-2')">Copy code</button>
|
|
103
|
+
</div>
|
|
104
|
+
<div class="card" style="max-width: 300px;">
|
|
105
|
+
<div class="card-header"><p class="card-header-title">Card Title</p></div>
|
|
106
|
+
<div class="card-content">Card content.</div>
|
|
107
|
+
<div class="card-footer"><a class="card-footer-item">Action</a></div>
|
|
108
|
+
</div>
|
|
109
|
+
<div class="code-container" id="code-section-2">
|
|
110
|
+
<pre><div class="card">
|
|
111
|
+
<div class="card-header">
|
|
112
|
+
<p class="card-header-title">Card Title</p>
|
|
113
|
+
</div>
|
|
114
|
+
<div class="card-content">Card content.</div>
|
|
115
|
+
<div class="card-footer">
|
|
116
|
+
<a class="card-footer-item">Action</a>
|
|
117
|
+
</div>
|
|
118
|
+
</div></pre>
|
|
119
|
+
</div>
|
|
120
|
+
</div>
|
|
121
|
+
|
|
122
|
+
<!-- Dropdown -->
|
|
123
|
+
<div class="demo-section" id="section-3">
|
|
124
|
+
<div class="demo-title">
|
|
125
|
+
<span>Dropdown (.dropdown)</span>
|
|
126
|
+
<button class="copy-btn" onclick="copyCode('section-3')">Copy code</button>
|
|
127
|
+
</div>
|
|
128
|
+
<div class="dropdown is-active">
|
|
129
|
+
<div class="dropdown-trigger"><button class="button">Dropdown</button></div>
|
|
130
|
+
<div class="dropdown-menu"><div class="dropdown-content"><a class="dropdown-item">Option 1</a><a class="dropdown-item">Option 2</a><hr class="dropdown-divider"><a class="dropdown-item">Another</a></div></div>
|
|
131
|
+
</div>
|
|
132
|
+
<div class="code-container" id="code-section-3">
|
|
133
|
+
<pre><div class="dropdown is-active">
|
|
134
|
+
<div class="dropdown-trigger">
|
|
135
|
+
<button class="button">Dropdown</button>
|
|
136
|
+
</div>
|
|
137
|
+
<div class="dropdown-menu">
|
|
138
|
+
<div class="dropdown-content">
|
|
139
|
+
<a class="dropdown-item">Option 1</a>
|
|
140
|
+
<a class="dropdown-item">Option 2</a>
|
|
141
|
+
<hr class="dropdown-divider">
|
|
142
|
+
<a class="dropdown-item">Another</a>
|
|
143
|
+
</div>
|
|
144
|
+
</div>
|
|
145
|
+
</div></pre>
|
|
146
|
+
</div>
|
|
147
|
+
</div>
|
|
148
|
+
|
|
149
|
+
<!-- Menu -->
|
|
150
|
+
<div class="demo-section mt-5" id="section-4">
|
|
151
|
+
<div class="demo-title">
|
|
152
|
+
<span>Side Menu (.menu)</span>
|
|
153
|
+
<button class="copy-btn" onclick="copyCode('section-4')">Copy code</button>
|
|
154
|
+
</div>
|
|
155
|
+
<aside class="menu" style="max-width: 200px;">
|
|
156
|
+
<p class="menu-label">General</p>
|
|
157
|
+
<ul class="menu-list"><li><a class="is-active">Dashboard</a></li><li><a>Customers</a></li></ul>
|
|
158
|
+
<p class="menu-label">Administration</p><ul class="menu-list"><li><a>Team</a></li></ul>
|
|
159
|
+
</aside>
|
|
160
|
+
<div class="code-container" id="code-section-4">
|
|
161
|
+
<pre><aside class="menu">
|
|
162
|
+
<p class="menu-label">General</p>
|
|
163
|
+
<ul class="menu-list">
|
|
164
|
+
<li><a class="is-active">Dashboard</a></li>
|
|
165
|
+
<li><a>Customers</a></li>
|
|
166
|
+
</ul>
|
|
167
|
+
<p class="menu-label">Administration</p>
|
|
168
|
+
<ul class="menu-list">
|
|
169
|
+
<li><a>Team</a></li>
|
|
170
|
+
</ul>
|
|
171
|
+
</aside></pre>
|
|
172
|
+
</div>
|
|
173
|
+
</div>
|
|
174
|
+
|
|
175
|
+
<!-- Message -->
|
|
176
|
+
<div class="demo-section" id="section-5">
|
|
177
|
+
<div class="demo-title">
|
|
178
|
+
<span>Messages (.message)</span>
|
|
179
|
+
<button class="copy-btn" onclick="copyCode('section-5')">Copy code</button>
|
|
180
|
+
</div>
|
|
181
|
+
<div class="message is-info"><div class="message-header">Info</div><div class="message-body">Message content.</div></div>
|
|
182
|
+
<div class="message is-success"><div class="message-header">Success</div><div class="message-body">Operation successful.</div></div>
|
|
183
|
+
<div class="code-container" id="code-section-5">
|
|
184
|
+
<pre><div class="message is-info">
|
|
185
|
+
<div class="message-header">Info</div>
|
|
186
|
+
<div class="message-body">Message content.</div>
|
|
187
|
+
</div>
|
|
188
|
+
<div class="message is-success">
|
|
189
|
+
<div class="message-header">Success</div>
|
|
190
|
+
<div class="message-body">Operation successful.</div>
|
|
191
|
+
</div></pre>
|
|
192
|
+
</div>
|
|
193
|
+
</div>
|
|
194
|
+
|
|
195
|
+
<!-- Modal -->
|
|
196
|
+
<div class="demo-section" id="section-6">
|
|
197
|
+
<div class="demo-title">
|
|
198
|
+
<span>Modal (.modal)</span>
|
|
199
|
+
<button class="copy-btn" onclick="copyCode('section-6')">Copy code</button>
|
|
200
|
+
</div>
|
|
201
|
+
<button class="button is-primary" onclick="document.getElementById('demoModal').classList.add('is-active')">Open modal</button>
|
|
202
|
+
<div id="demoModal" class="modal">
|
|
203
|
+
<div class="modal-background" onclick="document.getElementById('demoModal').classList.remove('is-active')"></div>
|
|
204
|
+
<div class="modal-card"><div class="modal-card-head"><p class="modal-card-title">Title</p><button class="delete" onclick="document.getElementById('demoModal').classList.remove('is-active')"></button></div>
|
|
205
|
+
<div class="modal-card-body">Modal content</div><div class="modal-card-foot"><button class="button">Cancel</button><button class="button is-primary">Accept</button></div></div>
|
|
206
|
+
</div>
|
|
207
|
+
<div class="code-container" id="code-section-6">
|
|
208
|
+
<pre><button class="button is-primary" onclick="...">Open modal</button>
|
|
209
|
+
<div class="modal">
|
|
210
|
+
<div class="modal-background"></div>
|
|
211
|
+
<div class="modal-card">
|
|
212
|
+
<div class="modal-card-head">
|
|
213
|
+
<p class="modal-card-title">Title</p>
|
|
214
|
+
<button class="delete"></button>
|
|
215
|
+
</div>
|
|
216
|
+
<div class="modal-card-body">Modal content</div>
|
|
217
|
+
<div class="modal-card-foot">
|
|
218
|
+
<button class="button">Cancel</button>
|
|
219
|
+
<button class="button is-primary">Accept</button>
|
|
220
|
+
</div>
|
|
221
|
+
</div>
|
|
222
|
+
</div></pre>
|
|
223
|
+
</div>
|
|
224
|
+
</div>
|
|
225
|
+
|
|
226
|
+
<!-- Navbar -->
|
|
227
|
+
<div class="demo-section" id="section-7">
|
|
228
|
+
<div class="demo-title">
|
|
229
|
+
<span>Navigation Bar (.navbar)</span>
|
|
230
|
+
<button class="copy-btn" onclick="copyCode('section-7')">Copy code</button>
|
|
231
|
+
</div>
|
|
232
|
+
<nav class="navbar"><div class="navbar-brand"><a class="navbar-item">BulmaTailwind</a><div class="navbar-burger">☰</div></div><div class="navbar-menu"><div class="navbar-start"><a class="navbar-item">Home</a><a class="navbar-item">Docs</a></div></div></nav>
|
|
233
|
+
<div class="code-container" id="code-section-7">
|
|
234
|
+
<pre><nav class="navbar">
|
|
235
|
+
<div class="navbar-brand">
|
|
236
|
+
<a class="navbar-item">BulmaTailwind</a>
|
|
237
|
+
<div class="navbar-burger">☰</div>
|
|
238
|
+
</div>
|
|
239
|
+
<div class="navbar-menu">
|
|
240
|
+
<div class="navbar-start">
|
|
241
|
+
<a class="navbar-item">Home</a>
|
|
242
|
+
<a class="navbar-item">Docs</a>
|
|
243
|
+
</div>
|
|
244
|
+
</div>
|
|
245
|
+
</nav></pre>
|
|
246
|
+
</div>
|
|
247
|
+
</div>
|
|
248
|
+
|
|
249
|
+
<!-- Pagination -->
|
|
250
|
+
<div class="demo-section" id="section-8">
|
|
251
|
+
<div class="demo-title">
|
|
252
|
+
<span>Pagination (.pagination)</span>
|
|
253
|
+
<button class="copy-btn" onclick="copyCode('section-8')">Copy code</button>
|
|
254
|
+
</div>
|
|
255
|
+
<nav class="pagination"><a class="pagination-previous">Previous</a><a class="pagination-next">Next</a><ul class="pagination-list"><li><a class="pagination-link is-current">1</a></li><li><a class="pagination-link">2</a></li><li><a class="pagination-ellipsis">…</a></li></ul></nav>
|
|
256
|
+
<div class="code-container" id="code-section-8">
|
|
257
|
+
<pre><nav class="pagination">
|
|
258
|
+
<a class="pagination-previous">Previous</a>
|
|
259
|
+
<a class="pagination-next">Next</a>
|
|
260
|
+
<ul class="pagination-list">
|
|
261
|
+
<li><a class="pagination-link is-current">1</a></li>
|
|
262
|
+
<li><a class="pagination-link">2</a></li>
|
|
263
|
+
<li><a class="pagination-ellipsis">…</a></li>
|
|
264
|
+
</ul>
|
|
265
|
+
</nav></pre>
|
|
266
|
+
</div>
|
|
267
|
+
</div>
|
|
268
|
+
|
|
269
|
+
<!-- Panel -->
|
|
270
|
+
<div class="demo-section" id="section-9">
|
|
271
|
+
<div class="demo-title">
|
|
272
|
+
<span>Panel (.panel)</span>
|
|
273
|
+
<button class="copy-btn" onclick="copyCode('section-9')">Copy code</button>
|
|
274
|
+
</div>
|
|
275
|
+
<div class="panel" style="max-width: 300px;"><div class="panel-heading">Repositories</div><div class="panel-block">Search...</div><a class="panel-block">bulma-tailwind</a><a class="panel-block">tailwind-css</a></div>
|
|
276
|
+
<div class="code-container" id="code-section-9">
|
|
277
|
+
<pre><div class="panel">
|
|
278
|
+
<div class="panel-heading">Repositories</div>
|
|
279
|
+
<div class="panel-block">Search...</div>
|
|
280
|
+
<a class="panel-block">bulma-tailwind</a>
|
|
281
|
+
<a class="panel-block">tailwind-css</a>
|
|
282
|
+
</div></pre>
|
|
283
|
+
</div>
|
|
284
|
+
</div>
|
|
285
|
+
|
|
286
|
+
<!-- Tabs -->
|
|
287
|
+
<div class="demo-section" id="section-10">
|
|
288
|
+
<div class="demo-title">
|
|
289
|
+
<span>Tabs (.tabs)</span>
|
|
290
|
+
<button class="copy-btn" onclick="copyCode('section-10')">Copy code</button>
|
|
291
|
+
</div>
|
|
292
|
+
<div class="tabs"><ul><li class="is-active"><a>Tab 1</a></li><li><a>Tab 2</a></li><li><a>Tab 3</a></li></ul></div>
|
|
293
|
+
<div class="tabs is-toggle"><ul><li class="is-active"><a>Active</a></li><li><a>Inactive</a></li></ul></div>
|
|
294
|
+
<div class="code-container" id="code-section-10">
|
|
295
|
+
<pre><div class="tabs">
|
|
296
|
+
<ul>
|
|
297
|
+
<li class="is-active"><a>Tab 1</a></li>
|
|
298
|
+
<li><a>Tab 2</a></li>
|
|
299
|
+
<li><a>Tab 3</a></li>
|
|
300
|
+
</ul>
|
|
301
|
+
</div>
|
|
302
|
+
<div class="tabs is-toggle">
|
|
303
|
+
<ul>
|
|
304
|
+
<li class="is-active"><a>Active</a></li>
|
|
305
|
+
<li><a>Inactive</a></li>
|
|
306
|
+
</ul>
|
|
307
|
+
</div></pre>
|
|
308
|
+
</div>
|
|
309
|
+
</div>
|
|
310
|
+
</div>
|
|
311
|
+
|
|
312
|
+
<script>
|
|
313
|
+
function copyCode(sectionId) {
|
|
314
|
+
const codeElement = document.getElementById('code-' + sectionId);
|
|
315
|
+
const button = event.target;
|
|
316
|
+
const originalText = button.textContent;
|
|
317
|
+
|
|
318
|
+
// Toggle code visibility
|
|
319
|
+
if (codeElement.style.display === 'none' || codeElement.style.display === '') {
|
|
320
|
+
codeElement.style.display = 'block';
|
|
321
|
+
}
|
|
322
|
+
|
|
323
|
+
// Copy to clipboard
|
|
324
|
+
const textToCopy = codeElement.querySelector('pre').textContent;
|
|
325
|
+
navigator.clipboard.writeText(textToCopy).then(() => {
|
|
326
|
+
button.textContent = 'Copied!';
|
|
327
|
+
button.classList.add('copied');
|
|
328
|
+
setTimeout(() => {
|
|
329
|
+
button.textContent = originalText;
|
|
330
|
+
button.classList.remove('copied');
|
|
331
|
+
}, 2000);
|
|
332
|
+
});
|
|
333
|
+
}
|
|
334
|
+
|
|
335
|
+
// Close modal when clicking outside
|
|
336
|
+
document.querySelectorAll('.modal-background').forEach(bg => {
|
|
337
|
+
bg.addEventListener('click', function(e) { this.parentElement.classList.remove('is-active'); });
|
|
338
|
+
});
|
|
339
|
+
</script>
|
|
340
|
+
</body>
|
|
341
|
+
</html>
|