picasso 0.1.0 → 0.2.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 (49) hide show
  1. data/docs/accordions.html +6 -3
  2. data/docs/all.html +105 -60
  3. data/docs/arrows.html +6 -3
  4. data/docs/bubbles.html +6 -3
  5. data/docs/build/md/changelog.md +9 -2
  6. data/docs/build/md/components/buttons.md +167 -137
  7. data/docs/build/md/components/navs.md +1 -1
  8. data/docs/build/md/components/popups.md +1 -1
  9. data/docs/build/md/intro.md +17 -1
  10. data/docs/build/md/todo.md +2 -1
  11. data/docs/build/templates/layout.html +2 -1
  12. data/docs/buttons.html +75 -54
  13. data/docs/changelog.html +15 -5
  14. data/docs/components.html +6 -3
  15. data/docs/css/markdown.css +1 -1
  16. data/docs/css/style.css +720 -220
  17. data/docs/despegar.html +6 -3
  18. data/docs/img/picasso-buttons-glossy.png +0 -0
  19. data/docs/img/{picasso-mini-buttons.png → picasso-buttons-mini.png} +0 -0
  20. data/docs/index.html +23 -4
  21. data/docs/inputs.html +6 -3
  22. data/docs/intro.html +23 -4
  23. data/docs/list-grids.html +6 -3
  24. data/docs/mejoras.html +6 -3
  25. data/docs/navs.html +7 -4
  26. data/docs/pagination.html +6 -3
  27. data/docs/popups.html +7 -4
  28. data/docs/sass/style.scss +43 -19
  29. data/docs/todo.html +8 -4
  30. data/docs/utils.html +6 -3
  31. data/lib/picasso/version.rb +1 -1
  32. data/picasso.gemspec +0 -1
  33. data/stylesheets/picasso/components/_accordions.scss +13 -13
  34. data/stylesheets/picasso/components/_arrows.scss +2 -2
  35. data/stylesheets/picasso/components/_bubbles.scss +5 -5
  36. data/stylesheets/picasso/components/_buttons.scss +3 -2
  37. data/stylesheets/picasso/components/_inputs.scss +7 -7
  38. data/stylesheets/picasso/components/_list-grids.scss +6 -6
  39. data/stylesheets/picasso/components/_navs.scss +10 -10
  40. data/stylesheets/picasso/components/_pagination.scss +8 -8
  41. data/stylesheets/picasso/components/_popups.scss +15 -15
  42. data/stylesheets/picasso/components/buttons/_3d.scss +127 -0
  43. data/stylesheets/picasso/components/buttons/_glossy.scss +220 -0
  44. data/stylesheets/picasso/components/buttons/_mini.scss +150 -0
  45. metadata +9 -23
  46. data/docs/ie.html +0 -201
  47. data/docs/img/picasso-buttons.png +0 -0
  48. data/stylesheets/picasso/components/buttons/_buttons.scss +0 -191
  49. data/stylesheets/picasso/components/buttons/_mini-buttons.scss +0 -149
data/docs/accordions.html CHANGED
@@ -18,7 +18,8 @@
18
18
 
19
19
 
20
20
  <header>
21
- <h1>Picasso. Framework CSS/Sass.</h1>
21
+ <img src="img/picasso.png" />
22
+ <h1 class="title">Framework CSS/Sass.</h1>
22
23
  </header>
23
24
 
24
25
 
@@ -43,6 +44,8 @@
43
44
 
44
45
  <li><a href="./intro.html#actualizacioacuten">Actualizaci&amp;oacute;n</a></li>
45
46
 
47
+ <li><a href="./intro.html#opcional-instalacioacuten-de-oily-png">Opcional: Instalaci&amp;oacute;n de oily_png</a></li>
48
+
46
49
  </ol>
47
50
 
48
51
  </li>
@@ -52,6 +55,8 @@
52
55
 
53
56
  <ol>
54
57
 
58
+ <li><a href="./changelog.html#020">0.2.0</a></li>
59
+
55
60
  <li><a href="./changelog.html#010">0.1.0</a></li>
56
61
 
57
62
  <li><a href="./changelog.html#003">0.0.3</a></li>
@@ -105,8 +110,6 @@
105
110
 
106
111
  <li><a href="./buttons.html#buttons">Buttons</a></li>
107
112
 
108
- <li><a href="./buttons.html#mini-buttons">Mini-Buttons</a></li>
109
-
110
113
  <li><a href="./inputs.html#inputs">Inputs</a></li>
111
114
 
112
115
  <li><a href="./navs.html#navs">Navs</a></li>
data/docs/all.html CHANGED
@@ -18,7 +18,8 @@
18
18
 
19
19
 
20
20
  <header>
21
- <h1>Picasso. Framework CSS/Sass.</h1>
21
+ <img src="img/picasso.png" />
22
+ <h1 class="title">Framework CSS/Sass.</h1>
22
23
  </header>
23
24
 
24
25
 
@@ -43,6 +44,8 @@
43
44
 
44
45
  <li><a href="./intro.html#actualizacioacuten">Actualizaci&amp;oacute;n</a></li>
45
46
 
47
+ <li><a href="./intro.html#opcional-instalacioacuten-de-oily-png">Opcional: Instalaci&amp;oacute;n de oily_png</a></li>
48
+
46
49
  </ol>
47
50
 
48
51
  </li>
@@ -52,6 +55,8 @@
52
55
 
53
56
  <ol>
54
57
 
58
+ <li><a href="./changelog.html#020">0.2.0</a></li>
59
+
55
60
  <li><a href="./changelog.html#010">0.1.0</a></li>
56
61
 
57
62
  <li><a href="./changelog.html#003">0.0.3</a></li>
@@ -105,8 +110,6 @@
105
110
 
106
111
  <li><a href="./buttons.html#buttons">Buttons</a></li>
107
112
 
108
- <li><a href="./buttons.html#mini-buttons">Mini-Buttons</a></li>
109
-
110
113
  <li><a href="./inputs.html#inputs">Inputs</a></li>
111
114
 
112
115
  <li><a href="./navs.html#navs">Navs</a></li>
@@ -171,12 +174,17 @@
171
174
 
172
175
  </p>
173
176
  <pre><code class="lang-bash">$ (sudo) gem install picasso</code></pre>
177
+ <blockquote>
178
+ <p>Opcional: <a href="#opcional-instalacioacuten-de-oily-png">Instalaci&oacute;n de oily_png</a>.
179
+
180
+ </p>
181
+ </blockquote>
174
182
  <p>En el <code>config.rb</code> agregar:
175
183
 
176
184
  </p>
177
185
  <pre><code class="lang-bash">require &#39;picasso&#39;
178
186
  require &#39;magick&#39;
179
- gem &#39;picasso&#39;, &#39;~&gt; 0.1.0&#39;</code></pre>
187
+ gem &#39;picasso&#39;, &#39;~&gt; 0.2.0&#39;</code></pre>
180
188
  <p>Modificar el n&uacute;mero de versi&oacute;n a medida que se quiere usar nuevas versiones del framework.
181
189
 
182
190
  </p>
@@ -191,8 +199,26 @@ gem &#39;picasso&#39;, &#39;~&gt; 0.1.0&#39;</code></pre>
191
199
  @import &quot;picasso/despegar/variables&quot;;</code></pre>
192
200
  <a name="actualizacioacuten"></a><h2>Actualizaci&oacute;n</h2>
193
201
  <pre><code class="lang-bash">$ (sudo) gem update picasso</code></pre>
202
+ <a name="opcional-instalacioacuten-de-oily-png"></a><h2>Opcional: Instalaci&oacute;n de oily_png</h2>
203
+ <p><a href="https://github.com/wvanbergen/oily_png/">oily_png</a> es una gema que permite acelerar la creaci&oacute;n de im&aacute;genes din&aacute;micas. Se recomienda su instalaci&oacute;n en caso de utilizar Picasso para la creaci&oacute;n de sprites.
204
+
205
+ </p>
206
+ <a name="windows"></a><h3>Windows</h3>
207
+ <p>Bajar el paquete <a href="http://rubyinstaller.org/downloads/">Development Kit</a>. Extraer dicho paquete en una ruta conocida (por ejemplo <code>C:\DevKit</code>). Abrir una consola, ir a la ruta en donde se pusieron los archivos del <em>Development Kit</em> y ejecutar <code>ruby dk.rb init</code> y luego <code>ruby dk.rb install</code>.
208
+
209
+ </p>
210
+ <a name="linux"></a><h3>Linux</h3>
211
+ <pre><code class="lang-bash">$ (sudo) apt-get update
212
+ $ (sudo) apt-get install ruby-oily-png</code></pre>
194
213
 
195
214
  <a name="changelog"></a><h1>Changelog</h1>
215
+ <a name="020"></a><h2>0.2.0</h2>
216
+ <ul>
217
+ <li>Fix degradados de botones en Chrome;</li>
218
+ <li>Separaci&oacute;n de botones por tipo;</li>
219
+ <li>Nuevos botones 3D;</li>
220
+ <li>Se quita a oily_png como dependencia;</li>
221
+ </ul>
196
222
  <a name="010"></a><h2>0.1.0</h2>
197
223
  <ul>
198
224
  <li>Agregados nuevos componentes:</li>
@@ -229,9 +255,9 @@ gem &#39;picasso&#39;, &#39;~&gt; 0.1.0&#39;</code></pre>
229
255
  <li>IE: <code>after()</code> / <code>before()</code></li>
230
256
  </ul>
231
257
  </li>
232
- <li>Nuevo fallback para IE: Generación dinámica de sprites para componentes a través de <a href="https://github.com/StanAngeloff/compass-magick">compass-magick</a>.</li>
258
+ <li>Nuevo fallback para IE: Generaci&oacute;n din&aacute;mica de sprites para componentes a trav&eacute;s de <a href="https://github.com/StanAngeloff/compass-magick">compass-magick</a>.</li>
233
259
  <li>Se elimina el soporte para CSS3 Pie, siendo reemplazado por fallback de sprites.</li>
234
- <li>Reorganizaci&ooacute;n interna de la documentaci&ooacute;n.</li>
260
+ <li>Reorganizaci&oacute;n interna de la documentaci&oacute;n.</li>
235
261
  </ul>
236
262
  <a name="003"></a><h2>0.0.3</h2>
237
263
  <ul>
@@ -265,7 +291,8 @@ gem &#39;picasso&#39;, &#39;~&gt; 0.1.0&#39;</code></pre>
265
291
  </ul>
266
292
  <a name="otros"></a><h2>Otros</h2>
267
293
  <ul>
268
- <li>Creaci&oacute;n de sprites: Implementar API para poder detectar si un archivo ya existe y obtener el path de im&aacute;genes especificado en el config.rb.</li>
294
+ <li>Creaci&oacute;n de sprites: Implementar API para poder detectar si un archivo ya existe.</li>
295
+ <li>Mejoras en la documentaci&oacute;n especificando variables por defecto de cada componente y mejor descripci&oacute;n de sus par&aacute;metros.</li>
269
296
  </ul>
270
297
 
271
298
  <a name="mejoras-antildeadidos"></a><h1>Mejoras / A&ntilde;adidos</h1>
@@ -367,56 +394,86 @@ $ git push</code></pre>
367
394
  <a name="componentes-disponibles"></a><h2>Componentes disponibles</h2>
368
395
 
369
396
  <a name="buttons"></a><h2>Buttons</h2>
370
- <p>Ideales para situaciones en que se necesita un call-to-action.
397
+ <p>Disponibles en 3 versiones: 3D, Glossy y Mini.
371
398
 
372
399
  </p>
373
- <a name="ejemplos"></a><a name="ejemplos"></a><h3>Ejemplos</h3>
374
- <p><a class="button-demo-1" href="#">
375
- <span>Comprar</span>
376
- </a>
400
+ <a name="sass"></a><a name="sass"></a><a name="sass"></a><h4>Sass</h4>
401
+ <p>Importaci&oacute;n:
377
402
 
378
403
  </p>
379
- <p><a class="button-demo-2" href="#">
380
- <span>Buscar</span>
381
- </a>
404
+ <pre><code class="lang-css">@import &quot;picasso/components/buttons&quot;;</code></pre>
405
+ <a name="3d-buttons"></a><h3>3D Buttons</h3>
406
+ <a name="ejemplos"></a><a name="ejemplos"></a><a name="ejemplos"></a><h4>Ejemplos</h4>
407
+ <p><a class="button-3d-demo-1" href="#">Comprar</a>
408
+ <a class="button-3d-demo-2" href="#">Buscar</a>
409
+ <a class="button-3d-demo-3" href="#">Reservar</a>
410
+ <a class="button-3d-demo-4" href="#">Un texto demasiado largo para este bot&oacute;n</a>
382
411
 
383
412
  </p>
384
- <p><a class="button-demo-3" href="#">
385
- <span>Reservar</span>
386
- </a>
413
+ <p><a class="button-3d-demo-5" href="#">Bot&oacute;n full-width</a>
414
+
415
+ </p>
416
+ <p><a class="button-3d-demo-6" href="#">Bot&oacute;n redondeado</a>
417
+
418
+ </p>
419
+ <a name="html"></a><a name="html"></a><a name="html"></a><h4>HTML</h4>
420
+ <pre><code class="lang-html">&lt;a class=&quot;button&quot; href=&quot;#&quot;&gt;Comprar&lt;/a&gt;</code></pre>
421
+ <h4>Sass</h4>
422
+ <p>Mixin con los par&aacute;metros por defecto:
423
+
424
+ </p>
425
+ <pre><code class="lang-css">.button{
426
+ @include button-3d();
427
+ }</code></pre>
428
+ <p>Mixin con par&aacute;metros personalizados. Disponibles: background, color, font-size, full-width y rounded:
429
+
430
+ </p>
431
+ <pre><code class="lang-css">.button{
432
+ @include button-3d(red, white, 24px, true, true);
433
+ }</code></pre>
434
+ <a name="fallback-para-ie"></a><a name="fallback-para-ie"></a><a name="fallback-para-ie"></a><h4>Fallback para IE</h4>
435
+ <p>La estrategia de los botones es siempre graceful degradation.
436
+
437
+
387
438
 
388
439
  </p>
389
- <p><a class="button-demo-4" href="#">
440
+ <a name="glossy-buttons"></a><h3>Glossy Buttons</h3>
441
+ <h4>Ejemplos</h4>
442
+ <p><a class="button-glossy-demo-1" href="#">
443
+ <span>Comprar</span>
444
+ </a>
445
+ <a class="button-glossy-demo-2" href="#">
446
+ <span>Buscar</span>
447
+ </a>
448
+ <a class="button-glossy-demo-3" href="#">
449
+ <span>Reservar</span>
450
+ </a>
451
+ <a class="button-glossy-demo-4" href="#">
390
452
  <span>Un texto demasiado largo para este bot&oacute;n</span>
391
453
  </a>
392
454
 
393
455
  </p>
394
- <a name="html"></a><a name="html"></a><h3>HTML</h3>
456
+ <h4>HTML</h4>
395
457
  <pre><code class="lang-html">&lt;a class=&quot;button&quot; href=&quot;#&quot;&gt;
396
458
  &lt;span&gt;Comprar&lt;/span&gt;
397
459
  &lt;/a&gt;</code></pre>
398
- <a name="sass"></a><a name="sass"></a><h3>Sass</h3>
399
- <p>Importaci&oacute;n:
400
-
401
- </p>
402
- <pre><code class="lang-css">@import &quot;picasso/components/buttons&quot;;</code></pre>
403
460
  <p>Mixin con los par&aacute;metros por defecto:
404
461
 
405
462
  </p>
406
463
  <pre><code class="lang-css">.button{
407
- @include button();
464
+ @include button-glossy();
408
465
  }</code></pre>
409
466
  <p>Mixin con par&aacute;metros personalizados. Disponibles: ancho, alto, background y color:
410
467
 
411
468
  </p>
412
469
  <pre><code class="lang-css">.button{
413
- @include button(100px, 30px, red, white);
470
+ @include button-glossy(100px, 30px, red, white);
414
471
  }</code></pre>
415
- <a name="fallback-para-ie"></a><a name="fallback-para-ie"></a><h3>Fallback para IE</h3>
472
+ <h4>Fallback para IE</h4>
416
473
  <p>Variable y valor por defecto:
417
474
 
418
475
  </p>
419
- <pre><code class="lang-css">$button-ie-fallback: &quot;sprites&quot; !default;</code></pre>
476
+ <pre><code class="lang-css">$button-glossy-ie-fallback: &quot;sprites&quot;;</code></pre>
420
477
  <p>Estrategias soportadas:
421
478
 
422
479
  </p>
@@ -424,59 +481,47 @@ $ git push</code></pre>
424
481
  <li><code>sprites</code></li>
425
482
  <li><code>GD</code></li>
426
483
  </ul>
427
- <a name="mini-buttons"></a><h2>Mini-Buttons</h2>
428
- <p>Perfectos para acciones simples que influyen en la interfaz.
484
+ <a name="mini-buttons"></a><h3>Mini Buttons</h3>
485
+ <p>Perfectos para acciones simples en la interfaz.
429
486
 
430
487
  </p>
431
- <h3>Ejemplos</h3>
432
- <p><a class="mini-button-demo-1" href="#">
488
+ <h4>Ejemplos</h4>
489
+ <p><a class="button-mini-demo-1" href="#">
433
490
  <span>Limpiar</span>
434
491
  </a>
435
-
436
- </p>
437
- <p><a class="mini-button-demo-2" href="#">
492
+ <a class="button-mini-demo-2" href="#">
438
493
  <span>Abrir</span>
439
494
  </a>
440
-
441
- </p>
442
- <p><a class="mini-button-demo-3" href="#">
495
+ <a class="button-mini-demo-3" href="#">
443
496
  <span>Descargar</span>
444
497
  </a>
445
-
446
- </p>
447
- <p><a class="mini-button-demo-4" href="#">
498
+ <a class="button-mini-demo-4" href="#">
448
499
  <span>Ir</span>
449
500
  </a>
450
501
 
451
-
452
-
453
502
  </p>
454
- <h3>HTML</h3>
455
- <pre><code class="lang-html">&lt;a class=&quot;mini-button&quot; href=&quot;#&quot;&gt;
456
- &lt;span&gt;Comprar&lt;/span&gt;
503
+ <h4>HTML</h4>
504
+ <pre><code class="lang-html">&lt;a class=&quot;button&quot; href=&quot;#&quot;&gt;
505
+ &lt;span&gt;Limpiar&lt;/span&gt;
457
506
  &lt;/a&gt;</code></pre>
458
- <h3>Sass</h3>
459
- <p>Importaci&oacute;n:
460
-
461
- </p>
462
- <pre><code class="lang-css">@import &quot;picasso/components/buttons&quot;;</code></pre>
507
+ <h4>Sass</h4>
463
508
  <p>Mixin con los par&aacute;metros por defecto:
464
509
 
465
510
  </p>
466
- <pre><code class="lang-css">.mini-button{
467
- @include mini-button();
511
+ <pre><code class="lang-css">.button{
512
+ @include button-mini();
468
513
  }</code></pre>
469
514
  <p>Mixin con par&aacute;metros personalizados. Disponibles: background y color:
470
515
 
471
516
  </p>
472
- <pre><code class="lang-css">.mini-button{
473
- @include button(grey, blue);
517
+ <pre><code class="lang-css">.button{
518
+ @include button-mini(grey, blue);
474
519
  }</code></pre>
475
- <h3>Fallback para IE</h3>
520
+ <h4>Fallback para IE</h4>
476
521
  <p>Variable y valor por defecto:
477
522
 
478
523
  </p>
479
- <pre><code class="lang-css">$mini-button-ie-fallback: &quot;sprites&quot; !default;</code></pre>
524
+ <pre><code class="lang-css">$button-mini-ie-fallback: &quot;sprites&quot;;</code></pre>
480
525
  <p>Estrategias soportadas:
481
526
 
482
527
  </p>
@@ -630,7 +675,7 @@ $ git push</code></pre>
630
675
  <p>Variable y valor por defecto:
631
676
 
632
677
  </p>
633
- <pre><code class="lang-css">$nav-ie-fallback: &quot;sprites&quot; !default;</code></pre>
678
+ <pre><code class="lang-css">$nav-ie-fallback: &quot;sprites&quot;;</code></pre>
634
679
  <p>Estrategias soportadas:
635
680
 
636
681
  </p>
@@ -1140,7 +1185,7 @@ $ git push</code></pre>
1140
1185
  <p>Variable y valor por defecto:
1141
1186
 
1142
1187
  </p>
1143
- <pre><code class="lang-css">$popup-ie-fallback: &quot;sprites&quot; !default;</code></pre>
1188
+ <pre><code class="lang-css">$popup-ie-fallback: &quot;sprites&quot;;</code></pre>
1144
1189
  <p>Estrategias soportadas:
1145
1190
 
1146
1191
  </p>
data/docs/arrows.html CHANGED
@@ -18,7 +18,8 @@
18
18
 
19
19
 
20
20
  <header>
21
- <h1>Picasso. Framework CSS/Sass.</h1>
21
+ <img src="img/picasso.png" />
22
+ <h1 class="title">Framework CSS/Sass.</h1>
22
23
  </header>
23
24
 
24
25
 
@@ -43,6 +44,8 @@
43
44
 
44
45
  <li><a href="./intro.html#actualizacioacuten">Actualizaci&amp;oacute;n</a></li>
45
46
 
47
+ <li><a href="./intro.html#opcional-instalacioacuten-de-oily-png">Opcional: Instalaci&amp;oacute;n de oily_png</a></li>
48
+
46
49
  </ol>
47
50
 
48
51
  </li>
@@ -52,6 +55,8 @@
52
55
 
53
56
  <ol>
54
57
 
58
+ <li><a href="./changelog.html#020">0.2.0</a></li>
59
+
55
60
  <li><a href="./changelog.html#010">0.1.0</a></li>
56
61
 
57
62
  <li><a href="./changelog.html#003">0.0.3</a></li>
@@ -105,8 +110,6 @@
105
110
 
106
111
  <li><a href="./buttons.html#buttons">Buttons</a></li>
107
112
 
108
- <li><a href="./buttons.html#mini-buttons">Mini-Buttons</a></li>
109
-
110
113
  <li><a href="./inputs.html#inputs">Inputs</a></li>
111
114
 
112
115
  <li><a href="./navs.html#navs">Navs</a></li>
data/docs/bubbles.html CHANGED
@@ -18,7 +18,8 @@
18
18
 
19
19
 
20
20
  <header>
21
- <h1>Picasso. Framework CSS/Sass.</h1>
21
+ <img src="img/picasso.png" />
22
+ <h1 class="title">Framework CSS/Sass.</h1>
22
23
  </header>
23
24
 
24
25
 
@@ -43,6 +44,8 @@
43
44
 
44
45
  <li><a href="./intro.html#actualizacioacuten">Actualizaci&amp;oacute;n</a></li>
45
46
 
47
+ <li><a href="./intro.html#opcional-instalacioacuten-de-oily-png">Opcional: Instalaci&amp;oacute;n de oily_png</a></li>
48
+
46
49
  </ol>
47
50
 
48
51
  </li>
@@ -52,6 +55,8 @@
52
55
 
53
56
  <ol>
54
57
 
58
+ <li><a href="./changelog.html#020">0.2.0</a></li>
59
+
55
60
  <li><a href="./changelog.html#010">0.1.0</a></li>
56
61
 
57
62
  <li><a href="./changelog.html#003">0.0.3</a></li>
@@ -105,8 +110,6 @@
105
110
 
106
111
  <li><a href="./buttons.html#buttons">Buttons</a></li>
107
112
 
108
- <li><a href="./buttons.html#mini-buttons">Mini-Buttons</a></li>
109
-
110
113
  <li><a href="./inputs.html#inputs">Inputs</a></li>
111
114
 
112
115
  <li><a href="./navs.html#navs">Navs</a></li>
data/docs/build/md/changelog.md CHANGED
@@ -1,5 +1,12 @@
1
1
  # Changelog
2
2
 
3
+ ## 0.2.0
4
+
5
+ * Fix degradados de botones en Chrome;
6
+ * Separaci&oacute;n de botones por tipo;
7
+ * Nuevos botones 3D;
8
+ * Se quita a oily_png como dependencia;
9
+
3
10
  ## 0.1.0
4
11
 
5
12
  * Agregados nuevos componentes:
@@ -12,9 +19,9 @@
12
19
  * Agregadas nuevas utilidades:
13
20
  * - Sprite: `insert-in-sprite()`
14
21
  * - IE: `after()` / `before()`
15
- * Nuevo fallback para IE: Generación dinámica de sprites para componentes a través de [compass-magick](https://github.com/StanAngeloff/compass-magick).
22
+ * Nuevo fallback para IE: Generaci&oacute;n din&aacute;mica de sprites para componentes a trav&eacute;s de [compass-magick](https://github.com/StanAngeloff/compass-magick).
16
23
  * Se elimina el soporte para CSS3 Pie, siendo reemplazado por fallback de sprites.
17
- * Reorganizaci&ooacute;n interna de la documentaci&ooacute;n.
24
+ * Reorganizaci&oacute;n interna de la documentaci&oacute;n.
18
25
 
19
26
  ## 0.0.3
20
27
 
data/docs/build/md/components/buttons.md CHANGED
@@ -1,138 +1,168 @@
1
- ## Buttons
2
-
3
- Ideales para situaciones en que se necesita un call-to-action.
4
-
5
- ### Ejemplos
6
-
7
- <a class="button-demo-1" href="#">
8
- <span>Comprar</span>
9
- </a>
10
-
11
- <a class="button-demo-2" href="#">
12
- <span>Buscar</span>
13
- </a>
14
-
15
- <a class="button-demo-3" href="#">
16
- <span>Reservar</span>
17
- </a>
18
-
19
- <a class="button-demo-4" href="#">
20
- <span>Un texto demasiado largo para este bot&oacute;n</span>
21
- </a>
22
-
23
- ### HTML
24
-
25
- ```html
26
- <a class="button" href="#">
27
- <span>Comprar</span>
28
- </a>
29
- ```
30
-
31
- ### Sass
32
-
33
- Importaci&oacute;n:
34
-
35
- ```css
36
- @import "picasso/components/buttons";
37
- ```
38
-
39
- Mixin con los par&aacute;metros por defecto:
40
-
41
- ```css
42
- .button{
43
- @include button();
44
- }
45
- ```
46
-
47
- Mixin con par&aacute;metros personalizados. Disponibles: ancho, alto, background y color:
48
-
49
- ```css
50
- .button{
51
- @include button(100px, 30px, red, white);
52
- }
53
- ```
54
-
55
- ### Fallback para IE
56
-
57
- Variable y valor por defecto:
58
-
59
- ```css
60
- $button-ie-fallback: "sprites" !default;
61
- ```
62
-
63
- Estrategias soportadas:
64
-
65
- * `sprites`
66
- * `GD`
67
-
68
-
69
-
70
-
71
- ## Mini-Buttons
72
-
73
- Perfectos para acciones simples que influyen en la interfaz.
74
-
75
- ### Ejemplos
76
-
77
- <a class="mini-button-demo-1" href="#">
78
- <span>Limpiar</span>
79
- </a>
80
-
81
- <a class="mini-button-demo-2" href="#">
82
- <span>Abrir</span>
83
- </a>
84
-
85
- <a class="mini-button-demo-3" href="#">
86
- <span>Descargar</span>
87
- </a>
88
-
89
- <a class="mini-button-demo-4" href="#">
90
- <span>Ir</span>
91
- </a>
92
-
93
-
94
-
95
- ### HTML
96
-
97
- ```html
98
- <a class="mini-button" href="#">
99
- <span>Comprar</span>
100
- </a>
101
- ```
102
-
103
- ### Sass
104
-
105
- Importaci&oacute;n:
106
-
107
- ```css
108
- @import "picasso/components/buttons";
109
- ```
110
-
111
- Mixin con los par&aacute;metros por defecto:
112
-
113
- ```css
114
- .mini-button{
115
- @include mini-button();
116
- }
117
- ```
118
-
119
- Mixin con par&aacute;metros personalizados. Disponibles: background y color:
120
-
121
- ```css
122
- .mini-button{
123
- @include button(grey, blue);
124
- }
125
- ```
126
-
127
- ### Fallback para IE
128
-
129
- Variable y valor por defecto:
130
-
131
- ```css
132
- $mini-button-ie-fallback: "sprites" !default;
133
- ```
134
-
135
- Estrategias soportadas:
136
-
137
- * `sprites`
1
+ ## Buttons
2
+
3
+ Disponibles en 3 versiones: 3D, Glossy y Mini.
4
+
5
+ #### Sass
6
+
7
+ Importaci&oacute;n:
8
+
9
+ ```css
10
+ @import "picasso/components/buttons";
11
+ ```
12
+
13
+ ### 3D Buttons
14
+
15
+ #### Ejemplos
16
+
17
+ <a class="button-3d-demo-1" href="#">Comprar</a>
18
+ <a class="button-3d-demo-2" href="#">Buscar</a>
19
+ <a class="button-3d-demo-3" href="#">Reservar</a>
20
+ <a class="button-3d-demo-4" href="#">Un texto demasiado largo para este bot&oacute;n</a>
21
+
22
+ <a class="button-3d-demo-5" href="#">Bot&oacute;n full-width</a>
23
+
24
+ <a class="button-3d-demo-6" href="#">Bot&oacute;n redondeado</a>
25
+
26
+ #### HTML
27
+
28
+ ```html
29
+ <a class="button" href="#">Comprar</a>
30
+ ```
31
+
32
+ #### Sass
33
+
34
+ Mixin con los par&aacute;metros por defecto:
35
+
36
+ ```css
37
+ .button{
38
+ @include button-3d();
39
+ }
40
+ ```
41
+
42
+ Mixin con par&aacute;metros personalizados. Disponibles: background, color, font-size, full-width y rounded:
43
+
44
+ ```css
45
+ .button{
46
+ @include button-3d(red, white, 24px, true, true);
47
+ }
48
+ ```
49
+
50
+ #### Fallback para IE
51
+
52
+ La estrategia de los botones es siempre graceful degradation.
53
+
54
+
55
+
56
+ ### Glossy Buttons
57
+
58
+ #### Ejemplos
59
+
60
+ <a class="button-glossy-demo-1" href="#">
61
+ <span>Comprar</span>
62
+ </a>
63
+ <a class="button-glossy-demo-2" href="#">
64
+ <span>Buscar</span>
65
+ </a>
66
+ <a class="button-glossy-demo-3" href="#">
67
+ <span>Reservar</span>
68
+ </a>
69
+ <a class="button-glossy-demo-4" href="#">
70
+ <span>Un texto demasiado largo para este bot&oacute;n</span>
71
+ </a>
72
+
73
+ #### HTML
74
+
75
+ ```html
76
+ <a class="button" href="#">
77
+ <span>Comprar</span>
78
+ </a>
79
+ ```
80
+
81
+ Mixin con los par&aacute;metros por defecto:
82
+
83
+ ```css
84
+ .button{
85
+ @include button-glossy();
86
+ }
87
+ ```
88
+
89
+ Mixin con par&aacute;metros personalizados. Disponibles: ancho, alto, background y color:
90
+
91
+ ```css
92
+ .button{
93
+ @include button-glossy(100px, 30px, red, white);
94
+ }
95
+ ```
96
+
97
+ #### Fallback para IE
98
+
99
+ Variable y valor por defecto:
100
+
101
+ ```css
102
+ $button-glossy-ie-fallback: "sprites";
103
+ ```
104
+
105
+ Estrategias soportadas:
106
+
107
+ * `sprites`
108
+ * `GD`
109
+
110
+
111
+
112
+ ### Mini Buttons
113
+
114
+ Perfectos para acciones simples en la interfaz.
115
+
116
+ #### Ejemplos
117
+
118
+ <a class="button-mini-demo-1" href="#">
119
+ <span>Limpiar</span>
120
+ </a>
121
+ <a class="button-mini-demo-2" href="#">
122
+ <span>Abrir</span>
123
+ </a>
124
+ <a class="button-mini-demo-3" href="#">
125
+ <span>Descargar</span>
126
+ </a>
127
+ <a class="button-mini-demo-4" href="#">
128
+ <span>Ir</span>
129
+ </a>
130
+
131
+ #### HTML
132
+
133
+ ```html
134
+ <a class="button" href="#">
135
+ <span>Limpiar</span>
136
+ </a>
137
+ ```
138
+
139
+ #### Sass
140
+
141
+ Mixin con los par&aacute;metros por defecto:
142
+
143
+ ```css
144
+ .button{
145
+ @include button-mini();
146
+ }
147
+ ```
148
+
149
+ Mixin con par&aacute;metros personalizados. Disponibles: background y color:
150
+
151
+ ```css
152
+ .button{
153
+ @include button-mini(grey, blue);
154
+ }
155
+ ```
156
+
157
+ #### Fallback para IE
158
+
159
+ Variable y valor por defecto:
160
+
161
+ ```css
162
+ $button-mini-ie-fallback: "sprites";
163
+ ```
164
+
165
+ Estrategias soportadas:
166
+
167
+ * `sprites`
138
168
  * `GD`