holygrail5 1.0.11 → 1.0.12
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/dist/index.html +4117 -0
- package/dist/output.css +1851 -0
- package/dist/themes/dutti-demo.html +540 -0
- package/dist/themes/dutti.css +731 -0
- package/generate-css.js +2 -1
- package/package.json +3 -2
- package/src/docs-generator/html-generator.js +9 -5
- package/src/components/_buttons.css +0 -255
- package/src/components/_checkboxes.css +0 -68
- package/src/components/_forms.css +0 -62
- package/src/components/_inputs.css +0 -84
- package/src/components/_labels.css +0 -28
- package/src/components/_radios.css +0 -64
- package/src/components/_switches.css +0 -70
package/dist/index.html
ADDED
|
@@ -0,0 +1,4117 @@
|
|
|
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
|
+
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
|
|
7
|
+
<meta http-equiv="Pragma" content="no-cache">
|
|
8
|
+
<meta http-equiv="Expires" content="0">
|
|
9
|
+
<title>HolyGrail5 - Guía de Tipografía</title>
|
|
10
|
+
<link rel="stylesheet" href="output.css">
|
|
11
|
+
<style>
|
|
12
|
+
|
|
13
|
+
/* Estilos generales para todas las tablas */
|
|
14
|
+
.guide-table-wrapper {
|
|
15
|
+
overflow: auto;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
.guide-table {
|
|
19
|
+
width: 100%;
|
|
20
|
+
border-collapse: collapse;
|
|
21
|
+
margin-top: 0rem;
|
|
22
|
+
background: white;
|
|
23
|
+
font-size: 0.875rem;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
.guide-table th {
|
|
27
|
+
padding: 0.75rem;
|
|
28
|
+
padding-left: 0;
|
|
29
|
+
text-align: left;
|
|
30
|
+
font-weight: 600;
|
|
31
|
+
font-size: 0.75rem;
|
|
32
|
+
letter-spacing: 0.05em;
|
|
33
|
+
border-bottom: 1px solid #ddd;
|
|
34
|
+
position: sticky;
|
|
35
|
+
top: 0;
|
|
36
|
+
color: #919191;
|
|
37
|
+
|
|
38
|
+
z-index: 10;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
.guide-table td {
|
|
42
|
+
padding: 0.75rem;
|
|
43
|
+
padding-left: 0;
|
|
44
|
+
border-bottom: 1px solid #efefef;
|
|
45
|
+
vertical-align: middle;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
.guide-table tbody tr:hover {
|
|
49
|
+
background: #f9f9f9;
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
/* Estilos para nombres/identificadores */
|
|
53
|
+
.guide-table .guide-table-name {
|
|
54
|
+
font-weight: 600;
|
|
55
|
+
color: #000000;
|
|
56
|
+
font-family: arial;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
/* Estilos para valores */
|
|
60
|
+
.guide-table .guide-table-value {
|
|
61
|
+
font-family: arial;
|
|
62
|
+
color: #333;
|
|
63
|
+
font-size: 13px;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
/* Estilos para celdas cambiadas */
|
|
67
|
+
.guide-table td.guide-changed {
|
|
68
|
+
background: #d4edda !important;
|
|
69
|
+
border-left: 3px solid #28a745;
|
|
70
|
+
font-weight: 600;
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
/* Estilos específicos de tipografía */
|
|
74
|
+
.guide-table th.guide-mobile-header {
|
|
75
|
+
background: #e6f2ff;
|
|
76
|
+
color: #000000;
|
|
77
|
+
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
.guide-table th.guide-desktop-header {
|
|
81
|
+
background: #fff4e6;
|
|
82
|
+
color: #cc6600;
|
|
83
|
+
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
.guide-table .guide-sub-header th {
|
|
87
|
+
border-top: none;
|
|
88
|
+
border-bottom: 1px solid #ddd;
|
|
89
|
+
font-weight: 500;
|
|
90
|
+
font-size: 0.6875rem;
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
.guide-table .guide-preview-cell {
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
.guide-table .guide-typography-preview {
|
|
97
|
+
padding: 0.5rem;
|
|
98
|
+
font-size: inherit;
|
|
99
|
+
display: flex;
|
|
100
|
+
align-items: center;
|
|
101
|
+
justify-content: center;
|
|
102
|
+
min-height: 20px;
|
|
103
|
+
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
.guide-table .guide-mobile-value {
|
|
107
|
+
background: #f0f8ff;
|
|
108
|
+
color: #000000;
|
|
109
|
+
font-weight: 500;
|
|
110
|
+
|
|
111
|
+
font-family: arial;
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
.guide-table .guide-desktop-value {
|
|
115
|
+
background: #fff8f0;
|
|
116
|
+
color: #cc6600;
|
|
117
|
+
font-weight: 500;
|
|
118
|
+
|
|
119
|
+
font-family: arial;
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
.guide-table td.guide-mobile-value.guide-changed,
|
|
123
|
+
.guide-table td.guide-desktop-value.guide-changed {
|
|
124
|
+
background: #d4edda !important;
|
|
125
|
+
border-left: 3px solid #28a745;
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
/* Estilos para previews de fuente */
|
|
129
|
+
.guide-table .guide-font-family-preview {
|
|
130
|
+
min-width: 100px;
|
|
131
|
+
padding: 0.75rem;
|
|
132
|
+
min-height: 50px;
|
|
133
|
+
font-size: 1.5rem;
|
|
134
|
+
font-weight: 600;
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
/* Estilos para valores centrados con color */
|
|
138
|
+
.guide-table .guide-value-center-blue {
|
|
139
|
+
color: #000000;
|
|
140
|
+
font-weight: 500;
|
|
141
|
+
|
|
142
|
+
font-family: arial;
|
|
143
|
+
}
|
|
144
|
+
|
|
145
|
+
.guide-table .guide-value-center-orange {
|
|
146
|
+
color: #cc6600;
|
|
147
|
+
font-weight: 500;
|
|
148
|
+
|
|
149
|
+
font-family: arial;
|
|
150
|
+
}
|
|
151
|
+
|
|
152
|
+
/* Estilos para grid de colores */
|
|
153
|
+
.guide-colors-grid {
|
|
154
|
+
display: grid;
|
|
155
|
+
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
|
|
156
|
+
gap: 1.5rem;
|
|
157
|
+
margin-top: 2rem;
|
|
158
|
+
padding-inline: 0.5rem;
|
|
159
|
+
padding-bottom: 2rem;
|
|
160
|
+
}
|
|
161
|
+
|
|
162
|
+
.guide-color-card {
|
|
163
|
+
background: white;
|
|
164
|
+
border: 1px solid #efefef;
|
|
165
|
+
border-radius: 8px;
|
|
166
|
+
overflow: hidden;
|
|
167
|
+
transition: transform 0.2s, box-shadow 0.2s;
|
|
168
|
+
cursor: pointer;
|
|
169
|
+
}
|
|
170
|
+
|
|
171
|
+
.guide-color-card:hover {
|
|
172
|
+
transform: translateY(-2px);
|
|
173
|
+
box-shadow: 0 4px 12px rgba(0,0,0,0.1);
|
|
174
|
+
}
|
|
175
|
+
|
|
176
|
+
.guide-color-card:active {
|
|
177
|
+
transform: translateY(0);
|
|
178
|
+
}
|
|
179
|
+
|
|
180
|
+
.guide-color-var-name,
|
|
181
|
+
.guide-color-value {
|
|
182
|
+
cursor: pointer;
|
|
183
|
+
transition: background-color 0.2s;
|
|
184
|
+
}
|
|
185
|
+
|
|
186
|
+
.guide-color-var-name:hover,
|
|
187
|
+
.guide-color-value:hover {
|
|
188
|
+
background-color: #f0f0f0;
|
|
189
|
+
border-radius: 3px;
|
|
190
|
+
}
|
|
191
|
+
|
|
192
|
+
.guide-copyable {
|
|
193
|
+
cursor: pointer;
|
|
194
|
+
transition: background-color 0.2s;
|
|
195
|
+
position: relative;
|
|
196
|
+
}
|
|
197
|
+
|
|
198
|
+
.guide-copyable:hover {
|
|
199
|
+
background-color: #f0f0f0;
|
|
200
|
+
}
|
|
201
|
+
|
|
202
|
+
.guide-copyable:active {
|
|
203
|
+
background-color: #efefef;
|
|
204
|
+
}
|
|
205
|
+
|
|
206
|
+
/* Estilos para helpers de layout */
|
|
207
|
+
.guide-layout-class-name {
|
|
208
|
+
font-weight: 600;
|
|
209
|
+
color: #000000;
|
|
210
|
+
font-family: arial;
|
|
211
|
+
}
|
|
212
|
+
|
|
213
|
+
.guide-layout-property {
|
|
214
|
+
color: #666;
|
|
215
|
+
font-family: arial;
|
|
216
|
+
font-size: 13px;
|
|
217
|
+
}
|
|
218
|
+
|
|
219
|
+
.guide-color-preview {
|
|
220
|
+
width: 100%;
|
|
221
|
+
height: 120px;
|
|
222
|
+
border-bottom: 1px solid #efefef;
|
|
223
|
+
position: relative;
|
|
224
|
+
background-color: var(--color-value);
|
|
225
|
+
}
|
|
226
|
+
|
|
227
|
+
.guide-color-pattern {
|
|
228
|
+
position: absolute;
|
|
229
|
+
top: 0;
|
|
230
|
+
left: 0;
|
|
231
|
+
right: 0;
|
|
232
|
+
bottom: 0;
|
|
233
|
+
background-image: repeating-linear-gradient(45deg, transparent, transparent 10px, rgba(0,0,0,0.05) 10px, rgba(0,0,0,0.05) 20px);
|
|
234
|
+
pointer-events: none;
|
|
235
|
+
mix-blend-mode: overlay;
|
|
236
|
+
}
|
|
237
|
+
|
|
238
|
+
.guide-color-card-content {
|
|
239
|
+
padding: 1rem;
|
|
240
|
+
}
|
|
241
|
+
|
|
242
|
+
.guide-color-name {
|
|
243
|
+
font-weight: 600;
|
|
244
|
+
font-size: 0.875rem;
|
|
245
|
+
margin-bottom: 0.5rem;
|
|
246
|
+
color: #000;
|
|
247
|
+
}
|
|
248
|
+
|
|
249
|
+
.guide-color-var-name {
|
|
250
|
+
font-size: 11px;
|
|
251
|
+
color: #666;
|
|
252
|
+
margin-bottom: 0.5rem;
|
|
253
|
+
font-family: arial;
|
|
254
|
+
word-break: break-all;
|
|
255
|
+
}
|
|
256
|
+
|
|
257
|
+
.guide-color-value {
|
|
258
|
+
font-size: 0.75rem;
|
|
259
|
+
color: #666;
|
|
260
|
+
font-family: arial;
|
|
261
|
+
}
|
|
262
|
+
|
|
263
|
+
.guide-color-value.guide-changed {
|
|
264
|
+
background: #d4edda;
|
|
265
|
+
padding: 0.25rem 0.5rem;
|
|
266
|
+
border-radius: 4px;
|
|
267
|
+
}
|
|
268
|
+
|
|
269
|
+
/* Estilos para sidebar header */
|
|
270
|
+
.guide-sidebar-meta {
|
|
271
|
+
font-size: 0.75rem;
|
|
272
|
+
opacity: 0.6;
|
|
273
|
+
margin-top: 0.5rem;
|
|
274
|
+
}
|
|
275
|
+
|
|
276
|
+
.guide-sidebar-meta-small {
|
|
277
|
+
font-size: 0.75rem;
|
|
278
|
+
opacity: 0.6;
|
|
279
|
+
margin-top: 0.25rem;
|
|
280
|
+
}
|
|
281
|
+
|
|
282
|
+
/* Estilos para búsqueda */
|
|
283
|
+
.guide-search-container {
|
|
284
|
+
position: relative;
|
|
285
|
+
max-width: 500px;
|
|
286
|
+
padding-inline-start: 3rem;
|
|
287
|
+
}
|
|
288
|
+
|
|
289
|
+
.guide-search-input {
|
|
290
|
+
width: 100%;
|
|
291
|
+
padding: 0.75rem 1rem 0.75rem 2.75rem;
|
|
292
|
+
border: 2px solid #efefef;
|
|
293
|
+
border-radius: 8px;
|
|
294
|
+
font-size: 1rem;
|
|
295
|
+
outline: none;
|
|
296
|
+
transition: border-color 0.2s;
|
|
297
|
+
}
|
|
298
|
+
|
|
299
|
+
.guide-search-input:focus {
|
|
300
|
+
border-color: #0170e9;
|
|
301
|
+
}
|
|
302
|
+
|
|
303
|
+
.guide-search-icon {
|
|
304
|
+
position: absolute;
|
|
305
|
+
left: 0.875rem;
|
|
306
|
+
top: 50%;
|
|
307
|
+
transform: translateY(-50%);
|
|
308
|
+
color: #999;
|
|
309
|
+
pointer-events: none;
|
|
310
|
+
}
|
|
311
|
+
.guide-logo{
|
|
312
|
+
width: 234px;
|
|
313
|
+
|
|
314
|
+
font-size: 24px;
|
|
315
|
+
font-weight: 700;
|
|
316
|
+
color: #000;
|
|
317
|
+
text-transform: uppercase;
|
|
318
|
+
|
|
319
|
+
line-height: 1;
|
|
320
|
+
|
|
321
|
+
}
|
|
322
|
+
|
|
323
|
+
.guide-clear-search-btn {
|
|
324
|
+
position: absolute;
|
|
325
|
+
right: 0.5rem;
|
|
326
|
+
top: 50%;
|
|
327
|
+
transform: translateY(-50%);
|
|
328
|
+
background: none;
|
|
329
|
+
border: none;
|
|
330
|
+
color: #999;
|
|
331
|
+
cursor: pointer;
|
|
332
|
+
padding: 0.25rem;
|
|
333
|
+
display: none;
|
|
334
|
+
font-size: 1.25rem;
|
|
335
|
+
line-height: 1;
|
|
336
|
+
}
|
|
337
|
+
|
|
338
|
+
.guide-search-results {
|
|
339
|
+
margin-top: 0.5rem;
|
|
340
|
+
font-size: 0.875rem;
|
|
341
|
+
color: #666;
|
|
342
|
+
display: none;
|
|
343
|
+
}
|
|
344
|
+
|
|
345
|
+
/* Estilos para secciones */
|
|
346
|
+
.guide-section-description {
|
|
347
|
+
margin-top: 1rem;
|
|
348
|
+
font-size: 18px;
|
|
349
|
+
line-height: 26px;
|
|
350
|
+
}
|
|
351
|
+
|
|
352
|
+
/* Estilos para info boxes */
|
|
353
|
+
.guide-info-box {
|
|
354
|
+
margin-bottom: 2rem;
|
|
355
|
+
padding: 1.5rem 0;
|
|
356
|
+
|
|
357
|
+
}
|
|
358
|
+
|
|
359
|
+
.guide-info-box-warning {
|
|
360
|
+
|
|
361
|
+
}
|
|
362
|
+
|
|
363
|
+
.guide-info-box-info {
|
|
364
|
+
|
|
365
|
+
}
|
|
366
|
+
|
|
367
|
+
.guide-info-box-title {
|
|
368
|
+
margin: 0 0 1rem 0;
|
|
369
|
+
font-size: 1.125rem;
|
|
370
|
+
font-weight: 700;
|
|
371
|
+
}
|
|
372
|
+
|
|
373
|
+
.guide-info-box-title-warning {
|
|
374
|
+
color: #ff9800;
|
|
375
|
+
}
|
|
376
|
+
|
|
377
|
+
.guide-info-box-title-info {
|
|
378
|
+
color: #0170e9;
|
|
379
|
+
}
|
|
380
|
+
|
|
381
|
+
.guide-info-box-text {
|
|
382
|
+
margin: 0 0 0.75rem 0;
|
|
383
|
+
line-height: 1.6;
|
|
384
|
+
}
|
|
385
|
+
|
|
386
|
+
.guide-info-box-list {
|
|
387
|
+
margin: 0 0 0.75rem 0;
|
|
388
|
+
padding-top: 1.5rem;
|
|
389
|
+
line-height: 1.8;
|
|
390
|
+
}
|
|
391
|
+
|
|
392
|
+
.guide-info-box-list-item {
|
|
393
|
+
margin-bottom: 0.5rem;
|
|
394
|
+
}
|
|
395
|
+
|
|
396
|
+
.guide-info-box-code {
|
|
397
|
+
background: #fff8f0;
|
|
398
|
+
padding: 0.125rem 0.375rem;
|
|
399
|
+
border-radius: 3px;
|
|
400
|
+
font-family: arial;
|
|
401
|
+
font-size: 0.875rem;
|
|
402
|
+
}
|
|
403
|
+
|
|
404
|
+
.guide-info-box-code-info {
|
|
405
|
+
background: #e6f2ff;
|
|
406
|
+
padding: 0.125rem 0.375rem;
|
|
407
|
+
border-radius: 3px;
|
|
408
|
+
font-family: arial;
|
|
409
|
+
font-size: 0.875rem;
|
|
410
|
+
}
|
|
411
|
+
|
|
412
|
+
.guide-info-box-text-small {
|
|
413
|
+
margin: 0;
|
|
414
|
+
line-height: 1.6;
|
|
415
|
+
font-size: 0.875rem;
|
|
416
|
+
opacity: 0.8;
|
|
417
|
+
}
|
|
418
|
+
|
|
419
|
+
.guide-info-box-margin-top {
|
|
420
|
+
margin-top: 2rem;
|
|
421
|
+
}
|
|
422
|
+
|
|
423
|
+
.guide-search-highlight {
|
|
424
|
+
background: #ffeb3b;
|
|
425
|
+
padding: 0.125rem 0.25rem;
|
|
426
|
+
border-radius: 3px;
|
|
427
|
+
}
|
|
428
|
+
|
|
429
|
+
.guide-code-example {
|
|
430
|
+
background: #f5f5f5;
|
|
431
|
+
padding: 1rem;
|
|
432
|
+
border-radius: 4px;
|
|
433
|
+
overflow-x: auto;
|
|
434
|
+
font-family: arial;
|
|
435
|
+
font-size: 12px;
|
|
436
|
+
}
|
|
437
|
+
|
|
438
|
+
/* Estilos generales */
|
|
439
|
+
* {
|
|
440
|
+
scroll-behavior: smooth;
|
|
441
|
+
}
|
|
442
|
+
|
|
443
|
+
body {
|
|
444
|
+
font-family: var(--hg-typo-font-family-primary);
|
|
445
|
+
margin: 0;
|
|
446
|
+
padding: 0;
|
|
447
|
+
|
|
448
|
+
}
|
|
449
|
+
|
|
450
|
+
.guide-sidebar {
|
|
451
|
+
position: fixed;
|
|
452
|
+
left: 0;
|
|
453
|
+
top: 80px;
|
|
454
|
+
width: 250px;
|
|
455
|
+
height: calc(100vh - 80px);
|
|
456
|
+
background: white;
|
|
457
|
+
border-right: 1px solid #efefef;
|
|
458
|
+
padding: 2rem 0;
|
|
459
|
+
padding-bottom: 120px;
|
|
460
|
+
overflow-y: auto;
|
|
461
|
+
z-index: 100;
|
|
462
|
+
padding-left 200px
|
|
463
|
+
|
|
464
|
+
}
|
|
465
|
+
|
|
466
|
+
.guide-sidebar-header {
|
|
467
|
+
padding: 0 1.5rem 2rem 1.5rem;
|
|
468
|
+
border-bottom: 1px solid #efefef;
|
|
469
|
+
margin-bottom: 1rem;
|
|
470
|
+
}
|
|
471
|
+
|
|
472
|
+
.guide-sidebar-header h2 {
|
|
473
|
+
margin: 0;
|
|
474
|
+
font-size: 1.25rem;
|
|
475
|
+
font-weight: 700;
|
|
476
|
+
color: #000;
|
|
477
|
+
}
|
|
478
|
+
|
|
479
|
+
.guide-sidebar-nav {
|
|
480
|
+
padding: 0 ;
|
|
481
|
+
}
|
|
482
|
+
|
|
483
|
+
.guide-sidebar-footer {
|
|
484
|
+
position: absolute;
|
|
485
|
+
bottom: 0;
|
|
486
|
+
left: 0;
|
|
487
|
+
right: 0;
|
|
488
|
+
padding: 1rem 1.5rem .5rem 1.5rem;
|
|
489
|
+
border-top: 1px solid #efefef;
|
|
490
|
+
background: white;
|
|
491
|
+
}
|
|
492
|
+
|
|
493
|
+
.guide-sidebar-badges {
|
|
494
|
+
display: flex;
|
|
495
|
+
flex-direction: column;
|
|
496
|
+
gap: 0.5rem;
|
|
497
|
+
align-items: flex-start;
|
|
498
|
+
}
|
|
499
|
+
|
|
500
|
+
.guide-sidebar-badges img {
|
|
501
|
+
height: 20px;
|
|
502
|
+
width: auto;
|
|
503
|
+
}
|
|
504
|
+
|
|
505
|
+
.guide-menu-item {
|
|
506
|
+
display: block;
|
|
507
|
+
padding: 0.75rem 1rem;
|
|
508
|
+
margin-bottom: 0.25rem;
|
|
509
|
+
color: #666;
|
|
510
|
+
text-decoration: none;
|
|
511
|
+
|
|
512
|
+
transition: all 0.2s ease;
|
|
513
|
+
font-size: 0.875rem;
|
|
514
|
+
font-weight: 500;
|
|
515
|
+
}
|
|
516
|
+
|
|
517
|
+
.guide-menu-item:hover {
|
|
518
|
+
background: #f0f0f0;
|
|
519
|
+
color: #000;
|
|
520
|
+
}
|
|
521
|
+
|
|
522
|
+
.guide-menu-item.active {
|
|
523
|
+
color: black;
|
|
524
|
+
}
|
|
525
|
+
|
|
526
|
+
.guide-main-content {
|
|
527
|
+
margin-left: 250px;
|
|
528
|
+
flex: 1;
|
|
529
|
+
padding: 0;
|
|
530
|
+
padding-bottom: 10rem;
|
|
531
|
+
max-width: calc(100% - 250px);
|
|
532
|
+
}
|
|
533
|
+
|
|
534
|
+
.guide-menu-toggle {
|
|
535
|
+
display: none;
|
|
536
|
+
position: fixed;
|
|
537
|
+
top: 1rem;
|
|
538
|
+
left: 1rem;
|
|
539
|
+
z-index: 101;
|
|
540
|
+
background: white;
|
|
541
|
+
border: 1px solid #efefef;
|
|
542
|
+
padding: 0.5rem 0.75rem;
|
|
543
|
+
border-radius: 4px;
|
|
544
|
+
cursor: pointer;
|
|
545
|
+
font-size: 1.25rem;
|
|
546
|
+
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
|
547
|
+
}
|
|
548
|
+
|
|
549
|
+
@media (max-width: 768px) {
|
|
550
|
+
.guide-sidebar {
|
|
551
|
+
transform: translateX(-100%);
|
|
552
|
+
transition: transform 0.3s ease;
|
|
553
|
+
}
|
|
554
|
+
|
|
555
|
+
.guide-sidebar.open {
|
|
556
|
+
transform: translateX(0);
|
|
557
|
+
}
|
|
558
|
+
|
|
559
|
+
.guide-main-content {
|
|
560
|
+
margin-left: 0;
|
|
561
|
+
max-width: 100%;
|
|
562
|
+
padding: 1rem 0;
|
|
563
|
+
}
|
|
564
|
+
|
|
565
|
+
.guide-menu-toggle {
|
|
566
|
+
display: block;
|
|
567
|
+
}
|
|
568
|
+
}
|
|
569
|
+
|
|
570
|
+
.guide-header {
|
|
571
|
+
height: 80px;
|
|
572
|
+
position: sticky;
|
|
573
|
+
top: 0;
|
|
574
|
+
z-index: 50;
|
|
575
|
+
background: white;
|
|
576
|
+
|
|
577
|
+
padding: 1rem;
|
|
578
|
+
border-bottom: 1px solid #efefef;
|
|
579
|
+
display: flex;
|
|
580
|
+
align-items: center;
|
|
581
|
+
justify-content: space-between;
|
|
582
|
+
}
|
|
583
|
+
|
|
584
|
+
.guide-header h1 {
|
|
585
|
+
margin: 0;
|
|
586
|
+
font-size: 2.5rem;
|
|
587
|
+
font-weight: 900;
|
|
588
|
+
}
|
|
589
|
+
|
|
590
|
+
.guide-header p {
|
|
591
|
+
margin: 1rem 0 0 0;
|
|
592
|
+
opacity: 0.7;
|
|
593
|
+
}
|
|
594
|
+
.guide-container{
|
|
595
|
+
|
|
596
|
+
padding-right: 40px;
|
|
597
|
+
width: 1236px;
|
|
598
|
+
margin: 0 auto;
|
|
599
|
+
}
|
|
600
|
+
|
|
601
|
+
.guide-section {
|
|
602
|
+
background: white;
|
|
603
|
+
padding: 0rem;
|
|
604
|
+
border-radius: 8px;
|
|
605
|
+
}
|
|
606
|
+
|
|
607
|
+
.guide-section-title {
|
|
608
|
+
font-size: 1.5rem;
|
|
609
|
+
font-weight: 700;
|
|
610
|
+
padding-top: 6rem;
|
|
611
|
+
padding-bottom: 2rem;
|
|
612
|
+
|
|
613
|
+
letter-spacing: -0.02em;
|
|
614
|
+
}
|
|
615
|
+
|
|
616
|
+
|
|
617
|
+
|
|
618
|
+
.guide-section-content > .guide-table-wrapper {
|
|
619
|
+
|
|
620
|
+
}
|
|
621
|
+
|
|
622
|
+
.guide-section.guide-section--highlighted {
|
|
623
|
+
background: #fff;
|
|
624
|
+
}
|
|
625
|
+
|
|
626
|
+
/* Estilos para diagrama de spacing */
|
|
627
|
+
.guide-spacing-diagram {
|
|
628
|
+
width: 50%;
|
|
629
|
+
|
|
630
|
+
|
|
631
|
+
border-radius: 8px;
|
|
632
|
+
display: flex;
|
|
633
|
+
justify-content: center;
|
|
634
|
+
align-items: center;
|
|
635
|
+
position: relative;
|
|
636
|
+
}
|
|
637
|
+
.guide-spacing-text{
|
|
638
|
+
width: 50%;
|
|
639
|
+
}
|
|
640
|
+
|
|
641
|
+
.guide-spacing-diagram-container {
|
|
642
|
+
position: relative;
|
|
643
|
+
width: 100%;
|
|
644
|
+
max-width: 400px;
|
|
645
|
+
height: 300px;
|
|
646
|
+
}
|
|
647
|
+
|
|
648
|
+
.guide-spacing-margin-box {
|
|
649
|
+
position: absolute;
|
|
650
|
+
top: 50%;
|
|
651
|
+
left: 50%;
|
|
652
|
+
transform: translate(-50%, -50%);
|
|
653
|
+
width: 80%;
|
|
654
|
+
height: 70%;
|
|
655
|
+
border: 3px dashed #ff9800;
|
|
656
|
+
background: rgba(255, 152, 0, 0.05);
|
|
657
|
+
border-radius: 4px;
|
|
658
|
+
}
|
|
659
|
+
|
|
660
|
+
.guide-spacing-padding-box {
|
|
661
|
+
position: absolute;
|
|
662
|
+
top: 50%;
|
|
663
|
+
left: 50%;
|
|
664
|
+
transform: translate(-50%, -50%);
|
|
665
|
+
width: 60%;
|
|
666
|
+
height: 50%;
|
|
667
|
+
border: 3px dashed #0170e9;
|
|
668
|
+
background: rgba(1, 112, 233, 0.05);
|
|
669
|
+
border-radius: 4px;
|
|
670
|
+
}
|
|
671
|
+
|
|
672
|
+
.guide-spacing-content {
|
|
673
|
+
position: absolute;
|
|
674
|
+
top: 50%;
|
|
675
|
+
left: 50%;
|
|
676
|
+
transform: translate(-50%, -50%);
|
|
677
|
+
width: 40%;
|
|
678
|
+
height: 30%;
|
|
679
|
+
background: #333;
|
|
680
|
+
border-radius: 4px;
|
|
681
|
+
display: flex;
|
|
682
|
+
align-items: center;
|
|
683
|
+
justify-content: center;
|
|
684
|
+
color: white;
|
|
685
|
+
font-size: 0.75rem;
|
|
686
|
+
font-weight: 600;
|
|
687
|
+
}
|
|
688
|
+
|
|
689
|
+
.guide-spacing-label {
|
|
690
|
+
position: absolute;
|
|
691
|
+
font-size: 0.875rem;
|
|
692
|
+
font-weight: 600;
|
|
693
|
+
font-family: arial;
|
|
694
|
+
color: #333;
|
|
695
|
+
background: white;
|
|
696
|
+
padding: 0.25rem 0.5rem;
|
|
697
|
+
border-radius: 4px;
|
|
698
|
+
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
|
699
|
+
white-space: nowrap;
|
|
700
|
+
}
|
|
701
|
+
|
|
702
|
+
.guide-spacing-label-top {
|
|
703
|
+
top: 0;
|
|
704
|
+
left: 50%;
|
|
705
|
+
transform: translateX(-50%);
|
|
706
|
+
}
|
|
707
|
+
|
|
708
|
+
.guide-spacing-label-bottom {
|
|
709
|
+
bottom: 0;
|
|
710
|
+
left: 50%;
|
|
711
|
+
transform: translateX(-50%);
|
|
712
|
+
}
|
|
713
|
+
|
|
714
|
+
.guide-spacing-label-left {
|
|
715
|
+
left: 0;
|
|
716
|
+
top: 50%;
|
|
717
|
+
transform: translateY(-50%);
|
|
718
|
+
}
|
|
719
|
+
|
|
720
|
+
.guide-spacing-label-right {
|
|
721
|
+
right: 0;
|
|
722
|
+
top: 50%;
|
|
723
|
+
transform: translateY(-50%);
|
|
724
|
+
}
|
|
725
|
+
|
|
726
|
+
.guide-spacing-label-margin {
|
|
727
|
+
color: #ff9800;
|
|
728
|
+
}
|
|
729
|
+
|
|
730
|
+
.guide-spacing-label-padding {
|
|
731
|
+
color: #0170e9;
|
|
732
|
+
}
|
|
733
|
+
|
|
734
|
+
.guide-spacing-label-padding-top {
|
|
735
|
+
top: 15%;
|
|
736
|
+
left: 50%;
|
|
737
|
+
transform: translateX(-50%);
|
|
738
|
+
}
|
|
739
|
+
|
|
740
|
+
.guide-spacing-label-padding-right {
|
|
741
|
+
right: 10%;
|
|
742
|
+
top: 50%;
|
|
743
|
+
transform: translateY(-50%);
|
|
744
|
+
}
|
|
745
|
+
|
|
746
|
+
.guide-spacing-label-padding-bottom {
|
|
747
|
+
bottom: 15%;
|
|
748
|
+
left: 50%;
|
|
749
|
+
transform: translateX(-50%);
|
|
750
|
+
}
|
|
751
|
+
|
|
752
|
+
.guide-spacing-label-padding-left {
|
|
753
|
+
left: 10%;
|
|
754
|
+
top: 50%;
|
|
755
|
+
transform: translateY(-50%);
|
|
756
|
+
}
|
|
757
|
+
</style>
|
|
758
|
+
</head>
|
|
759
|
+
<body>
|
|
760
|
+
<button class="guide-menu-toggle" onclick="document.querySelector('.guide-sidebar').classList.toggle('open')">☰</button>
|
|
761
|
+
|
|
762
|
+
<aside class="guide-sidebar">
|
|
763
|
+
|
|
764
|
+
|
|
765
|
+
<nav class="guide-sidebar-nav">
|
|
766
|
+
|
|
767
|
+
<a href="#colors" class="guide-menu-item" data-section="colors">Colores</a>
|
|
768
|
+
|
|
769
|
+
<a href="#font-families" class="guide-menu-item" data-section="font-families">Font Families</a>
|
|
770
|
+
|
|
771
|
+
<a href="#tipografia" class="guide-menu-item" data-section="tipografia">Tipografía</a>
|
|
772
|
+
|
|
773
|
+
<a href="#variables" class="guide-menu-item" data-section="variables">Variables CSS</a>
|
|
774
|
+
|
|
775
|
+
<a href="#spacing" class="guide-menu-item" data-section="spacing">Helpers de Spacing</a>
|
|
776
|
+
|
|
777
|
+
<a href="#layout" class="guide-menu-item" data-section="layout">Helpers de Layout</a>
|
|
778
|
+
|
|
779
|
+
<a href="#grid" class="guide-menu-item" data-section="grid">Grid System</a>
|
|
780
|
+
|
|
781
|
+
<a href="#breakpoints" class="guide-menu-item" data-section="breakpoints">Breakpoints</a>
|
|
782
|
+
|
|
783
|
+
|
|
784
|
+
<hr style="margin: 1rem 0; border: none; border-top: 1px solid #ddd;">
|
|
785
|
+
|
|
786
|
+
<a href="themes/dutti-demo.html" class="guide-menu-item" style="color: #0066cc; font-weight: 600;">🎨 Demo Tema Dutti</a>
|
|
787
|
+
|
|
788
|
+
</nav>
|
|
789
|
+
|
|
790
|
+
<div class="guide-sidebar-footer">
|
|
791
|
+
<div class="guide-sidebar-badges">
|
|
792
|
+
<a href="https://www.npmjs.com/package/holygrail5" target="_blank" rel="noopener noreferrer">
|
|
793
|
+
<img src="https://img.shields.io/npm/v/holygrail5.svg" alt="npm version" />
|
|
794
|
+
</a>
|
|
795
|
+
|
|
796
|
+
</div>
|
|
797
|
+
|
|
798
|
+
<p class="text-m guide-sidebar-meta">
|
|
799
|
+
last update: 1/12/2025, 11:22:48
|
|
800
|
+
</p>
|
|
801
|
+
|
|
802
|
+
|
|
803
|
+
<p class="text-s guide-sidebar-meta-small">
|
|
804
|
+
Last user: pabloblop
|
|
805
|
+
</p>
|
|
806
|
+
|
|
807
|
+
</div>
|
|
808
|
+
</aside>
|
|
809
|
+
|
|
810
|
+
<div class="guide-header">
|
|
811
|
+
|
|
812
|
+
<div class="guide-logo">
|
|
813
|
+
HOLYGRAIL 5
|
|
814
|
+
</div>
|
|
815
|
+
|
|
816
|
+
<div class="guide-search-container">
|
|
817
|
+
<input
|
|
818
|
+
type="text"
|
|
819
|
+
id="search-input"
|
|
820
|
+
class="guide-search-input"
|
|
821
|
+
placeholder="Buscar clases, variables, helpers..."
|
|
822
|
+
autocomplete="off"
|
|
823
|
+
/>
|
|
824
|
+
<svg
|
|
825
|
+
class="guide-search-icon"
|
|
826
|
+
width="20"
|
|
827
|
+
height="20"
|
|
828
|
+
viewBox="0 0 24 24"
|
|
829
|
+
fill="none"
|
|
830
|
+
stroke="currentColor"
|
|
831
|
+
stroke-width="2"
|
|
832
|
+
>
|
|
833
|
+
<circle cx="11" cy="11" r="8"></circle>
|
|
834
|
+
<path d="m21 21-4.35-4.35"></path>
|
|
835
|
+
</svg>
|
|
836
|
+
<button
|
|
837
|
+
id="clear-search"
|
|
838
|
+
class="guide-clear-search-btn"
|
|
839
|
+
title="Limpiar búsqueda"
|
|
840
|
+
>×</button>
|
|
841
|
+
</div>
|
|
842
|
+
<div id="search-results" class="guide-search-results"></div>
|
|
843
|
+
</div>
|
|
844
|
+
</div>
|
|
845
|
+
|
|
846
|
+
<main class="guide-main-content">
|
|
847
|
+
|
|
848
|
+
|
|
849
|
+
|
|
850
|
+
<div class="guide-container">
|
|
851
|
+
|
|
852
|
+
<div class="guide-section guide-section--highlighted" id="colors">
|
|
853
|
+
<div class="guide-section-title">
|
|
854
|
+
<h2 >Colores</h2>
|
|
855
|
+
<p class="text-m guide-section-description">
|
|
856
|
+
Paleta de colores disponibles con sus variables CSS.
|
|
857
|
+
</p>
|
|
858
|
+
</div>
|
|
859
|
+
<div class="guide-section-content">
|
|
860
|
+
|
|
861
|
+
<div class="guide-colors-grid">
|
|
862
|
+
|
|
863
|
+
<div class="guide-color-card" data-copy-value="--hg-color-white" title="Click para copiar --hg-color-white">
|
|
864
|
+
<div class="guide-color-preview" style="--color-value: #ffffff;">
|
|
865
|
+
<div class="guide-color-pattern"></div>
|
|
866
|
+
</div>
|
|
867
|
+
<div class="guide-color-card-content">
|
|
868
|
+
<div class="guide-color-name">white</div>
|
|
869
|
+
<div class="guide-color-var-name" data-copy-value="--hg-color-white" title="Click para copiar --hg-color-white">--hg-color-white</div>
|
|
870
|
+
<div class="guide-color-value " data-copy-value="#ffffff" title="Click para copiar #ffffff">#ffffff</div>
|
|
871
|
+
</div>
|
|
872
|
+
</div>
|
|
873
|
+
<div class="guide-color-card" data-copy-value="--hg-color-black" title="Click para copiar --hg-color-black">
|
|
874
|
+
<div class="guide-color-preview" style="--color-value: #000000;">
|
|
875
|
+
|
|
876
|
+
</div>
|
|
877
|
+
<div class="guide-color-card-content">
|
|
878
|
+
<div class="guide-color-name">black</div>
|
|
879
|
+
<div class="guide-color-var-name" data-copy-value="--hg-color-black" title="Click para copiar --hg-color-black">--hg-color-black</div>
|
|
880
|
+
<div class="guide-color-value " data-copy-value="#000000" title="Click para copiar #000000">#000000</div>
|
|
881
|
+
</div>
|
|
882
|
+
</div>
|
|
883
|
+
<div class="guide-color-card" data-copy-value="--hg-color-dark-grey" title="Click para copiar --hg-color-dark-grey">
|
|
884
|
+
<div class="guide-color-preview" style="--color-value: #737373;">
|
|
885
|
+
|
|
886
|
+
</div>
|
|
887
|
+
<div class="guide-color-card-content">
|
|
888
|
+
<div class="guide-color-name">dark-grey</div>
|
|
889
|
+
<div class="guide-color-var-name" data-copy-value="--hg-color-dark-grey" title="Click para copiar --hg-color-dark-grey">--hg-color-dark-grey</div>
|
|
890
|
+
<div class="guide-color-value " data-copy-value="#737373" title="Click para copiar #737373">#737373</div>
|
|
891
|
+
</div>
|
|
892
|
+
</div>
|
|
893
|
+
<div class="guide-color-card" data-copy-value="--hg-color-middle-grey" title="Click para copiar --hg-color-middle-grey">
|
|
894
|
+
<div class="guide-color-preview" style="--color-value: #a9a9a9;">
|
|
895
|
+
|
|
896
|
+
</div>
|
|
897
|
+
<div class="guide-color-card-content">
|
|
898
|
+
<div class="guide-color-name">middle-grey</div>
|
|
899
|
+
<div class="guide-color-var-name" data-copy-value="--hg-color-middle-grey" title="Click para copiar --hg-color-middle-grey">--hg-color-middle-grey</div>
|
|
900
|
+
<div class="guide-color-value " data-copy-value="#a9a9a9" title="Click para copiar #a9a9a9">#a9a9a9</div>
|
|
901
|
+
</div>
|
|
902
|
+
</div>
|
|
903
|
+
<div class="guide-color-card" data-copy-value="--hg-color-light-grey" title="Click para copiar --hg-color-light-grey">
|
|
904
|
+
<div class="guide-color-preview" style="--color-value: #f0f0f0;">
|
|
905
|
+
<div class="guide-color-pattern"></div>
|
|
906
|
+
</div>
|
|
907
|
+
<div class="guide-color-card-content">
|
|
908
|
+
<div class="guide-color-name">light-grey</div>
|
|
909
|
+
<div class="guide-color-var-name" data-copy-value="--hg-color-light-grey" title="Click para copiar --hg-color-light-grey">--hg-color-light-grey</div>
|
|
910
|
+
<div class="guide-color-value " data-copy-value="#f0f0f0" title="Click para copiar #f0f0f0">#f0f0f0</div>
|
|
911
|
+
</div>
|
|
912
|
+
</div>
|
|
913
|
+
<div class="guide-color-card" data-copy-value="--hg-color-primary" title="Click para copiar --hg-color-primary">
|
|
914
|
+
<div class="guide-color-preview" style="--color-value: #000000;">
|
|
915
|
+
|
|
916
|
+
</div>
|
|
917
|
+
<div class="guide-color-card-content">
|
|
918
|
+
<div class="guide-color-name">primary</div>
|
|
919
|
+
<div class="guide-color-var-name" data-copy-value="--hg-color-primary" title="Click para copiar --hg-color-primary">--hg-color-primary</div>
|
|
920
|
+
<div class="guide-color-value " data-copy-value="#000000" title="Click para copiar #000000">#000000</div>
|
|
921
|
+
</div>
|
|
922
|
+
</div>
|
|
923
|
+
<div class="guide-color-card" data-copy-value="--hg-color-error" title="Click para copiar --hg-color-error">
|
|
924
|
+
<div class="guide-color-preview" style="--color-value: #b40016;">
|
|
925
|
+
|
|
926
|
+
</div>
|
|
927
|
+
<div class="guide-color-card-content">
|
|
928
|
+
<div class="guide-color-name">error</div>
|
|
929
|
+
<div class="guide-color-var-name" data-copy-value="--hg-color-error" title="Click para copiar --hg-color-error">--hg-color-error</div>
|
|
930
|
+
<div class="guide-color-value " data-copy-value="#b40016" title="Click para copiar #b40016">#b40016</div>
|
|
931
|
+
</div>
|
|
932
|
+
</div>
|
|
933
|
+
<div class="guide-color-card" data-copy-value="--hg-color-info" title="Click para copiar --hg-color-info">
|
|
934
|
+
<div class="guide-color-preview" style="--color-value: #1a32a4;">
|
|
935
|
+
|
|
936
|
+
</div>
|
|
937
|
+
<div class="guide-color-card-content">
|
|
938
|
+
<div class="guide-color-name">info</div>
|
|
939
|
+
<div class="guide-color-var-name" data-copy-value="--hg-color-info" title="Click para copiar --hg-color-info">--hg-color-info</div>
|
|
940
|
+
<div class="guide-color-value " data-copy-value="#1a32a4" title="Click para copiar #1a32a4">#1a32a4</div>
|
|
941
|
+
</div>
|
|
942
|
+
</div>
|
|
943
|
+
<div class="guide-color-card" data-copy-value="--hg-color-success" title="Click para copiar --hg-color-success">
|
|
944
|
+
<div class="guide-color-preview" style="--color-value: #76ae4a;">
|
|
945
|
+
|
|
946
|
+
</div>
|
|
947
|
+
<div class="guide-color-card-content">
|
|
948
|
+
<div class="guide-color-name">success</div>
|
|
949
|
+
<div class="guide-color-var-name" data-copy-value="--hg-color-success" title="Click para copiar --hg-color-success">--hg-color-success</div>
|
|
950
|
+
<div class="guide-color-value " data-copy-value="#76ae4a" title="Click para copiar #76ae4a">#76ae4a</div>
|
|
951
|
+
</div>
|
|
952
|
+
</div>
|
|
953
|
+
<div class="guide-color-card" data-copy-value="--hg-color-warning" title="Click para copiar --hg-color-warning">
|
|
954
|
+
<div class="guide-color-preview" style="--color-value: #ffc700;">
|
|
955
|
+
|
|
956
|
+
</div>
|
|
957
|
+
<div class="guide-color-card-content">
|
|
958
|
+
<div class="guide-color-name">warning</div>
|
|
959
|
+
<div class="guide-color-var-name" data-copy-value="--hg-color-warning" title="Click para copiar --hg-color-warning">--hg-color-warning</div>
|
|
960
|
+
<div class="guide-color-value " data-copy-value="#ffc700" title="Click para copiar #ffc700">#ffc700</div>
|
|
961
|
+
</div>
|
|
962
|
+
</div>
|
|
963
|
+
<div class="guide-color-card" data-copy-value="--hg-color-feel" title="Click para copiar --hg-color-feel">
|
|
964
|
+
<div class="guide-color-preview" style="--color-value: #fb9962;">
|
|
965
|
+
|
|
966
|
+
</div>
|
|
967
|
+
<div class="guide-color-card-content">
|
|
968
|
+
<div class="guide-color-name">feel</div>
|
|
969
|
+
<div class="guide-color-var-name" data-copy-value="--hg-color-feel" title="Click para copiar --hg-color-feel">--hg-color-feel</div>
|
|
970
|
+
<div class="guide-color-value " data-copy-value="#fb9962" title="Click para copiar #fb9962">#fb9962</div>
|
|
971
|
+
</div>
|
|
972
|
+
</div>
|
|
973
|
+
<div class="guide-color-card" data-copy-value="--hg-color-feel-dark" title="Click para copiar --hg-color-feel-dark">
|
|
974
|
+
<div class="guide-color-preview" style="--color-value: #c94c07;">
|
|
975
|
+
|
|
976
|
+
</div>
|
|
977
|
+
<div class="guide-color-card-content">
|
|
978
|
+
<div class="guide-color-name">feel-dark</div>
|
|
979
|
+
<div class="guide-color-var-name" data-copy-value="--hg-color-feel-dark" title="Click para copiar --hg-color-feel-dark">--hg-color-feel-dark</div>
|
|
980
|
+
<div class="guide-color-value " data-copy-value="#c94c07" title="Click para copiar #c94c07">#c94c07</div>
|
|
981
|
+
</div>
|
|
982
|
+
</div>
|
|
983
|
+
<div class="guide-color-card" data-copy-value="--hg-color-special" title="Click para copiar --hg-color-special">
|
|
984
|
+
<div class="guide-color-preview" style="--color-value: #b99d6b;">
|
|
985
|
+
|
|
986
|
+
</div>
|
|
987
|
+
<div class="guide-color-card-content">
|
|
988
|
+
<div class="guide-color-name">special</div>
|
|
989
|
+
<div class="guide-color-var-name" data-copy-value="--hg-color-special" title="Click para copiar --hg-color-special">--hg-color-special</div>
|
|
990
|
+
<div class="guide-color-value " data-copy-value="#b99d6b" title="Click para copiar #b99d6b">#b99d6b</div>
|
|
991
|
+
</div>
|
|
992
|
+
</div>
|
|
993
|
+
<div class="guide-color-card" data-copy-value="--hg-color-bg-light" title="Click para copiar --hg-color-bg-light">
|
|
994
|
+
<div class="guide-color-preview" style="--color-value: #f0f0f0;">
|
|
995
|
+
<div class="guide-color-pattern"></div>
|
|
996
|
+
</div>
|
|
997
|
+
<div class="guide-color-card-content">
|
|
998
|
+
<div class="guide-color-name">bg-light</div>
|
|
999
|
+
<div class="guide-color-var-name" data-copy-value="--hg-color-bg-light" title="Click para copiar --hg-color-bg-light">--hg-color-bg-light</div>
|
|
1000
|
+
<div class="guide-color-value " data-copy-value="#F0F0F0" title="Click para copiar #F0F0F0">#F0F0F0</div>
|
|
1001
|
+
</div>
|
|
1002
|
+
</div>
|
|
1003
|
+
<div class="guide-color-card" data-copy-value="--hg-color-c-bg-light" title="Click para copiar --hg-color-c-bg-light">
|
|
1004
|
+
<div class="guide-color-preview" style="--color-value: #000000;">
|
|
1005
|
+
|
|
1006
|
+
</div>
|
|
1007
|
+
<div class="guide-color-card-content">
|
|
1008
|
+
<div class="guide-color-name">c-bg-light</div>
|
|
1009
|
+
<div class="guide-color-var-name" data-copy-value="--hg-color-c-bg-light" title="Click para copiar --hg-color-c-bg-light">--hg-color-c-bg-light</div>
|
|
1010
|
+
<div class="guide-color-value " data-copy-value="#000000" title="Click para copiar #000000">#000000</div>
|
|
1011
|
+
</div>
|
|
1012
|
+
</div>
|
|
1013
|
+
<div class="guide-color-card" data-copy-value="--hg-color-sk-grey" title="Click para copiar --hg-color-sk-grey">
|
|
1014
|
+
<div class="guide-color-preview" style="--color-value: #e3e3e3;">
|
|
1015
|
+
<div class="guide-color-pattern"></div>
|
|
1016
|
+
</div>
|
|
1017
|
+
<div class="guide-color-card-content">
|
|
1018
|
+
<div class="guide-color-name">sk-grey</div>
|
|
1019
|
+
<div class="guide-color-var-name" data-copy-value="--hg-color-sk-grey" title="Click para copiar --hg-color-sk-grey">--hg-color-sk-grey</div>
|
|
1020
|
+
<div class="guide-color-value " data-copy-value="#e3e3e3" title="Click para copiar #e3e3e3">#e3e3e3</div>
|
|
1021
|
+
</div>
|
|
1022
|
+
</div>
|
|
1023
|
+
<div class="guide-color-card" data-copy-value="--hg-color-bg-cream" title="Click para copiar --hg-color-bg-cream">
|
|
1024
|
+
<div class="guide-color-preview" style="--color-value: #f4f2ed;">
|
|
1025
|
+
<div class="guide-color-pattern"></div>
|
|
1026
|
+
</div>
|
|
1027
|
+
<div class="guide-color-card-content">
|
|
1028
|
+
<div class="guide-color-name">bg-cream</div>
|
|
1029
|
+
<div class="guide-color-var-name" data-copy-value="--hg-color-bg-cream" title="Click para copiar --hg-color-bg-cream">--hg-color-bg-cream</div>
|
|
1030
|
+
<div class="guide-color-value " data-copy-value="#f4f2ed" title="Click para copiar #f4f2ed">#f4f2ed</div>
|
|
1031
|
+
</div>
|
|
1032
|
+
</div>
|
|
1033
|
+
</div>
|
|
1034
|
+
</div>
|
|
1035
|
+
</div>
|
|
1036
|
+
|
|
1037
|
+
|
|
1038
|
+
|
|
1039
|
+
<div class="guide-section" id="font-families">
|
|
1040
|
+
<div class="guide-section-title">
|
|
1041
|
+
<h2 >Font Families</h2>
|
|
1042
|
+
<p class="text-m guide-section-description">
|
|
1043
|
+
Font families disponibles para la tipografía.
|
|
1044
|
+
</p>
|
|
1045
|
+
</div>
|
|
1046
|
+
<div class="guide-section-content">
|
|
1047
|
+
|
|
1048
|
+
<div class="guide-table-wrapper">
|
|
1049
|
+
<table class="guide-table">
|
|
1050
|
+
<thead>
|
|
1051
|
+
<tr>
|
|
1052
|
+
<th>Nombre</th>
|
|
1053
|
+
<th>Preview</th>
|
|
1054
|
+
<th>Valor</th>
|
|
1055
|
+
<th>Variable CSS</th>
|
|
1056
|
+
</tr>
|
|
1057
|
+
</thead>
|
|
1058
|
+
<tbody>
|
|
1059
|
+
|
|
1060
|
+
<tr>
|
|
1061
|
+
<td class="guide-table-name">primary</td>
|
|
1062
|
+
<td class="guide-font-family-preview" style='font-family: arial, sans-serif;'>Aa</td>
|
|
1063
|
+
<td class="guide-table-value ">arial, sans-serif</td>
|
|
1064
|
+
<td class="guide-table-value">--hg-typo-font-family-primary</td>
|
|
1065
|
+
</tr>
|
|
1066
|
+
<tr>
|
|
1067
|
+
<td class="guide-table-name">secondary</td>
|
|
1068
|
+
<td class="guide-font-family-preview" style='font-family: "ms-serif", serif;'>Aa</td>
|
|
1069
|
+
<td class="guide-table-value ">"ms-serif", serif</td>
|
|
1070
|
+
<td class="guide-table-value">--hg-typo-font-family-secondary</td>
|
|
1071
|
+
</tr>
|
|
1072
|
+
</tbody>
|
|
1073
|
+
</table>
|
|
1074
|
+
</div>
|
|
1075
|
+
</div>
|
|
1076
|
+
</div>
|
|
1077
|
+
|
|
1078
|
+
|
|
1079
|
+
<div class="guide-section" id="tipografia">
|
|
1080
|
+
<div class="guide-section-title">
|
|
1081
|
+
<h2 >Clases de Tipografía</h2>
|
|
1082
|
+
<p class="text-m guide-section-description">
|
|
1083
|
+
Clases de tipografía disponibles.
|
|
1084
|
+
</p>
|
|
1085
|
+
</div>
|
|
1086
|
+
<div class="guide-section-content">
|
|
1087
|
+
|
|
1088
|
+
<div class="guide-table-wrapper">
|
|
1089
|
+
<table class="guide-table">
|
|
1090
|
+
<thead>
|
|
1091
|
+
<tr>
|
|
1092
|
+
<th>Clase</th>
|
|
1093
|
+
<th>Preview</th>
|
|
1094
|
+
<th>Font Family</th>
|
|
1095
|
+
<th>Font Weight</th>
|
|
1096
|
+
<th>Letter Spacing</th>
|
|
1097
|
+
<th>Text Transform</th>
|
|
1098
|
+
<th colspan="2" class="guide-mobile-header">Mobile</th>
|
|
1099
|
+
<th colspan="2" class="guide-desktop-header">Desktop</th>
|
|
1100
|
+
</tr>
|
|
1101
|
+
<tr class="guide-sub-header">
|
|
1102
|
+
<th colspan="6"></th>
|
|
1103
|
+
<th class="guide-mobile-value">Font Size</th>
|
|
1104
|
+
<th class="guide-mobile-value">Line Height</th>
|
|
1105
|
+
<th class="guide-desktop-value">Font Size</th>
|
|
1106
|
+
<th class="guide-desktop-value">Line Height</th>
|
|
1107
|
+
</tr>
|
|
1108
|
+
</thead>
|
|
1109
|
+
<tbody>
|
|
1110
|
+
|
|
1111
|
+
<tr>
|
|
1112
|
+
<td class="guide-table-name">.h2</td>
|
|
1113
|
+
<td class="guide-preview-cell">
|
|
1114
|
+
<div class="guide-typography-preview h2">Aa</div>
|
|
1115
|
+
</td>
|
|
1116
|
+
<td class="guide-table-value ">primary</td>
|
|
1117
|
+
<td class="guide-table-value ">900</td>
|
|
1118
|
+
<td class="guide-table-value ">0rem</td>
|
|
1119
|
+
<td class="guide-table-value ">none</td>
|
|
1120
|
+
<td class="guide-mobile-value ">1.125rem</td>
|
|
1121
|
+
<td class="guide-mobile-value ">1.976</td>
|
|
1122
|
+
<td class="guide-desktop-value ">1.5rem</td>
|
|
1123
|
+
<td class="guide-desktop-value ">1.2</td>
|
|
1124
|
+
</tr>
|
|
1125
|
+
<tr>
|
|
1126
|
+
<td class="guide-table-name">.title-l-b</td>
|
|
1127
|
+
<td class="guide-preview-cell">
|
|
1128
|
+
<div class="guide-typography-preview title-l-b">Aa</div>
|
|
1129
|
+
</td>
|
|
1130
|
+
<td class="guide-table-value ">primary</td>
|
|
1131
|
+
<td class="guide-table-value ">700</td>
|
|
1132
|
+
<td class="guide-table-value ">0rem</td>
|
|
1133
|
+
<td class="guide-table-value ">uppercase</td>
|
|
1134
|
+
<td class="guide-mobile-value ">0.875rem</td>
|
|
1135
|
+
<td class="guide-mobile-value ">1.2</td>
|
|
1136
|
+
<td class="guide-desktop-value ">0.875rem</td>
|
|
1137
|
+
<td class="guide-desktop-value ">1.4</td>
|
|
1138
|
+
</tr>
|
|
1139
|
+
<tr>
|
|
1140
|
+
<td class="guide-table-name">.title-l</td>
|
|
1141
|
+
<td class="guide-preview-cell">
|
|
1142
|
+
<div class="guide-typography-preview title-l">Aa</div>
|
|
1143
|
+
</td>
|
|
1144
|
+
<td class="guide-table-value ">primary</td>
|
|
1145
|
+
<td class="guide-table-value ">100</td>
|
|
1146
|
+
<td class="guide-table-value ">-</td>
|
|
1147
|
+
<td class="guide-table-value ">-</td>
|
|
1148
|
+
<td class="guide-mobile-value ">0.875rem</td>
|
|
1149
|
+
<td class="guide-mobile-value ">1.4</td>
|
|
1150
|
+
<td class="guide-desktop-value ">0.875rem</td>
|
|
1151
|
+
<td class="guide-desktop-value ">1.4</td>
|
|
1152
|
+
</tr>
|
|
1153
|
+
<tr>
|
|
1154
|
+
<td class="guide-table-name">.title-m</td>
|
|
1155
|
+
<td class="guide-preview-cell">
|
|
1156
|
+
<div class="guide-typography-preview title-m">Aa</div>
|
|
1157
|
+
</td>
|
|
1158
|
+
<td class="guide-table-value ">primary</td>
|
|
1159
|
+
<td class="guide-table-value ">100</td>
|
|
1160
|
+
<td class="guide-table-value ">-</td>
|
|
1161
|
+
<td class="guide-table-value ">-</td>
|
|
1162
|
+
<td class="guide-mobile-value ">0.75rem</td>
|
|
1163
|
+
<td class="guide-mobile-value ">1.4</td>
|
|
1164
|
+
<td class="guide-desktop-value ">0.75rem</td>
|
|
1165
|
+
<td class="guide-desktop-value ">1.4</td>
|
|
1166
|
+
</tr>
|
|
1167
|
+
<tr>
|
|
1168
|
+
<td class="guide-table-name">.title-s</td>
|
|
1169
|
+
<td class="guide-preview-cell">
|
|
1170
|
+
<div class="guide-typography-preview title-s">Aa</div>
|
|
1171
|
+
</td>
|
|
1172
|
+
<td class="guide-table-value ">primary</td>
|
|
1173
|
+
<td class="guide-table-value ">400</td>
|
|
1174
|
+
<td class="guide-table-value ">-</td>
|
|
1175
|
+
<td class="guide-table-value ">-</td>
|
|
1176
|
+
<td class="guide-mobile-value ">0.75rem</td>
|
|
1177
|
+
<td class="guide-mobile-value ">1.4</td>
|
|
1178
|
+
<td class="guide-desktop-value ">0.75rem</td>
|
|
1179
|
+
<td class="guide-desktop-value ">1.4</td>
|
|
1180
|
+
</tr>
|
|
1181
|
+
<tr>
|
|
1182
|
+
<td class="guide-table-name">.text-l</td>
|
|
1183
|
+
<td class="guide-preview-cell">
|
|
1184
|
+
<div class="guide-typography-preview text-l">Aa</div>
|
|
1185
|
+
</td>
|
|
1186
|
+
<td class="guide-table-value ">primary</td>
|
|
1187
|
+
<td class="guide-table-value ">100</td>
|
|
1188
|
+
<td class="guide-table-value ">-</td>
|
|
1189
|
+
<td class="guide-table-value ">-</td>
|
|
1190
|
+
<td class="guide-mobile-value ">0.75rem</td>
|
|
1191
|
+
<td class="guide-mobile-value ">1.5</td>
|
|
1192
|
+
<td class="guide-desktop-value ">0.75rem</td>
|
|
1193
|
+
<td class="guide-desktop-value ">1.5</td>
|
|
1194
|
+
</tr>
|
|
1195
|
+
<tr>
|
|
1196
|
+
<td class="guide-table-name">.text-m</td>
|
|
1197
|
+
<td class="guide-preview-cell">
|
|
1198
|
+
<div class="guide-typography-preview text-m">Aa</div>
|
|
1199
|
+
</td>
|
|
1200
|
+
<td class="guide-table-value ">primary</td>
|
|
1201
|
+
<td class="guide-table-value ">100</td>
|
|
1202
|
+
<td class="guide-table-value ">-</td>
|
|
1203
|
+
<td class="guide-table-value ">-</td>
|
|
1204
|
+
<td class="guide-mobile-value ">0.75rem</td>
|
|
1205
|
+
<td class="guide-mobile-value ">1.5</td>
|
|
1206
|
+
<td class="guide-desktop-value ">0.8125rem</td>
|
|
1207
|
+
<td class="guide-desktop-value ">1.5</td>
|
|
1208
|
+
</tr>
|
|
1209
|
+
<tr>
|
|
1210
|
+
<td class="guide-table-name">.semantic</td>
|
|
1211
|
+
<td class="guide-preview-cell">
|
|
1212
|
+
<div class="guide-typography-preview semantic">Aa</div>
|
|
1213
|
+
</td>
|
|
1214
|
+
<td class="guide-table-value ">primary</td>
|
|
1215
|
+
<td class="guide-table-value ">100</td>
|
|
1216
|
+
<td class="guide-table-value ">-</td>
|
|
1217
|
+
<td class="guide-table-value ">-</td>
|
|
1218
|
+
<td class="guide-mobile-value ">0.8125rem</td>
|
|
1219
|
+
<td class="guide-mobile-value ">1</td>
|
|
1220
|
+
<td class="guide-desktop-value ">0.8125rem</td>
|
|
1221
|
+
<td class="guide-desktop-value ">1</td>
|
|
1222
|
+
</tr>
|
|
1223
|
+
<tr>
|
|
1224
|
+
<td class="guide-table-name">.p-tag</td>
|
|
1225
|
+
<td class="guide-preview-cell">
|
|
1226
|
+
<div class="guide-typography-preview p-tag">Aa</div>
|
|
1227
|
+
</td>
|
|
1228
|
+
<td class="guide-table-value ">primary</td>
|
|
1229
|
+
<td class="guide-table-value ">100</td>
|
|
1230
|
+
<td class="guide-table-value ">-</td>
|
|
1231
|
+
<td class="guide-table-value ">-</td>
|
|
1232
|
+
<td class="guide-mobile-value ">0.5rem</td>
|
|
1233
|
+
<td class="guide-mobile-value ">1</td>
|
|
1234
|
+
<td class="guide-desktop-value ">0.5rem</td>
|
|
1235
|
+
<td class="guide-desktop-value ">1</td>
|
|
1236
|
+
</tr>
|
|
1237
|
+
<tr>
|
|
1238
|
+
<td class="guide-table-name">.suisse-1</td>
|
|
1239
|
+
<td class="guide-preview-cell">
|
|
1240
|
+
<div class="guide-typography-preview suisse-1">Aa</div>
|
|
1241
|
+
</td>
|
|
1242
|
+
<td class="guide-table-value ">secondary</td>
|
|
1243
|
+
<td class="guide-table-value ">-</td>
|
|
1244
|
+
<td class="guide-table-value ">-</td>
|
|
1245
|
+
<td class="guide-table-value ">-</td>
|
|
1246
|
+
<td class="guide-mobile-value ">1rem</td>
|
|
1247
|
+
<td class="guide-mobile-value ">1.5</td>
|
|
1248
|
+
<td class="guide-desktop-value ">1.25rem</td>
|
|
1249
|
+
<td class="guide-desktop-value ">1.5</td>
|
|
1250
|
+
</tr>
|
|
1251
|
+
<tr>
|
|
1252
|
+
<td class="guide-table-name">.suisse-2</td>
|
|
1253
|
+
<td class="guide-preview-cell">
|
|
1254
|
+
<div class="guide-typography-preview suisse-2">Aa</div>
|
|
1255
|
+
</td>
|
|
1256
|
+
<td class="guide-table-value ">secondary</td>
|
|
1257
|
+
<td class="guide-table-value ">-</td>
|
|
1258
|
+
<td class="guide-table-value ">-</td>
|
|
1259
|
+
<td class="guide-table-value ">-</td>
|
|
1260
|
+
<td class="guide-mobile-value ">0.8125rem</td>
|
|
1261
|
+
<td class="guide-mobile-value ">1.1</td>
|
|
1262
|
+
<td class="guide-desktop-value ">0.875rem</td>
|
|
1263
|
+
<td class="guide-desktop-value ">1.1</td>
|
|
1264
|
+
</tr>
|
|
1265
|
+
<tr>
|
|
1266
|
+
<td class="guide-table-name">.suisse-body</td>
|
|
1267
|
+
<td class="guide-preview-cell">
|
|
1268
|
+
<div class="guide-typography-preview suisse-body">Aa</div>
|
|
1269
|
+
</td>
|
|
1270
|
+
<td class="guide-table-value ">secondary</td>
|
|
1271
|
+
<td class="guide-table-value ">-</td>
|
|
1272
|
+
<td class="guide-table-value ">-</td>
|
|
1273
|
+
<td class="guide-table-value ">-</td>
|
|
1274
|
+
<td class="guide-mobile-value ">0.625rem</td>
|
|
1275
|
+
<td class="guide-mobile-value ">1.1</td>
|
|
1276
|
+
<td class="guide-desktop-value ">0.75rem</td>
|
|
1277
|
+
<td class="guide-desktop-value ">1.1</td>
|
|
1278
|
+
</tr>
|
|
1279
|
+
</tbody>
|
|
1280
|
+
</table>
|
|
1281
|
+
</div>
|
|
1282
|
+
</div>
|
|
1283
|
+
</div>
|
|
1284
|
+
|
|
1285
|
+
<div class="guide-section" id="variables">
|
|
1286
|
+
<div class="guide-section-title">
|
|
1287
|
+
<h2 >Variables CSS Compartidas</h2>
|
|
1288
|
+
<p class="text-m guide-section-description">
|
|
1289
|
+
Variables CSS compartidas.
|
|
1290
|
+
</p>
|
|
1291
|
+
</div>
|
|
1292
|
+
<div class="guide-section-content">
|
|
1293
|
+
|
|
1294
|
+
<div class="guide-table-wrapper">
|
|
1295
|
+
<table class="guide-table">
|
|
1296
|
+
<thead>
|
|
1297
|
+
<tr>
|
|
1298
|
+
<th>Variable CSS</th>
|
|
1299
|
+
<th>Valor</th>
|
|
1300
|
+
<th>Rem</th>
|
|
1301
|
+
<th>Píxeles</th>
|
|
1302
|
+
</tr>
|
|
1303
|
+
</thead>
|
|
1304
|
+
<tbody>
|
|
1305
|
+
|
|
1306
|
+
<tr>
|
|
1307
|
+
<td class="guide-table-name guide-copyable " data-copy-value="--hg-typo-font-family-primary" title="Click para copiar --hg-typo-font-family-primary">--hg-typo-font-family-primary</td>
|
|
1308
|
+
<td class="guide-table-value guide-copyable " data-copy-value="arial, sans-serif" title="Click para copiar arial, sans-serif">arial, sans-serif</td>
|
|
1309
|
+
<td class="guide-value-center-blue guide-copyable " data-copy-value="-" title="Click para copiar -">-</td>
|
|
1310
|
+
<td class="guide-value-center-orange guide-copyable " data-copy-value="-" title="Click para copiar -">-</td>
|
|
1311
|
+
</tr>
|
|
1312
|
+
<tr>
|
|
1313
|
+
<td class="guide-table-name guide-copyable " data-copy-value="--hg-typo-font-family-secondary" title="Click para copiar --hg-typo-font-family-secondary">--hg-typo-font-family-secondary</td>
|
|
1314
|
+
<td class="guide-table-value guide-copyable " data-copy-value=""ms-serif", serif" title="Click para copiar "ms-serif", serif">"ms-serif", serif</td>
|
|
1315
|
+
<td class="guide-value-center-blue guide-copyable " data-copy-value="-" title="Click para copiar -">-</td>
|
|
1316
|
+
<td class="guide-value-center-orange guide-copyable " data-copy-value="-" title="Click para copiar -">-</td>
|
|
1317
|
+
</tr>
|
|
1318
|
+
<tr>
|
|
1319
|
+
<td class="guide-table-name guide-copyable " data-copy-value="--hg-typo-font-family-luxury-serif" title="Click para copiar --hg-typo-font-family-luxury-serif">--hg-typo-font-family-luxury-serif</td>
|
|
1320
|
+
<td class="guide-table-value guide-copyable " data-copy-value="'Playfair Display', 'Georgia', serif" title="Click para copiar 'Playfair Display', 'Georgia', serif">'Playfair Display', 'Georgia', serif</td>
|
|
1321
|
+
<td class="guide-value-center-blue guide-copyable " data-copy-value="-" title="Click para copiar -">-</td>
|
|
1322
|
+
<td class="guide-value-center-orange guide-copyable " data-copy-value="-" title="Click para copiar -">-</td>
|
|
1323
|
+
</tr>
|
|
1324
|
+
<tr>
|
|
1325
|
+
<td class="guide-table-name guide-copyable " data-copy-value="--hg-typo-font-family-elegant-sans" title="Click para copiar --hg-typo-font-family-elegant-sans">--hg-typo-font-family-elegant-sans</td>
|
|
1326
|
+
<td class="guide-table-value guide-copyable " data-copy-value="'IBM Plex Sans', 'Helvetica Neue', sans-serif" title="Click para copiar 'IBM Plex Sans', 'Helvetica Neue', sans-serif">'IBM Plex Sans', 'Helvetica Neue', sans-serif</td>
|
|
1327
|
+
<td class="guide-value-center-blue guide-copyable " data-copy-value="-" title="Click para copiar -">-</td>
|
|
1328
|
+
<td class="guide-value-center-orange guide-copyable " data-copy-value="-" title="Click para copiar -">-</td>
|
|
1329
|
+
</tr>
|
|
1330
|
+
<tr>
|
|
1331
|
+
<td class="guide-table-name guide-copyable " data-copy-value="--hg-typo-line-height-1" title="Click para copiar --hg-typo-line-height-1">--hg-typo-line-height-1</td>
|
|
1332
|
+
<td class="guide-table-value guide-copyable " data-copy-value="1" title="Click para copiar 1">1</td>
|
|
1333
|
+
<td class="guide-value-center-blue guide-copyable " data-copy-value="-" title="Click para copiar -">-</td>
|
|
1334
|
+
<td class="guide-value-center-orange guide-copyable " data-copy-value="-" title="Click para copiar -">-</td>
|
|
1335
|
+
</tr>
|
|
1336
|
+
<tr>
|
|
1337
|
+
<td class="guide-table-name guide-copyable " data-copy-value="--hg-typo-line-height-1-976" title="Click para copiar --hg-typo-line-height-1-976">--hg-typo-line-height-1-976</td>
|
|
1338
|
+
<td class="guide-table-value guide-copyable " data-copy-value="1.976" title="Click para copiar 1.976">1.976</td>
|
|
1339
|
+
<td class="guide-value-center-blue guide-copyable " data-copy-value="-" title="Click para copiar -">-</td>
|
|
1340
|
+
<td class="guide-value-center-orange guide-copyable " data-copy-value="-" title="Click para copiar -">-</td>
|
|
1341
|
+
</tr>
|
|
1342
|
+
<tr>
|
|
1343
|
+
<td class="guide-table-name guide-copyable " data-copy-value="--hg-typo-line-height-1-2" title="Click para copiar --hg-typo-line-height-1-2">--hg-typo-line-height-1-2</td>
|
|
1344
|
+
<td class="guide-table-value guide-copyable " data-copy-value="1.2" title="Click para copiar 1.2">1.2</td>
|
|
1345
|
+
<td class="guide-value-center-blue guide-copyable " data-copy-value="-" title="Click para copiar -">-</td>
|
|
1346
|
+
<td class="guide-value-center-orange guide-copyable " data-copy-value="-" title="Click para copiar -">-</td>
|
|
1347
|
+
</tr>
|
|
1348
|
+
<tr>
|
|
1349
|
+
<td class="guide-table-name guide-copyable " data-copy-value="--hg-typo-line-height-1-4" title="Click para copiar --hg-typo-line-height-1-4">--hg-typo-line-height-1-4</td>
|
|
1350
|
+
<td class="guide-table-value guide-copyable " data-copy-value="1.4" title="Click para copiar 1.4">1.4</td>
|
|
1351
|
+
<td class="guide-value-center-blue guide-copyable " data-copy-value="-" title="Click para copiar -">-</td>
|
|
1352
|
+
<td class="guide-value-center-orange guide-copyable " data-copy-value="-" title="Click para copiar -">-</td>
|
|
1353
|
+
</tr>
|
|
1354
|
+
<tr>
|
|
1355
|
+
<td class="guide-table-name guide-copyable " data-copy-value="--hg-typo-line-height-1-5" title="Click para copiar --hg-typo-line-height-1-5">--hg-typo-line-height-1-5</td>
|
|
1356
|
+
<td class="guide-table-value guide-copyable " data-copy-value="1.5" title="Click para copiar 1.5">1.5</td>
|
|
1357
|
+
<td class="guide-value-center-blue guide-copyable " data-copy-value="-" title="Click para copiar -">-</td>
|
|
1358
|
+
<td class="guide-value-center-orange guide-copyable " data-copy-value="-" title="Click para copiar -">-</td>
|
|
1359
|
+
</tr>
|
|
1360
|
+
<tr>
|
|
1361
|
+
<td class="guide-table-name guide-copyable " data-copy-value="--hg-typo-line-height-1-1" title="Click para copiar --hg-typo-line-height-1-1">--hg-typo-line-height-1-1</td>
|
|
1362
|
+
<td class="guide-table-value guide-copyable " data-copy-value="1.1" title="Click para copiar 1.1">1.1</td>
|
|
1363
|
+
<td class="guide-value-center-blue guide-copyable " data-copy-value="-" title="Click para copiar -">-</td>
|
|
1364
|
+
<td class="guide-value-center-orange guide-copyable " data-copy-value="-" title="Click para copiar -">-</td>
|
|
1365
|
+
</tr>
|
|
1366
|
+
<tr>
|
|
1367
|
+
<td class="guide-table-name guide-copyable " data-copy-value="--hg-typo-line-height-1-3" title="Click para copiar --hg-typo-line-height-1-3">--hg-typo-line-height-1-3</td>
|
|
1368
|
+
<td class="guide-table-value guide-copyable " data-copy-value="1.3" title="Click para copiar 1.3">1.3</td>
|
|
1369
|
+
<td class="guide-value-center-blue guide-copyable " data-copy-value="-" title="Click para copiar -">-</td>
|
|
1370
|
+
<td class="guide-value-center-orange guide-copyable " data-copy-value="-" title="Click para copiar -">-</td>
|
|
1371
|
+
</tr>
|
|
1372
|
+
<tr>
|
|
1373
|
+
<td class="guide-table-name guide-copyable " data-copy-value="--hg-typo-line-height-1-6" title="Click para copiar --hg-typo-line-height-1-6">--hg-typo-line-height-1-6</td>
|
|
1374
|
+
<td class="guide-table-value guide-copyable " data-copy-value="1.6" title="Click para copiar 1.6">1.6</td>
|
|
1375
|
+
<td class="guide-value-center-blue guide-copyable " data-copy-value="-" title="Click para copiar -">-</td>
|
|
1376
|
+
<td class="guide-value-center-orange guide-copyable " data-copy-value="-" title="Click para copiar -">-</td>
|
|
1377
|
+
</tr>
|
|
1378
|
+
<tr>
|
|
1379
|
+
<td class="guide-table-name guide-copyable " data-copy-value="--hg-typo-font-weight-100" title="Click para copiar --hg-typo-font-weight-100">--hg-typo-font-weight-100</td>
|
|
1380
|
+
<td class="guide-table-value guide-copyable " data-copy-value="100" title="Click para copiar 100">100</td>
|
|
1381
|
+
<td class="guide-value-center-blue guide-copyable " data-copy-value="-" title="Click para copiar -">-</td>
|
|
1382
|
+
<td class="guide-value-center-orange guide-copyable " data-copy-value="-" title="Click para copiar -">-</td>
|
|
1383
|
+
</tr>
|
|
1384
|
+
<tr>
|
|
1385
|
+
<td class="guide-table-name guide-copyable " data-copy-value="--hg-typo-font-weight-400" title="Click para copiar --hg-typo-font-weight-400">--hg-typo-font-weight-400</td>
|
|
1386
|
+
<td class="guide-table-value guide-copyable " data-copy-value="400" title="Click para copiar 400">400</td>
|
|
1387
|
+
<td class="guide-value-center-blue guide-copyable " data-copy-value="-" title="Click para copiar -">-</td>
|
|
1388
|
+
<td class="guide-value-center-orange guide-copyable " data-copy-value="-" title="Click para copiar -">-</td>
|
|
1389
|
+
</tr>
|
|
1390
|
+
<tr>
|
|
1391
|
+
<td class="guide-table-name guide-copyable " data-copy-value="--hg-typo-font-weight-500" title="Click para copiar --hg-typo-font-weight-500">--hg-typo-font-weight-500</td>
|
|
1392
|
+
<td class="guide-table-value guide-copyable " data-copy-value="500" title="Click para copiar 500">500</td>
|
|
1393
|
+
<td class="guide-value-center-blue guide-copyable " data-copy-value="-" title="Click para copiar -">-</td>
|
|
1394
|
+
<td class="guide-value-center-orange guide-copyable " data-copy-value="-" title="Click para copiar -">-</td>
|
|
1395
|
+
</tr>
|
|
1396
|
+
<tr>
|
|
1397
|
+
<td class="guide-table-name guide-copyable " data-copy-value="--hg-typo-font-weight-600" title="Click para copiar --hg-typo-font-weight-600">--hg-typo-font-weight-600</td>
|
|
1398
|
+
<td class="guide-table-value guide-copyable " data-copy-value="600" title="Click para copiar 600">600</td>
|
|
1399
|
+
<td class="guide-value-center-blue guide-copyable " data-copy-value="-" title="Click para copiar -">-</td>
|
|
1400
|
+
<td class="guide-value-center-orange guide-copyable " data-copy-value="-" title="Click para copiar -">-</td>
|
|
1401
|
+
</tr>
|
|
1402
|
+
<tr>
|
|
1403
|
+
<td class="guide-table-name guide-copyable " data-copy-value="--hg-typo-font-weight-700" title="Click para copiar --hg-typo-font-weight-700">--hg-typo-font-weight-700</td>
|
|
1404
|
+
<td class="guide-table-value guide-copyable " data-copy-value="700" title="Click para copiar 700">700</td>
|
|
1405
|
+
<td class="guide-value-center-blue guide-copyable " data-copy-value="-" title="Click para copiar -">-</td>
|
|
1406
|
+
<td class="guide-value-center-orange guide-copyable " data-copy-value="-" title="Click para copiar -">-</td>
|
|
1407
|
+
</tr>
|
|
1408
|
+
<tr>
|
|
1409
|
+
<td class="guide-table-name guide-copyable " data-copy-value="--hg-typo-font-weight-900" title="Click para copiar --hg-typo-font-weight-900">--hg-typo-font-weight-900</td>
|
|
1410
|
+
<td class="guide-table-value guide-copyable " data-copy-value="900" title="Click para copiar 900">900</td>
|
|
1411
|
+
<td class="guide-value-center-blue guide-copyable " data-copy-value="-" title="Click para copiar -">-</td>
|
|
1412
|
+
<td class="guide-value-center-orange guide-copyable " data-copy-value="-" title="Click para copiar -">-</td>
|
|
1413
|
+
</tr>
|
|
1414
|
+
<tr>
|
|
1415
|
+
<td class="guide-table-name guide-copyable " data-copy-value="--hg-typo-letter-spacing-0" title="Click para copiar --hg-typo-letter-spacing-0">--hg-typo-letter-spacing-0</td>
|
|
1416
|
+
<td class="guide-table-value guide-copyable " data-copy-value="0" title="Click para copiar 0">0</td>
|
|
1417
|
+
<td class="guide-value-center-blue guide-copyable " data-copy-value="-" title="Click para copiar -">-</td>
|
|
1418
|
+
<td class="guide-value-center-orange guide-copyable " data-copy-value="-" title="Click para copiar -">-</td>
|
|
1419
|
+
</tr>
|
|
1420
|
+
<tr>
|
|
1421
|
+
<td class="guide-table-name guide-copyable " data-copy-value="--hg-typo-letter-spacing-0" title="Click para copiar --hg-typo-letter-spacing-0">--hg-typo-letter-spacing-0</td>
|
|
1422
|
+
<td class="guide-table-value guide-copyable " data-copy-value="0rem" title="Click para copiar 0rem">0rem</td>
|
|
1423
|
+
<td class="guide-value-center-blue guide-copyable " data-copy-value="0rem" title="Click para copiar 0rem">0rem</td>
|
|
1424
|
+
<td class="guide-value-center-orange guide-copyable " data-copy-value="0px" title="Click para copiar 0px">0px</td>
|
|
1425
|
+
</tr>
|
|
1426
|
+
<tr>
|
|
1427
|
+
<td class="guide-table-name guide-copyable " data-copy-value="--hg-typo-letter-spacing-0-02" title="Click para copiar --hg-typo-letter-spacing-0-02">--hg-typo-letter-spacing-0-02</td>
|
|
1428
|
+
<td class="guide-table-value guide-copyable " data-copy-value="0.02rem" title="Click para copiar 0.02rem">0.02rem</td>
|
|
1429
|
+
<td class="guide-value-center-blue guide-copyable " data-copy-value="0.02rem" title="Click para copiar 0.02rem">0.02rem</td>
|
|
1430
|
+
<td class="guide-value-center-orange guide-copyable " data-copy-value="0.32px" title="Click para copiar 0.32px">0.32px</td>
|
|
1431
|
+
</tr>
|
|
1432
|
+
<tr>
|
|
1433
|
+
<td class="guide-table-name guide-copyable " data-copy-value="--hg-typo-letter-spacing-0-05" title="Click para copiar --hg-typo-letter-spacing-0-05">--hg-typo-letter-spacing-0-05</td>
|
|
1434
|
+
<td class="guide-table-value guide-copyable " data-copy-value="0.05rem" title="Click para copiar 0.05rem">0.05rem</td>
|
|
1435
|
+
<td class="guide-value-center-blue guide-copyable " data-copy-value="0.05rem" title="Click para copiar 0.05rem">0.05rem</td>
|
|
1436
|
+
<td class="guide-value-center-orange guide-copyable " data-copy-value="0.8px" title="Click para copiar 0.8px">0.8px</td>
|
|
1437
|
+
</tr>
|
|
1438
|
+
<tr>
|
|
1439
|
+
<td class="guide-table-name guide-copyable " data-copy-value="--hg-typo-letter-spacing-0-08" title="Click para copiar --hg-typo-letter-spacing-0-08">--hg-typo-letter-spacing-0-08</td>
|
|
1440
|
+
<td class="guide-table-value guide-copyable " data-copy-value="0.08rem" title="Click para copiar 0.08rem">0.08rem</td>
|
|
1441
|
+
<td class="guide-value-center-blue guide-copyable " data-copy-value="0.08rem" title="Click para copiar 0.08rem">0.08rem</td>
|
|
1442
|
+
<td class="guide-value-center-orange guide-copyable " data-copy-value="1.28px" title="Click para copiar 1.28px">1.28px</td>
|
|
1443
|
+
</tr>
|
|
1444
|
+
<tr>
|
|
1445
|
+
<td class="guide-table-name guide-copyable " data-copy-value="--hg-typo-text-transform-none" title="Click para copiar --hg-typo-text-transform-none">--hg-typo-text-transform-none</td>
|
|
1446
|
+
<td class="guide-table-value guide-copyable " data-copy-value="none" title="Click para copiar none">none</td>
|
|
1447
|
+
<td class="guide-value-center-blue guide-copyable " data-copy-value="-" title="Click para copiar -">-</td>
|
|
1448
|
+
<td class="guide-value-center-orange guide-copyable " data-copy-value="-" title="Click para copiar -">-</td>
|
|
1449
|
+
</tr>
|
|
1450
|
+
<tr>
|
|
1451
|
+
<td class="guide-table-name guide-copyable " data-copy-value="--hg-typo-text-transform-uppercase" title="Click para copiar --hg-typo-text-transform-uppercase">--hg-typo-text-transform-uppercase</td>
|
|
1452
|
+
<td class="guide-table-value guide-copyable " data-copy-value="uppercase" title="Click para copiar uppercase">uppercase</td>
|
|
1453
|
+
<td class="guide-value-center-blue guide-copyable " data-copy-value="-" title="Click para copiar -">-</td>
|
|
1454
|
+
<td class="guide-value-center-orange guide-copyable " data-copy-value="-" title="Click para copiar -">-</td>
|
|
1455
|
+
</tr>
|
|
1456
|
+
<tr>
|
|
1457
|
+
<td class="guide-table-name guide-copyable " data-copy-value="--hg-typo-font-size-18" title="Click para copiar --hg-typo-font-size-18">--hg-typo-font-size-18</td>
|
|
1458
|
+
<td class="guide-table-value guide-copyable " data-copy-value="1.125rem" title="Click para copiar 1.125rem">1.125rem</td>
|
|
1459
|
+
<td class="guide-value-center-blue guide-copyable " data-copy-value="1.125rem" title="Click para copiar 1.125rem">1.125rem</td>
|
|
1460
|
+
<td class="guide-value-center-orange guide-copyable " data-copy-value="18px" title="Click para copiar 18px">18px</td>
|
|
1461
|
+
</tr>
|
|
1462
|
+
<tr>
|
|
1463
|
+
<td class="guide-table-name guide-copyable " data-copy-value="--hg-typo-font-size-24" title="Click para copiar --hg-typo-font-size-24">--hg-typo-font-size-24</td>
|
|
1464
|
+
<td class="guide-table-value guide-copyable " data-copy-value="1.5rem" title="Click para copiar 1.5rem">1.5rem</td>
|
|
1465
|
+
<td class="guide-value-center-blue guide-copyable " data-copy-value="1.5rem" title="Click para copiar 1.5rem">1.5rem</td>
|
|
1466
|
+
<td class="guide-value-center-orange guide-copyable " data-copy-value="24px" title="Click para copiar 24px">24px</td>
|
|
1467
|
+
</tr>
|
|
1468
|
+
<tr>
|
|
1469
|
+
<td class="guide-table-name guide-copyable " data-copy-value="--hg-typo-font-size-14" title="Click para copiar --hg-typo-font-size-14">--hg-typo-font-size-14</td>
|
|
1470
|
+
<td class="guide-table-value guide-copyable " data-copy-value="0.875rem" title="Click para copiar 0.875rem">0.875rem</td>
|
|
1471
|
+
<td class="guide-value-center-blue guide-copyable " data-copy-value="0.875rem" title="Click para copiar 0.875rem">0.875rem</td>
|
|
1472
|
+
<td class="guide-value-center-orange guide-copyable " data-copy-value="14px" title="Click para copiar 14px">14px</td>
|
|
1473
|
+
</tr>
|
|
1474
|
+
<tr>
|
|
1475
|
+
<td class="guide-table-name guide-copyable " data-copy-value="--hg-typo-font-size-12" title="Click para copiar --hg-typo-font-size-12">--hg-typo-font-size-12</td>
|
|
1476
|
+
<td class="guide-table-value guide-copyable " data-copy-value="0.75rem" title="Click para copiar 0.75rem">0.75rem</td>
|
|
1477
|
+
<td class="guide-value-center-blue guide-copyable " data-copy-value="0.75rem" title="Click para copiar 0.75rem">0.75rem</td>
|
|
1478
|
+
<td class="guide-value-center-orange guide-copyable " data-copy-value="12px" title="Click para copiar 12px">12px</td>
|
|
1479
|
+
</tr>
|
|
1480
|
+
<tr>
|
|
1481
|
+
<td class="guide-table-name guide-copyable " data-copy-value="--hg-typo-font-size-16" title="Click para copiar --hg-typo-font-size-16">--hg-typo-font-size-16</td>
|
|
1482
|
+
<td class="guide-table-value guide-copyable " data-copy-value="1rem" title="Click para copiar 1rem">1rem</td>
|
|
1483
|
+
<td class="guide-value-center-blue guide-copyable " data-copy-value="1rem" title="Click para copiar 1rem">1rem</td>
|
|
1484
|
+
<td class="guide-value-center-orange guide-copyable " data-copy-value="16px" title="Click para copiar 16px">16px</td>
|
|
1485
|
+
</tr>
|
|
1486
|
+
<tr>
|
|
1487
|
+
<td class="guide-table-name guide-copyable " data-copy-value="--hg-typo-font-size-20" title="Click para copiar --hg-typo-font-size-20">--hg-typo-font-size-20</td>
|
|
1488
|
+
<td class="guide-table-value guide-copyable " data-copy-value="1.25rem" title="Click para copiar 1.25rem">1.25rem</td>
|
|
1489
|
+
<td class="guide-value-center-blue guide-copyable " data-copy-value="1.25rem" title="Click para copiar 1.25rem">1.25rem</td>
|
|
1490
|
+
<td class="guide-value-center-orange guide-copyable " data-copy-value="20px" title="Click para copiar 20px">20px</td>
|
|
1491
|
+
</tr>
|
|
1492
|
+
<tr>
|
|
1493
|
+
<td class="guide-table-name guide-copyable " data-copy-value="--hg-typo-font-size-13" title="Click para copiar --hg-typo-font-size-13">--hg-typo-font-size-13</td>
|
|
1494
|
+
<td class="guide-table-value guide-copyable " data-copy-value="0.8125rem" title="Click para copiar 0.8125rem">0.8125rem</td>
|
|
1495
|
+
<td class="guide-value-center-blue guide-copyable " data-copy-value="0.8125rem" title="Click para copiar 0.8125rem">0.8125rem</td>
|
|
1496
|
+
<td class="guide-value-center-orange guide-copyable " data-copy-value="13px" title="Click para copiar 13px">13px</td>
|
|
1497
|
+
</tr>
|
|
1498
|
+
<tr>
|
|
1499
|
+
<td class="guide-table-name guide-copyable " data-copy-value="--hg-typo-font-size-10" title="Click para copiar --hg-typo-font-size-10">--hg-typo-font-size-10</td>
|
|
1500
|
+
<td class="guide-table-value guide-copyable " data-copy-value="0.625rem" title="Click para copiar 0.625rem">0.625rem</td>
|
|
1501
|
+
<td class="guide-value-center-blue guide-copyable " data-copy-value="0.625rem" title="Click para copiar 0.625rem">0.625rem</td>
|
|
1502
|
+
<td class="guide-value-center-orange guide-copyable " data-copy-value="10px" title="Click para copiar 10px">10px</td>
|
|
1503
|
+
</tr>
|
|
1504
|
+
<tr>
|
|
1505
|
+
<td class="guide-table-name guide-copyable " data-copy-value="--hg-typo-font-size-8" title="Click para copiar --hg-typo-font-size-8">--hg-typo-font-size-8</td>
|
|
1506
|
+
<td class="guide-table-value guide-copyable " data-copy-value="0.5rem" title="Click para copiar 0.5rem">0.5rem</td>
|
|
1507
|
+
<td class="guide-value-center-blue guide-copyable " data-copy-value="0.5rem" title="Click para copiar 0.5rem">0.5rem</td>
|
|
1508
|
+
<td class="guide-value-center-orange guide-copyable " data-copy-value="8px" title="Click para copiar 8px">8px</td>
|
|
1509
|
+
</tr>
|
|
1510
|
+
<tr>
|
|
1511
|
+
<td class="guide-table-name guide-copyable " data-copy-value="--hg-typo-font-size-32" title="Click para copiar --hg-typo-font-size-32">--hg-typo-font-size-32</td>
|
|
1512
|
+
<td class="guide-table-value guide-copyable " data-copy-value="2rem" title="Click para copiar 2rem">2rem</td>
|
|
1513
|
+
<td class="guide-value-center-blue guide-copyable " data-copy-value="2rem" title="Click para copiar 2rem">2rem</td>
|
|
1514
|
+
<td class="guide-value-center-orange guide-copyable " data-copy-value="32px" title="Click para copiar 32px">32px</td>
|
|
1515
|
+
</tr>
|
|
1516
|
+
<tr>
|
|
1517
|
+
<td class="guide-table-name guide-copyable " data-copy-value="--hg-typo-font-size-48" title="Click para copiar --hg-typo-font-size-48">--hg-typo-font-size-48</td>
|
|
1518
|
+
<td class="guide-table-value guide-copyable " data-copy-value="3rem" title="Click para copiar 3rem">3rem</td>
|
|
1519
|
+
<td class="guide-value-center-blue guide-copyable " data-copy-value="3rem" title="Click para copiar 3rem">3rem</td>
|
|
1520
|
+
<td class="guide-value-center-orange guide-copyable " data-copy-value="48px" title="Click para copiar 48px">48px</td>
|
|
1521
|
+
</tr>
|
|
1522
|
+
<tr>
|
|
1523
|
+
<td class="guide-table-name guide-copyable " data-copy-value="--hg-spacing-0" title="Click para copiar --hg-spacing-0">--hg-spacing-0</td>
|
|
1524
|
+
<td class="guide-table-value guide-copyable " data-copy-value="0" title="Click para copiar 0">0</td>
|
|
1525
|
+
<td class="guide-value-center-blue guide-copyable " data-copy-value="-" title="Click para copiar -">-</td>
|
|
1526
|
+
<td class="guide-value-center-orange guide-copyable " data-copy-value="-" title="Click para copiar -">-</td>
|
|
1527
|
+
</tr>
|
|
1528
|
+
<tr>
|
|
1529
|
+
<td class="guide-table-name guide-copyable " data-copy-value="--hg-spacing-4" title="Click para copiar --hg-spacing-4">--hg-spacing-4</td>
|
|
1530
|
+
<td class="guide-table-value guide-copyable " data-copy-value="0.25rem" title="Click para copiar 0.25rem">0.25rem</td>
|
|
1531
|
+
<td class="guide-value-center-blue guide-copyable " data-copy-value="0.25rem" title="Click para copiar 0.25rem">0.25rem</td>
|
|
1532
|
+
<td class="guide-value-center-orange guide-copyable " data-copy-value="4px" title="Click para copiar 4px">4px</td>
|
|
1533
|
+
</tr>
|
|
1534
|
+
<tr>
|
|
1535
|
+
<td class="guide-table-name guide-copyable " data-copy-value="--hg-spacing-8" title="Click para copiar --hg-spacing-8">--hg-spacing-8</td>
|
|
1536
|
+
<td class="guide-table-value guide-copyable " data-copy-value="0.5rem" title="Click para copiar 0.5rem">0.5rem</td>
|
|
1537
|
+
<td class="guide-value-center-blue guide-copyable " data-copy-value="0.5rem" title="Click para copiar 0.5rem">0.5rem</td>
|
|
1538
|
+
<td class="guide-value-center-orange guide-copyable " data-copy-value="8px" title="Click para copiar 8px">8px</td>
|
|
1539
|
+
</tr>
|
|
1540
|
+
<tr>
|
|
1541
|
+
<td class="guide-table-name guide-copyable " data-copy-value="--hg-spacing-12" title="Click para copiar --hg-spacing-12">--hg-spacing-12</td>
|
|
1542
|
+
<td class="guide-table-value guide-copyable " data-copy-value="0.75rem" title="Click para copiar 0.75rem">0.75rem</td>
|
|
1543
|
+
<td class="guide-value-center-blue guide-copyable " data-copy-value="0.75rem" title="Click para copiar 0.75rem">0.75rem</td>
|
|
1544
|
+
<td class="guide-value-center-orange guide-copyable " data-copy-value="12px" title="Click para copiar 12px">12px</td>
|
|
1545
|
+
</tr>
|
|
1546
|
+
<tr>
|
|
1547
|
+
<td class="guide-table-name guide-copyable " data-copy-value="--hg-spacing-16" title="Click para copiar --hg-spacing-16">--hg-spacing-16</td>
|
|
1548
|
+
<td class="guide-table-value guide-copyable " data-copy-value="1rem" title="Click para copiar 1rem">1rem</td>
|
|
1549
|
+
<td class="guide-value-center-blue guide-copyable " data-copy-value="1rem" title="Click para copiar 1rem">1rem</td>
|
|
1550
|
+
<td class="guide-value-center-orange guide-copyable " data-copy-value="16px" title="Click para copiar 16px">16px</td>
|
|
1551
|
+
</tr>
|
|
1552
|
+
<tr>
|
|
1553
|
+
<td class="guide-table-name guide-copyable " data-copy-value="--hg-spacing-20" title="Click para copiar --hg-spacing-20">--hg-spacing-20</td>
|
|
1554
|
+
<td class="guide-table-value guide-copyable " data-copy-value="1.25rem" title="Click para copiar 1.25rem">1.25rem</td>
|
|
1555
|
+
<td class="guide-value-center-blue guide-copyable " data-copy-value="1.25rem" title="Click para copiar 1.25rem">1.25rem</td>
|
|
1556
|
+
<td class="guide-value-center-orange guide-copyable " data-copy-value="20px" title="Click para copiar 20px">20px</td>
|
|
1557
|
+
</tr>
|
|
1558
|
+
<tr>
|
|
1559
|
+
<td class="guide-table-name guide-copyable " data-copy-value="--hg-spacing-24" title="Click para copiar --hg-spacing-24">--hg-spacing-24</td>
|
|
1560
|
+
<td class="guide-table-value guide-copyable " data-copy-value="1.5rem" title="Click para copiar 1.5rem">1.5rem</td>
|
|
1561
|
+
<td class="guide-value-center-blue guide-copyable " data-copy-value="1.5rem" title="Click para copiar 1.5rem">1.5rem</td>
|
|
1562
|
+
<td class="guide-value-center-orange guide-copyable " data-copy-value="24px" title="Click para copiar 24px">24px</td>
|
|
1563
|
+
</tr>
|
|
1564
|
+
<tr>
|
|
1565
|
+
<td class="guide-table-name guide-copyable " data-copy-value="--hg-spacing-32" title="Click para copiar --hg-spacing-32">--hg-spacing-32</td>
|
|
1566
|
+
<td class="guide-table-value guide-copyable " data-copy-value="2rem" title="Click para copiar 2rem">2rem</td>
|
|
1567
|
+
<td class="guide-value-center-blue guide-copyable " data-copy-value="2rem" title="Click para copiar 2rem">2rem</td>
|
|
1568
|
+
<td class="guide-value-center-orange guide-copyable " data-copy-value="32px" title="Click para copiar 32px">32px</td>
|
|
1569
|
+
</tr>
|
|
1570
|
+
<tr>
|
|
1571
|
+
<td class="guide-table-name guide-copyable " data-copy-value="--hg-spacing-36" title="Click para copiar --hg-spacing-36">--hg-spacing-36</td>
|
|
1572
|
+
<td class="guide-table-value guide-copyable " data-copy-value="2.25rem" title="Click para copiar 2.25rem">2.25rem</td>
|
|
1573
|
+
<td class="guide-value-center-blue guide-copyable " data-copy-value="2.25rem" title="Click para copiar 2.25rem">2.25rem</td>
|
|
1574
|
+
<td class="guide-value-center-orange guide-copyable " data-copy-value="36px" title="Click para copiar 36px">36px</td>
|
|
1575
|
+
</tr>
|
|
1576
|
+
<tr>
|
|
1577
|
+
<td class="guide-table-name guide-copyable " data-copy-value="--hg-spacing-40" title="Click para copiar --hg-spacing-40">--hg-spacing-40</td>
|
|
1578
|
+
<td class="guide-table-value guide-copyable " data-copy-value="2.5rem" title="Click para copiar 2.5rem">2.5rem</td>
|
|
1579
|
+
<td class="guide-value-center-blue guide-copyable " data-copy-value="2.5rem" title="Click para copiar 2.5rem">2.5rem</td>
|
|
1580
|
+
<td class="guide-value-center-orange guide-copyable " data-copy-value="40px" title="Click para copiar 40px">40px</td>
|
|
1581
|
+
</tr>
|
|
1582
|
+
<tr>
|
|
1583
|
+
<td class="guide-table-name guide-copyable " data-copy-value="--hg-spacing-64" title="Click para copiar --hg-spacing-64">--hg-spacing-64</td>
|
|
1584
|
+
<td class="guide-table-value guide-copyable " data-copy-value="4rem" title="Click para copiar 4rem">4rem</td>
|
|
1585
|
+
<td class="guide-value-center-blue guide-copyable " data-copy-value="4rem" title="Click para copiar 4rem">4rem</td>
|
|
1586
|
+
<td class="guide-value-center-orange guide-copyable " data-copy-value="64px" title="Click para copiar 64px">64px</td>
|
|
1587
|
+
</tr>
|
|
1588
|
+
<tr>
|
|
1589
|
+
<td class="guide-table-name guide-copyable " data-copy-value="--hg-spacing-72" title="Click para copiar --hg-spacing-72">--hg-spacing-72</td>
|
|
1590
|
+
<td class="guide-table-value guide-copyable " data-copy-value="4.5rem" title="Click para copiar 4.5rem">4.5rem</td>
|
|
1591
|
+
<td class="guide-value-center-blue guide-copyable " data-copy-value="4.5rem" title="Click para copiar 4.5rem">4.5rem</td>
|
|
1592
|
+
<td class="guide-value-center-orange guide-copyable " data-copy-value="72px" title="Click para copiar 72px">72px</td>
|
|
1593
|
+
</tr>
|
|
1594
|
+
<tr>
|
|
1595
|
+
<td class="guide-table-name guide-copyable " data-copy-value="--hg-spacing-80" title="Click para copiar --hg-spacing-80">--hg-spacing-80</td>
|
|
1596
|
+
<td class="guide-table-value guide-copyable " data-copy-value="5rem" title="Click para copiar 5rem">5rem</td>
|
|
1597
|
+
<td class="guide-value-center-blue guide-copyable " data-copy-value="5rem" title="Click para copiar 5rem">5rem</td>
|
|
1598
|
+
<td class="guide-value-center-orange guide-copyable " data-copy-value="80px" title="Click para copiar 80px">80px</td>
|
|
1599
|
+
</tr>
|
|
1600
|
+
<tr>
|
|
1601
|
+
<td class="guide-table-name guide-copyable " data-copy-value="--hg-spacing-88" title="Click para copiar --hg-spacing-88">--hg-spacing-88</td>
|
|
1602
|
+
<td class="guide-table-value guide-copyable " data-copy-value="5.5rem" title="Click para copiar 5.5rem">5.5rem</td>
|
|
1603
|
+
<td class="guide-value-center-blue guide-copyable " data-copy-value="5.5rem" title="Click para copiar 5.5rem">5.5rem</td>
|
|
1604
|
+
<td class="guide-value-center-orange guide-copyable " data-copy-value="88px" title="Click para copiar 88px">88px</td>
|
|
1605
|
+
</tr>
|
|
1606
|
+
<tr>
|
|
1607
|
+
<td class="guide-table-name guide-copyable " data-copy-value="--hg-spacing-96" title="Click para copiar --hg-spacing-96">--hg-spacing-96</td>
|
|
1608
|
+
<td class="guide-table-value guide-copyable " data-copy-value="6rem" title="Click para copiar 6rem">6rem</td>
|
|
1609
|
+
<td class="guide-value-center-blue guide-copyable " data-copy-value="6rem" title="Click para copiar 6rem">6rem</td>
|
|
1610
|
+
<td class="guide-value-center-orange guide-copyable " data-copy-value="96px" title="Click para copiar 96px">96px</td>
|
|
1611
|
+
</tr>
|
|
1612
|
+
<tr>
|
|
1613
|
+
<td class="guide-table-name guide-copyable " data-copy-value="--hg-spacing-104" title="Click para copiar --hg-spacing-104">--hg-spacing-104</td>
|
|
1614
|
+
<td class="guide-table-value guide-copyable " data-copy-value="6.5rem" title="Click para copiar 6.5rem">6.5rem</td>
|
|
1615
|
+
<td class="guide-value-center-blue guide-copyable " data-copy-value="6.5rem" title="Click para copiar 6.5rem">6.5rem</td>
|
|
1616
|
+
<td class="guide-value-center-orange guide-copyable " data-copy-value="104px" title="Click para copiar 104px">104px</td>
|
|
1617
|
+
</tr>
|
|
1618
|
+
<tr>
|
|
1619
|
+
<td class="guide-table-name guide-copyable " data-copy-value="--hg-spacing-112" title="Click para copiar --hg-spacing-112">--hg-spacing-112</td>
|
|
1620
|
+
<td class="guide-table-value guide-copyable " data-copy-value="7rem" title="Click para copiar 7rem">7rem</td>
|
|
1621
|
+
<td class="guide-value-center-blue guide-copyable " data-copy-value="7rem" title="Click para copiar 7rem">7rem</td>
|
|
1622
|
+
<td class="guide-value-center-orange guide-copyable " data-copy-value="112px" title="Click para copiar 112px">112px</td>
|
|
1623
|
+
</tr>
|
|
1624
|
+
<tr>
|
|
1625
|
+
<td class="guide-table-name guide-copyable " data-copy-value="--hg-spacing-120" title="Click para copiar --hg-spacing-120">--hg-spacing-120</td>
|
|
1626
|
+
<td class="guide-table-value guide-copyable " data-copy-value="7.5rem" title="Click para copiar 7.5rem">7.5rem</td>
|
|
1627
|
+
<td class="guide-value-center-blue guide-copyable " data-copy-value="7.5rem" title="Click para copiar 7.5rem">7.5rem</td>
|
|
1628
|
+
<td class="guide-value-center-orange guide-copyable " data-copy-value="120px" title="Click para copiar 120px">120px</td>
|
|
1629
|
+
</tr>
|
|
1630
|
+
<tr>
|
|
1631
|
+
<td class="guide-table-name guide-copyable " data-copy-value="--hg-spacing-128" title="Click para copiar --hg-spacing-128">--hg-spacing-128</td>
|
|
1632
|
+
<td class="guide-table-value guide-copyable " data-copy-value="8rem" title="Click para copiar 8rem">8rem</td>
|
|
1633
|
+
<td class="guide-value-center-blue guide-copyable " data-copy-value="8rem" title="Click para copiar 8rem">8rem</td>
|
|
1634
|
+
<td class="guide-value-center-orange guide-copyable " data-copy-value="128px" title="Click para copiar 128px">128px</td>
|
|
1635
|
+
</tr>
|
|
1636
|
+
<tr>
|
|
1637
|
+
<td class="guide-table-name guide-copyable " data-copy-value="--hg-spacing-136" title="Click para copiar --hg-spacing-136">--hg-spacing-136</td>
|
|
1638
|
+
<td class="guide-table-value guide-copyable " data-copy-value="8.5rem" title="Click para copiar 8.5rem">8.5rem</td>
|
|
1639
|
+
<td class="guide-value-center-blue guide-copyable " data-copy-value="8.5rem" title="Click para copiar 8.5rem">8.5rem</td>
|
|
1640
|
+
<td class="guide-value-center-orange guide-copyable " data-copy-value="136px" title="Click para copiar 136px">136px</td>
|
|
1641
|
+
</tr>
|
|
1642
|
+
<tr>
|
|
1643
|
+
<td class="guide-table-name guide-copyable " data-copy-value="--hg-spacing-144" title="Click para copiar --hg-spacing-144">--hg-spacing-144</td>
|
|
1644
|
+
<td class="guide-table-value guide-copyable " data-copy-value="9rem" title="Click para copiar 9rem">9rem</td>
|
|
1645
|
+
<td class="guide-value-center-blue guide-copyable " data-copy-value="9rem" title="Click para copiar 9rem">9rem</td>
|
|
1646
|
+
<td class="guide-value-center-orange guide-copyable " data-copy-value="144px" title="Click para copiar 144px">144px</td>
|
|
1647
|
+
</tr>
|
|
1648
|
+
<tr>
|
|
1649
|
+
<td class="guide-table-name guide-copyable " data-copy-value="--hg-spacing-152" title="Click para copiar --hg-spacing-152">--hg-spacing-152</td>
|
|
1650
|
+
<td class="guide-table-value guide-copyable " data-copy-value="9.5rem" title="Click para copiar 9.5rem">9.5rem</td>
|
|
1651
|
+
<td class="guide-value-center-blue guide-copyable " data-copy-value="9.5rem" title="Click para copiar 9.5rem">9.5rem</td>
|
|
1652
|
+
<td class="guide-value-center-orange guide-copyable " data-copy-value="152px" title="Click para copiar 152px">152px</td>
|
|
1653
|
+
</tr>
|
|
1654
|
+
<tr>
|
|
1655
|
+
<td class="guide-table-name guide-copyable " data-copy-value="--hg-spacing-160" title="Click para copiar --hg-spacing-160">--hg-spacing-160</td>
|
|
1656
|
+
<td class="guide-table-value guide-copyable " data-copy-value="10rem" title="Click para copiar 10rem">10rem</td>
|
|
1657
|
+
<td class="guide-value-center-blue guide-copyable " data-copy-value="10rem" title="Click para copiar 10rem">10rem</td>
|
|
1658
|
+
<td class="guide-value-center-orange guide-copyable " data-copy-value="160px" title="Click para copiar 160px">160px</td>
|
|
1659
|
+
</tr>
|
|
1660
|
+
<tr>
|
|
1661
|
+
<td class="guide-table-name guide-copyable " data-copy-value="--hg-spacing-20-percent" title="Click para copiar --hg-spacing-20-percent">--hg-spacing-20-percent</td>
|
|
1662
|
+
<td class="guide-table-value guide-copyable " data-copy-value="20%" title="Click para copiar 20%">20%</td>
|
|
1663
|
+
<td class="guide-value-center-blue guide-copyable " data-copy-value="-" title="Click para copiar -">-</td>
|
|
1664
|
+
<td class="guide-value-center-orange guide-copyable " data-copy-value="-" title="Click para copiar -">-</td>
|
|
1665
|
+
</tr>
|
|
1666
|
+
<tr>
|
|
1667
|
+
<td class="guide-table-name guide-copyable " data-copy-value="--hg-spacing-25-percent" title="Click para copiar --hg-spacing-25-percent">--hg-spacing-25-percent</td>
|
|
1668
|
+
<td class="guide-table-value guide-copyable " data-copy-value="25%" title="Click para copiar 25%">25%</td>
|
|
1669
|
+
<td class="guide-value-center-blue guide-copyable " data-copy-value="-" title="Click para copiar -">-</td>
|
|
1670
|
+
<td class="guide-value-center-orange guide-copyable " data-copy-value="-" title="Click para copiar -">-</td>
|
|
1671
|
+
</tr>
|
|
1672
|
+
<tr>
|
|
1673
|
+
<td class="guide-table-name guide-copyable " data-copy-value="--hg-spacing-33-percent" title="Click para copiar --hg-spacing-33-percent">--hg-spacing-33-percent</td>
|
|
1674
|
+
<td class="guide-table-value guide-copyable " data-copy-value="33.333333%" title="Click para copiar 33.333333%">33.333333%</td>
|
|
1675
|
+
<td class="guide-value-center-blue guide-copyable " data-copy-value="-" title="Click para copiar -">-</td>
|
|
1676
|
+
<td class="guide-value-center-orange guide-copyable " data-copy-value="-" title="Click para copiar -">-</td>
|
|
1677
|
+
</tr>
|
|
1678
|
+
<tr>
|
|
1679
|
+
<td class="guide-table-name guide-copyable " data-copy-value="--hg-spacing-40-percent" title="Click para copiar --hg-spacing-40-percent">--hg-spacing-40-percent</td>
|
|
1680
|
+
<td class="guide-table-value guide-copyable " data-copy-value="40%" title="Click para copiar 40%">40%</td>
|
|
1681
|
+
<td class="guide-value-center-blue guide-copyable " data-copy-value="-" title="Click para copiar -">-</td>
|
|
1682
|
+
<td class="guide-value-center-orange guide-copyable " data-copy-value="-" title="Click para copiar -">-</td>
|
|
1683
|
+
</tr>
|
|
1684
|
+
<tr>
|
|
1685
|
+
<td class="guide-table-name guide-copyable " data-copy-value="--hg-spacing-50-percent" title="Click para copiar --hg-spacing-50-percent">--hg-spacing-50-percent</td>
|
|
1686
|
+
<td class="guide-table-value guide-copyable " data-copy-value="50%" title="Click para copiar 50%">50%</td>
|
|
1687
|
+
<td class="guide-value-center-blue guide-copyable " data-copy-value="-" title="Click para copiar -">-</td>
|
|
1688
|
+
<td class="guide-value-center-orange guide-copyable " data-copy-value="-" title="Click para copiar -">-</td>
|
|
1689
|
+
</tr>
|
|
1690
|
+
<tr>
|
|
1691
|
+
<td class="guide-table-name guide-copyable " data-copy-value="--hg-spacing-60-percent" title="Click para copiar --hg-spacing-60-percent">--hg-spacing-60-percent</td>
|
|
1692
|
+
<td class="guide-table-value guide-copyable " data-copy-value="60%" title="Click para copiar 60%">60%</td>
|
|
1693
|
+
<td class="guide-value-center-blue guide-copyable " data-copy-value="-" title="Click para copiar -">-</td>
|
|
1694
|
+
<td class="guide-value-center-orange guide-copyable " data-copy-value="-" title="Click para copiar -">-</td>
|
|
1695
|
+
</tr>
|
|
1696
|
+
<tr>
|
|
1697
|
+
<td class="guide-table-name guide-copyable " data-copy-value="--hg-spacing-66-percent" title="Click para copiar --hg-spacing-66-percent">--hg-spacing-66-percent</td>
|
|
1698
|
+
<td class="guide-table-value guide-copyable " data-copy-value="66.666667%" title="Click para copiar 66.666667%">66.666667%</td>
|
|
1699
|
+
<td class="guide-value-center-blue guide-copyable " data-copy-value="-" title="Click para copiar -">-</td>
|
|
1700
|
+
<td class="guide-value-center-orange guide-copyable " data-copy-value="-" title="Click para copiar -">-</td>
|
|
1701
|
+
</tr>
|
|
1702
|
+
<tr>
|
|
1703
|
+
<td class="guide-table-name guide-copyable " data-copy-value="--hg-spacing-75-percent" title="Click para copiar --hg-spacing-75-percent">--hg-spacing-75-percent</td>
|
|
1704
|
+
<td class="guide-table-value guide-copyable " data-copy-value="75%" title="Click para copiar 75%">75%</td>
|
|
1705
|
+
<td class="guide-value-center-blue guide-copyable " data-copy-value="-" title="Click para copiar -">-</td>
|
|
1706
|
+
<td class="guide-value-center-orange guide-copyable " data-copy-value="-" title="Click para copiar -">-</td>
|
|
1707
|
+
</tr>
|
|
1708
|
+
<tr>
|
|
1709
|
+
<td class="guide-table-name guide-copyable " data-copy-value="--hg-spacing-100-percent" title="Click para copiar --hg-spacing-100-percent">--hg-spacing-100-percent</td>
|
|
1710
|
+
<td class="guide-table-value guide-copyable " data-copy-value="100%" title="Click para copiar 100%">100%</td>
|
|
1711
|
+
<td class="guide-value-center-blue guide-copyable " data-copy-value="-" title="Click para copiar -">-</td>
|
|
1712
|
+
<td class="guide-value-center-orange guide-copyable " data-copy-value="-" title="Click para copiar -">-</td>
|
|
1713
|
+
</tr>
|
|
1714
|
+
<tr>
|
|
1715
|
+
<td class="guide-table-name guide-copyable " data-copy-value="--hg-color-white" title="Click para copiar --hg-color-white">--hg-color-white</td>
|
|
1716
|
+
<td class="guide-table-value guide-copyable " data-copy-value="#ffffff" title="Click para copiar #ffffff">#ffffff</td>
|
|
1717
|
+
<td class="guide-value-center-blue guide-copyable " data-copy-value="-" title="Click para copiar -">-</td>
|
|
1718
|
+
<td class="guide-value-center-orange guide-copyable " data-copy-value="-" title="Click para copiar -">-</td>
|
|
1719
|
+
</tr>
|
|
1720
|
+
<tr>
|
|
1721
|
+
<td class="guide-table-name guide-copyable " data-copy-value="--hg-color-black" title="Click para copiar --hg-color-black">--hg-color-black</td>
|
|
1722
|
+
<td class="guide-table-value guide-copyable " data-copy-value="#000000" title="Click para copiar #000000">#000000</td>
|
|
1723
|
+
<td class="guide-value-center-blue guide-copyable " data-copy-value="-" title="Click para copiar -">-</td>
|
|
1724
|
+
<td class="guide-value-center-orange guide-copyable " data-copy-value="-" title="Click para copiar -">-</td>
|
|
1725
|
+
</tr>
|
|
1726
|
+
<tr>
|
|
1727
|
+
<td class="guide-table-name guide-copyable " data-copy-value="--hg-color-dark-grey" title="Click para copiar --hg-color-dark-grey">--hg-color-dark-grey</td>
|
|
1728
|
+
<td class="guide-table-value guide-copyable " data-copy-value="#737373" title="Click para copiar #737373">#737373</td>
|
|
1729
|
+
<td class="guide-value-center-blue guide-copyable " data-copy-value="-" title="Click para copiar -">-</td>
|
|
1730
|
+
<td class="guide-value-center-orange guide-copyable " data-copy-value="-" title="Click para copiar -">-</td>
|
|
1731
|
+
</tr>
|
|
1732
|
+
<tr>
|
|
1733
|
+
<td class="guide-table-name guide-copyable " data-copy-value="--hg-color-middle-grey" title="Click para copiar --hg-color-middle-grey">--hg-color-middle-grey</td>
|
|
1734
|
+
<td class="guide-table-value guide-copyable " data-copy-value="#a9a9a9" title="Click para copiar #a9a9a9">#a9a9a9</td>
|
|
1735
|
+
<td class="guide-value-center-blue guide-copyable " data-copy-value="-" title="Click para copiar -">-</td>
|
|
1736
|
+
<td class="guide-value-center-orange guide-copyable " data-copy-value="-" title="Click para copiar -">-</td>
|
|
1737
|
+
</tr>
|
|
1738
|
+
<tr>
|
|
1739
|
+
<td class="guide-table-name guide-copyable " data-copy-value="--hg-color-light-grey" title="Click para copiar --hg-color-light-grey">--hg-color-light-grey</td>
|
|
1740
|
+
<td class="guide-table-value guide-copyable " data-copy-value="#f0f0f0" title="Click para copiar #f0f0f0">#f0f0f0</td>
|
|
1741
|
+
<td class="guide-value-center-blue guide-copyable " data-copy-value="-" title="Click para copiar -">-</td>
|
|
1742
|
+
<td class="guide-value-center-orange guide-copyable " data-copy-value="-" title="Click para copiar -">-</td>
|
|
1743
|
+
</tr>
|
|
1744
|
+
<tr>
|
|
1745
|
+
<td class="guide-table-name guide-copyable " data-copy-value="--hg-color-primary" title="Click para copiar --hg-color-primary">--hg-color-primary</td>
|
|
1746
|
+
<td class="guide-table-value guide-copyable " data-copy-value="#000000" title="Click para copiar #000000">#000000</td>
|
|
1747
|
+
<td class="guide-value-center-blue guide-copyable " data-copy-value="-" title="Click para copiar -">-</td>
|
|
1748
|
+
<td class="guide-value-center-orange guide-copyable " data-copy-value="-" title="Click para copiar -">-</td>
|
|
1749
|
+
</tr>
|
|
1750
|
+
<tr>
|
|
1751
|
+
<td class="guide-table-name guide-copyable " data-copy-value="--hg-color-error" title="Click para copiar --hg-color-error">--hg-color-error</td>
|
|
1752
|
+
<td class="guide-table-value guide-copyable " data-copy-value="#b40016" title="Click para copiar #b40016">#b40016</td>
|
|
1753
|
+
<td class="guide-value-center-blue guide-copyable " data-copy-value="-" title="Click para copiar -">-</td>
|
|
1754
|
+
<td class="guide-value-center-orange guide-copyable " data-copy-value="-" title="Click para copiar -">-</td>
|
|
1755
|
+
</tr>
|
|
1756
|
+
<tr>
|
|
1757
|
+
<td class="guide-table-name guide-copyable " data-copy-value="--hg-color-info" title="Click para copiar --hg-color-info">--hg-color-info</td>
|
|
1758
|
+
<td class="guide-table-value guide-copyable " data-copy-value="#1a32a4" title="Click para copiar #1a32a4">#1a32a4</td>
|
|
1759
|
+
<td class="guide-value-center-blue guide-copyable " data-copy-value="-" title="Click para copiar -">-</td>
|
|
1760
|
+
<td class="guide-value-center-orange guide-copyable " data-copy-value="-" title="Click para copiar -">-</td>
|
|
1761
|
+
</tr>
|
|
1762
|
+
<tr>
|
|
1763
|
+
<td class="guide-table-name guide-copyable " data-copy-value="--hg-color-success" title="Click para copiar --hg-color-success">--hg-color-success</td>
|
|
1764
|
+
<td class="guide-table-value guide-copyable " data-copy-value="#76ae4a" title="Click para copiar #76ae4a">#76ae4a</td>
|
|
1765
|
+
<td class="guide-value-center-blue guide-copyable " data-copy-value="-" title="Click para copiar -">-</td>
|
|
1766
|
+
<td class="guide-value-center-orange guide-copyable " data-copy-value="-" title="Click para copiar -">-</td>
|
|
1767
|
+
</tr>
|
|
1768
|
+
<tr>
|
|
1769
|
+
<td class="guide-table-name guide-copyable " data-copy-value="--hg-color-warning" title="Click para copiar --hg-color-warning">--hg-color-warning</td>
|
|
1770
|
+
<td class="guide-table-value guide-copyable " data-copy-value="#ffc700" title="Click para copiar #ffc700">#ffc700</td>
|
|
1771
|
+
<td class="guide-value-center-blue guide-copyable " data-copy-value="-" title="Click para copiar -">-</td>
|
|
1772
|
+
<td class="guide-value-center-orange guide-copyable " data-copy-value="-" title="Click para copiar -">-</td>
|
|
1773
|
+
</tr>
|
|
1774
|
+
<tr>
|
|
1775
|
+
<td class="guide-table-name guide-copyable " data-copy-value="--hg-color-feel" title="Click para copiar --hg-color-feel">--hg-color-feel</td>
|
|
1776
|
+
<td class="guide-table-value guide-copyable " data-copy-value="#fb9962" title="Click para copiar #fb9962">#fb9962</td>
|
|
1777
|
+
<td class="guide-value-center-blue guide-copyable " data-copy-value="-" title="Click para copiar -">-</td>
|
|
1778
|
+
<td class="guide-value-center-orange guide-copyable " data-copy-value="-" title="Click para copiar -">-</td>
|
|
1779
|
+
</tr>
|
|
1780
|
+
<tr>
|
|
1781
|
+
<td class="guide-table-name guide-copyable " data-copy-value="--hg-color-feel-dark" title="Click para copiar --hg-color-feel-dark">--hg-color-feel-dark</td>
|
|
1782
|
+
<td class="guide-table-value guide-copyable " data-copy-value="#c94c07" title="Click para copiar #c94c07">#c94c07</td>
|
|
1783
|
+
<td class="guide-value-center-blue guide-copyable " data-copy-value="-" title="Click para copiar -">-</td>
|
|
1784
|
+
<td class="guide-value-center-orange guide-copyable " data-copy-value="-" title="Click para copiar -">-</td>
|
|
1785
|
+
</tr>
|
|
1786
|
+
<tr>
|
|
1787
|
+
<td class="guide-table-name guide-copyable " data-copy-value="--hg-color-special" title="Click para copiar --hg-color-special">--hg-color-special</td>
|
|
1788
|
+
<td class="guide-table-value guide-copyable " data-copy-value="#b99d6b" title="Click para copiar #b99d6b">#b99d6b</td>
|
|
1789
|
+
<td class="guide-value-center-blue guide-copyable " data-copy-value="-" title="Click para copiar -">-</td>
|
|
1790
|
+
<td class="guide-value-center-orange guide-copyable " data-copy-value="-" title="Click para copiar -">-</td>
|
|
1791
|
+
</tr>
|
|
1792
|
+
<tr>
|
|
1793
|
+
<td class="guide-table-name guide-copyable " data-copy-value="--hg-color-bg-light" title="Click para copiar --hg-color-bg-light">--hg-color-bg-light</td>
|
|
1794
|
+
<td class="guide-table-value guide-copyable " data-copy-value="#F0F0F0" title="Click para copiar #F0F0F0">#F0F0F0</td>
|
|
1795
|
+
<td class="guide-value-center-blue guide-copyable " data-copy-value="-" title="Click para copiar -">-</td>
|
|
1796
|
+
<td class="guide-value-center-orange guide-copyable " data-copy-value="-" title="Click para copiar -">-</td>
|
|
1797
|
+
</tr>
|
|
1798
|
+
<tr>
|
|
1799
|
+
<td class="guide-table-name guide-copyable " data-copy-value="--hg-color-c-bg-light" title="Click para copiar --hg-color-c-bg-light">--hg-color-c-bg-light</td>
|
|
1800
|
+
<td class="guide-table-value guide-copyable " data-copy-value="#000000" title="Click para copiar #000000">#000000</td>
|
|
1801
|
+
<td class="guide-value-center-blue guide-copyable " data-copy-value="-" title="Click para copiar -">-</td>
|
|
1802
|
+
<td class="guide-value-center-orange guide-copyable " data-copy-value="-" title="Click para copiar -">-</td>
|
|
1803
|
+
</tr>
|
|
1804
|
+
<tr>
|
|
1805
|
+
<td class="guide-table-name guide-copyable " data-copy-value="--hg-color-sk-grey" title="Click para copiar --hg-color-sk-grey">--hg-color-sk-grey</td>
|
|
1806
|
+
<td class="guide-table-value guide-copyable " data-copy-value="#e3e3e3" title="Click para copiar #e3e3e3">#e3e3e3</td>
|
|
1807
|
+
<td class="guide-value-center-blue guide-copyable " data-copy-value="-" title="Click para copiar -">-</td>
|
|
1808
|
+
<td class="guide-value-center-orange guide-copyable " data-copy-value="-" title="Click para copiar -">-</td>
|
|
1809
|
+
</tr>
|
|
1810
|
+
<tr>
|
|
1811
|
+
<td class="guide-table-name guide-copyable " data-copy-value="--hg-color-bg-cream" title="Click para copiar --hg-color-bg-cream">--hg-color-bg-cream</td>
|
|
1812
|
+
<td class="guide-table-value guide-copyable " data-copy-value="#f4f2ed" title="Click para copiar #f4f2ed">#f4f2ed</td>
|
|
1813
|
+
<td class="guide-value-center-blue guide-copyable " data-copy-value="-" title="Click para copiar -">-</td>
|
|
1814
|
+
<td class="guide-value-center-orange guide-copyable " data-copy-value="-" title="Click para copiar -">-</td>
|
|
1815
|
+
</tr>
|
|
1816
|
+
</tbody>
|
|
1817
|
+
</table>
|
|
1818
|
+
</div>
|
|
1819
|
+
</div>
|
|
1820
|
+
</div>
|
|
1821
|
+
|
|
1822
|
+
|
|
1823
|
+
|
|
1824
|
+
<div class="guide-section" id="spacing">
|
|
1825
|
+
<div class="guide-section-title">
|
|
1826
|
+
<h2 >Helpers de Spacing</h2>
|
|
1827
|
+
<p class="text-m guide-section-description">
|
|
1828
|
+
Clases helper para padding y margin basadas en el spacingMap.
|
|
1829
|
+
Usa las variables CSS definidas en :root.
|
|
1830
|
+
</p>
|
|
1831
|
+
</div>
|
|
1832
|
+
<div class="guide-section-content">
|
|
1833
|
+
<div class="guide-info-box guide-info-box-warning hg-d-flex">
|
|
1834
|
+
|
|
1835
|
+
|
|
1836
|
+
|
|
1837
|
+
|
|
1838
|
+
<div class="guide-spacing-text">
|
|
1839
|
+
<h3 class="guide-info-box-title guide-info-box-title-warning">¿Cómo se generan los helpers de espaciado?</h3>
|
|
1840
|
+
<p class="text-m guide-info-box-text">
|
|
1841
|
+
La nomenclatura de las clases helper sigue un patrón simple:
|
|
1842
|
+
</p>
|
|
1843
|
+
<ul class="guide-info-box-list">
|
|
1844
|
+
<li class="text-m guide-info-box-list-item">
|
|
1845
|
+
<strong>Primera letra:</strong> tipo de spacing → <code class="guide-info-box-code">p</code> (padding) o <code class="guide-info-box-code">m</code> (margin)
|
|
1846
|
+
</li>
|
|
1847
|
+
<li class="text-m guide-info-box-list-item">
|
|
1848
|
+
<strong>Segunda letra:</strong> dirección → <code class="guide-info-box-code">t</code> (top), <code class="guide-info-box-code">r</code> (right/end), <code class="guide-info-box-code">b</code> (bottom), <code class="guide-info-box-code">l</code> (left/start)
|
|
1849
|
+
</li>
|
|
1850
|
+
<li class="text-m guide-info-box-list-item">
|
|
1851
|
+
<strong>Guión + valor:</strong> el valor del spacing → <code class="guide-info-box-code">-4</code>, <code class="guide-info-box-code">-16</code>, <code class="guide-info-box-code">-50-percent</code>
|
|
1852
|
+
</li>
|
|
1853
|
+
</ul>
|
|
1854
|
+
<p class="text-m guide-info-box-text">
|
|
1855
|
+
<strong>Ejemplos:</strong> <code class="guide-info-box-code">.p-16</code> (padding all), <code class="guide-info-box-code">.pt-8</code> (padding-top), <code class="guide-info-box-code">.mr-4</code> (margin-right), <code class="guide-info-box-code">.mb-0</code> (margin-bottom)
|
|
1856
|
+
</p>
|
|
1857
|
+
</div>
|
|
1858
|
+
|
|
1859
|
+
|
|
1860
|
+
<div class="guide-spacing-diagram">
|
|
1861
|
+
<div class="guide-spacing-diagram-container">
|
|
1862
|
+
<!-- Etiquetas de margin (exterior) -->
|
|
1863
|
+
<div class="guide-spacing-label guide-spacing-label-top guide-spacing-label-margin">mt-</div>
|
|
1864
|
+
<div class="guide-spacing-label guide-spacing-label-right guide-spacing-label-margin">mr-</div>
|
|
1865
|
+
<div class="guide-spacing-label guide-spacing-label-bottom guide-spacing-label-margin">mb-</div>
|
|
1866
|
+
<div class="guide-spacing-label guide-spacing-label-left guide-spacing-label-margin">ml-</div>
|
|
1867
|
+
|
|
1868
|
+
<!-- Caja de margin (exterior) -->
|
|
1869
|
+
<div class="guide-spacing-margin-box"></div>
|
|
1870
|
+
|
|
1871
|
+
<!-- Etiquetas de padding (interior) -->
|
|
1872
|
+
<div class="guide-spacing-label guide-spacing-label-padding guide-spacing-label-padding-top">pt-</div>
|
|
1873
|
+
<div class="guide-spacing-label guide-spacing-label-padding guide-spacing-label-padding-right">pr-</div>
|
|
1874
|
+
<div class="guide-spacing-label guide-spacing-label-padding guide-spacing-label-padding-bottom">pb-</div>
|
|
1875
|
+
<div class="guide-spacing-label guide-spacing-label-padding guide-spacing-label-padding-left">pl-</div>
|
|
1876
|
+
|
|
1877
|
+
<!-- Caja de padding (interior) -->
|
|
1878
|
+
<div class="guide-spacing-padding-box"></div>
|
|
1879
|
+
|
|
1880
|
+
<!-- Contenido -->
|
|
1881
|
+
<div class="guide-spacing-content">Contenido</div>
|
|
1882
|
+
</div>
|
|
1883
|
+
</div>
|
|
1884
|
+
|
|
1885
|
+
|
|
1886
|
+
</div>
|
|
1887
|
+
|
|
1888
|
+
<div class="guide-table-wrapper">
|
|
1889
|
+
<table class="guide-table">
|
|
1890
|
+
<thead>
|
|
1891
|
+
<tr>
|
|
1892
|
+
<th>Clases Helper</th>
|
|
1893
|
+
<th>Variable CSS</th>
|
|
1894
|
+
<th>Valor (rem)</th>
|
|
1895
|
+
<th>Valor (px)</th>
|
|
1896
|
+
</tr>
|
|
1897
|
+
</thead>
|
|
1898
|
+
<tbody>
|
|
1899
|
+
|
|
1900
|
+
<tr>
|
|
1901
|
+
<td class="guide-table-name">.*-0<br><strong>Con !important:</strong><br>.*-0!</td>
|
|
1902
|
+
<td class="guide-table-value ">--hg-spacing-0</td>
|
|
1903
|
+
<td class="guide-value-center-blue ">0</td>
|
|
1904
|
+
<td class="guide-value-center-orange ">0</td>
|
|
1905
|
+
</tr>
|
|
1906
|
+
<tr>
|
|
1907
|
+
<td class="guide-table-name">.*-4</td>
|
|
1908
|
+
<td class="guide-table-value ">--hg-spacing-4</td>
|
|
1909
|
+
<td class="guide-value-center-blue ">0.25rem</td>
|
|
1910
|
+
<td class="guide-value-center-orange ">4px</td>
|
|
1911
|
+
</tr>
|
|
1912
|
+
<tr>
|
|
1913
|
+
<td class="guide-table-name">.*-8</td>
|
|
1914
|
+
<td class="guide-table-value ">--hg-spacing-8</td>
|
|
1915
|
+
<td class="guide-value-center-blue ">0.5rem</td>
|
|
1916
|
+
<td class="guide-value-center-orange ">8px</td>
|
|
1917
|
+
</tr>
|
|
1918
|
+
<tr>
|
|
1919
|
+
<td class="guide-table-name">.*-12</td>
|
|
1920
|
+
<td class="guide-table-value ">--hg-spacing-12</td>
|
|
1921
|
+
<td class="guide-value-center-blue ">0.75rem</td>
|
|
1922
|
+
<td class="guide-value-center-orange ">12px</td>
|
|
1923
|
+
</tr>
|
|
1924
|
+
<tr>
|
|
1925
|
+
<td class="guide-table-name">.*-16</td>
|
|
1926
|
+
<td class="guide-table-value ">--hg-spacing-16</td>
|
|
1927
|
+
<td class="guide-value-center-blue ">1rem</td>
|
|
1928
|
+
<td class="guide-value-center-orange ">16px</td>
|
|
1929
|
+
</tr>
|
|
1930
|
+
<tr>
|
|
1931
|
+
<td class="guide-table-name">.*-20</td>
|
|
1932
|
+
<td class="guide-table-value ">--hg-spacing-20</td>
|
|
1933
|
+
<td class="guide-value-center-blue ">1.25rem</td>
|
|
1934
|
+
<td class="guide-value-center-orange ">20px</td>
|
|
1935
|
+
</tr>
|
|
1936
|
+
<tr>
|
|
1937
|
+
<td class="guide-table-name">.*-24</td>
|
|
1938
|
+
<td class="guide-table-value ">--hg-spacing-24</td>
|
|
1939
|
+
<td class="guide-value-center-blue ">1.5rem</td>
|
|
1940
|
+
<td class="guide-value-center-orange ">24px</td>
|
|
1941
|
+
</tr>
|
|
1942
|
+
<tr>
|
|
1943
|
+
<td class="guide-table-name">.*-32</td>
|
|
1944
|
+
<td class="guide-table-value ">--hg-spacing-32</td>
|
|
1945
|
+
<td class="guide-value-center-blue ">2rem</td>
|
|
1946
|
+
<td class="guide-value-center-orange ">32px</td>
|
|
1947
|
+
</tr>
|
|
1948
|
+
<tr>
|
|
1949
|
+
<td class="guide-table-name">.*-36</td>
|
|
1950
|
+
<td class="guide-table-value ">--hg-spacing-36</td>
|
|
1951
|
+
<td class="guide-value-center-blue ">2.25rem</td>
|
|
1952
|
+
<td class="guide-value-center-orange ">36px</td>
|
|
1953
|
+
</tr>
|
|
1954
|
+
<tr>
|
|
1955
|
+
<td class="guide-table-name">.*-40</td>
|
|
1956
|
+
<td class="guide-table-value ">--hg-spacing-40</td>
|
|
1957
|
+
<td class="guide-value-center-blue ">2.5rem</td>
|
|
1958
|
+
<td class="guide-value-center-orange ">40px</td>
|
|
1959
|
+
</tr>
|
|
1960
|
+
<tr>
|
|
1961
|
+
<td class="guide-table-name">.*-64</td>
|
|
1962
|
+
<td class="guide-table-value ">--hg-spacing-64</td>
|
|
1963
|
+
<td class="guide-value-center-blue ">4rem</td>
|
|
1964
|
+
<td class="guide-value-center-orange ">64px</td>
|
|
1965
|
+
</tr>
|
|
1966
|
+
<tr>
|
|
1967
|
+
<td class="guide-table-name">.*-72</td>
|
|
1968
|
+
<td class="guide-table-value ">--hg-spacing-72</td>
|
|
1969
|
+
<td class="guide-value-center-blue ">4.5rem</td>
|
|
1970
|
+
<td class="guide-value-center-orange ">72px</td>
|
|
1971
|
+
</tr>
|
|
1972
|
+
<tr>
|
|
1973
|
+
<td class="guide-table-name">.*-80</td>
|
|
1974
|
+
<td class="guide-table-value ">--hg-spacing-80</td>
|
|
1975
|
+
<td class="guide-value-center-blue ">5rem</td>
|
|
1976
|
+
<td class="guide-value-center-orange ">80px</td>
|
|
1977
|
+
</tr>
|
|
1978
|
+
<tr>
|
|
1979
|
+
<td class="guide-table-name">.*-88</td>
|
|
1980
|
+
<td class="guide-table-value ">--hg-spacing-88</td>
|
|
1981
|
+
<td class="guide-value-center-blue ">5.5rem</td>
|
|
1982
|
+
<td class="guide-value-center-orange ">88px</td>
|
|
1983
|
+
</tr>
|
|
1984
|
+
<tr>
|
|
1985
|
+
<td class="guide-table-name">.*-96</td>
|
|
1986
|
+
<td class="guide-table-value ">--hg-spacing-96</td>
|
|
1987
|
+
<td class="guide-value-center-blue ">6rem</td>
|
|
1988
|
+
<td class="guide-value-center-orange ">96px</td>
|
|
1989
|
+
</tr>
|
|
1990
|
+
<tr>
|
|
1991
|
+
<td class="guide-table-name">.*-104</td>
|
|
1992
|
+
<td class="guide-table-value ">--hg-spacing-104</td>
|
|
1993
|
+
<td class="guide-value-center-blue ">6.5rem</td>
|
|
1994
|
+
<td class="guide-value-center-orange ">104px</td>
|
|
1995
|
+
</tr>
|
|
1996
|
+
<tr>
|
|
1997
|
+
<td class="guide-table-name">.*-112</td>
|
|
1998
|
+
<td class="guide-table-value ">--hg-spacing-112</td>
|
|
1999
|
+
<td class="guide-value-center-blue ">7rem</td>
|
|
2000
|
+
<td class="guide-value-center-orange ">112px</td>
|
|
2001
|
+
</tr>
|
|
2002
|
+
<tr>
|
|
2003
|
+
<td class="guide-table-name">.*-120</td>
|
|
2004
|
+
<td class="guide-table-value ">--hg-spacing-120</td>
|
|
2005
|
+
<td class="guide-value-center-blue ">7.5rem</td>
|
|
2006
|
+
<td class="guide-value-center-orange ">120px</td>
|
|
2007
|
+
</tr>
|
|
2008
|
+
<tr>
|
|
2009
|
+
<td class="guide-table-name">.*-128</td>
|
|
2010
|
+
<td class="guide-table-value ">--hg-spacing-128</td>
|
|
2011
|
+
<td class="guide-value-center-blue ">8rem</td>
|
|
2012
|
+
<td class="guide-value-center-orange ">128px</td>
|
|
2013
|
+
</tr>
|
|
2014
|
+
<tr>
|
|
2015
|
+
<td class="guide-table-name">.*-136</td>
|
|
2016
|
+
<td class="guide-table-value ">--hg-spacing-136</td>
|
|
2017
|
+
<td class="guide-value-center-blue ">8.5rem</td>
|
|
2018
|
+
<td class="guide-value-center-orange ">136px</td>
|
|
2019
|
+
</tr>
|
|
2020
|
+
<tr>
|
|
2021
|
+
<td class="guide-table-name">.*-144</td>
|
|
2022
|
+
<td class="guide-table-value ">--hg-spacing-144</td>
|
|
2023
|
+
<td class="guide-value-center-blue ">9rem</td>
|
|
2024
|
+
<td class="guide-value-center-orange ">144px</td>
|
|
2025
|
+
</tr>
|
|
2026
|
+
<tr>
|
|
2027
|
+
<td class="guide-table-name">.*-152</td>
|
|
2028
|
+
<td class="guide-table-value ">--hg-spacing-152</td>
|
|
2029
|
+
<td class="guide-value-center-blue ">9.5rem</td>
|
|
2030
|
+
<td class="guide-value-center-orange ">152px</td>
|
|
2031
|
+
</tr>
|
|
2032
|
+
<tr>
|
|
2033
|
+
<td class="guide-table-name">.*-160</td>
|
|
2034
|
+
<td class="guide-table-value ">--hg-spacing-160</td>
|
|
2035
|
+
<td class="guide-value-center-blue ">10rem</td>
|
|
2036
|
+
<td class="guide-value-center-orange ">160px</td>
|
|
2037
|
+
</tr>
|
|
2038
|
+
<tr>
|
|
2039
|
+
<td class="guide-table-name">.*-20-percent</td>
|
|
2040
|
+
<td class="guide-table-value ">--hg-spacing-20-percent</td>
|
|
2041
|
+
<td class="guide-value-center-blue ">20%</td>
|
|
2042
|
+
<td class="guide-value-center-orange ">20%</td>
|
|
2043
|
+
</tr>
|
|
2044
|
+
<tr>
|
|
2045
|
+
<td class="guide-table-name">.*-25-percent</td>
|
|
2046
|
+
<td class="guide-table-value ">--hg-spacing-25-percent</td>
|
|
2047
|
+
<td class="guide-value-center-blue ">25%</td>
|
|
2048
|
+
<td class="guide-value-center-orange ">25%</td>
|
|
2049
|
+
</tr>
|
|
2050
|
+
<tr>
|
|
2051
|
+
<td class="guide-table-name">.*-33-percent</td>
|
|
2052
|
+
<td class="guide-table-value ">--hg-spacing-33-percent</td>
|
|
2053
|
+
<td class="guide-value-center-blue ">33.333333%</td>
|
|
2054
|
+
<td class="guide-value-center-orange ">33.333333%</td>
|
|
2055
|
+
</tr>
|
|
2056
|
+
<tr>
|
|
2057
|
+
<td class="guide-table-name">.*-40-percent</td>
|
|
2058
|
+
<td class="guide-table-value ">--hg-spacing-40-percent</td>
|
|
2059
|
+
<td class="guide-value-center-blue ">40%</td>
|
|
2060
|
+
<td class="guide-value-center-orange ">40%</td>
|
|
2061
|
+
</tr>
|
|
2062
|
+
<tr>
|
|
2063
|
+
<td class="guide-table-name">.*-50-percent</td>
|
|
2064
|
+
<td class="guide-table-value ">--hg-spacing-50-percent</td>
|
|
2065
|
+
<td class="guide-value-center-blue ">50%</td>
|
|
2066
|
+
<td class="guide-value-center-orange ">50%</td>
|
|
2067
|
+
</tr>
|
|
2068
|
+
<tr>
|
|
2069
|
+
<td class="guide-table-name">.*-60-percent</td>
|
|
2070
|
+
<td class="guide-table-value ">--hg-spacing-60-percent</td>
|
|
2071
|
+
<td class="guide-value-center-blue ">60%</td>
|
|
2072
|
+
<td class="guide-value-center-orange ">60%</td>
|
|
2073
|
+
</tr>
|
|
2074
|
+
<tr>
|
|
2075
|
+
<td class="guide-table-name">.*-66-percent</td>
|
|
2076
|
+
<td class="guide-table-value ">--hg-spacing-66-percent</td>
|
|
2077
|
+
<td class="guide-value-center-blue ">66.666667%</td>
|
|
2078
|
+
<td class="guide-value-center-orange ">66.666667%</td>
|
|
2079
|
+
</tr>
|
|
2080
|
+
<tr>
|
|
2081
|
+
<td class="guide-table-name">.*-75-percent</td>
|
|
2082
|
+
<td class="guide-table-value ">--hg-spacing-75-percent</td>
|
|
2083
|
+
<td class="guide-value-center-blue ">75%</td>
|
|
2084
|
+
<td class="guide-value-center-orange ">75%</td>
|
|
2085
|
+
</tr>
|
|
2086
|
+
<tr>
|
|
2087
|
+
<td class="guide-table-name">.*-100-percent</td>
|
|
2088
|
+
<td class="guide-table-value ">--hg-spacing-100-percent</td>
|
|
2089
|
+
<td class="guide-value-center-blue ">100%</td>
|
|
2090
|
+
<td class="guide-value-center-orange ">100%</td>
|
|
2091
|
+
</tr>
|
|
2092
|
+
</tbody>
|
|
2093
|
+
</table>
|
|
2094
|
+
</div>
|
|
2095
|
+
<div class="guide-info-box guide-info-box-info guide-info-box-margin-top">
|
|
2096
|
+
<h3 class="guide-info-box-title guide-info-box-title-info">Helpers con prefijo md: (Desktop)</h3>
|
|
2097
|
+
<p class="text-m guide-info-box-text">
|
|
2098
|
+
Los helpers con prefijo <code class="guide-info-box-code-info">md:</code> funcionan como en Tailwind CSS y solo se aplican en el breakpoint desktop (≥992px).
|
|
2099
|
+
</p>
|
|
2100
|
+
<p class="text-m guide-info-box-text">
|
|
2101
|
+
<strong>Ejemplos de uso:</strong>
|
|
2102
|
+
</p>
|
|
2103
|
+
<ul class="guide-info-box-list">
|
|
2104
|
+
<li class="text-m guide-info-box-list-item">
|
|
2105
|
+
<code class="guide-info-box-code-info">.p-4</code> - Aplica padding de 4px en todos los tamaños de pantalla
|
|
2106
|
+
</li>
|
|
2107
|
+
<li class="text-m guide-info-box-list-item">
|
|
2108
|
+
<code class="guide-info-box-code-info">.md:p-4</code> - Aplica padding de 4px solo en desktop (≥992px)
|
|
2109
|
+
</li>
|
|
2110
|
+
<li class="text-m guide-info-box-list-item">
|
|
2111
|
+
<code class="guide-info-box-code-info">.md:pr-8</code> - Aplica padding-right de 8px solo en desktop
|
|
2112
|
+
</li>
|
|
2113
|
+
<li class="text-m guide-info-box-list-item">
|
|
2114
|
+
<code class="guide-info-box-code-info">.md:mt-16</code> - Aplica margin-top de 16px solo en desktop
|
|
2115
|
+
</li>
|
|
2116
|
+
<li class="text-m guide-info-box-list-item">
|
|
2117
|
+
<code class="guide-info-box-code-info">.p-0!</code> - Aplica padding de 0 con !important (útil para sobrescribir otros estilos)
|
|
2118
|
+
</li>
|
|
2119
|
+
</ul>
|
|
2120
|
+
<p class="text-m guide-info-box-text-small">
|
|
2121
|
+
<strong>Nota:</strong> Puedes combinar clases base y con prefijo <code class="guide-info-box-code-info">md:</code> para crear diseños responsive. Por ejemplo: <code class="guide-info-box-code-info">.p-4 .md:p-8</code> aplica 4px en mobile y 8px en desktop. Las clases con <code class="guide-info-box-code-info">!</code> aplican !important y tienen prioridad sobre otras reglas CSS.
|
|
2122
|
+
</p>
|
|
2123
|
+
</div>
|
|
2124
|
+
</div>
|
|
2125
|
+
</div>
|
|
2126
|
+
|
|
2127
|
+
|
|
2128
|
+
|
|
2129
|
+
<div class="guide-section" id="layout">
|
|
2130
|
+
<div class="guide-section-title">
|
|
2131
|
+
<h2 >Helpers de Layout</h2>
|
|
2132
|
+
<p class="text-m guide-section-description">
|
|
2133
|
+
Clases helper para display, flexbox, alignment y gap.
|
|
2134
|
+
Todos los helpers marcados como responsive tienen variantes con prefijo .md: para desktop (≥992px).
|
|
2135
|
+
</p>
|
|
2136
|
+
</div>
|
|
2137
|
+
<div class="guide-section-content">
|
|
2138
|
+
|
|
2139
|
+
<div class="guide-table-wrapper">
|
|
2140
|
+
<table class="guide-table">
|
|
2141
|
+
<thead>
|
|
2142
|
+
<tr>
|
|
2143
|
+
<th>Clases Helper</th>
|
|
2144
|
+
<th>Clases Helper (md:)</th>
|
|
2145
|
+
<th>Propiedad CSS</th>
|
|
2146
|
+
<th>Descripción</th>
|
|
2147
|
+
</tr>
|
|
2148
|
+
</thead>
|
|
2149
|
+
<tbody>
|
|
2150
|
+
|
|
2151
|
+
<tr>
|
|
2152
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-d-contents" title="Click para copiar .hg-d-contents">.hg-d-contents</td>
|
|
2153
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-d-contents" title="Click para copiar .md:hg-d-contents">.md:hg-d-contents</td>
|
|
2154
|
+
<td class="guide-layout-property">display: contents</td>
|
|
2155
|
+
<td class="guide-layout-property">Tipo de caja de renderizado</td>
|
|
2156
|
+
</tr>
|
|
2157
|
+
<tr>
|
|
2158
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-d-inline" title="Click para copiar .hg-d-inline">.hg-d-inline</td>
|
|
2159
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-d-inline" title="Click para copiar .md:hg-d-inline">.md:hg-d-inline</td>
|
|
2160
|
+
<td class="guide-layout-property">display: inline</td>
|
|
2161
|
+
<td class="guide-layout-property">Tipo de caja de renderizado</td>
|
|
2162
|
+
</tr>
|
|
2163
|
+
<tr>
|
|
2164
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-d-inline-block" title="Click para copiar .hg-d-inline-block">.hg-d-inline-block</td>
|
|
2165
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-d-inline-block" title="Click para copiar .md:hg-d-inline-block">.md:hg-d-inline-block</td>
|
|
2166
|
+
<td class="guide-layout-property">display: inline-block</td>
|
|
2167
|
+
<td class="guide-layout-property">Tipo de caja de renderizado</td>
|
|
2168
|
+
</tr>
|
|
2169
|
+
<tr>
|
|
2170
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-d-block" title="Click para copiar .hg-d-block">.hg-d-block</td>
|
|
2171
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-d-block" title="Click para copiar .md:hg-d-block">.md:hg-d-block</td>
|
|
2172
|
+
<td class="guide-layout-property">display: block</td>
|
|
2173
|
+
<td class="guide-layout-property">Tipo de caja de renderizado</td>
|
|
2174
|
+
</tr>
|
|
2175
|
+
<tr>
|
|
2176
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-d-flex" title="Click para copiar .hg-d-flex">.hg-d-flex</td>
|
|
2177
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-d-flex" title="Click para copiar .md:hg-d-flex">.md:hg-d-flex</td>
|
|
2178
|
+
<td class="guide-layout-property">display: flex</td>
|
|
2179
|
+
<td class="guide-layout-property">Tipo de caja de renderizado</td>
|
|
2180
|
+
</tr>
|
|
2181
|
+
<tr>
|
|
2182
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-d-inline-flex" title="Click para copiar .hg-d-inline-flex">.hg-d-inline-flex</td>
|
|
2183
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-d-inline-flex" title="Click para copiar .md:hg-d-inline-flex">.md:hg-d-inline-flex</td>
|
|
2184
|
+
<td class="guide-layout-property">display: inline-flex</td>
|
|
2185
|
+
<td class="guide-layout-property">Tipo de caja de renderizado</td>
|
|
2186
|
+
</tr>
|
|
2187
|
+
<tr>
|
|
2188
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-d-none" title="Click para copiar .hg-d-none">.hg-d-none</td>
|
|
2189
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-d-none" title="Click para copiar .md:hg-d-none">.md:hg-d-none</td>
|
|
2190
|
+
<td class="guide-layout-property">display: none</td>
|
|
2191
|
+
<td class="guide-layout-property">Tipo de caja de renderizado</td>
|
|
2192
|
+
</tr>
|
|
2193
|
+
<tr>
|
|
2194
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-flex-row" title="Click para copiar .hg-flex-row">.hg-flex-row</td>
|
|
2195
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-flex-row" title="Click para copiar .md:hg-flex-row">.md:hg-flex-row</td>
|
|
2196
|
+
<td class="guide-layout-property">flex-direction: row</td>
|
|
2197
|
+
<td class="guide-layout-property">Dirección del eje principal (horizontal o vertical)</td>
|
|
2198
|
+
</tr>
|
|
2199
|
+
<tr>
|
|
2200
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-flex-column" title="Click para copiar .hg-flex-column">.hg-flex-column</td>
|
|
2201
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-flex-column" title="Click para copiar .md:hg-flex-column">.md:hg-flex-column</td>
|
|
2202
|
+
<td class="guide-layout-property">flex-direction: column</td>
|
|
2203
|
+
<td class="guide-layout-property">Dirección del eje principal (horizontal o vertical)</td>
|
|
2204
|
+
</tr>
|
|
2205
|
+
<tr>
|
|
2206
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-flex-nowrap" title="Click para copiar .hg-flex-nowrap">.hg-flex-nowrap</td>
|
|
2207
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-flex-nowrap" title="Click para copiar .md:hg-flex-nowrap">.md:hg-flex-nowrap</td>
|
|
2208
|
+
<td class="guide-layout-property">flex-wrap: nowrap</td>
|
|
2209
|
+
<td class="guide-layout-property">Permite o no el ajuste en múltiples líneas</td>
|
|
2210
|
+
</tr>
|
|
2211
|
+
<tr>
|
|
2212
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-flex-wrap" title="Click para copiar .hg-flex-wrap">.hg-flex-wrap</td>
|
|
2213
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-flex-wrap" title="Click para copiar .md:hg-flex-wrap">.md:hg-flex-wrap</td>
|
|
2214
|
+
<td class="guide-layout-property">flex-wrap: wrap</td>
|
|
2215
|
+
<td class="guide-layout-property">Permite o no el ajuste en múltiples líneas</td>
|
|
2216
|
+
</tr>
|
|
2217
|
+
<tr>
|
|
2218
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-flex-wrap-reverse" title="Click para copiar .hg-flex-wrap-reverse">.hg-flex-wrap-reverse</td>
|
|
2219
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-flex-wrap-reverse" title="Click para copiar .md:hg-flex-wrap-reverse">.md:hg-flex-wrap-reverse</td>
|
|
2220
|
+
<td class="guide-layout-property">flex-wrap: wrap-reverse</td>
|
|
2221
|
+
<td class="guide-layout-property">Envolver en orden inverso</td>
|
|
2222
|
+
</tr>
|
|
2223
|
+
<tr>
|
|
2224
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-grow-0" title="Click para copiar .hg-grow-0">.hg-grow-0</td>
|
|
2225
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-grow-0" title="Click para copiar .md:hg-grow-0">.md:hg-grow-0</td>
|
|
2226
|
+
<td class="guide-layout-property">flex-grow: 0</td>
|
|
2227
|
+
<td class="guide-layout-property">Capacidad de crecer para ocupar espacio disponible</td>
|
|
2228
|
+
</tr>
|
|
2229
|
+
<tr>
|
|
2230
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-grow-1" title="Click para copiar .hg-grow-1">.hg-grow-1</td>
|
|
2231
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-grow-1" title="Click para copiar .md:hg-grow-1">.md:hg-grow-1</td>
|
|
2232
|
+
<td class="guide-layout-property">flex-grow: 1</td>
|
|
2233
|
+
<td class="guide-layout-property">Capacidad de crecer para ocupar espacio disponible</td>
|
|
2234
|
+
</tr>
|
|
2235
|
+
<tr>
|
|
2236
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-grow-2" title="Click para copiar .hg-grow-2">.hg-grow-2</td>
|
|
2237
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-grow-2" title="Click para copiar .md:hg-grow-2">.md:hg-grow-2</td>
|
|
2238
|
+
<td class="guide-layout-property">flex-grow: 2</td>
|
|
2239
|
+
<td class="guide-layout-property">Capacidad de crecer para ocupar espacio disponible</td>
|
|
2240
|
+
</tr>
|
|
2241
|
+
<tr>
|
|
2242
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-grow-3" title="Click para copiar .hg-grow-3">.hg-grow-3</td>
|
|
2243
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-grow-3" title="Click para copiar .md:hg-grow-3">.md:hg-grow-3</td>
|
|
2244
|
+
<td class="guide-layout-property">flex-grow: 3</td>
|
|
2245
|
+
<td class="guide-layout-property">Capacidad de crecer para ocupar espacio disponible</td>
|
|
2246
|
+
</tr>
|
|
2247
|
+
<tr>
|
|
2248
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-grow-auto" title="Click para copiar .hg-grow-auto">.hg-grow-auto</td>
|
|
2249
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-grow-auto" title="Click para copiar .md:hg-grow-auto">.md:hg-grow-auto</td>
|
|
2250
|
+
<td class="guide-layout-property">flex-grow: auto</td>
|
|
2251
|
+
<td class="guide-layout-property">Capacidad de crecer para ocupar espacio disponible</td>
|
|
2252
|
+
</tr>
|
|
2253
|
+
<tr>
|
|
2254
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-shrink-0" title="Click para copiar .hg-shrink-0">.hg-shrink-0</td>
|
|
2255
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-shrink-0" title="Click para copiar .md:hg-shrink-0">.md:hg-shrink-0</td>
|
|
2256
|
+
<td class="guide-layout-property">flex-shrink: 0</td>
|
|
2257
|
+
<td class="guide-layout-property">Capacidad de encogerse cuando el espacio es limitado</td>
|
|
2258
|
+
</tr>
|
|
2259
|
+
<tr>
|
|
2260
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-shrink-1" title="Click para copiar .hg-shrink-1">.hg-shrink-1</td>
|
|
2261
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-shrink-1" title="Click para copiar .md:hg-shrink-1">.md:hg-shrink-1</td>
|
|
2262
|
+
<td class="guide-layout-property">flex-shrink: 1</td>
|
|
2263
|
+
<td class="guide-layout-property">Capacidad de encogerse cuando el espacio es limitado</td>
|
|
2264
|
+
</tr>
|
|
2265
|
+
<tr>
|
|
2266
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-shrink-2" title="Click para copiar .hg-shrink-2">.hg-shrink-2</td>
|
|
2267
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-shrink-2" title="Click para copiar .md:hg-shrink-2">.md:hg-shrink-2</td>
|
|
2268
|
+
<td class="guide-layout-property">flex-shrink: 2</td>
|
|
2269
|
+
<td class="guide-layout-property">Capacidad de encogerse cuando el espacio es limitado</td>
|
|
2270
|
+
</tr>
|
|
2271
|
+
<tr>
|
|
2272
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-shrink-3" title="Click para copiar .hg-shrink-3">.hg-shrink-3</td>
|
|
2273
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-shrink-3" title="Click para copiar .md:hg-shrink-3">.md:hg-shrink-3</td>
|
|
2274
|
+
<td class="guide-layout-property">flex-shrink: 3</td>
|
|
2275
|
+
<td class="guide-layout-property">Capacidad de encogerse cuando el espacio es limitado</td>
|
|
2276
|
+
</tr>
|
|
2277
|
+
<tr>
|
|
2278
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-shrink-auto" title="Click para copiar .hg-shrink-auto">.hg-shrink-auto</td>
|
|
2279
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-shrink-auto" title="Click para copiar .md:hg-shrink-auto">.md:hg-shrink-auto</td>
|
|
2280
|
+
<td class="guide-layout-property">flex-shrink: auto</td>
|
|
2281
|
+
<td class="guide-layout-property">Capacidad de encogerse cuando el espacio es limitado</td>
|
|
2282
|
+
</tr>
|
|
2283
|
+
<tr>
|
|
2284
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-flex-1" title="Click para copiar .hg-flex-1">.hg-flex-1</td>
|
|
2285
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-flex-1" title="Click para copiar .md:hg-flex-1">.md:hg-flex-1</td>
|
|
2286
|
+
<td class="guide-layout-property">flex: 1 1 0%</td>
|
|
2287
|
+
<td class="guide-layout-property">Shortcuts comunes de flex</td>
|
|
2288
|
+
</tr>
|
|
2289
|
+
<tr>
|
|
2290
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-flex-auto" title="Click para copiar .hg-flex-auto">.hg-flex-auto</td>
|
|
2291
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-flex-auto" title="Click para copiar .md:hg-flex-auto">.md:hg-flex-auto</td>
|
|
2292
|
+
<td class="guide-layout-property">flex: 1 1 auto</td>
|
|
2293
|
+
<td class="guide-layout-property">Shortcuts comunes de flex</td>
|
|
2294
|
+
</tr>
|
|
2295
|
+
<tr>
|
|
2296
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-flex-initial" title="Click para copiar .hg-flex-initial">.hg-flex-initial</td>
|
|
2297
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-flex-initial" title="Click para copiar .md:hg-flex-initial">.md:hg-flex-initial</td>
|
|
2298
|
+
<td class="guide-layout-property">flex: 0 1 auto</td>
|
|
2299
|
+
<td class="guide-layout-property">Shortcuts comunes de flex</td>
|
|
2300
|
+
</tr>
|
|
2301
|
+
<tr>
|
|
2302
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-flex-none" title="Click para copiar .hg-flex-none">.hg-flex-none</td>
|
|
2303
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-flex-none" title="Click para copiar .md:hg-flex-none">.md:hg-flex-none</td>
|
|
2304
|
+
<td class="guide-layout-property">flex: none</td>
|
|
2305
|
+
<td class="guide-layout-property">Shortcuts comunes de flex</td>
|
|
2306
|
+
</tr>
|
|
2307
|
+
<tr>
|
|
2308
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-basis-0" title="Click para copiar .hg-basis-0">.hg-basis-0</td>
|
|
2309
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-basis-0" title="Click para copiar .md:hg-basis-0">.md:hg-basis-0</td>
|
|
2310
|
+
<td class="guide-layout-property">flex-basis: 0</td>
|
|
2311
|
+
<td class="guide-layout-property">Tamaño base del elemento flexible</td>
|
|
2312
|
+
</tr>
|
|
2313
|
+
<tr>
|
|
2314
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-basis-auto" title="Click para copiar .hg-basis-auto">.hg-basis-auto</td>
|
|
2315
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-basis-auto" title="Click para copiar .md:hg-basis-auto">.md:hg-basis-auto</td>
|
|
2316
|
+
<td class="guide-layout-property">flex-basis: auto</td>
|
|
2317
|
+
<td class="guide-layout-property">Tamaño base del elemento flexible</td>
|
|
2318
|
+
</tr>
|
|
2319
|
+
<tr>
|
|
2320
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-basis-full" title="Click para copiar .hg-basis-full">.hg-basis-full</td>
|
|
2321
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-basis-full" title="Click para copiar .md:hg-basis-full">.md:hg-basis-full</td>
|
|
2322
|
+
<td class="guide-layout-property">flex-basis: 100%</td>
|
|
2323
|
+
<td class="guide-layout-property">Tamaño base del elemento flexible</td>
|
|
2324
|
+
</tr>
|
|
2325
|
+
<tr>
|
|
2326
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-order-0" title="Click para copiar .hg-order-0">.hg-order-0</td>
|
|
2327
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-order-0" title="Click para copiar .md:hg-order-0">.md:hg-order-0</td>
|
|
2328
|
+
<td class="guide-layout-property">order: 0</td>
|
|
2329
|
+
<td class="guide-layout-property">Orden de visualización independiente del HTML</td>
|
|
2330
|
+
</tr>
|
|
2331
|
+
<tr>
|
|
2332
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-order-1" title="Click para copiar .hg-order-1">.hg-order-1</td>
|
|
2333
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-order-1" title="Click para copiar .md:hg-order-1">.md:hg-order-1</td>
|
|
2334
|
+
<td class="guide-layout-property">order: 1</td>
|
|
2335
|
+
<td class="guide-layout-property">Orden de visualización independiente del HTML</td>
|
|
2336
|
+
</tr>
|
|
2337
|
+
<tr>
|
|
2338
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-order-2" title="Click para copiar .hg-order-2">.hg-order-2</td>
|
|
2339
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-order-2" title="Click para copiar .md:hg-order-2">.md:hg-order-2</td>
|
|
2340
|
+
<td class="guide-layout-property">order: 2</td>
|
|
2341
|
+
<td class="guide-layout-property">Orden de visualización independiente del HTML</td>
|
|
2342
|
+
</tr>
|
|
2343
|
+
<tr>
|
|
2344
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-order-3" title="Click para copiar .hg-order-3">.hg-order-3</td>
|
|
2345
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-order-3" title="Click para copiar .md:hg-order-3">.md:hg-order-3</td>
|
|
2346
|
+
<td class="guide-layout-property">order: 3</td>
|
|
2347
|
+
<td class="guide-layout-property">Orden de visualización independiente del HTML</td>
|
|
2348
|
+
</tr>
|
|
2349
|
+
<tr>
|
|
2350
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-order-3-neg" title="Click para copiar .hg-order-3-neg">.hg-order-3-neg</td>
|
|
2351
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-order-3-neg" title="Click para copiar .md:hg-order-3-neg">.md:hg-order-3-neg</td>
|
|
2352
|
+
<td class="guide-layout-property">order: -3</td>
|
|
2353
|
+
<td class="guide-layout-property">Orden de visualización independiente del HTML</td>
|
|
2354
|
+
</tr>
|
|
2355
|
+
<tr>
|
|
2356
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-order-2-neg" title="Click para copiar .hg-order-2-neg">.hg-order-2-neg</td>
|
|
2357
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-order-2-neg" title="Click para copiar .md:hg-order-2-neg">.md:hg-order-2-neg</td>
|
|
2358
|
+
<td class="guide-layout-property">order: -2</td>
|
|
2359
|
+
<td class="guide-layout-property">Orden de visualización independiente del HTML</td>
|
|
2360
|
+
</tr>
|
|
2361
|
+
<tr>
|
|
2362
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-order-1-neg" title="Click para copiar .hg-order-1-neg">.hg-order-1-neg</td>
|
|
2363
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-order-1-neg" title="Click para copiar .md:hg-order-1-neg">.md:hg-order-1-neg</td>
|
|
2364
|
+
<td class="guide-layout-property">order: -1</td>
|
|
2365
|
+
<td class="guide-layout-property">Orden de visualización independiente del HTML</td>
|
|
2366
|
+
</tr>
|
|
2367
|
+
<tr>
|
|
2368
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-order-first" title="Click para copiar .hg-order-first">.hg-order-first</td>
|
|
2369
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-order-first" title="Click para copiar .md:hg-order-first">.md:hg-order-first</td>
|
|
2370
|
+
<td class="guide-layout-property">order: -9999</td>
|
|
2371
|
+
<td class="guide-layout-property">Orden de visualización independiente del HTML</td>
|
|
2372
|
+
</tr>
|
|
2373
|
+
<tr>
|
|
2374
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-order-last" title="Click para copiar .hg-order-last">.hg-order-last</td>
|
|
2375
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-order-last" title="Click para copiar .md:hg-order-last">.md:hg-order-last</td>
|
|
2376
|
+
<td class="guide-layout-property">order: 9999</td>
|
|
2377
|
+
<td class="guide-layout-property">Orden de visualización independiente del HTML</td>
|
|
2378
|
+
</tr>
|
|
2379
|
+
<tr>
|
|
2380
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-justify-stretch" title="Click para copiar .hg-justify-stretch">.hg-justify-stretch</td>
|
|
2381
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-justify-stretch" title="Click para copiar .md:hg-justify-stretch">.md:hg-justify-stretch</td>
|
|
2382
|
+
<td class="guide-layout-property">justify-content: stretch</td>
|
|
2383
|
+
<td class="guide-layout-property">Alineación en el eje principal</td>
|
|
2384
|
+
</tr>
|
|
2385
|
+
<tr>
|
|
2386
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-justify-start" title="Click para copiar .hg-justify-start">.hg-justify-start</td>
|
|
2387
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-justify-start" title="Click para copiar .md:hg-justify-start">.md:hg-justify-start</td>
|
|
2388
|
+
<td class="guide-layout-property">justify-content: flex-start</td>
|
|
2389
|
+
<td class="guide-layout-property">Alineación en el eje principal</td>
|
|
2390
|
+
</tr>
|
|
2391
|
+
<tr>
|
|
2392
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-justify-end" title="Click para copiar .hg-justify-end">.hg-justify-end</td>
|
|
2393
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-justify-end" title="Click para copiar .md:hg-justify-end">.md:hg-justify-end</td>
|
|
2394
|
+
<td class="guide-layout-property">justify-content: flex-end</td>
|
|
2395
|
+
<td class="guide-layout-property">Alineación en el eje principal</td>
|
|
2396
|
+
</tr>
|
|
2397
|
+
<tr>
|
|
2398
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-justify-center" title="Click para copiar .hg-justify-center">.hg-justify-center</td>
|
|
2399
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-justify-center" title="Click para copiar .md:hg-justify-center">.md:hg-justify-center</td>
|
|
2400
|
+
<td class="guide-layout-property">justify-content: center</td>
|
|
2401
|
+
<td class="guide-layout-property">Alineación en el eje principal</td>
|
|
2402
|
+
</tr>
|
|
2403
|
+
<tr>
|
|
2404
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-justify-between" title="Click para copiar .hg-justify-between">.hg-justify-between</td>
|
|
2405
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-justify-between" title="Click para copiar .md:hg-justify-between">.md:hg-justify-between</td>
|
|
2406
|
+
<td class="guide-layout-property">justify-content: space-between</td>
|
|
2407
|
+
<td class="guide-layout-property">Alineación en el eje principal</td>
|
|
2408
|
+
</tr>
|
|
2409
|
+
<tr>
|
|
2410
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-justify-around" title="Click para copiar .hg-justify-around">.hg-justify-around</td>
|
|
2411
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-justify-around" title="Click para copiar .md:hg-justify-around">.md:hg-justify-around</td>
|
|
2412
|
+
<td class="guide-layout-property">justify-content: space-around</td>
|
|
2413
|
+
<td class="guide-layout-property">Alineación en el eje principal</td>
|
|
2414
|
+
</tr>
|
|
2415
|
+
<tr>
|
|
2416
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-justify-evenly" title="Click para copiar .hg-justify-evenly">.hg-justify-evenly</td>
|
|
2417
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-justify-evenly" title="Click para copiar .md:hg-justify-evenly">.md:hg-justify-evenly</td>
|
|
2418
|
+
<td class="guide-layout-property">justify-content: space-evenly</td>
|
|
2419
|
+
<td class="guide-layout-property">Alineación en el eje principal</td>
|
|
2420
|
+
</tr>
|
|
2421
|
+
<tr>
|
|
2422
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-justify-items-stretch" title="Click para copiar .hg-justify-items-stretch">.hg-justify-items-stretch</td>
|
|
2423
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-justify-items-stretch" title="Click para copiar .md:hg-justify-items-stretch">.md:hg-justify-items-stretch</td>
|
|
2424
|
+
<td class="guide-layout-property">justify-items: stretch</td>
|
|
2425
|
+
<td class="guide-layout-property">Alineación horizontal en grid</td>
|
|
2426
|
+
</tr>
|
|
2427
|
+
<tr>
|
|
2428
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-justify-items-start" title="Click para copiar .hg-justify-items-start">.hg-justify-items-start</td>
|
|
2429
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-justify-items-start" title="Click para copiar .md:hg-justify-items-start">.md:hg-justify-items-start</td>
|
|
2430
|
+
<td class="guide-layout-property">justify-items: start</td>
|
|
2431
|
+
<td class="guide-layout-property">Alineación horizontal en grid</td>
|
|
2432
|
+
</tr>
|
|
2433
|
+
<tr>
|
|
2434
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-justify-items-end" title="Click para copiar .hg-justify-items-end">.hg-justify-items-end</td>
|
|
2435
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-justify-items-end" title="Click para copiar .md:hg-justify-items-end">.md:hg-justify-items-end</td>
|
|
2436
|
+
<td class="guide-layout-property">justify-items: end</td>
|
|
2437
|
+
<td class="guide-layout-property">Alineación horizontal en grid</td>
|
|
2438
|
+
</tr>
|
|
2439
|
+
<tr>
|
|
2440
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-justify-items-center" title="Click para copiar .hg-justify-items-center">.hg-justify-items-center</td>
|
|
2441
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-justify-items-center" title="Click para copiar .md:hg-justify-items-center">.md:hg-justify-items-center</td>
|
|
2442
|
+
<td class="guide-layout-property">justify-items: center</td>
|
|
2443
|
+
<td class="guide-layout-property">Alineación horizontal en grid</td>
|
|
2444
|
+
</tr>
|
|
2445
|
+
<tr>
|
|
2446
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-content-stretch" title="Click para copiar .hg-content-stretch">.hg-content-stretch</td>
|
|
2447
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-content-stretch" title="Click para copiar .md:hg-content-stretch">.md:hg-content-stretch</td>
|
|
2448
|
+
<td class="guide-layout-property">align-content: stretch</td>
|
|
2449
|
+
<td class="guide-layout-property">Alineación de líneas en el eje cruzado</td>
|
|
2450
|
+
</tr>
|
|
2451
|
+
<tr>
|
|
2452
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-content-start" title="Click para copiar .hg-content-start">.hg-content-start</td>
|
|
2453
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-content-start" title="Click para copiar .md:hg-content-start">.md:hg-content-start</td>
|
|
2454
|
+
<td class="guide-layout-property">align-content: flex-start</td>
|
|
2455
|
+
<td class="guide-layout-property">Alineación de líneas en el eje cruzado</td>
|
|
2456
|
+
</tr>
|
|
2457
|
+
<tr>
|
|
2458
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-content-end" title="Click para copiar .hg-content-end">.hg-content-end</td>
|
|
2459
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-content-end" title="Click para copiar .md:hg-content-end">.md:hg-content-end</td>
|
|
2460
|
+
<td class="guide-layout-property">align-content: flex-end</td>
|
|
2461
|
+
<td class="guide-layout-property">Alineación de líneas en el eje cruzado</td>
|
|
2462
|
+
</tr>
|
|
2463
|
+
<tr>
|
|
2464
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-content-center" title="Click para copiar .hg-content-center">.hg-content-center</td>
|
|
2465
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-content-center" title="Click para copiar .md:hg-content-center">.md:hg-content-center</td>
|
|
2466
|
+
<td class="guide-layout-property">align-content: center</td>
|
|
2467
|
+
<td class="guide-layout-property">Alineación de líneas en el eje cruzado</td>
|
|
2468
|
+
</tr>
|
|
2469
|
+
<tr>
|
|
2470
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-content-between" title="Click para copiar .hg-content-between">.hg-content-between</td>
|
|
2471
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-content-between" title="Click para copiar .md:hg-content-between">.md:hg-content-between</td>
|
|
2472
|
+
<td class="guide-layout-property">align-content: space-between</td>
|
|
2473
|
+
<td class="guide-layout-property">Alineación de líneas en el eje cruzado</td>
|
|
2474
|
+
</tr>
|
|
2475
|
+
<tr>
|
|
2476
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-content-around" title="Click para copiar .hg-content-around">.hg-content-around</td>
|
|
2477
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-content-around" title="Click para copiar .md:hg-content-around">.md:hg-content-around</td>
|
|
2478
|
+
<td class="guide-layout-property">align-content: space-around</td>
|
|
2479
|
+
<td class="guide-layout-property">Alineación de líneas en el eje cruzado</td>
|
|
2480
|
+
</tr>
|
|
2481
|
+
<tr>
|
|
2482
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-content-evenly" title="Click para copiar .hg-content-evenly">.hg-content-evenly</td>
|
|
2483
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-content-evenly" title="Click para copiar .md:hg-content-evenly">.md:hg-content-evenly</td>
|
|
2484
|
+
<td class="guide-layout-property">align-content: space-evenly</td>
|
|
2485
|
+
<td class="guide-layout-property">Alineación de líneas en el eje cruzado</td>
|
|
2486
|
+
</tr>
|
|
2487
|
+
<tr>
|
|
2488
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-items-stretch" title="Click para copiar .hg-items-stretch">.hg-items-stretch</td>
|
|
2489
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-items-stretch" title="Click para copiar .md:hg-items-stretch">.md:hg-items-stretch</td>
|
|
2490
|
+
<td class="guide-layout-property">align-items: stretch</td>
|
|
2491
|
+
<td class="guide-layout-property">Alineación en el eje cruzado</td>
|
|
2492
|
+
</tr>
|
|
2493
|
+
<tr>
|
|
2494
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-items-start" title="Click para copiar .hg-items-start">.hg-items-start</td>
|
|
2495
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-items-start" title="Click para copiar .md:hg-items-start">.md:hg-items-start</td>
|
|
2496
|
+
<td class="guide-layout-property">align-items: flex-start</td>
|
|
2497
|
+
<td class="guide-layout-property">Alineación en el eje cruzado</td>
|
|
2498
|
+
</tr>
|
|
2499
|
+
<tr>
|
|
2500
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-items-end" title="Click para copiar .hg-items-end">.hg-items-end</td>
|
|
2501
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-items-end" title="Click para copiar .md:hg-items-end">.md:hg-items-end</td>
|
|
2502
|
+
<td class="guide-layout-property">align-items: flex-end</td>
|
|
2503
|
+
<td class="guide-layout-property">Alineación en el eje cruzado</td>
|
|
2504
|
+
</tr>
|
|
2505
|
+
<tr>
|
|
2506
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-items-center" title="Click para copiar .hg-items-center">.hg-items-center</td>
|
|
2507
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-items-center" title="Click para copiar .md:hg-items-center">.md:hg-items-center</td>
|
|
2508
|
+
<td class="guide-layout-property">align-items: center</td>
|
|
2509
|
+
<td class="guide-layout-property">Alineación en el eje cruzado</td>
|
|
2510
|
+
</tr>
|
|
2511
|
+
<tr>
|
|
2512
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-items-baseline" title="Click para copiar .hg-items-baseline">.hg-items-baseline</td>
|
|
2513
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-items-baseline" title="Click para copiar .md:hg-items-baseline">.md:hg-items-baseline</td>
|
|
2514
|
+
<td class="guide-layout-property">align-items: baseline</td>
|
|
2515
|
+
<td class="guide-layout-property">Alineación en el eje cruzado</td>
|
|
2516
|
+
</tr>
|
|
2517
|
+
<tr>
|
|
2518
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-gap-0" title="Click para copiar .hg-gap-0">.hg-gap-0</td>
|
|
2519
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-gap-0" title="Click para copiar .md:hg-gap-0">.md:hg-gap-0</td>
|
|
2520
|
+
<td class="guide-layout-property">gap: 0</td>
|
|
2521
|
+
<td class="guide-layout-property">Espacio entre filas y columnas</td>
|
|
2522
|
+
</tr>
|
|
2523
|
+
<tr>
|
|
2524
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-gap-4" title="Click para copiar .hg-gap-4">.hg-gap-4</td>
|
|
2525
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-gap-4" title="Click para copiar .md:hg-gap-4">.md:hg-gap-4</td>
|
|
2526
|
+
<td class="guide-layout-property">gap: 0.25rem</td>
|
|
2527
|
+
<td class="guide-layout-property">Espacio entre filas y columnas</td>
|
|
2528
|
+
</tr>
|
|
2529
|
+
<tr>
|
|
2530
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-gap-8" title="Click para copiar .hg-gap-8">.hg-gap-8</td>
|
|
2531
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-gap-8" title="Click para copiar .md:hg-gap-8">.md:hg-gap-8</td>
|
|
2532
|
+
<td class="guide-layout-property">gap: 0.5rem</td>
|
|
2533
|
+
<td class="guide-layout-property">Espacio entre filas y columnas</td>
|
|
2534
|
+
</tr>
|
|
2535
|
+
<tr>
|
|
2536
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-gap-12" title="Click para copiar .hg-gap-12">.hg-gap-12</td>
|
|
2537
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-gap-12" title="Click para copiar .md:hg-gap-12">.md:hg-gap-12</td>
|
|
2538
|
+
<td class="guide-layout-property">gap: 0.75rem</td>
|
|
2539
|
+
<td class="guide-layout-property">Espacio entre filas y columnas</td>
|
|
2540
|
+
</tr>
|
|
2541
|
+
<tr>
|
|
2542
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-gap-16" title="Click para copiar .hg-gap-16">.hg-gap-16</td>
|
|
2543
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-gap-16" title="Click para copiar .md:hg-gap-16">.md:hg-gap-16</td>
|
|
2544
|
+
<td class="guide-layout-property">gap: 1rem</td>
|
|
2545
|
+
<td class="guide-layout-property">Espacio entre filas y columnas</td>
|
|
2546
|
+
</tr>
|
|
2547
|
+
<tr>
|
|
2548
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-gap-20" title="Click para copiar .hg-gap-20">.hg-gap-20</td>
|
|
2549
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-gap-20" title="Click para copiar .md:hg-gap-20">.md:hg-gap-20</td>
|
|
2550
|
+
<td class="guide-layout-property">gap: 1.25rem</td>
|
|
2551
|
+
<td class="guide-layout-property">Espacio entre filas y columnas</td>
|
|
2552
|
+
</tr>
|
|
2553
|
+
<tr>
|
|
2554
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-gap-24" title="Click para copiar .hg-gap-24">.hg-gap-24</td>
|
|
2555
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-gap-24" title="Click para copiar .md:hg-gap-24">.md:hg-gap-24</td>
|
|
2556
|
+
<td class="guide-layout-property">gap: 1.5rem</td>
|
|
2557
|
+
<td class="guide-layout-property">Espacio entre filas y columnas</td>
|
|
2558
|
+
</tr>
|
|
2559
|
+
<tr>
|
|
2560
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-gap-32" title="Click para copiar .hg-gap-32">.hg-gap-32</td>
|
|
2561
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-gap-32" title="Click para copiar .md:hg-gap-32">.md:hg-gap-32</td>
|
|
2562
|
+
<td class="guide-layout-property">gap: 2rem</td>
|
|
2563
|
+
<td class="guide-layout-property">Espacio entre filas y columnas</td>
|
|
2564
|
+
</tr>
|
|
2565
|
+
<tr>
|
|
2566
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-gap-36" title="Click para copiar .hg-gap-36">.hg-gap-36</td>
|
|
2567
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-gap-36" title="Click para copiar .md:hg-gap-36">.md:hg-gap-36</td>
|
|
2568
|
+
<td class="guide-layout-property">gap: 2.25rem</td>
|
|
2569
|
+
<td class="guide-layout-property">Espacio entre filas y columnas</td>
|
|
2570
|
+
</tr>
|
|
2571
|
+
<tr>
|
|
2572
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-gap-40" title="Click para copiar .hg-gap-40">.hg-gap-40</td>
|
|
2573
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-gap-40" title="Click para copiar .md:hg-gap-40">.md:hg-gap-40</td>
|
|
2574
|
+
<td class="guide-layout-property">gap: 2.5rem</td>
|
|
2575
|
+
<td class="guide-layout-property">Espacio entre filas y columnas</td>
|
|
2576
|
+
</tr>
|
|
2577
|
+
<tr>
|
|
2578
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-gap-64" title="Click para copiar .hg-gap-64">.hg-gap-64</td>
|
|
2579
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-gap-64" title="Click para copiar .md:hg-gap-64">.md:hg-gap-64</td>
|
|
2580
|
+
<td class="guide-layout-property">gap: 4rem</td>
|
|
2581
|
+
<td class="guide-layout-property">Espacio entre filas y columnas</td>
|
|
2582
|
+
</tr>
|
|
2583
|
+
<tr>
|
|
2584
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-gap-72" title="Click para copiar .hg-gap-72">.hg-gap-72</td>
|
|
2585
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-gap-72" title="Click para copiar .md:hg-gap-72">.md:hg-gap-72</td>
|
|
2586
|
+
<td class="guide-layout-property">gap: 4.5rem</td>
|
|
2587
|
+
<td class="guide-layout-property">Espacio entre filas y columnas</td>
|
|
2588
|
+
</tr>
|
|
2589
|
+
<tr>
|
|
2590
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-gap-80" title="Click para copiar .hg-gap-80">.hg-gap-80</td>
|
|
2591
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-gap-80" title="Click para copiar .md:hg-gap-80">.md:hg-gap-80</td>
|
|
2592
|
+
<td class="guide-layout-property">gap: 5rem</td>
|
|
2593
|
+
<td class="guide-layout-property">Espacio entre filas y columnas</td>
|
|
2594
|
+
</tr>
|
|
2595
|
+
<tr>
|
|
2596
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-gap-88" title="Click para copiar .hg-gap-88">.hg-gap-88</td>
|
|
2597
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-gap-88" title="Click para copiar .md:hg-gap-88">.md:hg-gap-88</td>
|
|
2598
|
+
<td class="guide-layout-property">gap: 5.5rem</td>
|
|
2599
|
+
<td class="guide-layout-property">Espacio entre filas y columnas</td>
|
|
2600
|
+
</tr>
|
|
2601
|
+
<tr>
|
|
2602
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-gap-96" title="Click para copiar .hg-gap-96">.hg-gap-96</td>
|
|
2603
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-gap-96" title="Click para copiar .md:hg-gap-96">.md:hg-gap-96</td>
|
|
2604
|
+
<td class="guide-layout-property">gap: 6rem</td>
|
|
2605
|
+
<td class="guide-layout-property">Espacio entre filas y columnas</td>
|
|
2606
|
+
</tr>
|
|
2607
|
+
<tr>
|
|
2608
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-gap-104" title="Click para copiar .hg-gap-104">.hg-gap-104</td>
|
|
2609
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-gap-104" title="Click para copiar .md:hg-gap-104">.md:hg-gap-104</td>
|
|
2610
|
+
<td class="guide-layout-property">gap: 6.5rem</td>
|
|
2611
|
+
<td class="guide-layout-property">Espacio entre filas y columnas</td>
|
|
2612
|
+
</tr>
|
|
2613
|
+
<tr>
|
|
2614
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-gap-112" title="Click para copiar .hg-gap-112">.hg-gap-112</td>
|
|
2615
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-gap-112" title="Click para copiar .md:hg-gap-112">.md:hg-gap-112</td>
|
|
2616
|
+
<td class="guide-layout-property">gap: 7rem</td>
|
|
2617
|
+
<td class="guide-layout-property">Espacio entre filas y columnas</td>
|
|
2618
|
+
</tr>
|
|
2619
|
+
<tr>
|
|
2620
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-gap-120" title="Click para copiar .hg-gap-120">.hg-gap-120</td>
|
|
2621
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-gap-120" title="Click para copiar .md:hg-gap-120">.md:hg-gap-120</td>
|
|
2622
|
+
<td class="guide-layout-property">gap: 7.5rem</td>
|
|
2623
|
+
<td class="guide-layout-property">Espacio entre filas y columnas</td>
|
|
2624
|
+
</tr>
|
|
2625
|
+
<tr>
|
|
2626
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-gap-128" title="Click para copiar .hg-gap-128">.hg-gap-128</td>
|
|
2627
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-gap-128" title="Click para copiar .md:hg-gap-128">.md:hg-gap-128</td>
|
|
2628
|
+
<td class="guide-layout-property">gap: 8rem</td>
|
|
2629
|
+
<td class="guide-layout-property">Espacio entre filas y columnas</td>
|
|
2630
|
+
</tr>
|
|
2631
|
+
<tr>
|
|
2632
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-gap-136" title="Click para copiar .hg-gap-136">.hg-gap-136</td>
|
|
2633
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-gap-136" title="Click para copiar .md:hg-gap-136">.md:hg-gap-136</td>
|
|
2634
|
+
<td class="guide-layout-property">gap: 8.5rem</td>
|
|
2635
|
+
<td class="guide-layout-property">Espacio entre filas y columnas</td>
|
|
2636
|
+
</tr>
|
|
2637
|
+
<tr>
|
|
2638
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-gap-144" title="Click para copiar .hg-gap-144">.hg-gap-144</td>
|
|
2639
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-gap-144" title="Click para copiar .md:hg-gap-144">.md:hg-gap-144</td>
|
|
2640
|
+
<td class="guide-layout-property">gap: 9rem</td>
|
|
2641
|
+
<td class="guide-layout-property">Espacio entre filas y columnas</td>
|
|
2642
|
+
</tr>
|
|
2643
|
+
<tr>
|
|
2644
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-gap-152" title="Click para copiar .hg-gap-152">.hg-gap-152</td>
|
|
2645
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-gap-152" title="Click para copiar .md:hg-gap-152">.md:hg-gap-152</td>
|
|
2646
|
+
<td class="guide-layout-property">gap: 9.5rem</td>
|
|
2647
|
+
<td class="guide-layout-property">Espacio entre filas y columnas</td>
|
|
2648
|
+
</tr>
|
|
2649
|
+
<tr>
|
|
2650
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-gap-160" title="Click para copiar .hg-gap-160">.hg-gap-160</td>
|
|
2651
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-gap-160" title="Click para copiar .md:hg-gap-160">.md:hg-gap-160</td>
|
|
2652
|
+
<td class="guide-layout-property">gap: 10rem</td>
|
|
2653
|
+
<td class="guide-layout-property">Espacio entre filas y columnas</td>
|
|
2654
|
+
</tr>
|
|
2655
|
+
<tr>
|
|
2656
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-gap-20-percent" title="Click para copiar .hg-gap-20-percent">.hg-gap-20-percent</td>
|
|
2657
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-gap-20-percent" title="Click para copiar .md:hg-gap-20-percent">.md:hg-gap-20-percent</td>
|
|
2658
|
+
<td class="guide-layout-property">gap: 20%</td>
|
|
2659
|
+
<td class="guide-layout-property">Espacio entre filas y columnas</td>
|
|
2660
|
+
</tr>
|
|
2661
|
+
<tr>
|
|
2662
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-gap-25-percent" title="Click para copiar .hg-gap-25-percent">.hg-gap-25-percent</td>
|
|
2663
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-gap-25-percent" title="Click para copiar .md:hg-gap-25-percent">.md:hg-gap-25-percent</td>
|
|
2664
|
+
<td class="guide-layout-property">gap: 25%</td>
|
|
2665
|
+
<td class="guide-layout-property">Espacio entre filas y columnas</td>
|
|
2666
|
+
</tr>
|
|
2667
|
+
<tr>
|
|
2668
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-gap-33-percent" title="Click para copiar .hg-gap-33-percent">.hg-gap-33-percent</td>
|
|
2669
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-gap-33-percent" title="Click para copiar .md:hg-gap-33-percent">.md:hg-gap-33-percent</td>
|
|
2670
|
+
<td class="guide-layout-property">gap: 33.333333%</td>
|
|
2671
|
+
<td class="guide-layout-property">Espacio entre filas y columnas</td>
|
|
2672
|
+
</tr>
|
|
2673
|
+
<tr>
|
|
2674
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-gap-40-percent" title="Click para copiar .hg-gap-40-percent">.hg-gap-40-percent</td>
|
|
2675
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-gap-40-percent" title="Click para copiar .md:hg-gap-40-percent">.md:hg-gap-40-percent</td>
|
|
2676
|
+
<td class="guide-layout-property">gap: 40%</td>
|
|
2677
|
+
<td class="guide-layout-property">Espacio entre filas y columnas</td>
|
|
2678
|
+
</tr>
|
|
2679
|
+
<tr>
|
|
2680
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-gap-50-percent" title="Click para copiar .hg-gap-50-percent">.hg-gap-50-percent</td>
|
|
2681
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-gap-50-percent" title="Click para copiar .md:hg-gap-50-percent">.md:hg-gap-50-percent</td>
|
|
2682
|
+
<td class="guide-layout-property">gap: 50%</td>
|
|
2683
|
+
<td class="guide-layout-property">Espacio entre filas y columnas</td>
|
|
2684
|
+
</tr>
|
|
2685
|
+
<tr>
|
|
2686
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-gap-60-percent" title="Click para copiar .hg-gap-60-percent">.hg-gap-60-percent</td>
|
|
2687
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-gap-60-percent" title="Click para copiar .md:hg-gap-60-percent">.md:hg-gap-60-percent</td>
|
|
2688
|
+
<td class="guide-layout-property">gap: 60%</td>
|
|
2689
|
+
<td class="guide-layout-property">Espacio entre filas y columnas</td>
|
|
2690
|
+
</tr>
|
|
2691
|
+
<tr>
|
|
2692
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-gap-66-percent" title="Click para copiar .hg-gap-66-percent">.hg-gap-66-percent</td>
|
|
2693
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-gap-66-percent" title="Click para copiar .md:hg-gap-66-percent">.md:hg-gap-66-percent</td>
|
|
2694
|
+
<td class="guide-layout-property">gap: 66.666667%</td>
|
|
2695
|
+
<td class="guide-layout-property">Espacio entre filas y columnas</td>
|
|
2696
|
+
</tr>
|
|
2697
|
+
<tr>
|
|
2698
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-gap-75-percent" title="Click para copiar .hg-gap-75-percent">.hg-gap-75-percent</td>
|
|
2699
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-gap-75-percent" title="Click para copiar .md:hg-gap-75-percent">.md:hg-gap-75-percent</td>
|
|
2700
|
+
<td class="guide-layout-property">gap: 75%</td>
|
|
2701
|
+
<td class="guide-layout-property">Espacio entre filas y columnas</td>
|
|
2702
|
+
</tr>
|
|
2703
|
+
<tr>
|
|
2704
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-gap-100-percent" title="Click para copiar .hg-gap-100-percent">.hg-gap-100-percent</td>
|
|
2705
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-gap-100-percent" title="Click para copiar .md:hg-gap-100-percent">.md:hg-gap-100-percent</td>
|
|
2706
|
+
<td class="guide-layout-property">gap: 100%</td>
|
|
2707
|
+
<td class="guide-layout-property">Espacio entre filas y columnas</td>
|
|
2708
|
+
</tr>
|
|
2709
|
+
<tr>
|
|
2710
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-gap-y-0" title="Click para copiar .hg-gap-y-0">.hg-gap-y-0</td>
|
|
2711
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-gap-y-0" title="Click para copiar .md:hg-gap-y-0">.md:hg-gap-y-0</td>
|
|
2712
|
+
<td class="guide-layout-property">row-gap: 0</td>
|
|
2713
|
+
<td class="guide-layout-property">Espacio entre filas</td>
|
|
2714
|
+
</tr>
|
|
2715
|
+
<tr>
|
|
2716
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-gap-y-4" title="Click para copiar .hg-gap-y-4">.hg-gap-y-4</td>
|
|
2717
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-gap-y-4" title="Click para copiar .md:hg-gap-y-4">.md:hg-gap-y-4</td>
|
|
2718
|
+
<td class="guide-layout-property">row-gap: 0.25rem</td>
|
|
2719
|
+
<td class="guide-layout-property">Espacio entre filas</td>
|
|
2720
|
+
</tr>
|
|
2721
|
+
<tr>
|
|
2722
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-gap-y-8" title="Click para copiar .hg-gap-y-8">.hg-gap-y-8</td>
|
|
2723
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-gap-y-8" title="Click para copiar .md:hg-gap-y-8">.md:hg-gap-y-8</td>
|
|
2724
|
+
<td class="guide-layout-property">row-gap: 0.5rem</td>
|
|
2725
|
+
<td class="guide-layout-property">Espacio entre filas</td>
|
|
2726
|
+
</tr>
|
|
2727
|
+
<tr>
|
|
2728
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-gap-y-12" title="Click para copiar .hg-gap-y-12">.hg-gap-y-12</td>
|
|
2729
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-gap-y-12" title="Click para copiar .md:hg-gap-y-12">.md:hg-gap-y-12</td>
|
|
2730
|
+
<td class="guide-layout-property">row-gap: 0.75rem</td>
|
|
2731
|
+
<td class="guide-layout-property">Espacio entre filas</td>
|
|
2732
|
+
</tr>
|
|
2733
|
+
<tr>
|
|
2734
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-gap-y-16" title="Click para copiar .hg-gap-y-16">.hg-gap-y-16</td>
|
|
2735
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-gap-y-16" title="Click para copiar .md:hg-gap-y-16">.md:hg-gap-y-16</td>
|
|
2736
|
+
<td class="guide-layout-property">row-gap: 1rem</td>
|
|
2737
|
+
<td class="guide-layout-property">Espacio entre filas</td>
|
|
2738
|
+
</tr>
|
|
2739
|
+
<tr>
|
|
2740
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-gap-y-20" title="Click para copiar .hg-gap-y-20">.hg-gap-y-20</td>
|
|
2741
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-gap-y-20" title="Click para copiar .md:hg-gap-y-20">.md:hg-gap-y-20</td>
|
|
2742
|
+
<td class="guide-layout-property">row-gap: 1.25rem</td>
|
|
2743
|
+
<td class="guide-layout-property">Espacio entre filas</td>
|
|
2744
|
+
</tr>
|
|
2745
|
+
<tr>
|
|
2746
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-gap-y-24" title="Click para copiar .hg-gap-y-24">.hg-gap-y-24</td>
|
|
2747
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-gap-y-24" title="Click para copiar .md:hg-gap-y-24">.md:hg-gap-y-24</td>
|
|
2748
|
+
<td class="guide-layout-property">row-gap: 1.5rem</td>
|
|
2749
|
+
<td class="guide-layout-property">Espacio entre filas</td>
|
|
2750
|
+
</tr>
|
|
2751
|
+
<tr>
|
|
2752
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-gap-y-32" title="Click para copiar .hg-gap-y-32">.hg-gap-y-32</td>
|
|
2753
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-gap-y-32" title="Click para copiar .md:hg-gap-y-32">.md:hg-gap-y-32</td>
|
|
2754
|
+
<td class="guide-layout-property">row-gap: 2rem</td>
|
|
2755
|
+
<td class="guide-layout-property">Espacio entre filas</td>
|
|
2756
|
+
</tr>
|
|
2757
|
+
<tr>
|
|
2758
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-gap-y-36" title="Click para copiar .hg-gap-y-36">.hg-gap-y-36</td>
|
|
2759
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-gap-y-36" title="Click para copiar .md:hg-gap-y-36">.md:hg-gap-y-36</td>
|
|
2760
|
+
<td class="guide-layout-property">row-gap: 2.25rem</td>
|
|
2761
|
+
<td class="guide-layout-property">Espacio entre filas</td>
|
|
2762
|
+
</tr>
|
|
2763
|
+
<tr>
|
|
2764
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-gap-y-40" title="Click para copiar .hg-gap-y-40">.hg-gap-y-40</td>
|
|
2765
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-gap-y-40" title="Click para copiar .md:hg-gap-y-40">.md:hg-gap-y-40</td>
|
|
2766
|
+
<td class="guide-layout-property">row-gap: 2.5rem</td>
|
|
2767
|
+
<td class="guide-layout-property">Espacio entre filas</td>
|
|
2768
|
+
</tr>
|
|
2769
|
+
<tr>
|
|
2770
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-gap-y-64" title="Click para copiar .hg-gap-y-64">.hg-gap-y-64</td>
|
|
2771
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-gap-y-64" title="Click para copiar .md:hg-gap-y-64">.md:hg-gap-y-64</td>
|
|
2772
|
+
<td class="guide-layout-property">row-gap: 4rem</td>
|
|
2773
|
+
<td class="guide-layout-property">Espacio entre filas</td>
|
|
2774
|
+
</tr>
|
|
2775
|
+
<tr>
|
|
2776
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-gap-y-72" title="Click para copiar .hg-gap-y-72">.hg-gap-y-72</td>
|
|
2777
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-gap-y-72" title="Click para copiar .md:hg-gap-y-72">.md:hg-gap-y-72</td>
|
|
2778
|
+
<td class="guide-layout-property">row-gap: 4.5rem</td>
|
|
2779
|
+
<td class="guide-layout-property">Espacio entre filas</td>
|
|
2780
|
+
</tr>
|
|
2781
|
+
<tr>
|
|
2782
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-gap-y-80" title="Click para copiar .hg-gap-y-80">.hg-gap-y-80</td>
|
|
2783
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-gap-y-80" title="Click para copiar .md:hg-gap-y-80">.md:hg-gap-y-80</td>
|
|
2784
|
+
<td class="guide-layout-property">row-gap: 5rem</td>
|
|
2785
|
+
<td class="guide-layout-property">Espacio entre filas</td>
|
|
2786
|
+
</tr>
|
|
2787
|
+
<tr>
|
|
2788
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-gap-y-88" title="Click para copiar .hg-gap-y-88">.hg-gap-y-88</td>
|
|
2789
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-gap-y-88" title="Click para copiar .md:hg-gap-y-88">.md:hg-gap-y-88</td>
|
|
2790
|
+
<td class="guide-layout-property">row-gap: 5.5rem</td>
|
|
2791
|
+
<td class="guide-layout-property">Espacio entre filas</td>
|
|
2792
|
+
</tr>
|
|
2793
|
+
<tr>
|
|
2794
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-gap-y-96" title="Click para copiar .hg-gap-y-96">.hg-gap-y-96</td>
|
|
2795
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-gap-y-96" title="Click para copiar .md:hg-gap-y-96">.md:hg-gap-y-96</td>
|
|
2796
|
+
<td class="guide-layout-property">row-gap: 6rem</td>
|
|
2797
|
+
<td class="guide-layout-property">Espacio entre filas</td>
|
|
2798
|
+
</tr>
|
|
2799
|
+
<tr>
|
|
2800
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-gap-y-104" title="Click para copiar .hg-gap-y-104">.hg-gap-y-104</td>
|
|
2801
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-gap-y-104" title="Click para copiar .md:hg-gap-y-104">.md:hg-gap-y-104</td>
|
|
2802
|
+
<td class="guide-layout-property">row-gap: 6.5rem</td>
|
|
2803
|
+
<td class="guide-layout-property">Espacio entre filas</td>
|
|
2804
|
+
</tr>
|
|
2805
|
+
<tr>
|
|
2806
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-gap-y-112" title="Click para copiar .hg-gap-y-112">.hg-gap-y-112</td>
|
|
2807
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-gap-y-112" title="Click para copiar .md:hg-gap-y-112">.md:hg-gap-y-112</td>
|
|
2808
|
+
<td class="guide-layout-property">row-gap: 7rem</td>
|
|
2809
|
+
<td class="guide-layout-property">Espacio entre filas</td>
|
|
2810
|
+
</tr>
|
|
2811
|
+
<tr>
|
|
2812
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-gap-y-120" title="Click para copiar .hg-gap-y-120">.hg-gap-y-120</td>
|
|
2813
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-gap-y-120" title="Click para copiar .md:hg-gap-y-120">.md:hg-gap-y-120</td>
|
|
2814
|
+
<td class="guide-layout-property">row-gap: 7.5rem</td>
|
|
2815
|
+
<td class="guide-layout-property">Espacio entre filas</td>
|
|
2816
|
+
</tr>
|
|
2817
|
+
<tr>
|
|
2818
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-gap-y-128" title="Click para copiar .hg-gap-y-128">.hg-gap-y-128</td>
|
|
2819
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-gap-y-128" title="Click para copiar .md:hg-gap-y-128">.md:hg-gap-y-128</td>
|
|
2820
|
+
<td class="guide-layout-property">row-gap: 8rem</td>
|
|
2821
|
+
<td class="guide-layout-property">Espacio entre filas</td>
|
|
2822
|
+
</tr>
|
|
2823
|
+
<tr>
|
|
2824
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-gap-y-136" title="Click para copiar .hg-gap-y-136">.hg-gap-y-136</td>
|
|
2825
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-gap-y-136" title="Click para copiar .md:hg-gap-y-136">.md:hg-gap-y-136</td>
|
|
2826
|
+
<td class="guide-layout-property">row-gap: 8.5rem</td>
|
|
2827
|
+
<td class="guide-layout-property">Espacio entre filas</td>
|
|
2828
|
+
</tr>
|
|
2829
|
+
<tr>
|
|
2830
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-gap-y-144" title="Click para copiar .hg-gap-y-144">.hg-gap-y-144</td>
|
|
2831
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-gap-y-144" title="Click para copiar .md:hg-gap-y-144">.md:hg-gap-y-144</td>
|
|
2832
|
+
<td class="guide-layout-property">row-gap: 9rem</td>
|
|
2833
|
+
<td class="guide-layout-property">Espacio entre filas</td>
|
|
2834
|
+
</tr>
|
|
2835
|
+
<tr>
|
|
2836
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-gap-y-152" title="Click para copiar .hg-gap-y-152">.hg-gap-y-152</td>
|
|
2837
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-gap-y-152" title="Click para copiar .md:hg-gap-y-152">.md:hg-gap-y-152</td>
|
|
2838
|
+
<td class="guide-layout-property">row-gap: 9.5rem</td>
|
|
2839
|
+
<td class="guide-layout-property">Espacio entre filas</td>
|
|
2840
|
+
</tr>
|
|
2841
|
+
<tr>
|
|
2842
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-gap-y-160" title="Click para copiar .hg-gap-y-160">.hg-gap-y-160</td>
|
|
2843
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-gap-y-160" title="Click para copiar .md:hg-gap-y-160">.md:hg-gap-y-160</td>
|
|
2844
|
+
<td class="guide-layout-property">row-gap: 10rem</td>
|
|
2845
|
+
<td class="guide-layout-property">Espacio entre filas</td>
|
|
2846
|
+
</tr>
|
|
2847
|
+
<tr>
|
|
2848
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-gap-y-20-percent" title="Click para copiar .hg-gap-y-20-percent">.hg-gap-y-20-percent</td>
|
|
2849
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-gap-y-20-percent" title="Click para copiar .md:hg-gap-y-20-percent">.md:hg-gap-y-20-percent</td>
|
|
2850
|
+
<td class="guide-layout-property">row-gap: 20%</td>
|
|
2851
|
+
<td class="guide-layout-property">Espacio entre filas</td>
|
|
2852
|
+
</tr>
|
|
2853
|
+
<tr>
|
|
2854
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-gap-y-25-percent" title="Click para copiar .hg-gap-y-25-percent">.hg-gap-y-25-percent</td>
|
|
2855
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-gap-y-25-percent" title="Click para copiar .md:hg-gap-y-25-percent">.md:hg-gap-y-25-percent</td>
|
|
2856
|
+
<td class="guide-layout-property">row-gap: 25%</td>
|
|
2857
|
+
<td class="guide-layout-property">Espacio entre filas</td>
|
|
2858
|
+
</tr>
|
|
2859
|
+
<tr>
|
|
2860
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-gap-y-33-percent" title="Click para copiar .hg-gap-y-33-percent">.hg-gap-y-33-percent</td>
|
|
2861
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-gap-y-33-percent" title="Click para copiar .md:hg-gap-y-33-percent">.md:hg-gap-y-33-percent</td>
|
|
2862
|
+
<td class="guide-layout-property">row-gap: 33.333333%</td>
|
|
2863
|
+
<td class="guide-layout-property">Espacio entre filas</td>
|
|
2864
|
+
</tr>
|
|
2865
|
+
<tr>
|
|
2866
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-gap-y-40-percent" title="Click para copiar .hg-gap-y-40-percent">.hg-gap-y-40-percent</td>
|
|
2867
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-gap-y-40-percent" title="Click para copiar .md:hg-gap-y-40-percent">.md:hg-gap-y-40-percent</td>
|
|
2868
|
+
<td class="guide-layout-property">row-gap: 40%</td>
|
|
2869
|
+
<td class="guide-layout-property">Espacio entre filas</td>
|
|
2870
|
+
</tr>
|
|
2871
|
+
<tr>
|
|
2872
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-gap-y-50-percent" title="Click para copiar .hg-gap-y-50-percent">.hg-gap-y-50-percent</td>
|
|
2873
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-gap-y-50-percent" title="Click para copiar .md:hg-gap-y-50-percent">.md:hg-gap-y-50-percent</td>
|
|
2874
|
+
<td class="guide-layout-property">row-gap: 50%</td>
|
|
2875
|
+
<td class="guide-layout-property">Espacio entre filas</td>
|
|
2876
|
+
</tr>
|
|
2877
|
+
<tr>
|
|
2878
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-gap-y-60-percent" title="Click para copiar .hg-gap-y-60-percent">.hg-gap-y-60-percent</td>
|
|
2879
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-gap-y-60-percent" title="Click para copiar .md:hg-gap-y-60-percent">.md:hg-gap-y-60-percent</td>
|
|
2880
|
+
<td class="guide-layout-property">row-gap: 60%</td>
|
|
2881
|
+
<td class="guide-layout-property">Espacio entre filas</td>
|
|
2882
|
+
</tr>
|
|
2883
|
+
<tr>
|
|
2884
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-gap-y-66-percent" title="Click para copiar .hg-gap-y-66-percent">.hg-gap-y-66-percent</td>
|
|
2885
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-gap-y-66-percent" title="Click para copiar .md:hg-gap-y-66-percent">.md:hg-gap-y-66-percent</td>
|
|
2886
|
+
<td class="guide-layout-property">row-gap: 66.666667%</td>
|
|
2887
|
+
<td class="guide-layout-property">Espacio entre filas</td>
|
|
2888
|
+
</tr>
|
|
2889
|
+
<tr>
|
|
2890
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-gap-y-75-percent" title="Click para copiar .hg-gap-y-75-percent">.hg-gap-y-75-percent</td>
|
|
2891
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-gap-y-75-percent" title="Click para copiar .md:hg-gap-y-75-percent">.md:hg-gap-y-75-percent</td>
|
|
2892
|
+
<td class="guide-layout-property">row-gap: 75%</td>
|
|
2893
|
+
<td class="guide-layout-property">Espacio entre filas</td>
|
|
2894
|
+
</tr>
|
|
2895
|
+
<tr>
|
|
2896
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-gap-y-100-percent" title="Click para copiar .hg-gap-y-100-percent">.hg-gap-y-100-percent</td>
|
|
2897
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-gap-y-100-percent" title="Click para copiar .md:hg-gap-y-100-percent">.md:hg-gap-y-100-percent</td>
|
|
2898
|
+
<td class="guide-layout-property">row-gap: 100%</td>
|
|
2899
|
+
<td class="guide-layout-property">Espacio entre filas</td>
|
|
2900
|
+
</tr>
|
|
2901
|
+
<tr>
|
|
2902
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-gap-x-0" title="Click para copiar .hg-gap-x-0">.hg-gap-x-0</td>
|
|
2903
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-gap-x-0" title="Click para copiar .md:hg-gap-x-0">.md:hg-gap-x-0</td>
|
|
2904
|
+
<td class="guide-layout-property">column-gap: 0</td>
|
|
2905
|
+
<td class="guide-layout-property">Espacio entre columnas</td>
|
|
2906
|
+
</tr>
|
|
2907
|
+
<tr>
|
|
2908
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-gap-x-4" title="Click para copiar .hg-gap-x-4">.hg-gap-x-4</td>
|
|
2909
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-gap-x-4" title="Click para copiar .md:hg-gap-x-4">.md:hg-gap-x-4</td>
|
|
2910
|
+
<td class="guide-layout-property">column-gap: 0.25rem</td>
|
|
2911
|
+
<td class="guide-layout-property">Espacio entre columnas</td>
|
|
2912
|
+
</tr>
|
|
2913
|
+
<tr>
|
|
2914
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-gap-x-8" title="Click para copiar .hg-gap-x-8">.hg-gap-x-8</td>
|
|
2915
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-gap-x-8" title="Click para copiar .md:hg-gap-x-8">.md:hg-gap-x-8</td>
|
|
2916
|
+
<td class="guide-layout-property">column-gap: 0.5rem</td>
|
|
2917
|
+
<td class="guide-layout-property">Espacio entre columnas</td>
|
|
2918
|
+
</tr>
|
|
2919
|
+
<tr>
|
|
2920
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-gap-x-12" title="Click para copiar .hg-gap-x-12">.hg-gap-x-12</td>
|
|
2921
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-gap-x-12" title="Click para copiar .md:hg-gap-x-12">.md:hg-gap-x-12</td>
|
|
2922
|
+
<td class="guide-layout-property">column-gap: 0.75rem</td>
|
|
2923
|
+
<td class="guide-layout-property">Espacio entre columnas</td>
|
|
2924
|
+
</tr>
|
|
2925
|
+
<tr>
|
|
2926
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-gap-x-16" title="Click para copiar .hg-gap-x-16">.hg-gap-x-16</td>
|
|
2927
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-gap-x-16" title="Click para copiar .md:hg-gap-x-16">.md:hg-gap-x-16</td>
|
|
2928
|
+
<td class="guide-layout-property">column-gap: 1rem</td>
|
|
2929
|
+
<td class="guide-layout-property">Espacio entre columnas</td>
|
|
2930
|
+
</tr>
|
|
2931
|
+
<tr>
|
|
2932
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-gap-x-20" title="Click para copiar .hg-gap-x-20">.hg-gap-x-20</td>
|
|
2933
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-gap-x-20" title="Click para copiar .md:hg-gap-x-20">.md:hg-gap-x-20</td>
|
|
2934
|
+
<td class="guide-layout-property">column-gap: 1.25rem</td>
|
|
2935
|
+
<td class="guide-layout-property">Espacio entre columnas</td>
|
|
2936
|
+
</tr>
|
|
2937
|
+
<tr>
|
|
2938
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-gap-x-24" title="Click para copiar .hg-gap-x-24">.hg-gap-x-24</td>
|
|
2939
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-gap-x-24" title="Click para copiar .md:hg-gap-x-24">.md:hg-gap-x-24</td>
|
|
2940
|
+
<td class="guide-layout-property">column-gap: 1.5rem</td>
|
|
2941
|
+
<td class="guide-layout-property">Espacio entre columnas</td>
|
|
2942
|
+
</tr>
|
|
2943
|
+
<tr>
|
|
2944
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-gap-x-32" title="Click para copiar .hg-gap-x-32">.hg-gap-x-32</td>
|
|
2945
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-gap-x-32" title="Click para copiar .md:hg-gap-x-32">.md:hg-gap-x-32</td>
|
|
2946
|
+
<td class="guide-layout-property">column-gap: 2rem</td>
|
|
2947
|
+
<td class="guide-layout-property">Espacio entre columnas</td>
|
|
2948
|
+
</tr>
|
|
2949
|
+
<tr>
|
|
2950
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-gap-x-36" title="Click para copiar .hg-gap-x-36">.hg-gap-x-36</td>
|
|
2951
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-gap-x-36" title="Click para copiar .md:hg-gap-x-36">.md:hg-gap-x-36</td>
|
|
2952
|
+
<td class="guide-layout-property">column-gap: 2.25rem</td>
|
|
2953
|
+
<td class="guide-layout-property">Espacio entre columnas</td>
|
|
2954
|
+
</tr>
|
|
2955
|
+
<tr>
|
|
2956
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-gap-x-40" title="Click para copiar .hg-gap-x-40">.hg-gap-x-40</td>
|
|
2957
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-gap-x-40" title="Click para copiar .md:hg-gap-x-40">.md:hg-gap-x-40</td>
|
|
2958
|
+
<td class="guide-layout-property">column-gap: 2.5rem</td>
|
|
2959
|
+
<td class="guide-layout-property">Espacio entre columnas</td>
|
|
2960
|
+
</tr>
|
|
2961
|
+
<tr>
|
|
2962
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-gap-x-64" title="Click para copiar .hg-gap-x-64">.hg-gap-x-64</td>
|
|
2963
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-gap-x-64" title="Click para copiar .md:hg-gap-x-64">.md:hg-gap-x-64</td>
|
|
2964
|
+
<td class="guide-layout-property">column-gap: 4rem</td>
|
|
2965
|
+
<td class="guide-layout-property">Espacio entre columnas</td>
|
|
2966
|
+
</tr>
|
|
2967
|
+
<tr>
|
|
2968
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-gap-x-72" title="Click para copiar .hg-gap-x-72">.hg-gap-x-72</td>
|
|
2969
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-gap-x-72" title="Click para copiar .md:hg-gap-x-72">.md:hg-gap-x-72</td>
|
|
2970
|
+
<td class="guide-layout-property">column-gap: 4.5rem</td>
|
|
2971
|
+
<td class="guide-layout-property">Espacio entre columnas</td>
|
|
2972
|
+
</tr>
|
|
2973
|
+
<tr>
|
|
2974
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-gap-x-80" title="Click para copiar .hg-gap-x-80">.hg-gap-x-80</td>
|
|
2975
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-gap-x-80" title="Click para copiar .md:hg-gap-x-80">.md:hg-gap-x-80</td>
|
|
2976
|
+
<td class="guide-layout-property">column-gap: 5rem</td>
|
|
2977
|
+
<td class="guide-layout-property">Espacio entre columnas</td>
|
|
2978
|
+
</tr>
|
|
2979
|
+
<tr>
|
|
2980
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-gap-x-88" title="Click para copiar .hg-gap-x-88">.hg-gap-x-88</td>
|
|
2981
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-gap-x-88" title="Click para copiar .md:hg-gap-x-88">.md:hg-gap-x-88</td>
|
|
2982
|
+
<td class="guide-layout-property">column-gap: 5.5rem</td>
|
|
2983
|
+
<td class="guide-layout-property">Espacio entre columnas</td>
|
|
2984
|
+
</tr>
|
|
2985
|
+
<tr>
|
|
2986
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-gap-x-96" title="Click para copiar .hg-gap-x-96">.hg-gap-x-96</td>
|
|
2987
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-gap-x-96" title="Click para copiar .md:hg-gap-x-96">.md:hg-gap-x-96</td>
|
|
2988
|
+
<td class="guide-layout-property">column-gap: 6rem</td>
|
|
2989
|
+
<td class="guide-layout-property">Espacio entre columnas</td>
|
|
2990
|
+
</tr>
|
|
2991
|
+
<tr>
|
|
2992
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-gap-x-104" title="Click para copiar .hg-gap-x-104">.hg-gap-x-104</td>
|
|
2993
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-gap-x-104" title="Click para copiar .md:hg-gap-x-104">.md:hg-gap-x-104</td>
|
|
2994
|
+
<td class="guide-layout-property">column-gap: 6.5rem</td>
|
|
2995
|
+
<td class="guide-layout-property">Espacio entre columnas</td>
|
|
2996
|
+
</tr>
|
|
2997
|
+
<tr>
|
|
2998
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-gap-x-112" title="Click para copiar .hg-gap-x-112">.hg-gap-x-112</td>
|
|
2999
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-gap-x-112" title="Click para copiar .md:hg-gap-x-112">.md:hg-gap-x-112</td>
|
|
3000
|
+
<td class="guide-layout-property">column-gap: 7rem</td>
|
|
3001
|
+
<td class="guide-layout-property">Espacio entre columnas</td>
|
|
3002
|
+
</tr>
|
|
3003
|
+
<tr>
|
|
3004
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-gap-x-120" title="Click para copiar .hg-gap-x-120">.hg-gap-x-120</td>
|
|
3005
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-gap-x-120" title="Click para copiar .md:hg-gap-x-120">.md:hg-gap-x-120</td>
|
|
3006
|
+
<td class="guide-layout-property">column-gap: 7.5rem</td>
|
|
3007
|
+
<td class="guide-layout-property">Espacio entre columnas</td>
|
|
3008
|
+
</tr>
|
|
3009
|
+
<tr>
|
|
3010
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-gap-x-128" title="Click para copiar .hg-gap-x-128">.hg-gap-x-128</td>
|
|
3011
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-gap-x-128" title="Click para copiar .md:hg-gap-x-128">.md:hg-gap-x-128</td>
|
|
3012
|
+
<td class="guide-layout-property">column-gap: 8rem</td>
|
|
3013
|
+
<td class="guide-layout-property">Espacio entre columnas</td>
|
|
3014
|
+
</tr>
|
|
3015
|
+
<tr>
|
|
3016
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-gap-x-136" title="Click para copiar .hg-gap-x-136">.hg-gap-x-136</td>
|
|
3017
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-gap-x-136" title="Click para copiar .md:hg-gap-x-136">.md:hg-gap-x-136</td>
|
|
3018
|
+
<td class="guide-layout-property">column-gap: 8.5rem</td>
|
|
3019
|
+
<td class="guide-layout-property">Espacio entre columnas</td>
|
|
3020
|
+
</tr>
|
|
3021
|
+
<tr>
|
|
3022
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-gap-x-144" title="Click para copiar .hg-gap-x-144">.hg-gap-x-144</td>
|
|
3023
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-gap-x-144" title="Click para copiar .md:hg-gap-x-144">.md:hg-gap-x-144</td>
|
|
3024
|
+
<td class="guide-layout-property">column-gap: 9rem</td>
|
|
3025
|
+
<td class="guide-layout-property">Espacio entre columnas</td>
|
|
3026
|
+
</tr>
|
|
3027
|
+
<tr>
|
|
3028
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-gap-x-152" title="Click para copiar .hg-gap-x-152">.hg-gap-x-152</td>
|
|
3029
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-gap-x-152" title="Click para copiar .md:hg-gap-x-152">.md:hg-gap-x-152</td>
|
|
3030
|
+
<td class="guide-layout-property">column-gap: 9.5rem</td>
|
|
3031
|
+
<td class="guide-layout-property">Espacio entre columnas</td>
|
|
3032
|
+
</tr>
|
|
3033
|
+
<tr>
|
|
3034
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-gap-x-160" title="Click para copiar .hg-gap-x-160">.hg-gap-x-160</td>
|
|
3035
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-gap-x-160" title="Click para copiar .md:hg-gap-x-160">.md:hg-gap-x-160</td>
|
|
3036
|
+
<td class="guide-layout-property">column-gap: 10rem</td>
|
|
3037
|
+
<td class="guide-layout-property">Espacio entre columnas</td>
|
|
3038
|
+
</tr>
|
|
3039
|
+
<tr>
|
|
3040
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-gap-x-20-percent" title="Click para copiar .hg-gap-x-20-percent">.hg-gap-x-20-percent</td>
|
|
3041
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-gap-x-20-percent" title="Click para copiar .md:hg-gap-x-20-percent">.md:hg-gap-x-20-percent</td>
|
|
3042
|
+
<td class="guide-layout-property">column-gap: 20%</td>
|
|
3043
|
+
<td class="guide-layout-property">Espacio entre columnas</td>
|
|
3044
|
+
</tr>
|
|
3045
|
+
<tr>
|
|
3046
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-gap-x-25-percent" title="Click para copiar .hg-gap-x-25-percent">.hg-gap-x-25-percent</td>
|
|
3047
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-gap-x-25-percent" title="Click para copiar .md:hg-gap-x-25-percent">.md:hg-gap-x-25-percent</td>
|
|
3048
|
+
<td class="guide-layout-property">column-gap: 25%</td>
|
|
3049
|
+
<td class="guide-layout-property">Espacio entre columnas</td>
|
|
3050
|
+
</tr>
|
|
3051
|
+
<tr>
|
|
3052
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-gap-x-33-percent" title="Click para copiar .hg-gap-x-33-percent">.hg-gap-x-33-percent</td>
|
|
3053
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-gap-x-33-percent" title="Click para copiar .md:hg-gap-x-33-percent">.md:hg-gap-x-33-percent</td>
|
|
3054
|
+
<td class="guide-layout-property">column-gap: 33.333333%</td>
|
|
3055
|
+
<td class="guide-layout-property">Espacio entre columnas</td>
|
|
3056
|
+
</tr>
|
|
3057
|
+
<tr>
|
|
3058
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-gap-x-40-percent" title="Click para copiar .hg-gap-x-40-percent">.hg-gap-x-40-percent</td>
|
|
3059
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-gap-x-40-percent" title="Click para copiar .md:hg-gap-x-40-percent">.md:hg-gap-x-40-percent</td>
|
|
3060
|
+
<td class="guide-layout-property">column-gap: 40%</td>
|
|
3061
|
+
<td class="guide-layout-property">Espacio entre columnas</td>
|
|
3062
|
+
</tr>
|
|
3063
|
+
<tr>
|
|
3064
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-gap-x-50-percent" title="Click para copiar .hg-gap-x-50-percent">.hg-gap-x-50-percent</td>
|
|
3065
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-gap-x-50-percent" title="Click para copiar .md:hg-gap-x-50-percent">.md:hg-gap-x-50-percent</td>
|
|
3066
|
+
<td class="guide-layout-property">column-gap: 50%</td>
|
|
3067
|
+
<td class="guide-layout-property">Espacio entre columnas</td>
|
|
3068
|
+
</tr>
|
|
3069
|
+
<tr>
|
|
3070
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-gap-x-60-percent" title="Click para copiar .hg-gap-x-60-percent">.hg-gap-x-60-percent</td>
|
|
3071
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-gap-x-60-percent" title="Click para copiar .md:hg-gap-x-60-percent">.md:hg-gap-x-60-percent</td>
|
|
3072
|
+
<td class="guide-layout-property">column-gap: 60%</td>
|
|
3073
|
+
<td class="guide-layout-property">Espacio entre columnas</td>
|
|
3074
|
+
</tr>
|
|
3075
|
+
<tr>
|
|
3076
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-gap-x-66-percent" title="Click para copiar .hg-gap-x-66-percent">.hg-gap-x-66-percent</td>
|
|
3077
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-gap-x-66-percent" title="Click para copiar .md:hg-gap-x-66-percent">.md:hg-gap-x-66-percent</td>
|
|
3078
|
+
<td class="guide-layout-property">column-gap: 66.666667%</td>
|
|
3079
|
+
<td class="guide-layout-property">Espacio entre columnas</td>
|
|
3080
|
+
</tr>
|
|
3081
|
+
<tr>
|
|
3082
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-gap-x-75-percent" title="Click para copiar .hg-gap-x-75-percent">.hg-gap-x-75-percent</td>
|
|
3083
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-gap-x-75-percent" title="Click para copiar .md:hg-gap-x-75-percent">.md:hg-gap-x-75-percent</td>
|
|
3084
|
+
<td class="guide-layout-property">column-gap: 75%</td>
|
|
3085
|
+
<td class="guide-layout-property">Espacio entre columnas</td>
|
|
3086
|
+
</tr>
|
|
3087
|
+
<tr>
|
|
3088
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-gap-x-100-percent" title="Click para copiar .hg-gap-x-100-percent">.hg-gap-x-100-percent</td>
|
|
3089
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-gap-x-100-percent" title="Click para copiar .md:hg-gap-x-100-percent">.md:hg-gap-x-100-percent</td>
|
|
3090
|
+
<td class="guide-layout-property">column-gap: 100%</td>
|
|
3091
|
+
<td class="guide-layout-property">Espacio entre columnas</td>
|
|
3092
|
+
</tr>
|
|
3093
|
+
<tr>
|
|
3094
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-w-auto" title="Click para copiar .hg-w-auto">.hg-w-auto</td>
|
|
3095
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-w-auto" title="Click para copiar .md:hg-w-auto">.md:hg-w-auto</td>
|
|
3096
|
+
<td class="guide-layout-property">width: auto</td>
|
|
3097
|
+
<td class="guide-layout-property">Ancho del elemento</td>
|
|
3098
|
+
</tr>
|
|
3099
|
+
<tr>
|
|
3100
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-w-100-percent" title="Click para copiar .hg-w-100-percent">.hg-w-100-percent</td>
|
|
3101
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-w-100-percent" title="Click para copiar .md:hg-w-100-percent">.md:hg-w-100-percent</td>
|
|
3102
|
+
<td class="guide-layout-property">width: 100%</td>
|
|
3103
|
+
<td class="guide-layout-property">Ancho del elemento</td>
|
|
3104
|
+
</tr>
|
|
3105
|
+
<tr>
|
|
3106
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-w-100vw" title="Click para copiar .hg-w-100vw">.hg-w-100vw</td>
|
|
3107
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-w-100vw" title="Click para copiar .md:hg-w-100vw">.md:hg-w-100vw</td>
|
|
3108
|
+
<td class="guide-layout-property">width: 100vw</td>
|
|
3109
|
+
<td class="guide-layout-property">Ancho del elemento</td>
|
|
3110
|
+
</tr>
|
|
3111
|
+
<tr>
|
|
3112
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-w-50-percent" title="Click para copiar .hg-w-50-percent">.hg-w-50-percent</td>
|
|
3113
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-w-50-percent" title="Click para copiar .md:hg-w-50-percent">.md:hg-w-50-percent</td>
|
|
3114
|
+
<td class="guide-layout-property">width: 50%</td>
|
|
3115
|
+
<td class="guide-layout-property">Ancho del elemento</td>
|
|
3116
|
+
</tr>
|
|
3117
|
+
<tr>
|
|
3118
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-w-75-percent" title="Click para copiar .hg-w-75-percent">.hg-w-75-percent</td>
|
|
3119
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-w-75-percent" title="Click para copiar .md:hg-w-75-percent">.md:hg-w-75-percent</td>
|
|
3120
|
+
<td class="guide-layout-property">width: 75%</td>
|
|
3121
|
+
<td class="guide-layout-property">Ancho del elemento</td>
|
|
3122
|
+
</tr>
|
|
3123
|
+
<tr>
|
|
3124
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-w-fit-content" title="Click para copiar .hg-w-fit-content">.hg-w-fit-content</td>
|
|
3125
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-w-fit-content" title="Click para copiar .md:hg-w-fit-content">.md:hg-w-fit-content</td>
|
|
3126
|
+
<td class="guide-layout-property">width: fit-content</td>
|
|
3127
|
+
<td class="guide-layout-property">Ancho del elemento</td>
|
|
3128
|
+
</tr>
|
|
3129
|
+
<tr>
|
|
3130
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-w-min-content" title="Click para copiar .hg-w-min-content">.hg-w-min-content</td>
|
|
3131
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-w-min-content" title="Click para copiar .md:hg-w-min-content">.md:hg-w-min-content</td>
|
|
3132
|
+
<td class="guide-layout-property">width: min-content</td>
|
|
3133
|
+
<td class="guide-layout-property">Ancho del elemento</td>
|
|
3134
|
+
</tr>
|
|
3135
|
+
<tr>
|
|
3136
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-w-max-content" title="Click para copiar .hg-w-max-content">.hg-w-max-content</td>
|
|
3137
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-w-max-content" title="Click para copiar .md:hg-w-max-content">.md:hg-w-max-content</td>
|
|
3138
|
+
<td class="guide-layout-property">width: max-content</td>
|
|
3139
|
+
<td class="guide-layout-property">Ancho del elemento</td>
|
|
3140
|
+
</tr>
|
|
3141
|
+
<tr>
|
|
3142
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-h-auto" title="Click para copiar .hg-h-auto">.hg-h-auto</td>
|
|
3143
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-h-auto" title="Click para copiar .md:hg-h-auto">.md:hg-h-auto</td>
|
|
3144
|
+
<td class="guide-layout-property">height: auto</td>
|
|
3145
|
+
<td class="guide-layout-property">Altura del elemento</td>
|
|
3146
|
+
</tr>
|
|
3147
|
+
<tr>
|
|
3148
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-h-100-percent" title="Click para copiar .hg-h-100-percent">.hg-h-100-percent</td>
|
|
3149
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-h-100-percent" title="Click para copiar .md:hg-h-100-percent">.md:hg-h-100-percent</td>
|
|
3150
|
+
<td class="guide-layout-property">height: 100%</td>
|
|
3151
|
+
<td class="guide-layout-property">Altura del elemento</td>
|
|
3152
|
+
</tr>
|
|
3153
|
+
<tr>
|
|
3154
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-h-100vh" title="Click para copiar .hg-h-100vh">.hg-h-100vh</td>
|
|
3155
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-h-100vh" title="Click para copiar .md:hg-h-100vh">.md:hg-h-100vh</td>
|
|
3156
|
+
<td class="guide-layout-property">height: 100vh</td>
|
|
3157
|
+
<td class="guide-layout-property">Altura del elemento</td>
|
|
3158
|
+
</tr>
|
|
3159
|
+
<tr>
|
|
3160
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-h-100svh" title="Click para copiar .hg-h-100svh">.hg-h-100svh</td>
|
|
3161
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-h-100svh" title="Click para copiar .md:hg-h-100svh">.md:hg-h-100svh</td>
|
|
3162
|
+
<td class="guide-layout-property">height: 100svh</td>
|
|
3163
|
+
<td class="guide-layout-property">Altura del elemento</td>
|
|
3164
|
+
</tr>
|
|
3165
|
+
<tr>
|
|
3166
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-h-100lvh" title="Click para copiar .hg-h-100lvh">.hg-h-100lvh</td>
|
|
3167
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-h-100lvh" title="Click para copiar .md:hg-h-100lvh">.md:hg-h-100lvh</td>
|
|
3168
|
+
<td class="guide-layout-property">height: 100lvh</td>
|
|
3169
|
+
<td class="guide-layout-property">Altura del elemento</td>
|
|
3170
|
+
</tr>
|
|
3171
|
+
<tr>
|
|
3172
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-h-100dvh" title="Click para copiar .hg-h-100dvh">.hg-h-100dvh</td>
|
|
3173
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-h-100dvh" title="Click para copiar .md:hg-h-100dvh">.md:hg-h-100dvh</td>
|
|
3174
|
+
<td class="guide-layout-property">height: 100dvh</td>
|
|
3175
|
+
<td class="guide-layout-property">Altura del elemento</td>
|
|
3176
|
+
</tr>
|
|
3177
|
+
<tr>
|
|
3178
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-h-50-percent" title="Click para copiar .hg-h-50-percent">.hg-h-50-percent</td>
|
|
3179
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-h-50-percent" title="Click para copiar .md:hg-h-50-percent">.md:hg-h-50-percent</td>
|
|
3180
|
+
<td class="guide-layout-property">height: 50%</td>
|
|
3181
|
+
<td class="guide-layout-property">Altura del elemento</td>
|
|
3182
|
+
</tr>
|
|
3183
|
+
<tr>
|
|
3184
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-h-75-percent" title="Click para copiar .hg-h-75-percent">.hg-h-75-percent</td>
|
|
3185
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-h-75-percent" title="Click para copiar .md:hg-h-75-percent">.md:hg-h-75-percent</td>
|
|
3186
|
+
<td class="guide-layout-property">height: 75%</td>
|
|
3187
|
+
<td class="guide-layout-property">Altura del elemento</td>
|
|
3188
|
+
</tr>
|
|
3189
|
+
<tr>
|
|
3190
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-h-fit-content" title="Click para copiar .hg-h-fit-content">.hg-h-fit-content</td>
|
|
3191
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-h-fit-content" title="Click para copiar .md:hg-h-fit-content">.md:hg-h-fit-content</td>
|
|
3192
|
+
<td class="guide-layout-property">height: fit-content</td>
|
|
3193
|
+
<td class="guide-layout-property">Altura del elemento</td>
|
|
3194
|
+
</tr>
|
|
3195
|
+
<tr>
|
|
3196
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-h-min-content" title="Click para copiar .hg-h-min-content">.hg-h-min-content</td>
|
|
3197
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-h-min-content" title="Click para copiar .md:hg-h-min-content">.md:hg-h-min-content</td>
|
|
3198
|
+
<td class="guide-layout-property">height: min-content</td>
|
|
3199
|
+
<td class="guide-layout-property">Altura del elemento</td>
|
|
3200
|
+
</tr>
|
|
3201
|
+
<tr>
|
|
3202
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-h-max-content" title="Click para copiar .hg-h-max-content">.hg-h-max-content</td>
|
|
3203
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-h-max-content" title="Click para copiar .md:hg-h-max-content">.md:hg-h-max-content</td>
|
|
3204
|
+
<td class="guide-layout-property">height: max-content</td>
|
|
3205
|
+
<td class="guide-layout-property">Altura del elemento</td>
|
|
3206
|
+
</tr>
|
|
3207
|
+
<tr>
|
|
3208
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-min-h-0" title="Click para copiar .hg-min-h-0">.hg-min-h-0</td>
|
|
3209
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-min-h-0" title="Click para copiar .md:hg-min-h-0">.md:hg-min-h-0</td>
|
|
3210
|
+
<td class="guide-layout-property">min-height: 0</td>
|
|
3211
|
+
<td class="guide-layout-property">Altura mínima del elemento</td>
|
|
3212
|
+
</tr>
|
|
3213
|
+
<tr>
|
|
3214
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-min-h-100-percent" title="Click para copiar .hg-min-h-100-percent">.hg-min-h-100-percent</td>
|
|
3215
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-min-h-100-percent" title="Click para copiar .md:hg-min-h-100-percent">.md:hg-min-h-100-percent</td>
|
|
3216
|
+
<td class="guide-layout-property">min-height: 100%</td>
|
|
3217
|
+
<td class="guide-layout-property">Altura mínima del elemento</td>
|
|
3218
|
+
</tr>
|
|
3219
|
+
<tr>
|
|
3220
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-min-h-100vh" title="Click para copiar .hg-min-h-100vh">.hg-min-h-100vh</td>
|
|
3221
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-min-h-100vh" title="Click para copiar .md:hg-min-h-100vh">.md:hg-min-h-100vh</td>
|
|
3222
|
+
<td class="guide-layout-property">min-height: 100vh</td>
|
|
3223
|
+
<td class="guide-layout-property">Altura mínima del elemento</td>
|
|
3224
|
+
</tr>
|
|
3225
|
+
<tr>
|
|
3226
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-min-h-100svh" title="Click para copiar .hg-min-h-100svh">.hg-min-h-100svh</td>
|
|
3227
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-min-h-100svh" title="Click para copiar .md:hg-min-h-100svh">.md:hg-min-h-100svh</td>
|
|
3228
|
+
<td class="guide-layout-property">min-height: 100svh</td>
|
|
3229
|
+
<td class="guide-layout-property">Altura mínima del elemento</td>
|
|
3230
|
+
</tr>
|
|
3231
|
+
<tr>
|
|
3232
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-min-h-100lvh" title="Click para copiar .hg-min-h-100lvh">.hg-min-h-100lvh</td>
|
|
3233
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-min-h-100lvh" title="Click para copiar .md:hg-min-h-100lvh">.md:hg-min-h-100lvh</td>
|
|
3234
|
+
<td class="guide-layout-property">min-height: 100lvh</td>
|
|
3235
|
+
<td class="guide-layout-property">Altura mínima del elemento</td>
|
|
3236
|
+
</tr>
|
|
3237
|
+
<tr>
|
|
3238
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-min-h-100dvh" title="Click para copiar .hg-min-h-100dvh">.hg-min-h-100dvh</td>
|
|
3239
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-min-h-100dvh" title="Click para copiar .md:hg-min-h-100dvh">.md:hg-min-h-100dvh</td>
|
|
3240
|
+
<td class="guide-layout-property">min-height: 100dvh</td>
|
|
3241
|
+
<td class="guide-layout-property">Altura mínima del elemento</td>
|
|
3242
|
+
</tr>
|
|
3243
|
+
<tr>
|
|
3244
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-min-h-fit-content" title="Click para copiar .hg-min-h-fit-content">.hg-min-h-fit-content</td>
|
|
3245
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-min-h-fit-content" title="Click para copiar .md:hg-min-h-fit-content">.md:hg-min-h-fit-content</td>
|
|
3246
|
+
<td class="guide-layout-property">min-height: fit-content</td>
|
|
3247
|
+
<td class="guide-layout-property">Altura mínima del elemento</td>
|
|
3248
|
+
</tr>
|
|
3249
|
+
<tr>
|
|
3250
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-mx-auto" title="Click para copiar .hg-mx-auto">.hg-mx-auto</td>
|
|
3251
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-mx-auto" title="Click para copiar .md:hg-mx-auto">.md:hg-mx-auto</td>
|
|
3252
|
+
<td class="guide-layout-property">margin: 0 auto</td>
|
|
3253
|
+
<td class="guide-layout-property">Margin horizontal automático (centrado)</td>
|
|
3254
|
+
</tr>
|
|
3255
|
+
<tr>
|
|
3256
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-ml-auto" title="Click para copiar .hg-ml-auto">.hg-ml-auto</td>
|
|
3257
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-ml-auto" title="Click para copiar .md:hg-ml-auto">.md:hg-ml-auto</td>
|
|
3258
|
+
<td class="guide-layout-property">margin-left: auto</td>
|
|
3259
|
+
<td class="guide-layout-property">Margin izquierdo automático (alinear derecha)</td>
|
|
3260
|
+
</tr>
|
|
3261
|
+
<tr>
|
|
3262
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-mr-auto" title="Click para copiar .hg-mr-auto">.hg-mr-auto</td>
|
|
3263
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-mr-auto" title="Click para copiar .md:hg-mr-auto">.md:hg-mr-auto</td>
|
|
3264
|
+
<td class="guide-layout-property">margin-right: auto</td>
|
|
3265
|
+
<td class="guide-layout-property">Margin derecho automático (alinear izquierda)</td>
|
|
3266
|
+
</tr>
|
|
3267
|
+
<tr>
|
|
3268
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-text-left" title="Click para copiar .hg-text-left">.hg-text-left</td>
|
|
3269
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-text-left" title="Click para copiar .md:hg-text-left">.md:hg-text-left</td>
|
|
3270
|
+
<td class="guide-layout-property">text-align: left</td>
|
|
3271
|
+
<td class="guide-layout-property">Alineación del texto</td>
|
|
3272
|
+
</tr>
|
|
3273
|
+
<tr>
|
|
3274
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-text-center" title="Click para copiar .hg-text-center">.hg-text-center</td>
|
|
3275
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-text-center" title="Click para copiar .md:hg-text-center">.md:hg-text-center</td>
|
|
3276
|
+
<td class="guide-layout-property">text-align: center</td>
|
|
3277
|
+
<td class="guide-layout-property">Alineación del texto</td>
|
|
3278
|
+
</tr>
|
|
3279
|
+
<tr>
|
|
3280
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-text-right" title="Click para copiar .hg-text-right">.hg-text-right</td>
|
|
3281
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-text-right" title="Click para copiar .md:hg-text-right">.md:hg-text-right</td>
|
|
3282
|
+
<td class="guide-layout-property">text-align: right</td>
|
|
3283
|
+
<td class="guide-layout-property">Alineación del texto</td>
|
|
3284
|
+
</tr>
|
|
3285
|
+
<tr>
|
|
3286
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-text-justify" title="Click para copiar .hg-text-justify">.hg-text-justify</td>
|
|
3287
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-text-justify" title="Click para copiar .md:hg-text-justify">.md:hg-text-justify</td>
|
|
3288
|
+
<td class="guide-layout-property">text-align: justify</td>
|
|
3289
|
+
<td class="guide-layout-property">Alineación del texto</td>
|
|
3290
|
+
</tr>
|
|
3291
|
+
<tr>
|
|
3292
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-position-static" title="Click para copiar .hg-position-static">.hg-position-static</td>
|
|
3293
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-position-static" title="Click para copiar .md:hg-position-static">.md:hg-position-static</td>
|
|
3294
|
+
<td class="guide-layout-property">position: static</td>
|
|
3295
|
+
<td class="guide-layout-property">Tipo de posicionamiento</td>
|
|
3296
|
+
</tr>
|
|
3297
|
+
<tr>
|
|
3298
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-position-relative" title="Click para copiar .hg-position-relative">.hg-position-relative</td>
|
|
3299
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-position-relative" title="Click para copiar .md:hg-position-relative">.md:hg-position-relative</td>
|
|
3300
|
+
<td class="guide-layout-property">position: relative</td>
|
|
3301
|
+
<td class="guide-layout-property">Tipo de posicionamiento</td>
|
|
3302
|
+
</tr>
|
|
3303
|
+
<tr>
|
|
3304
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-position-absolute" title="Click para copiar .hg-position-absolute">.hg-position-absolute</td>
|
|
3305
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-position-absolute" title="Click para copiar .md:hg-position-absolute">.md:hg-position-absolute</td>
|
|
3306
|
+
<td class="guide-layout-property">position: absolute</td>
|
|
3307
|
+
<td class="guide-layout-property">Tipo de posicionamiento</td>
|
|
3308
|
+
</tr>
|
|
3309
|
+
<tr>
|
|
3310
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-position-fixed" title="Click para copiar .hg-position-fixed">.hg-position-fixed</td>
|
|
3311
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-position-fixed" title="Click para copiar .md:hg-position-fixed">.md:hg-position-fixed</td>
|
|
3312
|
+
<td class="guide-layout-property">position: fixed</td>
|
|
3313
|
+
<td class="guide-layout-property">Tipo de posicionamiento</td>
|
|
3314
|
+
</tr>
|
|
3315
|
+
<tr>
|
|
3316
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-position-sticky" title="Click para copiar .hg-position-sticky">.hg-position-sticky</td>
|
|
3317
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-position-sticky" title="Click para copiar .md:hg-position-sticky">.md:hg-position-sticky</td>
|
|
3318
|
+
<td class="guide-layout-property">position: sticky</td>
|
|
3319
|
+
<td class="guide-layout-property">Tipo de posicionamiento</td>
|
|
3320
|
+
</tr>
|
|
3321
|
+
<tr>
|
|
3322
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-z-0" title="Click para copiar .hg-z-0">.hg-z-0</td>
|
|
3323
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-z-0" title="Click para copiar .md:hg-z-0">.md:hg-z-0</td>
|
|
3324
|
+
<td class="guide-layout-property">z-index: 0</td>
|
|
3325
|
+
<td class="guide-layout-property">Nivel de apilamiento</td>
|
|
3326
|
+
</tr>
|
|
3327
|
+
<tr>
|
|
3328
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-z-10" title="Click para copiar .hg-z-10">.hg-z-10</td>
|
|
3329
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-z-10" title="Click para copiar .md:hg-z-10">.md:hg-z-10</td>
|
|
3330
|
+
<td class="guide-layout-property">z-index: 10</td>
|
|
3331
|
+
<td class="guide-layout-property">Nivel de apilamiento</td>
|
|
3332
|
+
</tr>
|
|
3333
|
+
<tr>
|
|
3334
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-z-20" title="Click para copiar .hg-z-20">.hg-z-20</td>
|
|
3335
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-z-20" title="Click para copiar .md:hg-z-20">.md:hg-z-20</td>
|
|
3336
|
+
<td class="guide-layout-property">z-index: 20</td>
|
|
3337
|
+
<td class="guide-layout-property">Nivel de apilamiento</td>
|
|
3338
|
+
</tr>
|
|
3339
|
+
<tr>
|
|
3340
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-z-30" title="Click para copiar .hg-z-30">.hg-z-30</td>
|
|
3341
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-z-30" title="Click para copiar .md:hg-z-30">.md:hg-z-30</td>
|
|
3342
|
+
<td class="guide-layout-property">z-index: 30</td>
|
|
3343
|
+
<td class="guide-layout-property">Nivel de apilamiento</td>
|
|
3344
|
+
</tr>
|
|
3345
|
+
<tr>
|
|
3346
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-z-40" title="Click para copiar .hg-z-40">.hg-z-40</td>
|
|
3347
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-z-40" title="Click para copiar .md:hg-z-40">.md:hg-z-40</td>
|
|
3348
|
+
<td class="guide-layout-property">z-index: 40</td>
|
|
3349
|
+
<td class="guide-layout-property">Nivel de apilamiento</td>
|
|
3350
|
+
</tr>
|
|
3351
|
+
<tr>
|
|
3352
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-z-50" title="Click para copiar .hg-z-50">.hg-z-50</td>
|
|
3353
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-z-50" title="Click para copiar .md:hg-z-50">.md:hg-z-50</td>
|
|
3354
|
+
<td class="guide-layout-property">z-index: 50</td>
|
|
3355
|
+
<td class="guide-layout-property">Nivel de apilamiento</td>
|
|
3356
|
+
</tr>
|
|
3357
|
+
<tr>
|
|
3358
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-z-auto" title="Click para copiar .hg-z-auto">.hg-z-auto</td>
|
|
3359
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-z-auto" title="Click para copiar .md:hg-z-auto">.md:hg-z-auto</td>
|
|
3360
|
+
<td class="guide-layout-property">z-index: auto</td>
|
|
3361
|
+
<td class="guide-layout-property">Nivel de apilamiento</td>
|
|
3362
|
+
</tr>
|
|
3363
|
+
<tr>
|
|
3364
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-overflow-auto" title="Click para copiar .hg-overflow-auto">.hg-overflow-auto</td>
|
|
3365
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-overflow-auto" title="Click para copiar .md:hg-overflow-auto">.md:hg-overflow-auto</td>
|
|
3366
|
+
<td class="guide-layout-property">overflow: auto</td>
|
|
3367
|
+
<td class="guide-layout-property">Control de desbordamiento</td>
|
|
3368
|
+
</tr>
|
|
3369
|
+
<tr>
|
|
3370
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-overflow-hidden" title="Click para copiar .hg-overflow-hidden">.hg-overflow-hidden</td>
|
|
3371
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-overflow-hidden" title="Click para copiar .md:hg-overflow-hidden">.md:hg-overflow-hidden</td>
|
|
3372
|
+
<td class="guide-layout-property">overflow: hidden</td>
|
|
3373
|
+
<td class="guide-layout-property">Control de desbordamiento</td>
|
|
3374
|
+
</tr>
|
|
3375
|
+
<tr>
|
|
3376
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-overflow-visible" title="Click para copiar .hg-overflow-visible">.hg-overflow-visible</td>
|
|
3377
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-overflow-visible" title="Click para copiar .md:hg-overflow-visible">.md:hg-overflow-visible</td>
|
|
3378
|
+
<td class="guide-layout-property">overflow: visible</td>
|
|
3379
|
+
<td class="guide-layout-property">Control de desbordamiento</td>
|
|
3380
|
+
</tr>
|
|
3381
|
+
<tr>
|
|
3382
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-overflow-scroll" title="Click para copiar .hg-overflow-scroll">.hg-overflow-scroll</td>
|
|
3383
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-overflow-scroll" title="Click para copiar .md:hg-overflow-scroll">.md:hg-overflow-scroll</td>
|
|
3384
|
+
<td class="guide-layout-property">overflow: scroll</td>
|
|
3385
|
+
<td class="guide-layout-property">Control de desbordamiento</td>
|
|
3386
|
+
</tr>
|
|
3387
|
+
<tr>
|
|
3388
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-overflow-x-auto" title="Click para copiar .hg-overflow-x-auto">.hg-overflow-x-auto</td>
|
|
3389
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-overflow-x-auto" title="Click para copiar .md:hg-overflow-x-auto">.md:hg-overflow-x-auto</td>
|
|
3390
|
+
<td class="guide-layout-property">overflow-x: auto</td>
|
|
3391
|
+
<td class="guide-layout-property">Control de desbordamiento horizontal</td>
|
|
3392
|
+
</tr>
|
|
3393
|
+
<tr>
|
|
3394
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-overflow-x-hidden" title="Click para copiar .hg-overflow-x-hidden">.hg-overflow-x-hidden</td>
|
|
3395
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-overflow-x-hidden" title="Click para copiar .md:hg-overflow-x-hidden">.md:hg-overflow-x-hidden</td>
|
|
3396
|
+
<td class="guide-layout-property">overflow-x: hidden</td>
|
|
3397
|
+
<td class="guide-layout-property">Control de desbordamiento horizontal</td>
|
|
3398
|
+
</tr>
|
|
3399
|
+
<tr>
|
|
3400
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-overflow-x-visible" title="Click para copiar .hg-overflow-x-visible">.hg-overflow-x-visible</td>
|
|
3401
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-overflow-x-visible" title="Click para copiar .md:hg-overflow-x-visible">.md:hg-overflow-x-visible</td>
|
|
3402
|
+
<td class="guide-layout-property">overflow-x: visible</td>
|
|
3403
|
+
<td class="guide-layout-property">Control de desbordamiento horizontal</td>
|
|
3404
|
+
</tr>
|
|
3405
|
+
<tr>
|
|
3406
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-overflow-x-scroll" title="Click para copiar .hg-overflow-x-scroll">.hg-overflow-x-scroll</td>
|
|
3407
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-overflow-x-scroll" title="Click para copiar .md:hg-overflow-x-scroll">.md:hg-overflow-x-scroll</td>
|
|
3408
|
+
<td class="guide-layout-property">overflow-x: scroll</td>
|
|
3409
|
+
<td class="guide-layout-property">Control de desbordamiento horizontal</td>
|
|
3410
|
+
</tr>
|
|
3411
|
+
<tr>
|
|
3412
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-overflow-y-auto" title="Click para copiar .hg-overflow-y-auto">.hg-overflow-y-auto</td>
|
|
3413
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-overflow-y-auto" title="Click para copiar .md:hg-overflow-y-auto">.md:hg-overflow-y-auto</td>
|
|
3414
|
+
<td class="guide-layout-property">overflow-y: auto</td>
|
|
3415
|
+
<td class="guide-layout-property">Control de desbordamiento vertical</td>
|
|
3416
|
+
</tr>
|
|
3417
|
+
<tr>
|
|
3418
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-overflow-y-hidden" title="Click para copiar .hg-overflow-y-hidden">.hg-overflow-y-hidden</td>
|
|
3419
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-overflow-y-hidden" title="Click para copiar .md:hg-overflow-y-hidden">.md:hg-overflow-y-hidden</td>
|
|
3420
|
+
<td class="guide-layout-property">overflow-y: hidden</td>
|
|
3421
|
+
<td class="guide-layout-property">Control de desbordamiento vertical</td>
|
|
3422
|
+
</tr>
|
|
3423
|
+
<tr>
|
|
3424
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-overflow-y-visible" title="Click para copiar .hg-overflow-y-visible">.hg-overflow-y-visible</td>
|
|
3425
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-overflow-y-visible" title="Click para copiar .md:hg-overflow-y-visible">.md:hg-overflow-y-visible</td>
|
|
3426
|
+
<td class="guide-layout-property">overflow-y: visible</td>
|
|
3427
|
+
<td class="guide-layout-property">Control de desbordamiento vertical</td>
|
|
3428
|
+
</tr>
|
|
3429
|
+
<tr>
|
|
3430
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-overflow-y-scroll" title="Click para copiar .hg-overflow-y-scroll">.hg-overflow-y-scroll</td>
|
|
3431
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-overflow-y-scroll" title="Click para copiar .md:hg-overflow-y-scroll">.md:hg-overflow-y-scroll</td>
|
|
3432
|
+
<td class="guide-layout-property">overflow-y: scroll</td>
|
|
3433
|
+
<td class="guide-layout-property">Control de desbordamiento vertical</td>
|
|
3434
|
+
</tr>
|
|
3435
|
+
<tr>
|
|
3436
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-visibility-visible" title="Click para copiar .hg-visibility-visible">.hg-visibility-visible</td>
|
|
3437
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-visibility-visible" title="Click para copiar .md:hg-visibility-visible">.md:hg-visibility-visible</td>
|
|
3438
|
+
<td class="guide-layout-property">visibility: visible</td>
|
|
3439
|
+
<td class="guide-layout-property">Visibilidad del elemento</td>
|
|
3440
|
+
</tr>
|
|
3441
|
+
<tr>
|
|
3442
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-visibility-hidden" title="Click para copiar .hg-visibility-hidden">.hg-visibility-hidden</td>
|
|
3443
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-visibility-hidden" title="Click para copiar .md:hg-visibility-hidden">.md:hg-visibility-hidden</td>
|
|
3444
|
+
<td class="guide-layout-property">visibility: hidden</td>
|
|
3445
|
+
<td class="guide-layout-property">Visibilidad del elemento</td>
|
|
3446
|
+
</tr>
|
|
3447
|
+
<tr>
|
|
3448
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-visibility-collapse" title="Click para copiar .hg-visibility-collapse">.hg-visibility-collapse</td>
|
|
3449
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-visibility-collapse" title="Click para copiar .md:hg-visibility-collapse">.md:hg-visibility-collapse</td>
|
|
3450
|
+
<td class="guide-layout-property">visibility: collapse</td>
|
|
3451
|
+
<td class="guide-layout-property">Visibilidad del elemento</td>
|
|
3452
|
+
</tr>
|
|
3453
|
+
<tr>
|
|
3454
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-opacity-0" title="Click para copiar .hg-opacity-0">.hg-opacity-0</td>
|
|
3455
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-opacity-0" title="Click para copiar .md:hg-opacity-0">.md:hg-opacity-0</td>
|
|
3456
|
+
<td class="guide-layout-property">opacity: 0</td>
|
|
3457
|
+
<td class="guide-layout-property">Transparencia del elemento</td>
|
|
3458
|
+
</tr>
|
|
3459
|
+
<tr>
|
|
3460
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-opacity-25" title="Click para copiar .hg-opacity-25">.hg-opacity-25</td>
|
|
3461
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-opacity-25" title="Click para copiar .md:hg-opacity-25">.md:hg-opacity-25</td>
|
|
3462
|
+
<td class="guide-layout-property">opacity: 0.25</td>
|
|
3463
|
+
<td class="guide-layout-property">Transparencia del elemento</td>
|
|
3464
|
+
</tr>
|
|
3465
|
+
<tr>
|
|
3466
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-opacity-50" title="Click para copiar .hg-opacity-50">.hg-opacity-50</td>
|
|
3467
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-opacity-50" title="Click para copiar .md:hg-opacity-50">.md:hg-opacity-50</td>
|
|
3468
|
+
<td class="guide-layout-property">opacity: 0.5</td>
|
|
3469
|
+
<td class="guide-layout-property">Transparencia del elemento</td>
|
|
3470
|
+
</tr>
|
|
3471
|
+
<tr>
|
|
3472
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-opacity-70" title="Click para copiar .hg-opacity-70">.hg-opacity-70</td>
|
|
3473
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-opacity-70" title="Click para copiar .md:hg-opacity-70">.md:hg-opacity-70</td>
|
|
3474
|
+
<td class="guide-layout-property">opacity: 0.7</td>
|
|
3475
|
+
<td class="guide-layout-property">Transparencia del elemento</td>
|
|
3476
|
+
</tr>
|
|
3477
|
+
<tr>
|
|
3478
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-opacity-75" title="Click para copiar .hg-opacity-75">.hg-opacity-75</td>
|
|
3479
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-opacity-75" title="Click para copiar .md:hg-opacity-75">.md:hg-opacity-75</td>
|
|
3480
|
+
<td class="guide-layout-property">opacity: 0.75</td>
|
|
3481
|
+
<td class="guide-layout-property">Transparencia del elemento</td>
|
|
3482
|
+
</tr>
|
|
3483
|
+
<tr>
|
|
3484
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-opacity-100" title="Click para copiar .hg-opacity-100">.hg-opacity-100</td>
|
|
3485
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-opacity-100" title="Click para copiar .md:hg-opacity-100">.md:hg-opacity-100</td>
|
|
3486
|
+
<td class="guide-layout-property">opacity: 1</td>
|
|
3487
|
+
<td class="guide-layout-property">Transparencia del elemento</td>
|
|
3488
|
+
</tr>
|
|
3489
|
+
<tr>
|
|
3490
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-cursor-auto" title="Click para copiar .hg-cursor-auto">.hg-cursor-auto</td>
|
|
3491
|
+
<td class="guide-layout-class-name " >-</td>
|
|
3492
|
+
<td class="guide-layout-property">cursor: auto</td>
|
|
3493
|
+
<td class="guide-layout-property">Tipo de cursor</td>
|
|
3494
|
+
</tr>
|
|
3495
|
+
<tr>
|
|
3496
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-cursor-default" title="Click para copiar .hg-cursor-default">.hg-cursor-default</td>
|
|
3497
|
+
<td class="guide-layout-class-name " >-</td>
|
|
3498
|
+
<td class="guide-layout-property">cursor: default</td>
|
|
3499
|
+
<td class="guide-layout-property">Tipo de cursor</td>
|
|
3500
|
+
</tr>
|
|
3501
|
+
<tr>
|
|
3502
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-cursor-pointer" title="Click para copiar .hg-cursor-pointer">.hg-cursor-pointer</td>
|
|
3503
|
+
<td class="guide-layout-class-name " >-</td>
|
|
3504
|
+
<td class="guide-layout-property">cursor: pointer</td>
|
|
3505
|
+
<td class="guide-layout-property">Tipo de cursor</td>
|
|
3506
|
+
</tr>
|
|
3507
|
+
<tr>
|
|
3508
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-cursor-not-allowed" title="Click para copiar .hg-cursor-not-allowed">.hg-cursor-not-allowed</td>
|
|
3509
|
+
<td class="guide-layout-class-name " >-</td>
|
|
3510
|
+
<td class="guide-layout-property">cursor: not-allowed</td>
|
|
3511
|
+
<td class="guide-layout-property">Tipo de cursor</td>
|
|
3512
|
+
</tr>
|
|
3513
|
+
<tr>
|
|
3514
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-cursor-wait" title="Click para copiar .hg-cursor-wait">.hg-cursor-wait</td>
|
|
3515
|
+
<td class="guide-layout-class-name " >-</td>
|
|
3516
|
+
<td class="guide-layout-property">cursor: wait</td>
|
|
3517
|
+
<td class="guide-layout-property">Tipo de cursor</td>
|
|
3518
|
+
</tr>
|
|
3519
|
+
<tr>
|
|
3520
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-cursor-text" title="Click para copiar .hg-cursor-text">.hg-cursor-text</td>
|
|
3521
|
+
<td class="guide-layout-class-name " >-</td>
|
|
3522
|
+
<td class="guide-layout-property">cursor: text</td>
|
|
3523
|
+
<td class="guide-layout-property">Tipo de cursor</td>
|
|
3524
|
+
</tr>
|
|
3525
|
+
<tr>
|
|
3526
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-cursor-move" title="Click para copiar .hg-cursor-move">.hg-cursor-move</td>
|
|
3527
|
+
<td class="guide-layout-class-name " >-</td>
|
|
3528
|
+
<td class="guide-layout-property">cursor: move</td>
|
|
3529
|
+
<td class="guide-layout-property">Tipo de cursor</td>
|
|
3530
|
+
</tr>
|
|
3531
|
+
<tr>
|
|
3532
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-cursor-grab" title="Click para copiar .hg-cursor-grab">.hg-cursor-grab</td>
|
|
3533
|
+
<td class="guide-layout-class-name " >-</td>
|
|
3534
|
+
<td class="guide-layout-property">cursor: grab</td>
|
|
3535
|
+
<td class="guide-layout-property">Tipo de cursor</td>
|
|
3536
|
+
</tr>
|
|
3537
|
+
<tr>
|
|
3538
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-cursor-grabbing" title="Click para copiar .hg-cursor-grabbing">.hg-cursor-grabbing</td>
|
|
3539
|
+
<td class="guide-layout-class-name " >-</td>
|
|
3540
|
+
<td class="guide-layout-property">cursor: grabbing</td>
|
|
3541
|
+
<td class="guide-layout-property">Tipo de cursor</td>
|
|
3542
|
+
</tr>
|
|
3543
|
+
<tr>
|
|
3544
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-pointer-events-none" title="Click para copiar .hg-pointer-events-none">.hg-pointer-events-none</td>
|
|
3545
|
+
<td class="guide-layout-class-name " >-</td>
|
|
3546
|
+
<td class="guide-layout-property">pointer-events: none</td>
|
|
3547
|
+
<td class="guide-layout-property">Control de eventos del puntero</td>
|
|
3548
|
+
</tr>
|
|
3549
|
+
<tr>
|
|
3550
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-pointer-events-auto" title="Click para copiar .hg-pointer-events-auto">.hg-pointer-events-auto</td>
|
|
3551
|
+
<td class="guide-layout-class-name " >-</td>
|
|
3552
|
+
<td class="guide-layout-property">pointer-events: auto</td>
|
|
3553
|
+
<td class="guide-layout-property">Control de eventos del puntero</td>
|
|
3554
|
+
</tr>
|
|
3555
|
+
<tr>
|
|
3556
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-pointer-events-all" title="Click para copiar .hg-pointer-events-all">.hg-pointer-events-all</td>
|
|
3557
|
+
<td class="guide-layout-class-name " >-</td>
|
|
3558
|
+
<td class="guide-layout-property">pointer-events: all</td>
|
|
3559
|
+
<td class="guide-layout-property">Control de eventos del puntero</td>
|
|
3560
|
+
</tr>
|
|
3561
|
+
<tr>
|
|
3562
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-object-contain" title="Click para copiar .hg-object-contain">.hg-object-contain</td>
|
|
3563
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-object-contain" title="Click para copiar .md:hg-object-contain">.md:hg-object-contain</td>
|
|
3564
|
+
<td class="guide-layout-property">object-fit: contain</td>
|
|
3565
|
+
<td class="guide-layout-property">Ajuste de objeto (imágenes)</td>
|
|
3566
|
+
</tr>
|
|
3567
|
+
<tr>
|
|
3568
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-object-cover" title="Click para copiar .hg-object-cover">.hg-object-cover</td>
|
|
3569
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-object-cover" title="Click para copiar .md:hg-object-cover">.md:hg-object-cover</td>
|
|
3570
|
+
<td class="guide-layout-property">object-fit: cover</td>
|
|
3571
|
+
<td class="guide-layout-property">Ajuste de objeto (imágenes)</td>
|
|
3572
|
+
</tr>
|
|
3573
|
+
<tr>
|
|
3574
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-object-fill" title="Click para copiar .hg-object-fill">.hg-object-fill</td>
|
|
3575
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-object-fill" title="Click para copiar .md:hg-object-fill">.md:hg-object-fill</td>
|
|
3576
|
+
<td class="guide-layout-property">object-fit: fill</td>
|
|
3577
|
+
<td class="guide-layout-property">Ajuste de objeto (imágenes)</td>
|
|
3578
|
+
</tr>
|
|
3579
|
+
<tr>
|
|
3580
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-object-none" title="Click para copiar .hg-object-none">.hg-object-none</td>
|
|
3581
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-object-none" title="Click para copiar .md:hg-object-none">.md:hg-object-none</td>
|
|
3582
|
+
<td class="guide-layout-property">object-fit: none</td>
|
|
3583
|
+
<td class="guide-layout-property">Ajuste de objeto (imágenes)</td>
|
|
3584
|
+
</tr>
|
|
3585
|
+
<tr>
|
|
3586
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".hg-object-scale-down" title="Click para copiar .hg-object-scale-down">.hg-object-scale-down</td>
|
|
3587
|
+
<td class="guide-layout-class-name guide-copyable" data-copy-value=".md:hg-object-scale-down" title="Click para copiar .md:hg-object-scale-down">.md:hg-object-scale-down</td>
|
|
3588
|
+
<td class="guide-layout-property">object-fit: scale-down</td>
|
|
3589
|
+
<td class="guide-layout-property">Ajuste de objeto (imágenes)</td>
|
|
3590
|
+
</tr>
|
|
3591
|
+
</tbody>
|
|
3592
|
+
</table>
|
|
3593
|
+
</div>
|
|
3594
|
+
<p class="text-m guide-section-description">
|
|
3595
|
+
Clases helper para display, flexbox, alignment y gap.
|
|
3596
|
+
Todos los helpers marcados como responsive tienen variantes con prefijo .md: para desktop (≥992px).
|
|
3597
|
+
</p>
|
|
3598
|
+
|
|
3599
|
+
<div class="guide-info-box guide-info-box-info guide-info-box-margin-top">
|
|
3600
|
+
<h3 class="guide-info-box-title guide-info-box-title-info">Ejemplos de uso</h3>
|
|
3601
|
+
<ul class="guide-info-box-list">
|
|
3602
|
+
<li class="text-m guide-info-box-list-item">
|
|
3603
|
+
<code class="guide-info-box-code-info">.d-flex</code> - Display flex
|
|
3604
|
+
</li>
|
|
3605
|
+
<li class="text-m guide-info-box-list-item">
|
|
3606
|
+
<code class="guide-info-box-code-info">.flex-column</code> - Flex direction column
|
|
3607
|
+
</li>
|
|
3608
|
+
<li class="text-m guide-info-box-list-item">
|
|
3609
|
+
<code class="guide-info-box-code-info">.justify-center</code> - Justify content center
|
|
3610
|
+
</li>
|
|
3611
|
+
<li class="text-m guide-info-box-list-item">
|
|
3612
|
+
<code class="guide-info-box-code-info">.items-center</code> - Align items center
|
|
3613
|
+
</li>
|
|
3614
|
+
<li class="text-m guide-info-box-list-item">
|
|
3615
|
+
<code class="guide-info-box-code-info">.gap-16</code> - Gap de 16px (1rem)
|
|
3616
|
+
</li>
|
|
3617
|
+
<li class="text-m guide-info-box-list-item">
|
|
3618
|
+
<code class="guide-info-box-code-info">.md:flex-row</code> - Flex direction row solo en desktop
|
|
3619
|
+
</li>
|
|
3620
|
+
</ul>
|
|
3621
|
+
</div>
|
|
3622
|
+
</div>
|
|
3623
|
+
</div>
|
|
3624
|
+
|
|
3625
|
+
|
|
3626
|
+
|
|
3627
|
+
<div class="guide-section" id="grid">
|
|
3628
|
+
<div class="guide-section-title">
|
|
3629
|
+
<h2>Grid System</h2>
|
|
3630
|
+
<p class="text-m guide-section-description">
|
|
3631
|
+
Sistema de grid responsive estilo Bootstrap con 12 columnas (xs, sm, md, lg) y 24 columnas (xl).
|
|
3632
|
+
</p>
|
|
3633
|
+
</div>
|
|
3634
|
+
<div class="guide-section-content">
|
|
3635
|
+
<div class="guide-info-box guide-info-box-warning">
|
|
3636
|
+
<h3 class="guide-info-box-title guide-info-box-title-warning">¿Cómo funciona el Grid?</h3>
|
|
3637
|
+
<p class="text-m guide-info-box-text">
|
|
3638
|
+
El grid system utiliza flexbox y un sistema de 12 columnas para breakpoints xs, sm, md, lg, y 24 columnas para xl.
|
|
3639
|
+
</p>
|
|
3640
|
+
<ul class="guide-info-box-list">
|
|
3641
|
+
<li class="text-m guide-info-box-list-item">
|
|
3642
|
+
<strong>.row</strong> - Contenedor flex con márgenes negativos para compensar el gutter
|
|
3643
|
+
</li>
|
|
3644
|
+
<li class="text-m guide-info-box-list-item">
|
|
3645
|
+
<strong>.col-xs-*</strong> - Columnas para pantallas desde [object Object] (12 columnas)
|
|
3646
|
+
</li>
|
|
3647
|
+
<li class="text-m guide-info-box-list-item">
|
|
3648
|
+
<strong>.col-sm-*</strong> - Columnas para pantallas desde [object Object] (12 columnas)
|
|
3649
|
+
</li>
|
|
3650
|
+
<li class="text-m guide-info-box-list-item">
|
|
3651
|
+
<strong>.col-md-*</strong> - Columnas para pantallas desde [object Object] (12 columnas)
|
|
3652
|
+
</li>
|
|
3653
|
+
<li class="text-m guide-info-box-list-item">
|
|
3654
|
+
<strong>.col-lg-*</strong> - Columnas para pantallas desde [object Object] (12 columnas)
|
|
3655
|
+
</li>
|
|
3656
|
+
<li class="text-m guide-info-box-list-item">
|
|
3657
|
+
<strong>.col-xl-*</strong> - Columnas para pantallas desde [object Object] (24 columnas)
|
|
3658
|
+
</li>
|
|
3659
|
+
<li class="text-m guide-info-box-list-item">
|
|
3660
|
+
<strong>.bleed</strong> - Permite que las columnas vayan a sangre (full bleed), eliminando los márgenes laterales del gutter
|
|
3661
|
+
</li>
|
|
3662
|
+
<li class="text-m guide-info-box-list-item">
|
|
3663
|
+
<strong>.bleed-0</strong> - Elimina completamente el padding y márgenes, útil para contenido que debe ocupar todo el ancho sin espacios
|
|
3664
|
+
</li>
|
|
3665
|
+
</ul>
|
|
3666
|
+
<p class="text-m guide-info-box-text">
|
|
3667
|
+
<strong>Gutter:</strong> 8px (padding horizontal en cada columna)
|
|
3668
|
+
</p>
|
|
3669
|
+
</div>
|
|
3670
|
+
|
|
3671
|
+
<div class="guide-table-wrapper">
|
|
3672
|
+
<table class="guide-table">
|
|
3673
|
+
<thead>
|
|
3674
|
+
<tr>
|
|
3675
|
+
<th>Breakpoint</th>
|
|
3676
|
+
<th>Min-width</th>
|
|
3677
|
+
<th>Min-width (rem)</th>
|
|
3678
|
+
<th>Columnas</th>
|
|
3679
|
+
<th>Clases</th>
|
|
3680
|
+
</tr>
|
|
3681
|
+
</thead>
|
|
3682
|
+
<tbody>
|
|
3683
|
+
<tr>
|
|
3684
|
+
<td class="guide-table-name">xs</td>
|
|
3685
|
+
<td class="guide-table-value">1px</td>
|
|
3686
|
+
<td class="guide-table-value">0.0625rem</td>
|
|
3687
|
+
<td class="guide-table-value">12</td>
|
|
3688
|
+
<td class="guide-table-value">.col-xs-1 a .col-xs-12</td>
|
|
3689
|
+
</tr>
|
|
3690
|
+
<tr>
|
|
3691
|
+
<td class="guide-table-name">sm</td>
|
|
3692
|
+
<td class="guide-table-value">768px</td>
|
|
3693
|
+
<td class="guide-table-value">48rem</td>
|
|
3694
|
+
<td class="guide-table-value">12</td>
|
|
3695
|
+
<td class="guide-table-value">.col-sm-1 a .col-sm-12</td>
|
|
3696
|
+
</tr>
|
|
3697
|
+
<tr>
|
|
3698
|
+
<td class="guide-table-name">md</td>
|
|
3699
|
+
<td class="guide-table-value">992px</td>
|
|
3700
|
+
<td class="guide-table-value">62rem</td>
|
|
3701
|
+
<td class="guide-table-value">12</td>
|
|
3702
|
+
<td class="guide-table-value">.col-md-1 a .col-md-12</td>
|
|
3703
|
+
</tr>
|
|
3704
|
+
<tr>
|
|
3705
|
+
<td class="guide-table-name">lg</td>
|
|
3706
|
+
<td class="guide-table-value">1280px</td>
|
|
3707
|
+
<td class="guide-table-value">80rem</td>
|
|
3708
|
+
<td class="guide-table-value">12</td>
|
|
3709
|
+
<td class="guide-table-value">.col-lg-1 a .col-lg-12</td>
|
|
3710
|
+
</tr>
|
|
3711
|
+
<tr>
|
|
3712
|
+
<td class="guide-table-name">xl</td>
|
|
3713
|
+
<td class="guide-table-value">1442px</td>
|
|
3714
|
+
<td class="guide-table-value">90.125rem</td>
|
|
3715
|
+
<td class="guide-table-value">24</td>
|
|
3716
|
+
<td class="guide-table-value">.col-xl-1 a .col-xl-24</td>
|
|
3717
|
+
</tr>
|
|
3718
|
+
</tbody>
|
|
3719
|
+
</table>
|
|
3720
|
+
</div>
|
|
3721
|
+
|
|
3722
|
+
<div class="guide-info-box guide-info-box-info guide-info-box-margin-top">
|
|
3723
|
+
<h3 class="guide-info-box-title guide-info-box-title-info">Ejemplo de uso básico</h3>
|
|
3724
|
+
<p class="text-m guide-info-box-text">
|
|
3725
|
+
<strong>HTML:</strong>
|
|
3726
|
+
</p>
|
|
3727
|
+
<pre class="guide-code-example"><code><div class="row">
|
|
3728
|
+
<div class="col-xs-12 col-md-6 col-lg-4">
|
|
3729
|
+
Columna 1
|
|
3730
|
+
</div>
|
|
3731
|
+
<div class="col-xs-12 col-md-6 col-lg-4">
|
|
3732
|
+
Columna 2
|
|
3733
|
+
</div>
|
|
3734
|
+
<div class="col-xs-12 col-md-12 col-lg-4">
|
|
3735
|
+
Columna 3
|
|
3736
|
+
</div>
|
|
3737
|
+
</div></code></pre>
|
|
3738
|
+
<p class="text-m guide-info-box-text">
|
|
3739
|
+
Este ejemplo muestra 3 columnas que:
|
|
3740
|
+
</p>
|
|
3741
|
+
<ul class="guide-info-box-list">
|
|
3742
|
+
<li class="text-m guide-info-box-list-item">
|
|
3743
|
+
En <strong>xs</strong>: Ocupan 12 columnas cada una (100% de ancho, apiladas)
|
|
3744
|
+
</li>
|
|
3745
|
+
<li class="text-m guide-info-box-list-item">
|
|
3746
|
+
En <strong>md</strong> (≥[object Object]): Las dos primeras ocupan 6 columnas (50% cada una), la tercera 12 (100%)
|
|
3747
|
+
</li>
|
|
3748
|
+
<li class="text-m guide-info-box-list-item">
|
|
3749
|
+
En <strong>lg</strong> (≥[object Object]): Cada una ocupa 4 columnas (33.33% cada una, 3 columnas por fila)
|
|
3750
|
+
</li>
|
|
3751
|
+
</ul>
|
|
3752
|
+
</div>
|
|
3753
|
+
|
|
3754
|
+
|
|
3755
|
+
|
|
3756
|
+
<div class="guide-info-box guide-info-box-info guide-info-box-margin-top">
|
|
3757
|
+
<h3 class="guide-info-box-title guide-info-box-title-info">Columnas a sangre (Bleed)</h3>
|
|
3758
|
+
<p class="text-m guide-info-box-text">
|
|
3759
|
+
Cuando necesitas que las columnas vayan a sangre (full bleed), eliminando los márgenes laterales del gutter, usa la clase <code class="guide-info-box-code-info">.bleed</code>:
|
|
3760
|
+
</p>
|
|
3761
|
+
<pre class="guide-code-example"><code><div class="row">
|
|
3762
|
+
<div class="col-xs-12 bleed">
|
|
3763
|
+
Contenido que va a sangre (sin márgenes laterales)
|
|
3764
|
+
</div>
|
|
3765
|
+
</div></code></pre>
|
|
3766
|
+
<p class="text-m guide-info-box-text">
|
|
3767
|
+
Para eliminar completamente el padding y márgenes, usa <code class="guide-info-box-code-info">.bleed-0</code>:
|
|
3768
|
+
</p>
|
|
3769
|
+
<pre class="guide-code-example"><code><div class="bleed-0">
|
|
3770
|
+
<div class="row">
|
|
3771
|
+
<div class="col-xs-12">
|
|
3772
|
+
Contenido sin padding ni márgenes
|
|
3773
|
+
</div>
|
|
3774
|
+
</div>
|
|
3775
|
+
</div></code></pre>
|
|
3776
|
+
<p class="text-m guide-info-box-text-small">
|
|
3777
|
+
<strong>Nota:</strong> <code class="guide-info-box-code-info">.bleed</code> aplica márgenes negativos iguales al gutter (8px) para que el contenido llegue hasta los bordes. <code class="guide-info-box-code-info">.bleed-0</code> elimina todo el padding y márgenes, útil para imágenes o contenido que debe ocupar todo el ancho disponible.
|
|
3778
|
+
</p>
|
|
3779
|
+
</div>
|
|
3780
|
+
</div>
|
|
3781
|
+
</div>
|
|
3782
|
+
|
|
3783
|
+
|
|
3784
|
+
|
|
3785
|
+
<div class="guide-section" id="breakpoints">
|
|
3786
|
+
<div class="guide-section-title">
|
|
3787
|
+
<h2 >Breakpoints</h2>
|
|
3788
|
+
<p class="text-m guide-section-description">
|
|
3789
|
+
Breakpoints disponibles.
|
|
3790
|
+
</p>
|
|
3791
|
+
</div>
|
|
3792
|
+
<div class="guide-section-content">
|
|
3793
|
+
<div class="guide-table-wrapper">
|
|
3794
|
+
<table class="guide-table">
|
|
3795
|
+
<thead>
|
|
3796
|
+
<tr>
|
|
3797
|
+
<th>Breakpoint</th>
|
|
3798
|
+
<th>Min-width</th>
|
|
3799
|
+
</tr>
|
|
3800
|
+
</thead>
|
|
3801
|
+
<tbody>
|
|
3802
|
+
<tr>
|
|
3803
|
+
<td class="guide-table-name">Mobile</td>
|
|
3804
|
+
<td class="guide-table-value ">
|
|
3805
|
+
1px
|
|
3806
|
+
(0.0625rem)
|
|
3807
|
+
</td>
|
|
3808
|
+
</tr>
|
|
3809
|
+
<tr>
|
|
3810
|
+
<td class="guide-table-name">Desktop</td>
|
|
3811
|
+
<td class="guide-table-value ">
|
|
3812
|
+
992px
|
|
3813
|
+
(62rem)
|
|
3814
|
+
</td>
|
|
3815
|
+
</tr>
|
|
3816
|
+
</tbody>
|
|
3817
|
+
</table>
|
|
3818
|
+
</div>
|
|
3819
|
+
<p class="text-m guide-section-description">
|
|
3820
|
+
Las clases de tipografía se adaptan automáticamente a cada breakpoint.
|
|
3821
|
+
Resize la ventana del navegador para ver los cambios.
|
|
3822
|
+
</p>
|
|
3823
|
+
</div>
|
|
3824
|
+
</div>
|
|
3825
|
+
</div>
|
|
3826
|
+
</main>
|
|
3827
|
+
|
|
3828
|
+
<script>
|
|
3829
|
+
// Scroll suave y resaltado de sección activa
|
|
3830
|
+
const menuItems = document.querySelectorAll('.guide-menu-item');
|
|
3831
|
+
const sections = document.querySelectorAll('.guide-section');
|
|
3832
|
+
|
|
3833
|
+
// Manejar clic en menú
|
|
3834
|
+
menuItems.forEach(item => {
|
|
3835
|
+
item.addEventListener('click', (e) => {
|
|
3836
|
+
const targetId = item.getAttribute('data-section');
|
|
3837
|
+
|
|
3838
|
+
// Si no tiene data-section, es un enlace externo, permitir navegación normal
|
|
3839
|
+
if (!targetId) {
|
|
3840
|
+
return;
|
|
3841
|
+
}
|
|
3842
|
+
|
|
3843
|
+
e.preventDefault();
|
|
3844
|
+
const targetSection = document.getElementById(targetId);
|
|
3845
|
+
|
|
3846
|
+
if (targetSection) {
|
|
3847
|
+
const offset = 80; // Offset para compensar header
|
|
3848
|
+
const targetPosition = targetSection.offsetTop - offset;
|
|
3849
|
+
|
|
3850
|
+
window.scrollTo({
|
|
3851
|
+
top: targetPosition,
|
|
3852
|
+
behavior: 'smooth'
|
|
3853
|
+
});
|
|
3854
|
+
|
|
3855
|
+
// Cerrar menú en mobile
|
|
3856
|
+
if (window.innerWidth <= 768) {
|
|
3857
|
+
document.querySelector('.guide-sidebar').classList.remove('open');
|
|
3858
|
+
}
|
|
3859
|
+
}
|
|
3860
|
+
});
|
|
3861
|
+
});
|
|
3862
|
+
|
|
3863
|
+
// Funcionalidad de búsqueda
|
|
3864
|
+
const searchInput = document.getElementById('search-input');
|
|
3865
|
+
const clearSearchBtn = document.getElementById('clear-search');
|
|
3866
|
+
const searchResults = document.getElementById('search-results');
|
|
3867
|
+
let searchTimeout;
|
|
3868
|
+
|
|
3869
|
+
// Función para resaltar texto
|
|
3870
|
+
function highlightText(text, searchTerm) {
|
|
3871
|
+
if (!searchTerm) return text;
|
|
3872
|
+
const escapedTerm = searchTerm.replace(/[.*+?^$()|[]\]/g, '\\$&');
|
|
3873
|
+
const escapedTerm2 = escapedTerm.replace(/{/g, '\\{').replace(/}/g, '\\}');
|
|
3874
|
+
const regex = new RegExp('(' + escapedTerm2 + ')', 'gi');
|
|
3875
|
+
return text.replace(regex, '<mark class="guide-search-highlight">$1</mark>');
|
|
3876
|
+
}
|
|
3877
|
+
|
|
3878
|
+
// Función para buscar en tablas y grids
|
|
3879
|
+
function searchInTables(searchTerm) {
|
|
3880
|
+
if (!searchTerm || searchTerm.trim() === '') {
|
|
3881
|
+
// Mostrar todo
|
|
3882
|
+
document.querySelectorAll('.guide-section, .guide-table tbody tr, .spacing-helpers-table tbody tr, [style*="grid-template-columns"] > div').forEach(el => {
|
|
3883
|
+
el.style.display = '';
|
|
3884
|
+
});
|
|
3885
|
+
document.querySelectorAll('mark').forEach(mark => {
|
|
3886
|
+
const parent = mark.parentNode;
|
|
3887
|
+
parent.replaceChild(document.createTextNode(mark.textContent), mark);
|
|
3888
|
+
parent.normalize();
|
|
3889
|
+
});
|
|
3890
|
+
searchResults.style.display = 'none';
|
|
3891
|
+
clearSearchBtn.style.display = 'none';
|
|
3892
|
+
return;
|
|
3893
|
+
}
|
|
3894
|
+
|
|
3895
|
+
const term = searchTerm.toLowerCase().trim();
|
|
3896
|
+
let matchCount = 0;
|
|
3897
|
+
const matchedSections = new Set();
|
|
3898
|
+
|
|
3899
|
+
// Buscar en todas las tablas
|
|
3900
|
+
document.querySelectorAll('.guide-table tbody tr, .spacing-helpers-table tbody tr').forEach(row => {
|
|
3901
|
+
const text = row.textContent.toLowerCase();
|
|
3902
|
+
const cells = row.querySelectorAll('td');
|
|
3903
|
+
|
|
3904
|
+
if (text.includes(term)) {
|
|
3905
|
+
row.style.display = '';
|
|
3906
|
+
matchCount++;
|
|
3907
|
+
|
|
3908
|
+
// Resaltar texto en las celdas
|
|
3909
|
+
cells.forEach(cell => {
|
|
3910
|
+
const originalText = cell.textContent;
|
|
3911
|
+
cell.innerHTML = highlightText(originalText, term);
|
|
3912
|
+
});
|
|
3913
|
+
|
|
3914
|
+
// Encontrar la sección padre
|
|
3915
|
+
let section = row.closest('.guide-section');
|
|
3916
|
+
if (section) {
|
|
3917
|
+
matchedSections.add(section.id);
|
|
3918
|
+
}
|
|
3919
|
+
} else {
|
|
3920
|
+
row.style.display = 'none';
|
|
3921
|
+
}
|
|
3922
|
+
});
|
|
3923
|
+
|
|
3924
|
+
// Buscar en grid de colores
|
|
3925
|
+
document.querySelectorAll('[style*="grid-template-columns"] > div').forEach(card => {
|
|
3926
|
+
const text = card.textContent.toLowerCase();
|
|
3927
|
+
|
|
3928
|
+
if (text.includes(term)) {
|
|
3929
|
+
card.style.display = '';
|
|
3930
|
+
matchCount++;
|
|
3931
|
+
|
|
3932
|
+
// Resaltar texto en la tarjeta
|
|
3933
|
+
const textElements = card.querySelectorAll('div');
|
|
3934
|
+
textElements.forEach(el => {
|
|
3935
|
+
if (el.textContent && !el.style.background) {
|
|
3936
|
+
const originalText = el.textContent;
|
|
3937
|
+
el.innerHTML = highlightText(originalText, term);
|
|
3938
|
+
}
|
|
3939
|
+
});
|
|
3940
|
+
|
|
3941
|
+
// Encontrar la sección padre
|
|
3942
|
+
let section = card.closest('.guide-section');
|
|
3943
|
+
if (section) {
|
|
3944
|
+
matchedSections.add(section.id);
|
|
3945
|
+
}
|
|
3946
|
+
} else {
|
|
3947
|
+
card.style.display = 'none';
|
|
3948
|
+
}
|
|
3949
|
+
});
|
|
3950
|
+
|
|
3951
|
+
// Mostrar/ocultar secciones según si tienen resultados
|
|
3952
|
+
document.querySelectorAll('.guide-section').forEach(section => {
|
|
3953
|
+
const hasVisibleRows = section.querySelector('tbody tr[style=""]') ||
|
|
3954
|
+
section.querySelector('tbody tr:not([style*="display: none"])') ||
|
|
3955
|
+
section.querySelector('[style*="grid-template-columns"] > div[style=""]') ||
|
|
3956
|
+
section.querySelector('[style*="grid-template-columns"] > div:not([style*="display: none"])');
|
|
3957
|
+
if (matchedSections.has(section.id) || hasVisibleRows) {
|
|
3958
|
+
section.style.display = '';
|
|
3959
|
+
} else {
|
|
3960
|
+
section.style.display = 'none';
|
|
3961
|
+
}
|
|
3962
|
+
});
|
|
3963
|
+
|
|
3964
|
+
// Mostrar contador de resultados
|
|
3965
|
+
if (matchCount > 0) {
|
|
3966
|
+
searchResults.textContent = 'Se encontraron ' + matchCount + ' resultado' + (matchCount !== 1 ? 's' : '');
|
|
3967
|
+
searchResults.style.display = 'block';
|
|
3968
|
+
} else {
|
|
3969
|
+
searchResults.textContent = 'No se encontraron resultados';
|
|
3970
|
+
searchResults.style.display = 'block';
|
|
3971
|
+
}
|
|
3972
|
+
|
|
3973
|
+
clearSearchBtn.style.display = 'block';
|
|
3974
|
+
}
|
|
3975
|
+
|
|
3976
|
+
// Event listeners para búsqueda
|
|
3977
|
+
searchInput.addEventListener('input', (e) => {
|
|
3978
|
+
clearTimeout(searchTimeout);
|
|
3979
|
+
searchTimeout = setTimeout(() => {
|
|
3980
|
+
searchInTables(e.target.value);
|
|
3981
|
+
}, 200);
|
|
3982
|
+
});
|
|
3983
|
+
|
|
3984
|
+
searchInput.addEventListener('keydown', (e) => {
|
|
3985
|
+
if (e.key === 'Escape') {
|
|
3986
|
+
searchInput.value = '';
|
|
3987
|
+
searchInTables('');
|
|
3988
|
+
}
|
|
3989
|
+
});
|
|
3990
|
+
|
|
3991
|
+
clearSearchBtn.addEventListener('click', () => {
|
|
3992
|
+
searchInput.value = '';
|
|
3993
|
+
searchInTables('');
|
|
3994
|
+
searchInput.focus();
|
|
3995
|
+
});
|
|
3996
|
+
|
|
3997
|
+
// El estilo de focus ya está en CSS (.search-input:focus)
|
|
3998
|
+
|
|
3999
|
+
// Resaltar sección activa al hacer scroll
|
|
4000
|
+
function updateActiveSection() {
|
|
4001
|
+
const scrollPosition = window.scrollY + 200;
|
|
4002
|
+
|
|
4003
|
+
sections.forEach(section => {
|
|
4004
|
+
const sectionTop = section.offsetTop;
|
|
4005
|
+
const sectionHeight = section.offsetHeight;
|
|
4006
|
+
const sectionId = section.getAttribute('id');
|
|
4007
|
+
|
|
4008
|
+
if (scrollPosition >= sectionTop && scrollPosition < sectionTop + sectionHeight) {
|
|
4009
|
+
menuItems.forEach(item => {
|
|
4010
|
+
item.classList.remove('active');
|
|
4011
|
+
if (item.getAttribute('data-section') === sectionId) {
|
|
4012
|
+
item.classList.add('active');
|
|
4013
|
+
}
|
|
4014
|
+
});
|
|
4015
|
+
}
|
|
4016
|
+
});
|
|
4017
|
+
}
|
|
4018
|
+
|
|
4019
|
+
window.addEventListener('scroll', updateActiveSection);
|
|
4020
|
+
window.addEventListener('load', updateActiveSection);
|
|
4021
|
+
|
|
4022
|
+
// Cerrar menú al hacer clic fuera en mobile
|
|
4023
|
+
document.addEventListener('click', (e) => {
|
|
4024
|
+
const sidebar = document.querySelector('.guide-sidebar');
|
|
4025
|
+
const menuToggle = document.querySelector('.guide-menu-toggle');
|
|
4026
|
+
|
|
4027
|
+
if (window.innerWidth <= 768 &&
|
|
4028
|
+
sidebar.classList.contains('open') &&
|
|
4029
|
+
!sidebar.contains(e.target) &&
|
|
4030
|
+
!menuToggle.contains(e.target)) {
|
|
4031
|
+
sidebar.classList.remove('open');
|
|
4032
|
+
}
|
|
4033
|
+
});
|
|
4034
|
+
|
|
4035
|
+
// Funcionalidad para copiar al portapapeles
|
|
4036
|
+
function copyToClipboard(text) {
|
|
4037
|
+
if (navigator.clipboard && navigator.clipboard.writeText) {
|
|
4038
|
+
return navigator.clipboard.writeText(text).then(() => true);
|
|
4039
|
+
} else {
|
|
4040
|
+
// Fallback para navegadores antiguos
|
|
4041
|
+
const textArea = document.createElement('textarea');
|
|
4042
|
+
textArea.value = text;
|
|
4043
|
+
textArea.style.position = 'fixed';
|
|
4044
|
+
textArea.style.opacity = '0';
|
|
4045
|
+
document.body.appendChild(textArea);
|
|
4046
|
+
textArea.select();
|
|
4047
|
+
try {
|
|
4048
|
+
document.execCommand('copy');
|
|
4049
|
+
document.body.removeChild(textArea);
|
|
4050
|
+
return Promise.resolve(true);
|
|
4051
|
+
} catch (err) {
|
|
4052
|
+
document.body.removeChild(textArea);
|
|
4053
|
+
return Promise.resolve(false);
|
|
4054
|
+
}
|
|
4055
|
+
}
|
|
4056
|
+
}
|
|
4057
|
+
|
|
4058
|
+
function showCopyFeedback(element) {
|
|
4059
|
+
const originalBg = element.style.backgroundColor;
|
|
4060
|
+
element.style.backgroundColor = '#d4edda';
|
|
4061
|
+
element.style.transition = 'background-color 0.3s';
|
|
4062
|
+
|
|
4063
|
+
setTimeout(() => {
|
|
4064
|
+
element.style.backgroundColor = originalBg || '';
|
|
4065
|
+
setTimeout(() => {
|
|
4066
|
+
element.style.transition = '';
|
|
4067
|
+
}, 300);
|
|
4068
|
+
}, 500);
|
|
4069
|
+
}
|
|
4070
|
+
|
|
4071
|
+
// Funcionalidad para copiar al portapapeles - se ejecuta cuando el DOM está listo
|
|
4072
|
+
function setupCopyToClipboard() {
|
|
4073
|
+
// Manejar clics en colores
|
|
4074
|
+
document.querySelectorAll('.guide-color-card, .guide-color-var-name, .guide-color-value').forEach(element => {
|
|
4075
|
+
element.addEventListener('click', (e) => {
|
|
4076
|
+
e.stopPropagation();
|
|
4077
|
+
const copyValue = element.getAttribute('data-copy-value');
|
|
4078
|
+
if (copyValue) {
|
|
4079
|
+
copyToClipboard(copyValue).then(success => {
|
|
4080
|
+
if (success) {
|
|
4081
|
+
showCopyFeedback(element);
|
|
4082
|
+
// Si es la tarjeta completa, buscar el elemento más visible para el feedback
|
|
4083
|
+
if (element.classList.contains('guide-color-card')) {
|
|
4084
|
+
const varNameEl = element.querySelector('.guide-color-var-name');
|
|
4085
|
+
if (varNameEl) showCopyFeedback(varNameEl);
|
|
4086
|
+
}
|
|
4087
|
+
}
|
|
4088
|
+
});
|
|
4089
|
+
}
|
|
4090
|
+
});
|
|
4091
|
+
});
|
|
4092
|
+
|
|
4093
|
+
// Manejar clics en variables
|
|
4094
|
+
document.querySelectorAll('.guide-copyable').forEach(element => {
|
|
4095
|
+
element.addEventListener('click', (e) => {
|
|
4096
|
+
e.stopPropagation();
|
|
4097
|
+
const copyValue = element.getAttribute('data-copy-value');
|
|
4098
|
+
if (copyValue && copyValue !== '-') {
|
|
4099
|
+
copyToClipboard(copyValue).then(success => {
|
|
4100
|
+
if (success) {
|
|
4101
|
+
showCopyFeedback(element);
|
|
4102
|
+
}
|
|
4103
|
+
});
|
|
4104
|
+
}
|
|
4105
|
+
});
|
|
4106
|
+
});
|
|
4107
|
+
}
|
|
4108
|
+
|
|
4109
|
+
// Ejecutar cuando el DOM esté listo
|
|
4110
|
+
if (document.readyState === 'loading') {
|
|
4111
|
+
document.addEventListener('DOMContentLoaded', setupCopyToClipboard);
|
|
4112
|
+
} else {
|
|
4113
|
+
setupCopyToClipboard();
|
|
4114
|
+
}
|
|
4115
|
+
</script>
|
|
4116
|
+
</body>
|
|
4117
|
+
</html>
|