added support for inverted click, matte gradient, and custom gradient…

…. Added fancy-button-padding mixin for more control

lib/sass/_fancy_buttons.sass

@@ -1,75 +1,108 @@
 @import compass/css3.sass
 @import fancy_gradient.sass
 
-!default_button_font_size ||= 18px
-!default_button_color ||= #444
-!default_button_font_weight ||= "bold"
-!default_button_border_width ||= 1px
-!default_button_radius ||= 6px
-!default_button_light_text ||= #fff
-!default_button_dark_text ||= #222
+!fb_gradient_style ||= "glossy"
+!fb_invert_on_click ||= 1
+!fb_font_size ||= 18px
+!fb_color ||= #444
+!fb_font_weight ||= "bold"
+!fb_border_width ||= 1px
+!fb_radius ||= 6px
+!fb_light_text ||= #fff
+!fb_dark_text ||= #222
 
 // Make a fancy button.
-=fancy-button(!color= !default_button_color, !font_size= !default_button_font_size, !radius= !default_button_radius, !border_width= !default_button_border_width)
+=fancy-button(!color= !fb_color, !font_size= !fb_font_size, !radius= !fb_radius, !border_width= !fb_border_width)
   +fancy-button-structure(!font_size, !radius, !border_width)
   +fancy-button-colors(!color)
 
 // Style the button's colors, picking the most appropriate color set for the base color.
-=fancy-button-colors(!color = !default_button_color, !hover = 0, !active = 0)
-  +fb-color(!color)
+=fancy-button-colors(!color = !fb_color, !hover = 0, !active = 0)
+  +fb-color(!color, "default")
   &:hover, &:focus
     @if !hover == 0
-      +fb-color(darken(!color, 3), !color)
+      +fb-color(darken(!color, 3), "hover", !color)
     @else
-      +fb-color(!hover)
+      +fb-color(!hover, "hover")
   &:active
     @if !active == 0
-      +fb-color(darken(!color, 6), !color)
+      +fb-color(darken(!color, 6), "active", !color)
     @else
-      +fb-color(!active)
+      +fb-color(!active, "active")
+
+=fancy-button-matte(!color= !fb_color, !font_size= !fb_font_size, !radius= !fb_radius, !border_width= !fb_border_width)
+  +fancy-button-structure(!font_size, !radius, !border_width)
+  +fancy-button-colors-matte(!color)
+
+=fancy-button-custom(!color= !fb_color, !font_size= !fb_font_size, !radius= !fb_radius, !border_width= !fb_border_width)
+  +fancy-button-structure(!font_size, !radius, !border_width)
+  +fancy-button-colors-custom(!color, !font_size, !radius, !border_width)
+
+=fancy-button-colors-matte(!color = !fb_color, !hover = 0, !active = 0)
+  !fb_current_style = !fb_gradient_style
+  !fb_gradient_style = "matte"
+  +fancy-button-colors(!color, !hover, !active)
+  !fb_gradient_style = !fb_current_style
+
+=fancy-button-colors-custom(!color = !fb_color, !hover = 0, !active = 0)
+  !fb_current_style = !fb_gradient_style
+  !fb_gradient_style = "custom"
+  +fancy-button-colors(!color, !hover, !active)
+  !fb_gradient_style = !fb_current_style
 
 // Default state color settings
-=fb-color(!color, !lumins = !color)
+=fb-color(!color, !state, !lumins = !color)
   !gradient_top = lighten(!color, 15)
   !gradient_bottom = darken(!color, 06)
   !border_color = darken(!color, 08)
+  @if !fb_invert_on_click != 0
+    !border_color = darken(!color, 15)
   @if saturation(!color) > 0
     !color = saturate(!color, 40)
-  +fb-state-colors(!color, !gradient_top, !gradient_bottom, !border_color, !lumins)
+  +fb-state-colors(!color, !gradient_top, !gradient_bottom, !border_color, !state, !lumins)
 
 // Apply the button colors specified for the button state into which it is mixed.
-=fb-state-colors(!color, !gradient_top, !gradient_bottom, !border, !lumins = !color)
+=fb-state-colors(!color, !gradient_top, !gradient_bottom, !border, !state, !lumins = !color)
   background-color= !color
-  +fancy-gradient(!gradient_top, !gradient_bottom)
+  @if !fb_gradient_style == "glossy"
+    @if !fb_invert_on_click != 0 and !state == "active"
+      +invert-fancy-gradient(!gradient_top, !gradient_bottom)
+    @else
+      +fancy-gradient(!gradient_top, !gradient_bottom)
+  @else if !fb_gradient_style == "matte"
+    @if !fb_invert_on_click and !state == "active"
+      +invert-fancy-matte-gradient(!gradient_top, !gradient_bottom)
+    @else
+      +fancy-matte-gradient(!gradient_top, !gradient_bottom)
+  @else if !fb_gradient_style == "custom"
+    @if !fb_invert_on_click and !state == "active"
+      +invert-custom-fancy-gradient(!gradient_top, !gradient_bottom)
+    @else
+      +custom-fancy-gradient(!gradient_top, !gradient_bottom)
   border:
     color= !border
+  !text_shadow_settings = "0px 1px 1px"
+  @if !fb_invert_on_click != 0 and !state == "active"
+    !text_shadow_settings = "0px -1px -1px"
   @if luminosity(!lumins) < luminosity(#aaa)
-    text-shadow= darken(!color, 25) "1px 1px 1px"
-    color= !default_button_light_text
+    text-shadow= darken(!color, 25) !text_shadow_settings
+    color= !fb_light_text
   @else
-    text-shadow= lighten(!color, 15) "1px 1px 1px"
-    color= !default_button_dark_text
+    text-shadow= lighten(!color, 15) !text_shadow_settings
+    color= !fb_dark_text
 
-=fb-text-color(!text, !bg, !force_color = 0)
-  @if !override
-    color= !override
-    text-shadow= darken(!bg, 10) "1px 1px 1px"
-  @else
-    color= !color
-    text-shadow= darken(!bg, 10) "1px 1px 1px"
-
 // Apply this mixin to a nested element to style an arrow
 =fancy-arrow(!font_size)
   font-size= !font_size + 4px
   line-height= !font_size - 4px
   margin-left= 4px
 
 // Layout the button's box
-=fancy-button-structure(!font_size = !default_button_font_size, !radius = !default_button_radius, !border_width = !default_button_border_width, !line_height = !font_size * 1.2)
+=fancy-button-structure(!font_size = !fb_font_size, !radius = !fb_radius, !border_width = !fb_border_width, !line_height = !font_size * 1.2)
   +fb-reset
   +fancy-button-size(!font_size, !radius, !border_width, !line_height)
 
-=fancy-button-size(!font_size = !default_button_font_size, !radius = !default_button_radius, !border_width = !default_button_border_width, !line_height = !font_size * 1.2)
+=fancy-button-size(!font_size = !fb_font_size, !radius = !fb_radius, !border_width = !fb_border_width, !line_height = !font_size * 1.2)
   // better padding for smaller buttons
   !v_padding = 0
   !h_padding = 0
@@ -80,13 +113,16 @@
     !v_padding = floor(!font_size/5)
     !h_padding = floor(!font_size/1.2)
 
-  !v_padding_active = !v_padding - 1px
-  !h_padding_active = !h_padding - 1px
   @if !radius > 0
     +border-radius(!radius)
-  padding= !v_padding !h_padding
   font-size= !font_size
   line-height= !line_height
+  +fancy-button-padding(!v_padding, !h_padding, !border_width)
+
+=fancy-button-padding(!v_padding, !h_padding, !border_width = !fb_border_width)
+  !v_padding_active = !v_padding - 1px
+  !h_padding_active = !h_padding - 1px
+  padding= !v_padding !h_padding
   border-width= !border_width
   &:active
     padding= !v_padding_active !h_padding_active
@@ -96,7 +132,7 @@
     border-width= !border_width
 
 // Reset the button's important properties to make sure they behave correctly
-=fb-reset(!font_weight = !default_button_font_weight)
+=fb-reset(!font_weight = !fb_font_weight)
   font-family: "Lucida Grande", Lucida, Arial, sans_serif
   background: #{image_url("button_bg.png")} repeat-x bottom left
   margin: 0