picasso 0.4.2 → 0.5.0

data/docs/sass/picasso-demos.scss

@@ -41,26 +41,13 @@ body{
 	left: 300px;
 }
 
-//Glossy Buttons
-.button-glossy-demo-1{
-	@include button-glossy();
-}
-
-.button-glossy-demo-2{
-	@include button-glossy(70px, 30px, #0088CC, white);
-}
-
-.button-glossy-demo-3{
-	@include button-glossy(80px, 30px, #FBB450, white);
-}
-
 //3D Buttons
 .button-3d-demo-1{
 	@include button-3d();
 }
 
 .button-3d-demo-2{
-	@include button-3d(#0088CC, white);
+	@include button-3d(#013D93, white);
 }
 
 .button-3d-demo-3{
@@ -68,28 +55,11 @@ body{
 }
 
 .button-3d-demo-4 {
-	@include button-3d(#013d93, #FFF, 24px, true, false);
+	@include button-3d(#013D93, #FFF, 24px, true, false);
 }
 
 .button-3d-demo-5 {
-	@include button-3d(#EEE, #013d93, 11px, false, true);
-}
-
-//Mini-Buttons
-.button-mini-demo-1{
-	@include button-mini();
-}
-
-.button-mini-demo-2{
-	@include button-mini(#0088CC, white);
-}
-
-.button-mini-demo-3{
-	@include button-mini(#DA4F49, white);
-}
-
-.button-mini-demo-4{
-	@include button-mini(#414141, white);
+	@include button-3d(#EEE, #013D93, 11px, false, true);
 }
 
 //List grid
@@ -379,6 +349,16 @@ body{
 	background: $despegar-fill-bg;
 }
 
+.despegar-body-bg-demo{
+	padding: 10px;
+	background: $despegar-body-bg;
+}
+
+.despegar-promo-text-demo{
+	padding: 10px;
+	background: $despegar-promo-text;
+}
+
 .clusters-demo-1 {
 	.cluster {
 		@include cluster();

data/lib/picasso/version.rb

@@ -1,3 +1,3 @@
 module Picasso
-  VERSION = "0.4.2"
+  VERSION = "0.5.0"
 end

data/picasso.gemspec

@@ -17,5 +17,4 @@ Gem::Specification.new do |gem|
   gem.post_install_message  = "\n\n##################################################\n## Picasso - Sass/Compass Framework\n\n## Versión: " + Picasso::VERSION + "\n## Documentación: http://ux.despegar.it/labs/picasso/\n## CHANGELOG: http://ux.despegar.it/labs/picasso/#changelog\n##################################################\n\n"
 
   gem.add_dependency("compass", [">= 0.12.1"])
-  gem.add_dependency("compass-magick", [">= 0.1.6"])
 end

data/stylesheets/picasso/components/_buttons.scss

@@ -3,8 +3,6 @@
 // Sub-módulo que importa los siguientes componentes:
 
 // * `button-3d` ([sección dedicada](picasso-components-buttons-_3d.html))
-// * `button-glossy` ([sección dedicada](picasso-components-buttons-_glossy.html))
-// * `button-mini` ([sección dedicada](picasso-components-buttons-_mini.html))
 
 // ### Sass
 
@@ -12,6 +10,4 @@
 
 // `@import "picasso/components/buttons";`
 
-@import "buttons/3d";
-@import "buttons/glossy";
-@import "buttons/mini";
+@import "buttons/3d";

data/stylesheets/picasso/components/_navs.scss

@@ -46,23 +46,16 @@
 
 // `@include nav(435px, 30px, #1164BF, #083C78, black, right);`
 
-// ### Fallback IE
-
-// * `$nav-ie-fallback`: Esta variable permite seleccionar la estrategia de estilos para mostrar el componente en Internet Explorer. Valores disponibles: 
-// `sprites` / `GD`. Valor por defecto: `sprites`.
-
 
 @import "compass/css3/images";
 @import "compass/css3/box-shadow";
 @import "compass/css3/border-radius";
-@import "../utils/sprite";
 
 $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" !default;
-$nav-ie-fallback: "sprites" !default;
 $nav-active-item-class: "active" !default;
 $nav-last-item-class: "last" !default;
 
@@ -126,18 +119,8 @@ $nav-default-float: left !default;
 
 		.ie7 &, .ie8 &, .ie9 &{
 
-			@if $nav-ie-fallback == "sprites" {
-
-				li{
-					height: $height + 6;
-				}
-
-			} @else {
-
-				li{
-					height: $height;
-				}
-
+			li{
+				height: $height;
 			}
 
 		}
@@ -184,129 +167,27 @@ $nav-default-float: left !default;
 
 		.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 image-url($nav-sprite-name + ".png", false, false) no-repeat center ((-1) * $initial-position);
-
-					a{
-						border-left: 1px solid $border;
-					}
-
-					&:hover{
-						background: transparent image-url($nav-sprite-name + ".png", false, false) center ((-1) * ($initial-position + $height + 6)) no-repeat;
-					}
-
-					&:first-child {
-						background: transparent image-url($nav-sprite-name + ".png", false, false) no-repeat left ((-1) * $initial-position);
-
-						a{
-							border-left: none;
-						}
-
-						&:hover{
-							background: transparent image-url($nav-sprite-name + ".png", false, false) left ((-1) * ($initial-position + $height + 6)) no-repeat;
-						}
-						
-					}
-
-					&:first-child.#{$nav-active-item-class}{
-						background: transparent image-url($nav-sprite-name + ".png", false, false) no-repeat left ((-1) * ($initial-position + $height + 6));			
-					}
-
-				}
-
-				.#{$nav-last-item-class}{
-					background: transparent image-url($nav-sprite-name + ".png", false, false) no-repeat right ((-1) * ($initial-position + $height + 6));
-
-					&:hover{
-						background: transparent image-url($nav-sprite-name + ".png", false, false) right ((-1) * ($initial-position + $height + 6)) no-repeat;
-					}
+			li{
+				border-top: 1px solid $border;
+				border-bottom: 1px solid $border;
+				background-color: $background;
 
+				&:hover{
+					background: darken($background, 5%);
 				}
 
-				.#{$nav-active-item-class}{
-					background: transparent image-url($nav-sprite-name + ".png", false, false) no-repeat center ((-1) * ($initial-position + $height + 6));
+				&:first-child {
+					border-left: 1px solid $border;
 				}
 
-				.#{$nav-last-item-class}.#{$nav-active-item-class}{
-					background: transparent image-url($nav-sprite-name + ".png", false, false) 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%);
-				}
+			.#{$nav-last-item-class} {
+				border-right: 1px solid $border;
+			}
 
+			.#{$nav-active-item-class}{
+				background: darken($background, 10%);
 			}
 
 		}

data/stylesheets/picasso/components/_popups.scss

@@ -1,5 +1,10 @@
 // ## Popups
 
+// <div style="background: red; color: white; padding: 10px;">
+// <h1 style="color: white;">Componente deprecado</h1>
+// <p>Se recomienda la utilización de <a style="color: white; text-decoration: underline;" href="http://ux.despegar.it/docs/common/modules/overlay.html">overlay</a> </p>
+// </div>
+
 // Estilos para recrear popups.
 
 // ### Ejemplos
@@ -67,16 +72,10 @@
 
 // `@include popup(black, 10px, 0px 0px 5px #333333, gray, 0.5, black, white, white, black);`
 
-// ### Fallback IE
-
-// * `$popup-ie-fallback`: Esta variable permite seleccionar la estrategia de estilos para mostrar el componente en Internet Explorer. Valores disponibles: 
-// `sprites` / `GD`. Valor por defecto: `sprites`.
-
 
 @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;
@@ -94,9 +93,6 @@ $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" !default;
-$popup-ie-fallback: "sprites" !default;
 
 @mixin popup(
 	$background: $popup-default-background,
@@ -186,22 +182,6 @@ $popup-ie-fallback: "sprites" !default;
 	.ie7 & {
    		@include after;
     }
-
-	.ie7 &, .ie8 & {
-		
-		@if $popup-ie-fallback == "sprites" {
-		
-			.popup-close {
-				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));
-			    right: (-1) * (($popup-default-close-button-size / 2));
-			}
-			
-		}
-
-	}
 	
 }
 
@@ -320,27 +300,6 @@ $popup-ie-fallback: "sprites" !default;
 		.popup-arrow-right {
 		    border-left: $popup-default-arrow-height solid $background-border;
 		}
-		
-		@if $popup-ie-fallback == "sprites" {
-		
-			.popup-close {
-				border-width: 0;
-				background-color: transparent;
-				
-				$popup-close-image: magick-canvas($popup-default-close-button-size, $popup-default-close-button-size,
-				    magick-fill($close-button-background),
-				    magick-corners($popup-default-close-button-size / 2),
-				    magick-border($close-button-color, ($popup-default-close-button-size / 2), $popup-default-close-button-border)
-				);
-				
-				$initial-position: insert-in-sprite($popup-sprite-created, $popup-sprite-name, $popup-close-image, $popup-default-close-button-size, $popup-default-close-button-size);
-				$popup-sprite-created: true;
-				
-				background: image-url($popup-sprite-name + ".png", false, false);
-				background-position: 0 ((-1) * $initial-position);
-			}
-			
-		}
 
 	}
 	

data/stylesheets/picasso/components/_tooltips.scss

@@ -1,5 +1,10 @@
 // ## Tooltips
 
+// <div style="background: red; color: white; padding: 10px;">
+// <h1 style="color: white;">Componente deprecado</h1>
+// <p>Se recomienda la utilización de <a style="color: white; text-decoration: underline;" href="http://ux.despegar.it/docs/common/modules/overlay.html">overlay</a> </p>
+// </div>
+
 // Excelentes para mostrar informaci&oacute;n extra.
 
 // ### Ejemplos

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

@@ -80,7 +80,6 @@
 @import "compass/css3/text-shadow";
 @import "compass/css3/box-shadow";
 @import "compass/css3/opacity";
-@import "../../utils/sprite";
 
 $button-3d-default-background	  : #F73741 !default;
 $button-3d-default-color		  : white !default;

data/stylesheets/picasso/despegar/_variables.scss

@@ -71,7 +71,7 @@ $despegar-gray-4	: #888;
 $despegar-gray-5	: #AAA;
 $despegar-gray-6	: #CCC;
 $despegar-gray-7    : #DDD;
-$despegar-gray-8    : #EEE;
+$despegar-gray-8    : #EEE; 
 $despegar-gray-9    : #F5F5F5;
 
 
@@ -81,7 +81,6 @@ $despegar-gray-9    : #F5F5F5;
 // <p class="despegar-searchbox-bg-demo">$despegar-searchbox-bg: #FFFF33 (Background Buscador)</p>
 // <p class="despegar-title-color-demo">$despegar-title-color: #013D93 (Color Titulos)</p>
 // <p class="despegar-titlealt-color-demo">$despegar-titlealt-color: #F90 (Color Titulos alternativos)</p>
-// <p class="despegar-titlelighten-color-demo">$despegar-titlelighten-color: #B4CBFC (Color Titulos con colores mas suaves)</p>
 // <p class="despegar-link-color-demo">$despegar-link-color: #319FDA (Color links)</p>
 // <p class="despegar-link-color-hover-demo">$despegar-link-color-hover: #66CCFF (Color links, hover)</p>
 // <p class="despegar-link-bg-hover-demo">$despegar-link-bg-hover: #F1F6FC (Background links, hover)</p>
@@ -90,9 +89,10 @@ $despegar-gray-9    : #F5F5F5;
 // <p class="despegar-warning-bg-demo">$despegar-warning-bg: #FFFFE1 (Background mensajes)</p>
 // <p class="despegar-warning-border-demo">$despegar-warning-border: #FF9900 (Color borde mensajes)</p>
 // <p class="despegar-fill-bg-demo">$despegar-fill-bg: #84A8FB (Color de relleno)</p>
+// <p class="despegar-body-bg-demo">$despegar-body-bg: #E9EAEE (Background del body)</p>
+// <p class="despegar-promo-text-demo">$despegar-promo-text: #008C23 (Promo text)</p>
 // ```
 
-
  // Buscador
 $despegar-searchbox-bg	: $despegar-yellow;
 
@@ -102,25 +102,28 @@ $despegar-title-color 	: $despegar-blue;
  // Titulos y destacados (alt)
 $despegar-titlealt-color	: #FF9900;
 
- // Titulos y destacados (alt)
-$despegar-titlelighten-color	: #B4CBFC;
-
  // Links
-$despegar-link-color 		: #319FDA;
-$despegar-link-color-hover 	: #66CCFF;
-$despegar-link-bg-hover 	: #F1F6FC;
+$despegar-link-color 		    : #319FDA;
+$despegar-link-color-hover 	    : #66CCFF;
+$despegar-link-bg-hover 	    : #F1F6FC;
 
  // Errores: fondo
-$despegar-error-bg           : #FFE6E6;
+$despegar-error-bg              : #FFE6E6;
 
  // Errores: borde
-$despegar-error-border       : $despegar-red;
+$despegar-error-border          : $despegar-red;
 
  // Warning: fondo
-$despegar-warning-bg         : #FFFFE1;
+$despegar-warning-bg            : #FFFFE1;
 
  // Warning: borde
-$despegar-warning-border     : #FF9900;
+$despegar-warning-border        : #FFCC33;
 
  // Color de relleno
-$despegar-fill-bg       : #84A8FB;
+$despegar-fill-bg               : #84A8FB;
+
+ // Color del body
+$despegar-body-bg               : #E9EAEE;
+
+ // Promo text
+$despegar-promo-text            : #008C23;