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,605 @@
|
|
|
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>Elements - 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
|
+
position: relative;
|
|
17
|
+
}
|
|
18
|
+
.demo-title {
|
|
19
|
+
font-size: 1.5rem;
|
|
20
|
+
font-weight: bold;
|
|
21
|
+
margin-bottom: 1rem;
|
|
22
|
+
border-left: 4px solid #00d1b2;
|
|
23
|
+
padding-left: 1rem;
|
|
24
|
+
display: flex;
|
|
25
|
+
justify-content: space-between;
|
|
26
|
+
align-items: center;
|
|
27
|
+
}
|
|
28
|
+
.demo-row { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; margin-bottom: 1rem; }
|
|
29
|
+
hr { margin: 1rem 0; }
|
|
30
|
+
.copy-btn {
|
|
31
|
+
padding: 0.5rem 1rem;
|
|
32
|
+
background: #00d1b2;
|
|
33
|
+
color: white;
|
|
34
|
+
border: none;
|
|
35
|
+
border-radius: 6px;
|
|
36
|
+
cursor: pointer;
|
|
37
|
+
font-size: 0.875rem;
|
|
38
|
+
transition: background 0.2s;
|
|
39
|
+
}
|
|
40
|
+
.copy-btn:hover {
|
|
41
|
+
background: #00b89c;
|
|
42
|
+
}
|
|
43
|
+
.copy-btn.copied {
|
|
44
|
+
background: #48c78e;
|
|
45
|
+
}
|
|
46
|
+
.code-container {
|
|
47
|
+
display: none;
|
|
48
|
+
background: #f5f5f5;
|
|
49
|
+
padding: 1rem;
|
|
50
|
+
border-radius: 6px;
|
|
51
|
+
margin-top: 1rem;
|
|
52
|
+
overflow-x: auto;
|
|
53
|
+
}
|
|
54
|
+
.code-container pre {
|
|
55
|
+
margin: 0;
|
|
56
|
+
font-family: 'Courier New', monospace;
|
|
57
|
+
font-size: 0.875rem;
|
|
58
|
+
}
|
|
59
|
+
</style>
|
|
60
|
+
</head>
|
|
61
|
+
<body>
|
|
62
|
+
<div style="max-width: 1200px; margin: 0 auto;">
|
|
63
|
+
<a href="index.html" class="button is-link is-small" style="margin-bottom: 1rem;">← Back to home</a>
|
|
64
|
+
<h1 class="title is-1">Elements</h1>
|
|
65
|
+
|
|
66
|
+
<!-- Buttons: basic colors -->
|
|
67
|
+
<div class="demo-section" id="section-1">
|
|
68
|
+
<div class="demo-title">
|
|
69
|
+
<span>Buttons - Colors (.button, .is-primary, etc.)</span>
|
|
70
|
+
<button class="copy-btn" onclick="copyCode('section-1')">Copy code</button>
|
|
71
|
+
</div>
|
|
72
|
+
<div class="demo-row">
|
|
73
|
+
<button class="button">Normal</button>
|
|
74
|
+
<button class="button is-primary">Primary</button>
|
|
75
|
+
<button class="button is-link">Link</button>
|
|
76
|
+
<button class="button is-info">Info</button>
|
|
77
|
+
<button class="button is-success">Success</button>
|
|
78
|
+
<button class="button is-warning">Warning</button>
|
|
79
|
+
<button class="button is-danger">Danger</button>
|
|
80
|
+
<button class="button is-light">Light</button>
|
|
81
|
+
<button class="button is-dark">Dark</button>
|
|
82
|
+
<button class="button is-white">White</button>
|
|
83
|
+
<button class="button is-black">Black</button>
|
|
84
|
+
</div>
|
|
85
|
+
<div class="code-container" id="code-section-1">
|
|
86
|
+
<pre><button class="button">Normal</button>
|
|
87
|
+
<button class="button is-primary">Primary</button>
|
|
88
|
+
<button class="button is-link">Link</button>
|
|
89
|
+
<button class="button is-info">Info</button>
|
|
90
|
+
<button class="button is-success">Success</button>
|
|
91
|
+
<button class="button is-warning">Warning</button>
|
|
92
|
+
<button class="button is-danger">Danger</button>
|
|
93
|
+
<button class="button is-light">Light</button>
|
|
94
|
+
<button class="button is-dark">Dark</button>
|
|
95
|
+
<button class="button is-white">White</button>
|
|
96
|
+
<button class="button is-black">Black</button></pre>
|
|
97
|
+
</div>
|
|
98
|
+
</div>
|
|
99
|
+
|
|
100
|
+
<!-- Buttons: sizes -->
|
|
101
|
+
<div class="demo-section" id="section-2">
|
|
102
|
+
<div class="demo-title">
|
|
103
|
+
<span>Sizes (.is-small, .is-medium, .is-large)</span>
|
|
104
|
+
<button class="copy-btn" onclick="copyCode('section-2')">Copy code</button>
|
|
105
|
+
</div>
|
|
106
|
+
<div class="demo-row">
|
|
107
|
+
<button class="button is-small is-primary">Small</button>
|
|
108
|
+
<button class="button is-primary">Normal</button>
|
|
109
|
+
<button class="button is-medium is-primary">Medium</button>
|
|
110
|
+
<button class="button is-large is-primary">Large</button>
|
|
111
|
+
</div>
|
|
112
|
+
<div class="code-container" id="code-section-2">
|
|
113
|
+
<pre><button class="button is-small is-primary">Small</button>
|
|
114
|
+
<button class="button is-primary">Normal</button>
|
|
115
|
+
<button class="button is-medium is-primary">Medium</button>
|
|
116
|
+
<button class="button is-large is-primary">Large</button></pre>
|
|
117
|
+
</div>
|
|
118
|
+
</div>
|
|
119
|
+
|
|
120
|
+
<!-- Buttons: outlined -->
|
|
121
|
+
<div class="demo-section" id="section-3">
|
|
122
|
+
<div class="demo-title">
|
|
123
|
+
<span>Outlined (.is-outlined)</span>
|
|
124
|
+
<button class="copy-btn" onclick="copyCode('section-3')">Copy code</button>
|
|
125
|
+
</div>
|
|
126
|
+
<div class="demo-row">
|
|
127
|
+
<button class="button is-outlined">Outlined</button>
|
|
128
|
+
<button class="button is-outlined is-primary">Primary outlined</button>
|
|
129
|
+
<button class="button is-outlined is-danger">Danger outlined</button>
|
|
130
|
+
<button class="button is-outlined is-dark">Dark outlined</button>
|
|
131
|
+
</div>
|
|
132
|
+
<div class="code-container" id="code-section-3">
|
|
133
|
+
<pre><button class="button is-outlined">Outlined</button>
|
|
134
|
+
<button class="button is-outlined is-primary">Primary outlined</button>
|
|
135
|
+
<button class="button is-outlined is-danger">Danger outlined</button>
|
|
136
|
+
<button class="button is-outlined is-dark">Dark outlined</button></pre>
|
|
137
|
+
</div>
|
|
138
|
+
</div>
|
|
139
|
+
|
|
140
|
+
<!-- Buttons: inverted -->
|
|
141
|
+
<div class="demo-section" id="section-4">
|
|
142
|
+
<div class="demo-title">
|
|
143
|
+
<span>Inverted (.is-inverted)</span>
|
|
144
|
+
<button class="copy-btn" onclick="copyCode('section-4')">Copy code</button>
|
|
145
|
+
</div>
|
|
146
|
+
<div class="demo-row" style="background-color: #363636; padding: 1rem; border-radius: 8px;">
|
|
147
|
+
<button class="button is-inverted is-primary">Primary inverted</button>
|
|
148
|
+
<button class="button is-inverted is-link">Link inverted</button>
|
|
149
|
+
<button class="button is-inverted is-info">Info inverted</button>
|
|
150
|
+
<button class="button is-inverted is-danger">Danger inverted</button>
|
|
151
|
+
<button class="button is-inverted is-light">Light inverted</button>
|
|
152
|
+
</div>
|
|
153
|
+
<div class="code-container" id="code-section-4">
|
|
154
|
+
<pre><button class="button is-inverted is-primary">Primary inverted</button>
|
|
155
|
+
<button class="button is-inverted is-link">Link inverted</button>
|
|
156
|
+
<button class="button is-inverted is-info">Info inverted</button>
|
|
157
|
+
<button class="button is-inverted is-danger">Danger inverted</button>
|
|
158
|
+
<button class="button is-inverted is-light">Light inverted</button></pre>
|
|
159
|
+
</div>
|
|
160
|
+
</div>
|
|
161
|
+
|
|
162
|
+
<!-- Buttons: rounded -->
|
|
163
|
+
<div class="demo-section" id="section-5">
|
|
164
|
+
<div class="demo-title">
|
|
165
|
+
<span>Rounded (.is-rounded)</span>
|
|
166
|
+
<button class="copy-btn" onclick="copyCode('section-5')">Copy code</button>
|
|
167
|
+
</div>
|
|
168
|
+
<div class="demo-row">
|
|
169
|
+
<button class="button is-rounded">Rounded</button>
|
|
170
|
+
<button class="button is-rounded is-primary">Primary rounded</button>
|
|
171
|
+
<button class="button is-rounded is-success">Success rounded</button>
|
|
172
|
+
<button class="button is-rounded is-danger is-large">Large rounded danger</button>
|
|
173
|
+
</div>
|
|
174
|
+
<div class="code-container" id="code-section-5">
|
|
175
|
+
<pre><button class="button is-rounded">Rounded</button>
|
|
176
|
+
<button class="button is-rounded is-primary">Primary rounded</button>
|
|
177
|
+
<button class="button is-rounded is-success">Success rounded</button>
|
|
178
|
+
<button class="button is-rounded is-danger is-large">Large rounded danger</button></pre>
|
|
179
|
+
</div>
|
|
180
|
+
</div>
|
|
181
|
+
|
|
182
|
+
<!-- Buttons: fullwidth -->
|
|
183
|
+
<div class="demo-section" id="section-6">
|
|
184
|
+
<div class="demo-title">
|
|
185
|
+
<span>Full Width (.is-fullwidth)</span>
|
|
186
|
+
<button class="copy-btn" onclick="copyCode('section-6')">Copy code</button>
|
|
187
|
+
</div>
|
|
188
|
+
<div class="demo-row" style="flex-direction: column;">
|
|
189
|
+
<button class="button is-primary is-fullwidth">Fullwidth button</button>
|
|
190
|
+
<button class="button is-outlined is-fullwidth">Fullwidth outlined</button>
|
|
191
|
+
</div>
|
|
192
|
+
<div class="code-container" id="code-section-6">
|
|
193
|
+
<pre><button class="button is-primary is-fullwidth">Fullwidth button</button>
|
|
194
|
+
<button class="button is-outlined is-fullwidth">Fullwidth outlined</button></pre>
|
|
195
|
+
</div>
|
|
196
|
+
</div>
|
|
197
|
+
|
|
198
|
+
<!-- Buttons: loading -->
|
|
199
|
+
<div class="demo-section" id="section-7">
|
|
200
|
+
<div class="demo-title">
|
|
201
|
+
<span>Loading State (.is-loading)</span>
|
|
202
|
+
<button class="copy-btn" onclick="copyCode('section-7')">Copy code</button>
|
|
203
|
+
</div>
|
|
204
|
+
<div class="demo-row">
|
|
205
|
+
<button class="button is-loading">Loading</button>
|
|
206
|
+
<button class="button is-primary is-loading">Primary loading</button>
|
|
207
|
+
<button class="button is-success is-loading is-medium">Medium loading</button>
|
|
208
|
+
</div>
|
|
209
|
+
<div class="code-container" id="code-section-7">
|
|
210
|
+
<pre><button class="button is-loading">Loading</button>
|
|
211
|
+
<button class="button is-primary is-loading">Primary loading</button>
|
|
212
|
+
<button class="button is-success is-loading is-medium">Medium loading</button></pre>
|
|
213
|
+
</div>
|
|
214
|
+
</div>
|
|
215
|
+
|
|
216
|
+
<!-- Buttons: disabled -->
|
|
217
|
+
<div class="demo-section" id="section-8">
|
|
218
|
+
<div class="demo-title">
|
|
219
|
+
<span>Disabled (disabled or .is-disabled)</span>
|
|
220
|
+
<button class="copy-btn" onclick="copyCode('section-8')">Copy code</button>
|
|
221
|
+
</div>
|
|
222
|
+
<div class="demo-row">
|
|
223
|
+
<button class="button" disabled>Disabled</button>
|
|
224
|
+
<button class="button is-primary is-disabled">Disabled primary</button>
|
|
225
|
+
<button class="button is-outlined is-danger" disabled>Disabled outlined</button>
|
|
226
|
+
</div>
|
|
227
|
+
<div class="code-container" id="code-section-8">
|
|
228
|
+
<pre><button class="button" disabled>Disabled</button>
|
|
229
|
+
<button class="button is-primary is-disabled">Disabled primary</button>
|
|
230
|
+
<button class="button is-outlined is-danger" disabled>Disabled outlined</button></pre>
|
|
231
|
+
</div>
|
|
232
|
+
</div>
|
|
233
|
+
|
|
234
|
+
<!-- Buttons: text -->
|
|
235
|
+
<div class="demo-section" id="section-9">
|
|
236
|
+
<div class="demo-title">
|
|
237
|
+
<span>Text Button (.is-text)</span>
|
|
238
|
+
<button class="copy-btn" onclick="copyCode('section-9')">Copy code</button>
|
|
239
|
+
</div>
|
|
240
|
+
<div class="demo-row">
|
|
241
|
+
<button class="button is-text">Text button</button>
|
|
242
|
+
<button class="button is-text is-primary">Primary text</button>
|
|
243
|
+
<button class="button is-text is-danger">Danger text</button>
|
|
244
|
+
</div>
|
|
245
|
+
<div class="code-container" id="code-section-9">
|
|
246
|
+
<pre><button class="button is-text">Text button</button>
|
|
247
|
+
<button class="button is-text is-primary">Primary text</button>
|
|
248
|
+
<button class="button is-text is-danger">Danger text</button></pre>
|
|
249
|
+
</div>
|
|
250
|
+
</div>
|
|
251
|
+
|
|
252
|
+
<!-- Box -->
|
|
253
|
+
<div class="demo-section" id="section-10">
|
|
254
|
+
<div class="demo-title">
|
|
255
|
+
<span>Box (.box)</span>
|
|
256
|
+
<button class="copy-btn" onclick="copyCode('section-10')">Copy code</button>
|
|
257
|
+
</div>
|
|
258
|
+
<div class="box">This is content inside a box with shadow and borders.</div>
|
|
259
|
+
<div class="code-container" id="code-section-10">
|
|
260
|
+
<pre><div class="box">This is content inside a box with shadow and borders.</div></pre>
|
|
261
|
+
</div>
|
|
262
|
+
</div>
|
|
263
|
+
|
|
264
|
+
<!-- Content -->
|
|
265
|
+
<div class="demo-section" id="section-11">
|
|
266
|
+
<div class="demo-title">
|
|
267
|
+
<span>Content (.content)</span>
|
|
268
|
+
<button class="copy-btn" onclick="copyCode('section-11')">Copy code</button>
|
|
269
|
+
</div>
|
|
270
|
+
<div class="content">
|
|
271
|
+
<h1>Heading h1</h1>
|
|
272
|
+
<p>Example paragraph. <strong>Bold text</strong> and <em>italic</em>.</p>
|
|
273
|
+
<ul><li>List item 1</li><li>List item 2</li></ul>
|
|
274
|
+
<blockquote>This is a blockquote.</blockquote>
|
|
275
|
+
</div>
|
|
276
|
+
<div class="content is-small">Small content</div>
|
|
277
|
+
<div class="content is-large">Large content</div>
|
|
278
|
+
<div class="code-container" id="code-section-11">
|
|
279
|
+
<pre><div class="content">
|
|
280
|
+
<h1>Heading h1</h1>
|
|
281
|
+
<p>Example paragraph. <strong>Bold text</strong> and <em>italic</em>.</p>
|
|
282
|
+
<ul><li>List item 1</li><li>List item 2</li></ul>
|
|
283
|
+
<blockquote>This is a blockquote.</blockquote>
|
|
284
|
+
</div>
|
|
285
|
+
<div class="content is-small">Small content</div>
|
|
286
|
+
<div class="content is-large">Large content</div></pre>
|
|
287
|
+
</div>
|
|
288
|
+
</div>
|
|
289
|
+
|
|
290
|
+
<!-- Delete -->
|
|
291
|
+
<div class="demo-section" id="section-12">
|
|
292
|
+
<div class="demo-title">
|
|
293
|
+
<span>Delete Button (.delete)</span>
|
|
294
|
+
<button class="copy-btn" onclick="copyCode('section-12')">Copy code</button>
|
|
295
|
+
</div>
|
|
296
|
+
<div class="demo-row">
|
|
297
|
+
<div class="delete"></div>
|
|
298
|
+
<div class="delete is-small"></div>
|
|
299
|
+
<div class="delete is-medium"></div>
|
|
300
|
+
<div class="delete is-large"></div>
|
|
301
|
+
</div>
|
|
302
|
+
<div class="code-container" id="code-section-12">
|
|
303
|
+
<pre><div class="delete"></div>
|
|
304
|
+
<div class="delete is-small"></div>
|
|
305
|
+
<div class="delete is-medium"></div>
|
|
306
|
+
<div class="delete is-large"></div></pre>
|
|
307
|
+
</div>
|
|
308
|
+
</div>
|
|
309
|
+
|
|
310
|
+
<!-- Icon -->
|
|
311
|
+
<div class="demo-section" id="section-13">
|
|
312
|
+
<div class="demo-title">
|
|
313
|
+
<span>Icons (.icon)</span>
|
|
314
|
+
<button class="copy-btn" onclick="copyCode('section-13')">Copy code</button>
|
|
315
|
+
</div>
|
|
316
|
+
<div class="demo-row">
|
|
317
|
+
<span class="icon"><svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg></span>
|
|
318
|
+
<span class="icon is-small">🔍</span>
|
|
319
|
+
<span class="icon is-medium">⭐</span>
|
|
320
|
+
<span class="icon is-large">❤️</span>
|
|
321
|
+
</div>
|
|
322
|
+
<div class="code-container" id="code-section-13">
|
|
323
|
+
<pre><span class="icon"><svg ...>...</svg></span>
|
|
324
|
+
<span class="icon is-small">🔍</span>
|
|
325
|
+
<span class="icon is-medium">⭐</span>
|
|
326
|
+
<span class="icon is-large">❤️</span></pre>
|
|
327
|
+
</div>
|
|
328
|
+
</div>
|
|
329
|
+
|
|
330
|
+
<!-- Image -->
|
|
331
|
+
<div class="demo-section" id="section-14">
|
|
332
|
+
<div class="demo-title">
|
|
333
|
+
<span>Images (.image)</span>
|
|
334
|
+
<button class="copy-btn" onclick="copyCode('section-14')">Copy code</button>
|
|
335
|
+
</div>
|
|
336
|
+
<div class="demo-row">
|
|
337
|
+
<figure class="image is-64x64"><img src="https://placehold.co/64x64" alt="64x64"></figure>
|
|
338
|
+
<figure class="image is-128x128"><img src="https://placehold.co/128x128" alt="128x128"></figure>
|
|
339
|
+
</div>
|
|
340
|
+
<div class="code-container" id="code-section-14">
|
|
341
|
+
<pre><figure class="image is-64x64">
|
|
342
|
+
<img src="..." alt="64x64">
|
|
343
|
+
</figure>
|
|
344
|
+
<figure class="image is-128x128">
|
|
345
|
+
<img src="..." alt="128x128">
|
|
346
|
+
</figure></pre>
|
|
347
|
+
</div>
|
|
348
|
+
</div>
|
|
349
|
+
|
|
350
|
+
<!-- Notification -->
|
|
351
|
+
<div class="demo-section" id="section-15">
|
|
352
|
+
<div class="demo-title">
|
|
353
|
+
<span>Notifications (.notification)</span>
|
|
354
|
+
<button class="copy-btn" onclick="copyCode('section-15')">Copy code</button>
|
|
355
|
+
</div>
|
|
356
|
+
<div class="notification">Default notification</div>
|
|
357
|
+
<div class="notification is-primary">Primary notification</div>
|
|
358
|
+
<div class="notification is-info">Info notification</div>
|
|
359
|
+
<div class="notification is-success">Success notification</div>
|
|
360
|
+
<div class="notification is-warning">Warning notification</div>
|
|
361
|
+
<div class="notification is-danger">Danger notification</div>
|
|
362
|
+
<div class="code-container" id="code-section-15">
|
|
363
|
+
<pre><div class="notification">Default notification</div>
|
|
364
|
+
<div class="notification is-primary">Primary notification</div>
|
|
365
|
+
<div class="notification is-info">Info notification</div>
|
|
366
|
+
<div class="notification is-success">Success notification</div>
|
|
367
|
+
<div class="notification is-warning">Warning notification</div>
|
|
368
|
+
<div class="notification is-danger">Danger notification</div></pre>
|
|
369
|
+
</div>
|
|
370
|
+
</div>
|
|
371
|
+
|
|
372
|
+
<!-- Progress -->
|
|
373
|
+
<div class="demo-section" id="section-16">
|
|
374
|
+
<div class="demo-title">
|
|
375
|
+
<span>Progress Bars (progress) - Colors</span>
|
|
376
|
+
<button class="copy-btn" onclick="copyCode('section-16')">Copy code</button>
|
|
377
|
+
</div>
|
|
378
|
+
<div class="demo-row" style="flex-direction: column; gap: 1rem;">
|
|
379
|
+
<progress class="progress is-primary" value="45" max="100">45%</progress>
|
|
380
|
+
<progress class="progress is-link" value="55" max="100">55%</progress>
|
|
381
|
+
<progress class="progress is-info" value="65" max="100">65%</progress>
|
|
382
|
+
<progress class="progress is-success" value="75" max="100">75%</progress>
|
|
383
|
+
<progress class="progress is-warning" value="85" max="100">85%</progress>
|
|
384
|
+
<progress class="progress is-danger" value="95" max="100">95%</progress>
|
|
385
|
+
<progress class="progress is-dark" value="30" max="100">30%</progress>
|
|
386
|
+
</div>
|
|
387
|
+
<div class="demo-title" style="margin-top: 1rem;">Sizes</div>
|
|
388
|
+
<div class="demo-row" style="flex-direction: column; gap: 1rem;">
|
|
389
|
+
<progress class="progress is-small is-primary" value="30" max="100">30%</progress>
|
|
390
|
+
<progress class="progress is-primary" value="50" max="100">50%</progress>
|
|
391
|
+
<progress class="progress is-medium is-primary" value="70" max="100">70%</progress>
|
|
392
|
+
<progress class="progress is-large is-primary" value="90" max="100">90%</progress>
|
|
393
|
+
</div>
|
|
394
|
+
<div class="code-container" id="code-section-16">
|
|
395
|
+
<pre><progress class="progress is-primary" value="45" max="100">45%</progress>
|
|
396
|
+
<progress class="progress is-link" value="55" max="100">55%</progress>
|
|
397
|
+
<progress class="progress is-info" value="65" max="100">65%</progress>
|
|
398
|
+
<progress class="progress is-success" value="75" max="100">75%</progress>
|
|
399
|
+
<progress class="progress is-warning" value="85" max="100">85%</progress>
|
|
400
|
+
<progress class="progress is-danger" value="95" max="100">95%</progress></pre>
|
|
401
|
+
</div>
|
|
402
|
+
</div>
|
|
403
|
+
|
|
404
|
+
<!-- Tags -->
|
|
405
|
+
<div class="demo-section" id="section-17">
|
|
406
|
+
<div class="demo-title">
|
|
407
|
+
<span>Tags (.tag) - Solid Colors</span>
|
|
408
|
+
<button class="copy-btn" onclick="copyCode('section-17')">Copy code</button>
|
|
409
|
+
</div>
|
|
410
|
+
<div class="demo-row">
|
|
411
|
+
<span class="tag is-primary">Primary</span>
|
|
412
|
+
<span class="tag is-link">Link</span>
|
|
413
|
+
<span class="tag is-info">Info</span>
|
|
414
|
+
<span class="tag is-success">Success</span>
|
|
415
|
+
<span class="tag is-warning">Warning</span>
|
|
416
|
+
<span class="tag is-danger">Danger</span>
|
|
417
|
+
<span class="tag is-light">Light</span>
|
|
418
|
+
<span class="tag is-dark">Dark</span>
|
|
419
|
+
<span class="tag is-white">White</span>
|
|
420
|
+
<span class="tag is-black">Black</span>
|
|
421
|
+
</div>
|
|
422
|
+
<div class="demo-title" style="margin-top: 1rem;">Light Variants (.is-light)</div>
|
|
423
|
+
<div class="demo-row">
|
|
424
|
+
<span class="tag is-primary is-light">Primary light</span>
|
|
425
|
+
<span class="tag is-link is-light">Link light</span>
|
|
426
|
+
<span class="tag is-info is-light">Info light</span>
|
|
427
|
+
<span class="tag is-success is-light">Success light</span>
|
|
428
|
+
<span class="tag is-warning is-light">Warning light</span>
|
|
429
|
+
<span class="tag is-danger is-light">Danger light</span>
|
|
430
|
+
<span class="tag is-dark is-light">Dark light</span>
|
|
431
|
+
</div>
|
|
432
|
+
<div class="demo-title" style="margin-top: 1rem;">Sizes</div>
|
|
433
|
+
<div class="demo-row">
|
|
434
|
+
<span class="tag is-primary is-small">Small</span>
|
|
435
|
+
<span class="tag is-primary">Normal</span>
|
|
436
|
+
<span class="tag is-primary is-medium">Medium</span>
|
|
437
|
+
<span class="tag is-primary is-large">Large</span>
|
|
438
|
+
</div>
|
|
439
|
+
<div class="demo-title" style="margin-top: 1rem;">With Delete Button</div>
|
|
440
|
+
<div class="demo-row">
|
|
441
|
+
<span class="tag is-info">Tag <button class="delete is-small"></button></span>
|
|
442
|
+
<span class="tag is-danger is-medium">Delete <button class="delete is-small"></button></span>
|
|
443
|
+
</div>
|
|
444
|
+
<div class="demo-title" style="margin-top: 1rem;">Tag Groups (.tags)</div>
|
|
445
|
+
<div class="tags">
|
|
446
|
+
<span class="tag">One</span>
|
|
447
|
+
<span class="tag is-primary">Two</span>
|
|
448
|
+
<span class="tag is-danger">Three</span>
|
|
449
|
+
</div>
|
|
450
|
+
<div class="tags has-addons" style="margin-top: 0.5rem;">
|
|
451
|
+
<span class="tag is-info">Info</span>
|
|
452
|
+
<span class="tag is-dark">23</span>
|
|
453
|
+
</div>
|
|
454
|
+
<div class="code-container" id="code-section-17">
|
|
455
|
+
<pre><span class="tag is-primary">Primary</span>
|
|
456
|
+
<span class="tag is-primary is-light">Primary light</span>
|
|
457
|
+
<span class="tag is-primary is-small">Small</span>
|
|
458
|
+
<span class="tag is-info">Tag <button class="delete is-small"></button></span>
|
|
459
|
+
<div class="tags">
|
|
460
|
+
<span class="tag">One</span>
|
|
461
|
+
<span class="tag is-primary">Two</span>
|
|
462
|
+
</div></pre>
|
|
463
|
+
</div>
|
|
464
|
+
</div>
|
|
465
|
+
|
|
466
|
+
<!-- Table -->
|
|
467
|
+
<div class="demo-section" id="section-18">
|
|
468
|
+
<div class="demo-title">
|
|
469
|
+
<span>Tables (.table)</span>
|
|
470
|
+
<button class="copy-btn" onclick="copyCode('section-18')">Copy code</button>
|
|
471
|
+
</div>
|
|
472
|
+
<p>Basic table with borders, stripes and hover</p>
|
|
473
|
+
<div class="table-container">
|
|
474
|
+
<table class="table is-striped is-hoverable is-bordered is-fullwidth">
|
|
475
|
+
<thead>
|
|
476
|
+
<tr>
|
|
477
|
+
<th>Name</th>
|
|
478
|
+
<th>Age</th>
|
|
479
|
+
<th>City</th>
|
|
480
|
+
</tr>
|
|
481
|
+
</thead>
|
|
482
|
+
<tbody>
|
|
483
|
+
<tr>
|
|
484
|
+
<td>Ana</td>
|
|
485
|
+
<td>25</td>
|
|
486
|
+
<td>Madrid</td>
|
|
487
|
+
</tr>
|
|
488
|
+
<tr class="is-primary">
|
|
489
|
+
<td>Primary row (is-primary)</td>
|
|
490
|
+
<td>30</td>
|
|
491
|
+
<td>Barcelona</td>
|
|
492
|
+
</tr>
|
|
493
|
+
<tr class="is-info">
|
|
494
|
+
<td>Info row</td>
|
|
495
|
+
<td>28</td>
|
|
496
|
+
<td>Sevilla</td>
|
|
497
|
+
</tr>
|
|
498
|
+
<tr class="is-success">
|
|
499
|
+
<td>Success row</td>
|
|
500
|
+
<td>35</td>
|
|
501
|
+
<td>Bilbao</td>
|
|
502
|
+
</tr>
|
|
503
|
+
<tr class="is-warning">
|
|
504
|
+
<td>Warning row</td>
|
|
505
|
+
<td>40</td>
|
|
506
|
+
<td>Zaragoza</td>
|
|
507
|
+
</tr>
|
|
508
|
+
<tr class="is-danger">
|
|
509
|
+
<td>Danger row</td>
|
|
510
|
+
<td>19</td>
|
|
511
|
+
<td>Málaga</td>
|
|
512
|
+
</tr>
|
|
513
|
+
</tbody>
|
|
514
|
+
</table>
|
|
515
|
+
</div>
|
|
516
|
+
<p class="help" style="margin-top: 0.5rem;">The table has <code>.table-container</code> for horizontal scroll on mobile, and modifiers <code>.is-striped</code>, <code>.is-hoverable</code>, <code>.is-bordered</code>, <code>.is-fullwidth</code>.</p>
|
|
517
|
+
<div class="code-container" id="code-section-18">
|
|
518
|
+
<pre><div class="table-container">
|
|
519
|
+
<table class="table is-striped is-hoverable is-bordered is-fullwidth">
|
|
520
|
+
<thead>
|
|
521
|
+
<tr>
|
|
522
|
+
<th>Name</th>
|
|
523
|
+
<th>Age</th>
|
|
524
|
+
<th>City</th>
|
|
525
|
+
</tr>
|
|
526
|
+
</thead>
|
|
527
|
+
<tbody>
|
|
528
|
+
<tr>
|
|
529
|
+
<td>Ana</td>
|
|
530
|
+
<td>25</td>
|
|
531
|
+
<td>Madrid</td>
|
|
532
|
+
</tr>
|
|
533
|
+
<tr class="is-primary">
|
|
534
|
+
<td>Primary row</td>
|
|
535
|
+
<td>30</td>
|
|
536
|
+
<td>Barcelona</td>
|
|
537
|
+
</tr>
|
|
538
|
+
</tbody>
|
|
539
|
+
</table>
|
|
540
|
+
</div></pre>
|
|
541
|
+
</div>
|
|
542
|
+
</div>
|
|
543
|
+
|
|
544
|
+
<!-- Title -->
|
|
545
|
+
<div class="demo-section" id="section-19">
|
|
546
|
+
<div class="demo-title">
|
|
547
|
+
<span>Titles (.title, .subtitle)</span>
|
|
548
|
+
<button class="copy-btn" onclick="copyCode('section-19')">Copy code</button>
|
|
549
|
+
</div>
|
|
550
|
+
<h1 class="title is-1">Title 1</h1>
|
|
551
|
+
<h2 class="title is-2">Title 2</h2>
|
|
552
|
+
<h3 class="title is-3">Title 3</h3>
|
|
553
|
+
<h4 class="title is-4">Title 4</h4>
|
|
554
|
+
<h5 class="title is-5">Title 5</h5>
|
|
555
|
+
<h6 class="title is-6">Title 6</h6>
|
|
556
|
+
|
|
557
|
+
<h1 class="subtitle is-1">Subtitle 1</h1>
|
|
558
|
+
<h2 class="subtitle is-2">Subtitle 2</h2>
|
|
559
|
+
<h3 class="subtitle is-3">Subtitle 3</h3>
|
|
560
|
+
<h4 class="subtitle is-4">Subtitle 4</h4>
|
|
561
|
+
<h5 class="subtitle is-5">Subtitle 5</h5>
|
|
562
|
+
<h6 class="subtitle is-6">Subtitle 6</h6>
|
|
563
|
+
<div class="code-container" id="code-section-19">
|
|
564
|
+
<pre><h1 class="title is-1">Title 1</h1>
|
|
565
|
+
<h2 class="title is-2">Title 2</h2>
|
|
566
|
+
<h3 class="title is-3">Title 3</h3>
|
|
567
|
+
<h4 class="title is-4">Title 4</h4>
|
|
568
|
+
<h5 class="title is-5">Title 5</h5>
|
|
569
|
+
<h6 class="title is-6">Title 6</h6>
|
|
570
|
+
|
|
571
|
+
<h1 class="subtitle is-1">Subtitle 1</h1>
|
|
572
|
+
<h2 class="subtitle is-2">Subtitle 2</h2>
|
|
573
|
+
<h3 class="subtitle is-3">Subtitle 3</h3>
|
|
574
|
+
<h4 class="subtitle is-4">Subtitle 4</h4>
|
|
575
|
+
<h5 class="subtitle is-5">Subtitle 5</h5>
|
|
576
|
+
<h6 class="subtitle is-6">Subtitle 6</h6></pre>
|
|
577
|
+
</div>
|
|
578
|
+
</div>
|
|
579
|
+
</div>
|
|
580
|
+
|
|
581
|
+
<script>
|
|
582
|
+
function copyCode(sectionId) {
|
|
583
|
+
const codeElement = document.getElementById('code-' + sectionId);
|
|
584
|
+
const button = event.target;
|
|
585
|
+
const originalText = button.textContent;
|
|
586
|
+
|
|
587
|
+
// Toggle code visibility
|
|
588
|
+
if (codeElement.style.display === 'none' || codeElement.style.display === '') {
|
|
589
|
+
codeElement.style.display = 'block';
|
|
590
|
+
}
|
|
591
|
+
|
|
592
|
+
// Copy to clipboard
|
|
593
|
+
const textToCopy = codeElement.querySelector('pre').textContent;
|
|
594
|
+
navigator.clipboard.writeText(textToCopy).then(() => {
|
|
595
|
+
button.textContent = 'Copied!';
|
|
596
|
+
button.classList.add('copied');
|
|
597
|
+
setTimeout(() => {
|
|
598
|
+
button.textContent = originalText;
|
|
599
|
+
button.classList.remove('copied');
|
|
600
|
+
}, 2000);
|
|
601
|
+
});
|
|
602
|
+
}
|
|
603
|
+
</script>
|
|
604
|
+
</body>
|
|
605
|
+
</html>
|