Permalink
Browse files

changed gradient mixin naming pattern, fixed inset box shadow for but…

…tons with a different active color, removed unuseful options
  • Loading branch information...
1 parent 53decd7 commit 2bf719edc058ac0c44221dacf673f4b32a1d43ff @imathis committed Oct 30, 2010
Showing with 21 additions and 15 deletions.
  1. +8 −1 CHANGELOG.markdown
  2. +10 −11 lib/stylesheets/_fancy-buttons.sass
  3. +3 −3 lib/stylesheets/_fancy-gradient.sass
View
9 CHANGELOG.markdown
@@ -1,12 +1,19 @@
# Fancy Buttons Changelog
+## 1.0.4
+
+- Changed: The naming pattern for gradient mixins which style the :active state has changed from *invert*-fancy-gradient to fancy-gradient-*active*.
+- Fixed: If button has a different color for the :active state, the inset shadow is based on that color.
+- Removed: $fb-inset option. Buttons look better with it always true.
+- Removed: $fb-invert-on-click option. There is no reason not to invert the button.
+
## 1.0.3
- Improved inset box shadow for a nice depressed look on :active states.
## 1.0.2
-- Added inset box shadow for improved button beauty! (if you don't like it, you can set $fb-inset: false)
+- Added inset box shadow for improved button beauty! <s>(if you don't like it, you can set $fb-inset: false)</s>
- Added background-clip to help with bleeding backgrounds under rounded corners in webkit
## 1.0.1
View
21 lib/stylesheets/_fancy-buttons.sass
@@ -19,7 +19,6 @@ $fb-gradient: 1 !default
$fb-image-path: image-url("button_bg.png") !default
$fb-allow-disabled: false !default
$fb-line-height: 1.2em !default
-$fb-inset: true !default
// Make a fancy button.
=fancy-button($color: $fb-color, $font-size: $fb-font-size, $radius: $fb-radius, $border-width: $fb-border-width)
@@ -37,15 +36,15 @@ $fb-inset: true !default
&:active
@if $active == 0
+fb-color(darken($color, 6), "active", $color)
+ +box-shadow(darken($color, 15), 0, .08em, .1em, 1px, inset)
@else
+fb-color($active, "active")
- @if $fb-inset
- +box-shadow(darken($color, 15), 0, .08em, .1em, 1px, inset)
+ +box-shadow(darken($active, 9), 0, .08em, .1em, 1px, inset)
+
@if $allow-disabled
&.disabled, &[disabled]
+disable-fancy-button($color)
- @if $fb-inset
- +box-shadow(rgba(255,255,255, (lightness($color))/100), 0, 0, .1em, 1px, inset)
+ +box-shadow(rgba(255,255,255, (lightness($color))/100), 0, 0, .1em, 1px, inset)
+background-clip(padding-box)
=fancy-button-allow-disable($color: $fb-color, $font-size: $fb-font-size, $radius: $fb-radius, $border-width: $fb-border-width)
@@ -93,18 +92,18 @@ $fb-inset: true !default
background-color: $color
@if $fb-gradient != 0
@if $fb-gradient-style == "glossy"
- @if $fb-invert-on-click != 0 and $state == "active"
- +invert-fancy-gradient($gradient-top, $gradient-bottom)
+ @if $state == "active"
+ +fancy-gradient-active($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)
+ @if $state == "active"
+ +fancy-matte-gradient-active($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)
+ @if $state == "active"
+ +custom-fancy-gradient-active($gradient-top, $gradient-bottom)
@else
+custom-fancy-gradient($gradient-top, $gradient-bottom)
border:
View
6 lib/stylesheets/_fancy-gradient.sass
@@ -6,7 +6,7 @@
$bottom_middle: $color2
+linear-gradient(color_stops($top_shine, $top_middle 10%, $middle 50%, $bottom_middle 50%, $bottom_glow))
-=invert-fancy-gradient($color1, $color2)
+=fancy-gradient-active($color1, $color2)
$top: lighten($color2, 6)
$bottom: lighten($color2, 14)
$top_middle: lighten($color2, 8)
@@ -17,12 +17,12 @@
=fancy-matte-gradient($color1, $color2)
+linear-gradient(color_stops($color1, $color2))
-=invert-fancy-matte-gradient($color1, $color2)
+=fancy-matte-gradient-active($color1, $color2)
$top: lighten($color2, 5)
$bottom: lighten($color2, 15)
$middle: lighten($color2, 8)
+linear-gradient(color_stops($top, $middle 40%, $middle 85%, $bottom))
/* incase an inverted custom gradient isn't specified
-=invert-custom-fancy-gradient($color1, $color2)
+=custom-fancy-gradient-active($color1, $color2)
+custom-fancy-gradient($color1, $color2)

0 comments on commit 2bf719e

Please sign in to comment.