picasso 0.3.6 → 0.3.7

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

@@ -75,12 +75,13 @@
 
 @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) 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 +124,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 +137,7 @@ $popup-ie-fallback: "sprites" !default;
 			line-height: 20px;
 		    padding: 10px;	
 		}
+
 	}
 	
 	.popup-container {
@@ -145,8 +147,8 @@ $popup-ie-fallback: "sprites" !default;
 	
 	.popup-arrow{
         position: absolute;
-	    height: 0px;
-	    width: 0px;
+	    height: 0;
+	    width: 0;
 	}
 	
 	.popup-arrow-bottom {
@@ -173,19 +175,24 @@ $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);
+	    @include box-sizing(content-box);
 	}
 	
+	.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));
@@ -196,10 +203,6 @@ $popup-ie-fallback: "sprites" !default;
 
 	}
 	
-	.ie7 & {
-   		@include after;
-    }
-	
 }
 
 @mixin popup-visual(
@@ -214,12 +217,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;
@@ -268,19 +271,35 @@ $popup-ie-fallback: "sprites" !default;
 		border: $popup-default-close-button-border solid $close-button-color;
 		color: $close-button-color;
 		font-weight: bold;
-		font-family: sans-serif;
-		font-size: 16px;
+		font-family: arial, sans-serif;
+		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 {
+			background-color: $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));
@@ -305,7 +324,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 +337,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);
 			}
 			
 		}

data/stylesheets/picasso/components/_tooltips.scss

@@ -10,6 +10,7 @@
 // <span class="tooltip-demo-1 tooltip-left">
 // 	Lorem ipsum
 // </span>
+//
 // <span class="tooltip-demo-2 tooltip-right">
 // 	Lorem ipsum
 // </span>
@@ -21,6 +22,7 @@
 // <span class="tooltip-demo-3 tooltip-left">
 // 	Aliquam tincidunt mauris.
 // </span>
+//
 // <span class="tooltip-demo-4 tooltip-right">
 // 	Aliquam tincidunt mauris.
 // </span>

data/stylesheets/picasso/despegar/_mixins.scss

@@ -0,0 +1,53 @@
+// ## Mixins
+
+// mixins genericos para despegar
+
+// ### Ejemplo
+// #### Cuerpos tipograficos
+// ```
+// <div><span class="text-demo-1">11px - Aliquam tincidunt mauris eu risus.</span></div>
+// <div><span class="text-demo-2">13px - Aliquam tincidunt mauris eu risus.</span></div>
+// <div><span class="text-demo-3">16px - Aliquam tincidunt mauris eu risus.</span></div>
+// <div><span class="text-demo-4">20px - Aliquam tincidunt mauris eu risus.</span></div>
+// <div><span class="text-demo-5">24px - Aliquam tincidunt mauris eu risus.</span></div>
+// ```
+
+// ### Sass
+
+// #### Import
+
+// `@import "picasso/despegar/mixins";`
+
+// #### Mixins
+
+// `@include font-size-1();`
+
+// `@include font-size-2();`
+
+// `@include font-size-3();`
+
+// `@include font-size-4();`
+
+// `@include font-size-5();`
+
+@mixin font-size-1() {
+	font-size: $despegar-size-1;
+}
+
+@mixin font-size-2() {
+	font-size: $despegar-size-2;
+}
+
+@mixin font-size-3() {
+	font-size: $despegar-size-3;
+}
+
+@mixin font-size-4() {
+	font-size: $despegar-size-4;
+	letter-spacing: -1px;
+}
+
+@mixin font-size-5() {
+	font-size: $despegar-size-5;
+	letter-spacing: -1px;
+}

data/stylesheets/picasso/utils/_rem.scss

@@ -0,0 +1,137 @@
+// ## Rem
+
+// Permite utilizar la unidad [rem](http://www.w3.org/TR/css3-values/#font-relative-lengths).
+
+// Basado en https://github.com/ry5n/rem
+
+// ### Sass
+
+// #### Import
+
+// `@import "picasso/utils/rem";`
+
+// #### Mixins
+
+// `@include rem('font-size', 10px);`
+
+
+ // @private Default font-size for all browsers
+$browser-default-font-size: 16px;
+
+ // Base font size in pixels, if not already defined.
+ // Should be the same as the font-size of the html element.
+$base-font-size: 16px !default;
+
+ // Whether to output fallback values in px when outputting rems.
+$rem-with-px-fallback: true !default;
+
+ // Convert any CSS <length> or <percentage> value to any other.
+@function convert-length($length, $to-unit, $from-context: $base-font-size, $to-context: $from-context) {
+	$from-unit: unit($length);
+
+	// Optimize for cases where from and to may accidentally be the same.
+	@if $from-unit == $to-unit { @return $length; }
+	@if unit($from-context) != 'px' { @warn "Paremeter $from-context must resolve to a value in pixel units."; }
+	@if unit($to-context) != 'px' { @warn "Parameter $to-context must resolve to a value in pixel units."; }
+
+	// Fixed ratios
+	// https://developer.mozilla.org/en/CSS/length
+	// http://dev.w3.org/csswg/css3-values/#absolute-lengths
+	$px-per-in: 96px / 1in;
+	$px-per-mm: 96px / 25.4mm;
+	$px-per-cm: 96px / 2.54cm;
+	$px-per-pt: 4px / 3pt;
+	$px-per-pc: 16px / 1pc;
+
+	// Variables to store actual convesion ratios
+	$px-per-from-unit: 1;
+	$px-per-to-unit: 1;
+
+	@if $from-unit != 'px' {
+		@if      $from-unit == 'em'  { $px-per-from-unit: $from-context / 1em }
+		@else if $from-unit == 'rem' { $px-per-from-unit: $base-font-size / 1rem }
+		@else if $from-unit == '%'   { $px-per-from-unit: $from-context / 100% }
+		@else if $from-unit == 'ex'  { $px-per-from-unit: $from-context / 2ex }
+		@else if $from-unit == 'in'  { $px-per-from-unit: $px-per-in }
+		@else if $from-unit == 'mm'  { $px-per-from-unit: $px-per-mm }
+		@else if $from-unit == 'cm'  { $px-per-from-unit: $px-per-cm }
+		@else if $from-unit == 'pt'  { $px-per-from-unit: $px-per-pt }
+		@else if $from-unit == 'pc'  { $px-per-from-unit: $px-per-pc }
+		@else if $to-unit == 'ch' or $to-unit == 'vw' or $to-unit == 'vh' or $to-unit == 'vmin' {
+			@warn "#{$from-unit} units can't be reliably converted; Returning original value.";
+			@return $length;
+		}
+		@else {
+			@warn "#{$from-unit} is an unknown length unit. Returning original value.";
+			@return $length;
+		}
+	}
+
+	@if $to-unit != 'px' {
+		@if      $to-unit == 'em'  { $px-per-to-unit: $to-context / 1em }
+		@else if $to-unit == 'rem' { $px-per-to-unit: $base-font-size / 1rem }
+		@else if $to-unit == '%'   { $px-per-to-unit: $to-context / 100% }
+		@else if $to-unit == 'ex'  { $px-per-to-unit: $to-context / 2ex }
+		@else if $to-unit == 'in'  { $px-per-to-unit: $px-per-in }
+		@else if $to-unit == 'mm'  { $px-per-to-unit: $px-per-mm }
+		@else if $to-unit == 'cm'  { $px-per-to-unit: $px-per-cm }
+		@else if $to-unit == 'pt'  { $px-per-to-unit: $px-per-pt }
+		@else if $to-unit == 'pc'  { $px-per-to-unit: $px-per-px }
+		@else if $to-unit == 'ch' or $to-unit == 'vw' or $to-unit == 'vh' or $to-unit == 'vmin' {
+			@warn "#{$to-unit} units can't be reliably converted; Returning original value.";
+			@return $length;
+		}
+		@else {
+			@warn "#{$to-unit} is an unknown length unit. Returning original value.";
+			@return $length;
+		}
+	}
+	@return $length * $px-per-from-unit / $px-per-to-unit;
+}
+
+ // For the given property, use rem units with px as a fallback value for older
+ // browsers.
+ //
+ // $property - The css property name.
+ // $values - The value (or space-separated list of values) for the property.
+ // $use-px-fallback - Boolean, default: true; whether to use pixel fallback values
+ //
+@mixin rem($property, $values, $use-px-fallback: $rem-with-px-fallback) {
+	// Create a couple of empty lists as output buffers.
+	$px-values: ();
+	$rem-values: ();
+
+	// Ensure $values is a list.
+	@if type-of($values) != 'list' {
+		$values: join((), $values);
+	}
+
+	// Loop through the $values list
+	@each $value in $values {
+		// For each property value, if it's in rem or px, derive both rem and
+		// px values for it and add those to the end of the appropriate buffer.
+		// Ensure all pixel values are rounded to the nearest pixel.
+		@if type-of($value) == number and not unitless($value) and (unit($value) == px or unit($value) == rem) {
+			@if unit($value) == px {
+				$px-values: join($px-values, round($value));
+				$rem-values: join($rem-values, convert-length($value, rem));
+			}
+			@else {
+				$px-values: join($px-values, round(convert-length($value, px)));
+				$rem-values: join($rem-values, $value);
+			}
+		}
+		@else {
+			$px-values: join($px-values, $value);
+			$rem-values: join($rem-values, $value);
+		}
+	}
+
+	// Use pixel fallback for browsers that don't understand rem units.
+	@if $use-px-fallback {
+		#{$property}: $px-values;
+	}
+
+	// Use rem values for everyone else (overrides pixel values).
+	#{$property}: $rem-values;
+}

metadata

@@ -5,8 +5,8 @@ version: !ruby/object:Gem::Version
   segments: 
   - 0
   - 3
-  - 6
-  version: 0.3.6
+  - 7
+  version: 0.3.7
 platform: ruby
 authors: 
 - Leandro D'Onofrio
@@ -14,7 +14,7 @@ autorequire:
 bindir: bin
 cert_chain: []
 
-date: 2012-09-19 00:00:00 -03:00
+date: 2012-11-12 00:00:00 -03:00
 default_executable: 
 dependencies: 
 - !ruby/object:Gem::Dependency 
@@ -81,6 +81,7 @@ files:
 - docs/picasso-components-_arrows.html
 - docs/picasso-components-_bubbles.html
 - docs/picasso-components-_buttons.html
+- docs/picasso-components-_clusters.html
 - docs/picasso-components-_inputs.html
 - docs/picasso-components-_list-grids.html
 - docs/picasso-components-_navs.html
@@ -90,10 +91,12 @@ files:
 - docs/picasso-components-buttons-_3d.html
 - docs/picasso-components-buttons-_glossy.html
 - docs/picasso-components-buttons-_mini.html
+- docs/picasso-despegar-_mixins.html
 - docs/picasso-despegar-_variables.html
 - docs/picasso-utils-_clearfix.html
 - docs/picasso-utils-_grid.html
 - docs/picasso-utils-_ie.html
+- docs/picasso-utils-_rem.html
 - docs/picasso-utils-_sprite.html
 - docs/previews.js
 - docs/resources/docs.jade
@@ -111,6 +114,7 @@ files:
 - stylesheets/picasso/components/_arrows.scss
 - stylesheets/picasso/components/_bubbles.scss
 - stylesheets/picasso/components/_buttons.scss
+- stylesheets/picasso/components/_clusters.scss
 - stylesheets/picasso/components/_inputs.scss
 - stylesheets/picasso/components/_list-grids.scss
 - stylesheets/picasso/components/_navs.scss
@@ -120,10 +124,12 @@ files:
 - 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
 - stylesheets/picasso/utils/_grid.scss
 - stylesheets/picasso/utils/_ie.scss
+- stylesheets/picasso/utils/_rem.scss
 - stylesheets/picasso/utils/_sprite.scss
 - templates/project/manifest.rb
 has_rdoc: true
@@ -133,7 +139,7 @@ licenses: []
 post_install_message: "\n\n\
   ##################################################\n\
   ## Picasso - Sass/Compass Framework\n\n\
-  ## Versi\xC3\xB3n: 0.3.6\n\
+  ## Versi\xC3\xB3n: 0.3.7\n\
   ## Documentaci\xC3\xB3n: http://dl.dropbox.com/u/54126/picasso/docs/index.html\n\
   ## CHANGELOG: http://dl.dropbox.com/u/54126/picasso/docs/index.html#changelog\n\
   ##################################################\n\n"