compass-recipes 0.3.0.alpha.1 → 0.3.0.alpha.2

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

@@ -1,169 +0,0 @@
-@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

@@ -1,178 +0,0 @@
-@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

@@ -1,81 +0,0 @@
-.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

@@ -1,654 +0,0 @@
-@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