|
@mixin button($padding: 5px 5px 5px 10px, $font-size: 1.1em, $width: auto, $bg-color-start: #479dcf, $bg-color-end: #2f6db7, $text-color: #FFF, $border-radius: 3px) |
|
color: $text-color |
|
background: $bg-color-start |
|
$border-base: adjust-hue(darken($bg-color-start, 15%), 5%) |
|
@include filter-gradient($bg-color-start, $bg-color-end, vertical) // IE6-8 |
|
// IE9 SVG, needs conditional override of 'filter' to 'none' |
|
$experimental-support-for-svg: true |
|
@include background-image(linear-gradient(top, $bg-color-start 0%,$bg-color-end 99%)) |
|
border-top: 1px solid $border-base |
|
border-right: 1px solid adjust-hue(saturate(darken($border-base, 7%), 12%), 5%) |
|
border-bottom: 1px solid adjust-hue(saturate(darken($border-base, 9%), 12%), 8%) |
|
border-left: 1px solid adjust-hue(saturate(darken($border-base, 7%), 12%), 5%) |
|
border-radius: $border-radius |
|
-moz-box-shadow: inset 0 1px 0 0 lighten($bg-color-start, 15%), 0 1px 2px 0 #b3b3b3 |
|
-webkit-box-shadow: inset 0 1px 0 0 lighten($bg-color-start, 15%), 0 1px 2px 0 #b3b3b3 |
|
width: $width |
|
text-shadow: 0 -1px 1px adjust-hue(darken($bg-color-start, 15%), 15%) |
|
color: $text-color |
|
font-family: $bold |
|
font-size: $font-size |
|
padding: $padding |
|
|
|
&:hover |
|
background: darken($bg-color-start, 15%) |
|
@include background-image(linear-gradient(top, darken($bg-color-start, 8%) 0%,darken($bg-color-end, 5%) 99%)) |
|
border-top: 1px solid adjust-hue(saturate(darken($border-base, 7%), 12%), 5%) |
|
border-right: 1px solid adjust-hue(saturate(darken($border-base, 5%), 15%), 5%) |
|
border-left: 1px solid adjust-hue(saturate(darken($border-base, 5%), 15%), 5%) |
|
border-bottom: 1px solid adjust-hue(saturate(darken($border-base, 10%), 30%), 10%) |
|
-moz-box-shadow: inset 0 1px 0 0 lighten($bg-color-start, 10%) |
|
-webkit-box-shadow: inset 0 1px 0 0 lighten($bg-color-start, 10%) |
|
cursor: pointer |
|
text-shadow: 0 -1px 1px adjust-hue(saturate(darken($border-base, 5%), 15%), -10%) |
|
|
|
&:active |
|
background: adjust-hue(darken($bg-color-start, 15%), 5%) |
|
border: 1px solid adjust-hue(saturate(darken($border-base, 15%), 30%), 10%) |
|
border-bottom: 1px solid adjust-hue(saturate(darken($border-base, 10%), 35%), 10%) |
|
-moz-box-shadow: inset 0 0 6px 3px darken($bg-color-start, 20%), 0 1px 0 0 #fff |
|
-webkit-box-shadow: inset 0 0 6px 3px darken($bg-color-start, 20%), 0 1px 0 0 #fff |
|
text-shadow: 0 -1px 1px adjust-hue(saturate(darken($border-base, 5%), 15%), -10%) |
|
|
|
&[disabled], &[disabled]:active, &[disabled]:hover |
|
background: #999 |
|
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#dadada), to(#f3f3f3)) |
|
border-top: 1px solid #c5c5c5 |
|
border-right: 1px solid #cecece |
|
border-bottom: 1px solid #d9d9d9 |
|
border-left: 1px solid #cecece |
|
color: #000 //#8f8f8f |
|
box-shadow: none |
|
-moz-box-shadow: none |
|
-webkit-box-shadow: none |
|
cursor: not-allowed |
|
text-shadow: 0 -1px 1px #ebebeb |
