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,164 @@
|
|
|
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>Media & Footer - 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 #f14668;
|
|
22
|
+
padding-left: 1rem;
|
|
23
|
+
display: flex;
|
|
24
|
+
justify-content: space-between;
|
|
25
|
+
align-items: center;
|
|
26
|
+
}
|
|
27
|
+
.copy-btn {
|
|
28
|
+
padding: 0.5rem 1rem;
|
|
29
|
+
background: #f14668;
|
|
30
|
+
color: white;
|
|
31
|
+
border: none;
|
|
32
|
+
border-radius: 6px;
|
|
33
|
+
cursor: pointer;
|
|
34
|
+
font-size: 0.875rem;
|
|
35
|
+
transition: background 0.2s;
|
|
36
|
+
}
|
|
37
|
+
.copy-btn:hover {
|
|
38
|
+
background: #ef2e55;
|
|
39
|
+
}
|
|
40
|
+
.copy-btn.copied {
|
|
41
|
+
background: #48c78e;
|
|
42
|
+
}
|
|
43
|
+
.code-container {
|
|
44
|
+
display: none;
|
|
45
|
+
background: #f5f5f5;
|
|
46
|
+
padding: 1rem;
|
|
47
|
+
border-radius: 6px;
|
|
48
|
+
margin-top: 1rem;
|
|
49
|
+
overflow-x: auto;
|
|
50
|
+
}
|
|
51
|
+
.code-container pre {
|
|
52
|
+
margin: 0;
|
|
53
|
+
font-family: 'Courier New', monospace;
|
|
54
|
+
font-size: 0.875rem;
|
|
55
|
+
}
|
|
56
|
+
</style>
|
|
57
|
+
</head>
|
|
58
|
+
<body>
|
|
59
|
+
<div style="max-width: 900px; margin: 0 auto;">
|
|
60
|
+
<a href="index.html" class="button is-link is-small">← Back to home</a>
|
|
61
|
+
<h1 class="title is-1">Media Object & Footer</h1>
|
|
62
|
+
|
|
63
|
+
<div class="demo-section" id="section-1">
|
|
64
|
+
<div class="demo-title">
|
|
65
|
+
<span>Media Object (.media)</span>
|
|
66
|
+
<button class="copy-btn" onclick="copyCode('section-1')">Copy code</button>
|
|
67
|
+
</div>
|
|
68
|
+
<div class="media">
|
|
69
|
+
<div class="media-left"><figure class="image is-64x64"><img src="https://placehold.co/64x64" alt="avatar"></figure></div>
|
|
70
|
+
<div class="media-content">
|
|
71
|
+
<p><strong>User123</strong> <small>5 min ago</small></p>
|
|
72
|
+
<p>This is a comment using the media object. It can contain text, images, and actions.</p>
|
|
73
|
+
<div class="media">
|
|
74
|
+
<div class="media-left"><figure class="image is-48x48"><img src="https://placehold.co/48x48" alt="avatar"></figure></div>
|
|
75
|
+
<div class="media-content"><p><strong>Reply</strong> <br>Nested media object.</p></div>
|
|
76
|
+
</div>
|
|
77
|
+
</div>
|
|
78
|
+
<div class="media-right"><button class="delete"></button></div>
|
|
79
|
+
</div>
|
|
80
|
+
<hr>
|
|
81
|
+
<div class="media">
|
|
82
|
+
<div class="media-content"><input class="input" placeholder="Write a comment..."></div>
|
|
83
|
+
<div class="media-right"><button class="button is-primary">Send</button></div>
|
|
84
|
+
</div>
|
|
85
|
+
<div class="code-container" id="code-section-1">
|
|
86
|
+
<pre><div class="media">
|
|
87
|
+
<div class="media-left">
|
|
88
|
+
<figure class="image is-64x64">
|
|
89
|
+
<img src="https://placehold.co/64x64" alt="avatar">
|
|
90
|
+
</figure>
|
|
91
|
+
</div>
|
|
92
|
+
<div class="media-content">
|
|
93
|
+
<p><strong>User123</strong> <small>5 min ago</small></p>
|
|
94
|
+
<p>This is a comment using the media object.</p>
|
|
95
|
+
<div class="media">
|
|
96
|
+
<div class="media-left">
|
|
97
|
+
<figure class="image is-48x48">
|
|
98
|
+
<img src="https://placehold.co/48x48" alt="avatar">
|
|
99
|
+
</figure>
|
|
100
|
+
</div>
|
|
101
|
+
<div class="media-content">
|
|
102
|
+
<p><strong>Reply</strong> <br>Nested media object.</p>
|
|
103
|
+
</div>
|
|
104
|
+
</div>
|
|
105
|
+
</div>
|
|
106
|
+
<div class="media-right">
|
|
107
|
+
<button class="delete"></button>
|
|
108
|
+
</div>
|
|
109
|
+
</div>
|
|
110
|
+
<hr>
|
|
111
|
+
<div class="media">
|
|
112
|
+
<div class="media-content">
|
|
113
|
+
<input class="input" placeholder="Write a comment...">
|
|
114
|
+
</div>
|
|
115
|
+
<div class="media-right">
|
|
116
|
+
<button class="button is-primary">Send</button>
|
|
117
|
+
</div>
|
|
118
|
+
</div></pre>
|
|
119
|
+
</div>
|
|
120
|
+
</div>
|
|
121
|
+
|
|
122
|
+
<div class="demo-section" id="section-2">
|
|
123
|
+
<div class="demo-title">
|
|
124
|
+
<span>Footer (.footer)</span>
|
|
125
|
+
<button class="copy-btn" onclick="copyCode('section-2')">Copy code</button>
|
|
126
|
+
</div>
|
|
127
|
+
<div class="footer" style="margin-top: 0;">
|
|
128
|
+
<p>This is the footer with .footer class</p>
|
|
129
|
+
<p>© 2025 Bulma Tailwind - All rights reserved.</p>
|
|
130
|
+
</div>
|
|
131
|
+
<div class="code-container" id="code-section-2">
|
|
132
|
+
<pre><div class="footer">
|
|
133
|
+
<p>This is the footer with .footer class</p>
|
|
134
|
+
<p>© 2025 Bulma Tailwind - All rights reserved.</p>
|
|
135
|
+
</div></pre>
|
|
136
|
+
</div>
|
|
137
|
+
</div>
|
|
138
|
+
</div>
|
|
139
|
+
|
|
140
|
+
<script>
|
|
141
|
+
function copyCode(sectionId) {
|
|
142
|
+
const codeElement = document.getElementById('code-' + sectionId);
|
|
143
|
+
const button = event.target;
|
|
144
|
+
const originalText = button.textContent;
|
|
145
|
+
|
|
146
|
+
// Toggle code visibility
|
|
147
|
+
if (codeElement.style.display === 'none' || codeElement.style.display === '') {
|
|
148
|
+
codeElement.style.display = 'block';
|
|
149
|
+
}
|
|
150
|
+
|
|
151
|
+
// Copy to clipboard
|
|
152
|
+
const textToCopy = codeElement.querySelector('pre').textContent;
|
|
153
|
+
navigator.clipboard.writeText(textToCopy).then(() => {
|
|
154
|
+
button.textContent = 'Copied!';
|
|
155
|
+
button.classList.add('copied');
|
|
156
|
+
setTimeout(() => {
|
|
157
|
+
button.textContent = originalText;
|
|
158
|
+
button.classList.remove('copied');
|
|
159
|
+
}, 2000);
|
|
160
|
+
});
|
|
161
|
+
}
|
|
162
|
+
</script>
|
|
163
|
+
</body>
|
|
164
|
+
</html>
|
package/src/footer.css
ADDED
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
@layer components {
|
|
2
|
+
.file {
|
|
3
|
+
@apply relative inline-flex items-stretch;
|
|
4
|
+
}
|
|
5
|
+
.file-input {
|
|
6
|
+
@apply absolute inset-0 opacity-0 cursor-pointer w-full h-full;
|
|
7
|
+
}
|
|
8
|
+
.file-cta {
|
|
9
|
+
@apply inline-flex items-center gap-2 px-3 py-2 rounded-l-md border border-grey bg-grey-light text-dark;
|
|
10
|
+
}
|
|
11
|
+
.file-name {
|
|
12
|
+
@apply inline-flex items-center px-3 py-2 rounded-r-md border border-l-0 border-grey bg-white text-dark whitespace-nowrap overflow-hidden text-ellipsis;
|
|
13
|
+
}
|
|
14
|
+
/* Colores */
|
|
15
|
+
.file.is-primary .file-cta {
|
|
16
|
+
@apply bg-primary border-primary text-white;
|
|
17
|
+
}
|
|
18
|
+
.file.is-link .file-cta {
|
|
19
|
+
@apply bg-link border-link text-white;
|
|
20
|
+
}
|
|
21
|
+
.file.is-danger .file-cta {
|
|
22
|
+
@apply bg-danger border-danger text-white;
|
|
23
|
+
}
|
|
24
|
+
/* Tamaños */
|
|
25
|
+
.file.is-small .file-cta,
|
|
26
|
+
.file.is-small .file-name {
|
|
27
|
+
@apply text-sm px-2 py-1;
|
|
28
|
+
}
|
|
29
|
+
.file.is-medium .file-cta,
|
|
30
|
+
.file.is-medium .file-name {
|
|
31
|
+
@apply text-base px-4 py-2.5;
|
|
32
|
+
}
|
|
33
|
+
.file.is-large .file-cta,
|
|
34
|
+
.file.is-large .file-name {
|
|
35
|
+
@apply text-lg px-5 py-3;
|
|
36
|
+
}
|
|
37
|
+
/* Variante boxed */
|
|
38
|
+
.file.is-boxed .file-cta {
|
|
39
|
+
@apply rounded-md border-2;
|
|
40
|
+
}
|
|
41
|
+
.file.is-boxed .file-name {
|
|
42
|
+
@apply rounded-md border-2 border-l-0;
|
|
43
|
+
}
|
|
44
|
+
}
|
|
@@ -0,0 +1,129 @@
|
|
|
1
|
+
@layer components {
|
|
2
|
+
/* Contenedor principal de campo */
|
|
3
|
+
.field {
|
|
4
|
+
@apply mb-4;
|
|
5
|
+
}
|
|
6
|
+
|
|
7
|
+
/* Grupo de campos (horizontal) */
|
|
8
|
+
.field.is-grouped {
|
|
9
|
+
@apply flex gap-2;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
.field.is-grouped-centered {
|
|
13
|
+
@apply justify-center;
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
.field.is-grouped-right {
|
|
17
|
+
@apply justify-end;
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
/* Grupo de campos con expansión */
|
|
21
|
+
.field.is-grouped .control.is-expanded {
|
|
22
|
+
@apply flex-1;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
/* Etiqueta */
|
|
26
|
+
.label {
|
|
27
|
+
@apply block font-semibold text-dark mb-2;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
/* Texto de ayuda */
|
|
31
|
+
.help {
|
|
32
|
+
@apply block text-sm mt-1 text-grey-dark;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
.help.is-primary { color: var(--color-primary); }
|
|
36
|
+
.help.is-link { color: var(--color-link); }
|
|
37
|
+
.help.is-info { color: var(--color-info); }
|
|
38
|
+
.help.is-success { color: var(--color-success); }
|
|
39
|
+
.help.is-warning { color: var(--color-warning); }
|
|
40
|
+
.help.is-danger { color: var(--color-danger); }
|
|
41
|
+
|
|
42
|
+
/* Control: wrapper alrededor de input/select/textarea */
|
|
43
|
+
.control {
|
|
44
|
+
@apply relative;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
/* Iconos dentro de control (izquierda/derecha) */
|
|
48
|
+
.control.has-icons-left .icon,
|
|
49
|
+
.control.has-icons-right .icon {
|
|
50
|
+
@apply absolute top-1/2 -translate-y-1/2 pointer-events-none text-grey-dark;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
.control.has-icons-left .icon {
|
|
54
|
+
@apply left-2;
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
.control.has-icons-right .icon {
|
|
58
|
+
@apply right-2;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
.control.has-icons-left input,
|
|
62
|
+
.control.has-icons-left select,
|
|
63
|
+
.control.has-icons-left textarea {
|
|
64
|
+
@apply pl-8;
|
|
65
|
+
}
|
|
66
|
+
|
|
67
|
+
.control.has-icons-right input,
|
|
68
|
+
.control.has-icons-right select,
|
|
69
|
+
.control.has-icons-right textarea {
|
|
70
|
+
@apply pr-8;
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
/* Loading spinner dentro de control */
|
|
74
|
+
.control.is-loading::after {
|
|
75
|
+
content: "";
|
|
76
|
+
@apply absolute top-1/2 right-2 w-4 h-4 border-2 border-grey-dark border-t-primary rounded-full animate-spin -translate-y-1/2;
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
/* Tamaños de control que afectan a inputs internos */
|
|
80
|
+
.control.is-small input,
|
|
81
|
+
.control.is-small select,
|
|
82
|
+
.control.is-small textarea {
|
|
83
|
+
@apply text-sm py-1;
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
.control.is-medium input,
|
|
87
|
+
.control.is-medium select,
|
|
88
|
+
.control.is-medium textarea {
|
|
89
|
+
@apply text-base py-2.5;
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
.control.is-large input,
|
|
93
|
+
.control.is-large select,
|
|
94
|
+
.control.is-large textarea {
|
|
95
|
+
@apply text-lg py-3;
|
|
96
|
+
}
|
|
97
|
+
|
|
98
|
+
/* Expansión (usa todo el ancho) */
|
|
99
|
+
.control.is-expanded {
|
|
100
|
+
@apply w-full;
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
/* Grupo de botones dentro de field */
|
|
104
|
+
.field.has-addons {
|
|
105
|
+
@apply flex;
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
.field.has-addons .control:not(:last-child) {
|
|
109
|
+
@apply mr-0;
|
|
110
|
+
}
|
|
111
|
+
|
|
112
|
+
.field.has-addons .control:first-child input,
|
|
113
|
+
.field.has-addons .control:first-child select,
|
|
114
|
+
.field.has-addons .control:first-child button {
|
|
115
|
+
@apply rounded-r-none;
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
.field.has-addons .control:last-child input,
|
|
119
|
+
.field.has-addons .control:last-child select,
|
|
120
|
+
.field.has-addons .control:last-child button {
|
|
121
|
+
@apply rounded-l-none;
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
.field.has-addons .control:not(:first-child):not(:last-child) input,
|
|
125
|
+
.field.has-addons .control:not(:first-child):not(:last-child) select,
|
|
126
|
+
.field.has-addons .control:not(:first-child):not(:last-child) button {
|
|
127
|
+
@apply rounded-none;
|
|
128
|
+
}
|
|
129
|
+
}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
@layer components {
|
|
2
|
+
.input, .textarea {
|
|
3
|
+
@apply w-full px-3 py-2 border border-grey rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50;
|
|
4
|
+
}
|
|
5
|
+
.input.is-small { @apply text-sm py-1; }
|
|
6
|
+
.input.is-medium { @apply text-base py-2.5; }
|
|
7
|
+
.input.is-large { @apply text-lg py-3; }
|
|
8
|
+
.input.is-primary { @apply border-primary; }
|
|
9
|
+
}
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
@layer components {
|
|
2
|
+
.select {
|
|
3
|
+
@apply relative inline-block;
|
|
4
|
+
}
|
|
5
|
+
select {
|
|
6
|
+
@apply appearance-none w-full px-3 py-2 pr-8 border border-grey rounded-md bg-white focus:outline-none focus:ring-2 focus:ring-primary/50;
|
|
7
|
+
}
|
|
8
|
+
.select::after {
|
|
9
|
+
content: "▼";
|
|
10
|
+
@apply absolute right-3 top-1/2 -translate-y-1/2 text-grey-dark pointer-events-none text-xs;
|
|
11
|
+
}
|
|
12
|
+
/* Tamaños */
|
|
13
|
+
.select.is-small select {
|
|
14
|
+
@apply text-sm py-1 pr-6;
|
|
15
|
+
}
|
|
16
|
+
.select.is-medium select {
|
|
17
|
+
@apply text-base py-2.5 pr-9;
|
|
18
|
+
}
|
|
19
|
+
.select.is-large select {
|
|
20
|
+
@apply text-lg py-3 pr-10;
|
|
21
|
+
}
|
|
22
|
+
/* Estados */
|
|
23
|
+
select.is-primary {
|
|
24
|
+
@apply border-primary;
|
|
25
|
+
}
|
|
26
|
+
select.is-danger {
|
|
27
|
+
@apply border-danger;
|
|
28
|
+
}
|
|
29
|
+
select.is-rounded {
|
|
30
|
+
@apply rounded-full;
|
|
31
|
+
}
|
|
32
|
+
/* Múltiple */
|
|
33
|
+
select[multiple] {
|
|
34
|
+
@apply pr-3;
|
|
35
|
+
}
|
|
36
|
+
.select[multiple]::after {
|
|
37
|
+
display: none;
|
|
38
|
+
}
|
|
39
|
+
}
|