picasso 0.2.3 → 0.3.0

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

@@ -1,6 +1,48 @@
+// ## 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:
 //
-// Mini-Buttons
-//
+// * `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";

data/stylesheets/picasso/despegar/_variables.scss

@@ -1,23 +1,27 @@
-//
-// Variables de la marca Despegar
-// Formato de variables: 
-// 		Atajos: ${marca}-{atajo}. Ejemplo: $despegar-black;
-// 		Elementos: ${marca}-{elemento}-{propiedad css (opcional)}-{pseudoselector (opcional)}. Ejemplo: $despegar-link-color-hover;
-//
-
-//
-// @section marca
-//
+ // Variables de la marca Despegar
+ // Formato de variables: 
+ // * Atajos: ${marca}-{atajo}. Ejemplo: $despegar-black;
+ // * Elementos: ${marca}-{elemento}-{propiedad css (opcional)}-{pseudoselector (opcional)}. Ejemplo: $despegar-link-color-hover;
+
+ // @section marca
 $brand : "despegar";
 
+// ## Variables
+
+// ### Ejemplos
 
-//
-// @section cuerpos tipograficos
-//
+// #### Cuerpos tipograficos
 
-//
-// Tamaños
-//
+// ```
+// <p class="despegar-size-1-demo">11px - Aliquam tincidunt mauris eu risus.</p>
+// <p class="despegar-size-2-demo">13px - Aliquam tincidunt mauris eu risus.</p>
+// <p class="despegar-size-3-demo">16px - Aliquam tincidunt mauris eu risus.</p>
+// <p class="despegar-size-4-demo">20px - Aliquam tincidunt mauris eu risus.</p>
+// <p class="despegar-size-5-demo">24px - Aliquam tincidunt mauris eu risus.</p>
+// <p class="despegar-size-6-demo">28px - Aliquam tincidunt mauris eu risus.</p>
+// ```
+
+ // Cuerpos tipograficos
 $despegar-size-1 	: 11px;
 $despegar-size-2 	: 13px;
 $despegar-size-3 	: 16px;
@@ -26,22 +30,31 @@ $despegar-size-5 	: 24px;
 $despegar-size-6 	: 28px;
 
 
-//
-// @section colores base
-//
-
-//
-// Comunes
-//
+// #### Colores base
+
+// ```
+// <p class="despegar-black-demo">#000 - Aliquam tincidunt mauris eu risus.</p>
+// <p class="despegar-white-demo">#FFF - Aliquam tincidunt mauris eu risus.</p>
+// <p class="despegar-yellow-demo">#FF3 - Aliquam tincidunt mauris eu risus.</p>
+// <p class="despegar-red-demo">#F00 - Aliquam tincidunt mauris eu risus.</p>
+// <p class="despegar-blue-demo">#013D93 - Aliquam tincidunt mauris eu risus.</p>
+// <p class="despegar-gray-1-demo">#222 - Aliquam tincidunt mauris eu risus.</p>
+// <p class="despegar-gray-2-demo">#444 - Aliquam tincidunt mauris eu risus.</p>
+// <p class="despegar-gray-3-demo">#666 - Aliquam tincidunt mauris eu risus.</p>
+// <p class="despegar-gray-4-demo">#888 - Aliquam tincidunt mauris eu risus.</p>
+// <p class="despegar-gray-5-demo">#AAA - Aliquam tincidunt mauris eu risus.</p>
+// <p class="despegar-gray-6-demo">#CCC - Aliquam tincidunt mauris eu risus.</p>
+// <p class="despegar-gray-7-demo">#EEE - Aliquam tincidunt mauris eu risus.</p>
+// ```
+
+ // Colores base: Comunes
 $despegar-black		: #000;
 $despegar-white		: #FFF;
 $despegar-yellow	: #FF3;
 $despegar-red		: #F00;
 $despegar-blue		: #013D93;
 
-//
-// Escala de grises 
-//
+ // Colores base: Escala de grises 
 $despegar-gray-1	: #222;
 $despegar-gray-2	: #444;
 $despegar-gray-3	: #666;
@@ -51,53 +64,41 @@ $despegar-gray-6	: #CCC;
 $despegar-gray-7	: #EEE;
 
 
-//
-// @section elementos
-//
+// #### Elementos
 
-//
-// Buscador
-//
+// ```
+// <p class="despegar-searchbox-bg-demo">#FF3 Background Buscador - Aliquam tincidunt mauris eu risus.</p>
+// <p class="despegar-title-color-demo">#013D93 Color Titulos - Aliquam tincidunt mauris eu risus.</p>
+// <p class="despegar-titlealt-color-demo">#F90 Color Titulos alternativos - Aliquam tincidunt mauris eu risus.</p>
+// <p class="despegar-link-color-demo">#319FDA Color links - Aliquam tincidunt mauris eu risus.</p>
+// <p class="despegar-link-color-hover-demo">#66CCFF Color links (hover) - Aliquam tincidunt mauris eu risus.</p>
+// <p class="despegar-error-bg-demo">#FFE6E6 Color Titulos - Aliquam tincidunt mauris eu risus.</p>
+// <p class="despegar-error-border-demo">#F00 Color borde mensajes de error - Aliquam tincidunt mauris eu risus.</p>
+// <p class="despegar-warning-bg-demo">#FFFFE1 Background mensajes - Aliquam tincidunt mauris eu risus.</p>
+// <p class="despegar-warning-border-demo">#FC3 Color borde mensajes - Aliquam tincidunt mauris eu risus.</p>
+// ```
+
+ // Buscador
 $despegar-searchbox-bg	: $despegar-yellow;
 
-//
-// Titulos y destacados
-//
+ // Titulos y destacados
 $despegar-title-color 	: $despegar-blue;
 
-//
-// Titulos y destacados (alt)
-//
+ // Titulos y destacados (alt)
 $despegar-titlealt-color	: #F90;
 
-
-//
-// @section controles
-//
-
-//
-// Links
-//
+ // Links
 $despegar-link-color 		: #319FDA;
 $despegar-link-color-hover 	: #66CCFF;
 
-//
-// Errores: fondo
-//
+ // Errores: fondo
 $despegar-error-bg           : #FFE6E6;
 
-//
-// Errores: borde
-//
+ // Errores: borde
 $despegar-error-border       : $despegar-red;
 
-//
-// Warning: fondo
-//
+ // Warning: fondo
 $despegar-warning-bg         : #FFFFE1;
 
-//
-// Warning: borde
-//
-$despegar-warning-border     : #FC3;
-
+ // Warning: borde
+$despegar-warning-border     : #FC3;

data/stylesheets/picasso/utils/_clearfix.scss

@@ -1,19 +1,27 @@
-//
-// Clearfix
-//
-
-
-//
-// Permite aplicar la tecnica clearfix en determinados elementos, sin utilizar overflow: hidden o un elemento demas
-// 
-// @example
-// .my-element {
-//   @include clearfix;
-// }
-// 
-// @see http://nicolasgallagher.com/micro-clearfix-hack/
-// 
-//
+// ## Clearfix
+
+// Basado en [A new micro clearfix hack](http://nicolasgallagher.com/micro-clearfix-hack/). 
+// Permite aplicar la técnica clearfix en determinados elementos, sin utilizar `overflow: hidden` o un elemento extra.
+
+// ### Sass
+
+// #### Import
+
+// `@import "picasso/utils/clearfix";`
+
+// #### Mixin
+
+// `@include clearfix();`
+
+// ### Ejemplo
+
+// ```
+// <div class="clearfix-demo">
+// 		<div style="float: left; width: 30px; height: 10px;"></div>
+// </div>
+// ```
+
+
 
 @mixin clearfix{
 

data/stylesheets/picasso/utils/_grid.scss

@@ -0,0 +1,269 @@
+// ## Grid
+
+// Grilla responsiva a 12 columnas (o mas).
+
+// Cada set de columnas tiene un ancho porcentual. El elemento que haga uso de un espacio debe tener la clase `colX`, 
+// en donde *X* es el número de columnas a ocupar. Las columnas definidas siempre deben estar contenidas por un elemento con la clase `row-col`.
+
+// ### Ejemplos
+
+// #### Simétrico
+
+// ```
+// <div class="row-col">
+// 	<div class="col1">col1</div>
+// 	<div class="col1">col1</div>
+// 	<div class="col1">col1</div>
+// 	<div class="col1">col1</div>
+// 	<div class="col1">col1</div>
+// 	<div class="col1">col1</div>
+// 	<div class="col1">col1</div>
+// 	<div class="col1">col1</div>
+// 	<div class="col1">col1</div>
+// 	<div class="col1">col1</div>
+// 	<div class="col1">col1</div>
+// 	<div class="col1">col1</div>
+// </div>
+// <div class="row-col">
+// 	<div class="col2">col2</div>
+// 	<div class="col2">col2</div>
+// 	<div class="col2">col2</div>
+// 	<div class="col2">col2</div>
+// 	<div class="col2">col2</div>
+// 	<div class="col2">col2</div>
+// </div>
+// <div class="row-col">
+// 	<div class="col3">col3</div>
+// 	<div class="col3">col3</div>
+// 	<div class="col3">col3</div>
+// 	<div class="col3">col3</div>
+// </div>
+// <div class="row-col">
+// 	<div class="col4">col4</div>
+// 	<div class="col4">col4</div>
+// 	<div class="col4">col4</div>
+// </div>
+// <div class="row-col">
+// 	<div class="col6">col6</div>
+// 	<div class="col6">col6</div>
+// </div>
+// <div class="row-col">
+// 	<div class="col12">col12</div>
+// </div>
+// ```
+
+// #### Asim&eacute;trico
+
+// ```
+// <div class="row-col">
+// 	<div class="col5">col5</div>
+// 	<div class="col7">col7</div>
+// </div>
+// <div class="row-col">
+// 	<div class="col4">col4</div>
+// 	<div class="col8">col8</div>
+// </div>
+// <div class="row-col">
+// 	<div class="col3">col3</div>
+// 	<div class="col9">col9</div>
+// </div>
+// <div class="row-col">
+// 	<div class="col2">col2</div>
+// 	<div class="col10">col10</div>
+// </div>
+// <div class="row-col">
+// 	<div class="col1">col1</div>
+// 	<div class="col11">col11</div>
+// </div>
+// ```
+
+// #### Anidado
+
+// ```
+// <div class="row-col">
+// 	<div class="col12">col12
+// 		<div class="row-col">
+// 			<div class="col6">col6
+// 				<div class="row-col">
+// 					<div class="col3">col3</div>
+// 					<div class="col9">col9</div>
+// 				</div>
+// 			</div>
+// 			<div class="col6">col6
+// 				<div class="row-col">
+// 					<div class="col4">col4</div>
+// 					<div class="col8">col8</div>
+// 				</div>
+// 			</div>
+// 		</div>
+// 		<div class="row-col">
+// 			<div class="col7">col7
+// 				<div class="row-col">
+// 					<div class="col6">col6</div>
+// 					<div class="col6">col6</div>
+// 				</div>
+// 			</div>
+// 			<div class="col5">col5
+// 				<div class="row-col">
+// 					<div class="col9">col3</div>
+// 					<div class="col3">col9</div>
+// 				</div>
+// 			</div>
+// 		</div>
+// 		<div class="row-col">
+// 			<div class="row-col">
+// 				<div class="col6">col6</div>
+// 				<div class="col6">col6</div>
+// 			</div>
+// 		</div>
+// 	</div>
+// </div>
+// ```
+
+// #### Offset
+
+// La grilla ofrece la psibilidad de utilizar offsets, los mismos se manejan a trav&eacute;s de la clase `offsetX`:
+
+// ```
+// <div class="row-col">
+// 	<div class="col1">col1</div>
+// 	<div class="col2 offset1">col2 offset1</div>
+// 	<div class="col2 offset1">col2 offset1</div>
+// 	<div class="col2 offset1">col2 offset1</div>
+// 	<div class="col1 offset1">col1 1</div>
+// </div>
+// <div class="row-col">
+// 	<div class="col2">col2</div>
+// 	<div class="col4 offset2">col2 offset2</div>
+// 	<div class="col2 offset2">col2 offset2</div>
+// </div>
+// <div class="row-col">
+// 	<div class="col4">col4</div>
+// 	<div class="col2 offset1">col2 offset1</div>
+// 	<div class="col4 offset1">col4 offset1</div>
+// </div>
+// <div class="row-col">
+// 	<div class="col5">col5</div>
+// 	<div class="col5 offset2">col5 offset2</div>
+// </div>
+// <div class="row-col">
+// 	<div class="col1 offset2">col1 2</div>
+// 	<div class="col2 offset2">col1 offset2</div>
+// 	<div class="col1 offset2">col1 2</div>
+// </div>
+// ```
+
+// ### Sass
+
+// #### Import
+
+// `@import "picasso/utils/grid";`
+
+// #### Mixin
+
+// `@include grid();`
+
+// ### Configuraci&oacute;n
+
+// La grilla posee las siguientes variables para modificar su configuraci&oacute;n:
+
+// * `$grid-default-columns`: Cantidad de columnas. Esta variable modifica la cantidad de columnas disponibles en la grilla y 
+// resuelve todos los anchos de manera autom&aacute;tica. Valor predeterminado: 12.
+// * `$grid-default-column-class`: Nombre de la clase para el contenedor (`row-col`) y las columnas (`colX`). Valor predeterminado: `col`.
+// * `$grid-default-offset-class`: Nombre de la clase para aplicar offset (`offsetX`). Valor predeterminado: `offset`.
+// * `$grid-default-include-offset`: Incluir estilos para aplicar offset. Valor predeterminado: `true`.
+
+
+@import "compass/css3/box-sizing";
+@import "picasso/utils/clearfix";
+
+$grid-default-columns: 12 !default;
+$grid-default-column-class: "col" !default;
+$grid-default-offset-class: "offset" !default;
+$grid-default-container-class: "container" !default;
+$grid-default-include-offset: true !default;
+
+@mixin grid(){
+
+	@include grid-container();
+	@include grid-columns();
+
+}
+
+@mixin grid-container(){
+
+	.#{$grid-default-container-class} {
+		width: 90%;
+		max-width: 1200px;
+		min-width: 950px;
+	}
+
+}
+
+@mixin grid-columns(){
+
+	$grid-gutters: $grid-default-columns - 1;
+	$grid-space-width: 100% / $grid-default-columns;
+	$grid-space-unit-width: ($grid-space-width / 4);
+	$grid-corrector: $grid-space-unit-width / ($grid-default-columns + $grid-gutters);
+	$grid-column-unit-width: ($grid-space-unit-width * 3) + $grid-corrector;
+	$grid-gutter-unit-width: $grid-space-unit-width + $grid-corrector;
+	$grid-magic-number-ie: 0.092;
+
+	.row-#{$grid-default-column-class} {
+		width: 100%;
+		@include clearfix;
+
+		[class^="#{$grid-default-column-class}"]{
+			width: 100%;
+			min-height: 25px;
+			display: block;
+			float: left;
+			margin-left: $grid-gutter-unit-width;
+			@include box-sizing(border-box);
+
+			&:first-child{
+				margin-left: 0;
+			}
+
+			img {
+				max-width: 100%;
+			}
+
+		}
+
+		@for $i from 1 through $grid-default-columns {
+
+			$grid-column-width: ($grid-column-unit-width * $i) + ($grid-gutter-unit-width * ($i - 1));
+
+			.#{$grid-default-column-class}#{$i} {
+				width: $grid-column-width;
+
+				@if $i != $grid-default-columns {
+
+					.ie7 &{
+						width: $grid-column-width - $grid-magic-number-ie;
+					}
+
+				}
+
+			}
+
+			@if $grid-default-include-offset == true {
+
+				[class^="#{$grid-default-column-class}"].#{$grid-default-offset-class}#{$i}{
+					margin-left: $grid-column-width + ($grid-space-unit-width * 2);
+
+					&:first-child{
+						margin-left: $grid-column-width + $grid-space-unit-width;
+					}
+
+				}
+
+			}
+
+		}
+
+	}
+
+}