@import compass/css3/images @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