picasso 0.4.2 → 0.5.0

metadata

@@ -4,9 +4,9 @@ version: !ruby/object:Gem::Version
   prerelease: false
   segments: 
   - 0
-  - 4
-  - 2
-  version: 0.4.2
+  - 5
+  - 0
+  version: 0.5.0
 platform: ruby
 authors: 
 - Leandro D'Onofrio
@@ -14,7 +14,7 @@ autorequire:
 bindir: bin
 cert_chain: []
 
-date: 2013-02-28 00:00:00 -03:00
+date: 2013-03-13 00:00:00 -03:00
 default_executable: 
 dependencies: 
 - !ruby/object:Gem::Dependency 
@@ -31,20 +31,6 @@ dependencies:
         version: 0.12.1
   type: :runtime
   version_requirements: *id001
-- !ruby/object:Gem::Dependency 
-  name: compass-magick
-  prerelease: false
-  requirement: &id002 !ruby/object:Gem::Requirement 
-    requirements: 
-    - - ">="
-      - !ruby/object:Gem::Version 
-        segments: 
-        - 0
-        - 1
-        - 6
-        version: 0.1.6
-  type: :runtime
-  version_requirements: *id002
 description: Picasso - Sass/Compass Framework
 email: 
 - ldonofrio@despegar.com
@@ -67,10 +53,6 @@ files:
 - docs/css/picasso-docs.css
 - docs/docs.css
 - docs/docs.js
-- docs/img/picasso-buttons-glossy.png
-- docs/img/picasso-buttons-mini.png
-- docs/img/picasso-nav.png
-- docs/img/picasso-popup.png
 - docs/img/picasso.png
 - docs/index.html
 - docs/js/html5shiv.js
@@ -122,8 +104,6 @@ files:
 - stylesheets/picasso/components/_popups.scss
 - stylesheets/picasso/components/_tooltips.scss
 - stylesheets/picasso/components/buttons/_3d.scss
-- stylesheets/picasso/components/buttons/_glossy.scss
-- stylesheets/picasso/components/buttons/_mini.scss
 - stylesheets/picasso/despegar/_mixins.scss
 - stylesheets/picasso/despegar/_variables.scss
 - stylesheets/picasso/utils/_clearfix.scss
@@ -139,7 +119,7 @@ licenses: []
 post_install_message: "\n\n\
   ##################################################\n\
   ## Picasso - Sass/Compass Framework\n\n\
-  ## Versi\xC3\xB3n: 0.4.2\n\
+  ## Versi\xC3\xB3n: 0.5.0\n\
   ## Documentaci\xC3\xB3n: http://ux.despegar.it/labs/picasso/\n\
   ## CHANGELOG: http://ux.despegar.it/labs/picasso/#changelog\n\
   ##################################################\n\n"

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

@@ -1,266 +0,0 @@
-// ## Glossy Buttons
-
-// ### Ejemplos
-
-// ```
-// <a class="button-glossy-demo-1">
-// 	<span>Comprar</span>
-// </a>
-// <a class="button-glossy-demo-2">
-// 	<span>Buscar</span>
-// </a>
-// <a class="button-glossy-demo-3">
-// 	<span>Reservar</span>
-// </a>
-// ```
-
-// ### Sass
-
-// #### Import
-
-// `@import "picasso/components/buttons";`
-
-// #### Mixins
-
-// Con los par&aacute;metros por defecto:
-
-// `@include button-glossy();`
-
-// Con todos los par&aacute;metros:
-//
-// * `width`
-// * `height`
-// * `background-color`
-// * `color`
-
-// `@include button-glossy(100px, 30px, red, white);`
-
-// ### Fallback IE
-
-// * `$button-glossy-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/border-radius";
-@import "../../utils/sprite";
-
-$button-glossy-default-width : 90px !default;
-$button-glossy-default-height: 30px !default;
-$button-glossy-default-background: #DE1F2A !default;
-$button-glossy-default-color: white !default;
-
-$button-glossy-default-font-family: sans-serif !default;
-$button-glossy-default-font-size: 12px !default;
-$button-glossy-default-border-radius: 5px !default;
-$button-glossy-default-image-dir: '' !default;
-
-$button-glossy-sprite-created: false !default;
-$button-glossy-sprite-name: "picasso-buttons-glossy" !default;
-$button-glossy-ie-fallback: "sprites" !default;
-
-@mixin button-glossy(
-
-	// Ancho del boton
-	$width: $button-glossy-default-width, 
-
-	// Alto del boton
-	$height: $button-glossy-default-height, 
-
-	// Background del boton
-	$background: $button-glossy-default-background, 
-
-	// Color del texto del boton
-	$color: $button-glossy-default-color){
-
-	@include button-glossy-layout($width, $height);
-	@include button-glossy-visual($background, $color, $width, $height);
-
-}
-
-@mixin button-glossy-layout($width: $button-glossy-default-width, $height: $button-glossy-default-height){
-
-	width: $width;
-	height: $height;
-	display: inline-block;
-	text-align: center;
-	position: relative;
-	z-index: 1;
-
-	&:after, &:before{
-		content: "";
-		position: absolute;
-		display: inline-block;
-	}
-
-	&:after{
-		width: ($width - 2);
-		height: ($height - 2);
-		left: 1px;
-		top: 1px;
-		z-index: 2;
-	}
-
-	&:before{
-		width: ($width - 4);
-		height: ($height - 4);
-		left: 2px;
-		top: 2px;
-		z-index: 3;
-	}
-
-	span{
-		position: relative;
-		z-index: 4;
-		line-height: $height;
-	}
-
-}
-
-@mixin button-glossy-visual(
-	$background: $button-glossy-default-background,
-	$color: $button-glossy-default-color,
-	$width: $button-glossy-default-width, 
-	$height: $button-glossy-default-height){
-
-	font-family: $button-glossy-default-font-family;
-	font-size: $button-glossy-default-font-size;
-	text-decoration: none;
-	cursor: pointer;
-	
-	$button-glossy-main-gradient: linear-gradient($background, darken($background, 5%)), linear-gradient(darken($background, 10%), darken($background, 25%));
-	$button-glossy-main-hover-gradient: linear-gradient(lighten($background, 15%), darken($background, 7%), saturate($background, 15%));
-
-	@include background($button-glossy-main-gradient);
-	@include border-radius($button-glossy-default-border-radius);
-	background-position: left top, left ($height / 2);
-
-	span{
-		color: $color;
-	}
-
-	&:after, &:before{
-		@include border-radius(4px);
-	}
-
-	&:after{
-		@include background(linear-gradient(lighten($background, 30%) 15%, darken($background, 45%)) 50%);
-	}
-
-	&:before{
-		@include background($button-glossy-main-gradient);
-		background-position: left top, left (($height - 4) / 2);
-	}
-
-	&, &:before{
-		background-size: 100% 50%;
-		background-repeat: no-repeat;
-	}
-
-	&:hover{
-		text-decoration: none;
-		@include background($button-glossy-main-hover-gradient);
-
-		&:after{
-			@include background(linear-gradient(lighten($background, 33%) 20%, darken($background, 3%)) 50%);
-		}
-
-		&:before{
-			@include background($button-glossy-main-hover-gradient);
-		}
-
-	}
-
-	&:hover, &:hover:before{
-		background-size: 100% 100%;
-		background-position: left top;
-		background-repeat: no-repeat;
-	}
-	
-	.ie7 &, .ie8 &, .ie9 &{
-		@include border-radius(none);
-
-		@if $button-glossy-ie-fallback == "sprites" {
-
-			// Generacion del sprite con las imagenes del boton
-			
-			$button-glossy-image: magick-canvas($width, ($height * 2),
-
-				//Normal
-				magick-compose(
-					
-					magick-canvas($width, $height / 2,
-					    magick-fill(magick-linear-gradient($background, darken($background, 5%)))
-					    magick-corners($button-glossy-default-border-radius, true, true, false, false)
-					),
-					0, 0
-
-				)
-				magick-compose(
-					
-					magick-canvas($width, $height / 2,
-					    magick-fill(magick-linear-gradient(darken($background, 10%), darken($background, 25%)))
-					    magick-corners($button-glossy-default-border-radius, false, false, true, true)
-					),
-					0, $height / 2
-
-				)
-				magick-compose(
-					
-					magick-canvas($width - 2, $height - 2,
-					    magick-border(
-					    	magick-linear-gradient(lighten($background, 30%) 15%, darken($background, 45%))
-					    	, $button-glossy-default-border-radius, 1px
-					    )
-					),
-					1px, 1px
-
-				)
-				
-				//Hover
-				magick-compose(
-					
-					magick-canvas($width, $height,
-					    magick-fill(magick-linear-gradient(lighten($background, 15%), darken($background, 7%), saturate($background, 15%)))
-					    magick-corners($button-glossy-default-border-radius)
-					),
-					0, $height
-
-				)
-				magick-compose(
-					
-					magick-canvas($width - 2, $height - 2,
-					    magick-border(
-					    	magick-linear-gradient(lighten($background, 33%) 20%, darken($background, 3%))
-					    	, $button-glossy-default-border-radius, 1px
-					    )
-					),
-					1px, ($height + 1)
-
-				)
-
-			);
-				
-			$initial-position: insert-in-sprite($button-glossy-sprite-created, $button-glossy-sprite-name, $button-glossy-image, $width, ($height * 2));
-			$button-glossy-sprite-created: true;
-			
-			background: image-url($button-glossy-sprite-name + ".png", false, false);
-			background-position: 0 ((-1) * $initial-position);
-			
-			&:hover{
-				background-position: 0 ((-1) * ($initial-position + $height));
-			}
-			
-		} @else {
-		
-			background-color: $background;
-			
-		}
-
-	}
-
-	.ie9 &{
-		@include border-radius(none);
-	}
-
-}

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

@@ -1,197 +0,0 @@
-// ## Mini Buttons
-
-// Perfectos para acciones simples en la interfaz.
-
-// ### Ejemplos
-
-// ```
-// <a class="button-mini-demo-1">
-// 	<span>Limpiar</span>
-// </a>
-// <a class="button-mini-demo-2">
-// 	<span>Abrir</span>
-// </a>
-// <a class="button-mini-demo-3">
-// 	<span>Descargar</span>
-// </a>
-// <a class="button-mini-demo-4">
-// 	<span>Ir</span>
-// </a>
-// ```
-
-// ### Sass
-
-// #### Import
-
-// `@import "picasso/components/buttons";`
-
-// #### Mixins
-
-// Con los par&aacute;metros por defecto:
-
-// `@include button-mini();`
-
-// Con todos los par&aacute;metros:
-//
-// * `background-color`
-// * `color`
-
-// `@include button-mini(grey, blue);`
-
-// ### Fallback IE
-
-// * `$button-mini-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";
-
-
-$button-mini-default-background: #F0F0F0 !default;
-$button-mini-default-color: #0E6695 !default;
-
-$button-mini-font-family: sans-serif !default;
-$button-mini-default-height : 20px !default;
-$button-mini-default-canvas-height : $button-mini-default-height !default;
-$button-mini-default-canvas-width: 200px !default;
-$button-mini-default-font-size: 11px !default;
-$button-mini-default-padding: 10px !default;
-$button-mini-default-image-dir: '' !default;
-
-$button-mini-sprite-created: false !default;
-$button-mini-sprite-name: "picasso-buttons-mini" !default;
-$button-mini-ie-fallback: "sprites" !default;
-
-@mixin button-mini(
-
-	// Background del componente
-	$background: $button-mini-default-background,
-
-	// Color del componente
-	$color: $button-mini-default-color
-){
-
-	@include button-mini-layout();
-	@include button-mini-visual($background, $color);
-
-}
-
-@mixin button-mini-layout(){
-
-	display: inline-block;	
-	height: $button-mini-default-height;	
-	padding-right: $button-mini-default-padding;
-	padding-right: $button-mini-default-padding;
-
-	span{
-		height: $button-mini-default-height;
-		line-height: $button-mini-default-height;
-		padding-left: $button-mini-default-padding;
-		display: block;
-	}
-
-}
-
-@mixin button-mini-visual(
-	
-	// Background del componente
-	$background: $button-mini-default-background,
-
-	// Color del componente
-	$color: $button-mini-default-color
-){
-
-	font-family: $button-mini-font-family;
-	text-decoration: none;
-	cursor: pointer;
-	@include background(linear-gradient(top, $background 0%, darken($background, 5%) 50%, darken($background, 10%) 51%, darken($background, 15%) 100%));
-	@include border-radius($button-mini-default-height);
-	@include box-shadow(#333 0px 1px 2px 0px);
-
-	&:hover{
-		text-decoration: none;
-		background: darken($background, 5%);
-	}
-
-	&:active{
-		background: darken($background, 15%);
-		@include box-shadow(#999 0px 0px 3px 3px inset);
-	}
-
-	span{
-		color: $color;
-		font-size: $button-mini-default-font-size;
-	}
-
-	.ie7 &, .ie8 &, .ie9 &{
-
-		@if $button-mini-ie-fallback == "sprites" {
-		
-			$button-mini-image: magick-canvas($button-mini-default-canvas-width, $button-mini-default-canvas-height * 2,
-				
-				//Normal
-				magick-compose(
-					magick-canvas($button-mini-default-canvas-width, $button-mini-default-canvas-height,
-						magick-compose(
-							magick-canvas($button-mini-default-canvas-width, $button-mini-default-canvas-height - 2,
-							    magick-fill(magick-linear-gradient($background 0%, darken($background, 5%) 50%, darken($background, 10%) 51%, darken($background, 15%) 100%)),
-							    magick-corners($button-mini-default-canvas-height / 2)
-							)
-						),
-						magick-drop-shadow(270deg, 2px, 2px, #333)
-					)
-				),
-				
-				//Hover
-				magick-compose(
-				
-					magick-canvas($button-mini-default-canvas-width, $button-mini-default-canvas-height,
-						magick-compose(
-							magick-canvas($button-mini-default-canvas-width, $button-mini-default-canvas-height - 2,
-							    magick-fill(magick-linear-gradient(darken($background, 5%))),
-							    magick-corners($button-mini-default-canvas-height / 2)
-							)
-						),
-						magick-drop-shadow(270deg, 2px, 2px, #333)
-					),
-					
-					0, $button-mini-default-canvas-height
-				)
-
-			);
-			
-			$initial-position: insert-in-sprite($button-mini-sprite-created, $button-mini-sprite-name, $button-mini-image, $button-mini-default-canvas-width, ($button-mini-default-canvas-height * 2));
-			$button-mini-sprite-created: true;
-			
-			background: image-url($button-mini-sprite-name + ".png", false, false);
-			background-position: right ((-1) * $initial-position);
-			
-			&:hover{
-				background-position: right ((-1) * ($initial-position + $button-mini-default-height)); 
-			}
-			
-			span {
-				background-image: image-url($button-mini-sprite-name + ".png", false, false);
-				background-color: white;
-				background-position: 0 ((-1) * $initial-position);
-				
-				&:hover{
-					background-position: 0 ((-1) * ($initial-position + $button-mini-default-height));
-				}
-			}
-			
-		} @else {
-			background-color: $background;
-		}
-
-	}
-
-	.ie9 &{
-		@include border-radius(none);
-		@include box-shadow(none);
-	}
-
-}