compass-recipes 0.2.0 → 0.2.1

data/stylesheets/recipes/ui/button/style/todo/_bourbon.scss

@@ -0,0 +1,169 @@
+@mixin button ($style: simple, $base-color: #4294f0) {
+
+    @if type-of($style) == color {
+        $base-color: $style;
+        $style: simple;
+    }
+
+    @if $style == simple {
+        @include simple($base-color);
+    }
+
+    @else if $style == shiny {
+        @include shiny($base-color);
+    }
+
+    @else if $style == pill {
+        @include pill($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, $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, $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;
+    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 14px "helvetica neue", helvetica, arial, sans-serif;
+    padding: 7px 20px 8px;
+    text-decoration: none;
+    text-align: center;
+    text-shadow: 0 -1px 1px $text-shadow;
+
+    &:hover {
+        $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%);
+        cursor: pointer;
+    }
+
+    &:active {
+        $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);
+    }
+}
+
+@mixin pill($base-color) {
+    $stop-gradient: adjust-color($base-color, $hue: 8, $saturation: 14%, $lightness: -10%);
+    $border-top: adjust-color($base-color, $hue: -1, $saturation: -30%, $lightness: -15%);
+    $border-sides: adjust-color($base-color, $hue: 4, $saturation: -21%, $lightness: -21%);
+    $border-bottom: adjust-color($base-color, $hue: 8, $saturation: -11%, $lightness: -26%);
+    $color: hsl(0, 0, 100%);
+    $inset-shadow: adjust-color($base-color, $hue: -1, $saturation: -1%, $lightness: 7%);
+    $text-shadow: adjust-color($base-color, $hue: 5, $saturation: -19%, $lightness: -15%);
+
+    @if lightness($base-color) > 70% {
+        $color: hsl(0, 0, 20%);
+        $text-shadow: adjust-color($base-color, $saturation: 10%, $lightness: 4%);
+    }
+
+    @include linear-gradient ($base-color, $stop-gradient);
+    border: 1px solid $border-top;
+    border-color: $border-top $border-sides $border-bottom;
+    @include border-radius(16px);
+    @include box-shadow(inset 0 1px 0 0 $inset-shadow, 0 1px 2px 0 #b3b3b3);
+    color: $color;
+    display: inline;
+    font-family: "lucida grande", sans-serif;
+    font-size: 11px;
+    font-weight: normal;
+    line-height: 1;
+    padding: 3px 16px 5px;
+    text-align: center;
+    text-shadow: 0 -1px 1px $text-shadow;
+    -webkit-background-clip: padding-box;
+
+    &:hover {
+        $base-color-hover: adjust-color($base-color, $lightness: -4.5%);
+        $stop-gradient-hover: adjust-color($base-color, $hue: 8, $saturation: -4%, $lightness: -15.5%);
+        $border-top: adjust-color($base-color, $hue: -1, $saturation: -17%, $lightness: -21%);
+        $border-sides: adjust-color($base-color, $hue: 4, $saturation: -2%, $lightness: -27%);
+        $border-bottom: adjust-color($base-color, $hue: 8, $saturation: 13.5%, $lightness: -32%);
+        $inset-shadow-hover: adjust-color($base-color, $saturation: -1%, $lightness: 3%);
+        $text-shadow-hover: adjust-color($base-color, $hue: 5, $saturation: -5%, $lightness: -22%);
+
+        @include linear-gradient ($base-color-hover, $stop-gradient-hover);
+        border: 1px solid $border-top;
+        border-color: $border-top $border-sides $border-bottom;
+        @include box-shadow(inset 0 1px 0 0 $inset-shadow-hover);
+        cursor: pointer;
+        text-shadow: 0 -1px 1px $text-shadow-hover;
+        -webkit-background-clip: padding-box;
+    }
+
+    &:active {
+        $active-color: adjust-color($base-color, $hue: 4, $saturation: -12%, $lightness: -10%);
+        $border-active: adjust-color($base-color, $hue: 6, $saturation: -2.5%, $lightness: -30%);
+        $border-bottom-active: adjust-color($base-color, $hue: 11, $saturation: 6%, $lightness: -31%);
+        $inset-shadow-active: adjust-color($base-color, $hue: 9, $saturation: 2%, $lightness: -21.5%);
+        $text-shadow-active: adjust-color($base-color, $hue: 5, $saturation: -12%, $lightness: -21.5%);
+
+        background: $active-color;
+        border: 1px solid $border-active;
+        border-bottom: 1px solid $border-bottom-active;
+        @include box-shadow(inset 0 0 6px 3px $inset-shadow-active, 0 1px 0 0 #fff);
+        text-shadow: 0 -1px 1px $text-shadow-active;
+    }
+}

data/stylesheets/recipes/ui/button/style/todo/_fancy.sass

@@ -0,0 +1,178 @@
+@import compass/css3/gradient
+@import compass/css3/border-radius
+@import compass/css3/opacity
+@import compass/css3/text-shadow
+@import compass/css3/box-shadow
+@import compass/css3/background-clip
+@import fancy-gradient
+
+$fb-gradient-style: glossy !default
+$fb-invert-on-click: 1 !default
+$fb-font-size: 18px !default
+$fb-color: #444444 !default
+$fb-font-weight: bold !default
+$fb-border-width: 1px !default
+$fb-radius: 6px !default
+$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: false !default
+$fb-line-height: 1.2em !default
+
+// Make a fancy button.
+=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: $fb-color, $hover: 0, $active: 0, $fb-allow-disabled: $fb-allow-disabled)
+  +fb-color($color, "default")
+  &:hover, &:focus
+    @if $hover == 0
+      +fb-color(darken($color, 3), "hover", $color)
+    @else
+      +fb-color($hover, "hover")
+  &:active
+    @if $active == 0
+      +fb-color(darken($color, 6), "active", $color)
+      +box-shadow(darken($color, 15) 0 .08em .2em 1px inset)
+    @else
+      +fb-color($active, "active")
+      +box-shadow(darken($active, 9) 0 .08em .1em 1px inset)
+
+  +box-shadow(rgba(#fff, (lightness($color))/100) 0 0 .1em 1px inset)
+  +background-clip(padding-box)
+  @if $fb-allow-disabled
+    &.disabled, &[disabled]
+      +disable-fancy-button($color)
+
+=fancy-button-allow-disable($color: $fb-color, $font-size: $fb-font-size, $radius: $fb-radius, $border-width: $fb-border-width)
+  $fb-disable-allowed: $fb-allow-disabled
+  $fb-allow-disabled: true
+  +fancy-button-structure($font-size, $radius, $border-width)
+  +fancy-button-colors-matte($color)
+  $fb-allow-disabled: $fb-disable-allowed
+
+=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, $state, $lumins: $color)
+  $gradient-top: lighten($color, 15)
+  $gradient-bottom: darken($color, 6)
+  $border-color: darken($color, 8)
+  @if $fb-invert-on-click != 0
+    $border-color: darken($color, 15)
+  @if saturation($color) > 0
+    $color: saturate($color, 40)
+  @else if lightness($lumins) >= lightness(#aaaaaa)
+    $color: lighten($color, 20)
+  +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, $state, $lumins: $color)
+  background-color: $color
+  @if $fb-gradient != 0
+    @if $fb-gradient-style == "glossy"
+      @if $state == "active"
+        +fancy-gradient-active($gradient-top, $gradient-bottom)
+      @else
+        +fancy-gradient($gradient-top, $gradient-bottom)
+    @else if $fb-gradient-style == "matte"
+      @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 $state == "active"
+        +custom-fancy-gradient-active($gradient-top, $gradient-bottom)
+      @else
+        +custom-fancy-gradient($gradient-top, $gradient-bottom)
+  border:
+    color: $border
+  $text-shadow-settings: unquote("0px 1px 1px")
+  @if $fb-invert-on-click != 0 and $state == "active"
+    $text-shadow-settings: unquote("0px -1px -1px")
+  @if lightness($lumins) < lightness(#aaaaaa)
+    text-shadow: darken($color, 25) $text-shadow-settings
+    &, &:visited
+      color: $fb-light-text
+  @else
+    text-shadow: lighten($color, 15) $text-shadow-settings
+    &, &:visited
+      color: $fb-dark-text
+
+=fancy-button-text-colors($color, $hover: $color, $active: $color, $fb-allow-disabled : $fb-allow-disabled)
+  &, &:visited
+    color: $color
+  &:hover, &:focus
+    color: $hover
+  &:active
+    color: $active
+  @if $fb-allow-disabled
+    &.disabled, &[disabled]
+      color: $color
+
+// Layout the button's box
+=fancy-button-structure($font-size: $fb-font-size, $radius: $fb-radius, $border-width: $fb-border-width, $line-height: $fb-line-height)
+  @extend .fancy-button-reset-base-class
+  +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: $fb-line-height)
+  // better padding for smaller buttons
+  $v-padding: 0.3em
+  $h-padding: 1em
+  @if $radius > 0
+    +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: $fb-border-width)
+  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)
+  font-family: "Lucida Grande", Lucida, Arial, sans-serif
+  background: #{$fb-image-path} repeat-x bottom left
+  margin: 0
+  width: auto
+  overflow: visible
+  display: inline-block
+  cursor: pointer
+  text-decoration: none
+  border-style: solid
+  font-weight: $font-weight
+  &::-moz-focus-inner
+    border: none
+    padding: 0
+  &:focus
+    outline: none
+
+=disable-fancy-button($color: $fb-color, $opacity: 0.7)
+  +fb-color($color, "default")
+  +opacity($opacity)
+  +box-shadow(none)
+  cursor: default !important
+
+.fancy-button-reset-base-class
+  +fb-reset

data/stylesheets/recipes/ui/button/style/todo/_necolas-animated.scss

@@ -0,0 +1,81 @@
+.btn {
+    position: relative;
+    z-index: 1;
+    display: inline-block;
+    padding: 10px 20px 18px;
+    text-shadow: 0 -1px 1px rgba(19,65,88,.8);
+    font-size:42px;
+    background: #1a74a1;
+    border-radius: 8px;
+    box-shadow: 0 10px 20px rgba(0,0,0,.35), inset 0 -1px 1px rgba(255,255,255,.15);
+    -webkit-transition-property: -webkit-box-shadow; /* drop padding as pseudo-element trans not supported */
+    -moz-transition-property: padding, -moz-box-shadow;
+    -o-transition-property: box-shadow; /* drop padding as pseudo-element trans not supported */
+    transition-property: padding, box-shadow;
+
+    transition-duration: .2s;
+
+    transition-timing-function: ease-in-out;
+}
+
+.btn:active {
+    padding: 14px 20px 14px;
+
+    box-shadow: 0 6px 15px rgba(0,0,0,.3), inset 0 -1px 1px rgba(255,255,255,.15);
+}
+
+.btn:before {
+    content: "";
+    position: absolute;
+    z-index: -1;
+    top: 0;
+    bottom: 4px;
+    left: 0;
+    right: 0;
+    background: #3194c6;
+
+    background: linear-gradient(#3194c6, #5bacd6);
+
+    border-radius: 8px;
+
+    transform: translate(0, -4px);
+    -webkit-transition: -webkit-transform .2s ease-in-out;
+    -moz-transition: -moz-transform .2s ease-in-out;
+    -o-transition: -o-transform .2s ease-in-out;
+    transition: transform .2s ease-in-out;
+}
+
+.btn:active:before {
+    transform: translate(0, 0);
+}
+
+
+/* button styles */
+
+.btn-alt {
+    display: inline-block;
+    padding: 10px 20px;
+    text-shadow: 0 -1px 1px rgba(19,65,88,.8);
+    font-size:42px;
+    background: #3194c6;
+    background: linear-gradient(#3194c6, #5bacd6);
+
+    border-radius: 8px;
+
+    box-shadow: 0 8px 0 #1a74a1, 0 15px 20px rgba(0,0,0,.35), inset 0 -1px 1px rgba(255,255,255,.15);
+    -webkit-transition-property: -webkit-box-shadow, -webkit-transform;
+    -moz-transition-property: -moz-box-shadow, -moz-transform;
+    -o-transition-property: box-shadow, o-transform;
+    transition-property: box-shadow, transform;
+
+    transition-duration: .2s;
+
+    transition-timing-function: ease-in-out;
+}
+
+.btn-alt:active {
+
+    transform: translate(0, 4px);
+
+    box-shadow: 0 4px 0 #1a74a1, 0 12px 10px rgba(0,0,0,.3), inset 0 -1px 1px rgba(255,255,255,.15);
+}

data/stylesheets/recipes/ui/button/style/todo/_ubuwaits.scss

@@ -0,0 +1,654 @@
+@import "bourbon";
+
+button::-moz-focus-inner {
+    border:0;
+}
+
+/* minimal
+*******************************************************************************/
+@mixin minimal {
+    background: #e3e3e3;
+    border: 1px solid #bbb;
+    @include border-radius (3px);
+    @include box-shadow(inset 0 0 1px 1px #f6f6f6);
+    color: #333;
+    font: bold 12px "helvetica neue", helvetica, arial, sans-serif;
+    line-height: 1;
+    padding: 8px 0 9px;
+    text-align: center;
+    text-shadow: 0 1px 0 #fff;
+    width: 150px;
+
+    &:hover {
+        background: #d9d9d9;
+        @include box-shadow(inset 0 0 1px 1px #eaeaea);
+        color: #222;
+        cursor: pointer;
+    }
+
+    &:active {
+        background: #d0d0d0;
+        @include box-shadow(inset 0 0 1px 1px #e3e3e3);
+        color: #000;
+    }
+}
+
+button.minimal {
+    @include minimal;
+}
+
+/* clean gray
+*******************************************************************************/
+@mixin clean-gray {
+    @include linear-gradient(top, #eee, #ccc);
+    border: 1px solid #ccc;
+    border-bottom: 1px solid #bbb;
+    @include border-radius(3px);
+    color: #333;
+    font: bold 11px "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
+    line-height: 1;
+    padding: 8px 0;
+    text-align: center;
+    text-shadow: 0 1px 0 #eee;
+    width: 150px;
+
+    &:hover {
+        @include linear-gradient(top, #ddd, #bbb);
+        border: 1px solid #bbb;
+        border-bottom: 1px solid #999;
+        cursor: pointer;
+        text-shadow: 0 1px 0 #ddd;
+    }
+
+    &:active {
+        border: 1px solid #aaa;
+        border-bottom: 1px solid #888;
+        @include box-shadow(inset 0 0 5px 2px #aaa, 0 1px 0 0 #eee);
+    }
+}
+
+button.clean-gray {
+    @include clean-gray;
+}
+
+/* cupid green (inspired by okcupid.com)
+*******************************************************************************/
+@mixin cupid-green {
+    @include linear-gradient(top, #7fbf4d, #63a62f);
+    border: 1px solid #63a62f;
+    border-bottom: 1px solid #5b992b;
+    @include border-radius(3px);
+    @include box-shadow(inset 0 1px 0 0 #96ca6d);
+    color: #fff;
+    font: bold 11px "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
+    line-height: 1;
+    padding: 7px 0 8px 0;
+    text-align: center;
+    text-shadow: 0 -1px 0 #4c9021;
+    width: 150px;
+
+    &:hover {
+        @include linear-gradient(top, #76b347, #5e9e2e);
+        @include box-shadow(inset 0 1px 0 0 #8dbf67);
+        cursor: pointer;
+    }
+
+    &:active {
+        border: 1px solid #5b992b;
+        border-bottom: 1px solid #538c27;
+        @include box-shadow(inset 0 0 8px 4px #548c29, 0 1px 0 0 #eee);
+    }
+}
+
+button.cupid-green {
+    @include cupid-green;
+}
+
+/* cupid blue (inspired by okcupid.com)
+*******************************************************************************/
+@mixin cupid-blue {
+    @include linear-gradient(top, #d7e5f5, #cbe0f5);
+    border-top: 1px solid #abbbcc;
+    border-left: 1px solid #a7b6c7;
+    border-bottom: 1px solid #a1afbf;
+    border-right: 1px solid #a7b6c7;
+    @include border-radius(12px);
+    @include box-shadow(inset 0 1px 0 0 #fff);
+    color: #1a3e66;
+    font: normal 11px "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
+    line-height: 1;
+    padding: 6px 0 7px 0;
+    text-align: center;
+    text-shadow: 0 1px 1px #fff;
+    width: 150px;
+
+    &:hover {
+        @include linear-gradient(top, #ccd9e8, #c1d4e8);
+        border-top: 1px solid #a1afbf;
+        border-left: 1px solid #9caaba;
+        border-bottom: 1px solid #96a3b3;
+        border-right: 1px solid #9caaba;
+        @include box-shadow(inset 0 1px 0 0 #f2f2f2);
+        color: #163659;
+        cursor: pointer;
+    }
+
+    &:active {
+        border: 1px solid #8c98a7;
+        @include box-shadow(inset 0 0 4px 2px #abbccf, 0 0 1px 0 #eee);
+    }
+}
+
+button.cupid-blue {
+    @include cupid-blue;
+}
+
+/* blue pill (inspired by iTunes)
+*******************************************************************************/
+@mixin blue-pill {
+    @include linear-gradient(top, #a5b8da, #7089b3);
+    border-top: 1px solid #758fba;
+    border-right: 1px solid #6c84ab;
+    border-bottom: 1px solid #5c6f91;
+    border-left: 1px solid #6c84ab;
+    @include border-radius(18px);
+    @include box-shadow(inset 0 1px 0 0 #aec3e5);
+    color: #fff;
+    font: bold 11px "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;
+    line-height: 1;
+    padding: 8px 0;
+    text-align: center;
+    text-shadow: 0 -1px 1px #64799e;
+    text-transform: uppercase;
+    width: 150px;
+
+    &:hover {
+        @include linear-gradient(top, #9badcc, #687fa6);
+        border-top: 1px solid #6d86ad;
+        border-right: 1px solid #647a9e;
+        border-bottom: 1px solid #546685;
+        border-left: 1px solid #647a9e;
+        @include box-shadow(inset 0 1px 0 0 #a5b9d9);
+        cursor: pointer;
+    }
+
+    &:active {
+        border: 1px solid #546685;
+        @include box-shadow(inset 0 0 8px 2px #7e8da6, 0 1px 0 0 #eee);
+    }
+}
+
+button.blue-pill {
+    @include blue-pill;
+}
+
+/* dribbble (inspired by dribbble.com)
+*******************************************************************************/
+@mixin dribbble {
+    @include linear-gradient(top, #F26895 0, #F26895 50%, #F15587 50%, #F15587 100%);
+    border: 0;
+    -moz-border-radius: 6px;
+    -webkit-border-radius: 6px;
+    border-radius: 6px;
+    color: #fcfcfc;
+    font: bold 16px "helvetica neue", helvetica, arial, sans-serif;
+    line-height: 1;
+    padding: 10px 0 12px 0;
+    text-align: center;
+    text-shadow: 0px -1px 1px #a64767;
+    width: 150px;
+
+    &:hover {
+        @include linear-gradient(top, #e2558b 0, #e2558b 50%, #df3e7b 50%, #df3e7b 100%);
+        cursor: pointer;
+    }
+
+    &:active {
+        @include linear-gradient(top, #c94477 0, #c94477 50%, #c22b65 50%, #c22b65 100%);
+    }
+}
+
+button.dribbble {
+    @include dribbble;
+}
+
+/* slick black
+*******************************************************************************/
+@mixin slick-black {
+    @include linear-gradient(top, rgba(50, 50, 50, 0.9) 0%, rgba(30, 30, 30, 0.9) 50%, rgba(20, 20, 20, 0.9) 50%, rgba(0, 0, 0, 0.9) 100%);
+    border: 0;
+    @include border-radius(4px);
+    @include box-shadow(inset 1px 1px 1px 0px rgba(135, 135, 135, 0.1), inset -1px -1px 1px 0px rgba(135, 135, 135, 0.1));
+    color: #fff;
+    font: lighter 22px "helvetica neue", helvetica, arial, sans-serif;
+    line-height: 1;
+    padding: 12px 0;
+    text-shadow: 0px -1px 1px rgba(0, 0, 0, .8), 0 1px 1px rgba(255, 255, 255, 0.3);
+    width: 150px;
+
+    &:hover {
+        @include linear-gradient(top, rgba(70, 70, 70, 0.9) 0%, rgba(50, 50, 50, 0.9) 50%, rgba(40, 40, 40, 0.9) 50%, rgba(20, 20, 20, 0.9) 100%);
+        cursor: pointer;
+    }
+
+    &:active {
+        @include linear-gradient(top, rgba(30, 30, 30, 0.9) 0%, rgba(20, 20, 20, 0.9) 50%, rgba(10, 10, 10, 0.9) 50%, rgba(0, 0, 0, 0.9) 100%);
+    }
+}
+
+button.slick-black {
+    @include slick-black;
+}
+
+/* thoughtbot (inspired by thoughtbot.com)
+*******************************************************************************/
+@mixin thoughtbot {
+    @include linear-gradient(top, #ee432e 0%, #c63929 50%, #b51700 50%, #891100 100%);
+    border: 1px solid #951100;
+    @include border-radius(5px);
+    @include box-shadow(inset 0px 0px 0px 1px rgba(255, 115, 100, 0.4), 0 1px 3px #333);
+    color: #fff;
+    font: bold 20px "helvetica neue", helvetica, arial, sans-serif;
+    line-height: 1;
+    padding: 12px 0 14px 0;
+    text-align: center;
+    text-shadow: 0px -1px 1px rgba(0, 0, 0, .8);
+    width: 150px;
+
+    &:hover {
+        @include linear-gradient(top, #f37873 0%, #db504d 50%, #cb0500 50%, #a20601 100%);
+        cursor: pointer;
+    }
+
+    &:active {
+        @include linear-gradient(top, #d43c28 0%, #ad3224 50%, #9c1500 50%, #700d00 100%);
+        @include box-shadow(inset 0px 0px 0px 1px rgba(255, 115, 100, 0.4));
+    }
+}
+
+button.thoughtbot {
+    @include thoughtbot;
+}
+
+/* punch
+*******************************************************************************/
+@mixin punch {
+    background: #4162a8;
+    border-top: 1px solid #38538c;
+    border-right: 1px solid #1f2d4d;
+    border-bottom: 1px solid #151e33;
+    border-left: 1px solid #1f2d4d;
+    @include border-radius(4px);
+    @include box-shadow(inset 0 1px 10px 1px #5c8bee, 0px 1px 0 #1d2c4d, 0 6px 0px #1f3053, 0 8px 4px 1px #111);
+    color: #fff;
+    font: bold 20px "helvetica neue", helvetica, arial, sans-serif;
+    line-height: 1;
+    margin-bottom: 10px;
+    padding: 10px 0 12px 0;
+    text-align: center;
+    text-shadow: 0px -1px 1px #1e2d4d;
+    width: 150px;
+    -webkit-background-clip: padding-box;
+
+    &:hover {
+        @include box-shadow(inset 0 0px 20px 1px #87adff, 0px 1px 0 #1d2c4d, 0 6px 0px #1f3053, 0 8px 4px 1px #111);
+        cursor: pointer;
+    }
+
+    &:active {
+        @include box-shadow(inset 0 1px 10px 1px #5c8bee, 0 1px 0 #1d2c4d, 0 2px 0 #1f3053, 0 4px 3px 0 #111);
+        margin-top: 58px;
+    }
+}
+
+button.punch {
+    @include punch;
+}
+
+/* blue candy (inspired by Apple iOS buttons)
+*******************************************************************************/
+@mixin blue-candy {
+    @include linear-gradient(top, #779be9 0%, #376fe0 50%, #2260dd 50%, #2463de 100%);
+    @include border-radius(3px);
+    color: #fff;
+    font: bold 12px "helvetica neue", helvetica, arial, sans-serif;
+    line-height: 1;
+    padding: 10px 0 12px 0;
+    text-align: center;
+    text-shadow: 0px -1px 1px #2c4d93;
+    width: 150px;
+    -webkit-background-clip: padding-box;
+
+    &:hover {
+        @include linear-gradient(top, #6989cf 0%, #3263c7 50%, #1d55c4 50%, #1d55c4 100%);
+        -webkit-background-clip: padding-box;
+        cursor: pointer;
+    }
+
+    &:active {
+        background: #1a4aab;
+        background: -moz-radial-gradient(50% 31% 0deg,circle cover, rgba(38, 76, 153, 0.4), rgba(11, 23, 46, 0.4)),
+        -moz-linear-gradient(top, #5c78b5 0%, #2b57ad 50%, #1a4aab 50%, #1b4bab 100%);
+        background: -webkit-gradient(radial, 50% 20%, 75, 50% 50%, 0, from(rgba(38, 76, 153, 0.4)), to(rgba(11, 23, 46, 0.4))),
+        -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #5c78b5), color-stop(0.5, #2b57ad), color-stop(0.5, #1a4aab), color-stop(1, #1b4bab));
+        color: #ddd;
+        -webkit-background-clip: padding-box;
+    }
+}
+
+button.blue-candy {
+    @include blue-candy;
+}
+
+/* purple candy
+*******************************************************************************/
+@mixin purple-candy {
+    @include linear-gradient(top, #9e76e8 0%, #7038e0 50%, #6021de 50%, #6224de 100%);
+    @include border-radius(3px);
+    color: #fff;
+    font: bold 12px "helvetica neue", helvetica, arial, sans-serif;
+    line-height: 1;
+    padding: 10px 0 12px 0;
+    text-align: center;
+    text-shadow: 0px -1px 1px #473569;
+    width: 150px;
+    -webkit-background-clip: padding-box;
+
+    &:hover {
+        @include linear-gradient(top, #8d69cf 0%, #6332c7 50%, #551dc4 50%, #561fc4 100%);
+        -webkit-background-clip: padding-box;
+        cursor: pointer;
+    }
+
+    &:active {
+        background: #4a1aab;
+        background: -moz-radial-gradient(50% 31% 0deg,circle cover, rgba(38, 76, 153, 0.4), rgba(11, 23, 46, 0.4)),
+        -moz-linear-gradient(top, #7b5cb5 0%, #572bad 50%, #4a1aab 50%, #4b1bab 100%);
+        background: -webkit-gradient(radial, 50% 20%, 75, 50% 50%, 0, from(rgba(38, 76, 153, 0.4)), to(rgba(11, 23, 46, 0.4))),
+        -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #7b5cb5), color-stop(0.5, #572bad), color-stop(0.5, #4a1aab), color-stop(1, #4b1bab));
+        color: #ddd;
+        -webkit-background-clip: padding-box;
+    }
+}
+
+button.purple-candy {
+    @include purple-candy;
+}
+
+/* shiny blue (inspired by rdio iphone interface)
+*******************************************************************************/
+@mixin shiny-blue {
+    @include linear-gradient(top, #759ae9 0%, #376fe0 50%, #1a5ad9 50%, #2463de 100%);
+    border-top: 1px solid #1f58cc;
+    border-right: 1px solid #1b4db3;
+    border-bottom: 1px solid #174299;
+    border-left: 1px solid #1b4db3;
+    @include border-radius(4px);
+    @include box-shadow(inset 0 0 2px 0 rgba(57, 140, 255, 0.8));
+    color: #fff;
+    font: bold 12px "helvetica neue", helvetica, arial, sans-serif;
+    padding: 7px 0;
+    text-shadow: 0 -1px 1px #1a5ad9;
+    width: 150px;
+
+    &:hover {
+        @include linear-gradient(top, #5d89e8 0%, #2261e0 50%, #044bd9 50%, #0d53de 100%);
+        cursor: pointer;
+    }
+
+    &:active {
+        border-top: 1px solid #1b4db3;
+        border-right: 1px solid #174299;
+        border-bottom: 1px solid #133780;
+        border-left: 1px solid #174299;
+        @include box-shadow(inset 0 0 5px 2px #1a47a0, 0 1px 0 #eee);
+    }
+}
+
+button.shiny-blue {
+    @include shiny-blue;
+}
+
+/* download itunes
+I wrote a blog post about creating this button:
+http://robots.thoughtbot.com/post/2718077289/make-css3-buttons-like-a-boss
+*******************************************************************************/
+@mixin download-itunes {
+    @include linear-gradient(top, #52a8e8, #377ad0);
+    border-top: 1px solid #4081af;
+    border-right: 1px solid #2e69a3;
+    border-bottom: 1px solid #20559a;
+    border-left: 1px solid #2e69a3;
+    @include border-radius(16px);
+    @include box-shadow(inset 0 1px 0 0 #72b9eb, 0 1px 2px 0 #b3b3b3);
+    color: #fff;
+    font: normal 11px "lucida grande", sans-serif;
+    line-height: 1;
+    padding: 3px 5px;
+    text-align: center;
+    text-shadow: 0 -1px 1px #3275bc;
+    width: 112px;
+    -webkit-background-clip: padding-box;
+
+    &:hover {
+        @include linear-gradient(top, #3e9ee5 0%, #206bcb 100%);
+        border-top: 1px solid #2a73a6;
+        border-right: 1px solid #165899;
+        border-bottom: 1px solid #07428f;
+        border-left: 1px solid #165899;
+        @include box-shadow(inset 0 1px 0 0 #62b1e9);
+        cursor: pointer;
+        text-shadow: 0 -1px 1px #1d62ab;
+        -webkit-background-clip: padding-box;
+    }
+
+    &:active {
+        background: #3282d3;
+        border: 1px solid #154c8c;
+        border-bottom: 1px solid #0e408e;
+        @include box-shadow(inset 0 0 6px 3px #1657b5, 0 1px 0 0 #fff);
+        text-shadow: 0 -1px 1px #2361a4;
+        -webkit-background-clip: padding-box;
+    }
+}
+
+button.download-itunes {
+    @include download-itunes;
+}
+
+button[disabled].download-itunes,
+button[disabled].download-itunes:hover,
+button[disabled].download-itunes:active {
+    @include linear-gradient(top, #dadada, #f3f3f3);
+    border-top: 1px solid #c5c5c5;
+    border-right: 1px solid #cecece;
+    border-bottom: 1px solid #d9d9d9;
+    border-left: 1px solid #cecece;
+    @include box-shadow(none);
+    color: #8f8f8f;
+    cursor: not-allowed;
+    text-shadow: 0 -1px 1px #ebebeb;
+}
+
+button.download-itunes::-moz-focus-inner {
+    border: 0;
+    padding: 0;
+}
+
+/* skip (inspired by okcupid iphone interface)
+*******************************************************************************/
+@mixin skip {
+    @include linear-gradient(top, #8c9cbf 0%, #546a9e 50%, #36518f 50%, #3d5691 100%);
+    border: 1px solid #172d6e;
+    border-bottom: 1px solid #0e1d45;
+    @include border-radius(5px);
+    @include box-shadow(inset 0 1px 0 0 #b1b9cb);
+    color: #fff;
+    font: bold 16px "helvetica neue", helvetica, arial, sans-serif;
+    padding: 7px 0 8px 0;
+    text-decoration: none;
+    text-align: center;
+    text-shadow: 0 -1px 1px #000f4d;
+    width: 150px;
+
+    &:hover {
+        @include linear-gradient(top, #7f8dad 0%, #4a5e8c 50%, #2f477d 50%, #364c80 100%);
+        cursor: pointer;
+    }
+
+    &:active {
+        @include box-shadow(inset 0 0 20px 0 #1d2845, 0 1px 0 #fff);
+    }
+}
+
+button.skip {
+    @include skip;
+}
+
+/* minimal indent (inspired by okcupid iphone interface)
+*******************************************************************************/
+@mixin minimal-indent {
+    @include linear-gradient(top, #f3f3f3 0%, #dddddd 50%, #d2d2d2 50%, #dfdfdf 100%);
+    border-right: 1px solid #dfdfdf;
+    border-bottom: 1px solid #b4b4b4;
+    border-right: 1px solid #dfdfdf;
+    @include border-radius(5px);
+    @include box-shadow(inset 0 1px 0 0 #fff, 0 1px 0 0 #d5d5d5, 0 -1px 2px 1px #efefef);
+    color: #666;
+    font: bold 16px "helvetica neue", helvetica, arial, sans-serif;
+    margin: 0;
+    padding: 7px 0;
+    text-shadow: 0 1px 1px #fff;
+    width: 150px;
+
+    &:hover {
+        @include linear-gradient(top, #e5e5e5 0%, #d1d1d1 50%, #c4c4c4 50%, #b8b8b8 100%);
+        @include box-shadow(inset 0 1px 0 0 #f2f2f2, 0 1px 0 0 #c9c9c9, 0 -1px 2px 1px #e3e3e3);
+    }
+
+    &:active {
+        @include box-shadow(inset 0 0 30px 0 #999, 0 1px 0 0 #fff);
+    }
+}
+
+div.indent {
+    @include linear-gradient(top, #e2e2e2, #fafafa);
+    @include border-radius(8px);
+    margin: 50px auto 0;
+    padding: 10px 0;
+    width: 170px;
+}
+
+button.minimal-indent {
+    @include minimal-indent;
+}
+
+/* webkit badge
+*******************************************************************************/
+@mixin webkit-badge {
+    background: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #ee432e), color-stop(0.5, #c63929), color-stop(0.5, #b51700), color-stop(1, #891100));
+    color: #fff;
+    font-family: "hoefler text", georgia, serif;
+    font-size: 30px;
+    font-style: italic;
+    font-weight: lighter;
+    height: 88px;
+    line-height: 1;
+    padding: 0;
+    text-align: center;
+    text-shadow: 0px -1px 1px #3d0700;
+    width: 150px;
+    -webkit-mask-image: url("../images/badge.png");
+    -webkit-mask-position: left top;
+    -webkit-mask-repeat: no-repeat;
+
+    &:hover {
+        background: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #f37873), color-stop(0.5, #db504d), color-stop(0.5, #cb0500), color-stop(1, #a20601));
+        cursor: pointer;
+    }
+
+    &:active {
+        background: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #d43c28), color-stop(0.5, #ad3224), color-stop(0.5, #9c1500), color-stop(1, #700d00));
+    }
+}
+
+button.webkit-badge {
+    @include webkit-badge;
+}
+
+/* webkit seal
+*******************************************************************************/
+@mixin webkit-seal {
+    background: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #9e76e8), color-stop(1, #6224de));
+    color: #fff;
+    height: 90px;
+    color: #fff;
+    font-family: "helvetica neue", helvetica, arial, sans-serif;
+    font-size: 13px;
+    font-weight: bold;
+    line-height: 1;
+    padding: 0;
+    text-align: center;
+    text-shadow: 0px -1px 1px #473569;
+    width: 150px;
+    -webkit-mask-image: url("../images/seal.png");
+    -webkit-mask-position: center center;
+    -webkit-mask-repeat: no-repeat;
+
+    &:hover {
+        background: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #8d69cf), color-stop(1, #561fc4));
+        cursor: pointer;
+    }
+
+    &:active {
+        background: -webkit-gradient(radial, 50% 50%, 40, 50% 50%, 0, from(rgba(38, 76, 153, 0.2)), to(rgba(11, 23, 46, 0.2))), -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #7b5cb5), color-stop(1, #4b1bab));
+    }
+}
+
+button.webkit-seal {
+    @include webkit-seal;
+}
+
+/* webkit check
+*******************************************************************************/
+@mixin webkit-check {
+    background: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #779be9), color-stop(1, #2463de));
+    color: #fff;
+    height: 88px;
+    line-height: 1;
+    padding: 0;
+    text-align: center;
+    text-indent: -9999px;
+    text-shadow: 0px -1px 1px #3d0700;
+    width: 150px;
+    -webkit-mask-image: url("../images/check.png");
+    -webkit-mask-position: center center;
+    -webkit-mask-repeat: no-repeat;
+
+    &:hover {
+        background: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #6989cf), color-stop(1, #1d55c4));
+        cursor: pointer;
+    }
+
+    &:active {
+        background: -webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #5c78b5), color-stop(1, #1b4bab));
+    }
+}
+
+button.webkit-check {
+    @include webkit-check;
+}
+
+/* disabled button styles
+works with this markup: <button disabled="disabled">Submit</button>
+*******************************************************************************/
+button[disabled],
+button[disabled]:hover,
+button[disabled]:active {
+    background: #999;
+    border: 0;
+    @include box-shadow(none);
+    color: #aaa;
+    cursor: not-allowed;
+    text-shadow: none;
+}F