sassy-buttons 0.0.5 → 0.0.6

data/README.mkdn

@@ -1,7 +1,7 @@
-Compass CSS Sassy Buttons 
+Compass CSS Sassy Buttons
 =========================
 
-Super sassy and super easy CSS3 buttons. 
+Super sassy and super easy CSS3 buttons.
 
 ![sassy buttons](http://dl.dropbox.com/u/1274637/sassy-buttons.png)
 
@@ -12,25 +12,17 @@ Installation
 
 Install gem from the command line:
 
-    sudo gem install sassy-buttons
+    (sudo) gem install sassy-buttons
 
-Create a new project using Sassy Buttons
+Installing Sassy Buttons:
 
-    compass create project_name -r sassy-buttons --using sassy-buttons
-    
-    #import sassy buttons into your sass/scss file
-    @import "sassybuttons"
-
-    
-Adding Sassy Buttons to an exiting project:
-    
     # Edit the project configuration file and add:
     require 'sassy-buttons'
-    
+
     # From the command line:
-    compass install sassy-buttons
-    
-    #import sassy buttons into your sass/scss file
+    compass install -r sassy-buttons -f sassy-buttons
+
+    #import sassy buttons partial into your sass/scss file
     @import "sassybuttons"
 
 
@@ -38,17 +30,18 @@ Using Sassy Buttons
 ===================
 
 The Sassy Button mixin
-    
-    # The simplest form of the mixin using the provided defaults (See Defaults section below)   
+
+    # The simplest form of the mixin using the provided defaults (See Defaults section below)
     @include sassy-button
-    
-    # The Sassy Button mixin takes optional arguments that you can use to customise your buttons on the fly
-    # This will create a button with a blue matte stlye gradient, with a 15px border radius, 20px font size    
+
+    # The Sassy Button mixin takes optional arguments that you can use to customize your buttons on the fly
+    # This will create a button with a blue matte style gradient, with a 15px border radius, 20px font size
     @include sassy-button("matte", 15px, 20px, rgba(11, 153, 194, 1))
 
-    # The complete Sassy Button mixin syntax  
-    @include sassy-button(gradient style, border radius, font size, first color, second color, text color, text style, auto hover)
-    
+    # The complete Sassy Button mixin syntax
+		@include sassy-button(gradient-style, border-radius, font-size, first-color, second-color, text-color, text-style, auto-states)
+	
+
 
 Sassy Buttons Gradient Styles
 ----------------------------
@@ -58,7 +51,7 @@ Sassy buttons offer five gradient styles for your buttons. These gradients are g
 * Matte - A gradient that adds depth but retains a matte finish.
 * Shiny - A gradient that has a larger highlight area that gives a shinier look.
 * Glass - A gradient that provides a glass finish
-* Flat - No gradient, button will be given first color provided. 
+* Flat - No gradient, button will be given first color provided.
 
 Sassy Buttons Text Styles
 -------------------------
@@ -73,36 +66,34 @@ Sassy Buttons Defaults
 
 The Sassy Buttons extension provides a set of default sass variables that are used in the various mixins to create the buttons. These defaults can be overridden to customize your buttons and has the added benefit of having to provide less arguments when calling the sassy button mixin.
 
-	# Available defaults	
-	$sb-base-color: rgba(11,153,194,1)   // Base color of button, used to caluclate graident styles.
-	$sb-second-color: false              // Optional secondary color for gradient.
-	$sb-border-radius: 10px              // Border radius of button.
-	$sb-border-width: 1px                // Border width.
-	$sb-padding: .5em 1.5em              // Padding that gives button structure.
-	$sb-font-size: 16px                  // Font size.
-	$sb-line-height: 1.2em               // Line Height.
-	$sb-text-color: #fff                 // Button font color.
-	$sb-text-style: "inset"              // Style of button text, can be "inset" or "raised" or false.
-	$sb-gradient-style: "matte"          // Gradient style of button, can be "matte", "shiny", "glass", "simple", "flat".
-	$sb-hover: true                      // Automatically generate psuedo :hover state styles.
-	
-	# Sassy Button structure mixin that gets called everytime you create a sassy button.
-	# You can add any custom styles you want applied to all your buttons.	
-	@mixin sassy-button-default-structure
-		display: inline-block	
-		width: auto
-		height: auto
-		cursor: pointer
-		
+  # Available defaults
+	$sb-base-color:       rgba(11,153,194,1)  // Base color of button.
+	$sb-second-color:     false               // Optional secondary color for gradient.
+	$sb-border-radius:    10px                // Border radius of button.
+	$sb-padding:          .3em 1.5em          // Padding that gives button structure.
+	$sb-font-size:        16px                // Font size.
+	$sb-text-color:       #fff                // Button font color.
+	$sb-text-style:       "inset"             // Style of button text, can be "inset" or "raised" or false.
+	$sb-gradient-style:   "simple"            // Gradient style of button, can be "flat", "glass", "matte", "shiny", or "simple".
+	$sb-pseudo-states:    true                // Automatically generate pseudo state styles.
+
+  # Sassy Button structure mixin that gets called every time you create a sassy button.
+  # You can add any custom styles you want applied to all your buttons.
+	@mixin sassy-button-default-sassytructure
+	  display: inline-block
+	  cursor: pointer
+	  line-height: 1.5
+
+
 Additional Sassy Button Styles
 ------------------------------
 
 Sassy Buttons provides two mixins that can add a little extra style to your buttons
 
-	# Mixin for adding styles to buttons
-	@include sassy-button-style(style, color)
+  # Mixin for adding styles to buttons
+  @include sassy-button-style(style, color)
 
-Available styles: 
+Available styles:
 
 * Inset - box shadow that gives button an inset look.
 * Push - box shadow that gives button a pushable look.
@@ -111,16 +102,12 @@ Available styles:
 Available Sassy Buttons Mixins
 ------------------------------
 
-A sassy button is made up a few different mixins, which all get called by the main sassy button mixin (@include sassy-button). These mixins are  available for you to use for advanced control over your buttons.  
+A sassy button is made up a few different mixins, which all get called by the main sassy button mixin (@include sassy-button). These mixins are  available for you to use for advanced control over your buttons.
 
-	# Mixin for the structure of your button (this mixin calls the sassy-button-default structure mixin).
-	# Example use: Creating a custom button structure to apply color and text style mixins on.
-	@include sassy-button-structure(border radius, border width, padding, font size, line height)
-    
-	# Mixin for the gradient styles
-	# Example use: You could call this mixin on a :hover or :active state to provide your own styles for those pseudo states.
-	@include sassy-button-colors(gradient style, first color, second color, auto hover, text-color, text-style)
-	
-	# Mixin for text styles
-	# Example use: Apply a "inset", "raised" text style to a button
-	@include sassy-button-text-style(first color, second-color text color, text style )
+  # Mixin for the structure of your button (this mixin calls the sassy-button-default structure mixin).
+  # Example use: Creating a custom button structure to apply color and text style mixins on.
+  @include sassy-button-structure(border-radius, font-size, padding)
+
+  # Mixin for the gradient styles
+  # Example use: You could call this mixin on a :hover or :active state to provide your own styles for those pseudo states.
+  @include sassy-button-gradient(gradient-style, first-color, second-color, text-color, text-style, auto-states)

data/lib/sassy-buttons.rb

@@ -1,3 +1 @@
-require 'compass'
-extension_path = File.expand_path(File.join(File.dirname(__FILE__), ".."))
-Compass::Frameworks.register('sassy-buttons', :path => extension_path)
+Compass::Frameworks.register("sassy-buttons", :path => "#{File.dirname(__FILE__)}/..")

data/stylesheets/_sassy-buttons.sass

@@ -1,4 +1,4 @@
-// Sassy Buttons 
+// Sassy Buttons
 // Compass extension by Jared Hardy - http://www.jaredhardy.com
 
 @import "compass/css3/border-radius"
@@ -6,54 +6,45 @@
 @import "compass/css3/text-shadow"
 @import "compass/css3/gradient"
 
-@import "sassy-buttons/sassy-button-colors"
+@import "sassy-buttons/sassy-button-gradients"
 @import "sassy-buttons/sassy-button-styles"
 @import "sassy-buttons/sassy-button-text"
 @import "sassy-buttons/sassy-button-pseudo-states"
 
 
 // Sassy Button defaults
-// These are the base defaults for the buttons, if you are going to use similar buttons on an entire site changing these 
-// can save you some time by calling the sassy button mixin with less arguments. 
-
-$sb-base-color: rgba(11,153,194,1) 	// Base color of button.
-$sb-second-color: false 					// Optional secondary color for gradient.
-$sb-border-radius: 10px 						// Border radius of button.
-$sb-border-width: 1px 							// Border width.
-$sb-padding: .5em 1.5em 						// Padding that gives button structure.
-$sb-font-size: 16px									// Font size.
-$sb-line-height: 1.2em							// Line Height.
-$sb-text-color: #fff			 					// Button font color.
-$sb-text-style: "inset"							// Style of button text, can be "inset" or "raised" or false.
-$sb-gradient-style: "matte"					// Gradient style of button, can be "matte", "shiny", or "glass".
-$sb-hover: true											// Automatically generate psuedo :hover state styles.
-$sb-ieSupport: false								// TODO - Better IE support
-
-// Mixing that gets included when calling the sassy-button-structure if you need any 
+// These are the base defaults for the buttons, if you are going to use similar buttons on an entire site changing these
+// can save you some time by calling the sassy button mixin with less arguments.
+
+$sb-base-color:       rgba(11,153,194,1)  // Base color of button.
+$sb-second-color:     false               // Optional secondary color for gradient.
+$sb-border-radius:    10px                // Border radius of button.
+$sb-padding:          .3em 1.5em          // Padding that gives button structure.
+$sb-font-size:        16px                // Font size.
+$sb-text-color:       #fff                // Button font color.
+$sb-text-style:       "inset"             // Style of button text, can be "inset" or "raised" or false.
+$sb-gradient-style:   "simple"            // Gradient style of button, can be "flat", "glass", "matte", "shiny", or "simple".
+$sb-pseudo-states:    true                // Automatically generate pseudo state styles.
+
+
+// Mixing that gets included when calling the sassy-button-structure if you need any
 // styles applied to all your sassy buttons, add it here.
-@mixin sassy-button-default-structure
-	:display inline-block	
-	:width auto
-	:height auto
-	:cursor pointer
-	// IE support that will be coming soon
-	//@if($sb-ieSupport)
-		//:background-image image-url(ie-gradient.png)
-		//:background-repeat repeat-x
+@mixin sassy-button-default-sassytructure
+  display: inline-block
+  cursor: pointer
+  line-height: 1.5
 
 // The Sassy Button kitchen sink.
-@mixin sassy-button($gradient-style: $sb-gradient-style, $border-radius: $sb-border-radius, $font-size: $sb-font-size, $first-color: $sb-base-color, $second-color: $sb-second-color, $text-color:$sb-text-color, $text-style: $sb-text-style, $auto-hover: $sb-hover)
-	@include sassy-button-structure($border-radius, $sb-border-width, $sb-padding, $font-size, $sb-line-height)
-	@include sassy-button-colors($gradient-style, $first-color, $second-color, $auto-hover, $text-color, $text-style)
-	
-	
+@mixin sassy-button($gradient-style: $sb-gradient-style, $border-radius: $sb-border-radius, $font-size: $sb-font-size, $first-color: $sb-base-color, $second-color: $sb-second-color, $text-color:$sb-text-color, $text-style: $sb-text-style, $auto-states: $sb-pseudo-states)
+  @include sassy-button-structure($border-radius, $font-size, $sb-padding)
+  @include sassy-button-gradient($gradient-style, $first-color, $second-color, $text-color, $text-style, $auto-states)
+
+
+
 // Structure for a sassy button
-@mixin sassy-button-structure($border-radius: $sb-border-radius, $border-width: $sb-border-width, $padding: $sb-padding, $font-size: $sb-font-size, $line-height: $sb-line-height)
-	@include sassy-button-default-structure
-	:font-size $font-size
-	:padding $padding
-	:line-height $line-height
-	:border-style solid 
-	:border-width $border-width
-	@include border-radius($border-radius)
-	
+@mixin sassy-button-structure($border-radius: $sb-border-radius, $font-size: $sb-font-size, $padding: $sb-padding)
+  font-size: $font-size
+  padding: $padding
+  @include sassy-button-default-structure
+  @include border-radius($border-radius)
+

data/stylesheets/sassy-buttons/_sassy-button-gradients.sass

@@ -0,0 +1,83 @@
+// Mixin that does all the gradient magic
+@import "sassy-button-text"
+@import "sassy-button-shadows"
+
+@mixin sassy-button-gradient($style: "matte", $base-color: $sb-base-color, $second-color: false, $text-color: $sb-text-color, $text-style: $sb-text-style,  $auto-states: true)
+  $first-color: $base-color
+  $lightness : lightness($base-color)
+  $brightnessDivsor : 1
+  @if $lightness > 75
+    $brightnessDivsor : 2
+
+  background-color: $base-color
+
+  // Matte Gradient Style
+  @if $style == "matte"
+    $first-color: $base-color
+
+    @if $second-color == false
+      $first-color: lighten($base-color,15%)
+      $second-color: $base-color
+
+    @include background(linear-gradient(color-stops($first-color, $second-color 70%)))
+    @include sassy-button-highlight-shadow($first-color)
+    border: 1px solid darken($second-color, 5%)
+
+    @if $auto-states
+      @include sassy-pseudo-states($first-color, $second-color, $style)
+
+  // Shiny Gradient Style
+  @if $style == "shiny"
+    $first-color: lighten($base-color, 25% / $brightnessDivsor)
+
+    @if $second-color == false
+      $second-color: darken($base-color, 10%)
+
+    @include background(linear-gradient(color-stops($first-color, $base-color 50%, $second-color)))
+    @include sassy-button-highlight-shadow($first-color)
+    border: 1px solid darken($second-color, 5%)
+
+    @if $auto-states
+      @include sassy-pseudo-states($first-color, $second-color, $style)
+
+  // Glass Gradient Style
+  @if $style == "glass"
+    $first-color: lighten($base-color, 8% / $brightnessDivsor)
+
+    @if $second-color == false
+      $second-color: $base-color
+
+    @include background(linear-gradient(color-stops($first-color 50%, $base-color 51%)))
+    @include sassy-button-highlight-shadow($first-color)
+    border: 1px solid darken($second-color, 5%)
+
+    @if $auto-states
+      @include sassy-pseudo-states($first-color, $second-color, $style)
+
+  // Simple Gradient Style
+  @if $style == "simple"
+    @if $second-color == false
+      $second-color: darken($base-color, 10%)
+
+    @include background(linear-gradient(color-stops($base-color, $second-color)))
+    @include sassy-button-highlight-shadow($first-color)
+    border: 1px solid darken($second-color, 5%)
+
+    @if $auto-states
+      @include sassy-pseudo-states($base-color, $second-color, $style)
+
+  // Flat Style
+  @if $style == "flat"
+    $second-color: $base-color
+    background-color: $base-color
+    border: 0
+
+    @if $auto-states
+      @include sassy-pseudo-states($base-color, false, $style)
+
+  // Apply Text Styles
+  @if $text-style
+    @include sassy-button-text-style($first-color, $second-color, $text-color, $text-style)
+
+
+

data/stylesheets/sassy-buttons/_sassy-button-pseudo-states.sass

@@ -1,41 +1,42 @@
-// Mixin that generates :hover state, will eventually add other psuedo states.
+// Mixin that generates :hover and :active psuedo states.
+
+@mixin sassy-pseudo-states($first-color, $second-color, $style)
+  @include sassy-button-hover($first-color, $second-color, $style)
+
+
+@mixin sassy-button-hover($first-color, $second-color, $style)
+
+  @if $style == "matte"
+    &:hover
+      background-color: darken($second-color, 5%)
+      @include background(linear-gradient(color-stops(darken($first-color, 5%) 3%, darken($second-color, 5%) 75%)))
+    &:active
+      @include sassy-button-active-shadow($second-color)
+  @if $style == "shiny"
+    &:hover
+      background-color: $second-color
+      @include background(linear-gradient(color-stops(darken($first-color, 2%), $second-color 50%, darken($second-color, 8%))))
+    &:active
+      @include sassy-button-active-shadow($second-color)
+  @if $style == "glass"
+    &:hover
+      background-color: darken($second-color, 7%)
+      @include background(linear-gradient(color-stops(darken($first-color, 7%) 50%, darken($second-color, 7%) 51%)))
+    &:active
+      @include sassy-button-active-shadow($second-color)
+  @if $style == "simple"
+    &:hover
+      background-color: darken($second-color, 5%)
+      @include background(linear-gradient(color-stops(darken($first-color, 5%),darken($second-color, 5%))))
+    &:active
+      @include sassy-button-active-shadow($second-color)
+  @if $style == "flat"
+    &:hover
+      background-color: darken($first-color, 5%)
+    &:active
+      background-color: darken($first-color, 8%)
 
-@mixin sassy-pseudo-states($states, $first-color, $second-color, $highlight, $style)
-	@if $states == "all"
-		@include sassy-button-hover($first-color, $second-color, $highlight, $style)
 
 
-@mixin sassy-button-hover($first-color, $second-color, $highlight, $style)
 
-	@if $style == "matte"
-		&:hover
-			@include sb-ie-hover($first-color)
-			@include background(linear-gradient(color-stops($highlight, lighten($first-color, 5%) 3%, lighten($second-color, 5%) 75%)))
-	@if $style == "shiny"
-		&:hover
-			@include sb-ie-hover($first-color)
-			@include background(linear-gradient(color-stops($highlight, lighten($first-color, 4%) 3%, lighten($second-color, 8%) 60%, lighten($second-color, 4%))))
-	@if $style == "glass"
-		&:hover
-			@include sb-ie-hover($first-color)
-			@include background(linear-gradient(color-stops($highlight, lighten($first-color, 15%) 2%, lighten($first-color, 10%) 50%, lighten($first-color, 3%) 51%, lighten($second-color, 10%))))
-	@if $style == "simple"
-		&:hover
-			@include sb-ie-hover($first-color)
-			@include background(linear-gradient(color-stops(lighten($first-color, 5%),lighten($second-color, 5%))))
-	@if $style == "flat"
-		&:hover
-			:background-color lighten($first-color, 5%)
 
-// To do add other pseudo states
-
-
-@mixin sb-ie-hover($color)
-	@if $sb-ieSupport
-		@if (lightness($color) > 75)
-			$color: darken($color, 15%)
-		:background-color $color
-
-
-
-	

data/stylesheets/sassy-buttons/_sassy-button-shadows.sass

@@ -0,0 +1,8 @@
+// Mixinins for shadows used in buttons
+@mixin sassy-button-highlight-shadow($base-color)
+  @include box-shadow(lighten($base-color, 15%) 0 1px 0 inset)
+
+@mixin sassy-button-active-shadow($second-color)
+  @include box-shadow(darken($second-color, 8%) 0 1px 2px inset)
+
+

data/stylesheets/sassy-buttons/_sassy-button-styles.sass

@@ -1,13 +1,15 @@
 // Mixin for some optional styles on sassy buttons
 
 @mixin sassy-button-style($style, $base-color: $sb-base-color)
-	@if $style == "push"
-		@include box-shadow(darken($base-color, 5%), 0, 0.4em, 0px)
-		:border-bottom solid 1px lighten($base-color, 3%)
-		&:active
-			:top .3em
-			@include box-shadow(darken($base-color, 8%), 0, 0.2em, 0px)
-	@if $style == "inset"
-		@include box-shadow(darken($base-color, 8%) 0 0.2em 0.4em inset)
-		:border solid 1px darken($base-color, 15%)
+  @if $style == "push"
+    @include box-shadow(darken($base-color, 12%) 0 0.4em 0px, lighten($base-color, 18%) 0 1px 0 inset)
+    border-bottom: solid 1px $base-color
+    &:active
+      top: .3em
+      @include box-shadow(darken($base-color, 8%) 0 0.2em 0px)
+  @if $style == "inset"
+    @include box-shadow(darken($base-color, 8%) 0 0.2em 0.4em inset)
+    border: solid 1px darken($base-color, 15%)
+    &:active
+      @include box-shadow(darken($base-color, 12%) 0 0.2em 0.4em inset)
 

data/stylesheets/sassy-buttons/_sassy-button-text.sass

@@ -1,24 +1,25 @@
 // Mixin that controls the text style
 @mixin sassy-button-text-style($base-color, $second-color, $text-color, $text-style: "inset")
-	$text-lightness: lightness($text-color)
-	$text-color-shift: 0
-	$diff : lightness($base-color) - lightness($second-color)
-	
-	@if $diff > 40
-		$text-color-shift: 30  + ($diff/10) 
-	@else if $diff > 18
-		$text-color-shift: 20  + ($diff/10) 
-	@else
-		$text-color-shift: 10  + ($diff/10) 
-	
-	:color $text-color
-	@if $text-style == "inset"
-		@if $text-lightness < 50
-			@include text-shadow(lighten($base-color, $text-color-shift) 0 1px 0)
-		@else	
-			@include text-shadow(darken($base-color, $text-color-shift), 0 -1px 0)
-	@if $text-style == "raised"
-		@if $text-lightness < 50
-			@include text-shadow(lighten($base-color, $text-color-shift), 0 -1px 0)
-		@else
-			@include text-shadow(darken($base-color, $text-color-shift), 0 1px 0)
+  $text-lightness: lightness($text-color)
+  $text-color-shift: 0
+  $diff : lightness($base-color) - lightness($second-color)
+
+  @if $diff > 40
+    $text-color-shift: 35  + ($diff/10)
+  @else if $diff > 18
+    $text-color-shift: 30  + ($diff/10)
+  @else
+    $text-color-shift: 25  + ($diff/10)
+
+  color: $text-color
+
+  @if $text-style == "inset"
+    @if $text-lightness < 50
+      @include text-shadow(lighten($second-color, ($text-color-shift/1.5)) 0 1px 0)
+    @else
+      @include text-shadow(darken($base-color, $text-color-shift) 0 -1px 0)
+  @if $text-style == "raised"
+    @if $text-lightness < 50
+      @include text-shadow(lighten($second-color, ($text-color-shift/1.5)) 0 -1px 0)
+    @else
+      @include text-shadow(darken($base-color, $text-color-shift) 0 1px 0)

data/templates/project/_sassybuttons.sass

@@ -1,27 +1,32 @@
 @import "sassy-buttons"
 
 
-// Sassy Button defaults
-// These are the base defaults for the buttons, if you are going to use similar buttons on an entire site, 
-// overriding these can save you some time by calling the sassy button mixin with less arguments. 
+//   Sassy Button defaults
+//   These are the base defaults for the buttons, if you are going to use similar buttons on an entire site,
+//   overriding these can save you some time by calling the sassy button mixin with less arguments.
 
-$sb-base-color: rgba(11,153,194,1) 	// Base color of button.
-$sb-second-color: false 					// Optional secondary color for gradient.
-$sb-border-radius: 10px 						// Border radius of button.
-$sb-border-width: 1px 							// Border width.
-$sb-padding: .5em 1.5em 						// Padding that gives button structure.
-$sb-font-size: 16px									// Font size.
-$sb-line-height: 1.2em							// Line Height.
-$sb-text-color: #fff			 					// Button font color.
-$sb-text-style: "inset"							// Style of button text, can be "inset" or "raised" or false.
-$sb-gradient-style: "matte"					// Gradient style of button, can be "matte", "shiny", or "glass".
-$sb-hover: true											// Automatically generate psuedo :hover state styles.
-$sb-ieSupport: false								// TODO - Better IE support
+$sb-base-color:       rgba(11,153,194,1)  // Base color of button.
+$sb-second-color:     false               // Optional secondary color for gradient.
+$sb-border-radius:    10px                // Border radius of button.
+$sb-padding:          .3em 1.5em          // Padding that gives button structure.
+$sb-font-size:        16px                // Font size.
+$sb-text-color:       #fff                // Button font color.
+$sb-text-style:       "inset"             // Style of button text, can be "inset" or "raised" or false.
+$sb-gradient-style:   "simple"            // Gradient style of button, can be "flat", "glass", "matte", "shiny", or "simple".
+$sb-pseudo-states:    true                // Automatically generate pseudo state styles.
+
+//  Mixin that gets included when calling the sassy-button-structure if you need any
+//  styles applied to all your sassy buttons, add it here.
 
-// Mixing that gets included when calling the sassy-button-structure if you need any 
-// styles applied to all your sassy buttons, you can add them here.
 @mixin sassy-button-default-structure
-	:display inline-block	
-	:width auto
-	:height auto
-	:cursor pointer
+  display: inline-block
+  cursor: pointer
+  text-decoration: none
+  line-height: 1.5
+
+
+//  *    Mixin reference
+//  *   -----------------------------------------
+//  *   @include sassy-button(gradient-style, border-radius, font-size, first-color, second-color, text-color, text-style, auto-states);
+//  *   @include sassy-button-structure(-border-radius, font-size, padding);
+//  *   @include sassy-button-gradient(gradient-style, first-color, second-color, text-color, text-style, auto-states);

metadata

@@ -1,72 +1,67 @@
---- !ruby/object:Gem::Specification 
+--- !ruby/object:Gem::Specification
 name: sassy-buttons
-version: !ruby/object:Gem::Version 
+version: !ruby/object:Gem::Version
+  version: 0.0.6
   prerelease: 
-  version: 0.0.5
 platform: ruby
-authors: 
+authors:
 - Jared Hardy
 autorequire: 
 bindir: bin
 cert_chain: []
-
-date: 2011-06-03 00:00:00 Z
-dependencies: 
-- !ruby/object:Gem::Dependency 
+date: 2011-06-03 00:00:00.000000000 -07:00
+default_executable: 
+dependencies:
+- !ruby/object:Gem::Dependency
   name: compass
-  prerelease: false
-  requirement: &id001 !ruby/object:Gem::Requirement 
+  requirement: &70361258691380 !ruby/object:Gem::Requirement
     none: false
-    requirements: 
-    - - ">="
-      - !ruby/object:Gem::Version 
-        version: "0.11"
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: '0.11'
   type: :runtime
-  version_requirements: *id001
+  prerelease: false
+  version_requirements: *70361258691380
 description: Sassy css3 buttons using compass
 email: jared@jaredhardy.com
 executables: []
-
 extensions: []
-
 extra_rdoc_files: []
-
-files: 
+files:
 - README.mkdn
 - lib/sassy-buttons.rb
 - stylesheets/_sassy-buttons.sass
-- stylesheets/sassy-buttons/_sassy-button-colors.sass
+- stylesheets/sassy-buttons/_sassy-button-gradients.sass
 - stylesheets/sassy-buttons/_sassy-button-pseudo-states.sass
+- stylesheets/sassy-buttons/_sassy-button-shadows.sass
 - stylesheets/sassy-buttons/_sassy-button-styles.sass
 - stylesheets/sassy-buttons/_sassy-button-text.sass
 - templates/project/_sassybuttons.sass
 - templates/project/manifest.rb
+has_rdoc: true
 homepage: http://www.jaredhardy.com
 licenses: []
-
 post_install_message: 
 rdoc_options: []
-
-require_paths: 
+require_paths:
 - lib
-required_ruby_version: !ruby/object:Gem::Requirement 
+required_ruby_version: !ruby/object:Gem::Requirement
   none: false
-  requirements: 
-  - - ">="
-    - !ruby/object:Gem::Version 
-      version: "0"
-required_rubygems_version: !ruby/object:Gem::Requirement 
+  requirements:
+  - - ! '>='
+    - !ruby/object:Gem::Version
+      version: '0'
+required_rubygems_version: !ruby/object:Gem::Requirement
   none: false
-  requirements: 
-  - - ">="
-    - !ruby/object:Gem::Version 
-      version: "0"
+  requirements:
+  - - ! '>='
+    - !ruby/object:Gem::Version
+      version: '0'
 requirements: []
-
 rubyforge_project: 
-rubygems_version: 1.7.2
+rubygems_version: 1.6.2
 signing_key: 
 specification_version: 3
 summary: css only buttons extension for compass
 test_files: []
-

data/stylesheets/sassy-buttons/_sassy-button-colors.sass

@@ -1,78 +0,0 @@
-// Mixin that does all the gradient magic    
-@import "sassy-button-text"
-
-@mixin sassy-button-colors($style: "matte", $base-color: $sb-base-color, $second-color: "false", $auto-states: true, $text-color: $sb-text-color, $text-style: $sb-text-stlye)
-	$first-color: $base-color
-	$lightness : lightness($base-color)
-	$brightnessDivsor : 1
-	@if $lightness > 75
-		$brightnessDivsor : 2
-	
-	background-color: $base-color
-	
-	
-	@if $style == "matte"
-		$highlight: lighten($base-color, 30%)
-		$first-color: $base-color
-		
-		@if $second-color == false
-			$first-color: lighten($base-color,15%)
-			$second-color: $base-color	
-		
-		@include background(linear-gradient(color-stops($highlight, $first-color 3%, $second-color 70%)))
-	
-		:border-color $second-color
-		@if $auto-states
-			@include sassy-pseudo-states("all", $first-color, $second-color, $highlight, $style)
-	
-		
-	@if $style == "shiny"
-		$highlight : lighten($base-color, 55%)
-		$first-color: lighten($base-color, 25% / $brightnessDivsor) 
-		
-		@if $second-color == false
-			$second-color: darken($base-color, 10%)
-			
-		@include background(linear-gradient(color-stops($highlight,$first-color 3%, $base-color 50%, $second-color)))
-		
-		:border-color $second-color
-		
-		@if $auto-states
-			@include sassy-pseudo-states("all", $first-color, $second-color, $highlight, $style)
-		
-	@if $style == "glass"
-		$highlight : lighten($base-color, 55%)
-		$shine: lighten($base-color,10%)
-		$first-color: lighten($base-color, 8% / $brightnessDivsor)
-		
-		@if $second-color == false
-			$second-color: darken($base-color, 10%)
-		
-		@include background(linear-gradient(color-stops($highlight, $shine 2%, $first-color 50%, $base-color 51%, $second-color)))
-		:border-color $second-color
-		
-		@if $auto-states
-			@include sassy-pseudo-states("all", $first-color, $second-color, $highlight, $style)
-	
-	@if $style == "simple"	
-		@if $second-color == false
-			$second-color: darken($base-color, 20%)
-		
-		@include background(linear-gradient(color-stops($base-color, $second-color)))
-		:border-color $second-color
-		
-		@if $auto-states
-			@include sassy-pseudo-states("all", $base-color, $second-color, false, $style)
-		
-	@if $style == "flat"
-		$second-color: $base-color
-		:background-color $base-color
-		:border 0
-		
-		@if $auto-states
-			@include sassy-pseudo-states("all", $base-color, false, false, $style)
-	
-	// Apply Text Styles 
-	@if $text-style 	
-		@include sassy-button-text-style($first-color, $second-color, $text-color, $text-style)   
-