picasso 0.0.3 → 0.1.0

data/stylesheets/picasso/components/_arrows.scss

@@ -2,6 +2,8 @@
 // Arrows
 //
 
+@import "picasso/utils/ie";
+
 $arrow-default-background: #888;
 $arrow-default-color: white;
 
@@ -18,7 +20,7 @@ $arrow-default-color: white;
 
 }
 
-@mixin arrow-visual($background, $color) {
+@mixin arrow-visual($background: $arrow-default-background, $color: $arrow-default-color) {
 
     background: $background;
     color: $color;
@@ -26,7 +28,7 @@ $arrow-default-color: white;
     font-style: normal;
     font-size: 9px;
 
-    &:after{
+    &:after, .ie7 & .after{
         border-top: 7px solid transparent;
         border-bottom: 7px solid transparent;
         border-left: 7px solid $background;
@@ -42,7 +44,7 @@ $arrow-default-color: white;
     line-height: 16px;
     position: relative;
 
-    &:after{
+    &:after, .ie7 & .after{
         content: "";                
         position: absolute;
         top: 0;
@@ -50,5 +52,9 @@ $arrow-default-color: white;
         width: 0;
         height: 0;
     }
+    
+    .ie7 &{
+    	@include after;
+    }
 
 }

data/stylesheets/picasso/components/_bubbles.scss

@@ -4,37 +4,42 @@
 
 @import "compass/css3/border-radius";
 @import "compass/typography/text/ellipsis";
-//@import "compass/css3/pie";
+@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;
 
 @mixin bubble(
 
-	// Ancho del elemento
-	$width: $bubble-default-width, 
+    // Ancho del elemento
+    $width: $bubble-default-width, 
 
-	// Background del elemento
-	$background: $bubble-default-background, 
+    // Background del elemento
+    $background: $bubble-default-background, 
 
-	// Color del texto del elemento
-	$color: $bubble-default-color,
+    // Color del texto del elemento
+    $color: $bubble-default-color,
 
     // Seteo de ellipsis
-    $ellipsis: $bubble-default-ellipsis
+    $ellipsis: $bubble-default-ellipsis,
+
+    // Seteo de posición de ellipsis
+    $ellipsis-position: $bubble-default-ellipsis-position
+    
     ){
 
-	@include bubble-layout($width);
-	@include bubble-visual($background, $color, $ellipsis);
+    @include bubble-layout($width, $ellipsis-position);
+    @include bubble-visual($background, $color, $ellipsis);
 
 }
 
-@mixin bubble-visual($background, $color, $ellipsis){
+@mixin bubble-visual($background: $bubble-default-background, $color: $bubble-default-color, $ellipsis: $bubble-default-ellipsis){
 
-	background: $background;
-	@include border-radius(5px);
+    background: $background;
+    @include border-radius(5px);
 
     blockquote{
         color: $color;
@@ -49,7 +54,7 @@ $bubble-default-ellipsis : false;
         } 
     }
 
-    &:after{
+    &:after, .ie7 & .after{
         border-left: 10px solid transparent;
         border-right: 10px solid transparent;
         border-top: 15px solid  $background;
@@ -57,20 +62,26 @@ $bubble-default-ellipsis : false;
 
 }
 
-@mixin bubble-layout($width){
+@mixin bubble-layout($width: $bubble-default-width, $ellipsis-position: $bubble-default-ellipsis-position){
 
     padding: 10px;
     display: block;
     width: $width;
     position: relative;
 
-    &:after{
+    &:after, .ie7 & .after{
         content: "";                
         position: absolute;
         bottom: -15px;
-        right: 20px;
+        @if $ellipsis-position {
+            #{$ellipsis-position}: 20px;
+        }
         width: 0;
         height: 0;
     }
 
+    .ie7 &{
+        @include after;
+    }
+
 }

data/stylesheets/picasso/components/_inputs.scss

@@ -0,0 +1,59 @@
+//
+// inputs
+//
+
+@import "compass/css3/border-radius";
+@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;
+
+@mixin input(
+	$width: $text-input-default-width,
+	$height: $text-input-default-height,
+	$border-color: $text-input-default-border-color,
+	$border-focus-color: $text-input-default-border-focus-color,
+	$border-radius: $text-input-default-border-radius,
+	$text-color: $text-input-default-text-color,
+	$font-size: $text-input-default-font-size
+){
+	
+	@include input-layout($width, $height);
+	@include input-visual($border-color, $border-focus-color, $border-radius, $text-color, $font-size);
+}
+
+@mixin input-layout($width: $text-input-default-width, $height: $text-input-default-height) {
+	width: $width;
+	height: $height;
+    line-height: $height;
+    padding: 1px;
+}
+
+@mixin input-visual(
+	$border-color: $text-input-default-border-color,
+	$border-focus-color: $text-input-default-border-focus-color,
+	$border-radius: $text-input-default-border-radius,
+	$text-color: $text-input-default-text-color,
+	$font-size: $text-input-default-font-size
+) {
+	border: 1px solid $border-color;
+	border-top: 1px solid darken($border-color, 30%);
+    color: $text-color;
+    font-size: $font-size;
+    
+    @include box-sizing(border-box);
+    @include border-radius($border-radius);
+    @include box-shadow(0 1px 2px 0 rgba(0, 0, 0, 0.2) inset);
+    
+    &:focus {
+    	outline:0;
+    	border:1px solid $border-focus-color;
+    	@include box-shadow(rgba(0,0,0,0.2) 0 1px 2px 0 inset, #01a9db 0 0 2px 0);
+    }
+}

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

@@ -0,0 +1,118 @@
+//
+// list-grids
+//
+
+@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;
+
+@mixin list-grid(
+	$cell-width: $list-grid-default-cell-width,
+	$cell-height: $list-grid-default-cell-height,
+	$border-color: $list-grid-default-border-color,
+	$odd-color: $list-grid-default-odd-color,
+	$even-color: $list-grid-default-even-color,
+	$hover-color: $list-grid-default-hover-color 
+){
+	
+	@include list-grid-layout($cell-width, $cell-height);
+	@include list-grid-visual($border-color, $odd-color, $even-color, $hover-color);
+}
+
+@mixin list-grid-layout(
+	$cell-width: $list-grid-default-cell-width,
+	$cell-height: $list-grid-default-cell-height
+) {
+
+	@include clearfix;
+	
+	ul {
+		float: left;
+		padding: 0px;
+		margin: 0px;
+		width: $cell-width;
+		
+		li {
+			height: $cell-height;
+	    	line-height: $cell-height;
+	    	padding-left: 10px;
+	    	padding-right: 10px;
+	    }
+	}
+}
+
+@mixin list-grid-visual(
+	$border-color: $list-grid-default-border-color,
+	$odd-color: $list-grid-default-odd-color,
+	$even-color: $list-grid-default-even-color,
+	$hover-color: $list-grid-default-hover-color
+) {
+	$cell-border: 1px;
+
+	ul {
+		list-style: none outside none;
+		border-top: 1px solid $border-color;
+		border-bottom: 1px solid $border-color;
+		border-right: 1px solid $border-color;
+		
+		// first
+		&:first-child{
+			border-left: 1px solid $border-color;
+		}
+		
+		li {
+	    	text-align: center;
+	    	border: $cell-border solid transparent;
+	    	
+	    	// first
+	    	&:first-child{
+	    		border-bottom: 1px solid $border-color;
+	    	}
+			
+			// odd
+			&:nth-child(odd) {
+				background: none repeat scroll 0 0 $odd-color;
+			}
+			
+			// even
+			&:nth-child(even) {
+				background: none repeat scroll 0 0 $even-color;
+			}
+
+		}
+		
+		& li.hover-cell:hover {
+			border: $cell-border solid $hover-color;
+			background: lighten($hover-color, 45%);
+			cursor: pointer;
+		}
+
+		//IE
+		.ie7 &, .ie8 &{
+
+			li{
+
+		    	&:first-child{
+		    		background: none repeat scroll 0 0 $odd-color;
+		    	}
+
+				&.even {
+					background: none repeat scroll 0 0 $even-color;
+				}
+
+				&.odd {
+					background: none repeat scroll 0 0 $odd-color;
+				}
+
+			}
+
+		}
+
+	}
+
+}

data/stylesheets/picasso/components/_navs.scss

@@ -0,0 +1,266 @@
+//
+// Navs
+//
+
+@import "compass/css3/images";
+@import "compass/css3/box-shadow";
+@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-sprite-created: false !default;
+$nav-sprite-name: "picasso-nav";
+$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;
+
+@mixin nav(
+
+	// Ancho del componente
+	$width: $nav-default-width,
+
+	// Alto del componente
+	$height: $nav-default-height,
+
+	// Background del componente
+	$background: $nav-default-background,
+
+	// Borde
+	$border: $nav-default-border-color,
+
+	// Sombra
+	$shadow: $nav-default-shadow-color,
+
+	// Float
+	$float: $nav-default-float
+
+	){
+
+	@include nav-layout($width, $height, $float);
+	@include nav-visual($background, $border, $shadow, $width, $height);
+
+}
+
+@mixin nav-layout($width: $nav-default-width, $height: $nav-default-height, $float: $nav-default-float){
+
+	@include clearfix;
+
+	ul{
+		margin: 0;
+		padding: 0;
+		text-align: center;
+		float: $float;
+		@include clearfix;
+
+		li{
+			display: inline-block;
+			height: $height;
+			line-height: $height;
+			float: left;
+
+			a{
+				display: block;
+				padding: 0 15px;
+			}
+
+		}
+
+		.ie7 &, .ie8 &, .ie9 &{
+
+			@if $nav-ie-fallback == "sprites" {
+
+				li{
+					height: $height + 6;
+				}
+
+			} @else {
+
+				li{
+					height: $height;
+				}
+
+			}
+
+		}
+
+	}
+
+}
+
+@mixin nav-visual($background: $nav-default-background, $border: $nav-default-border-color, $shadow: $nav-default-shadow-color, $width: $nav-default-width, $height: $nav-default-height){
+
+	ul{
+		list-style: none;
+		@include box-shadow(0 6px 6px -6px $shadow);
+
+		li{
+			@include background-image(linear-gradient($background, darken($background, 10%)));
+			border-left: 1px solid $border;
+			border-top: 1px solid $border;
+			border-bottom: 1px solid $border;
+
+			&:hover{
+				@include background-image(linear-gradient($background, darken($background, 5%)));
+			}
+
+			&:first-child{
+				@include border-left-radius(5px);
+			}
+
+			&:last-child{
+				@include border-right-radius(5px);
+				border-right: 1px solid $border;
+			}
+
+			a{
+				font-size: $nav-default-font-size;
+				font-family: $nav-default-font-family;
+			}
+
+		}
+
+		.#{$nav-active-item-class}{
+			@include background-image(linear-gradient(darken($background, 10%), $background));
+		}
+
+		.ie7 &, .ie8 &, .ie9 &{
+
+			@if $nav-ie-fallback == "sprites" {
+
+				$nav-image: magick-canvas($width, $height * 3 + (6 * 3),
+
+					//Normal
+					magick-compose(
+						magick-canvas($width, $height + 6,
+							magick-compose(magick-canvas($width, $height,
+								magick-fill(magick-linear-gradient($background, darken($background, 10%)))
+								magick-corners(5px)
+								magick-border($border, 5px, 1px)
+							))
+							magick-drop-shadow(270deg, 2px, 6px, $shadow)
+						),
+						0, 0
+					),
+
+					//Hover
+					magick-compose(
+						magick-canvas($width, $height + 6,
+							magick-compose(magick-canvas($width, $height,
+								magick-fill(magick-linear-gradient($background, darken($background, 5%)))
+								magick-corners(5px)
+								magick-border($border, 5px, 1px)
+							))
+							magick-drop-shadow(270deg, 2px, 6px, $shadow)
+						),
+						0, $height + 6
+					),
+
+					//Active
+					magick-compose(
+						magick-canvas($width, $height + 6,
+							magick-compose(magick-canvas($width, $height,
+								magick-fill(magick-linear-gradient(darken($background, 10%), $background))
+								magick-corners(5px)
+								magick-border($border, 5px, 1px)
+							))
+							magick-drop-shadow(270deg, 2px, 6px, $shadow)
+						),
+						0, ($height * 2) + (6 * 2)
+					)
+
+				);
+
+				$initial-position: insert-in-sprite($nav-sprite-created, $nav-sprite-name, $nav-image, $width, (($height * 3) + (6 * 3)));
+				$nav-sprite-created: true;
+
+				li{
+					border-left: none;
+					border-top: none;
+					border-bottom: none;
+					background: transparent generated-image-url($nav-sprite-name + ".png") no-repeat center ((-1) * $initial-position);
+
+					a{
+						border-left: 1px solid $border;
+					}
+
+					&:hover{
+						background: transparent generated-image-url($nav-sprite-name + ".png") center ((-1) * ($initial-position + $height + 6)) no-repeat;
+					}
+
+					&:first-child {
+						background: transparent generated-image-url($nav-sprite-name + ".png") no-repeat left ((-1) * $initial-position);
+
+						a{
+							border-left: none;
+						}
+
+						&:hover{
+							background: transparent generated-image-url($nav-sprite-name + ".png") left ((-1) * ($initial-position + $height + 6)) no-repeat;
+						}
+						
+					}
+
+					&:first-child.#{$nav-active-item-class}{
+						background: transparent generated-image-url($nav-sprite-name + ".png") no-repeat left ((-1) * ($initial-position + $height + 6));			
+					}
+
+				}
+
+				.#{$nav-last-item-class}{
+					background: transparent generated-image-url($nav-sprite-name + ".png") no-repeat right ((-1) * ($initial-position + $height + 6));
+
+					&:hover{
+						background: transparent generated-image-url($nav-sprite-name + ".png") right ((-1) * ($initial-position + $height + 6)) no-repeat;
+					}
+
+				}
+
+				.#{$nav-active-item-class}{
+					background: transparent generated-image-url($nav-sprite-name + ".png") no-repeat center ((-1) * ($initial-position + $height + 6));
+				}
+
+				.#{$nav-last-item-class}.#{$nav-active-item-class}{
+					background: transparent generated-image-url($nav-sprite-name + ".png") no-repeat right ((-1) * ($initial-position + $height + 6));			
+				}
+
+			} @else {
+
+				li{
+					border-top: 1px solid $border;
+					border-bottom: 1px solid $border;
+					background-color: $background;
+
+					&:hover{
+						background: darken($background, 5%);
+					}
+
+					&:first-child {
+						border-left: 1px solid $border;
+					}
+
+				}
+
+				.#{$nav-last-item-class} {
+					border-right: 1px solid $border;
+				}
+
+				.#{$nav-active-item-class}{
+					background: darken($background, 10%);
+				}
+
+			}
+
+		}
+
+	}
+
+}