holygrail2 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (57) hide show
  1. package/.editorconfig +13 -0
  2. package/.prettierrc +6 -0
  3. package/.stylelintrc +27 -0
  4. package/.vscode/settings.json +3 -0
  5. package/assets/images/minilogo.png +0 -0
  6. package/cssconfig.json +373 -0
  7. package/dist/style.css +10376 -0
  8. package/dist/style.css.map +1 -0
  9. package/doc/docs.css +1764 -0
  10. package/doc/docs.css.map +1 -0
  11. package/guide/index.html +3202 -0
  12. package/package.json +59 -0
  13. package/readme.md +123 -0
  14. package/scss/_partials.scss +44 -0
  15. package/scss/abstract/_0debug.scss +192 -0
  16. package/scss/abstract/_all.scss +4 -0
  17. package/scss/abstract/_breakpoints.scss +27 -0
  18. package/scss/abstract/_fonts.scss +22 -0
  19. package/scss/abstract/_mixins.scss +691 -0
  20. package/scss/abstract/_reset.scss +124 -0
  21. package/scss/abstract/_setup.scss +385 -0
  22. package/scss/base/_alignment.scss +294 -0
  23. package/scss/base/_animations.scss +64 -0
  24. package/scss/base/_extras.scss +21 -0
  25. package/scss/base/_grid.scss +361 -0
  26. package/scss/base/_height.scss +19 -0
  27. package/scss/base/_helpers.scss +814 -0
  28. package/scss/base/_icons.scss +162 -0
  29. package/scss/base/_ratios.scss +262 -0
  30. package/scss/base/_rtl.scss +480 -0
  31. package/scss/base/_spacing.scss +60 -0
  32. package/scss/base/_types.scss +117 -0
  33. package/scss/docs.scss +680 -0
  34. package/scss/elements/_animated.scss +73 -0
  35. package/scss/elements/_banners.scss +68 -0
  36. package/scss/elements/_buttons.scss +1324 -0
  37. package/scss/elements/_checkbox.scss +722 -0
  38. package/scss/elements/_color_selector.scss +112 -0
  39. package/scss/elements/_datalist.scss +55 -0
  40. package/scss/elements/_form.scss +708 -0
  41. package/scss/elements/_links.scss +268 -0
  42. package/scss/elements/_list.scss +271 -0
  43. package/scss/elements/_modal.scss +141 -0
  44. package/scss/elements/_progressbar.scss +20 -0
  45. package/scss/elements/_tabs.scss +216 -0
  46. package/scss/elements/_tabs_specials.scss +216 -0
  47. package/scss/elements/_tag.scss +58 -0
  48. package/scss/elements/_tooltip.scss +176 -0
  49. package/scss/layouts/_box3.scss +64 -0
  50. package/scss/layouts/_box4.scss +19 -0
  51. package/scss/layouts/_card.scss +24 -0
  52. package/scss/layouts/_card9.scss +348 -0
  53. package/scss/layouts/_feel.scss +2 -0
  54. package/scss/layouts/_header_account.scss +144 -0
  55. package/scss/layouts/_hgbread.scss +51 -0
  56. package/scss/layouts/_row1.scss +108 -0
  57. package/scss/style.scss +1 -0
package/guide/index.html ADDED
@@ -0,0 +1,3202 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="utf-8" />
5
+ <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
6
+ <meta name="HandheldFriendly" content="True" />
7
+ <meta name="MobileOptimized" content="320" />
8
+ <meta name="viewport" content="width=device-width, initial-scale=1" />
9
+ <script src="https://cdn.jsdelivr.net/npm/prismjs@1.19.0/prism.min.js"></script>
10
+ <link rel="stylesheet" href="../doc/docs.css" />
11
+ <link rel="stylesheet" href="../dist/style.css" />
12
+ <meta http-equiv="Accept-CH" content="DPR,Width,Viewport-Width" />
13
+ <!-- Core Meta -->
14
+ <title>GUIA</title>
15
+ <style>
16
+ .btn-secondary svg g {
17
+ fill: transparent;
18
+ stroke: #1a1a1a;
19
+ }
20
+ .btn-primary svg g {
21
+ fill: transparent;
22
+ stroke: #fff;
23
+ }
24
+ .btn-primary.disabled svg g {
25
+ fill: transparent;
26
+ }
27
+ b {
28
+ padding-bottom: 32px;
29
+ font-size: 24px;
30
+ font-weight: 600;
31
+ display: block;
32
+ padding: 16px;
33
+ border-radius: 16px;
34
+ background-color: #ececec;
35
+ margin-bottom: 20px;
36
+ margin-top: 80px;
37
+ }
38
+ strong {
39
+ display: block;
40
+ margin-bottom: 20px;
41
+ }
42
+ </style>
43
+ </head>
44
+ <body class="ltr guide">
45
+ <div class="container-fluid guia">
46
+ <div class="row">
47
+ <div class="site-menu-mobile">
48
+ <ul class="list-clear mb-48 text-center">
49
+ <li class="mb-24">
50
+ <a class="guide-minilogo" href=""> <img width="20px" src="../assets/images/minilogo.png" alt=""></a>
51
+ </li>
52
+ <li>
53
+ <a class="guide-text" target="_parent" href="#colors">
54
+ <span>COLORS</span></a>
55
+ </li>
56
+ <li>
57
+ <a class="guide-text" target="_parent" href="#types">
58
+ <span>FUENTES</span></a>
59
+ </li>
60
+ <li>
61
+ <a class="guide-text" target="_parent" href="#heights">
62
+ <span>HEIGHT</span></a>
63
+ </li>
64
+ <li>
65
+ <a class="guide-text" target="_parent" href="#helpers">
66
+ <span>HELPERS</span></a>
67
+ </li>
68
+ <li>
69
+ <a class="guide-text" target="_parent" href="#space">
70
+ <span>SPACE</span></a>
71
+ </li>
72
+ <li>
73
+ <a class="guide-text" target="_parent" href="#grids">
74
+ <span>GRID</span></a>
75
+ </li>
76
+ <li>
77
+ <a class="guide-text" target="_parent" href="#ratios">
78
+ <span>RATIOS</span></a>
79
+ </li>
80
+ <li>
81
+ <a class="guide-text" target="_parent" href="#buttons">
82
+ <span>BUTTONS</span></a>
83
+ </li>
84
+ <li>
85
+ <a class="guide-text" target="_parent" href="#checks">
86
+ <span>CHECKS</span></a>
87
+ </li>
88
+ <li>
89
+ <a class="guide-text" target="_parent" href="#inputs">
90
+ <span>INPUTS</span></a>
91
+ </li>
92
+ <li>
93
+ <a class="guide-text" target="_parent" href="#links">
94
+ <span>LINKS</span></a>
95
+ </li>
96
+ <li>
97
+ <a class="guide-text" target="_parent" href="#selects">
98
+ <span>SELECTS</span></a>
99
+ </li>
100
+ <li>
101
+ <a class="guide-text" target="_parent" href="#tabs">
102
+ <span>TABS</span></a>
103
+ </li>
104
+ <li>
105
+ <a class="guide-text" target="_parent" href="#banners">
106
+ <span>BANNERS</span></a>
107
+ </li>
108
+ <li>
109
+ <a class="guide-text" target="_parent" href="#compo">
110
+ <span>COMPO</span></a>
111
+ </li>
112
+ <li>
113
+ <a class="guide-text" target="_parent" href="#flexbox">
114
+ <span>FLEXBOX</span></a>
115
+ </li>
116
+ </ul>
117
+ </div>
118
+ <div class="mini-site-main pt-64 mt-64">
119
+ <div data-aos-delay="100" class="is-flex mb-24">
120
+ <a href="https://www.npmjs.com/package/holygrailcss" target="_blank" rel="nofollow">
121
+ <img src="https://img.shields.io/npm/dm/holygrailcss.svg">
122
+ </a>
123
+ <a href="https://www.npmjs.com/package/holygrailcss" rel="nofollow">
124
+ <img src="https://img.shields.io/npm/v/holygrailcss" alt="npm"
125
+ data-canonical-src="https://img.shields.io/npm/v/holygrailcss.svg" style="max-width:100%;"></a>
126
+ </div>
127
+ <b id="colors">Colores</b>
128
+ <section id="colors">
129
+ <div class="row tag-color-wrap">
130
+ <div class="col-xs-12 text-center text-12-r is-flex">
131
+ <div class="wrap-item">
132
+ <div class="item bg-primary"></div>
133
+ <div class="pt-4">c-primary</div>
134
+ <div class="var-b-c-primary"></div>
135
+ </div>
136
+ <div class="wrap-item">
137
+ <div class="item bg-secondary"></div>
138
+ <div class="var-b-c-secondary"></div>
139
+ <div class="pt-4">c-secondary</div>
140
+ </div>
141
+ <div class="wrap-item">
142
+ <div class="item bg-accent"></div>
143
+ <div class="var-b-c-accent"></div>
144
+ <div class="pt-4">c-accent</div>
145
+ </div>
146
+ <div class="wrap-item">
147
+ <div class="item bg-white "></div>
148
+ <div class="var-b-c-white"></div>
149
+ <div class="pt-4"> c-white</div>
150
+ </div>
151
+ <div class="wrap-item">
152
+ <div class="item bg-black"></div>
153
+ <div class="var-b-c-black"></div>
154
+ <div class="pt-4">c-black</div>
155
+ </div>
156
+ <div class="wrap-item">
157
+ <div class="item bg-dark-grey "></div>
158
+ <div class="var-b-c-dark-grey"></div>
159
+ <div class="pt-4">c-dark-grey</div>
160
+ </div>
161
+ <div class="wrap-item">
162
+ <div class="item bg-middle-grey "></div>
163
+ <div class="var-b-c-middle-grey"></div>
164
+ <div class="pt-4">c-middle-grey</div>
165
+ </div>
166
+ <div class="wrap-item">
167
+ <div class="item bg-light-grey"></div>
168
+ <div class="var-b-c-light-grey"></div>
169
+ <div class="pt-4">c-light-grey</div>
170
+ </div>
171
+ <div class="wrap-item">
172
+ <div class="item bg-error"></div>
173
+ <div class="var-b-c-error"></div>
174
+ <div class="pt-4">c-error</div>
175
+ </div>
176
+ <div class="wrap-item">
177
+ <div class="item bg-info"></div>
178
+ <div class="var-b-c-info"></div>
179
+ <div class="pt-4">c-info</div>
180
+ </div>
181
+ <div class="wrap-item">
182
+ <div class="item bg-success"></div>
183
+ <div class="var-b-c-success"></div>
184
+ <div class="pt-4">c-success</div>
185
+ </div>
186
+ <div class="wrap-item">
187
+ <div class="item bg-warning"></div>
188
+ <div class="var-b-c-warning"></div>
189
+ <div class="pt-4">c-warning</div>
190
+ </div>
191
+ </div>
192
+ </div>
193
+ </section>
194
+ <b id="types">Responsive</b>
195
+ <section>
196
+ <strong> Fuente Primaria :<span class="font-family-a"></span></strong>
197
+ <strong>Fuente Secundaria :<span class="font-family-b"></span> </strong>
198
+ <strong>Fuente Terciaria:<span class="font-family-c"></span> </strong>
199
+ </section>
200
+ <b>Font weight</b>
201
+ <div class="filas">
202
+ <p class="font-light"> Font light </p>
203
+ <p class="font-regular"> Font regular </p>
204
+ <p class="font-medium"> Font medium </p>
205
+ <p class="font-semibold"> Font semibold </p>
206
+ <p class="font-bold"> Font bold </p>
207
+ </div>
208
+ <br>
209
+ <b>Fuentes </b>
210
+ <div class="row mb-64">
211
+ <div class="col-xs-12">
212
+ <div class="row">
213
+ <div class="col-xs-8 bold">
214
+ <div class="filas grid-8-docs">
215
+ <div class="item "> Name</div>
216
+ <div class="item"> 768px</div>
217
+ <div class="item"> 992px </div>
218
+ <div class="item"> LINE HEIGHT </div>
219
+ <div class="item"> WEIGHT</div>
220
+ </div>
221
+ </div>
222
+ </div>
223
+ <div class="row minheaders">
224
+ <div class="col-xs-8">
225
+ <div class="filas wrap-item-type grid-8-docs ">
226
+ <div class="item item-0"></div>
227
+ <div class="item item-1"></div>
228
+ <div class="item item-2"></div>
229
+ <div class="item item-3"></div>
230
+ <div class="item item-4"></div>
231
+ </div>
232
+ <div class="filas wrap-item-type grid-8-docs ">
233
+ <div class="item item-0"></div>
234
+ <div class="item item-1"></div>
235
+ <div class="item item-2"></div>
236
+ <div class="item item-3"></div>
237
+ <div class="item item-4"></div>
238
+ </div>
239
+ <div class="filas wrap-item-type grid-8-docs ">
240
+ <div class="item item-0"></div>
241
+ <div class="item item-1"></div>
242
+ <div class="item item-2"></div>
243
+ <div class="item item-3"></div>
244
+ <div class="item item-4"></div>
245
+ </div>
246
+ <div class="filas wrap-item-type grid-8-docs ">
247
+ <div class="item item-0"></div>
248
+ <div class="item item-1"></div>
249
+ <div class="item item-2"></div>
250
+ <div class="item item-3"></div>
251
+ <div class="item item-4"></div>
252
+ </div>
253
+ <div class="filas wrap-item-type grid-8-docs ">
254
+ <div class="item item-0"></div>
255
+ <div class="item item-1"></div>
256
+ <div class="item item-2"></div>
257
+ <div class="item item-3"></div>
258
+ <div class="item item-4"></div>
259
+ </div>
260
+ <div class="filas wrap-item-type grid-8-docs ">
261
+ <div class="item item-0"></div>
262
+ <div class="item item-1"></div>
263
+ <div class="item item-2"></div>
264
+ <div class="item item-3"></div>
265
+ <div class="item item-4"></div>
266
+ </div>
267
+ <div class="filas wrap-item-type grid-8-docs ">
268
+ <div class="item item-0"></div>
269
+ <div class="item item-1"></div>
270
+ <div class="item item-2"></div>
271
+ <div class="item item-3"></div>
272
+ <div class="item item-4"></div>
273
+ </div>
274
+ <div class="filas wrap-item-type grid-8-docs ">
275
+ <div class="item item-0"></div>
276
+ <div class="item item-1"></div>
277
+ <div class="item item-2"></div>
278
+ <div class="item item-3"></div>
279
+ <div class="item item-4"></div>
280
+ </div>
281
+ <div class="filas wrap-item-type grid-8-docs ">
282
+ <div class="item item-0"></div>
283
+ <div class="item item-1"></div>
284
+ <div class="item item-2"></div>
285
+ <div class="item item-3"></div>
286
+ <div class="item item-4"></div>
287
+ </div>
288
+ <div class="filas wrap-item-type grid-8-docs ">
289
+ <div class="item item-0"></div>
290
+ <div class="item item-1"></div>
291
+ <div class="item item-2"></div>
292
+ <div class="item item-3"></div>
293
+ <div class="item item-4"></div>
294
+ </div>
295
+ <div class="filas wrap-item-type grid-8-docs ">
296
+ <div class="item item-0"></div>
297
+ <div class="item item-1"></div>
298
+ <div class="item item-2"></div>
299
+ <div class="item item-3"></div>
300
+ <div class="item item-4"></div>
301
+ </div>
302
+ <div class="filas wrap-item-type grid-8-docs ">
303
+ <div class="item item-0"></div>
304
+ <div class="item item-1"></div>
305
+ <div class="item item-2"></div>
306
+ <div class="item item-3"></div>
307
+ <div class="item item-4"></div>
308
+ </div>
309
+ </div>
310
+ </div>
311
+ </div>
312
+ </div>
313
+ </section>
314
+ <b>Texto fluido</b>
315
+ <section id="fluid">
316
+ <div class="row">
317
+ <div class="col-xs-12">
318
+ <div class="filas grid-8-docs filashead bold ">
319
+ <div class="item "> Clase</div>
320
+ <div class="item "> Font size min</div>
321
+ <div class="item "> Font size max </div>
322
+ <div class="item "> line-height </div>
323
+ </div>
324
+ </div>
325
+ </div>
326
+ <div class="row">
327
+ <div class="col-xs-12">
328
+ <div class="fluids">
329
+ <div class="row">
330
+ <div class="col text-14-r">
331
+ <div class="filas grid-8-docs">
332
+ <div class="item item-0"></div>
333
+ <div class="item item-1"></div>
334
+ <div class="item item-2"></div>
335
+ <div class="item item-3"></div>
336
+ </div>
337
+ <div class="filas grid-8-docs">
338
+ <div class="item item-0"></div>
339
+ <div class="item item-1"></div>
340
+ <div class="item item-2"></div>
341
+ <div class="item item-3"></div>
342
+ </div>
343
+ <div class="filas grid-8-docs">
344
+ <div class="item item-0"></div>
345
+ <div class="item item-1"></div>
346
+ <div class="item item-2"></div>
347
+ <div class="item item-3"></div>
348
+ </div>
349
+ <div class="filas grid-8-docs">
350
+ <div class="item item-0"></div>
351
+ <div class="item item-1"></div>
352
+ <div class="item item-2"></div>
353
+ <div class="item item-3"></div>
354
+ </div>
355
+ <div class="filas grid-8-docs">
356
+ <div class="item item-0"></div>
357
+ <div class="item item-1"></div>
358
+ <div class="item item-2"></div>
359
+ <div class="item item-3"></div>
360
+ </div>
361
+ <div class="filas grid-8-docs">
362
+ <div class="item item-0"></div>
363
+ <div class="item item-1"></div>
364
+ <div class="item item-2"></div>
365
+ <div class="item item-3"></div>
366
+ </div>
367
+ <div class="filas grid-8-docs">
368
+ <div class="item item-0"></div>
369
+ <div class="item item-1"></div>
370
+ <div class="item item-2"></div>
371
+ <div class="item item-3"></div>
372
+ </div>
373
+ <div class="filas grid-8-docs">
374
+ <div class="item item-0"></div>
375
+ <div class="item item-1"></div>
376
+ <div class="item item-2"></div>
377
+ <div class="item item-3"></div>
378
+ </div>
379
+ <div class="filas grid-8-docs">
380
+ <div class="item item-0"></div>
381
+ <div class="item item-1"></div>
382
+ <div class="item item-2"></div>
383
+ <div class="item item-3"></div>
384
+ </div>
385
+ <div class="filas grid-8-docs">
386
+ <div class="item item-0"></div>
387
+ <div class="item item-1"></div>
388
+ <div class="item item-2"></div>
389
+ <div class="item item-3"></div>
390
+ </div>
391
+ <div class="filas grid-8-docs">
392
+ <div class="item item-0"></div>
393
+ <div class="item item-1"></div>
394
+ <div class="item item-2"></div>
395
+ <div class="item item-3"></div>
396
+ </div>
397
+ <div class="filas grid-8-docs">
398
+ <div class="item item-0"></div>
399
+ <div class="item item-1"></div>
400
+ <div class="item item-2"></div>
401
+ <div class="item item-3"></div>
402
+ </div>
403
+ <div class="filas grid-8-docs">
404
+ <div class="item item-0"></div>
405
+ <div class="item item-1"></div>
406
+ <div class="item item-2"></div>
407
+ <div class="item item-3"></div>
408
+ </div>
409
+ <div class="filas grid-8-docs">
410
+ <div class="item item-0"></div>
411
+ <div class="item item-1"></div>
412
+ <div class="item item-2"></div>
413
+ <div class="item item-3"></div>
414
+ </div>
415
+ <div class="filas grid-8-docs">
416
+ <div class="item item-0"></div>
417
+ <div class="item item-1"></div>
418
+ <div class="item item-2"></div>
419
+ <div class="item item-3"></div>
420
+ </div>
421
+ <div class="filas grid-8-docs">
422
+ <div class="item item-0"></div>
423
+ <div class="item item-1"></div>
424
+ <div class="item item-2"></div>
425
+ <div class="item item-3"></div>
426
+ </div>
427
+ <div class="filas grid-8-docs">
428
+ <div class="item item-0"></div>
429
+ <div class="item item-1"></div>
430
+ <div class="item item-2"></div>
431
+ <div class="item item-3"></div>
432
+ </div>
433
+ </div>
434
+ </div>
435
+ </div>
436
+ </div>
437
+ </div>
438
+ </section>
439
+ <b id="heights">Heights</b>
440
+ <section id="heights" class="mb-64">
441
+ <div class="row">
442
+ <div class="col-xs-12">
443
+ <div class="filas grid-8-docs filashead bold mb-16 ">
444
+ <div class="item"> Clase </div>
445
+ <div class="item "> ALTURA SM </div>
446
+ <div class="item "> ALTURA MD </div>
447
+ </div>
448
+ </div>
449
+ <div class="col-xs-12 heights">
450
+ <div class="filas grid-8-docs">
451
+ <div class="item item-0"></div>
452
+ <div class="item item-1"></div>
453
+ <div class="item item-2"></div>
454
+ </div>
455
+ <div class="filas grid-8-docs">
456
+ <div class="item item-0"></div>
457
+ <div class="item item-1"></div>
458
+ <div class="item item-2"></div>
459
+ </div>
460
+ <div class="filas grid-8-docs">
461
+ <div class="item item-0"></div>
462
+ <div class="item item-1"></div>
463
+ <div class="item item-2"></div>
464
+ </div>
465
+ <div class="filas grid-8-docs">
466
+ <div class="item item-0"></div>
467
+ <div class="item item-1"></div>
468
+ <div class="item item-2"></div>
469
+ </div>
470
+ <div class="filas grid-8-docs">
471
+ <div class="item item-0"></div>
472
+ <div class="item item-1"></div>
473
+ <div class="item item-2"></div>
474
+ </div>
475
+ <div class="filas grid-8-docs">
476
+ <div class="item item-0"></div>
477
+ <div class="item item-1"></div>
478
+ <div class="item item-2"></div>
479
+ </div>
480
+ <div class="filas grid-8-docs">
481
+ <div class="item item-0"></div>
482
+ <div class="item item-1"></div>
483
+ <div class="item item-2"></div>
484
+ </div>
485
+ <div class="filas grid-8-docs">
486
+ <div class="item item-0"></div>
487
+ <div class="item item-1"></div>
488
+ <div class="item item-2"></div>
489
+ </div>
490
+ <div class="filas grid-8-docs">
491
+ <div class="item item-0"></div>
492
+ <div class="item item-1"></div>
493
+ <div class="item item-2"></div>
494
+ </div>
495
+ <div class="filas grid-8-docs">
496
+ <div class="item item-0"></div>
497
+ <div class="item item-1"></div>
498
+ <div class="item item-2"></div>
499
+ </div>
500
+ <div class="filas grid-8-docs">
501
+ <div class="item item-0"></div>
502
+ <div class="item item-1"></div>
503
+ <div class="item item-2"></div>
504
+ <div class="item item-2"></div>
505
+ </div>
506
+ <div class="filas grid-8-docs">
507
+ <div class="item item-0"></div>
508
+ <div class="item item-1"></div>
509
+ <div class="item item-2"></div>
510
+ <div class="item item-2"></div>
511
+ </div>
512
+ <div class="filas grid-8-docs">
513
+ <div class="item item-0"></div>
514
+ <div class="item item-1"></div>
515
+ <div class="item item-2"></div>
516
+ </div>
517
+ <div class="filas grid-8-docs">
518
+ <div class="item item-0"></div>
519
+ <div class="item item-1"></div>
520
+ <div class="item item-2"></div>
521
+ </div>
522
+ <div class="filas grid-8-docs">
523
+ <div class="item item-0"></div>
524
+ <div class="item item-1"></div>
525
+ <div class="item item-2"></div>
526
+ </div>
527
+ <div class="filas grid-8-docs">
528
+ <div class="item item-0"></div>
529
+ <div class="item item-1"></div>
530
+ <div class="item item-2"></div>
531
+ </div>
532
+ <div class="filas grid-8-docs">
533
+ <div class="item item-0"></div>
534
+ <div class="item item-1"></div>
535
+ <div class="item item-2"></div>
536
+ </div>
537
+ </div>
538
+ </div>
539
+ </section>
540
+ <b id="helpers">Helpers</b>
541
+ <section id="helpers" class="mb-64">
542
+ <div class="grid-6-docs pb-24 bold">
543
+ <div class="item "> Clase </div>
544
+ <div class="item "> Propiedades </div>
545
+ <div class="item "> Clase </div>
546
+ <div class="item "> Propiedades </div>
547
+ <div class="item "> Clase </div>
548
+ <div class="item "> Propiedades </div>
549
+ </div>
550
+ <div class="grid-6-docs text-12-r">
551
+ <div> .flex-vcenter </div>
552
+ <div>centrado vertical, incluso si tenemos iconos</div>
553
+ <div>.video-cover </div>
554
+ <div>Posicionamiento mediante absolutes 50%</div>
555
+ <div>.bg-cover </div>
556
+ <div>Imagen centrada al medio con cover ❌</div>
557
+ <div>d-inline </div>
558
+ <div>inline-block</div>
559
+ <div>flex-1 </div>
560
+ <div>flex: 1 1 0%</div>
561
+ <div>flex-auto </div>
562
+ <div>flex: 1 1 auto</div>
563
+ <div>flex-auto </div>
564
+ <div>flex: 0 1 auto</div>
565
+ <div>flex-none </div>
566
+ <div>flex: none</div>
567
+ <div>p-wrap </div>
568
+ <div>position relative al 100%</div>
569
+ <div>.border-1 </div>
570
+ <div>border: 1px solid $c-middle-grey</div>
571
+ <div>.border-t </div>
572
+ <div>border-top: 1px solid $c-middle-grey</div>
573
+ <div>.border-b </div>
574
+ <div>border-bottom: 1px solid $c-middle-grey;</div>
575
+ <div>.border-l </div>
576
+ <div>border-left: 1px solid $c-middle-grey</div>
577
+ <div>.border-r </div>
578
+ <div>border-right: 1px solid $c-middle-grey;</div>
579
+ <div>.border-b2 </div>
580
+ <div>border-bottom: 1px solid $c-primary</div>
581
+ <div>.border-t2 </div>
582
+ <div>border-top: 1px solid $c-primary</div>
583
+ <div>.ov-scroll </div>
584
+ <div>scroll con touch</div>
585
+ <div>.scrollbar </div>
586
+ <div>cambiamos el background</div>
587
+ <div>.ov-custom </div>
588
+ <div>scroll personalizable</div>
589
+ <div>.cursor-pointer </div>
590
+ <div>Un cursor</div>
591
+ <div>.svg-iflex</div>
592
+ <div> descripcion</div>
593
+ <div>.svg-inline </div>
594
+ <div>descripcion</div>
595
+ <div>.hr</div>
596
+ <div> línea normal</div>
597
+ <div>.w-max </div>
598
+ <div> max-content</div>
599
+ <div>.hidden </div>
600
+ <div> display none important</div>
601
+ <div>.only-mobile </div>
602
+ <div> inline-block en mobile</div>
603
+ <div>.only-mobile-flex </div>
604
+ <div></div>
605
+ <div>.only-desktop </div>
606
+ <div> Visible Sólo en desktop a partir de sm</div>
607
+ <div>.only-desktop-flex </div>
608
+ <div> Flex en desktop a partir de sm</div>
609
+ <div>.flex-vcenter </div>
610
+ <div>centrado vertical, incluso si tenemos iconos</div>
611
+ <div>.video-cover </div>
612
+ <div>Posicionamiento mediante absolutes 50%</div>
613
+ <div>.bg-cover </div>
614
+ <div>Imagen centrada al medio con cover ❌</div>
615
+ <div>d-inline </div>
616
+ <div>inline-block</div>
617
+ <div>flex-1 </div>
618
+ <div>flex: 1 1 0%</div>
619
+ <div>flex-auto </div>
620
+ <div>flex: 1 1 auto</div>
621
+ <div>flex-auto </div>
622
+ <div>flex: 0 1 auto</div>
623
+ <div>flex-none </div>
624
+ <div>flex: none</div>
625
+ <div>p-wrap </div>
626
+ <div>position relative al 100%</div>
627
+ <div>.border-1 </div>
628
+ <div>border: 1px solid $c-middle-grey</div>
629
+ <div>.border-t </div>
630
+ <div>border-top: 1px solid $c-middle-grey</div>
631
+ <div>.border-b </div>
632
+ <div>border-bottom: 1px solid $c-middle-grey;</div>
633
+ <div>border-l </div>
634
+ <div>border-left: 1px solid $c-middle-grey</div>
635
+ <div>.border-r </div>
636
+ <div>border-right: 1px solid $c-middle-grey;</div>
637
+ <div>.border-b2 </div>
638
+ <div>border-bottom: 1px solid $c-primary</div>
639
+ <div>.border-t2 </div>
640
+ <div>border-top: 1px solid $c-primary</div>
641
+ <div>.ov-scroll </div>
642
+ <div>scroll con touch</div>
643
+ <div>.scrollbar </div>
644
+ <div>cambiamos el background</div>
645
+ <div>.ov-custom </div>
646
+ <div>scroll personalizable</div>
647
+ <div>.cursor-pointer </div>
648
+ <div>Un cursor</div>
649
+ <div>.svg-iflex</div>
650
+ <div> descripcion</div>
651
+ <div>.svg-inline </div>
652
+ <div>descripcion</div>
653
+ <div>.hr</div>
654
+ <div> línea normal</div>
655
+ <div>.w-max </div>
656
+ <div> max-content</div>
657
+ <div>.hidden </div>
658
+ <div> display none important</div>
659
+ <div>.only-mobile </div>
660
+ <div> inline-block en mobile</div>
661
+ <div>.only-mobile-flex </div>
662
+ <div></div>
663
+ <div>.only-desktop </div>
664
+ <div> Visible Sólo en desktop a partir de sm</div>
665
+ <div>.only-desktop-flex </div>
666
+ <div> Flex en desktop a partir de sm</div>
667
+ <div>.flex-vcenter </div>
668
+ <div>centrado vertical, incluso si tenemos iconos</div>
669
+ <div>.video-cover </div>
670
+ <div>Posicionamiento mediante absolutes 50%</div>
671
+ <div>.bg-cover </div>
672
+ <div>Imagen centrada al medio con cover ❌</div>
673
+ <div>d-inline </div>
674
+ <div>inline-block</div>
675
+ <div>flex-1 </div>
676
+ <div>flex: 1 1 0%</div>
677
+ <div>flex-auto </div>
678
+ <div>flex: 1 1 auto</div>
679
+ <div>flex-auto </div>
680
+ <div>flex: 0 1 auto</div>
681
+ <div>flex-none </div>
682
+ <div>flex: none</div>
683
+ <div>p-wrap </div>
684
+ <div>position relative al 100%</div>
685
+ <div>.border-1 </div>
686
+ <div>border: 1px solid $c-middle-grey</div>
687
+ <div>.border-t </div>
688
+ <div>border-top: 1px solid $c-middle-grey</div>
689
+ <div>.border-b </div>
690
+ <div>border-bottom: 1px solid $c-middle-grey;</div>
691
+ <div>.border-l </div>
692
+ <div>border-left: 1px solid $c-middle-grey</div>
693
+ <div>.border-r </div>
694
+ <div>border-right: 1px solid $c-middle-grey;</div>
695
+ <div>.border-b2 </div>
696
+ <div>border-bottom: 1px solid $c-primary</div>
697
+ <div>.border-t2 </div>
698
+ <div>border-top: 1px solid $c-primary</div>
699
+ <div>.ov-scroll </div>
700
+ <div>scroll con touch</div>
701
+ <div>.scrollbar </div>
702
+ <div>cambiamos el background</div>
703
+ <div>.ov-custom </div>
704
+ <div>scroll personalizable</div>
705
+ <div>.cursor-pointer </div>
706
+ <div>Un cursor</div>
707
+ <div>.svg-iflex</div>
708
+ <div> descripcion</div>
709
+ <div>.svg-inline </div>
710
+ <div>descripcion</div>
711
+ <div>.hr</div>
712
+ <div> línea normal</div>
713
+ <div>.w-max </div>
714
+ <div> max-content</div>
715
+ <div>.hidden </div>
716
+ <div> display none important</div>
717
+ <div>.only-mobile </div>
718
+ <div> inline-block en mobile</div>
719
+ <div>.only-mobile-flex </div>
720
+ <div></div>
721
+ <div>.only-desktop </div>
722
+ <div> Visible Sólo en desktop a partir de sm</div>
723
+ <div>.only-desktop-flex </div>
724
+ <div> Flex en desktop a partir de sm</div>
725
+ <div class="item item-0 "> .text-center </div>
726
+ <div class="item "> Centrado de texto</div>
727
+ <div class="item item-0 "> .text-left</div>
728
+ <div class="item "> Alineación izquierda</div>
729
+ <div class="item item-0 "> .text-right</div>
730
+ <div class="item "> Alineación derecha</div>
731
+ <div class="item ">.text-justify</div>
732
+ <div class="item "> Texto justificado
733
+ </div>
734
+ <div class="item ">.bg-cover</div>
735
+ <div class="item "> Imagen centrada al medio con cover
736
+ </div>
737
+ <div class="item ">.has-ellipsis</div>
738
+ <div class="item "> Imagen centrada al medio con cover
739
+ </div>
740
+ <div class="item ">.video-cover</div>
741
+ <div class="item "> Imagen centrada al medio con cover
742
+ </div>
743
+ <div class="item "> .reverse</div>
744
+ <div class="item "> .sm:reverse .md:reverse .lg:reverse
745
+ </div>
746
+ <div class="item ">.bg-line</div>
747
+ <div class="item "> Imagen centrada al medio con cover
748
+ </div>
749
+ </div>
750
+ </section>
751
+ <b id="space">Columnado</b>
752
+ <section>
753
+ <div class="container ">
754
+ <div class="row">
755
+ <div class="col-xs-12">desde 0px <span class="bold">col-xs </span> </div> <br>
756
+ <div class="col-xs-12">desde 768px <span class="bold"> col-sm</span> </div> <br>
757
+ <div class="col-xs-12">desde 992px <span class="bold">col-md </span> </div> <br>
758
+ <div class="col-xs-12">desde 1280px <span class="bold">col-lg </span> </div> <br>
759
+ <div class="col-xs-12">desde 1440px <span class="bold">col-xl </span> </div>
760
+ </div>
761
+
762
+ <br>
763
+
764
+
765
+ <div class="row text-12-r">
766
+ <div class="col-xs-1 bg-light border-1"> col-xs-1 </div> <br>
767
+ <div class="col-xs-2 bg-light border-1"> col-xs-2 </div> <br>
768
+ <div class="col-xs-3 bg-light border-1"> col-xs-3 </div> <br>
769
+ <div class="col-xs-4 bg-light border-1"> col-xs-4 </div> <br>
770
+ <div class="col-xs-5 bg-light border-1"> col-xs-5 </div> <br>
771
+ <div class="col-xs-6 bg-light border-1"> col-xs-6 </div> <br>
772
+ <div class="col-xs-7 bg-light border-1"> col-xs-7 </div> <br>
773
+ <div class="col-xs-8 bg-light border-1"> col-xs-8 </div> <br>
774
+ <div class="col-xs-9 bg-light border-1"> col-xs-9 </div> <br>
775
+ <div class="col-xs-10 bg-light border-1"> col-xs-10 </div> <br>
776
+ <div class="col-xs-11 bg-light border-1"> col-xs-11 </div> <br>
777
+ <div class="col-xs-12 bg-light border-1"> col-xs-12 </div>
778
+ </div>
779
+ </div>
780
+ </section>
781
+ <b id="space">Espaciados</b>
782
+ <strong>Margins (m- mt- mr- mb- ml- )</strong>
783
+ <div class="grid-24-docs text-12-r">
784
+ <div class="bg-light">
785
+ <div class="mb-4 bg-docs "> mb-4</div>
786
+ </div>
787
+ <div class="bg-light">
788
+ <div class="mb-8 bg-docs "> mb-8</div>
789
+ </div>
790
+ <div class="bg-light">
791
+ <div class="mb-16 bg-docs "> mb-16</div>
792
+ </div>
793
+ <div class="bg-light">
794
+ <div class="mb-24 bg-docs "> mb-24</div>
795
+ </div>
796
+ <div class="bg-light">
797
+ <div class="mb-32 bg-docs "> mb-32</div>
798
+ </div>
799
+ <div class="bg-light">
800
+ <div class="mb-40 bg-docs "> mb-40</div>
801
+ </div>
802
+ <div class="bg-light">
803
+ <div class="mb-48 bg-docs "> mb-48</div>
804
+ </div>
805
+ <div class="bg-light">
806
+ <div class="mb-56 bg-docs "> mb-56</div>
807
+ </div>
808
+ <div class="bg-light">
809
+ <div class="mb-64 bg-docs "> mb-64</div>
810
+ </div>
811
+ <div class="bg-light">
812
+ <div class="mb-72 bg-docs "> mb-72</div>
813
+ </div>
814
+ </div>
815
+ <strong>Paddings (p- pt- pr- pb- pl- )</strong>
816
+ <div class="grid-24-docs text-12-r">
817
+ <div class="bg-light">
818
+ <div class="pb-4 bg-docs "> pb-4</div>
819
+ </div>
820
+ <div class="bg-light">
821
+ <div class="pb-8 bg-docs "> pb-8</div>
822
+ </div>
823
+ <div class="bg-light">
824
+ <div class="pb-16 bg-docs "> pb-16</div>
825
+ </div>
826
+ <div class="bg-light">
827
+ <div class="pb-24 bg-docs "> pb-24</div>
828
+ </div>
829
+ <div class="bg-light">
830
+ <div class="pb-32 bg-docs "> pb-32</div>
831
+ </div>
832
+ <div class="bg-light">
833
+ <div class="pb-40 bg-docs "> pb-40</div>
834
+ </div>
835
+ <div class="bg-light">
836
+ <div class="pb-48 bg-docs "> pb-48</div>
837
+ </div>
838
+ <div class="bg-light">
839
+ <div class="pb-56 bg-docs "> pb-56</div>
840
+ </div>
841
+ <div class="bg-light">
842
+ <div class="pb-64 bg-docs "> pb-64</div>
843
+ </div>
844
+ <div class="bg-light">
845
+ <div class="pb-72 bg-docs "> pb-72</div>
846
+ </div>
847
+ </div>
848
+ <b>Márgenes Responsive</b>
849
+ <section class="text-12-r">
850
+ <div class="grid-24-docs">
851
+ <div>
852
+ <div class="marginbox-bottom">
853
+ <strong> MB- </strong>
854
+ <div class="filas ">
855
+ <div class="item item-0"></div>
856
+ </div>
857
+ <div class="filas ">
858
+ <div class="item item-0"></div>
859
+ </div>
860
+ <div class="filas ">
861
+ <div class="item item-0"></div>
862
+ </div>
863
+ <div class="filas ">
864
+ <div class="item item-0"></div>
865
+ </div>
866
+ <div class="filas ">
867
+ <div class="item item-0"></div>
868
+ </div>
869
+ <div class="filas ">
870
+ <div class="item item-0"></div>
871
+ </div>
872
+ <div class="filas ">
873
+ <div class="item item-0"></div>
874
+ </div>
875
+ <div class="filas ">
876
+ <div class="item item-0"></div>
877
+ </div>
878
+ <div class="filas ">
879
+ <div class="item item-0"></div>
880
+ </div>
881
+ <div class="filas ">
882
+ <div class="item item-0"></div>
883
+ </div>
884
+ <div class="filas ">
885
+ <div class="item item-0"></div>
886
+ </div>
887
+ <div class="filas ">
888
+ <div class="item item-0"></div>
889
+ </div>
890
+ <div class="filas ">
891
+ <div class="item item-0"></div>
892
+ </div>
893
+ <div class="filas ">
894
+ <div class="item item-0"></div>
895
+ </div>
896
+ <div class="filas ">
897
+ <div class="item item-0"></div>
898
+ </div>
899
+ <div class="filas ">
900
+ <div class="item item-0"></div>
901
+ </div>
902
+ <div class="filas ">
903
+ <div class="item item-0"></div>
904
+ </div>
905
+ </div>
906
+ </div>
907
+ <div>
908
+ <div class=" ">
909
+ <strong> MT- </strong>
910
+ </div>
911
+ <div class="marginbox-top">
912
+ <div class="filas">
913
+ <div class="item item-0"></div>
914
+ </div>
915
+ <div class="filas">
916
+ <div class="item item-0"></div>
917
+ </div>
918
+ <div class="filas">
919
+ <div class="item item-0"></div>
920
+ </div>
921
+ <div class="filas">
922
+ <div class="item item-0"></div>
923
+ </div>
924
+ <div class="filas">
925
+ <div class="item item-0"></div>
926
+ </div>
927
+ <div class="filas">
928
+ <div class="item item-0"></div>
929
+ </div>
930
+ <div class="filas">
931
+ <div class="item item-0"></div>
932
+ </div>
933
+ <div class="filas">
934
+ <div class="item item-0"></div>
935
+ </div>
936
+ <div class="filas">
937
+ <div class="item item-0"></div>
938
+ </div>
939
+ <div class="filas">
940
+ <div class="item item-0"></div>
941
+ </div>
942
+ <div class="filas">
943
+ <div class="item item-0"></div>
944
+ </div>
945
+ <div class="filas">
946
+ <div class="item item-0"></div>
947
+ </div>
948
+ <div class="filas">
949
+ <div class="item item-0"></div>
950
+ </div>
951
+ <div class="filas">
952
+ <div class="item item-0"></div>
953
+ </div>
954
+ <div class="filas">
955
+ <div class="item item-0"></div>
956
+ </div>
957
+ <div class="filas">
958
+ <div class="item item-0"></div>
959
+ </div>
960
+ <div class="filas">
961
+ <div class="item item-0"></div>
962
+ </div>
963
+ </div>
964
+ </div>
965
+ <div>
966
+ <div class=" ">
967
+ <strong> MX- </strong>
968
+ </div>
969
+ <div class="marginbox-x">
970
+ <div class="row">
971
+ <div class="col">
972
+ <div class="filas">
973
+ <div class="item item-0"></div>
974
+ </div>
975
+ <div class="filas">
976
+ <div class="item item-0"></div>
977
+ </div>
978
+ <div class="filas">
979
+ <div class="item item-0"></div>
980
+ </div>
981
+ <div class="filas">
982
+ <div class="item item-0"></div>
983
+ </div>
984
+ <div class="filas">
985
+ <div class="item item-0"></div>
986
+ </div>
987
+ <div class="filas">
988
+ <div class="item item-0"></div>
989
+ </div>
990
+ <div class="filas">
991
+ <div class="item item-0"></div>
992
+ </div>
993
+ <div class="filas">
994
+ <div class="item item-0"></div>
995
+ </div>
996
+ <div class="filas">
997
+ <div class="item item-0"></div>
998
+ </div>
999
+ <div class="filas">
1000
+ <div class="item item-0"></div>
1001
+ </div>
1002
+ <div class="filas">
1003
+ <div class="item item-0"></div>
1004
+ </div>
1005
+ <div class="filas">
1006
+ <div class="item item-0"></div>
1007
+ </div>
1008
+ <div class="filas">
1009
+ <div class="item item-0"></div>
1010
+ </div>
1011
+ <div class="filas">
1012
+ <div class="item item-0"></div>
1013
+ </div>
1014
+ <div class="filas">
1015
+ <div class="item item-0"></div>
1016
+ </div>
1017
+ <div class="filas">
1018
+ <div class="item item-0"></div>
1019
+ </div>
1020
+ <div class="filas">
1021
+ <div class="item item-0"></div>
1022
+ </div>
1023
+ </div>
1024
+ </div>
1025
+ </div>
1026
+ </div>
1027
+ <div>
1028
+ <div class=" ">
1029
+ <strong> MY- </strong>
1030
+ </div>
1031
+ <div class="marginbox-y">
1032
+ <div class="filas">
1033
+ <div class="item item-0"></div>
1034
+ </div>
1035
+ <div class="filas">
1036
+ <div class="item item-0"></div>
1037
+ </div>
1038
+ <div class="filas">
1039
+ <div class="item item-0"></div>
1040
+ </div>
1041
+ <div class="filas">
1042
+ <div class="item item-0"></div>
1043
+ </div>
1044
+ <div class="filas">
1045
+ <div class="item item-0"></div>
1046
+ </div>
1047
+ <div class="filas">
1048
+ <div class="item item-0"></div>
1049
+ </div>
1050
+ <div class="filas">
1051
+ <div class="item item-0"></div>
1052
+ </div>
1053
+ <div class="filas">
1054
+ <div class="item item-0"></div>
1055
+ </div>
1056
+ <div class="filas">
1057
+ <div class="item item-0"></div>
1058
+ </div>
1059
+ <div class="filas">
1060
+ <div class="item item-0"></div>
1061
+ </div>
1062
+ <div class="filas">
1063
+ <div class="item item-0"></div>
1064
+ </div>
1065
+ <div class="filas">
1066
+ <div class="item item-0"></div>
1067
+ </div>
1068
+ <div class="filas">
1069
+ <div class="item item-0"></div>
1070
+ </div>
1071
+ <div class="filas">
1072
+ <div class="item item-0"></div>
1073
+ </div>
1074
+ <div class="filas">
1075
+ <div class="item item-0"></div>
1076
+ </div>
1077
+ <div class="filas">
1078
+ <div class="item item-0"></div>
1079
+ </div>
1080
+ <div class="filas">
1081
+ <div class="item item-0"></div>
1082
+ </div>
1083
+ </div>
1084
+ </div>
1085
+ <div>
1086
+ <div class=" ">
1087
+ <strong> MR- </strong>
1088
+ </div>
1089
+ <div class="marginbox-right">
1090
+ <div class="row">
1091
+ <div class="col">
1092
+ <div class="filas">
1093
+ <div class="item item-0"></div>
1094
+ </div>
1095
+ <div class="filas">
1096
+ <div class="item item-0"></div>
1097
+ </div>
1098
+ <div class="filas">
1099
+ <div class="item item-0"></div>
1100
+ </div>
1101
+ <div class="filas">
1102
+ <div class="item item-0"></div>
1103
+ </div>
1104
+ <div class="filas">
1105
+ <div class="item item-0"></div>
1106
+ </div>
1107
+ <div class="filas">
1108
+ <div class="item item-0"></div>
1109
+ </div>
1110
+ <div class="filas">
1111
+ <div class="item item-0"></div>
1112
+ </div>
1113
+ <div class="filas">
1114
+ <div class="item item-0"></div>
1115
+ </div>
1116
+ <div class="filas">
1117
+ <div class="item item-0"></div>
1118
+ </div>
1119
+ <div class="filas">
1120
+ <div class="item item-0"></div>
1121
+ </div>
1122
+ <div class="filas">
1123
+ <div class="item item-0"></div>
1124
+ </div>
1125
+ <div class="filas">
1126
+ <div class="item item-0"></div>
1127
+ </div>
1128
+ <div class="filas">
1129
+ <div class="item item-0"></div>
1130
+ </div>
1131
+ <div class="filas">
1132
+ <div class="item item-0"></div>
1133
+ </div>
1134
+ <div class="filas">
1135
+ <div class="item item-0"></div>
1136
+ </div>
1137
+ <div class="filas">
1138
+ <div class="item item-0"></div>
1139
+ </div>
1140
+ <div class="filas">
1141
+ <div class="item item-0"></div>
1142
+ </div>
1143
+ </div>
1144
+ </div>
1145
+ </div>
1146
+ </div>
1147
+ <div>
1148
+ <div class=" ">
1149
+ <strong> ML-</strong>
1150
+ </div>
1151
+ <div class="marginbox-left">
1152
+ <div class="row">
1153
+ <div class="col">
1154
+ <div class="filas">
1155
+ <div class="item item-0"></div>
1156
+ </div>
1157
+ <div class="filas">
1158
+ <div class="item item-0"></div>
1159
+ </div>
1160
+ <div class="filas">
1161
+ <div class="item item-0"></div>
1162
+ </div>
1163
+ <div class="filas">
1164
+ <div class="item item-0"></div>
1165
+ </div>
1166
+ <div class="filas">
1167
+ <div class="item item-0"></div>
1168
+ </div>
1169
+ <div class="filas">
1170
+ <div class="item item-0"></div>
1171
+ </div>
1172
+ <div class="filas">
1173
+ <div class="item item-0"></div>
1174
+ </div>
1175
+ <div class="filas">
1176
+ <div class="item item-0"></div>
1177
+ </div>
1178
+ <div class="filas">
1179
+ <div class="item item-0"></div>
1180
+ </div>
1181
+ <div class="filas">
1182
+ <div class="item item-0"></div>
1183
+ </div>
1184
+ <div class="filas">
1185
+ <div class="item item-0"></div>
1186
+ </div>
1187
+ <div class="filas">
1188
+ <div class="item item-0"></div>
1189
+ </div>
1190
+ <div class="filas">
1191
+ <div class="item item-0"></div>
1192
+ </div>
1193
+ <div class="filas">
1194
+ <div class="item item-0"></div>
1195
+ </div>
1196
+ <div class="filas">
1197
+ <div class="item item-0"></div>
1198
+ </div>
1199
+ <div class="filas">
1200
+ <div class="item item-0"></div>
1201
+ </div>
1202
+ <div class="filas">
1203
+ <div class="item item-0"></div>
1204
+ </div>
1205
+ </div>
1206
+ </div>
1207
+ </div>
1208
+ </div>
1209
+ <div>
1210
+ <div class=" ">
1211
+ <strong> PB-</strong>
1212
+ </div>
1213
+ <div class="paddingbox-bottom">
1214
+ <div class="row">
1215
+ <div class="col">
1216
+ <div class="filas">
1217
+ <div class="item item-0"></div>
1218
+ </div>
1219
+ <div class="filas">
1220
+ <div class="item item-0"></div>
1221
+ </div>
1222
+ <div class="filas">
1223
+ <div class="item item-0"></div>
1224
+ </div>
1225
+ <div class="filas">
1226
+ <div class="item item-0"></div>
1227
+ </div>
1228
+ <div class="filas">
1229
+ <div class="item item-0"></div>
1230
+ </div>
1231
+ <div class="filas">
1232
+ <div class="item item-0"></div>
1233
+ </div>
1234
+ <div class="filas">
1235
+ <div class="item item-0"></div>
1236
+ </div>
1237
+ <div class="filas">
1238
+ <div class="item item-0"></div>
1239
+ </div>
1240
+ <div class="filas">
1241
+ <div class="item item-0"></div>
1242
+ </div>
1243
+ <div class="filas">
1244
+ <div class="item item-0"></div>
1245
+ </div>
1246
+ <div class="filas">
1247
+ <div class="item item-0"></div>
1248
+ </div>
1249
+ <div class="filas">
1250
+ <div class="item item-0"></div>
1251
+ </div>
1252
+ <div class="filas">
1253
+ <div class="item item-0"></div>
1254
+ </div>
1255
+ <div class="filas">
1256
+ <div class="item item-0"></div>
1257
+ </div>
1258
+ <div class="filas">
1259
+ <div class="item item-0"></div>
1260
+ </div>
1261
+ <div class="filas">
1262
+ <div class="item item-0"></div>
1263
+ </div>
1264
+ <div class="filas">
1265
+ <div class="item item-0"></div>
1266
+ </div>
1267
+ </div>
1268
+ </div>
1269
+ </div>
1270
+ </div>
1271
+ <div>
1272
+ <div class=" ">
1273
+ <strong> PT- </strong>
1274
+ </div>
1275
+ <div class="paddingbox-top">
1276
+ <div class="row">
1277
+ <div class="col">
1278
+ <div class="filas">
1279
+ <div class="item item-0"></div>
1280
+ </div>
1281
+ <div class="filas">
1282
+ <div class="item item-0"></div>
1283
+ </div>
1284
+ <div class="filas">
1285
+ <div class="item item-0"></div>
1286
+ </div>
1287
+ <div class="filas">
1288
+ <div class="item item-0"></div>
1289
+ </div>
1290
+ <div class="filas">
1291
+ <div class="item item-0"></div>
1292
+ </div>
1293
+ <div class="filas">
1294
+ <div class="item item-0"></div>
1295
+ </div>
1296
+ <div class="filas">
1297
+ <div class="item item-0"></div>
1298
+ </div>
1299
+ <div class="filas">
1300
+ <div class="item item-0"></div>
1301
+ </div>
1302
+ <div class="filas">
1303
+ <div class="item item-0"></div>
1304
+ </div>
1305
+ <div class="filas">
1306
+ <div class="item item-0"></div>
1307
+ </div>
1308
+ <div class="filas">
1309
+ <div class="item item-0"></div>
1310
+ </div>
1311
+ <div class="filas">
1312
+ <div class="item item-0"></div>
1313
+ </div>
1314
+ <div class="filas">
1315
+ <div class="item item-0"></div>
1316
+ </div>
1317
+ <div class="filas">
1318
+ <div class="item item-0"></div>
1319
+ </div>
1320
+ <div class="filas">
1321
+ <div class="item item-0"></div>
1322
+ </div>
1323
+ <div class="filas">
1324
+ <div class="item item-0"></div>
1325
+ </div>
1326
+ <div class="filas">
1327
+ <div class="item item-0"></div>
1328
+ </div>
1329
+ </div>
1330
+ </div>
1331
+ </div>
1332
+ </div>
1333
+ <div>
1334
+ <div class=" ">
1335
+ <strong> PX- </strong>
1336
+ </div>
1337
+ <div class="paddingbox-x">
1338
+ <div class="row">
1339
+ <div class="col">
1340
+ <div class="filas">
1341
+ <div class="item item-0"></div>
1342
+ </div>
1343
+ <div class="filas">
1344
+ <div class="item item-0"></div>
1345
+ </div>
1346
+ <div class="filas">
1347
+ <div class="item item-0"></div>
1348
+ </div>
1349
+ <div class="filas">
1350
+ <div class="item item-0"></div>
1351
+ </div>
1352
+ <div class="filas">
1353
+ <div class="item item-0"></div>
1354
+ </div>
1355
+ <div class="filas">
1356
+ <div class="item item-0"></div>
1357
+ </div>
1358
+ <div class="filas">
1359
+ <div class="item item-0"></div>
1360
+ </div>
1361
+ <div class="filas">
1362
+ <div class="item item-0"></div>
1363
+ </div>
1364
+ <div class="filas">
1365
+ <div class="item item-0"></div>
1366
+ </div>
1367
+ <div class="filas">
1368
+ <div class="item item-0"></div>
1369
+ </div>
1370
+ <div class="filas">
1371
+ <div class="item item-0"></div>
1372
+ </div>
1373
+ <div class="filas">
1374
+ <div class="item item-0"></div>
1375
+ </div>
1376
+ <div class="filas">
1377
+ <div class="item item-0"></div>
1378
+ </div>
1379
+ <div class="filas">
1380
+ <div class="item item-0"></div>
1381
+ </div>
1382
+ <div class="filas">
1383
+ <div class="item item-0"></div>
1384
+ </div>
1385
+ <div class="filas">
1386
+ <div class="item item-0"></div>
1387
+ </div>
1388
+ <div class="filas">
1389
+ <div class="item item-0"></div>
1390
+ </div>
1391
+ </div>
1392
+ </div>
1393
+ </div>
1394
+ </div>
1395
+ <div>
1396
+ <div class=" ">
1397
+ <strong> PY- </strong>
1398
+ </div>
1399
+ <div class="paddingbox-y">
1400
+ <div class="row">
1401
+ <div class="col">
1402
+ <div class="filas">
1403
+ <div class="item item-0"></div>
1404
+ </div>
1405
+ <div class="filas">
1406
+ <div class="item item-0"></div>
1407
+ </div>
1408
+ <div class="filas">
1409
+ <div class="item item-0"></div>
1410
+ </div>
1411
+ <div class="filas">
1412
+ <div class="item item-0"></div>
1413
+ </div>
1414
+ <div class="filas">
1415
+ <div class="item item-0"></div>
1416
+ </div>
1417
+ <div class="filas">
1418
+ <div class="item item-0"></div>
1419
+ </div>
1420
+ <div class="filas">
1421
+ <div class="item item-0"></div>
1422
+ </div>
1423
+ <div class="filas">
1424
+ <div class="item item-0"></div>
1425
+ </div>
1426
+ <div class="filas">
1427
+ <div class="item item-0"></div>
1428
+ </div>
1429
+ <div class="filas">
1430
+ <div class="item item-0"></div>
1431
+ </div>
1432
+ <div class="filas">
1433
+ <div class="item item-0"></div>
1434
+ </div>
1435
+ <div class="filas">
1436
+ <div class="item item-0"></div>
1437
+ </div>
1438
+ <div class="filas">
1439
+ <div class="item item-0"></div>
1440
+ </div>
1441
+ <div class="filas">
1442
+ <div class="item item-0"></div>
1443
+ </div>
1444
+ <div class="filas">
1445
+ <div class="item item-0"></div>
1446
+ </div>
1447
+ <div class="filas">
1448
+ <div class="item item-0"></div>
1449
+ </div>
1450
+ <div class="filas">
1451
+ <div class="item item-0"></div>
1452
+ </div>
1453
+ </div>
1454
+ </div>
1455
+ </div>
1456
+ </div>
1457
+ <div>
1458
+ <div class=" ">
1459
+ <strong> PR- </strong>
1460
+ </div>
1461
+ <div class="paddingbox-right">
1462
+ <div class="row">
1463
+ <div class="col">
1464
+ <div class="filas">
1465
+ <div class="item item-0"></div>
1466
+ </div>
1467
+ <div class="filas">
1468
+ <div class="item item-0"></div>
1469
+ </div>
1470
+ <div class="filas">
1471
+ <div class="item item-0"></div>
1472
+ </div>
1473
+ <div class="filas">
1474
+ <div class="item item-0"></div>
1475
+ </div>
1476
+ <div class="filas">
1477
+ <div class="item item-0"></div>
1478
+ </div>
1479
+ <div class="filas">
1480
+ <div class="item item-0"></div>
1481
+ </div>
1482
+ <div class="filas">
1483
+ <div class="item item-0"></div>
1484
+ </div>
1485
+ <div class="filas">
1486
+ <div class="item item-0"></div>
1487
+ </div>
1488
+ <div class="filas">
1489
+ <div class="item item-0"></div>
1490
+ </div>
1491
+ <div class="filas">
1492
+ <div class="item item-0"></div>
1493
+ </div>
1494
+ <div class="filas">
1495
+ <div class="item item-0"></div>
1496
+ </div>
1497
+ <div class="filas">
1498
+ <div class="item item-0"></div>
1499
+ </div>
1500
+ <div class="filas">
1501
+ <div class="item item-0"></div>
1502
+ </div>
1503
+ <div class="filas">
1504
+ <div class="item item-0"></div>
1505
+ </div>
1506
+ <div class="filas">
1507
+ <div class="item item-0"></div>
1508
+ </div>
1509
+ <div class="filas">
1510
+ <div class="item item-0"></div>
1511
+ </div>
1512
+ <div class="filas">
1513
+ <div class="item item-0"></div>
1514
+ </div>
1515
+ </div>
1516
+ </div>
1517
+ </div>
1518
+ </div>
1519
+ <div>
1520
+ <div class=" ">
1521
+ <strong> PL-</strong>
1522
+ </div>
1523
+ <div class="paddingbox-left">
1524
+ <div class="row">
1525
+ <div class="col">
1526
+ <div class="filas">
1527
+ <div class="item item-0"></div>
1528
+ </div>
1529
+ <div class="filas">
1530
+ <div class="item item-0"></div>
1531
+ </div>
1532
+ <div class="filas">
1533
+ <div class="item item-0"></div>
1534
+ </div>
1535
+ <div class="filas">
1536
+ <div class="item item-0"></div>
1537
+ </div>
1538
+ <div class="filas">
1539
+ <div class="item item-0"></div>
1540
+ </div>
1541
+ <div class="filas">
1542
+ <div class="item item-0"></div>
1543
+ </div>
1544
+ <div class="filas">
1545
+ <div class="item item-0"></div>
1546
+ </div>
1547
+ <div class="filas">
1548
+ <div class="item item-0"></div>
1549
+ </div>
1550
+ <div class="filas">
1551
+ <div class="item item-0"></div>
1552
+ </div>
1553
+ <div class="filas">
1554
+ <div class="item item-0"></div>
1555
+ </div>
1556
+ <div class="filas">
1557
+ <div class="item item-0"></div>
1558
+ </div>
1559
+ <div class="filas">
1560
+ <div class="item item-0"></div>
1561
+ </div>
1562
+ <div class="filas">
1563
+ <div class="item item-0"></div>
1564
+ </div>
1565
+ <div class="filas">
1566
+ <div class="item item-0"></div>
1567
+ </div>
1568
+ <div class="filas">
1569
+ <div class="item item-0"></div>
1570
+ </div>
1571
+ <div class="filas">
1572
+ <div class="item item-0"></div>
1573
+ </div>
1574
+ <div class="filas">
1575
+ <div class="item item-0"></div>
1576
+ </div>
1577
+ </div>
1578
+ </div>
1579
+ </div>
1580
+ </div>
1581
+ </div>
1582
+ </section>
1583
+ <b id="grids">Columns</b>
1584
+ <section>
1585
+ <div class="row">
1586
+ <div class="col-xs-12">
1587
+ <div class="row">
1588
+ <div class="col-xs-1">
1589
+ <div class="bg-docs rat-3-2">
1590
+ <div class="content"> 1/12 </div>
1591
+ </div>
1592
+ </div>
1593
+ <div class="col-xs-1">
1594
+ <div class="bg-docs rat-3-2">
1595
+ <div class="content"> 1/12 </div>
1596
+ </div>
1597
+ </div>
1598
+ <div class="col-xs-1">
1599
+ <div class="bg-docs rat-3-2">
1600
+ <div class="content"> 1/12 </div>
1601
+ </div>
1602
+ </div>
1603
+ <div class="col-xs-1">
1604
+ <div class="bg-docs rat-3-2">
1605
+ <div class="content"> 1/12 </div>
1606
+ </div>
1607
+ </div>
1608
+ <div class="col-xs-1">
1609
+ <div class="bg-docs rat-3-2">
1610
+ <div class="content"> 1/12 </div>
1611
+ </div>
1612
+ </div>
1613
+ <div class="col-xs-1">
1614
+ <div class="bg-docs rat-3-2">
1615
+ <div class="content"> 1/12 </div>
1616
+ </div>
1617
+ </div>
1618
+ <div class="col-xs-1">
1619
+ <div class="bg-docs rat-3-2">
1620
+ <div class="content"> 1/12 </div>
1621
+ </div>
1622
+ </div>
1623
+ <div class="col-xs-1">
1624
+ <div class="bg-docs rat-3-2">
1625
+ <div class="content"> 1/12 </div>
1626
+ </div>
1627
+ </div>
1628
+ <div class="col-xs-1">
1629
+ <div class="bg-docs rat-3-2">
1630
+ <div class="content"> 1/12 </div>
1631
+ </div>
1632
+ </div>
1633
+ <div class="col-xs-1">
1634
+ <div class="bg-docs rat-3-2">
1635
+ <div class="content"> 1/12 </div>
1636
+ </div>
1637
+ </div>
1638
+ <div class="col-xs-1">
1639
+ <div class="bg-docs rat-3-2">
1640
+ <div class="content"> 1/12 </div>
1641
+ </div>
1642
+ </div>
1643
+ <div class="col-xs-1">
1644
+ <div class="bg-docs rat-3-2">
1645
+ <div class="content"> 1/12 </div>
1646
+ </div>
1647
+ </div>
1648
+ </div>
1649
+ <b>Col 24</b>
1650
+ <div class="row">
1651
+ <div class="col-xl-1">
1652
+ <div class="bg-docs p-16"> 1 </div>
1653
+ </div>
1654
+ <div class="col-xl-2">
1655
+ <div class="bg-docs p-16"> col-xl-2 </div>
1656
+ </div>
1657
+ <div class="col-xl-3">
1658
+ <div class="bg-docs p-16"> col-xl-3 </div>
1659
+ </div>
1660
+ <div class="col-xl-4">
1661
+ <div class="bg-docs p-16"> col-xl-4</div>
1662
+ </div>
1663
+ <div class="col-xl-5">
1664
+ <div class="bg-docs p-16"> col-xl-5 </div>
1665
+ </div>
1666
+ <div class="col-xl-6">
1667
+ <div class="bg-docs p-16"> col-xl-6 </div>
1668
+ </div>
1669
+ <div class="col-xl-7">
1670
+ <div class="bg-docs p-16"> col-xl-7 </div>
1671
+ </div>
1672
+ <div class="col-xl-8">
1673
+ <div class="bg-docs p-16"> col-xl-8 </div>
1674
+ </div>
1675
+ <div class="col-xl-9">
1676
+ <div class="bg-docs p-16"> col-xl-9</div>
1677
+ </div>
1678
+ <div class="col-xl-10">
1679
+ <div class="bg-docs p-16"> col-xl-10 </div>
1680
+ </div>
1681
+ <div class="col-xl-11">
1682
+ <div class="bg-docs p-16"> col-xl-11 </div>
1683
+ </div>
1684
+ <div class="col-xl-12">
1685
+ <div class="bg-docs p-16"> col-xl-12 </div>
1686
+ </div>
1687
+ <div class="col-xl-24">
1688
+ <div class="bg-docs p-16">
1689
+ col-xl-24
1690
+ </div>
1691
+ </div>
1692
+ </div>
1693
+ </div>
1694
+ </div>
1695
+ </section>
1696
+ <b id="ratios">Ratios</b>
1697
+ <p> @include ratio(16, 9); </p>
1698
+ <section>
1699
+ <div class="row">
1700
+ <div class="col">
1701
+ <div class="row">
1702
+ <div class="col-xs-12">
1703
+ <div class="mini-box rat-main">
1704
+ <div class="content">
1705
+ <span> .rat-main</span> pt: 133.25%
1706
+ </div>
1707
+ </div>
1708
+ <div class="mini-box rat-2-3">
1709
+ <div class="content">
1710
+ <span> .rat-2-3</span> pt: 150% --real , pero ahora falso
1711
+ </div>
1712
+ </div>
1713
+ <div class="mini-box rat-3-4">
1714
+ <div class="content">
1715
+ <span> .rat-3-4</span> pt: 133.33333%%
1716
+ </div>
1717
+ </div>
1718
+ <div class="mini-box rat-1-1">
1719
+ <div class="content">
1720
+ <span> .rat-1-1</span> pt: 100%
1721
+ </div>
1722
+ </div>
1723
+ <div class="mini-box rat-4-3">
1724
+ <div class="content">
1725
+ <span> .rat-4-3</span> pt: 75%%
1726
+ </div>
1727
+ </div>
1728
+ <div class="mini-box rat-3-2">
1729
+ <div class="content">
1730
+ <span> .rat-3-2</span> pt: 66.66667%
1731
+ </div>
1732
+ </div>
1733
+ <div class="mini-box rat-16-9">
1734
+ <div class="content">
1735
+ <span> .rat-16-9</span>pt: 56.25%
1736
+ </div>
1737
+ </div>
1738
+ <div class="mini-box rat-2-1">
1739
+ <div class="content">
1740
+ <span> .rat-2-1</span> pt: 50%
1741
+ </div>
1742
+ </div>
1743
+ <div class="mini-box rat-21-9">
1744
+ <div class="content">
1745
+ <span> .rat-21-9</span> pt:42.85714%
1746
+ </div>
1747
+ </div>
1748
+ </div>
1749
+ </div>
1750
+ </div>
1751
+ </div>
1752
+ </section>
1753
+ <b>Buttons</b>
1754
+ <section id="buttons">
1755
+ <div class="row">
1756
+ <div class="col-xs-12">
1757
+ <div class="pre-show">
1758
+ <button class="btn"> .btn</button>
1759
+ </div>
1760
+ </div>
1761
+ </div>
1762
+ <b>Variants Buttons </b>
1763
+ <div class="grid-10-docs ">
1764
+ <div class="text-12-r"> NORMAL</div>
1765
+ <div><button class="mb-8 btn btn-primary">btn-primary</button></div>
1766
+ <div><button class="mb-8 btn btn-limited">btn-limited</button></div>
1767
+ <div><button class="mb-8 btn btn-feel">btn-feel</button></div>
1768
+ <div><button class="mb-8 btn btn-trans">btn-trans</button></div>
1769
+ <div><button class="mb-8 btn btn-secondary">btn-secondary</button></div>
1770
+ <div><button class="mb-8 btn btn-secondary-feel">btn-secondary-feel</button></div>
1771
+ <div><button class="mb-8 btn btn-phantom">btn-phantom</button></div>
1772
+ <div><button class="mb-8 btn btn-text">btn-text</button></div>
1773
+ <div><button class="mb-8 btn btn-link">btn-link</button></div>
1774
+ <div class="text-12-r"> HOVER</div>
1775
+ <div><button class="mb-8 btn hover btn-primary">btn-primary</button></div>
1776
+ <div><button class="mb-8 btn hover btn-limited">btn-limited</button></div>
1777
+ <div><button class="mb-8 btn hover btn-feel">btn-feel</button></div>
1778
+ <div><button class="mb-8 btn hover btn-trans">btn-trans</button></div>
1779
+ <div><button class="mb-8 btn hover btn-secondary">btn-secondary</button></div>
1780
+ <div><button class="mb-8 btn hover btn-secondary-feel">btn-secondary-feel</button></div>
1781
+ <div><button class="mb-8 btn hover btn-phantom">btn-phantom</button></div>
1782
+ <div><button class="mb-8 btn hover btn-text">btn-text</button></div>
1783
+ <div><button class="mb-8 btn hover btn-link">btn-link</button></div>
1784
+ <div class="text-12-r"> DISABLED</div>
1785
+ <div><button class="mb-8 btn disabled btn-primary">btn-primary</button></div>
1786
+ <div><button class="mb-8 btn disabled btn-limited">btn-limited</button></div>
1787
+ <div><button class="mb-8 btn disabled btn-feel">btn-feel</button></div>
1788
+ <div><button class="mb-8 btn disabled btn-trans">btn-trans</button></div>
1789
+ <div><button class="mb-8 btn disabled btn-secondary">btn-secondary</button></div>
1790
+ <div><button class="mb-8 btn disabled btn-secondary-feel">btn-secondary-feel</button></div>
1791
+ <div><button class="mb-8 btn disabled btn-phantom">btn-phantom</button></div>
1792
+ <div><button class="mb-8 btn disabled btn-text">btn-text</button></div>
1793
+ <div><button class="mb-8 btn disabled btn-link">btn-link</button></div>
1794
+ </div>
1795
+ <div class="bg-dark grid-10-docs has-light ">
1796
+ <div class="text-12-r"> NORMAL</div>
1797
+ <div><button class="mb-8 btn btn-primary">btn-primary</button></div>
1798
+ <div><button class="mb-8 btn btn-limited">btn-limited</button></div>
1799
+ <div><button class="mb-8 btn btn-feel">btn-feel</button></div>
1800
+ <div><button class="mb-8 btn btn-trans">btn-trans</button></div>
1801
+ <div><button class="mb-8 btn btn-secondary">btn-secondary</button></div>
1802
+ <div><button class="mb-8 btn btn-secondary-feel">btn-secondary-feel</button></div>
1803
+ <div><button class="mb-8 btn btn-phantom">btn-phantom</button></div>
1804
+ <div><button class="mb-8 btn btn-text">btn-text</button></div>
1805
+ <div><button class="mb-8 btn btn-link">btn-link</button></div>
1806
+ <div class="text-12-r"> HOVER</div>
1807
+ <div><button class="mb-8 btn hover btn-primary">btn-primary</button></div>
1808
+ <div><button class="mb-8 btn hover btn-limited">btn-limited</button></div>
1809
+ <div><button class="mb-8 btn hover btn-feel">btn-feel</button></div>
1810
+ <div><button class="mb-8 btn hover btn-trans">btn-trans</button></div>
1811
+ <div><button class="mb-8 btn hover btn-secondary">btn-secondary</button></div>
1812
+ <div><button class="mb-8 btn hover btn-secondary-feel">btn-secondary-feel</button></div>
1813
+ <div><button class="mb-8 btn hover btn-phantom">btn-phantom</button></div>
1814
+ <div><button class="mb-8 btn hover btn-text">btn-text</button></div>
1815
+ <div><button class="mb-8 btn hover btn-link">btn-link</button></div>
1816
+ <div class="text-12-r"> DISABLED</div>
1817
+ <div><button class="mb-8 btn disabled btn-primary">btn-primary</button></div>
1818
+ <div><button class="mb-8 btn disabled btn-limited">btn-limited</button></div>
1819
+ <div><button class="mb-8 btn disabled btn-feel">btn-feel</button></div>
1820
+ <div><button class="mb-8 btn disabled btn-trans">btn-trans</button></div>
1821
+ <div><button class="mb-8 btn disabled btn-secondary">btn-secondary</button></div>
1822
+ <div><button class="mb-8 btn disabled btn-secondary-feel">btn-secondary-feel</button></div>
1823
+ <div><button class="mb-8 btn disabled btn-phantom">btn-phantom</button></div>
1824
+ <div><button class="mb-8 btn disabled btn-text">btn-text</button></div>
1825
+ <div><button class="mb-8 btn disabled btn-link">btn-link</button></div>
1826
+ </div>
1827
+ <b> Tamaños </b>
1828
+ <div class="mb-40">
1829
+ <div class="row">
1830
+ <div class="col-xs-3">
1831
+ <div class="btn btn-primary btn--mini mb-24 "> btn--mini </div>
1832
+ </div>
1833
+ <div class="col-xs-3">
1834
+ <div class="btn btn-primary btn--xlarge mb-24 "> btn--xlarge </div>
1835
+ </div>
1836
+ <div class="col-xs-3">
1837
+ <div class="btn btn-primary btn--full mb-24 "> btn--full </div>
1838
+ </div>
1839
+ <div class="col-xs-3">
1840
+ <div class="btn btn-primary btn--mini-rd"> btn--mini-rd </div>
1841
+ </div>
1842
+ </div>
1843
+ <div class="row">
1844
+ <div class="col-xs-12">
1845
+ <div class="pre-show">
1846
+ </div>
1847
+ </div>
1848
+ </div>
1849
+ </div>
1850
+ <b> Icons Buttons </b>
1851
+ <div class="grid-4">
1852
+ <div class="btn btn-primary btn--small has-ico-pre">
1853
+ <svg-icon src="question">
1854
+ <div class="ico-pre">
1855
+ <svg width="16" height="16" viewBox="0 0 16 16">
1856
+ <g stroke-width="1" fill="none" stroke="#212121">
1857
+ <circle cx="8" cy="8" r="7.5"></circle>
1858
+ </g>
1859
+ </svg>
1860
+ </div>
1861
+ </svg-icon>
1862
+ ico-pre
1863
+ </div>
1864
+ <div class="btn btn-primary btn--small has-ico-post">
1865
+ <svg-icon src="question">
1866
+ <div class="ico-post">
1867
+ <svg width="16" height="16" viewBox="0 0 16 16">
1868
+ <g stroke-width="1" fill="none" stroke="#212121">
1869
+ <circle cx="8" cy="8" r="7.5"></circle>
1870
+ </g>
1871
+ </svg>
1872
+ </div>
1873
+ </svg-icon> ico-post
1874
+ </div>
1875
+ <div class="btn btn-primary btn--small has-ico-pre disabled">
1876
+ <svg-icon src="question">
1877
+ <div class="ico-post">
1878
+ <svg width="16" height="16" viewBox="0 0 16 16">
1879
+ <g stroke-width="1" fill="none" stroke="#212121">
1880
+ <circle cx="8" cy="8" r="7.5"></circle>
1881
+ </g>
1882
+ </svg>
1883
+ </div>
1884
+ </svg-icon> ico-pre
1885
+ </div>
1886
+ <div class="btn btn-primary btn--small has-ico-post disabled">
1887
+ <svg-icon src="question">
1888
+ <div class="ico-post">
1889
+ <svg width="16" height="16" viewBox="0 0 16 16">
1890
+ <g stroke-width="1" fill="none" stroke="#212121">
1891
+ <circle cx="8" cy="8" r="7.5"></circle>
1892
+ </g>
1893
+ </svg>
1894
+ </div>
1895
+ </svg-icon> ico-post
1896
+ </div>
1897
+ <div class="btn btn-secondary btn--small has-ico-pre">
1898
+ <svg-icon src="question">
1899
+ <div class="ico-pre">
1900
+ <svg width="16" height="16" viewBox="0 0 16 16">
1901
+ <g stroke-width="1" fill="none" stroke="#212121">
1902
+ <circle cx="8" cy="8" r="7.5"></circle>
1903
+ </g>
1904
+ </svg>
1905
+ </div>
1906
+ </svg-icon>ico-pre
1907
+ </div>
1908
+ <div class="btn btn-secondary btn--small has-ico-post">
1909
+ <svg-icon src="question">
1910
+ <div class="ico-post">
1911
+ <svg width="16" height="16" viewBox="0 0 16 16">
1912
+ <g stroke-width="1" fill="none" stroke="#212121">
1913
+ <circle cx="8" cy="8" r="7.5"></circle>
1914
+ </g>
1915
+ </svg>
1916
+ </div>
1917
+ </svg-icon>ico-post
1918
+ </div>
1919
+ <div class="btn btn-secondary btn--small has-ico-pre guide-hover">
1920
+ <svg-icon src="question">
1921
+ <div class="ico-pre">
1922
+ <svg width="16" height="16" viewBox="0 0 16 16">
1923
+ <g stroke-width="1" fill="none" stroke="#212121">
1924
+ <circle cx="8" cy="8" r="7.5"></circle>
1925
+ </g>
1926
+ </svg>
1927
+ </div>
1928
+ </svg-icon> Action
1929
+ </div>
1930
+ <div class="btn btn-secondary btn--small has-ico-post guide-hover">
1931
+ <svg-icon src="question">
1932
+ <div class="ico-post">
1933
+ <svg width="16" height="16" viewBox="0 0 16 16">
1934
+ <g stroke-width="1" fill="none" stroke="#212121">
1935
+ <circle cx="8" cy="8" r="7.5"></circle>
1936
+ </g>
1937
+ </svg>
1938
+ </div>
1939
+ </svg-icon> Action
1940
+ </div>
1941
+ <div class="btn btn-secondary btn--medium has-ico-center mb-24">
1942
+ <svg-icon src="question">
1943
+ <div> <svg width="16" height="16" viewBox="0 0 16 16">
1944
+ <g stroke-width="1" fill="none" stroke="#212121">
1945
+ <circle cx="8" cy="8" r="7.5"></circle>
1946
+ </g>
1947
+ </svg>
1948
+ </div>
1949
+ </svg-icon> Action
1950
+ </div>
1951
+ <div class="btn btn-secondary btn--medium has-ico-center">
1952
+ Action
1953
+ <svg-icon src="question">
1954
+ <div> <svg width="16" height="16" viewBox="0 0 16 16">
1955
+ <g stroke-width="1" fill="none" stroke="#212121">
1956
+ <circle cx="8" cy="8" r="7.5"></circle>
1957
+ </g>
1958
+ </svg>
1959
+ </div>
1960
+ </svg-icon>
1961
+ </div>
1962
+ </div>
1963
+ <b> btns </b>
1964
+ <div class="row mb-40">
1965
+ <div class="col-xs-12">
1966
+ <div class="pre-show">
1967
+ <div class="row">
1968
+ <div class="col-xs-12">
1969
+ <div class="btns">
1970
+ <div class="btn btn-primary"> Button </div>
1971
+ <div class="btn btn-secondary"> Button</div>
1972
+ </div>
1973
+ </div>
1974
+ </div>
1975
+ </div>
1976
+ </div>
1977
+ </div>
1978
+ <b> btn-group-inline </b>
1979
+ <div class="row mb-40">
1980
+ <div class="col-xs-12">
1981
+ <div class="pre-show">
1982
+ <div class="btn-group-inline">
1983
+ <div class="btn btn-secondary btn--medium"> Button 1 </div>
1984
+ <div class="btn btn-secondary btn--medium"> Button 2 </div>
1985
+ </div>
1986
+ </div>
1987
+ </div>
1988
+ </div>
1989
+ <b> btn-group </b>
1990
+ <div class="row mb-40">
1991
+ <div class="col-xs-12">
1992
+ <div class="pre-show">
1993
+ <div class="btn-group">
1994
+ <button class="btn btn-secondary btn--small"> small </button>
1995
+ <button class="btn btn-secondary btn--medium"> medium </button>
1996
+ <button class="btn btn-secondary btn--large"> large </button>
1997
+ </div>
1998
+ </div>
1999
+ </div>
2000
+ </div>
2001
+ <b>btn-separate</b>
2002
+ <div class="row ">
2003
+ <div class="col-xs-6">
2004
+ <button class="btn btn-secondary btn--medium btn-separate mb-16">
2005
+ <span>Entrar</span>
2006
+ <svg-icon>
2007
+ <div>
2008
+ <svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
2009
+ <path fill-rule="evenodd" clip-rule="evenodd"
2010
+ d="M0.5 8.81885C0.5 4.67671 3.85786 1.31885 8 1.31885C12.1421 1.31885 15.5 4.67671 15.5 8.81885C15.5 12.961 12.1421 16.3188 8 16.3188C3.85786 16.3188 0.5 12.961 0.5 8.81885ZM8 2.31885C4.41015 2.31885 1.5 5.229 1.5 8.81885C1.5 12.4087 4.41015 15.3188 8 15.3188C11.5899 15.3188 14.5 12.4087 14.5 8.81885C14.5 5.229 11.5899 2.31885 8 2.31885Z"
2011
+ fill="#292929" />
2012
+ <path fill-rule="evenodd" clip-rule="evenodd"
2013
+ d="M6.48105 2.01307C6.90284 1.5968 7.4167 1.31885 8 1.31885H8.5V2.31885H8C7.75487 2.31885 7.47952 2.43265 7.18348 2.72482C6.88529 3.01911 6.59382 3.46974 6.33825 4.06606C5.82788 5.25692 5.5 6.93694 5.5 8.81885C5.5 10.7008 5.82788 12.3808 6.33825 13.5716C6.59382 14.168 6.88529 14.6186 7.18348 14.9129C7.47952 15.205 7.75487 15.3188 8 15.3188H8.5V16.3188H8C7.4167 16.3188 6.90284 16.0409 6.48105 15.6246C6.06141 15.2105 5.70643 14.636 5.41911 13.9656C4.84369 12.6229 4.5 10.8029 4.5 8.81885C4.5 6.83476 4.84369 5.01478 5.41911 3.67214C5.70643 3.00171 6.06141 2.42722 6.48105 2.01307Z"
2014
+ fill="#292929" />
2015
+ <path fill-rule="evenodd" clip-rule="evenodd"
2016
+ d="M9.51895 2.01307C9.09716 1.5968 8.5833 1.31885 8 1.31885H7.5V2.31885H8C8.24513 2.31885 8.52048 2.43265 8.81652 2.72482C9.11471 3.01911 9.40618 3.46974 9.66175 4.06606C10.1721 5.25692 10.5 6.93694 10.5 8.81885C10.5 10.7008 10.1721 12.3808 9.66175 13.5716C9.40618 14.168 9.11471 14.6186 8.81652 14.9129C8.52048 15.205 8.24513 15.3188 8 15.3188H7.5V16.3188H8C8.5833 16.3188 9.09716 16.0409 9.51895 15.6246C9.93859 15.2105 10.2936 14.636 10.5809 13.9656C11.1563 12.6229 11.5 10.8029 11.5 8.81885C11.5 6.83476 11.1563 5.01478 10.5809 3.67214C10.2936 3.00171 9.93859 2.42722 9.51895 2.01307Z"
2017
+ fill="#292929" />
2018
+ <path fill-rule="evenodd" clip-rule="evenodd" d="M15 9.31885H1V8.31885H15V9.31885Z"
2019
+ fill="#292929" />
2020
+ </svg>
2021
+ </div>
2022
+ </svg-icon>
2023
+ </button>
2024
+ <button class="btn btn-primary btn--small btn-separate">
2025
+ <span>Entrar</span>
2026
+ <svg-icon>
2027
+ <div>
2028
+ <svg width="16" height="16" viewBox="0 0 16 16">
2029
+ <g stroke-width="1" fill="none" stroke="#212121">
2030
+ <circle cx="8" cy="8" r="7.5"></circle>
2031
+ </g>
2032
+ </svg>
2033
+ </div>
2034
+ </svg-icon>
2035
+ </button>
2036
+ </div>
2037
+ </div>
2038
+ </section>
2039
+ <b id="checks">Checkboxes</b>
2040
+ <div class="grid-4">
2041
+ <div class="checkbox-item mb-16">
2042
+ <input id="checkbox_1" name="checkbox_1" type="checkbox" class=" " />
2043
+ <label for="checkbox_1">
2044
+ <i class="icon">
2045
+ <svg width="10" height="8" viewBox="0 0 10 8" fill="none" xmlns="http://www.w3.org/2000/svg">
2046
+ <path fill-rule="evenodd" clip-rule="evenodd" d="M9.05823 0.198273L9.69185 0.801721L3.5417 7.25937L0.308228 3.86422L0.941848 3.26077L3.5417 5.99062L9.05823 0.198273Z" fill="white"/>
2047
+ </svg>
2048
+
2049
+ </i>
2050
+ <span class="p-xs">MUJER</span></label>
2051
+ </div>
2052
+ <div class="checkbox-item">
2053
+ <input id="checkbox_2" name="checkbox_2" type="checkbox" class=" " />
2054
+ <label for="checkbox_2">
2055
+ <i class="icon">
2056
+ <svg width="10" height="8" viewBox="0 0 10 8" fill="none" xmlns="http://www.w3.org/2000/svg">
2057
+ <path fill-rule="evenodd" clip-rule="evenodd" d="M9.05823 0.198273L9.69185 0.801721L3.5417 7.25937L0.308228 3.86422L0.941848 3.26077L3.5417 5.99062L9.05823 0.198273Z" fill="white"/>
2058
+ </svg>
2059
+
2060
+ </i>
2061
+ <span class="p-xs">HOMBRE</span></label>
2062
+ </div>
2063
+ <div class="checkbox-radio"><input id="gender_female" name="gender" formcontrolname="gender" type="radio"
2064
+ value="F" ng-reflect-name="gender" ng-reflect-form-control-name="gender" ng-reflect-value="F"
2065
+ class="ng-touched ng-dirty ng-valid"><label for="gender_female"><i class="ico-radio"></i><span
2066
+ class="p-s">Mujer</span></label></div>
2067
+ <div class="checkbox-radio"><input id="gender_male" name="gender" formcontrolname="gender" type="radio"
2068
+ value="M" ng-reflect-name="gender" ng-reflect-form-control-name="gender" ng-reflect-value="M"
2069
+ class="ng-touched ng-dirty ng-valid"><label for="gender_male"><i class="ico-radio"></i><span
2070
+ class="p-s">Hombre</span></label></div>
2071
+ <div class="checkbox-item-2">
2072
+ <input id="checkbox_3" name="checkbox_3" type="checkbox" class="ng-valid" />
2073
+ <label for="checkbox_3">
2074
+ <div class="checkbox-circle"></div>
2075
+ <span class="p-xs">checkbox-item-2</span>
2076
+ </label>
2077
+ </div>
2078
+ </div>
2079
+ <section>
2080
+ <div class="">
2081
+ <div class="row">
2082
+ <div class="col-xs-6">
2083
+ </div>
2084
+ <div class="col-xs-6">
2085
+ <div class="is-flex mb-24 mt-8 ng-touched ng-dirty ng-valid" ng-reflect-form="[object Object]">
2086
+ <div class="pr-16">
2087
+ </div>
2088
+ <div class="pr-16">
2089
+ </div><!--bindings={
2090
+ "ng-reflect-ng-if": null
2091
+ }-->
2092
+ </div>
2093
+ </div>
2094
+ <div class="col-xs-6">
2095
+ </div>
2096
+ </div>
2097
+ </section>
2098
+ <b id="inputs"> Inputs Básicos </b>
2099
+ <section>
2100
+ <div class="">
2101
+ <div class="row mb-16">
2102
+ <div class="col-xs-12">
2103
+ <div class="row">
2104
+ <div class="col">
2105
+ <label for=""> texto</label>
2106
+ <input type="text" placeholder="text" class="input" />
2107
+ </div>
2108
+ <div class="col is-error">
2109
+ <label for=""> is-error</label>
2110
+ <input type="text" placeholder="text" class="input" />
2111
+ </div>
2112
+ <div class="col ok-input">
2113
+ <label for=""> ok-input</label>
2114
+ <input type="text" placeholder="text" class="input" />
2115
+ </div>
2116
+ <div class="col disabled-input">
2117
+ <label for=""> disabled-input</label>
2118
+ <input type="text" placeholder="text" class="input" />
2119
+ </div>
2120
+ </div>
2121
+ </div>
2122
+ </div>
2123
+ <b>Inputs Animados </b>
2124
+ <div class=" grid-4-docs ">
2125
+ <div class="">
2126
+ <div class="form-input-label-2 ">
2127
+ <input type="email" id="uno" class="input" placeholder="Email address" required="" />
2128
+ <!-- autofocus="" si es necesario-->
2129
+ <label for="uno">Input normal</label>
2130
+ </div>
2131
+ </div>
2132
+ <div class="">
2133
+ <div class="form-input-label-2 has-ico-pre">
2134
+ <input type="email" id="dos" class="input" placeholder="Email address" required="" />
2135
+ <label for="dos">Input pre icon</label>
2136
+ <div class="ico-pre">
2137
+ <svg-icon>
2138
+ <div>
2139
+ <svg width="16" height="16" viewBox="0 0 16 16">
2140
+ <g stroke-width="1" fill="none" stroke="#212121">
2141
+ <circle cx="8" cy="8" r="7.5"></circle>
2142
+ </g>
2143
+ </svg>
2144
+ </div>
2145
+ </svg-icon>
2146
+ </div>
2147
+ </div>
2148
+ </div>
2149
+ <div class="">
2150
+ <div class="form-input-label-2 has-ico-post">
2151
+ <input type="email" id="tres" class="input" placeholder="Email address" required="" />
2152
+ <label for="tres">Input post icon</label>
2153
+ <div class="ico-post">
2154
+ <svg-icon>
2155
+ <div>
2156
+ <svg width="16" height="16" viewBox="0 0 16 16">
2157
+ <g stroke-width="1" fill="none" stroke="#212121">
2158
+ <circle cx="8" cy="8" r="7.5"></circle>
2159
+ </g>
2160
+ </svg>
2161
+ </div>
2162
+ </svg-icon>
2163
+ </div>
2164
+ </div>
2165
+ </div>
2166
+ </div>
2167
+ <div class=" grid-4-docs has-light bg-primary">
2168
+ <div class="">
2169
+ <div class="form-input-label-2 ">
2170
+ <input type="email" id="uno" class="input" placeholder="Email address" required="" />
2171
+ <!-- autofocus="" si es necesario-->
2172
+ <label for="uno">Input normal</label>
2173
+ </div>
2174
+ </div>
2175
+ <div class="">
2176
+ <div class="form-input-label-2 has-ico-pre">
2177
+ <input type="email" id="dos" class="input" placeholder="Email address" required="" />
2178
+ <label for="dos">Input pre icon</label>
2179
+ <div class="ico-pre">
2180
+ <svg-icon>
2181
+ <div>
2182
+ <svg width="16" height="16" viewBox="0 0 16 16">
2183
+ <g stroke-width="1" fill="none" stroke="#ffffff">
2184
+ <circle cx="8" cy="8" r="7.5"></circle>
2185
+ </g>
2186
+ </svg>
2187
+ </div>
2188
+ </svg-icon>
2189
+ </div>
2190
+ </div>
2191
+ </div>
2192
+ <div class="">
2193
+ <div class="form-input-label-2 has-ico-post">
2194
+ <input type="email" id="tres" class="input" placeholder="Email address" required="" />
2195
+ <label for="tres">Input post icon</label>
2196
+ <div class="ico-post">
2197
+ <svg-icon>
2198
+ <div>
2199
+ <svg width="16" height="16" viewBox="0 0 16 16">
2200
+ <g stroke-width="1" fill="none" stroke="#ffffff">
2201
+ <circle cx="8" cy="8" r="7.5"></circle>
2202
+ </g>
2203
+ </svg>
2204
+ </div>
2205
+ </svg-icon>
2206
+ </div>
2207
+ </div>
2208
+ </div>
2209
+ </div>
2210
+ <div class="row mb-16">
2211
+ <div class="col-xs-12 ">
2212
+ <b>Inputs con prefijo</b>
2213
+ <div class="grid-4">
2214
+ <div>
2215
+ <label for=""> texto</label>
2216
+ <div class="form-prefix">
2217
+ <div class="input-prefix">
2218
+ <input type="tel" class="input " placeholder="+34" />
2219
+ </div>
2220
+ <div class="form-input-label-2">
2221
+ <input type="tel" id="t6" class="input" placeholder="Teléfono" />
2222
+ <label for="t1">Teléfono </label>
2223
+ </div>
2224
+ <button class="btn btn-primary">VERIFICAR TELEFONO</button>
2225
+ </div>
2226
+ </div>
2227
+ <div class=" is-error">
2228
+ <label for=""> is-error</label>
2229
+ <div class="form-prefix">
2230
+ <div class="input-prefix">
2231
+ <input type="tel" class="input " placeholder="+34" />
2232
+ </div>
2233
+ <div class="form-input-label-2">
2234
+ <input type="tel" id="t6" class="input" placeholder="Teléfono" />
2235
+ <label for="t1">Teléfono </label>
2236
+ </div>
2237
+ <button class="btn btn-primary">VERIFICAR TELEFONO</button>
2238
+ </div>
2239
+ </div>
2240
+ <div class=" ok-input">
2241
+ <label for=""> ok-input</label>
2242
+ <div class="form-prefix">
2243
+ <div class="input-prefix">
2244
+ <input type="tel" class="input " placeholder="+34" />
2245
+ </div>
2246
+ <div class="form-input-label-2">
2247
+ <input type="tel" id="t6" class="input" placeholder="Teléfono" />
2248
+ <label for="t1">Teléfono </label>
2249
+ </div>
2250
+ <button class="btn btn-primary">VERIFICAR TELEFONO</button>
2251
+ </div>
2252
+ </div>
2253
+ <div class=" disabled-input">
2254
+ <label for=""> disabled-input</label>
2255
+ <div class="form-prefix">
2256
+ <div class="input-prefix">
2257
+ <input type="tel" class="input " placeholder="+34" />
2258
+ </div>
2259
+ <div class="form-input-label-2">
2260
+ <input type="tel" id="t6" class="input" placeholder="Teléfono" />
2261
+ <label for="t1">Teléfono </label>
2262
+ </div>
2263
+ <button class="btn btn-primary">VERIFICAR TELEFONO</button>
2264
+ </div>
2265
+ </div>
2266
+ <div>
2267
+ <label for=""> dropdown</label>
2268
+ <div class="form-prefix">
2269
+ <div class="select ">
2270
+ <select>
2271
+ <option value="+34">+34</option>
2272
+ <option value="+106">+106</option>
2273
+ <option value="+3">+3</option>
2274
+ <option value="+1002">+1002</option>
2275
+ </select>
2276
+ </div>
2277
+ <div class="form-input-label-2">
2278
+ <input type="tel" id="t6" class="input" placeholder="Teléfono" />
2279
+ <label for="t1">Teléfono </label>
2280
+ </div>
2281
+ <button class="btn btn-primary">VERIFICAR TELEFONO</button>
2282
+ </div>
2283
+ </div>
2284
+ </div>
2285
+ </section>
2286
+ <b id="links">Links</b>
2287
+ <section>
2288
+ <div class="row grid-4">
2289
+ <div class="">
2290
+ <div class="pre-show">
2291
+ <a href="#" class="link-line ">link line</a>
2292
+ <br>
2293
+ <br>
2294
+ <a href="#" class="link-raw ">link raw</a><br>
2295
+ <br>
2296
+ </div>
2297
+ </div>
2298
+
2299
+ </div>
2300
+ </section>
2301
+ <b id="list">List</b>
2302
+ <section>
2303
+ <div class="row">
2304
+ <div class="col-xs-3 ">
2305
+ <div class=" ">
2306
+ </div>
2307
+ </div>
2308
+ <div class="col-xs-3 ">
2309
+ <div class=" mb-16">
2310
+ </div>
2311
+ </div>
2312
+ <div class="col-xs-3 ">
2313
+ <div class=" mb-16">
2314
+ </div>
2315
+ </div>
2316
+ </div>
2317
+ <div class="row">
2318
+ <div class="col-xs-12">
2319
+
2320
+
2321
+ <ul class="list-disc">
2322
+ <li>
2323
+ <a href="">list-disc</a>
2324
+ </li>
2325
+ <li>
2326
+ <a href="">list-disc</a>
2327
+ </li>
2328
+ <li>
2329
+ <a href="">list-disc</a>
2330
+ </li>
2331
+ <li>
2332
+ <a href="">list-disc</a>
2333
+ </li>
2334
+ </ul>
2335
+ <ul class="list-clear">
2336
+ <li>
2337
+ <a href="">list-clear</a>
2338
+ </li>
2339
+ <li>
2340
+ <a href="">list-clear</a>
2341
+ </li>
2342
+ <li>
2343
+ <a href="">list-clear</a>
2344
+ </li>
2345
+ <li>
2346
+ <a href="">list-clear</a>
2347
+ </li>
2348
+ </ul>
2349
+ <ul class="list-inline mb-24">
2350
+ <li>
2351
+ <a href="">list-inline</a>
2352
+ </li>
2353
+ <li>
2354
+ <a href="">list-inline</a>
2355
+ </li>
2356
+ <li>
2357
+ <a href="">list-inline</a>
2358
+ </li>
2359
+ <li>
2360
+ <a href="">list-inline</a>
2361
+ </li>
2362
+ </ul>
2363
+
2364
+ <div class=" mb-16">
2365
+ <!-- 1 -- Código de titulo -->
2366
+ <strong> list-breadcrumb </strong>
2367
+ <ul itemscope itemtype="https://schema.org/BreadcrumbList" class=" list-breadcrumb tit-xs ">
2368
+ <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
2369
+ <a itemprop="item" href="https://massimodutti.com/mujer">
2370
+ <span itemprop="name">MUJER</span>
2371
+ </a>
2372
+ </li>
2373
+ <li class="list-breadcrumb-divider"><span>
2374
+ <svg-icon>
2375
+ <div><svg width="16" height="16" viewBox="0 0 16 16" fill="none"
2376
+ xmlns="http://www.w3.org/2000/svg">
2377
+ <path fill-rule="evenodd" clip-rule="evenodd"
2378
+ d="M4.64645 1.64645C4.45118 1.84171 4.45118 2.15829 4.64645 2.35355L10.2929 8L4.64645 13.6464C4.45118 13.8417 4.45119 14.1583 4.64645 14.3536C4.84171 14.5488 5.15829 14.5488 5.35355 14.3536L11.7071 8L5.35355 1.64645C5.15829 1.45118 4.84171 1.45118 4.64645 1.64645Z"
2379
+ fill="#292929"></path>
2380
+ </svg>
2381
+ </div>
2382
+ </svg-icon>
2383
+ </span></li>
2384
+ <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
2385
+ <a itemprop="item" href="https://massimodutti.com/nuevo">
2386
+ <span itemprop="name">NUEVO</span>
2387
+ </a>
2388
+ </li>
2389
+ <li class="list-breadcrumb-divider"><span>
2390
+ <svg-icon>
2391
+ <div><svg width="16" height="16" viewBox="0 0 16 16" fill="none"
2392
+ xmlns="http://www.w3.org/2000/svg">
2393
+ <path fill-rule="evenodd" clip-rule="evenodd"
2394
+ d="M4.64645 1.64645C4.45118 1.84171 4.45118 2.15829 4.64645 2.35355L10.2929 8L4.64645 13.6464C4.45118 13.8417 4.45119 14.1583 4.64645 14.3536C4.84171 14.5488 5.15829 14.5488 5.35355 14.3536L11.7071 8L5.35355 1.64645C5.15829 1.45118 4.84171 1.45118 4.64645 1.64645Z"
2395
+ fill="#292929"></path>
2396
+ </svg>
2397
+ </div>
2398
+ </svg-icon>
2399
+ </span></li>
2400
+ <li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
2401
+ <a class="c-dark-grey" itemprop="item" href="https://massimodutti.com/chaleco.....">
2402
+ <span itemprop="name">CHALECO LARGO SATINADO AZUL MARINO MARINO MARINO</span>
2403
+ </a>
2404
+ </li>
2405
+ </ul>
2406
+ </div>
2407
+ </div>
2408
+ </div>
2409
+ </section>
2410
+ <b id="selects">Select </b>
2411
+ <section>
2412
+ <div class="row">
2413
+ <div class="col-xs-6 col-sm-3">
2414
+ <div class="pre-title mb-16">
2415
+ <strong> .select </strong>
2416
+ </div>
2417
+ <div class="pre-show">
2418
+ <div class="select">
2419
+ <select>
2420
+ <option>Select dropdown</option>
2421
+ <option>With options</option>
2422
+ </select>
2423
+ </div>
2424
+ </div>
2425
+ </div>
2426
+ <div class="col-xs-6 col-sm-3">
2427
+ <div class="pre-title mb-16">
2428
+ <strong> .select.select-label </strong>
2429
+ </div>
2430
+ <div class="pre-show">
2431
+ <div class="select select-label">
2432
+ <label>Nombre </label>
2433
+ <select>
2434
+ <option>Select dropdown</option>
2435
+ <option>With options</option>
2436
+ </select>
2437
+ </div>
2438
+ </div>
2439
+ </div>
2440
+ <div class="col-xs-6 col-sm-3">
2441
+ <div class="pre-title mb-16">
2442
+ <strong> .select.select-size </strong>
2443
+ </div>
2444
+ <div class="pre-show">
2445
+ <div class="select select-size">
2446
+ <select>
2447
+ <option>Añadir</option>
2448
+ <option>XS</option>
2449
+ <option>SM</option>
2450
+ <option>M</option>
2451
+ <option>L</option>
2452
+ <option>XL</option>
2453
+ </select>
2454
+ </div>
2455
+ </div>
2456
+ </div>
2457
+ <div class="col-xs-6 col-sm-3">
2458
+ <div class="pre-title mb-16">
2459
+ <strong> .select.select-flat-no-icon </strong>
2460
+ </div>
2461
+ <div class="pre-show">
2462
+ <div class="select select-flat-no-icon">
2463
+ <select>
2464
+ <option>Añadir</option>
2465
+ <option>XS</option>
2466
+ <option>SM</option>
2467
+ <option>M</option>
2468
+ <option>L</option>
2469
+ <option>XL</option>
2470
+ </select>
2471
+ </div>
2472
+ </div>
2473
+ </div>
2474
+ </div>
2475
+ </section>
2476
+ <b id="tabs">tabs</b>
2477
+ <section>
2478
+ <div class="row mb-40">
2479
+ <div class="col-xs-12">
2480
+ <div class="pre-show">
2481
+ <div class="tabs">
2482
+ <ul>
2483
+ <li class="is-active">
2484
+ <a>Pictures</a>
2485
+ </li>
2486
+ <li>
2487
+ <a>Music</a>
2488
+ </li>
2489
+ <li>
2490
+ <a>Videos</a>
2491
+ </li>
2492
+ <li>
2493
+ <a>Documents</a>
2494
+ </li>
2495
+ </ul>
2496
+ </div>
2497
+ </div>
2498
+ </div>
2499
+ </div>
2500
+ <div class="row mb-40">
2501
+ <div class="col-xs-12">
2502
+ <div class="pre-title mb-16">
2503
+ <strong> .tabs .is-center </strong>
2504
+ </div>
2505
+ </div>
2506
+ <div class="col-xs-12">
2507
+ <div class="pre-show">
2508
+ <div class="tabs is-center">
2509
+ <ul>
2510
+ <li class="is-active">
2511
+ <a>Pictures</a>
2512
+ </li>
2513
+ <li>
2514
+ <a>Music</a>
2515
+ </li>
2516
+ <li>
2517
+ <a>Videos</a>
2518
+ </li>
2519
+ <li>
2520
+ <a>Documents</a>
2521
+ </li>
2522
+ </ul>
2523
+ </div>
2524
+ </div>
2525
+ </div>
2526
+ </div>
2527
+ <div class="row mb-40">
2528
+ <div class="col-xs-12">
2529
+ <div class="pre-title mb-16">
2530
+ <strong>.list-equal</strong>
2531
+ </div>
2532
+ </div>
2533
+ <div class="col-xs-12">
2534
+ <div class="pre-show">
2535
+ <div class="tabs is-center">
2536
+ <ul class="list-equal">
2537
+ <li class="is-active">
2538
+ <a>Pictures</a>
2539
+ </li>
2540
+ <li>
2541
+ <a>Documents</a>
2542
+ </li>
2543
+ </ul>
2544
+ </div>
2545
+ </div>
2546
+ </div>
2547
+ </div>
2548
+ </section>
2549
+ <section id="tooltip" class="mb-40 container-12">
2550
+ <div class="row">
2551
+ <div class=" col-xs-12 is-flex content-center">
2552
+ <div class="has-tooltip">
2553
+ <svg-icon>
2554
+ <div>
2555
+ <svg width="16" height="16" viewBox="0 0 16 16">
2556
+ <g stroke-width="1" fill="none" stroke="#212121">
2557
+ <circle cx="8" cy="8" r="7.5"></circle>
2558
+ </g>
2559
+ </svg>
2560
+ </div>
2561
+ </svg-icon>
2562
+ <div class="tooltip-sm">
2563
+ <div class="is-flex">
2564
+ <div>
2565
+ <svg-icon src="credit-card">
2566
+ <div>
2567
+ <svg-icon>
2568
+ <div>
2569
+ <svg width="16" height="16" viewBox="0 0 16 16">
2570
+ <g stroke-width="1" fill="none" stroke="#212121">
2571
+ <circle cx="8" cy="8" r="7.5"></circle>
2572
+ </g>
2573
+ </svg>
2574
+ </div>
2575
+ </svg-icon>
2576
+ </div>
2577
+ </svg-icon>
2578
+ </div>
2579
+ <div class="px-8">
2580
+ <p class="p-s"> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Cum, porro. </p>
2581
+ </div>
2582
+ </div>
2583
+ <div class="close">
2584
+ <svg-icon src="close-s">
2585
+ <div>
2586
+ <svg width="16" height="16" viewBox="0 0 16 16">
2587
+ <g stroke-width="1" fill="none" stroke="#212121">
2588
+ <circle cx="8" cy="8" r="7.5"></circle>
2589
+ </g>
2590
+ </svg>
2591
+ </div>
2592
+ </svg-icon>
2593
+ </div>
2594
+ </div>
2595
+ </div>
2596
+ <!---->
2597
+ <div class="has-tooltip">
2598
+ <svg-icon>
2599
+ <div>
2600
+ <svg width="16" height="16" viewBox="0 0 16 16">
2601
+ <g stroke-width="1" fill="none" stroke="#212121">
2602
+ <circle cx="8" cy="8" r="7.5"></circle>
2603
+ </g>
2604
+ </svg>
2605
+ </div>
2606
+ </svg-icon>
2607
+ <div class="tooltip-sm tooltip-tl">
2608
+ <div class="is-flex">
2609
+ <div>
2610
+ <svg-icon src="credit-card">
2611
+ <div>
2612
+ <svg-icon>
2613
+ <div>
2614
+ <svg width="16" height="16" viewBox="0 0 16 16">
2615
+ <g stroke-width="1" fill="none" stroke="#212121">
2616
+ <circle cx="8" cy="8" r="7.5"></circle>
2617
+ </g>
2618
+ </svg>
2619
+ </div>
2620
+ </svg-icon>
2621
+ </div>
2622
+ </svg-icon>
2623
+ </div>
2624
+ <div class="px-8">
2625
+ <p class="p-s"> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Cum, porro. </p>
2626
+ </div>
2627
+ </div>
2628
+ <div class="close">
2629
+ <svg-icon src="close-s">
2630
+ <div>
2631
+ <svg width="16" height="16" viewBox="0 0 16 16">
2632
+ <g stroke-width="1" fill="none" stroke="#212121">
2633
+ <circle cx="8" cy="8" r="7.5"></circle>
2634
+ </g>
2635
+ </svg>
2636
+ </div>
2637
+ </svg-icon>
2638
+ </div>
2639
+ </div>
2640
+ </div>
2641
+ <!---->
2642
+ <div class="has-tooltip">
2643
+ <svg-icon>
2644
+ <div>
2645
+ <svg width="16" height="16" viewBox="0 0 16 16">
2646
+ <g stroke-width="1" fill="none" stroke="#212121">
2647
+ <circle cx="8" cy="8" r="7.5"></circle>
2648
+ </g>
2649
+ </svg>
2650
+ </div>
2651
+ </svg-icon>
2652
+ <div class="tooltip-sm tooltip-tr">
2653
+ <div class="is-flex">
2654
+ <div>
2655
+ <svg-icon src="credit-card">
2656
+ <div>
2657
+ <svg-icon>
2658
+ <div>
2659
+ <svg width="16" height="16" viewBox="0 0 16 16">
2660
+ <g stroke-width="1" fill="none" stroke="#212121">
2661
+ <circle cx="8" cy="8" r="7.5"></circle>
2662
+ </g>
2663
+ </svg>
2664
+ </div>
2665
+ </svg-icon>
2666
+ </div>
2667
+ </svg-icon>
2668
+ </div>
2669
+ <div class="px-8">
2670
+ <p class="p-s"> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Cum, porro. </p>
2671
+ </div>
2672
+ </div>
2673
+ <div class="close">
2674
+ <svg-icon src="close-s">
2675
+ <div>
2676
+ <svg width="16" height="16" viewBox="0 0 16 16">
2677
+ <g stroke-width="1" fill="none" stroke="#212121">
2678
+ <circle cx="8" cy="8" r="7.5"></circle>
2679
+ </g>
2680
+ </svg>
2681
+ </div>
2682
+ </svg-icon>
2683
+ </div>
2684
+ </div>
2685
+ </div>
2686
+ <!---->
2687
+ <div class="has-tooltip">
2688
+ <svg-icon>
2689
+ <div>
2690
+ <svg width="16" height="16" viewBox="0 0 16 16">
2691
+ <g stroke-width="1" fill="none" stroke="#212121">
2692
+ <circle cx="8" cy="8" r="7.5"></circle>
2693
+ </g>
2694
+ </svg>
2695
+ </div>
2696
+ </svg-icon>
2697
+ <div class="tooltip-sm tooltip-br">
2698
+ <div class="is-flex">
2699
+ <div>
2700
+ <svg-icon src="credit-card">
2701
+ <div>
2702
+ <svg-icon>
2703
+ <div>
2704
+ <svg width="16" height="16" viewBox="0 0 16 16">
2705
+ <g stroke-width="1" fill="none" stroke="#212121">
2706
+ <circle cx="8" cy="8" r="7.5"></circle>
2707
+ </g>
2708
+ </svg>
2709
+ </div>
2710
+ </svg-icon>
2711
+ </div>
2712
+ </svg-icon>
2713
+ </div>
2714
+ <div class="px-8">
2715
+ <p class="p-s"> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Cum, porro. </p>
2716
+ </div>
2717
+ </div>
2718
+ <div class="close">
2719
+ <svg-icon src="close-s">
2720
+ <div>
2721
+ <svg width="16" height="16" viewBox="0 0 16 16">
2722
+ <g stroke-width="1" fill="none" stroke="#212121">
2723
+ <circle cx="8" cy="8" r="7.5"></circle>
2724
+ </g>
2725
+ </svg>
2726
+ </div>
2727
+ </svg-icon>
2728
+ </div>
2729
+ </div>
2730
+ </div>
2731
+ </div>
2732
+ </div>
2733
+ </section>
2734
+ <b>Tags</b>
2735
+ <section id="tags" class="mb-40 container-12">
2736
+ <div class="row">
2737
+ <div class="col-xs-12">
2738
+ <div class="tag-warning"> Tag warning</div>
2739
+ <div class="tag-info"> Tag info</div>
2740
+ <div class="tag-valid"> Tag valid</div>
2741
+ <div class="tag-alert"> Tag alert</div>
2742
+ <div class="tag-feel"> Tag feel</div>
2743
+ <br><br>
2744
+ </div>
2745
+ </div>
2746
+ </section>
2747
+ <b id="banners">Banners</b>
2748
+ <div class="grid-4">
2749
+ <div class="marketing-spot mb-24"> banner warning .marketing-spot, Lorem ipsum dolor </div>
2750
+ <div class="is-flex text-center bg-warning mb-24 p-16"> banner warning .bg-warning , Lorem ipsum dolor </div>
2751
+ <div class="is-flex text-center bg-info mb-24 p-16"> banner info .bg-info , Lorem ipsum dolor </div>
2752
+ <div class="is-flex text-center bg-success mb-24 p-16"> banner valid .bg-success , Lorem ipsum dolor </div>
2753
+ <div class="is-flex text-center bg-alert mb-24 p-16"> banner alert .bg-alert , Lorem ipsum dolor </div>
2754
+ <div class="is-flex text-center bg-feel mb-24 p-16"> banner feel .bg-feel , Lorem ipsum dolor </div>
2755
+ <br><br>
2756
+ </div>
2757
+ <b id="compo">Componentes</b>
2758
+ <div class="grid-4">
2759
+ <item-product-cart class="">
2760
+ <div class="item-mini-cart mb-32 ">
2761
+ <div class="row ">
2762
+ <div class="col-xs-3 col-sm-2"><img class="img-responsive"
2763
+ src="https://holygrailcss.github.io/assets/placeholder/3-4.jpg">
2764
+ </div>
2765
+ <div class="col-xs-9 col-sm-10 is-flex content-sp-between flex-column">
2766
+ <div class="row">
2767
+ <div class="col-xs-9">
2768
+ <div class="p-xs item-name ttu">Zapato tacón piel negro pulsera</div>
2769
+ <div class="p-xs c-dark-grey"> Ref. <span>1412/950/800</span>
2770
+ </div>
2771
+ <div class="color-wrap">
2772
+ <div class="align-items-center">
2773
+ <div class="product-color-selector is-flex">
2774
+ <button>
2775
+ <div class="color-selector"><img src="">
2776
+ </div>
2777
+ </button>
2778
+ </div>
2779
+ <div class="p-xs">Negro</div>
2780
+ </div>
2781
+ </div>
2782
+ </div>
2783
+ <div class="col-xs-3 product-price">
2784
+ <shop-cart-price">
2785
+ <div class="row text-right">
2786
+ <div class="col-xs-12">
2787
+ <span class="p-xs is-through c-dark-grey"> 89,95&nbsp;€ </span>
2788
+ </div>
2789
+ </div>
2790
+ <div class="row text-right future-price c-sale">
2791
+ <div class="col-xs-12">
2792
+ <span class="p-xs">
2793
+ 59,95&nbsp;€ </span>
2794
+ </div>
2795
+ </div>
2796
+ <div class="row text-right">
2797
+ <div class="col-xs-12">
2798
+ <span class="p-xs"> 89,95&nbsp;€ </span>
2799
+ </div>
2800
+ </div>
2801
+ </shop-cart-price">
2802
+ </div>
2803
+ </div>
2804
+ <div class="row content-sp-between m-0">
2805
+ <div class="align-middle">
2806
+ <div class="align-middle">
2807
+ <div class="p-xs mr-8 align-middle">Cantidad</div>
2808
+ <app-select-ui>
2809
+ <div class="select select-box"><select name="" id="630d4db1-b9e9-458f-acc8-d9ba66d44df2">
2810
+ <option value="1">1</option>
2811
+ <option value="2">2</option>
2812
+ <option value="3">3</option>
2813
+ </select></div>
2814
+ </app-select-ui>
2815
+ </div>
2816
+ <div class="ml-16 align-middle">
2817
+ <div class="p-xs mr-8 align-middle">Talla</div>
2818
+ <app-select-ui>
2819
+ <div class="select select-box"><select name="" id="7bda5deb-ffdc-4712-9cac-f9b5362017a7">
2820
+ <option value="10934498">35</option>
2821
+ <option value="10934499">36</option>
2822
+ <option value="10934500">37</option>
2823
+ </select></div>
2824
+ </app-select-ui>
2825
+ </div>
2826
+ </div>
2827
+ <div class="">
2828
+ <div class="is-flex content-end">
2829
+ <button class="btn btn--icon btn-clear state-changing" title="Agregar a la lista de deseos"
2830
+ id="addItemWishlist">
2831
+ <svg-icon ng-reflect-src="bookmark">
2832
+ <div><svg width="16" height="16" viewBox="0 0 16 16" fill="none"
2833
+ xmlns="http://www.w3.org/2000/svg">
2834
+ <path d="M13 1H3V15L8 11L13 15V1Z" stroke="black" stroke-linejoin="round">
2835
+ </path>
2836
+ </svg></div>
2837
+ </svg-icon>
2838
+ </button>
2839
+ <button class="btn btn--icon btn-clear" title="Eliminar" id="deleteItemShopcart">
2840
+ <svg-icon>
2841
+ <div>
2842
+ <svg width="16" height="16" viewBox="0 0 16 16">
2843
+ <g stroke-width="1" fill="none" stroke="#212121">
2844
+ <circle cx="8" cy="8" r="7.5"></circle>
2845
+ </g>
2846
+ </svg>
2847
+ </div>
2848
+ </svg-icon>
2849
+ </button>
2850
+ </div>
2851
+ </div>
2852
+ </div>
2853
+ </div>
2854
+ </div>
2855
+ <div class="row">
2856
+ <div class="ITEM-NO-DISPONIBLE">
2857
+ <span class="ml-8 p-xs link7">Ver disponibilidad en tienda</span>
2858
+ </div>
2859
+ </div>
2860
+ </div>
2861
+ </item-product-cart>
2862
+ </div>
2863
+ <b id="flexbox">Flexbox</b>
2864
+ <section id="flexbox">
2865
+ <div class="row">
2866
+ <div class="container-flexbox">
2867
+ <div class="row">
2868
+ <div class="col">
2869
+ <div class=" flexbox-demo item-w ">
2870
+ <div class="item-i"></div>
2871
+ <div class="item-i"></div>
2872
+ <div class="item-i"></div>
2873
+ </div>
2874
+ </div>
2875
+ <div class="col">
2876
+ <div class="flexbox-demo-is-flex hidden">is-flex</div>
2877
+ <div class="flexbox-demo-is-flexinline hidden">is-flexinline</div>
2878
+ <div class="flexbox-demo-is-align-center hidden">align-center</div>
2879
+ <div class="flexbox-demo-is-flex-row hidden">flex-row *</div>
2880
+ <div class="flexbox-demo-is-flex-column hidden">flex-column*</div>
2881
+ <div class="flexbox-demo-is-wrap hidden">flex-wrap*</div>
2882
+ <div class="flexbox-demo-is-nowrap hidden">flex-nowrap*</div>
2883
+ <div class="flexbox-demo-is-content-start hidden">content-start*</div>
2884
+ <div class="flexbox-demo-is-content-end hidden">content-end*</div>
2885
+ <div class="flexbox-demo-is-content-center hidden">content-center*</div>
2886
+ <div class="flexbox-demo-is-content-between hidden">content-sp-between*</div>
2887
+ <div class="flexbox-demo-is-content-around hidden">*</div>
2888
+ <div class="flexbox-demo-is-content-evenly hidden">content-sp-evenly*</div>
2889
+ <div class="flexbox-demo-is-align-top hidden">align-top*</div>
2890
+ <div class="flexbox-demo-is-align-middle hidden">align-middle</div>
2891
+ <div class="flexbox-demo-is-align-multi-bottom hidden">align-multi-bottom*</div>
2892
+ <div class="flexbox-demo-is-align-multi-top hidden">align-multi-top</div>
2893
+ <div class="flexbox-demo-is-align-bottom hidden">align-bottom</div>
2894
+ <div class="flexbox-demo-is-align-multi-center hidden">align-multi-center</div>
2895
+ <div class="flexbox-demo-is-align-multi-between hidden">align-multi-between</div>
2896
+ <div class="flexbox-demo-is-align-multi-around hidden">align-multi-around</div>
2897
+ <div class="flexbox-demo-is-align-multi-strech hidden">align-multi-stretch</div>
2898
+ </div>
2899
+ </div>
2900
+ </div>
2901
+ <div class="col-xs-12">
2902
+ <div class="p-16 bg-feel is-inlineflex">
2903
+ <div class=" ">
2904
+ <h5 class="p-m">.is-flex </h5>
2905
+ <div class="item-w is-flex " onclick="isFlex(this)">
2906
+ <div class="item-i"></div>
2907
+ <div class="item-i"></div>
2908
+ <div class="item-i"></div>
2909
+ <div class="item-i"></div>
2910
+ <div class="item-i"></div>
2911
+ </div>
2912
+ </div>
2913
+ <div class="">
2914
+ <h5 class="p-m">.is-flexinline</h5>
2915
+ <div class="item-w is-flexinline " onclick="isFlexInline()">
2916
+ <div class="item-i"></div>
2917
+ <div class="item-i"></div>
2918
+ <div class="item-i"></div>
2919
+ <div class="item-i"></div>
2920
+ <div class="item-i"></div>
2921
+ </div>
2922
+ </div>
2923
+ <div class="">
2924
+ <div class="">
2925
+ <h5 class="p-m">.align-center</h5>
2926
+ <div class="item-w is-flex align-center" onclick="isFlexAlignCenter()">
2927
+ <div class="item-i"></div>
2928
+ </div>
2929
+ </div>
2930
+ </div>
2931
+ </div>
2932
+ <div class="p-16 bg-feel is-inlineflex">
2933
+ <div class="">
2934
+ <h5 class="p-m">.flex-row </h5>
2935
+ <div class="item-w is-flex flex-row" onclick="isFlexRow()">
2936
+ <div class="item-i"></div>
2937
+ <div class="item-i"></div>
2938
+ <div class="item-i"></div>
2939
+ <div class="item-i"></div>
2940
+ <div class="item-i"></div>
2941
+ </div>
2942
+ </div>
2943
+ <div class="">
2944
+ <h5 class="p-m">.flex-column </h5>
2945
+ <div class="item-w is-flex flex-column" onclick="isFlexColumn()">
2946
+ <div class="item-i"></div>
2947
+ <div class="item-i"></div>
2948
+ <div class="item-i"></div>
2949
+ <div class="item-i"></div>
2950
+ <div class="item-i"></div>
2951
+ </div>
2952
+ </div>
2953
+ </div>
2954
+ <div class="p-16 bg-feel is-inlineflex">
2955
+ <div class="">
2956
+ <h5 class="p-m">.flex-wrap</h5>
2957
+ <div class="item-w is-flex flex-wrap" onclick="isFlexWrap()">
2958
+ <div class="item-i"></div>
2959
+ <div class="item-i"></div>
2960
+ <div class="item-i"></div>
2961
+ <div class="item-i"></div>
2962
+ <div class="item-i"></div>
2963
+ <div class="item-i"></div>
2964
+ <div class="item-i"></div>
2965
+ <div class="item-i"></div>
2966
+ </div>
2967
+ </div>
2968
+ <div class="">
2969
+ <h5 class="p-m">.flex-nowrap </h5>
2970
+ <div class="item-w is-flex flex-nowrap" onclick="isFlexNoWrap()">
2971
+ <div class="item-i"></div>
2972
+ <div class="item-i"></div>
2973
+ <div class="item-i"></div>
2974
+ <div class="item-i"></div>
2975
+ <div class="item-i"></div>
2976
+ <div class="item-i"></div>
2977
+ <div class="item-i"></div>
2978
+ <div class="item-i"></div>
2979
+ </div>
2980
+ </div>
2981
+ </div>
2982
+ <div class="p-16 bg-feel is-inlineflex">
2983
+ <div class="">
2984
+ <div class="">
2985
+ <h5 class="p-m"> .content-start </h5>
2986
+ <div class="item-w is-flex content-start" onclick="isFlexContentStart()">
2987
+ <div class="item-i"></div>
2988
+ <div class="item-i"></div>
2989
+ <div class="item-i"></div>
2990
+ </div>
2991
+ </div>
2992
+ </div>
2993
+ <div class="">
2994
+ <div class="">
2995
+ <h5 class="p-m">.content-end</h5>
2996
+ <div class="item-w is-flex content-end" onclick="isFlexContentEnd()">
2997
+ <div class="item-i"></div>
2998
+ <div class="item-i"></div>
2999
+ <div class="item-i"></div>
3000
+ </div>
3001
+ </div>
3002
+ </div>
3003
+ <div class="">
3004
+ <div class="">
3005
+ <h5 class="p-m">.content-center </h5>
3006
+ <div class="item-w is-flex content-center" onclick="isFlexContentCenter()">
3007
+ <div class="item-i"></div>
3008
+ <div class="item-i"></div>
3009
+ <div class="item-i"></div>
3010
+ </div>
3011
+ </div>
3012
+ </div>
3013
+ <div class="">
3014
+ <div class="">
3015
+ <h5 class="p-m">.content-sp-between </h5>
3016
+ <div class="item-w is-flex content-sp-between" onclick="isFlexContentBetween()">
3017
+ <div class="item-i"></div>
3018
+ <div class="item-i"></div>
3019
+ <div class="item-i"></div>
3020
+ </div>
3021
+ </div>
3022
+ </div>
3023
+ <div class="">
3024
+ <div class="">
3025
+ <h5 class="p-m">.</h5>
3026
+ <div class="item-w is-flex " onclick="isFlexContentAround()">
3027
+ <div class="item-i"></div>
3028
+ <div class="item-i"></div>
3029
+ <div class="item-i"></div>
3030
+ </div>
3031
+ </div>
3032
+ </div>
3033
+ <div class="">
3034
+ <div>
3035
+ <h5 class="p-m">.content-sp-evenly </h5>
3036
+ <div class="item-w is-flex content-sp-evenly" onclick="isFlexContentEvenly()">
3037
+ <div class="item-i"></div>
3038
+ <div class="item-i"></div>
3039
+ <div class="item-i"></div>
3040
+ </div>
3041
+ </div>
3042
+ </div>
3043
+ </div>
3044
+ <div class="p-16 bg-feel is-inlineflex">
3045
+ <div class="">
3046
+ <div class="">
3047
+ <h5 class="p-m">.align-top</h5>
3048
+ <div class="item-w is-flex align-top" onclick="isFlexAlignTop()">
3049
+ <div class="item-i"></div>
3050
+ <div class="item-i"></div>
3051
+ <div class="item-i"></div>
3052
+ <div class="item-i"></div>
3053
+ <div class="item-i"></div>
3054
+ </div>
3055
+ </div>
3056
+ </div>
3057
+ <div class="">
3058
+ <div class="">
3059
+ <h5 class="p-m">.align-middle</h5>
3060
+ <div class="item-w is-flex align-middle" onclick="isFlexAlignMiddle()">
3061
+ <div class="item-i"></div>
3062
+ <div class="item-i"></div>
3063
+ <div class="item-i"></div>
3064
+ <div class="item-i"></div>
3065
+ <div class="item-i"></div>
3066
+ </div>
3067
+ </div>
3068
+ </div>
3069
+ <div class="">
3070
+ <div class="">
3071
+ <h5 class="p-m">.align-multi-bottom</h5>
3072
+ <div class="item-w is-flex align-multi-bottom" onclick="isFlexAlignMultiBottom()">
3073
+ <div class="item-i"></div>
3074
+ <div class="item-i"></div>
3075
+ <div class="item-i"></div>
3076
+ <div class="item-i"></div>
3077
+ <div class="item-i"></div>
3078
+ <div class="item-i"></div>
3079
+ <div class="item-i"></div>
3080
+ <div class="item-i"></div>
3081
+ </div>
3082
+ </div>
3083
+ </div>
3084
+ <div class=""></div>
3085
+ </div>
3086
+ <div class="p-16 bg-feel is-inlineflex">
3087
+ <div class="">
3088
+ <div class="">
3089
+ <h5 class="p-m">.align-multi-top</h5>
3090
+ <div class="item-w is-flex align-multi-top" onclick="isFlexAlignMultiTop()">
3091
+ <div class="item-i"></div>
3092
+ <div class="item-i"></div>
3093
+ <div class="item-i"></div>
3094
+ <div class="item-i"></div>
3095
+ <div class="item-i"></div>
3096
+ <div class="item-i"></div>
3097
+ <div class="item-i"></div>
3098
+ <div class="item-i"></div>
3099
+ </div>
3100
+ </div>
3101
+ </div>
3102
+ <div class="">
3103
+ <div class="">
3104
+ <h5 class="p-m">.align-bottom</h5>
3105
+ <div class="item-w is-flex align-bottom" onclick="isFlexAlignBottom()">
3106
+ <div class="item-i"></div>
3107
+ <div class="item-i"></div>
3108
+ <div class="item-i"></div>
3109
+ <div class="item-i"></div>
3110
+ <div class="item-i"></div>
3111
+ </div>
3112
+ </div>
3113
+ </div>
3114
+ <div class="">
3115
+ <div class="">
3116
+ <h5 class="p-m">.align-multi-center</h5>
3117
+ <div class="item-w is-flex align-multi-center" onclick="isFlexAlignMultiCenter()">
3118
+ <div class="item-i"></div>
3119
+ <div class="item-i"></div>
3120
+ <div class="item-i"></div>
3121
+ <div class="item-i"></div>
3122
+ <div class="item-i"></div>
3123
+ <div class="item-i"></div>
3124
+ <div class="item-i"></div>
3125
+ <div class="item-i"></div>
3126
+ </div>
3127
+ </div>
3128
+ </div>
3129
+ <div class="">
3130
+ <div class="">
3131
+ <h5 class="p-m">.align-multi-between</h5>
3132
+ <div class="item-w is-flex align-multi-between" onclick="isFlexAlignMultiBetween()">
3133
+ <div class="item-i"></div>
3134
+ <div class="item-i"></div>
3135
+ <div class="item-i"></div>
3136
+ <div class="item-i"></div>
3137
+ <div class="item-i"></div>
3138
+ <div class="item-i"></div>
3139
+ <div class="item-i"></div>
3140
+ <div class="item-i"></div>
3141
+ </div>
3142
+ </div>
3143
+ </div>
3144
+ <div class="">
3145
+ <div class="">
3146
+ <h5 class="p-m">.align-multi-around</h5>
3147
+ <div class="item-w is-flex align-multi-around" onclick="isFlexAlignMultiAround()">
3148
+ <div class="item-i"></div>
3149
+ <div class="item-i"></div>
3150
+ <div class="item-i"></div>
3151
+ <div class="item-i"></div>
3152
+ <div class="item-i"></div>
3153
+ <div class="item-i"></div>
3154
+ <div class="item-i"></div>
3155
+ <div class="item-i"></div>
3156
+ </div>
3157
+ </div>
3158
+ </div>
3159
+ <div class="">
3160
+ <h5 class="p-m">.align-multi-stretch</h5>
3161
+ <div class="item-w is-flex align-multi-stretch" onclick="isFlexAlignMultiStretch()">
3162
+ <div class="item-i"></div>
3163
+ <div class="item-i"></div>
3164
+ <div class="item-i"></div>
3165
+ <div class="item-i"></div>
3166
+ <div class="item-i"></div>
3167
+ <div class="item-i"></div>
3168
+ <div class="item-i"></div>
3169
+ <div class="item-i"></div>
3170
+ </div>
3171
+ </div>
3172
+ </div>
3173
+ <div class="p-16 bg-feel is-inlineflex">
3174
+ <div class="">
3175
+ <h5 class="p-m">.align-items-center</h5>
3176
+ <div class="item-w is-flex align-items-center" onclick="isFlexAlignMultiTop()">
3177
+ <div class="item-i"></div>
3178
+ <div class="item-i"></div>
3179
+ <div class="item-i"></div>
3180
+ <div class="item-i"></div>
3181
+ <div class="item-i"></div>
3182
+ </div>
3183
+ </div>
3184
+ <div class="">
3185
+ <h5 class="p-m">.align-vertical</h5>
3186
+ <div class="item-w is-flex align-vertical" onclick="isFlexAlignMultiTop()">
3187
+ <div class="item-i"></div>
3188
+ <div class="item-i"></div>
3189
+ <div class="item-i"></div>
3190
+ <div class="item-i"></div>
3191
+ <div class="item-i"></div>
3192
+ </div>
3193
+ </div>
3194
+ </div>
3195
+ </div>
3196
+ </div>
3197
+ </section>
3198
+ </div>
3199
+ </div>
3200
+ </div>
3201
+ </body>
3202
+ </html>