picasso 0.2.3 → 0.3.0

data/stylesheets/picasso/components/_mini-tooltips.scss

@@ -0,0 +1,128 @@
+// ## Mini Tooltips
+
+// Excelentes para tooltips pequeños.
+
+// ### Ejemplos
+
+// ```
+// <div class="mini-tooltip-demo-1">
+//     Informaci&oacute;n
+// </div>
+// <div class="mini-tooltip-demo-2">
+//     Tarifa bebe
+// </div>
+// <div class="mini-tooltip-demo-3">
+//     Datos
+// </div>
+// ```
+
+// ### Sass
+
+// #### Import
+
+// `@import "picasso/components/mini-tooltips";`
+
+// #### Mixins
+
+// Con los par&aacute;metros por defecto:
+
+// `@include mini-tooltip();`
+
+// Con todos los par&aacute;metros:
+//
+// * `background`
+// * `background-opacity`
+// * `color`
+// * `height`
+
+// `@include mini-tooltip(red, 0.4, black, 31px);`
+
+
+@import "picasso/utils/ie";
+@import "compass/css3/opacity";
+
+$mini-tooltip-default-background: black;
+$mini-tooltip-default-background-opacity: 0.5;
+$mini-tooltip-default-color: white;
+$mini-tooltip-default-height: 20px;
+$mini-tooltip-default-arrow-size: 7px;
+
+@mixin mini-tooltip(
+	$background: $mini-tooltip-default-background,
+	$background-opacity: $mini-tooltip-default-background-opacity,
+	$color: $mini-tooltip-default-color,
+	$height: $mini-tooltip-default-height
+) {
+
+	@include mini-tooltip-visual($background, $background-opacity, $color);
+	@include mini-tooltip-layout($height);
+}
+
+@mixin mini-tooltip-visual(
+	$background: $mini-tooltip-default-background,
+	$background-opacity: $mini-tooltip-default-background-opacity,
+	$color: $mini-tooltip-default-color
+) {
+
+	color: $color;
+	font-size: 11px;
+	
+	&:after, .ie7 & .after {
+		opacity: $background-opacity;
+	
+        border-top: $mini-tooltip-default-arrow-size solid transparent;
+        border-bottom: $mini-tooltip-default-arrow-size solid transparent;
+        border-right: $mini-tooltip-default-arrow-size solid $background;
+	}
+	
+	&:before, .ie7 & .before {
+		background: $background;
+		opacity: $background-opacity;
+	}
+	
+	.ie7 &, .ie8 & {
+
+		&:before, & .before {
+			@include opacity($background-opacity);
+		}
+		
+	}
+}
+
+@mixin mini-tooltip-layout($height: $mini-tooltip-default-height) {
+
+	float: left;
+	position: relative;
+	padding: 0px 10px;
+	margin-left: 10px;
+	z-index: 0;
+	line-height: $height;
+	
+	&:after, .ie7 & .after {
+		content: "";                
+        position: absolute;
+        width: 0;
+        height: 0;
+        left: (-1) * $mini-tooltip-default-arrow-size;
+        top: (($height - ($mini-tooltip-default-arrow-size * 2)) / 2);
+	}
+	
+	&:before, .ie7 & .before {
+		content: "";                
+        position: absolute;
+        width: 100%;
+        height: $height;
+        top: 0px;
+        left: 0px;
+        z-index: -1;
+	}
+	
+	.ie7 & {
+   		@include before;
+   		
+   		& .before {
+			@include after;
+		}
+    }
+	
+}

data/stylesheets/picasso/components/_navs.scss

@@ -1,6 +1,56 @@
+// ## Navs
+
+// Barras de navegación.
+
+// ### Ejemplos
+
+// ```
+// <div class="nav-demo-1">
+// 	<ul>
+// 		<li>
+// 			<a href="#">Item</a>
+// 		</li>
+// 		<li class="active">
+// 			<a href="#">Item</a>
+// 		</li>
+// 		<li class="last">
+// 			<a href="#">Item</a>
+// 		</li>
+// 	</ul>
+// </div>
+// ```
+
+// > **Nota**: Para compatibilidad con versiones anteriores a Internet Explorer 9, se debe agregar la clase 
+// `last` al HTML del &uacute;ltimo item de la navegaci&oacute;n.
+
+// ### Sass
+
+// #### Import
+
+// `@import "picasso/components/navs";`
+
+// #### Mixins
+
+// Con los par&aacute;metros por defecto:
+
+// `@include nav();`
+
+// Con todos los par&aacute;metros:
 //
-// Navs
-//
+// * `width` (de la barra)
+// * `height` (de la barra)
+// * `background-color`
+// * `border-color`
+// * `shadow-color`
+// * `float` (de la barra)
+
+// `@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";

data/stylesheets/picasso/components/_pagination.scss

@@ -1,6 +1,67 @@
+// ## Pagination
+
+// Implementación tradicional del paginador.
+
+// ### Ejemplos
+
+// ```
+// <div class="pagination-demo-1">
+// 	<ul>
+// 		<li class="prev">
+// 			<a href="#">Anterior</a>
+// 		</li>
+// 		<li>
+// 			<a href="#">1</a>
+// 		</li>
+// 		<li>
+// 			<a href="#">2</a>
+// 		</li>
+// 		<li class="active">
+// 			<a>3</a>
+// 		</li>
+// 		<li>
+// 			<a href="#">4</a>
+// 		</li>
+// 		<li class="disabled">
+// 			<a href="#">5</a>
+// 		</li>
+// 		<li class="dots">
+// 			<a>...</a>
+// 		</li>
+// 		<li>
+// 			<a href="#">12</a>
+// 		</li>
+// 		<li class="next">
+// 			<a href="#">Siguiente</a>
+// 		</li>
+// 	</ul>
+// </div>
+// ```
+
+// ### Sass
+
+// #### Import
+
+// `@import "picasso/components/pagination";`
+
+// #### Mixins
+
+// Con los par&aacute;metros por defecto:
+
+// `@include pagination();`
+
+// Con todos los par&aacute;metros:
 //
-// Pagination
-//
+// * `color` (item activo)
+// * `color` (item no activo)
+// * `background-color` (item no activo)
+// * `border-color` (todos los items)
+// * `border-radius` (todos los items)
+// * `color` (estado hover, todos los items)
+// * `background-color` (estado hover, todos los items)
+
+// `@include pagination(black, blue, white, red, 10px, yellow, green);`
+
 
 @import "compass/css3/border-radius";
 

data/stylesheets/picasso/components/_popups.scss

@@ -1,6 +1,77 @@
+// ## Popups
+
+// Estilos para recrear popups.
+
+// ### Ejemplos
+
+// #### Ejemplo 1
+
+// ```
+// <div class="popup-demo-1">
+// 	<div class="popup-container">
+// 		<div class="popup-header">
+// 			<h4>Aeropuerto</h4>
+// 		</div>
+// 		<div class="popup-content">
+// 			<p>Miami</p>
+// 			<p>Aeropuerto Internacional Miami</p>
+// 		</div>
+// 	</div>
+// 	<span class="popup-close">x</span>
+// 	<span class="popup-arrow popup-arrow-bottom"></span>
+// </div>
+// ```
+
+// #### Ejemplo 2
+
+// ```
+// <div class="popup-demo-2">
+// 	<div class="popup-container">
+// 		<div class="popup-content">
+// 			<p>Miami</p>
+// 			<p>Aeropuerto Internacional Miami</p>
+// 		</div>
+// 	</div>
+// </div>
+// ```
+
+// Las clases para los 4 tipos de flecha son:
+
+// * `popup-arrow-top`
+// * `popup-arrow-bottom`
+// * `popup-arrow-left`
+// * `popup-arrow-right`
+
+// ### Sass
+
+// #### Import
+
+// `@import "picasso/components/popups";`
+
+// #### Mixins
+
+// Con los par&aacute;metros por defecto:
+
+// `@include popup();`
+
+// Con todos los par&aacute;metros:
 //
-// popups
-//
+// * `background-color`
+// * `border-radius`
+// * `shadow`
+// * `border-color`
+// * `background-color` (botón cerrar)
+// * `color` (botón cerrar)
+// * `background-color` (título)
+// * `color` (título)
+
+// `@include popup(black, 10px, rgba(0, 0, 0, 0.5) 0px 0px 20px, rgba(1, 61, 147, 0.7), blue, white, black, red);`
+
+// ### 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";

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

@@ -1,6 +1,79 @@
+// ## 3D Buttons
+
+// ### Ejemplos
+
+// #### Normales
+
+// ```
+// <a class="button-3d-demo-1">
+//     <span>Comprar</span>
+// </a>
+// <a class="button-3d-demo-2">
+//     <span>Buscar</span>
+// </a>
+// <a class="button-3d-demo-3">
+//     <span>Reservar</span>
+// </a>
+// ```
+
+// #### Desactivados
+
+// ```
+// <a class="button-3d-demo-1 disabled">
+//     <span>Comprar</span>
+// </a>
+// <a class="button-3d-demo-2 disabled">
+//     <span>Buscar</span>
+// </a>
+// <a class="button-3d-demo-3 disabled">
+//     <span>Reservar</span>
+// </a>
+// ```
+
+// #### Variante: ancho 100%
+
+// ```
+// <a class="button-3d-demo-4">
+//     <span>Full-width</span>
+// </a>
+// ```
+
+// #### Variante: bordes redondeados 100%
+
+// ```
+// <a class="button-3d-demo-5">
+//     <span>Full-rounded</span>
+// </a>
+// <a class="button-3d-demo-5 disabled">
+//     <span>Full-rounded disabled</span>
+// </a>
+// ```
+
+// ### Sass
+
+// #### Import
+
+// `@import "picasso/components/buttons";`
+
+// #### Mixins
+
+// Con los par&aacute;metros por defecto:
+
+// `@include button-3d();`
+
+// Con todos los par&aacute;metros:
 //
-// 3D Buttons
-//
+// * `background-color`
+// * `color`
+// * `font-size`
+// * `full-width`
+// * `full-rounded`
+
+// `@include button-3d(red, white, 24px, true, true);`
+
+// ### Fallback IE
+
+// La estrategia de los botones es siempre graceful degradation.
 
 @import "compass/css3/images";
 @import "compass/css3/border-radius";

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

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