Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Add the button add-on

  • Loading branch information...
commit 847aac6547a08a966e13ccf7e3b22788da6497ef 1 parent 88babbe
Chad Mazzola authored
View
2  _mixins.scss
@@ -10,4 +10,4 @@
@import "transition";
// Addons & other mixins
-@import "addons/simple-color";
+@import "addons/button";
View
108 addons/_button.scss
@@ -0,0 +1,108 @@
+@mixin button ($style: simple, $base-color: #4294f0) {
+ $pos-type: type-of($style);
+
+ @if $pos-type == color {
+ $base-color: $style;
+ $style: simple;
+ }
+
+ @if $style == simple {
+ @include simple($base-color);
+ }
+
+ @else if $style == shiny {
+ @include shiny($base-color);
+ }
+}
+
+@mixin simple ($base-color) {
+ $stop-gradient: adjust-color($base-color, $saturation: 9%, $lightness: -11%);
+ $border: adjust-color($base-color, $saturation: 9%, $lightness: -14%);
+ $color: hsl(0, 0, 100%);
+ $inset-shadow: adjust-color($base-color, $saturation: -8%, $lightness: 15%);
+ $text-shadow: adjust-color($base-color, $saturation: 15%, $lightness: -18%);
+
+ @if lightness($base-color) > 70% {
+ $color: hsl(0, 0, 20%);
+ $text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%);
+ }
+
+ border: 1px solid $border;
+ @include border-radius (3px);
+ @include box-shadow (inset 0 1px 0 0 $inset-shadow);
+ color: $color;
+ display: inline;
+ font: bold 11px 'lucida grande', helvetica neue, helvetica, arial, sans-serif;
+ @include linear-gradient ($base-color, $stop-gradient);
+ padding: 6px 18px 7px;
+ text-shadow: 0 1px 0 $text-shadow;
+ -webkit-background-clip: padding-box;
+
+ &:hover {
+ $base-color-hover: adjust-color($base-color, $saturation: -4%, $lightness: -5%);
+ $stop-gradient-hover: adjust-color($base-color, $saturation: 8%, $lightness: -14%);
+ $inset-shadow-hover: adjust-color($base-color, $saturation: -7%, $lightness: 5%);
+
+ @include box-shadow (inset 0 1px 0 0 $inset-shadow-hover);
+ cursor: pointer;
+ @include linear-gradient ($base-color-hover, $stop-gradient-hover);
+ }
+
+ &:active {
+ $border-active: adjust-color($base-color, $saturation: 9%, $lightness: -14%);
+ $inset-shadow-active: adjust-color($base-color, $saturation: 7%, $lightness: -17%);
+
+ border: 1px solid $border-active;
+ @include box-shadow (inset 0 0 8px 4px $inset-shadow-active, inset 0 0 8px 4px $inset-shadow-active, 0 1px 1px 0 #eee);
+ }
+}
+
+@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%);
+ $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%);
+
+ @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);
+ color: $color;
+ display: inline;
+ font: bold 12px "helvetica neue", helvetica, arial, sans-serif;
+ padding: 7px 18px;
+ 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%);
+
+ @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);
+ }
+}
View
42 addons/_simple-color.scss
@@ -1,42 +0,0 @@
-// Used for Buttons. See https://github.com/ubuwaits/css3-buttons
-@mixin simple-color ($base-hue, $base-saturation, $base-lightness) {
- $start-gradient: hsl($base-hue, $base-saturation, $base-lightness);
- $stop-gradient: saturate(darken(hsl($base-hue, $base-saturation, $base-lightness), 11%), 9%);
- $border: saturate(darken(hsl($base-hue, $base-saturation, $base-lightness), 14%), 9%);
- $inset-shadow: desaturate(lighten(hsl($base-hue, $base-saturation, $base-lightness), 14%), 8%);
- $text-shadow: saturate(darken(hsl($base-hue, $base-saturation, $base-lightness), 18%), 15%);
- $color: hsl(0, 0, 100%);
-
- @if $base-lightness > 70% {
- $color: hsl(0, 0, 20%);
- $text-shadow: saturate(lighten(hsl($base-hue, $base-saturation, $base-lightness), 4%), 10%);
- }
-
- @include linear-gradient ($start-gradient, $stop-gradient);
- border: 1px solid $border;
- @include border-radius (3px);
- @include box-shadow (inset 0 1px 0 0 $inset-shadow);
- color: $color;
- font-weight: bold;
- padding: 8px;
- text-shadow: 0 1px 0 $text-shadow;
- width: 150px;
-
- &:hover {
- $start-gradient: desaturate(darken(hsl($base-hue, $base-saturation, $base-lightness), 5%), 4%);
- $stop-gradient: saturate(darken(hsl($base-hue, $base-saturation, $base-lightness), 14%), 8%);
- $inset-shadow: desaturate(lighten(hsl($base-hue, $base-saturation, $base-lightness), 5%), 7%);
-
- @include linear-gradient ($start-gradient, $stop-gradient);
- @include box-shadow (inset 0 1px 0 0 $inset-shadow);
- cursor: pointer;
- }
-
- &:active {
- $border: saturate(darken(hsl($base-hue, $base-saturation, $base-lightness), 14%), 9%);
- $inset-shadow: saturate(darken(hsl($base-hue, $base-saturation, $base-lightness), 17%), 7%);
-
- @include box-shadow (inset 0 0 8px 4px $inset-shadow, inset 0 0 8px 4px $inset-shadow, 0 1px 1px 0 #eee);
- border: 1px solid $border;
- }
-}
View
25 readme.md
@@ -59,6 +59,31 @@ Shorthand mixin: Supports multiple parentheses-deliminated values for each varia
@include transition ($property:(opacity, width), $delay: (1.5s, 2.5s));`
+**Add-on: Buttons**
+
+The button add-on provides well-designed buttons with a single line in your CSS.
+
+The mixin can be called with no parameters to render a blue button with the "simple" style.
+
+ button,
+ input[type="button"] {
+ @include button();
+ }
+
+The mixin supports a style parameter. Right now the available styles are "simple" (default) and "shiny".
+
+ button,
+ input[type="button"] {
+ @include button(shiny);
+ }
+
+The real power of the mixin is revealed when you pass in the optional color argument. Using a single color, the mixin calculates the gradient, borders, box shadow, text shadow and text color of the button. The mixin will change the text to be light when on a dark background, and dark when on a light background.
+
+ button,
+ input[type="button"] {
+ @include button(shiny, #ff000);
+ }
+
##Help Out
Currently the project is a work in progress. Feel free to help out.
Please sign in to comment.
Something went wrong with that request. Please try again.