fancy-buttons 0.5.4 → 0.5.5

data/fancy-buttons.gemspec

@@ -5,11 +5,11 @@
 
 Gem::Specification.new do |s|
   s.name = %q{fancy-buttons}
-  s.version = "0.5.4"
+  s.version = "0.5.5"
 
   s.required_rubygems_version = Gem::Requirement.new(">= 0") if s.respond_to? :required_rubygems_version=
   s.authors = ["Brandon Mathis"]
-  s.date = %q{2010-05-23}
+  s.date = %q{2010-07-29}
   s.description = %q{Easily style buttons with beautiful CSS3 features like gradients, rounded corners, etc. Don't worry the buttons also degrade nicely for browsers with no support. This requires the Compass stylesheet authoring framework.}
   s.email = %q{brandon@imathis.com}
   s.extra_rdoc_files = [
@@ -24,22 +24,20 @@ Gem::Specification.new do |s|
      "lib/stylesheets/_fancy-gradient.sass",
      "lib/stylesheets/_fancy_buttons.sass",
      "lib/templates/project/button_bg.png",
-     "lib/templates/project/buttons.sass",
      "lib/templates/project/ie6.sass",
-     "lib/templates/project/index.html",
      "lib/templates/project/manifest.rb"
   ]
   s.homepage = %q{http://github.com/imathis/fancy-buttons}
   s.rdoc_options = ["--charset=UTF-8"]
   s.require_paths = ["lib"]
-  s.rubygems_version = %q{1.3.6}
+  s.rubygems_version = %q{1.3.7}
   s.summary = %q{Make fancy buttons with the Compass stylesheet authoring framework.}
 
   if s.respond_to? :specification_version then
     current_version = Gem::Specification::CURRENT_SPECIFICATION_VERSION
     s.specification_version = 3
 
-    if Gem::Version.new(Gem::RubyGemsVersion) >= Gem::Version.new('1.2.0') then
+    if Gem::Version.new(Gem::VERSION) >= Gem::Version.new('1.2.0') then
       s.add_runtime_dependency(%q<haml>, [">= 3.0.2"])
       s.add_runtime_dependency(%q<compass>, [">= 0.10.0"])
     else

data/lib/stylesheets/_fancy-buttons.sass

@@ -12,6 +12,7 @@ $fb_light_text: white !default
 $fb_dark_text: #222222 !default
 $fb_gradient: 1 !default
 $fb_image_path: image_url("button_bg.png") !default
+$fb_allow_disabled: true !default
 
 // Make a fancy button.
 =fancy-button($color: $fb_color, $font_size: $fb_font_size, $radius: $fb_radius, $border_width: $fb_border_width)
@@ -19,10 +20,11 @@ $fb_image_path: image_url("button_bg.png") !default
   +fancy-button-colors($color)
 
 // Style the button's colors, picking the most appropriate color set for the base color.
-=fancy-button-colors($color: $fb_color, $hover: 0, $active: 0)
+=fancy-button-colors($color: $fb_color, $hover: 0, $active: 0, $allow_disabled: $fb_allow_disabled)
   +fb-color($color, "default")
-  &.disabled:active, &.disabled:hover, &[disabled]:active, &[disabled]:hover
-    +fb-color($color, "default")
+  @if $allow_disabled
+    &.disabled:active, &.disabled:hover, &[disabled]:active, &[disabled]:hover
+      +fb-color($color, "default")
   &:hover, &:focus
     @if $hover == 0
       +fb-color(darken($color, 3), "hover", $color)
@@ -100,14 +102,20 @@ $fb_image_path: image_url("button_bg.png") !default
     &, &:visited
       color: $fb_dark_text
 
-=fancy-button-text-colors($color, $hover, $active)
+=fancy-button-text-colors($color, $hover, $active, $allow-disabled : $fb-allow-disabled)
   color: $color
-  &:hover, &:focus
-    color: $hover
-  &:active
-    color: $active
-  &.disabled:active, &.disabled:hover, &[disabled]:active, &[disabled]:hover
-    color: $color
+  @if $hover != $color
+    &:hover, &:focus
+      color: $hover
+  @if $active != $color
+    &:active
+      color: $active
+  @if $allow-disabled and $active != $color
+    &.disabled:active, &[disabled]:active
+      color: $color
+  @if $allow-disabled and $hover != $color
+    &.disabled:hover, &[disabled]:hover
+      color: $color
 
 // Apply this mixin to a nested element to style an arrow
 =fancy-arrow($font_size)
@@ -116,11 +124,11 @@ $fb_image_path: image_url("button_bg.png") !default
   margin-left: 4px
 
 // Layout the button's box
-=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-structure($font_size: $fb_font_size, $radius: $fb_radius, $border_width: $fb_border_width, $line_height: $font_size * 1.2, $allow_disabled: $fb_allow_disabled)
+  +fb-reset($fb_font_weight, $allow_disabled)
+  +fancy-button-size($font_size, $radius, $border_width, $line_height, $allow_disabled)
 
-=fancy-button-size($font_size: $fb_font_size, $radius: $fb_radius, $border_width: $fb_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, $allow_disabled: $fb_allow_disabled)
   // better padding for smaller buttons
   $v_padding: 0
   $h_padding: 0
@@ -134,9 +142,9 @@ $fb_image_path: image_url("button_bg.png") !default
     +border-radius($radius)
   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, $allow_disabled)
 
-=fancy-button-padding($v_padding, $h_padding, $border_width: $fb_border_width)
+=fancy-button-padding($v_padding, $h_padding, $border_width: $fb_border_width, $allow_disabled: $fb_allow_disabled)
   $v_padding_active: $v_padding - 1px
   $h_padding_active: $h_padding - 1px
   padding: $v_padding $h_padding
@@ -144,12 +152,13 @@ $fb_image_path: image_url("button_bg.png") !default
   &:active
     padding: $v_padding_active $h_padding_active
     border-width: $border_width + 1px
-  &.disabled:active, &[disabled]
-    padding: $v_padding $h_padding
-    border-width: $border_width
+  @if $allow_disabled
+    &.disabled:active, &[disabled]
+      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: $fb_font_weight)
+=fb-reset($font_weight: $fb_font_weight, $allow_disabled: $fb_allow_disabled)
   font-family: "Lucida Grande", Lucida, Arial, sans_serif
   background: #{$fb_image_path} repeat-x bottom left
   margin: 0
@@ -165,8 +174,9 @@ $fb_image_path: image_url("button_bg.png") !default
     padding: 0
   &:focus
     outline: none
-  &.disabled, &[disabled]
-    +disable-button
+  @if $fb_allow_disabled
+    &.disabled, &[disabled]
+      +disable-button
 
 =disable-button($opacity: 0.7)
   +opacity($opacity)

data/lib/templates/project/manifest.rb

@@ -2,10 +2,12 @@
 stylesheet 'ie6.sass', :media => 'screen, projection', :condition => "lt IE 7"
 image 'button_bg.png'
 
+#print "Check out http://brandonmathis.com/projects/fancy-buttons/guide/ to get a guide on how to use fancy-buttons"
+
 #print "Install example files? (html and buttons.sass) (Y/n)?" 
 #response = gets
 #if response.downcase == "y" || response.downcase == "\n"
-file 'index.html'
-stylesheet 'buttons.sass', :media => 'screen, projection'
+#file 'index.html'
+#stylesheet 'buttons.sass', :media => 'screen, projection'
 #end
 #print 'Don\'t forget to @import "fancy-buttons"'

metadata

@@ -1,12 +1,13 @@
 --- !ruby/object:Gem::Specification 
 name: fancy-buttons
 version: !ruby/object:Gem::Version 
+  hash: 1
   prerelease: false
   segments: 
   - 0
   - 5
-  - 4
-  version: 0.5.4
+  - 5
+  version: 0.5.5
 platform: ruby
 authors: 
 - Brandon Mathis
@@ -14,16 +15,18 @@ autorequire:
 bindir: bin
 cert_chain: []
 
-date: 2010-05-23 00:00:00 -05:00
+date: 2010-07-29 00:00:00 -05:00
 default_executable: 
 dependencies: 
 - !ruby/object:Gem::Dependency 
   name: haml
   prerelease: false
   requirement: &id001 !ruby/object:Gem::Requirement 
+    none: false
     requirements: 
     - - ">="
       - !ruby/object:Gem::Version 
+        hash: 3
         segments: 
         - 3
         - 0
@@ -35,9 +38,11 @@ dependencies:
   name: compass
   prerelease: false
   requirement: &id002 !ruby/object:Gem::Requirement 
+    none: false
     requirements: 
     - - ">="
       - !ruby/object:Gem::Version 
+        hash: 55
         segments: 
         - 0
         - 10
@@ -62,9 +67,7 @@ files:
 - lib/stylesheets/_fancy-gradient.sass
 - lib/stylesheets/_fancy_buttons.sass
 - lib/templates/project/button_bg.png
-- lib/templates/project/buttons.sass
 - lib/templates/project/ie6.sass
-- lib/templates/project/index.html
 - lib/templates/project/manifest.rb
 has_rdoc: true
 homepage: http://github.com/imathis/fancy-buttons
@@ -76,23 +79,27 @@ rdoc_options:
 require_paths: 
 - lib
 required_ruby_version: !ruby/object:Gem::Requirement 
+  none: false
   requirements: 
   - - ">="
     - !ruby/object:Gem::Version 
+      hash: 3
       segments: 
       - 0
       version: "0"
 required_rubygems_version: !ruby/object:Gem::Requirement 
+  none: false
   requirements: 
   - - ">="
     - !ruby/object:Gem::Version 
+      hash: 3
       segments: 
       - 0
       version: "0"
 requirements: []
 
 rubyforge_project: 
-rubygems_version: 1.3.6
+rubygems_version: 1.3.7
 signing_key: 
 specification_version: 3
 summary: Make fancy buttons with the Compass stylesheet authoring framework.

data/lib/templates/project/buttons.sass

@@ -1,57 +0,0 @@
-@import fancy-buttons
-
-body
-  text-align: center
-  padding-top: 10px
-h1, h2, h3
-  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif
-  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(color_stops($color1, darken($color2, 5) 30px), "50% 10%")
-=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-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)
-  &.red
-    +fancy-button-colors($red)
-  &.yellow
-    +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)

data/lib/templates/project/index.html

@@ -1,39 +0,0 @@
-<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-<html lang="en" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
-  <head>
-    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
-    <title>Fancy Buttons - Demo</title>
-    <link href="./stylesheets/buttons.css" media="screen, projection" rel="stylesheet" type="text/css" />
-    <!--[if lte IE 6]>
-      <link href='./stylesheets/ie6.css' rel='stylesheet' type='text/css' />
-    <![endif]-->
-  </head>
-  <body>
-    <h1>Fancy Buttons</h1>
-    <div>
-      <button class="green">Click Me</button>
-      <a href="#" class="button blue">Click Me</a>
-      <button class="red">Click Me</button>
-    </div>
-    <div>
-      <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>Disabled Buttons</h2>
-    <div>
-      <button class="green" disabled>Click Me</button>
-      <button class="red" disabled>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>