picasso 0.1.0 → 0.2.0

Sign up to get free protection for your applications and to get access to all the features.
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`