holygrail5 1.0.26 → 1.0.27
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/README.md +14 -0
- package/dist/dist.bak/assets/fonts/SuisseIntlMono-Bold-WebS.woff +0 -0
- package/dist/dist.bak/assets/fonts/SuisseIntlMono-Bold-WebS.woff2 +0 -0
- package/dist/dist.bak/assets/fonts/SuisseIntlMono-Regular-WebS.woff +0 -0
- package/dist/dist.bak/assets/fonts/SuisseIntlMono-Regular-WebS.woff2 +0 -0
- package/dist/dist.bak/assets/fonts/suisse-intl-light.woff +0 -0
- package/dist/dist.bak/assets/fonts/suisse-intl-light.woff2 +0 -0
- package/dist/dist.bak/assets/fonts/suisse-intl-medium.woff +0 -0
- package/dist/dist.bak/assets/fonts/suisse-intl-medium.woff2 +0 -0
- package/dist/dist.bak/assets/fonts/suisse-intl-regular.woff +0 -0
- package/dist/dist.bak/assets/fonts/suisse-intl-regular.woff2 +0 -0
- package/dist/dist.bak/assets/fonts/suisse-intl-semibold.woff +0 -0
- package/dist/dist.bak/assets/fonts/suisse-intl-semibold.woff2 +0 -0
- package/dist/dist.bak/assets/fonts/suisse-intl-thin.woff +0 -0
- package/dist/dist.bak/assets/fonts/suisse-intl-thin.woff2 +0 -0
- package/dist/dist.bak/assets/fonts/suisse-works-bold.woff +0 -0
- package/dist/dist.bak/assets/fonts/suisse-works-bold.woff2 +0 -0
- package/dist/dist.bak/assets/fonts/suisse-works-medium.woff +0 -0
- package/dist/dist.bak/assets/fonts/suisse-works-medium.woff2 +0 -0
- package/dist/dist.bak/assets/fonts/suisse-works-regular.woff +0 -0
- package/dist/dist.bak/assets/fonts/suisse-works-regular.woff2 +0 -0
- package/dist/dist.bak/assets/intro.jpg +0 -0
- package/dist/dist.bak/assets/introm.jpg +0 -0
- package/dist/dist.bak/assets/margen.webp +0 -0
- package/dist/dist.bak/componentes.html +422 -0
- package/dist/dist.bak/developer-guide.md +632 -0
- package/dist/dist.bak/guide-styles.css +1513 -0
- package/dist/dist.bak/index.html +3685 -0
- package/dist/dist.bak/output.css +2590 -0
- package/dist/dist.bak/skills.html +674 -0
- package/dist/dist.bak/themes/dutti-demo.html +1197 -0
- package/dist/dist.bak/themes/dutti.css +2459 -0
- package/dist/dist.bak/themes/limited-demo.html +1198 -0
- package/dist/dist.bak/themes/limited.css +2495 -0
- package/dist/index.html +34 -34
- package/dist/output.css +11 -0
- package/dist/themes/limited-demo.html +85 -45
- package/package.json +3 -1
package/README.md
CHANGED
|
@@ -515,6 +515,20 @@ Los tests:
|
|
|
515
515
|
| `docs/ANALISIS-ARQUITECTURA.md` | Análisis completo de la arquitectura y problemas resueltos. |
|
|
516
516
|
| `docs/CHANGELOG-MEJORAS.md` | Registro detallado de la refactorización de diciembre 2024. |
|
|
517
517
|
|
|
518
|
+
### Publicación en npm
|
|
519
|
+
|
|
520
|
+
`dist/` está en `.gitignore` (no va al repo), pero **sí debe ir al paquete npm**. El script `prepack` ejecuta `npm run build` automáticamente antes de `npm pack` y `npm publish`, así que el tarball siempre incluye `dist/output.css`, temas, fuentes y la guía HTML.
|
|
521
|
+
|
|
522
|
+
```bash
|
|
523
|
+
# 1) Sube la versión en package.json
|
|
524
|
+
# 2) Publica (build + tests + npm publish)
|
|
525
|
+
npm run publish:pkg
|
|
526
|
+
```
|
|
527
|
+
|
|
528
|
+
También puedes usar `npm publish` directamente: `prepack` regenerará `dist/` antes de empaquetar.
|
|
529
|
+
|
|
530
|
+
El paquete publica (vía `files` en `package.json`): `dist/**/*`, `config.json`, `src/**`, `themes/**` y `generate-css.js`.
|
|
531
|
+
|
|
518
532
|
### Publicación de la guía
|
|
519
533
|
|
|
520
534
|
Puedes publicar `dist/index.html` como documentación estática en:
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
@@ -0,0 +1,422 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="es">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
6
|
+
<title>HolyGrail5 — Componentes base</title>
|
|
7
|
+
<!-- Framework base -->
|
|
8
|
+
<link rel="stylesheet" href="output.css">
|
|
9
|
+
<!-- Tema base genérico: dutti (variables + componentes) -->
|
|
10
|
+
<link rel="stylesheet" href="themes/dutti.css">
|
|
11
|
+
<!-- Estilos compartidos de guía (header, sidebar, demo-*; incluye @font-face Suisse y la regla body en Suisse) -->
|
|
12
|
+
<link rel="stylesheet" href="guide-styles.css">
|
|
13
|
+
<style>
|
|
14
|
+
/* Descripción de cada sección (debajo del título) */
|
|
15
|
+
.cmp-desc {
|
|
16
|
+
font-size: 14px;
|
|
17
|
+
line-height: 1.6;
|
|
18
|
+
color: #555;
|
|
19
|
+
margin: 0 0 1.5rem;
|
|
20
|
+
max-width: 720px;
|
|
21
|
+
}
|
|
22
|
+
.cmp-desc code {
|
|
23
|
+
background: #f3f3f3;
|
|
24
|
+
padding: 2px 6px;
|
|
25
|
+
border-radius: 4px;
|
|
26
|
+
font-size: 0.88em;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
/* Preview de cada componente dentro de .demo-item */
|
|
30
|
+
.cmp-preview {
|
|
31
|
+
min-height: 48px;
|
|
32
|
+
display: flex;
|
|
33
|
+
align-items: center;
|
|
34
|
+
flex-wrap: wrap;
|
|
35
|
+
gap: 0.5rem;
|
|
36
|
+
margin-bottom: var(--hg-spacing-12);
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
/* Los inputs con floating label necesitan respirar: el label flota
|
|
40
|
+
encima, el helper-text se apila debajo. */
|
|
41
|
+
#inputs .cmp-preview,
|
|
42
|
+
#forms .cmp-preview {
|
|
43
|
+
display: block;
|
|
44
|
+
}
|
|
45
|
+
#inputs .cmp-preview > .form-input-label-2,
|
|
46
|
+
#forms .cmp-preview > .form-group {
|
|
47
|
+
width: 100%;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
/* Containers y Grid son estructuras de layout: interesan como
|
|
51
|
+
bloques a 100% del item, no como chips alineados horizontalmente. */
|
|
52
|
+
#containers .demo-grid,
|
|
53
|
+
#grid .demo-grid {
|
|
54
|
+
grid-template-columns: 1fr;
|
|
55
|
+
}
|
|
56
|
+
#containers .cmp-preview,
|
|
57
|
+
#grid .cmp-preview {
|
|
58
|
+
display: block;
|
|
59
|
+
}
|
|
60
|
+
#containers .cmp-preview > [class^="container"],
|
|
61
|
+
#grid .cmp-preview > [class^="hg-grid-"] {
|
|
62
|
+
width: 100%;
|
|
63
|
+
max-width: 100%;
|
|
64
|
+
}
|
|
65
|
+
</style>
|
|
66
|
+
</head>
|
|
67
|
+
<body>
|
|
68
|
+
|
|
69
|
+
<div class="guide-header">
|
|
70
|
+
<a href="index.html" class="guide-logo" style="text-decoration:none;">HolyGrail5</a>
|
|
71
|
+
<div style="display: flex; align-items: center; gap: 1rem;">
|
|
72
|
+
<nav class="guide-nav">
|
|
73
|
+
<a href="index.html">Guía</a>
|
|
74
|
+
<a href="componentes.html" class="active">Componentes</a>
|
|
75
|
+
<a href="themes/dutti-demo.html">Tema Dutti</a>
|
|
76
|
+
<a href="themes/limited-demo.html">Tema Limited</a>
|
|
77
|
+
<a href="skills.html">Skills</a>
|
|
78
|
+
</nav>
|
|
79
|
+
<button class="guide-header-button" onclick="toggleSidebar()">☰</button>
|
|
80
|
+
</div>
|
|
81
|
+
</div>
|
|
82
|
+
|
|
83
|
+
<div class="guide-sidebar-overlay" onclick="toggleSidebar()"></div>
|
|
84
|
+
|
|
85
|
+
<aside class="guide-sidebar">
|
|
86
|
+
<div class="guide-sidebar-header">
|
|
87
|
+
<div>HolyGrail5</div>
|
|
88
|
+
<p class="guide-sidebar-subtitle">Componentes base</p>
|
|
89
|
+
</div>
|
|
90
|
+
|
|
91
|
+
<nav class="guide-sidebar-nav">
|
|
92
|
+
<p class="guide-sidebar-title">Componentes</p>
|
|
93
|
+
|
|
94
|
+
<a href="#buttons" class="guide-menu-item">Botones</a>
|
|
95
|
+
<a href="#inputs" class="guide-menu-item">Inputs</a>
|
|
96
|
+
<a href="#labels" class="guide-menu-item">Labels</a>
|
|
97
|
+
<a href="#checkboxes" class="guide-menu-item">Checkboxes</a>
|
|
98
|
+
<a href="#radios" class="guide-menu-item">Radios</a>
|
|
99
|
+
<a href="#switches" class="guide-menu-item">Switches</a>
|
|
100
|
+
<a href="#forms" class="guide-menu-item">Formularios</a>
|
|
101
|
+
<a href="#containers" class="guide-menu-item">Containers</a>
|
|
102
|
+
<a href="#grid" class="guide-menu-item">Grid</a>
|
|
103
|
+
</nav>
|
|
104
|
+
</aside>
|
|
105
|
+
|
|
106
|
+
<script>
|
|
107
|
+
function toggleSidebar() {
|
|
108
|
+
const sidebar = document.querySelector('.guide-sidebar');
|
|
109
|
+
const overlay = document.querySelector('.guide-sidebar-overlay');
|
|
110
|
+
sidebar.classList.toggle('open');
|
|
111
|
+
overlay.classList.toggle('active');
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
function closeSidebar() {
|
|
115
|
+
const sidebar = document.querySelector('.guide-sidebar');
|
|
116
|
+
const overlay = document.querySelector('.guide-sidebar-overlay');
|
|
117
|
+
sidebar.classList.remove('open');
|
|
118
|
+
overlay.classList.remove('active');
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
window.toggleSidebar = toggleSidebar;
|
|
122
|
+
window.closeSidebar = closeSidebar;
|
|
123
|
+
</script>
|
|
124
|
+
|
|
125
|
+
<main class="demo-container guide-main-content">
|
|
126
|
+
<h2 class="demo-title">Componentes base</h2>
|
|
127
|
+
|
|
128
|
+
<div class="demo-section-2">
|
|
129
|
+
<h3>¿Qué es esta página?</h3>
|
|
130
|
+
<p class="mb-16">
|
|
131
|
+
Librería de componentes compartidos que viven en
|
|
132
|
+
<code>themes/_base/</code>. Se renderizan con el tema
|
|
133
|
+
<strong>Dutti</strong>
|
|
134
|
+
como base genérica del framework; cualquier otro tema puede
|
|
135
|
+
aplicarse encima para redefinir la identidad visual sin tocar
|
|
136
|
+
el HTML.
|
|
137
|
+
</p>
|
|
138
|
+
</div>
|
|
139
|
+
|
|
140
|
+
|
|
141
|
+
<section class="demo-section" id="buttons">
|
|
142
|
+
<h2 class="demo-title">Botones</h2>
|
|
143
|
+
<p class="cmp-desc">Variantes estándar del framework: <code>primary</code>, <code>secondary</code>, <code>tertiary</code>, <code>label-m</code>, <code>link</code> y <code>badge</code>. Clases en <code>themes/_base/_buttons.css</code>. Cada tema puede sobreescribirlas con su propia identidad visual.</p>
|
|
144
|
+
|
|
145
|
+
<h3 class="demo-subtitle">Variantes</h3>
|
|
146
|
+
<div class="demo-grid">
|
|
147
|
+
<div class="demo-item">
|
|
148
|
+
<div class="cmp-preview"><button class="btn btn-primary">Primary</button></div>
|
|
149
|
+
<div class="demo-code">.btn .btn-primary</div>
|
|
150
|
+
</div>
|
|
151
|
+
<div class="demo-item">
|
|
152
|
+
<div class="cmp-preview"><button class="btn btn-secondary">Secondary</button></div>
|
|
153
|
+
<div class="demo-code">.btn .btn-secondary</div>
|
|
154
|
+
</div>
|
|
155
|
+
<div class="demo-item">
|
|
156
|
+
<div class="cmp-preview"><button class="btn btn-tertiary">Tertiary</button></div>
|
|
157
|
+
<div class="demo-code">.btn .btn-tertiary</div>
|
|
158
|
+
</div>
|
|
159
|
+
<div class="demo-item">
|
|
160
|
+
<div class="cmp-preview"><button class="btn btn-tertiary hg-text-underline">Tertiary underline</button></div>
|
|
161
|
+
<div class="demo-code">.btn .btn-tertiary .hg-text-underline</div>
|
|
162
|
+
</div>
|
|
163
|
+
<div class="demo-item">
|
|
164
|
+
<div class="cmp-preview"><button class="btn btn-label-m">Label M</button></div>
|
|
165
|
+
<div class="demo-code">.btn .btn-label-m</div>
|
|
166
|
+
</div>
|
|
167
|
+
<div class="demo-item">
|
|
168
|
+
<div class="cmp-preview"><button class="btn btn-link">Link</button></div>
|
|
169
|
+
<div class="demo-code">.btn .btn-link</div>
|
|
170
|
+
</div>
|
|
171
|
+
<div class="demo-item">
|
|
172
|
+
<div class="cmp-preview"><button class="btn btn-badge">Badge</button></div>
|
|
173
|
+
<div class="demo-code">.btn .btn-badge</div>
|
|
174
|
+
</div>
|
|
175
|
+
<div class="demo-item">
|
|
176
|
+
<div class="cmp-preview"><button class="btn btn-primary" disabled>Disabled</button></div>
|
|
177
|
+
<div class="demo-code">.btn[disabled]</div>
|
|
178
|
+
</div>
|
|
179
|
+
</div>
|
|
180
|
+
<h3 class="demo-subtitle">Tamaños</h3>
|
|
181
|
+
<div class="demo-grid">
|
|
182
|
+
<div class="demo-item">
|
|
183
|
+
<div class="cmp-preview"><button class="btn btn-primary btn-sm">Small</button></div>
|
|
184
|
+
<div class="demo-code">.btn .btn-sm</div>
|
|
185
|
+
</div>
|
|
186
|
+
<div class="demo-item">
|
|
187
|
+
<div class="cmp-preview"><button class="btn btn-primary btn-md">Medium</button></div>
|
|
188
|
+
<div class="demo-code">.btn .btn-md</div>
|
|
189
|
+
</div>
|
|
190
|
+
<div class="demo-item">
|
|
191
|
+
<div class="cmp-preview"><button class="btn btn-primary btn-lg">Large</button></div>
|
|
192
|
+
<div class="demo-code">.btn .btn-lg</div>
|
|
193
|
+
</div>
|
|
194
|
+
</div>
|
|
195
|
+
<h3 class="demo-subtitle">Ancho completo</h3>
|
|
196
|
+
<div class="demo-grid">
|
|
197
|
+
<div class="demo-item">
|
|
198
|
+
<div class="cmp-preview"><button class="btn btn-primary btn-md btn-full">Botón ancho completo</button></div>
|
|
199
|
+
<div class="demo-code">.btn .btn-full</div>
|
|
200
|
+
</div>
|
|
201
|
+
</div>
|
|
202
|
+
</section>
|
|
203
|
+
|
|
204
|
+
<section class="demo-section" id="inputs">
|
|
205
|
+
<h2 class="demo-title">Inputs</h2>
|
|
206
|
+
<p class="cmp-desc">Campos de formulario base con <strong>floating label</strong>: texto, email, password, textarea y select. Cada input vive dentro de <code>.form-input-label-2</code> para que el label se anime al enfocar o al contener valor. Clases en <code>themes/_base/_inputs.css</code>.</p>
|
|
207
|
+
|
|
208
|
+
<h3 class="demo-subtitle">Tipos</h3>
|
|
209
|
+
<div class="demo-grid">
|
|
210
|
+
<div class="demo-item">
|
|
211
|
+
<div class="cmp-preview"><div class="form-input-label-2"><input type="text" id="cmp-input-text" class="input" placeholder=" " /><label for="cmp-input-text">Texto</label></div></div>
|
|
212
|
+
<div class="demo-code">.form-input-label-2 > .input</div>
|
|
213
|
+
</div>
|
|
214
|
+
<div class="demo-item">
|
|
215
|
+
<div class="cmp-preview"><div class="form-input-label-2"><input type="email" id="cmp-input-email" class="input" placeholder=" " /><label for="cmp-input-email">Email</label></div></div>
|
|
216
|
+
<div class="demo-code">.input (type=email)</div>
|
|
217
|
+
</div>
|
|
218
|
+
<div class="demo-item">
|
|
219
|
+
<div class="cmp-preview"><div class="form-input-label-2"><input type="password" id="cmp-input-password" class="input" placeholder=" " /><label for="cmp-input-password">Contraseña</label></div></div>
|
|
220
|
+
<div class="demo-code">.input (type=password)</div>
|
|
221
|
+
</div>
|
|
222
|
+
<div class="demo-item">
|
|
223
|
+
<div class="cmp-preview"><div class="form-input-label-2"><textarea id="cmp-input-textarea" class="input" placeholder=" " rows="3"></textarea><label for="cmp-input-textarea">Comentario</label></div></div>
|
|
224
|
+
<div class="demo-code">.input (textarea)</div>
|
|
225
|
+
</div>
|
|
226
|
+
<div class="demo-item">
|
|
227
|
+
<div class="cmp-preview"><div class="form-input-label-2"><select id="cmp-input-select" class="input"><option>Opción A</option><option>Opción B</option></select><label for="cmp-input-select">Selecciona</label></div></div>
|
|
228
|
+
<div class="demo-code">.input (select)</div>
|
|
229
|
+
</div>
|
|
230
|
+
</div>
|
|
231
|
+
<h3 class="demo-subtitle">Estados</h3>
|
|
232
|
+
<div class="demo-grid">
|
|
233
|
+
<div class="demo-item">
|
|
234
|
+
<div class="cmp-preview"><div class="form-input-label-2"><input type="text" id="cmp-input-error" class="input input-error" value="Valor inválido" placeholder=" " /><label for="cmp-input-error">Error</label></div><span class="helper-text helper-text-error">Este campo tiene un error</span></div>
|
|
235
|
+
<div class="demo-code">.input-error + .helper-text-error</div>
|
|
236
|
+
</div>
|
|
237
|
+
<div class="demo-item">
|
|
238
|
+
<div class="cmp-preview"><div class="form-input-label-2"><input type="text" id="cmp-input-success" class="input input-success" value="Valor válido" placeholder=" " /><label for="cmp-input-success">Success</label></div><span class="helper-text helper-text-success">Campo válido</span></div>
|
|
239
|
+
<div class="demo-code">.input-success + .helper-text-success</div>
|
|
240
|
+
</div>
|
|
241
|
+
<div class="demo-item">
|
|
242
|
+
<div class="cmp-preview"><div class="form-input-label-2"><input type="text" id="cmp-input-warning" class="input input-warning" value="Atención" placeholder=" " /><label for="cmp-input-warning">Warning</label></div><span class="helper-text helper-text-warning">Revisa este campo</span></div>
|
|
243
|
+
<div class="demo-code">.input-warning + .helper-text-warning</div>
|
|
244
|
+
</div>
|
|
245
|
+
<div class="demo-item">
|
|
246
|
+
<div class="cmp-preview"><div class="form-input-label-2"><input type="text" id="cmp-input-disabled" class="input" value="No editable" placeholder=" " disabled /><label for="cmp-input-disabled">Disabled</label></div></div>
|
|
247
|
+
<div class="demo-code">.input[disabled]</div>
|
|
248
|
+
</div>
|
|
249
|
+
</div>
|
|
250
|
+
</section>
|
|
251
|
+
|
|
252
|
+
<section class="demo-section" id="labels">
|
|
253
|
+
<h2 class="demo-title">Labels</h2>
|
|
254
|
+
<p class="cmp-desc">Etiquetas de formulario: base, obligatoria e inline. Clases en <code>themes/_base/_labels.css</code>.</p>
|
|
255
|
+
|
|
256
|
+
<h3 class="demo-subtitle">Variantes</h3>
|
|
257
|
+
<div class="demo-grid">
|
|
258
|
+
<div class="demo-item">
|
|
259
|
+
<div class="cmp-preview"><label class="label">Nombre</label></div>
|
|
260
|
+
<div class="demo-code">.label</div>
|
|
261
|
+
</div>
|
|
262
|
+
<div class="demo-item">
|
|
263
|
+
<div class="cmp-preview"><label class="label label-required">Email</label></div>
|
|
264
|
+
<div class="demo-code">.label .label-required</div>
|
|
265
|
+
</div>
|
|
266
|
+
<div class="demo-item">
|
|
267
|
+
<div class="cmp-preview"><label class="label label-inline"><input type="checkbox" /> Acepto los términos</label></div>
|
|
268
|
+
<div class="demo-code">.label .label-inline</div>
|
|
269
|
+
</div>
|
|
270
|
+
</div>
|
|
271
|
+
</section>
|
|
272
|
+
|
|
273
|
+
<section class="demo-section" id="checkboxes">
|
|
274
|
+
<h2 class="demo-title">Checkboxes</h2>
|
|
275
|
+
<p class="cmp-desc">Checkbox con input nativo oculto y marca SVG inline dentro de <code>.checkbox-indicator</code>. El estado visible se controla 100% con CSS (sin JS). Clases en <code>themes/_base/_checkboxes.css</code>.</p>
|
|
276
|
+
|
|
277
|
+
<h3 class="demo-subtitle">Estados</h3>
|
|
278
|
+
<div class="demo-grid">
|
|
279
|
+
<div class="demo-item">
|
|
280
|
+
<div class="cmp-preview"><label class="checkbox"><input type="checkbox" /><span class="checkbox-indicator"><svg class="cbox__icon" viewBox="0 0 10 8" width="10" height="8" aria-hidden="true" focusable="false"><path d="M9.05823.198273 9.69185.801721 3.5417 7.25937.308228 3.86422.941848 3.26077 3.5417 5.99062 9.05823.198273Z" fill="currentColor"/></svg></span><span class="checkbox-label">Sin marcar</span></label></div>
|
|
281
|
+
<div class="demo-code">.checkbox</div>
|
|
282
|
+
</div>
|
|
283
|
+
<div class="demo-item">
|
|
284
|
+
<div class="cmp-preview"><label class="checkbox"><input type="checkbox" checked /><span class="checkbox-indicator"><svg class="cbox__icon" viewBox="0 0 10 8" width="10" height="8" aria-hidden="true" focusable="false"><path d="M9.05823.198273 9.69185.801721 3.5417 7.25937.308228 3.86422.941848 3.26077 3.5417 5.99062 9.05823.198273Z" fill="currentColor"/></svg></span><span class="checkbox-label">Marcado</span></label></div>
|
|
285
|
+
<div class="demo-code">.checkbox (checked)</div>
|
|
286
|
+
</div>
|
|
287
|
+
<div class="demo-item">
|
|
288
|
+
<div class="cmp-preview"><label class="checkbox"><input type="checkbox" disabled /><span class="checkbox-indicator"><svg class="cbox__icon" viewBox="0 0 10 8" width="10" height="8" aria-hidden="true" focusable="false"><path d="M9.05823.198273 9.69185.801721 3.5417 7.25937.308228 3.86422.941848 3.26077 3.5417 5.99062 9.05823.198273Z" fill="currentColor"/></svg></span><span class="checkbox-label">Disabled</span></label></div>
|
|
289
|
+
<div class="demo-code">.checkbox[disabled]</div>
|
|
290
|
+
</div>
|
|
291
|
+
</div>
|
|
292
|
+
</section>
|
|
293
|
+
|
|
294
|
+
<section class="demo-section" id="radios">
|
|
295
|
+
<h2 class="demo-title">Radios</h2>
|
|
296
|
+
<p class="cmp-desc">Radio buttons con el patrón <code>.checkbox-radio</code>: el input nativo se oculta visualmente y el círculo se pinta con <code>label::before</code>. Clases en <code>themes/_base/_radios.css</code>.</p>
|
|
297
|
+
|
|
298
|
+
<h3 class="demo-subtitle">Grupo</h3>
|
|
299
|
+
<div class="demo-grid">
|
|
300
|
+
<div class="demo-item">
|
|
301
|
+
<div class="cmp-preview"><div class="checkbox-radio"><input id="cmp-radio-1" name="cmp-radio" type="radio" value="A" /><label for="cmp-radio-1"><i class="ico-radio"></i><span class="title-m">Opción A</span></label></div></div>
|
|
302
|
+
<div class="demo-code">.checkbox-radio</div>
|
|
303
|
+
</div>
|
|
304
|
+
<div class="demo-item">
|
|
305
|
+
<div class="cmp-preview"><div class="checkbox-radio"><input id="cmp-radio-2" name="cmp-radio" type="radio" value="B" checked /><label for="cmp-radio-2"><i class="ico-radio"></i><span class="title-m">Opción B (activa)</span></label></div></div>
|
|
306
|
+
<div class="demo-code">.checkbox-radio (checked)</div>
|
|
307
|
+
</div>
|
|
308
|
+
<div class="demo-item">
|
|
309
|
+
<div class="cmp-preview"><div class="checkbox-radio"><input id="cmp-radio-3" name="cmp-radio-2" type="radio" value="C" disabled /><label for="cmp-radio-3"><i class="ico-radio"></i><span class="title-m">Disabled</span></label></div></div>
|
|
310
|
+
<div class="demo-code">.checkbox-radio[disabled]</div>
|
|
311
|
+
</div>
|
|
312
|
+
</div>
|
|
313
|
+
</section>
|
|
314
|
+
|
|
315
|
+
<section class="demo-section" id="switches">
|
|
316
|
+
<h2 class="demo-title">Switches</h2>
|
|
317
|
+
<p class="cmp-desc">Interruptores on/off con el patrón <code>.checkbox-item-2</code>: pista rectangular y un <code>.checkbox-circle</code> que se desplaza al marcar. Clases en <code>themes/_base/_switches.css</code>.</p>
|
|
318
|
+
|
|
319
|
+
<h3 class="demo-subtitle">Estados</h3>
|
|
320
|
+
<div class="demo-grid">
|
|
321
|
+
<div class="demo-item">
|
|
322
|
+
<div class="cmp-preview"><div class="checkbox-item-2"><input id="cmp-switch-1" name="cmp-switch-1" type="checkbox" /><label for="cmp-switch-1"><div class="checkbox-circle"></div><span class="theta">Inactivo</span></label></div></div>
|
|
323
|
+
<div class="demo-code">.checkbox-item-2</div>
|
|
324
|
+
</div>
|
|
325
|
+
<div class="demo-item">
|
|
326
|
+
<div class="cmp-preview"><div class="checkbox-item-2"><input id="cmp-switch-2" name="cmp-switch-2" type="checkbox" checked /><label for="cmp-switch-2"><div class="checkbox-circle"></div><span class="theta">Activado</span></label></div></div>
|
|
327
|
+
<div class="demo-code">.checkbox-item-2 (checked)</div>
|
|
328
|
+
</div>
|
|
329
|
+
<div class="demo-item">
|
|
330
|
+
<div class="cmp-preview"><div class="checkbox-item-2"><input id="cmp-switch-3" name="cmp-switch-3" type="checkbox" disabled /><label for="cmp-switch-3"><div class="checkbox-circle"></div><span class="theta">Disabled</span></label></div></div>
|
|
331
|
+
<div class="demo-code">.checkbox-item-2[disabled]</div>
|
|
332
|
+
</div>
|
|
333
|
+
<div class="demo-item">
|
|
334
|
+
<div class="cmp-preview"><div class="checkbox-item-2 is-error"><input id="cmp-switch-4" name="cmp-switch-4" type="checkbox" /><label for="cmp-switch-4"><div class="checkbox-circle"></div><span class="theta">Error</span></label></div></div>
|
|
335
|
+
<div class="demo-code">.checkbox-item-2.is-error</div>
|
|
336
|
+
</div>
|
|
337
|
+
</div>
|
|
338
|
+
</section>
|
|
339
|
+
|
|
340
|
+
<section class="demo-section" id="forms">
|
|
341
|
+
<h2 class="demo-title">Formularios</h2>
|
|
342
|
+
<p class="cmp-desc">Composición de campos con label flotante + estado. <code>.form-group</code> apila verticalmente los campos; cada uno usa <code>.form-input-label-2</code> para el floating label y (opcionalmente) <code>.helper-text</code> para el mensaje de estado. Clases en <code>themes/_base/_forms.css</code>.</p>
|
|
343
|
+
|
|
344
|
+
<h3 class="demo-subtitle">Grupo de formulario</h3>
|
|
345
|
+
<div class="demo-grid">
|
|
346
|
+
<div class="demo-item">
|
|
347
|
+
<div class="cmp-preview"><div class="form-group"><div class="form-input-label-2"><input type="email" id="cmp-form-email" class="input" placeholder=" " /><label for="cmp-form-email">Email</label></div></div></div>
|
|
348
|
+
<div class="demo-code">.form-group > .form-input-label-2</div>
|
|
349
|
+
</div>
|
|
350
|
+
<div class="demo-item">
|
|
351
|
+
<div class="cmp-preview"><div class="form-group"><div class="form-input-label-2"><textarea id="cmp-form-msg" class="input" rows="3" placeholder=" "></textarea><label for="cmp-form-msg">Mensaje</label></div></div></div>
|
|
352
|
+
<div class="demo-code">.form-group (con textarea)</div>
|
|
353
|
+
</div>
|
|
354
|
+
<div class="demo-item">
|
|
355
|
+
<div class="cmp-preview"><div class="form-group"><div class="form-input-label-2"><input type="text" id="cmp-form-err" class="input input-error" value="" placeholder=" " /><label for="cmp-form-err">Nombre</label></div><span class="helper-text helper-text-error">Este campo es obligatorio</span></div></div>
|
|
356
|
+
<div class="demo-code">.form-group (con helper-text)</div>
|
|
357
|
+
</div>
|
|
358
|
+
</div>
|
|
359
|
+
</section>
|
|
360
|
+
|
|
361
|
+
<section class="demo-section" id="containers">
|
|
362
|
+
<h2 class="demo-title">Containers</h2>
|
|
363
|
+
<p class="cmp-desc">Contenedores centrados con <code>max-width</code> responsivo y/o fijo. <code>.container</code> escala con los breakpoints; <code>.container-2</code> es más estrecho; las variantes <code>.container-640</code>, <code>.container-512</code> y <code>.container-360</code> fijan un ancho concreto. Clases en <code>themes/_base/_containers.css</code>.</p>
|
|
364
|
+
|
|
365
|
+
<h3 class="demo-subtitle">Responsivos</h3>
|
|
366
|
+
<div class="demo-grid">
|
|
367
|
+
<div class="demo-item">
|
|
368
|
+
<div class="cmp-preview"><div class="container" style="background:var(--hg-color-light-grey); padding:var(--hg-spacing-16);">.container</div></div>
|
|
369
|
+
<div class="demo-code">.container</div>
|
|
370
|
+
</div>
|
|
371
|
+
<div class="demo-item">
|
|
372
|
+
<div class="cmp-preview"><div class="container-2" style="background:var(--hg-color-light-grey); padding:var(--hg-spacing-16);">.container-2</div></div>
|
|
373
|
+
<div class="demo-code">.container-2</div>
|
|
374
|
+
</div>
|
|
375
|
+
</div>
|
|
376
|
+
<h3 class="demo-subtitle">Anchos fijos</h3>
|
|
377
|
+
<div class="demo-grid">
|
|
378
|
+
<div class="demo-item">
|
|
379
|
+
<div class="cmp-preview"><div class="container-640" style="background:var(--hg-color-light-grey); padding:var(--hg-spacing-16);">.container-640</div></div>
|
|
380
|
+
<div class="demo-code">.container-640</div>
|
|
381
|
+
</div>
|
|
382
|
+
<div class="demo-item">
|
|
383
|
+
<div class="cmp-preview"><div class="container-512" style="background:var(--hg-color-light-grey); padding:var(--hg-spacing-16);">.container-512</div></div>
|
|
384
|
+
<div class="demo-code">.container-512</div>
|
|
385
|
+
</div>
|
|
386
|
+
<div class="demo-item">
|
|
387
|
+
<div class="cmp-preview"><div class="container-360" style="background:var(--hg-color-light-grey); padding:var(--hg-spacing-16);">.container-360</div></div>
|
|
388
|
+
<div class="demo-code">.container-360</div>
|
|
389
|
+
</div>
|
|
390
|
+
</div>
|
|
391
|
+
</section>
|
|
392
|
+
|
|
393
|
+
<section class="demo-section" id="grid">
|
|
394
|
+
<h2 class="demo-title">Grid</h2>
|
|
395
|
+
<p class="cmp-desc">Utilidades de CSS Grid inspiradas en Tailwind. El contenedor debe tener <code>display:grid</code> y usar <code>.hg-grid-cols-N</code> para definir N columnas; los hijos usan <code>.hg-col-span-N</code> para ocupar varias. Con el prefijo <code>md:</code> se activan a partir de 768 px. Clases en <code>themes/_base/objects/_grid.css</code>.</p>
|
|
396
|
+
|
|
397
|
+
<h3 class="demo-subtitle">Columnas iguales</h3>
|
|
398
|
+
<div class="demo-grid">
|
|
399
|
+
<div class="demo-item">
|
|
400
|
+
<div class="cmp-preview"><div class="hg-grid-cols-3" style="display:grid; gap:var(--hg-spacing-8);"><div style="background:var(--hg-color-light-grey); padding:var(--hg-spacing-16);">1</div><div style="background:var(--hg-color-light-grey); padding:var(--hg-spacing-16);">2</div><div style="background:var(--hg-color-light-grey); padding:var(--hg-spacing-16);">3</div></div></div>
|
|
401
|
+
<div class="demo-code">.hg-grid-cols-3</div>
|
|
402
|
+
</div>
|
|
403
|
+
<div class="demo-item">
|
|
404
|
+
<div class="cmp-preview"><div class="hg-grid-cols-4" style="display:grid; gap:var(--hg-spacing-8);"><div style="background:var(--hg-color-light-grey); padding:var(--hg-spacing-16);">1</div><div style="background:var(--hg-color-light-grey); padding:var(--hg-spacing-16);">2</div><div style="background:var(--hg-color-light-grey); padding:var(--hg-spacing-16);">3</div><div style="background:var(--hg-color-light-grey); padding:var(--hg-spacing-16);">4</div></div></div>
|
|
405
|
+
<div class="demo-code">.hg-grid-cols-4</div>
|
|
406
|
+
</div>
|
|
407
|
+
</div>
|
|
408
|
+
<h3 class="demo-subtitle">Col-span</h3>
|
|
409
|
+
<div class="demo-grid">
|
|
410
|
+
<div class="demo-item">
|
|
411
|
+
<div class="cmp-preview"><div class="hg-grid-cols-12" style="display:grid; gap:var(--hg-spacing-8);"><div class="hg-col-span-8" style="background:var(--hg-color-light-grey); padding:var(--hg-spacing-16);">span 8</div><div class="hg-col-span-4" style="background:var(--hg-color-light-grey); padding:var(--hg-spacing-16);">span 4</div></div></div>
|
|
412
|
+
<div class="demo-code">.hg-grid-cols-12 > .hg-col-span-{8,4}</div>
|
|
413
|
+
</div>
|
|
414
|
+
<div class="demo-item">
|
|
415
|
+
<div class="cmp-preview"><div class="hg-grid-cols-12" style="display:grid; gap:var(--hg-spacing-8);"><div class="hg-col-span-6" style="background:var(--hg-color-light-grey); padding:var(--hg-spacing-16);">span 6</div><div class="hg-col-span-6" style="background:var(--hg-color-light-grey); padding:var(--hg-spacing-16);">span 6</div></div></div>
|
|
416
|
+
<div class="demo-code">.hg-grid-cols-12 > .hg-col-span-6</div>
|
|
417
|
+
</div>
|
|
418
|
+
</div>
|
|
419
|
+
</section>
|
|
420
|
+
</main>
|
|
421
|
+
</body>
|
|
422
|
+
</html>
|