Permalink
Browse files

Improved 'shiny' button style. Uses RGB instead of HSL color notation.

  • Loading branch information...
1 parent f17b303 commit d10e01afb938a87314f42a90e09250edc98eb13d Chad Mazzola committed Aug 24, 2011
Showing with 24 additions and 29 deletions.
  1. +24 −29 app/assets/stylesheets/addons/_button.scss
@@ -61,52 +61,47 @@
}
@mixin shiny($base-color) {
- $second-stop: adjust-color($base-color, $saturation: 0%, $lightness: -15%);
- $third-stop: adjust-color($base-color, $saturation: 5%, $lightness: -22%);
- $fourth-stop: adjust-color($base-color, $saturation: 0%, $lightness: -19%);
- $border-top: adjust-color($base-color, $saturation: 0%, $lightness: -23%);
- $border-sides: adjust-color($base-color, $saturation: 0%, $lightness: -29%);
- $border-bottom: adjust-color($base-color, $saturation: 0%, $lightness: -35%);
+ $second-stop: adjust-color($base-color, $red: -56, $green: -50, $blue: -33);
+ $third-stop: adjust-color($base-color, $red: -86, $green: -75, $blue: -48);
+ $fourth-stop: adjust-color($base-color, $red: -79, $green: -70, $blue: -46);
+ $border: adjust-color($base-color, $red: -117, $green: -111, $blue: -81);
+ $border-bottom: adjust-color($base-color, $red: -126, $green: -127, $blue: -122);
$color: hsl(0, 0, 100%);
- $inset-shadow: adjust-color($base-color, $hue: -5, $saturation: 23%, $lightness:-8%);
- $text-shadow: adjust-color($base-color, $saturation: 6%, $lightness: -21%);
+ $inset-shadow: adjust-color($base-color, $red: 37, $green: 29, $blue: 12);
+ $text-shadow: adjust-color($base-color, $red: -140, $green: -141, $blue: -114);
@if lightness($base-color) > 70% {
$color: hsl(0, 0, 20%);
$text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%);
}
- @include linear-gradient (top, $base-color 0%, $second-stop 50%, $third-stop 50%, $fourth-stop 100%);
- border: 1px solid $border-top;
- border-color: $border-top $border-sides $border-bottom;
- @include border-radius (4px);
- @include box-shadow(inset 0 0 2px 0 $inset-shadow);
+ @include linear-gradient(top, $base-color 0%, $second-stop 50%, $third-stop 50%, $fourth-stop 100%);
+ border: 1px solid $border;
+ border-bottom: 1px solid $border-bottom;
+ @include border-radius(5px);
+ @include box-shadow(inset 0 1px 0 0 $inset-shadow);
color: $color;
display: inline;
- font: bold 12px "helvetica neue", helvetica, arial, sans-serif;
- padding: 7px 18px;
+ font: bold 14px "helvetica neue", helvetica, arial, sans-serif;
+ padding: 7px 20px 8px;
+ text-decoration: none;
+ text-align: center;
text-shadow: 0 -1px 1px $text-shadow;
- -webkit-background-clip: padding-box;
&:hover {
- $first-stop-hover: adjust-color($base-color, $saturation: 2%, $lightness: -5%);
- $second-stop-hover: adjust-color($base-color, $saturation: 2%, $lightness: -18%);
- $third-stop-hover: adjust-color($base-color, $saturation: 23%, $lightness: -26%);
- $fourth-stop-hover: adjust-color($base-color, $saturation: 16%, $lightness: -23%);
+ $first-stop-hover: adjust-color($base-color, $red: -13, $green: -15, $blue: -18);
+ $second-stop-hover: adjust-color($base-color, $red: -66, $green: -62, $blue: -51);
+ $third-stop-hover: adjust-color($base-color, $red: -93, $green: -85, $blue: -66);
+ $fourth-stop-hover: adjust-color($base-color, $red: -86, $green: -80, $blue: -63);
- @include linear-gradient (top, $first-stop-hover 0%, $second-stop-hover 50%, $third-stop-hover 50%, $fourth-stop-hover 100%);
+ @include linear-gradient(top, $first-stop-hover 0%, $second-stop-hover 50%, $third-stop-hover 50%, $fourth-stop-hover 100%);
cursor: pointer;
}
&:active {
- $border-top-active: adjust-color($base-color, $saturation: 1%, $lightness: -19%);
- $border-sides-active: adjust-color($base-color, $saturation: 1%, $lightness: -34%);
- $border-bottom-active: adjust-color($base-color, $saturation: 1%, $lightness: -40%);
- $inset-shadow-active: adjust-color($base-color, $saturation: -1%, $lightness: -33%);
-
- border: 1px solid $border-top-active;
- border-color: $border-top-active $border-sides-active $border-bottom-active;
- @include box-shadow(inset 0 0 5px 2px $inset-shadow-active, 0 1px 0 #eee);
+ $inset-shadow-active: adjust-color($base-color, $red: -111, $green: -116, $blue: -122);
+
+ @include box-shadow(inset 0 0 20px 0 $inset-shadow-active, 0 1px 0 #fff);
}
}

0 comments on commit d10e01a

Please sign in to comment.