picasso 0.1.0 → 0.2.0

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

@@ -0,0 +1,220 @@
+//
+// Glossy Buttons
+//
+
+@import "compass/css3/images";
+@import "compass/css3/border-radius";
+@import "picasso/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;
+	
+	$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 &{
+	
+		@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: generated-image-url($button-glossy-sprite-name + ".png");
+			background-position: 0 ((-1) * $initial-position);
+			
+			&:hover{
+				background-position: 0 ((-1) * ($initial-position + $height));
+			}
+			
+		} @else {
+		
+			background-color: $background;
+			
+		}
+	}
+
+}

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

@@ -0,0 +1,150 @@
+//
+// Mini-Buttons
+//
+
+@import "compass/css3/images";
+@import "compass/css3/box-shadow";
+@import "compass/css3/border-radius";
+@import "picasso/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 boton
+	$background: $button-mini-default-background,
+
+	// Color del botón
+	$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 boton
+	$background: $button-mini-default-background,
+
+	// Color del botón
+	$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: generated-image-url($button-mini-sprite-name + ".png");
+			background-position: right ((-1) * $initial-position);
+			
+			&:hover{
+				background-position: right ((-1) * ($initial-position + $button-mini-default-height)); 
+			}
+			
+			span {
+				background-image: generated-image-url($button-mini-sprite-name + ".png");
+				background-color: white;
+				background-position: 0 ((-1) * $initial-position);
+				
+				&:hover{
+					background-position: 0 ((-1) * ($initial-position + $button-mini-default-height));
+				}
+			}
+			
+		} @else {
+			background-color: $background;
+		}
+
+	}
+
+}

metadata

@@ -4,9 +4,9 @@ version: !ruby/object:Gem::Version
   prerelease: false
   segments: 
   - 0
-  - 1
+  - 2
   - 0
-  version: 0.1.0
+  version: 0.2.0
 platform: ruby
 authors: 
 - Leandro D'Onofrio
@@ -14,7 +14,7 @@ autorequire:
 bindir: bin
 cert_chain: []
 
-date: 2012-07-13 00:00:00 -03:00
+date: 2012-07-18 00:00:00 -03:00
 default_executable: 
 dependencies: 
 - !ruby/object:Gem::Dependency 
@@ -45,20 +45,6 @@ dependencies:
         version: 0.1.6
   type: :runtime
   version_requirements: *id002
-- !ruby/object:Gem::Dependency 
-  name: oily_png
-  prerelease: false
-  requirement: &id003 !ruby/object:Gem::Requirement 
-    requirements: 
-    - - ">="
-      - !ruby/object:Gem::Version 
-        segments: 
-        - 1
-        - 0
-        - 2
-        version: 1.0.2
-  type: :runtime
-  version_requirements: *id003
 description: Picasso - Sass/Compass Framework
 email: 
 - ldonofrio@despegar.com
@@ -106,9 +92,8 @@ files:
 - docs/css/markdown.css
 - docs/css/style.css
 - docs/despegar.html
-- docs/ie.html
-- docs/img/picasso-buttons.png
-- docs/img/picasso-mini-buttons.png
+- docs/img/picasso-buttons-glossy.png
+- docs/img/picasso-buttons-mini.png
 - docs/img/picasso-nav.png
 - docs/img/picasso-popup.png
 - docs/index.html
@@ -141,8 +126,9 @@ files:
 - stylesheets/picasso/components/_navs.scss
 - stylesheets/picasso/components/_pagination.scss
 - stylesheets/picasso/components/_popups.scss
-- stylesheets/picasso/components/buttons/_buttons.scss
-- stylesheets/picasso/components/buttons/_mini-buttons.scss
+- stylesheets/picasso/components/buttons/_3d.scss
+- stylesheets/picasso/components/buttons/_glossy.scss
+- stylesheets/picasso/components/buttons/_mini.scss
 - stylesheets/picasso/despegar/_variables.scss
 - stylesheets/picasso/utils/_clearfix.scss
 - stylesheets/picasso/utils/_ie.scss
@@ -155,7 +141,7 @@ licenses: []
 post_install_message: "\n\n\
   ##################################################\n\
   ## Picasso - Sass/Compass Framework\n\n\
-  ## Versi\xC3\xB3n: 0.1.0\n\
+  ## Versi\xC3\xB3n: 0.2.0\n\
   ## Documentaci\xC3\xB3n: http://dl.dropbox.com/u/54126/picasso/docs/all.html\n\
   ## CHANGELOG: http://dl.dropbox.com/u/54126/picasso/docs/changelog.html#changelog\n\
   ##################################################\n\n"

data/docs/ie.html

@@ -1,201 +0,0 @@
-<!DOCTYPE html>
-<!--[if IE 7]> <html class="ie7"> <![endif]-->
-<!--[if IE 8]> <html class="ie8"> <![endif]-->
-<!--[if IE 9]> <html class="ie9"> <![endif]-->
-<!--[if gt IE 9]><!--> <html> <!--<![endif]-->
-
-<head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
-    <title>Picasso. Framework CSS/Sass.</title>
-    
-    <link type="text/css" rel="stylesheet" href="./css/markdown.css">
-    <link type="text/css" rel="stylesheet" href="./css/github.css">
-    <link type="text/css" rel="stylesheet" href="./css/style.css">
-</head>
-
-<body>
-
-    
-        <header>
-            <h1>Picasso. Framework CSS/Sass.</h1>
-        </header>
-    
-
-    
-
-        <hr>
-
-        <h2>Contenidos</h2>
-
-        <aside>
-            <nav>
-                <ol>
-                    
-                        <li>
-                            <a href="./intro.html#introduccioacuten">Introducci&amp;oacute;n</a>
-                            
-                                <ol>
-                                    
-                                        <li><a href="./intro.html#repositorio">Repositorio</a></li>
-                                    
-                                        <li><a href="./intro.html#instalacioacuten">Instalaci&amp;oacute;n</a></li>
-                                    
-                                        <li><a href="./intro.html#actualizacioacuten">Actualizaci&amp;oacute;n</a></li>
-                                    
-                                </ol>
-                            
-                        </li>
-                    
-                        <li>
-                            <a href="./changelog.html#changelog">Changelog</a>
-                            
-                                <ol>
-                                    
-                                        <li><a href="./changelog.html#004">0.0.4</a></li>
-                                    
-                                        <li><a href="./changelog.html#003">0.0.3</a></li>
-                                    
-                                        <li><a href="./changelog.html#002">0.0.2</a></li>
-                                    
-                                        <li><a href="./changelog.html#001">0.0.1</a></li>
-                                    
-                                </ol>
-                            
-                        </li>
-                    
-                        <li>
-                            <a href="./todo.html#todo">Todo</a>
-                            
-                                <ol>
-                                    
-                                        <li><a href="./todo.html#componentes">Componentes</a></li>
-                                    
-                                        <li><a href="./todo.html#utilidades">Utilidades</a></li>
-                                    
-                                        <li><a href="./todo.html#otros">Otros</a></li>
-                                    
-                                </ol>
-                            
-                        </li>
-                    
-                        <li>
-                            <a href="./mejoras.html#mejoras-antildeadidos">Mejoras / A&amp;ntilde;adidos</a>
-                            
-                                <ol>
-                                    
-                                        <li><a href="./mejoras.html#utilizar-el-coacutedigo-fuente">Utilizar el c&amp;oacute;digo fuente</a></li>
-                                    
-                                        <li><a href="./mejoras.html#pruebas-locales-de-nuevos-antildeadidos-cambios">Pruebas locales de nuevos a&amp;ntilde;adidos/cambios:</a></li>
-                                    
-                                        <li><a href="./mejoras.html#subidas-en-el-repositorio">Subidas en el repositorio</a></li>
-                                    
-                                        <li><a href="./mejoras.html#generar-la-documentacioacuten">Generar la documentaci&amp;oacute;n</a></li>
-                                    
-                                </ol>
-                            
-                        </li>
-                    
-                        <li>
-                            <a href="./components.html#components">Components</a>
-                            
-                                <ol>
-                                    
-                                        <li><a href="./ie.html#internet-explorer">Internet Explorer</a></li>
-                                    
-                                        <li><a href="./buttons.html#buttons">Buttons</a></li>
-                                    
-                                        <li><a href="./buttons.html#mini-buttons">Mini-Buttons</a></li>
-                                    
-                                        <li><a href="./inputs.html#inputs">Inputs</a></li>
-                                    
-                                        <li><a href="./navs.html#navs">Navs</a></li>
-                                    
-                                        <li><a href="./list-grids.html#list-grid">List Grid</a></li>
-                                    
-                                        <li><a href="./arrows.html#arrows">Arrows</a></li>
-                                    
-                                        <li><a href="./pagination.html#pagination">Pagination</a></li>
-                                    
-                                        <li><a href="./bubbles.html#bubbles">Bubbles</a></li>
-                                    
-                                        <li><a href="./popups.html#popups">Popups</a></li>
-                                    
-                                        <li><a href="./accordions.html#accordions">Accordions</a></li>
-                                    
-                                </ol>
-                            
-                        </li>
-                    
-                        <li>
-                            <a href="./utils.html#utils">Utils</a>
-                            
-                                <ol>
-                                    
-                                        <li><a href="./utils.html#clearfix">Clearfix</a></li>
-                                    
-                                        <li><a href="./utils.html#ie">IE</a></li>
-                                    
-                                        <li><a href="./utils.html#sprite">Sprite</a></li>
-                                    
-                                </ol>
-                            
-                        </li>
-                    
-                        <li>
-                            <a href="./despegar.html#despegar">Despegar</a>
-                            
-                                <ol>
-                                    
-                                        <li><a href="./despegar.html#variables">Variables</a></li>
-                                    
-                                </ol>
-                            
-                        </li>
-                    
-                </ol>
-            </nav>
-        </aside>
-
-    
-
-    <hr>
-
-    <article>
-    <a name="internet-explorer"></a><h2>Internet Explorer</h2>
-<p>La gran mayor&iacute;a de los componentes hacen uso intensivo de estilos CSS3 no soportados por versiones de Internet Explorer iguales o menores a 9. De manera predeterminada los componentes tienen estilos de fallback para tener compatibilidad con dicho navegador, el &uacute;nico requisito es que la p&aacute;gina que carga los estilos generados por Picasso posean la <a href="http://paulirish.com/2008/conditional-stylesheets-vs-css-hacks-answer-neither/">t&eacute;cnica de clases condicionales en la etiqueta html</a>:
-
-</p>
-<pre><code class="lang-html">&lt;!DOCTYPE html&gt;
-&lt;!--[if IE 7]&gt; &lt;html class=&quot;ie7&quot;&gt; &lt;![endif]--&gt;
-&lt;!--[if IE 8]&gt; &lt;html class=&quot;ie8&quot;&gt; &lt;![endif]--&gt;
-&lt;!--[if IE 9]&gt; &lt;html class=&quot;ie9&quot;&gt; &lt;![endif]--&gt;
-&lt;!--[if gt IE 9]&gt;&lt;!--&gt; &lt;html&gt; &lt;!--&lt;![endif]--&gt;</code></pre>
-<a name="estrategias-para-estilos-de-fallback-para-ie"></a><h3>Estrategias para estilos de fallback para IE</h3>
-<p>Para ciertos componentes, Picasso ofrece dos estrategias para estilos de fallback para versiones antiguas de Internet Explorer. Dichas estrateg&iacute;as se setean en variables individuales de cada componente, por ejemplo:
-
-</p>
-<pre><code class="lang-css">$&lt;componente&gt;-ie-fallback: &quot;sprites&quot;|&quot;GD&quot;</code></pre>
-<p>Los valores admitidos son <code>sprites</code> y <code>GD</code> (Graceful Degradation).
-
-</p>
-<a name="estrategiacutea-de-sprites"></a><h4>Estrateg&iacute;a de sprites</h4>
-<p>Por cada componente, Picasso generar&aacute; dinamicamente un sprite para recrear los estilos de cada elemento y setear&aacute; los estilos para que Internet Explorer utilice el sprite generado.
-
-</p>
-<a name="estrategiacutea-gd"></a><h4>Estrateg&iacute;a GD</h4>
-<p>Por cada componente, Picasso setear&aacute; estilos minimos, soportados por Internet Explorer, para que el componente siga siendo usable y funcional.</p>
-
-</article>
-
-
-    <footer>
-    </footer>
-
-  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
-  <script src="./js/docs.js"></script>
-  <script src="./js/rainbow-custom.min.js"></script>
-
-</body>
-
-</html>