picasso 0.1.0 → 0.2.0

data/docs/todo.html

@@ -18,7 +18,8 @@
 
     
         <header>
-            <h1>Picasso. Framework CSS/Sass.</h1>
+            <img src="img/picasso.png" />
+            <h1 class="title">Framework CSS/Sass.</h1>
         </header>
     
 
@@ -43,6 +44,8 @@
                                     
                                         <li><a href="./intro.html#actualizacioacuten">Actualizaci&amp;oacute;n</a></li>
                                     
+                                        <li><a href="./intro.html#opcional-instalacioacuten-de-oily-png">Opcional: Instalaci&amp;oacute;n de oily_png</a></li>
+                                    
                                 </ol>
                             
                         </li>
@@ -52,6 +55,8 @@
                             
                                 <ol>
                                     
+                                        <li><a href="./changelog.html#020">0.2.0</a></li>
+                                    
                                         <li><a href="./changelog.html#010">0.1.0</a></li>
                                     
                                         <li><a href="./changelog.html#003">0.0.3</a></li>
@@ -105,8 +110,6 @@
                                     
                                         <li><a href="./buttons.html#buttons">Buttons</a></li>
                                     
-                                        <li><a href="./buttons.html#mini-buttons">Mini-Buttons</a></li>
-                                    
                                         <li><a href="./inputs.html#inputs">Inputs</a></li>
                                     
                                         <li><a href="./navs.html#navs">Navs</a></li>
@@ -176,7 +179,8 @@
 </ul>
 <a name="otros"></a><h2>Otros</h2>
 <ul>
-<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>
+<li>Creaci&oacute;n de sprites: Implementar API para poder detectar si un archivo ya existe.</li>
+<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>
 </ul>
 
 </article>

data/docs/utils.html

@@ -18,7 +18,8 @@
 
     
         <header>
-            <h1>Picasso. Framework CSS/Sass.</h1>
+            <img src="img/picasso.png" />
+            <h1 class="title">Framework CSS/Sass.</h1>
         </header>
     
 
@@ -43,6 +44,8 @@
                                     
                                         <li><a href="./intro.html#actualizacioacuten">Actualizaci&amp;oacute;n</a></li>
                                     
+                                        <li><a href="./intro.html#opcional-instalacioacuten-de-oily-png">Opcional: Instalaci&amp;oacute;n de oily_png</a></li>
+                                    
                                 </ol>
                             
                         </li>
@@ -52,6 +55,8 @@
                             
                                 <ol>
                                     
+                                        <li><a href="./changelog.html#020">0.2.0</a></li>
+                                    
                                         <li><a href="./changelog.html#010">0.1.0</a></li>
                                     
                                         <li><a href="./changelog.html#003">0.0.3</a></li>
@@ -105,8 +110,6 @@
                                     
                                         <li><a href="./buttons.html#buttons">Buttons</a></li>
                                     
-                                        <li><a href="./buttons.html#mini-buttons">Mini-Buttons</a></li>
-                                    
                                         <li><a href="./inputs.html#inputs">Inputs</a></li>
                                     
                                         <li><a href="./navs.html#navs">Navs</a></li>

data/lib/picasso/version.rb

@@ -1,3 +1,3 @@
 module Picasso
-  VERSION = "0.1.0"
+  VERSION = "0.2.0"
 end

data/picasso.gemspec

@@ -18,5 +18,4 @@ Gem::Specification.new do |gem|
 
   gem.add_dependency("compass", [">= 0.12.1"])
   gem.add_dependency("compass-magick", [">= 0.1.6"])
-  gem.add_dependency("oily_png", [">= 1.0.2"])
 end

data/stylesheets/picasso/components/_accordions.scss

@@ -1,12 +1,12 @@
 //
 // Accordions
 //
-$accordion-default-height: 20px;
-$accordion-default-background-color: #013D93;
-$accordion-default-text-color: #FFFFFF;
+$accordion-default-height: 20px !default;
+$accordion-default-background-color: #013D93 !default;
+$accordion-default-text-color: #FFFFFF !default;
 
-$arrow-height: 8px;
-$arrow-width: 5px; 
+$accordion-default-arrow-height: 8px !default;
+$accordion-default-arrow-width: 5px !default;
 
 @mixin accordion(
 	$height: $accordion-default-height,
@@ -37,17 +37,17 @@ $arrow-width: 5px;
 	
 	.accordion-header-open {
 		.arrow {
-			border-left: $arrow-width solid transparent;
-			border-right: $arrow-width solid transparent;
-			border-top: $arrow-height solid $text-color;
+			border-left: $accordion-default-arrow-width solid transparent;
+			border-right: $accordion-default-arrow-width solid transparent;
+			border-top: $accordion-default-arrow-height solid $text-color;
 		}
 	}
 	
 	.accordion-header-close {
 		.arrow {
-			border-left: $arrow-height solid $text-color;
-			border-bottom: $arrow-width solid transparent;
-			border-top: $arrow-width solid transparent;
+			border-left: $accordion-default-arrow-height solid $text-color;
+			border-bottom: $accordion-default-arrow-width solid transparent;
+			border-top: $accordion-default-arrow-width solid transparent;
 		}
 	}
 	
@@ -79,13 +79,13 @@ $arrow-width: 5px;
 	
 	.accordion-header-open {
 		.arrow {
-			top: ($height - $arrow-width) / 2;
+			top: ($height - $accordion-default-arrow-width) / 2;
 		}
 	}
 	
 	.accordion-header-close {
 		.arrow {
-			top: ($height - $arrow-height) / 2;
+			top: ($height - $accordion-default-arrow-height) / 2;
 		}
 	}
 	

data/stylesheets/picasso/components/_arrows.scss

@@ -4,8 +4,8 @@
 
 @import "picasso/utils/ie";
 
-$arrow-default-background: #888;
-$arrow-default-color: white;
+$arrow-default-background: #888 !default;
+$arrow-default-color: white !default;
 
 @mixin arrow(
 

data/stylesheets/picasso/components/_bubbles.scss

@@ -6,11 +6,11 @@
 @import "compass/typography/text/ellipsis";
 @import "picasso/utils/ie";
 
-$bubble-default-width : auto;
-$bubble-default-background : #EEE;
-$bubble-default-color : #999;
-$bubble-default-ellipsis : false;
-$bubble-default-ellipsis-position : right;
+$bubble-default-width : auto !default;
+$bubble-default-background : #EEE !default;
+$bubble-default-color : #999 !default;
+$bubble-default-ellipsis : false !default;
+$bubble-default-ellipsis-position : right !default;
 
 @mixin bubble(
 

data/stylesheets/picasso/components/_buttons.scss

@@ -1,2 +1,3 @@
-@import "buttons/buttons";
-@import "buttons/mini-buttons";
+@import "buttons/3d";
+@import "buttons/glossy";
+@import "buttons/mini";

data/stylesheets/picasso/components/_inputs.scss

@@ -6,13 +6,13 @@
 @import "compass/css3/box-sizing";
 @import "compass/css3/box-shadow";
 
-$text-input-default-width: 200px;
-$text-input-default-height: 20px;
-$text-input-default-border-color: #DDD;
-$text-input-default-border-focus-color: #319fda;
-$text-input-default-border-radius: 3px 3px 3px 3px;
-$text-input-default-text-color: #333333;
-$text-input-default-font-size: 11px;
+$text-input-default-width: 200px !default;
+$text-input-default-height: 20px !default;
+$text-input-default-border-color: #DDD !default;
+$text-input-default-border-focus-color: #319fda !default;
+$text-input-default-border-radius: 3px 3px 3px 3px !default;
+$text-input-default-text-color: #333333 !default;
+$text-input-default-font-size: 11px !default;
 
 @mixin input(
 	$width: $text-input-default-width,

data/stylesheets/picasso/components/_list-grids.scss

@@ -4,12 +4,12 @@
 
 @import "picasso/utils/clearfix";
 
-$list-grid-default-cell-width: 130px;
-$list-grid-default-cell-height: 30px;
-$list-grid-default-border-color: #CCCCCC;
-$list-grid-default-odd-color: #EEEEEE;
-$list-grid-default-even-color: #FFFFFF;
-$list-grid-default-hover-color: #319fda;
+$list-grid-default-cell-width: 130px !default;
+$list-grid-default-cell-height: 30px !default;
+$list-grid-default-border-color: #CCCCCC !default;
+$list-grid-default-odd-color: #EEEEEE !default;
+$list-grid-default-even-color: #FFFFFF !default;
+$list-grid-default-hover-color: #319fda !default;
 
 @mixin list-grid(
 	$cell-width: $list-grid-default-cell-width,

data/stylesheets/picasso/components/_navs.scss

@@ -7,21 +7,21 @@
 @import "compass/css3/border-radius";
 @import "picasso/utils/sprite";
 
-$nav-default-font-size: 16px;
-$nav-default-font-family: sans-serif;
-$nav-default-image-dir: '';
+$nav-default-font-size: 16px !default;
+$nav-default-font-family: sans-serif !default;
+$nav-default-image-dir: '' !default;
 $nav-sprite-created: false !default;
-$nav-sprite-name: "picasso-nav";
+$nav-sprite-name: "picasso-nav" !default;
 $nav-ie-fallback: "sprites" !default;
 $nav-active-item-class: "active" !default;
 $nav-last-item-class: "last" !default;
 
-$nav-default-height : 40px;
-$nav-default-width : 435px;
-$nav-default-background: white;
-$nav-default-border-color: #ACACAC;
-$nav-default-shadow-color: black;
-$nav-default-float: left;
+$nav-default-height : 40px !default;
+$nav-default-width : 435px !default;
+$nav-default-background: white !default;
+$nav-default-border-color: #ACACAC !default;
+$nav-default-shadow-color: black !default;
+$nav-default-float: left !default;
 
 @mixin nav(
 

data/stylesheets/picasso/components/_pagination.scss

@@ -4,14 +4,14 @@
 
 @import "compass/css3/border-radius";
 
-$pagination-default-link-color : #319FDA;
-$pagination-default-page-color : #888;
-$pagination-default-background-page-color : #EEE;
-$pagination-default-border-color : #CCC;
-$pagination-default-border-radius : 5px;
-$pagination-default-hover-color : #FFF;
-$pagination-default-hover-background-color : #013D93;
-$pagination-default-size : 27px;
+$pagination-default-link-color : #319FDA !default;
+$pagination-default-page-color : #888 !default;
+$pagination-default-background-page-color : #EEE !default;
+$pagination-default-border-color : #CCC !default;
+$pagination-default-border-radius : 5px !default;
+$pagination-default-hover-color : #FFF !default;
+$pagination-default-hover-background-color : #013D93 !default;
+$pagination-default-size : 27px !default;
 
 @mixin pagination(
 

data/stylesheets/picasso/components/_popups.scss

@@ -7,23 +7,23 @@
 @import "picasso/utils/sprite";
 @import "picasso/utils/ie";
 
-$popup-default-background: white;
-$popup-default-border-radius: 3px;
-$popup-default-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 10px;
-$popup-default-background-border: #000000;
-$popup-default-background-border-opacity: 0.7;
-$popup-default-close-button-background: #319FDA;
-$popup-default-close-button-color: white;
-$popup-default-title-background: none repeat scroll 0 0 #F7F7F7;
-$popup-default-title-color: #003770;
+$popup-default-background: white !default;
+$popup-default-border-radius: 3px !default;
+$popup-default-box-shadow: rgba(0, 0, 0, 0.5) 0px 0px 10px !default;
+$popup-default-background-border: #000000 !default;
+$popup-default-background-border-opacity: 0.7 !default;
+$popup-default-close-button-background: #319FDA !default;
+$popup-default-close-button-color: white !default;
+$popup-default-title-background: none repeat scroll 0 0 #F7F7F7 !default;
+$popup-default-title-color: #003770 !default;
 
-$popup-default-arrow-height: 10px;
-$popup-default-arrow-padding: 10px;
-$popup-default-close-button-height: 20px;
-$popup-default-close-button-border: 3px;
-$popup-default-close-button-size: $popup-default-close-button-height + ($popup-default-close-button-border * 2);
+$popup-default-arrow-height: 10px !default;
+$popup-default-arrow-padding: 10px !default;
+$popup-default-close-button-height: 20px !default;
+$popup-default-close-button-border: 3px !default;
+$popup-default-close-button-size: $popup-default-close-button-height + ($popup-default-close-button-border * 2) !default;
 $popup-sprite-created: false !default;
-$popup-sprite-name: "picasso-popup";
+$popup-sprite-name: "picasso-popup" !default;
 $popup-ie-fallback: "sprites" !default;
 
 @mixin popup(

data/stylesheets/picasso/components/buttons/_3d.scss

@@ -0,0 +1,127 @@
+//
+// 3D Buttons
+//
+
+@import "compass/css3/images";
+@import "compass/css3/border-radius";
+@import "compass/css3/text-shadow";
+@import "compass/css3/box-shadow";
+@import "picasso/utils/sprite";
+
+$button-3d-default-background	  : #F73741 !default;
+$button-3d-default-color		  : white !default;
+$button-3d-default-font-size	  : 13px !default;
+$button-3d-default-full-width     : false !default;
+$button-3d-default-full-rounded   : false !default;
+
+@mixin button-3d(
+
+    // Background del boton
+    $background: $button-3d-default-background,
+
+    // Color del botón
+    $color: $button-3d-default-color,
+
+    // Tamaño de la fuente del botón
+    $font-size: $button-3d-default-font-size,
+
+    // Boton ancho al 100%
+    $full-width: $button-3d-default-full-width,
+
+    // Boton con bordes al 100%
+    $full-rounded: $button-3d-default-full-rounded
+
+){
+
+    @include button-3d-layout($font-size, $full-width, $full-rounded);
+    @include button-3d-visual($background, $color, $font-size, $full-rounded);
+
+}
+
+@mixin button-3d-layout($font-size, $full-width, $full-rounded){
+    padding: 0 $font-size;
+
+    @if $full-width == true {
+        display: block;
+    } @else {
+        display: inline-block;
+    }
+
+    @if $full-rounded == true {
+        line-height: 1.75em;
+    } @else {
+        line-height: 2.2em;
+    }
+
+    &:active {
+        position:relative;
+        top:1px;
+    }
+
+}
+
+
+@mixin button-3d-visual($background, $color, $font-size, $full-rounded){
+    color: $color;
+    border: 1px solid darken($background, 20);
+    font-family: sans-serif;
+    font-size: $font-size;
+    text-decoration:none;
+    background-color: $background;
+    text-align: center;
+    @include text-shadow(0 1px 0 desaturate(invert($color), 100));
+    @include background-image(linear-gradient($background, darken($background, 30)));
+    @include box-shadow(
+        0 0.1em 0.1em rgba(0, 0, 0, 0.5), 
+        inset 0 0.1em 0 rgba(255, 255, 255, 0.5)
+    );
+
+    @if $full-rounded == true {
+        @include border-radius(1.1em);
+    } @else {
+        @include border-radius(0.4em);
+    }
+
+    &:visited {
+        color: $color;
+    }
+
+    &:hover {
+        text-decoration: none;
+        color: $color;
+        background-color: saturate($background, 10);
+        @include background-image(linear-gradient(rgba(255, 255, 255, 0), darken($background, 20)));
+        @include box-shadow(
+            0 0.1em 0.1em rgba(0, 0, 0, 0.5), 
+            inset 0 0.1em 0 rgba(255, 255, 255, 0.5),
+            inset 0 0 1em saturate($background, 10)
+        );        
+        
+    }
+
+    &:active {
+        @include background-image(linear-gradient($background, darken($background, 30)));
+        @include text-shadow(0 -1px 0 desaturate(invert($color), 100));
+        @include box-shadow(
+            0 0.1em 0.1em rgba(0, 0, 0, 0.1),
+            inset 0 0.1em 0.2em rgba(0, 0, 0, 0.5),
+            inset 0 0.1em 0 rgba(0, 0, 0, 0.1),
+            inset 0 0 1em rgba(0, 0, 0, 0.75)
+        );
+    }
+
+    .ie7 &, .ie8 &, .ie9 &{
+        
+        @include filter-gradient($background, darken($background, 30));
+
+        &:hover {
+            @include filter-gradient(rgba(255, 255, 255, 0), darken($background, 20));
+        }
+
+        &:active {
+            @include filter-gradient($background, darken($background, 30));
+        }        
+
+    }
+
+}