picasso 0.3.5 → 0.3.6.beta.1

data/docs/sass/picasso-demos.scss

@@ -2,9 +2,12 @@
 @import "../../stylesheets/picasso";
 
 //General
+html{
+	font-size: 16px;
+}
+
 body{
 	font-family: sans-serif;
-	font-size: 16px;
 	padding: 20px 0;
 }
 
@@ -110,10 +113,22 @@ 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();	
@@ -143,15 +158,15 @@ body{
 }
 
 .arrow-demo-2{
-	@include arrow(black, white, 0.563em, "left");
+	@include arrow(black, white, 10px, "left");
 }
 
 .arrow-demo-3{
-	@include arrow(#5FC8FF, white, 1.313em, "right");
+	@include arrow(#5FC8FF, white, 25px, "right");
 }
 
 .arrow-demo-4{
-	@include arrow(#5FC8FF, white, 1.500em, "left");
+	@include arrow(#5FC8FF, white, 25px, "left");
 }
 
 //Grillas

data/docs/sass/picasso-docs.scss

@@ -123,3 +123,17 @@ 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.5"
+  VERSION = "0.3.6.beta.1"
 end

data/stylesheets/picasso/_utils.scss

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

data/stylesheets/picasso/components/_arrows.scss

@@ -8,10 +8,11 @@
 
 
 // ```
-// <em class="arrow-demo-1 arrow-right">
+// <em class="arrow-demo-1">
 //     Lorem ipsum
 // </em>
-// <em class="arrow-demo-2 arrow-left">
+//
+// <em class="arrow-demo-2">
 //     Ipsum lorem
 // </em>
 // ```
@@ -20,10 +21,11 @@
 
 
 // ```
-// <em class="arrow-demo-3 arrow-right">
+// <em class="arrow-demo-3">
 //     Lorem ipsum
 // </em>
-// <em class="arrow-demo-4 arrow-left">
+//
+// <em class="arrow-demo-4">
 //     Ipsum lorem
 // </em>
 // ```
@@ -47,16 +49,15 @@
 // * `font-size`
 // * `size` (lado para el cual apunta el componente)
 
-// `@include arrow(#5FC8FF, white, 1.500em, "left");`
+// `@include arrow(#5FC8FF, white, 15px, "left");`
 
+@import "../utils/rem";
 
 $arrow-default-background: black !default;
 $arrow-default-color: white !default;
-$arrow-default-font-size: 0.563em !default;
+$arrow-default-font-size: 10px !default;
 $arrow-default-arrow-side: "right" !default;
 
-$arrow-default-class : "arrow" !default;
-
 @mixin arrow(
 
 	// Background del elemento
@@ -80,30 +81,26 @@ $arrow-default-class : "arrow" !default;
 @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;
-    font-size: $font-size;
+    @include rem(font-size, $font-size);
     background: $background;
     color: $color;
+    @if($side == "right"){
+        @include border-left-radius(0.1em);
+    } @else {
+        @include border-right-radius(0.1em);
+    }
 
-    &.#{$arrow-default-class}-#{$side}{
-        @include border-radius(0.1em);
-
-        &:after{
-            border-top: 0.778em solid transparent;
-            border-bottom: 0.778em solid transparent;
-
-            @if($side == "right"){
-
-                border-left: 0.778em solid $background;
-
-            } @else {
-
-                border-right: 0.778em solid $background;
-
-            }
+    &:after{
+        border-top: 0.8em solid transparent;
+        border-bottom: 0.8em solid transparent;
 
-            
+        @if($side == "right"){
+            border-left: 0.8em solid $background;
+        } @else {
+            border-right: 0.8em solid $background;
         }
 
+        
     }
 
 }
@@ -111,39 +108,30 @@ $arrow-default-class : "arrow" !default;
 @mixin arrow-layout($font-size: $arrow-default-font-size, $side: $arrow-default-arrow-side) {
 
     position: relative;
-    height: 1.556em;
-    line-height: 1.556em;
+    height: 1.6em;
+    line-height: 1.6em;
     display: inline-block;
 
+    @if($side == "right"){
+        padding: 0 0 0 0.5em;
+    } @else {
+        padding: 0 0.5em 0 0;
+    }
+
     &:after{
         content: '';
         position: absolute;
-    }
-
-    &.#{$arrow-default-class}-#{$side}{
 
         @if($side == "right"){
-
-            padding: 0 0 0 0.5em;
-
-            &:after{
-                left: 100%;
-            }
-
+            left: 100%;
         } @else {
-
-            padding: 0 0.5em 0 0;
-
-            &:after{
-                right: 100%;
-            }
-
+            right: 100%;
         }
 
-        .ie7 &{
-            padding: 0 0.5em;
-        }
+    }
 
+    .ie7 &{
+        padding: 0 0.5em;
     }
 
 }

data/stylesheets/picasso/components/_bubbles.scss

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

data/stylesheets/picasso/components/_pagination.scss

@@ -209,7 +209,6 @@ $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

@@ -80,7 +80,7 @@
 
 $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-box-shadow: rgba(0, 0, 0, 0.5) 0 0 10px !default;
 $popup-default-background-border: #000000 !default;
 $popup-default-background-border-opacity: 0.7 !default;
 $popup-default-close-button-background: #319FDA !default;
@@ -123,8 +123,8 @@ $popup-ie-fallback: "sprites" !default;
 	&:after, .ie7 & .after {
 		content: "";
 		position: absolute;
-		top: 0px;
-		left: 0px;
+		top: 0;
+		left: 0;
 		width: 100%;
 		height: 100%;
 		z-index: 0;
@@ -136,6 +136,7 @@ $popup-ie-fallback: "sprites" !default;
 			line-height: 20px;
 		    padding: 10px;	
 		}
+
 	}
 	
 	.popup-container {
@@ -145,8 +146,8 @@ $popup-ie-fallback: "sprites" !default;
 	
 	.popup-arrow{
         position: absolute;
-	    height: 0px;
-	    width: 0px;
+	    height: 0;
+	    width: 0;
 	}
 	
 	.popup-arrow-bottom {
@@ -173,19 +174,23 @@ $popup-ie-fallback: "sprites" !default;
         position: absolute;
         z-index: 10;
         text-align: center;
-        line-height: $popup-default-close-button-height - $popup-default-close-button-border;
+        line-height: $popup-default-close-button-height;
 	    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);
 	}
 	
+	.ie7 & {
+   		@include after;
+    }
+
 	.ie7 &, .ie8 & {
 		
 		@if $popup-ie-fallback == "sprites" {
 		
 			.popup-close {
-				line-height: $popup-default-close-button-size - $popup-default-close-button-border;
+				line-height: $popup-default-close-button-size;
 			    height: $popup-default-close-button-size;
 			    width: $popup-default-close-button-size;
 			    top: (-1) * (($popup-default-close-button-size / 2));
@@ -195,9 +200,14 @@ $popup-ie-fallback: "sprites" !default;
 		}
 
 	}
-	
-	.ie7 & {
-   		@include after;
+
+	.ie9 & {
+
+		.popup-close {
+		    height: $popup-default-close-button-height + 5;
+		    width: $popup-default-close-button-height + 5;
+		}
+
     }
 	
 }
@@ -214,12 +224,12 @@ $popup-ie-fallback: "sprites" !default;
 	$title-color: $popup-default-title-color
 ) {
 
-	&:after, .ie7 & .after {
+	&:after{
+		background: $background-border;
 		background: rgba($background-border, $background-border-opacity);
 		@include border-radius($border-radius);
 		@include box-shadow($box-shadow);
 	}
-
 	.popup-header{
 		background: $title-background;
 	    display: block;
@@ -269,18 +279,33 @@ $popup-ie-fallback: "sprites" !default;
 		color: $close-button-color;
 		font-weight: bold;
 		font-family: sans-serif;
-		font-size: 16px;
+		font-size: $popup-default-close-button-height;
 		background: $close-button-background;
 		@include border-radius($popup-default-close-button-height);
 		@include box-shadow($box-shadow);
 	}
 	
-	.ie7 &, .ie8 & {
+	.ie7 &{
 
-		&:after, & .after {
-			background: $background-border;
+		& .after {
 			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));
@@ -305,7 +330,7 @@ $popup-ie-fallback: "sprites" !default;
 		@if $popup-ie-fallback == "sprites" {
 		
 			.popup-close {
-				border-width: 0px;
+				border-width: 0;
 				background-color: transparent;
 				
 				$popup-close-image: magick-canvas($popup-default-close-button-size, $popup-default-close-button-size,
@@ -318,7 +343,7 @@ $popup-ie-fallback: "sprites" !default;
 				$popup-sprite-created: true;
 				
 				background: image-url($popup-sprite-name + ".png", false, false);
-				background-position: 0px ((-1) * $initial-position);
+				background-position: 0 ((-1) * $initial-position);
 			}
 			
 		}