picasso 0.3.6 → 0.3.7

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;
 }
 
@@ -18,7 +21,6 @@ body{
 }
 
 //Tooltips
-
 .tooltip-demo-1{
 	@include tooltip();
 	left: 20px;
@@ -111,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();	
@@ -144,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
@@ -327,4 +341,34 @@ body{
 .despegar-warning-border-demo{
 	padding: 10px;
 	background: $despegar-warning-border;
-}
+}
+
+.clusters-demo-1 {
+	.cluster {
+		@include cluster();
+	}
+}
+
+.demo-text {
+	margin: 10px;
+}
+
+.text-demo-1 {
+	@include font-size-1();
+}
+
+.text-demo-2 {
+	@include font-size-2();
+}
+
+.text-demo-3 {
+	@include font-size-3();
+}
+
+.text-demo-4 {
+	@include font-size-4();
+}
+
+.text-demo-5 {
+	@include font-size-5();
+}

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.6"
+  VERSION = "0.3.7"
 end

data/stylesheets/picasso/_components.scss

@@ -44,6 +44,7 @@
 // * `accordions` ([sección dedicada](picasso-components-_accordions.html))
 // * `navs` ([sección dedicada](picasso-components-_navs.html))
 // * `tooltips` ([sección dedicada](picasso-components-_tooltips.html))
+// * `clusters` ([sección dedicada](picasso-components-_clusters.html))
 
 // ### Sass
 
@@ -62,3 +63,4 @@
 @import "components/popups";
 @import "components/accordions";
 @import "components/navs";
+@import "components/clusters";

data/stylesheets/picasso/_despegar.scss

@@ -3,6 +3,7 @@
 // Sub-módulo que importa las siguientes utilidades:
 
 // * `variables` ([sección dedicada](picasso-despegar-_variables.html))
+// * `mixins` ([sección dedicada](picasso-despegar-_mixins.html))
 
 // ### Sass
 
@@ -10,4 +11,5 @@
 
 // `@import "picasso/despegar";`
 
-@import "despegar/variables";
+@import "despegar/variables";
+@import "despegar/mixins";

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/_accordions.scss

@@ -51,11 +51,12 @@
 
 // `@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.8em !default;
+$accordion-default-font-size: 0.813em !default;
 
 @mixin accordion(
 	$border-color: $accordion-default-border-color,
@@ -116,7 +117,7 @@ $accordion-default-font-size: 0.8em !default;
 
 	.accordion-header{
 		padding: ($font-size / 2) 10px;
-		overflow: hidden;
+		@include clearfix();
 
 		h4{
 			margin: 0;

data/stylesheets/picasso/components/_arrows.scss

@@ -49,21 +49,22 @@
 // * `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;
 
 @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,
@@ -72,31 +73,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;
-    font-size: $font-size;
+    @include rem(font-size, $font-size);
     background: $background;
     color: $color;
-    @include border-radius(0.1em);
+    @if($side == "right"){
+        @include border-left-radius(0.1em);
+    } @else {
+        @include border-right-radius(0.1em);
+    }
 
     &:after{
-        border-top: 0.778em solid transparent;
-        border-bottom: 0.778em solid transparent;
+        border-top: 0.8em solid transparent;
+        border-bottom: 0.8em solid transparent;
 
         @if($side == "right"){
-
-            border-left: 0.778em solid $background;
-
+            border-left: 0.8em solid $background;
         } @else {
-
-            border-right: 0.778em solid $background;
-
+            border-right: 0.8em solid $background;
         }
 
         
@@ -107,8 +108,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.556em;
-    line-height: 1.556em;
+    height: 1.6em;
+    line-height: 1.6em;
     display: inline-block;
 
     @if($side == "right"){

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/_clusters.scss

@@ -0,0 +1,98 @@
+// ## Clusters
+
+// Para mostrar clusters de resultados
+
+// ### Ejemplo
+// ```
+// <div class="clusters-demo-1">
+// 	<div class="cluster">
+//    <div class="demo-text">Ida EZE -> MIA miércoles 26 diciembre, 2012</div>
+// 	  <ul class="cluster-items-list">
+// 	    <li class="cluster-item">Sale: 10:30 Llega: 17:40 Directo</li>
+// 	    <li class="cluster-item">Sale: 11:30 Llega: 18:40 Directo</li>
+// 	    <li class="cluster-item">Sale: 12:30 Llega: 19:40 Directo</li>
+// 	    <li class="cluster-item">Sale: 13:30 Llega: 20:40 Directo</li>
+// 	  </ul>
+//    <div class="demo-text">Hasta en 12 pagos</div>
+// 	</div>
+// 	<div class="cluster">
+//    <div class="demo-text">Vuelta EZE -> MIA jueves 27 diciembre, 2012</div>
+// 	  <ul class="cluster-items-list">
+// 	    <li class="cluster-item">Sale: 00:30 Llega: 07:40 Directo</li>
+// 	    <li class="cluster-item">Sale: 01:30 Llega: 08:40 Directo</li>
+// 	    <li class="cluster-item">Sale: 02:30 Llega: 09:40 Directo</li>
+// 	    <li class="cluster-item">Sale: 03:30 Llega: 00:40 Directo</li>
+// 	  </ul>
+//    <div class="demo-text">Hasta en 12 pagos</div>
+// 	</div>
+// </div>
+// ```
+
+// ### Sass
+
+// #### Import
+
+// `@import "picasso/components/clusters";`
+
+// #### Mixins
+
+// `@include cluster();`
+
+@import "../utils/clearfix";
+@import "compass/css3/border-radius";
+
+$clusters-default-border-color: #CCC !default;
+$clusters-default-border-color-hover: #319fda !default;
+$clusters-default-background-color-hover: #f1f6fc !default;
+$clusters-default-border-radius: 3px !default;
+
+@mixin cluster() {
+	@include cluster-layout();
+	@include cluster-visual();	
+}
+
+@mixin cluster-visual() {
+	border: 1px solid $clusters-default-border-color;
+	border-top-width: 5px;
+	@include border-radius($clusters-default-border-radius);
+	
+	&:hover {
+		border-color: $clusters-default-border-color-hover;
+		background-color: $clusters-default-background-color-hover; 
+	}
+	
+	.cluster-items-list {
+		list-style: none outside none;
+		
+		.cluster-item {
+			border: 1px solid transparent;
+			border-top-color: $despegar-gray-7;		
+							
+			&:first-child{
+				border-top-color: transparent;
+			}
+		
+			&:hover {
+				border-color: $clusters-default-border-color-hover;
+				background-color: $clusters-default-background-color-hover;
+			}
+		}
+	}
+	
+}
+
+@mixin cluster-layout(){
+	@include clearfix;
+	
+	margin-bottom: 15px;
+	
+	.cluster-items-list {
+		padding: 0px;
+		margin: 0px;
+	
+		.cluster-item {
+			padding: 0 5px;
+			margin: 0 0 1px 13px;
+		}
+	}
+}