fancy-buttons 0.3.3 → 0.3.5

data/Rakefile

@@ -7,8 +7,8 @@ begin
     gemspec.email = "brandon@imathis.com"
     gemspec.homepage = "http://github.com/imathis/fancy-buttons"
     gemspec.author = "Brandon Mathis"
-    gemspec.add_dependency('haml', '>= 2.2')
-    gemspec.add_dependency('compass', '>= 0.8')
+    gemspec.add_dependency('haml', '>= 2.2.14')
+    gemspec.add_dependency('compass', '>= 0.10.0.pre2')
     gemspec.add_dependency('compass-colors', '>= 0.3.1')
     gemspec.files = []
     gemspec.files << "fancy-buttons.gemspec"

data/fancy-buttons.gemspec

@@ -5,11 +5,11 @@
 
 Gem::Specification.new do |s|
   s.name = %q{fancy-buttons}
-  s.version = "0.3.3"
+  s.version = "0.3.5"
 
   s.required_rubygems_version = Gem::Requirement.new(">= 0") if s.respond_to? :required_rubygems_version=
   s.authors = ["Brandon Mathis"]
-  s.date = %q{2009-11-23}
+  s.date = %q{2009-12-09}
   s.description = %q{Make fancy buttons with the Compass stylesheet authoring framework.}
   s.email = %q{brandon@imathis.com}
   s.extra_rdoc_files = [
@@ -20,7 +20,6 @@ Gem::Specification.new do |s|
      "Rakefile",
      "fancy-buttons.gemspec",
      "lib/fancy-buttons.rb",
-     "lib/sass/_border_radius.sass",
      "lib/sass/_fancy_buttons.sass",
      "lib/sass/_fancy_gradient.sass",
      "lib/templates/project/button_bg.png",
@@ -39,17 +38,17 @@ Gem::Specification.new do |s|
     s.specification_version = 3
 
     if Gem::Version.new(Gem::RubyGemsVersion) >= Gem::Version.new('1.2.0') then
-      s.add_runtime_dependency(%q<haml>, [">= 2.2"])
-      s.add_runtime_dependency(%q<compass>, [">= 0.8"])
+      s.add_runtime_dependency(%q<haml>, [">= 2.2.14"])
+      s.add_runtime_dependency(%q<compass>, [">= 0.10.0.pre2"])
       s.add_runtime_dependency(%q<compass-colors>, [">= 0.3.1"])
     else
-      s.add_dependency(%q<haml>, [">= 2.2"])
-      s.add_dependency(%q<compass>, [">= 0.8"])
+      s.add_dependency(%q<haml>, [">= 2.2.14"])
+      s.add_dependency(%q<compass>, [">= 0.10.0.pre2"])
       s.add_dependency(%q<compass-colors>, [">= 0.3.1"])
     end
   else
-    s.add_dependency(%q<haml>, [">= 2.2"])
-    s.add_dependency(%q<compass>, [">= 0.8"])
+    s.add_dependency(%q<haml>, [">= 2.2.14"])
+    s.add_dependency(%q<compass>, [">= 0.10.0.pre2"])
     s.add_dependency(%q<compass-colors>, [">= 0.3.1"])
   end
 end

data/lib/sass/_fancy_buttons.sass

@@ -1,52 +1,95 @@
-@import border_radius.sass
+@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
+!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)
-  @if !hover == 0
-    !hover = darken(!color, 3)
-  @if !active == 0
-    !active = darken(!color, 6)
-  
-  +fb-color(!color)
+=fancy-button-colors(!color = !fb_color, !hover = 0, !active = 0)
+  +fb-color(!color, "default")
   &:hover, &:focus
-    +fb-color(!hover)
+    @if !hover == 0
+      +fb-color(darken(!color, 3), "hover", !color)
+    @else
+      +fb-color(!hover, "hover")
   &:active
-    +fb-color(!active)
+    @if !active == 0
+      +fb-color(darken(!color, 6), "active", !color)
+    @else
+      +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)
+=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)
+  +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)
-  !text_shadow = darken(!color, 25)
-  color: #fff
+=fb-state-colors(!color, !gradient_top, !gradient_bottom, !border, !state, !lumins = !color)
   background-color= !color
-  +fancy-gradient(!gradient_top, !gradient_bottom)
-  @if luminosity(!color) < luminosity(#aaa)
-    text-shadow= !text_shadow "1px 1px 1px"
-  @else
-    text-shadow= lighten(!color, 10) "1px 1px 1px"
-    color: #333
+  @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) !text_shadow_settings
+    color= !fb_light_text
+  @else
+    text-shadow= lighten(!color, 15) !text_shadow_settings
+    color= !fb_dark_text
 
 // Apply this mixin to a nested element to style an arrow
 =fancy-arrow(!font_size)
@@ -55,17 +98,11 @@
   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, !line_height)
-  border-width= !border_width
-  &:active
-    border-width= !border_width + 1px
-  &.disabled:active
-    border-width= !border_width
-
-=fancy-button-size(!font_size = !default_button_font_size, !radius = !default_button_radius, !line_height = !font_size * 1.2)
+  +fancy-button-size(!font_size, !radius, !border_width, !line_height)
 
+=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
@@ -76,23 +113,31 @@
     !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
+    border-width= !border_width + 1px
   &.disabled:active
     padding= !v_padding !h_padding
+    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
+  width: auto
+  overflow: visible
   display: inline-block
   cursor: pointer
   text-decoration: none
@@ -107,4 +152,4 @@
 =disable-button(!opacity = .7)
   +opacity(!opacity)
   &:hover
-    cursor: default
+    cursor: default

data/lib/sass/_fancy_gradient.sass

@@ -1,21 +1,28 @@
-=fancy-linear-gradient(!from_coord, !to_coord, !color_start, !color_end, !color_stop_1 = 0, !color_stop_1_pos = .3, !color_stop_2 = 0, !color_stop_2_pos = .6, !color_stop_3 = 0, !color_stop_3_pos = .9)
-  !gradient = "#{!from_coord}, #{!to_coord}, from(#{!color_start}), to(#{!color_end})"
-  @if !color_stop_1 != 0
-    !gradient = "#{!from_coord}, #{!to_coord}, from(#{!color_start}), to(#{!color_end}), color-stop(#{!color_stop_1_pos}, #{!color_stop_1})"
-  @if !color_stop_2 != 0
-    !gradient = "#{!from_coord}, #{!to_coord}, from(#{!color_start}), to(#{!color_end}), color-stop(#{!color_stop_1_pos}, #{!color_stop_1}), color-stop(#{!color_stop_2_pos}, #{!color_stop_2})"
-  @if !color_stop_3 != 0
-    !gradient = "#{!from_coord}, #{!to_coord}, from(#{!color_start}), to(#{!color_end}), color-stop(#{!color_stop_1_pos}, #{!color_stop_1}), color-stop(#{!color_stop_2_pos}, #{!color_stop_2}), color-stop(#{!color_stop_3_pos}, #{!color_stop_3})"
-  background= "-webkit-gradient(linear, #{!gradient})"
-  background= "-moz-linear-gradient(#{!gradient})"
-
 =fancy-gradient(!color1, !color2)
   !top_shine = lighten(!color1, 18)
+  !bottom_glow = lighten(!color2, 10)
   !top_middle = !color1
   !middle = lighten(!color2, 3)
   !bottom_middle = !color2
-  !bottom_glow = lighten(!color2, 10)
-  !stop_pos_1 = .1
-  !stop_pos_2 = .5
-  !stop_pos_3 = .5
-  +fancy-linear-gradient("left top", "left bottom", !top_shine, !bottom_glow, !top_middle, !stop_pos_1, !middle, !stop_pos_2, !bottom_middle, !stop_pos_3)
+  +v-gradient(!top_shine, !bottom_glow, color_stop(10%, !top_middle, 50%, !middle, 50%, !bottom_middle))
+
+=invert-fancy-gradient(!color1, !color2)
+  !top = lighten(!color2, 6)
+  !bottom = lighten(!color2, 14)
+  !top_middle = lighten(!color2, 8)
+  !middle = lighten(!color2, 4)
+  !bottom_middle = lighten(!color2, 1)
+  +v-gradient(!top, !bottom, color_stop(30%, !top_middle, 50%, !middle, 50%, !bottom_middle))
+
+=fancy-matte-gradient(!color1, !color2)
+  +v-gradient(!color1, !color2)
+
+=invert-fancy-matte-gradient(!color1, !color2)
+  !top = lighten(!color2, 5)
+  !bottom = lighten(!color2, 15)
+  !middle = lighten(!color2, 8)
+  +v-gradient(!top, !bottom, color_stop(85%, !middle, 40%, !middle))
+
+/* incase an inverted custom gradient isn't specified */
+=invert-custom-fancy-gradient(!color1, !color2)
+  +custom-fancy-gradient(!color1, !color2)

data/lib/templates/project/buttons.sass

@@ -3,31 +3,55 @@
 body
   text-align: center
   padding-top: 10px
-h1
+h1, h2, h3
   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif
-  font-size: 50px
   color: #333
   letter-spacing: -1px
+h1
+  font-size: 50px
+h2
+  font-size: 30px
 div
   margin-top: 15px
 
 !green = darken(#57b42c, 8)
 !blue = adjust_hue(!green, 110)
 !red = adjust_hue(!green, -100)
+!heart_button = saturate(lighten(!red, 2), 20)
 
+=custom-fancy-gradient(!color1, !color2)
+  +radial-gradient("50% 10%, 10, 50% 10%, 30", !color1, darken(!color2, 5))
+=invert-custom-fancy-gradient(!color1, !color2)
+  +custom-fancy-gradient(lighten(!color2, 10), lighten(!color2, 25))
+  
 a.button, button  
   +fancy-button-structure
   +fancy-button-colors
   margin: 0 2px
   vertical-align: middle
   &.light
-    +fancy-button-colors(#bbb)
+    +fancy-button-colors-matte(#ddd)
+  &.matte-blue
+    +fancy-button-colors-matte(!blue)
   &.green
     +fancy-button-colors(!green)
   &.blue
+    +fancy-button-size(32px, 32px, 3px)
     +fancy-button-colors(!blue)
-    +fancy-button-size(32px, 32px)
   &.red
     +fancy-button-colors(!red)
   &.yellow
-    +fancy-button-colors(darken(desaturate(yellow, 35), 5))
+    +fancy-button-colors(darken(desaturate(yellow, 35), 5))
+  &.custom
+    +fancy-button-size(30px, 10px)
+    +fancy-button-padding(2px, 12px, 2px)
+  &.heart
+    +fancy-button-colors-custom(!heart_button)
+  &.arrow
+    +fancy-button-size(30px, 30px)
+    +fancy-button-colors-custom(#ddd)
+    +fancy-button-padding(2px, 6px, 2px)
+  &.spade
+    +fancy-button-colors-custom(!blue)
+    +fancy-button-padding(2px, 8px, 2px)
+    //color: #333 !important

data/lib/templates/project/index.html

@@ -7,7 +7,6 @@
   </head>
   <body>
     <h1>Fancy Buttons</h1>
-    <button class="light">Click Me</button>
     <div>
       <button class="green">Click Me</button>
       <a href="#" class="button blue">Click Me</a>
@@ -17,5 +16,16 @@
       <button>Click Me</button>
       <button class="yellow">Click Me</button>
     </div>
+    <h2>Matte Gradient</h2>
+    <div>
+      <button class="light">Click Me</button>
+      <button class="matte-blue">Click Me</button>
+    </div>
+    <h2>Custom Radial Gradient</h2>
+    <div>
+      <button class="custom heart">&hearts;</button>
+      <button class="custom arrow">&rarr;</button>
+      <button class="custom spade">&Omega;</button>
+    </div>
   </body>
 </html>

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification 
 name: fancy-buttons
 version: !ruby/object:Gem::Version 
-  version: 0.3.3
+  version: 0.3.5
 platform: ruby
 authors: 
 - Brandon Mathis
@@ -9,7 +9,7 @@ autorequire:
 bindir: bin
 cert_chain: []
 
-date: 2009-11-23 00:00:00 -06:00
+date: 2009-12-09 00:00:00 -06:00
 default_executable: 
 dependencies: 
 - !ruby/object:Gem::Dependency 
@@ -20,7 +20,7 @@ dependencies:
     requirements: 
     - - ">="
       - !ruby/object:Gem::Version 
-        version: "2.2"
+        version: 2.2.14
     version: 
 - !ruby/object:Gem::Dependency 
   name: compass
@@ -30,7 +30,7 @@ dependencies:
     requirements: 
     - - ">="
       - !ruby/object:Gem::Version 
-        version: "0.8"
+        version: 0.10.0.pre2
     version: 
 - !ruby/object:Gem::Dependency 
   name: compass-colors
@@ -55,7 +55,6 @@ files:
 - Rakefile
 - fancy-buttons.gemspec
 - lib/fancy-buttons.rb
-- lib/sass/_border_radius.sass
 - lib/sass/_fancy_buttons.sass
 - lib/sass/_fancy_gradient.sass
 - lib/templates/project/button_bg.png

data/lib/sass/_border_radius.sass

@@ -1,47 +0,0 @@
-!default_border_radius ||= 5px
-
-// Round all borders by amount
-=border-radius(!radius = !default_border_radius)
-  border-radius= !radius
-  -moz-border-radius= !radius
-  -webkit-border-radius= !radius
-
-// Round radius at position by amount.
-// values for !vert: "top", "bottom"
-// values for !horz: "left", "right
-=border-corner-radius(!vert, !horz, !radius = !default_border_radius)
-  border-#{!vert}-#{!horz}-radius= !radius
-  -moz-border-radius-#{!vert}#{!horz}= !radius
-  -webkit-border-#{!vert}-#{!horz}-radius= !radius
-  
-=border-top-left-radius(!radius = !default_border_radius)
-  +border-corner-radius("top", "left", !radius)
-
-=border-top-right-radius(!radius = !default_border_radius)
-  +border-corner-radius("top", "right", !radius)
-
-=border-bottom-left-radius(!radius = !default_border_radius)
-  +border-corner-radius("bottom", "left", !radius)
-
-=border-bottom-right-radius(!radius = !default_border_radius)
-  +border-corner-radius("bottom", "right", !radius)
-
-// Round top corners by amount
-=border-top-radius(!radius = !default_border_radius)
-  +border-top-left-radius(!radius)
-  +border-top-right-radius(!radius)
-
-// Round right corners by amount
-=border-right-radius(!radius = !default_border_radius)
-  +border-top-right-radius(!radius)
-  +border-bottom-right-radius(!radius)
-
-// Round bottom corners by amount
-=border-bottom-radius(!radius = !default_border_radius)
-  +border-bottom-left-radius(!radius)
-  +border-bottom-right-radius(!radius)
-
-// Round left corners by amount
-=border-left-radius(!radius = !default_border_radius)
-  +border-top-left-radius(!radius)
-  +border-bottom-left-radius(!radius)