picasso 0.3.6.beta.4 → 0.3.6

data/docs/sass/picasso-demos.scss

@@ -2,12 +2,9 @@
 @import "../../stylesheets/picasso";
 
 //General
-html{
-	font-size: 16px;
-}
-
 body{
 	font-family: sans-serif;
+	font-size: 16px;
 	padding: 20px 0;
 }
 
@@ -21,6 +18,7 @@ body{
 }
 
 //Tooltips
+
 .tooltip-demo-1{
 	@include tooltip();
 	left: 20px;
@@ -113,22 +111,10 @@ body{
 }
 
 //Bubbles
-.bubble-demo-1{
-	margin: 0 0 30px 0;
-}
-
 .bubble-demo-1{
 	@include bubble();
 }
 
-.bubble-demo-2{
-	@include bubble(#EEE, #999, false, "left");
-}
-
-.bubble-demo-3{
-	@include bubble(#EEE, #999, true, "right");
-}
-
 //Accordions
 .accordion-demo-1{
 	@include accordion();	
@@ -158,15 +144,15 @@ body{
 }
 
 .arrow-demo-2{
-	@include arrow(black, white, 10px, "left");
+	@include arrow(black, white, 0.563em, "left");
 }
 
 .arrow-demo-3{
-	@include arrow(#5FC8FF, white, 25px, "right");
+	@include arrow(#5FC8FF, white, 1.313em, "right");
 }
 
 .arrow-demo-4{
-	@include arrow(#5FC8FF, white, 25px, "left");
+	@include arrow(#5FC8FF, white, 1.500em, "left");
 }
 
 //Grillas

data/docs/sass/picasso-docs.scss

@@ -123,17 +123,3 @@ body{
 	}
 
 }
-
-.picasso-_bubbles{
-
-	.ie7 &, .ie8 &, .ie9 &{
-
-		blockquote{
-			background: transparent;
-			padding: 0;
-			@include border-radius(none);
-		}
-
-	}
-
-}

data/lib/picasso/version.rb

@@ -1,3 +1,3 @@
 module Picasso
-  VERSION = "0.3.6.beta.4"
+  VERSION = "0.3.6"
 end

data/stylesheets/picasso/_utils.scss

@@ -16,5 +16,4 @@
 @import "utils/clearfix";
 @import "utils/sprite";
 @import "utils/ie";
-@import "utils/grid";
-@import "utils/rem";
+@import "utils/grid";

data/stylesheets/picasso/components/_accordions.scss

@@ -51,12 +51,11 @@
 
 // `@include accordion(#CCC, #000, #FFF, 1.5em);`
 
-@import "../utils/clearfix";
 
 $accordion-default-border-color: #CCC !default;
 $accordion-default-background-color: #013D93 !default;
 $accordion-default-color: #FFF !default;
-$accordion-default-font-size: 0.813em !default;
+$accordion-default-font-size: 0.8em !default;
 
 @mixin accordion(
 	$border-color: $accordion-default-border-color,
@@ -117,7 +116,7 @@ $accordion-default-font-size: 0.813em !default;
 
 	.accordion-header{
 		padding: ($font-size / 2) 10px;
-		@include clearfix();
+		overflow: hidden;
 
 		h4{
 			margin: 0;

data/stylesheets/picasso/components/_arrows.scss

@@ -49,22 +49,21 @@
 // * `font-size`
 // * `size` (lado para el cual apunta el componente)
 
-// `@include arrow(#5FC8FF, white, 15px, "left");`
+// `@include arrow(#5FC8FF, white, 1.500em, "left");`
 
-@import "../utils/rem";
 
 $arrow-default-background: black !default;
 $arrow-default-color: white !default;
-$arrow-default-font-size: 10px !default;
+$arrow-default-font-size: 0.563em !default;
 $arrow-default-arrow-side: "right" !default;
 
 @mixin arrow(
 
-	// Background del elemento
-	$background: $arrow-default-background,
+    // Background del elemento
+    $background: $arrow-default-background,
 
-	// Color del elemento
-	$color: $arrow-default-color,
+    // Color del elemento
+    $color: $arrow-default-color,
 
     // Tamaño de la tipografia
     $font-size: $arrow-default-font-size,
@@ -73,31 +72,31 @@ $arrow-default-arrow-side: "right" !default;
     $side: $arrow-default-arrow-side
     ){
 
-	@include arrow-layout($font-size, $side);
-	@include arrow-visual($background, $color, $font-size, $side);
+    @include arrow-layout($font-size, $side);
+    @include arrow-visual($background, $color, $font-size, $side);
 
 }
 
 @mixin arrow-visual($background: $arrow-default-background, $color: $arrow-default-color, $font-size: $arrow-default-font-size, $side: $arrow-default-arrow-side) {
 
     font-style: normal;
-    @include rem(font-size, $font-size);
+    font-size: $font-size;
     background: $background;
     color: $color;
-    @if($side == "right"){
-        @include border-left-radius(0.1em);
-    } @else {
-        @include border-right-radius(0.1em);
-    }
+    @include border-radius(0.1em);
 
     &:after{
-        border-top: 0.8em solid transparent;
-        border-bottom: 0.8em solid transparent;
+        border-top: 0.778em solid transparent;
+        border-bottom: 0.778em solid transparent;
 
         @if($side == "right"){
-            border-left: 0.8em solid $background;
+
+            border-left: 0.778em solid $background;
+
         } @else {
-            border-right: 0.8em solid $background;
+
+            border-right: 0.778em solid $background;
+
         }
 
         
@@ -108,8 +107,8 @@ $arrow-default-arrow-side: "right" !default;
 @mixin arrow-layout($font-size: $arrow-default-font-size, $side: $arrow-default-arrow-side) {
 
     position: relative;
-    height: 1.6em;
-    line-height: 1.6em;
+    height: 1.556em;
+    line-height: 1.556em;
     display: inline-block;
 
     @if($side == "right"){

data/stylesheets/picasso/components/_bubbles.scss

@@ -1,11 +1,9 @@
 // ## Bubbles
 
-// Ideales para citas de texto.
+// Ideales para citar comentarios de clientes.
 
 // ### Ejemplos
 
-// #### Ejemplo 1
-
 // ```
 // <div class="bubble-demo-1">
 //      <h4>Lorem ipsum</h4>
@@ -13,25 +11,6 @@
 //          This is a long quotation. This is a long quotation. This is a long quotation. This is a long quotation. This is a long quotation.
 //      </blockquote>
 // </div>
-//
-// <div class="bubble-demo-2">
-//      <h4>Lorem ipsum</h4>
-//      <blockquote>
-//          This is a long quotation. This is a long quotation. This is a long quotation. This is a long quotation. This is a long quotation.
-//      </blockquote>
-// </div>
-// ```
-
-// #### Ejemplo 2.
-// Con ellipsis.
-
-// ```
-// <div class="bubble-demo-3">
-//      <h4>Lorem ipsum</h4>
-//      <blockquote>
-//          This is a long quotation. This is a long quotation. This is a long quotation. This is a long quotation. This is a long quotation.
-//      </blockquote>
-// </div>
 // ```
 
 // ### Sass
@@ -48,30 +27,30 @@
 
 // Con todos los par&aacute;metros:
 //
+// * `width`
 // * `background-color`
 // * `color`
-// * `ellipsis` (booleano)
-// * `side` (lado en que apunta el componente)
+// * `ellipsis`
+// * `ellipsis position`
 
-// `@include bubble(#EEE, #999, true, "left");`
+// `@include bubble(200px, blue, white, true, left);`
 
 
 @import "compass/css3/border-radius";
 @import "compass/typography/text/ellipsis";
 @import "../utils/ie";
 
-
+$bubble-default-width : auto !default;
 $bubble-default-background : #EEE !default;
 $bubble-default-color : #999 !default;
 $bubble-default-ellipsis : false !default;
-$bubble-default-side: "right" !default;
-
-
-$bubble-default-border-radius : 0.5em !default;
-$bubble-default-padding : 0.7em !default;
+$bubble-default-ellipsis-position : right !default;
 
 @mixin bubble(
 
+    // Ancho del elemento
+    $width: $bubble-default-width, 
+
     // Background del elemento
     $background: $bubble-default-background, 
 
@@ -81,12 +60,12 @@ $bubble-default-padding : 0.7em !default;
     // Seteo de ellipsis
     $ellipsis: $bubble-default-ellipsis,
 
-    // Posicion de la flecha
-    $side: $bubble-default-side
+    // Seteo de posicion de ellipsis
+    $ellipsis-position: $bubble-default-ellipsis-position
     
     ){
 
-    @include bubble-layout($ellipsis, $side);
+    @include bubble-layout($width, $ellipsis-position);
     @include bubble-visual($background, $color, $ellipsis);
 
 }
@@ -94,47 +73,49 @@ $bubble-default-padding : 0.7em !default;
 @mixin bubble-visual($background: $bubble-default-background, $color: $bubble-default-color, $ellipsis: $bubble-default-ellipsis){
 
     background: $background;
-    @include border-radius($bubble-default-border-radius);
+    @include border-radius(5px);
 
     blockquote{
         color: $color;
-
-        @if ($ellipsis == true) {
-            @include ellipsis();
+        @if $ellipsis {
+            @include ellipsis(true);
         }
+    }
 
+    h4{
+        @if $ellipsis {
+            @include ellipsis(true);
+        } 
     }
 
-    &:after{
-        border-left: 0.7em solid transparent;
-        border-right: 0.7em solid transparent;
-        border-top: 1em solid $background;
+    &:after, .ie7 & .after{
+        border-left: 10px solid transparent;
+        border-right: 10px solid transparent;
+        border-top: 15px solid  $background;
     }
 
 }
 
-@mixin bubble-layout($ellipsis: $bubble-default-ellipsis, $side: $bubble-default-side){
+@mixin bubble-layout($width: $bubble-default-width, $ellipsis-position: $bubble-default-ellipsis-position){
 
-    padding: $bubble-default-padding;
+    padding: 10px;
+    display: block;
+    width: $width;
     position: relative;
 
-    blockquote, h4{
-        margin: 0;
-    }
-
-    @if ($ellipsis == true) {
-
-        blockquote{
-            width: 100%;
+    &:after, .ie7 & .after{
+        content: "";                
+        position: absolute;
+        bottom: -15px;
+        @if $ellipsis-position {
+            #{$ellipsis-position}: 20px;
         }
-        
+        width: 0;
+        height: 0;
     }
 
-    &:after{
-        content: '';
-        position: absolute;
-        #{$side}: 1em;
-        bottom: -1em;
+    .ie7 &{
+        @include after;
     }
 
 }

data/stylesheets/picasso/components/_pagination.scss

@@ -209,6 +209,7 @@ $pagination-default-disabled-class : "disabled" !default;
 		display: inline-block;
 
 		li{
+			display: inline-block;
 			height: $size;
 			text-align: center;
 			float: left;

data/stylesheets/picasso/components/_popups.scss

@@ -75,13 +75,12 @@
 
 @import "compass/css3/border-radius";
 @import "compass/css3/box-shadow";
-@import "compass/css3/box-sizing";
 @import "../utils/sprite";
 @import "../utils/ie";
 
 $popup-default-background: white !default;
 $popup-default-border-radius: 3px !default;
-$popup-default-box-shadow: rgba(0, 0, 0, 0.5) 0 0 10px !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;
@@ -124,8 +123,8 @@ $popup-ie-fallback: "sprites" !default;
 	&:after, .ie7 & .after {
 		content: "";
 		position: absolute;
-		top: 0;
-		left: 0;
+		top: 0px;
+		left: 0px;
 		width: 100%;
 		height: 100%;
 		z-index: 0;
@@ -137,7 +136,6 @@ $popup-ie-fallback: "sprites" !default;
 			line-height: 20px;
 		    padding: 10px;	
 		}
-
 	}
 	
 	.popup-container {
@@ -147,8 +145,8 @@ $popup-ie-fallback: "sprites" !default;
 	
 	.popup-arrow{
         position: absolute;
-	    height: 0;
-	    width: 0;
+	    height: 0px;
+	    width: 0px;
 	}
 	
 	.popup-arrow-bottom {
@@ -175,24 +173,19 @@ $popup-ie-fallback: "sprites" !default;
         position: absolute;
         z-index: 10;
         text-align: center;
-        line-height: $popup-default-close-button-height;
+        line-height: $popup-default-close-button-height - $popup-default-close-button-border;
 	    height: $popup-default-close-button-height;
 	    width: $popup-default-close-button-height;
 	    top: (-1) * (($popup-default-close-button-height / 2) + $popup-default-close-button-border);
 	    right: (-1) * (($popup-default-close-button-height / 2) + $popup-default-close-button-border);
-	    @include box-sizing(content-box);
 	}
 	
-	.ie7 & {
-   		@include after;
-    }
-
 	.ie7 &, .ie8 & {
 		
 		@if $popup-ie-fallback == "sprites" {
 		
 			.popup-close {
-				line-height: $popup-default-close-button-size;
+				line-height: $popup-default-close-button-size - $popup-default-close-button-border;
 			    height: $popup-default-close-button-size;
 			    width: $popup-default-close-button-size;
 			    top: (-1) * (($popup-default-close-button-size / 2));
@@ -203,6 +196,10 @@ $popup-ie-fallback: "sprites" !default;
 
 	}
 	
+	.ie7 & {
+   		@include after;
+    }
+	
 }
 
 @mixin popup-visual(
@@ -217,12 +214,12 @@ $popup-ie-fallback: "sprites" !default;
 	$title-color: $popup-default-title-color
 ) {
 
-	&:after{
-		background: $background-border;
+	&:after, .ie7 & .after {
 		background: rgba($background-border, $background-border-opacity);
 		@include border-radius($border-radius);
 		@include box-shadow($box-shadow);
 	}
+
 	.popup-header{
 		background: $title-background;
 	    display: block;
@@ -271,35 +268,19 @@ $popup-ie-fallback: "sprites" !default;
 		border: $popup-default-close-button-border solid $close-button-color;
 		color: $close-button-color;
 		font-weight: bold;
-		font-family: arial, sans-serif;
-		font-size: $popup-default-close-button-height;
+		font-family: sans-serif;
+		font-size: 16px;
 		background: $close-button-background;
 		@include border-radius($popup-default-close-button-height);
 		@include box-shadow($box-shadow);
 	}
 	
-	.ie7 &{
+	.ie7 &, .ie8 & {
 
-		& .after {
-			background-color: $background-border;
+		&:after, & .after {
+			background: $background-border;
 			filter: alpha(opacity = ($background-border-opacity * 100));
 		}
-
-	}
-
-	.ie8 &{
-
-		&:after {
-			$ie-background : magick-canvas(2px, 2px,
-				magick-fill($background-border)
-				magick-effect(fade, (1 - $background-border-opacity))
-			);
-			background: $ie-background;
-		}
-
-	}
-
-	.ie7 &, .ie8 & {
 		
 		.popup-arrow {
 			filter: alpha(opacity = ($background-border-opacity * 100));
@@ -324,7 +305,7 @@ $popup-ie-fallback: "sprites" !default;
 		@if $popup-ie-fallback == "sprites" {
 		
 			.popup-close {
-				border-width: 0;
+				border-width: 0px;
 				background-color: transparent;
 				
 				$popup-close-image: magick-canvas($popup-default-close-button-size, $popup-default-close-button-size,
@@ -337,7 +318,7 @@ $popup-ie-fallback: "sprites" !default;
 				$popup-sprite-created: true;
 				
 				background: image-url($popup-sprite-name + ".png", false, false);
-				background-position: 0 ((-1) * $initial-position);
+				background-position: 0px ((-1) * $initial-position);
 			}
 			
 		}