|
// ##### cleverButton ##### |
|
// # Version: 0.3 |
|
// # Description: Sass mixin for Compass to create fully styled buttons. |
|
// # Notes: this mixin uses Compass mixin, see http://compass-style.org for |
|
// # installation instructions. |
|
// # Authors: Olivier Lacan, Andrew Smith |
|
// ### changelog |
|
// # v0.1: July 2010, initial version |
|
// # v0.2: Added edge extendable edge styles |
|
// # v0.3: Added Compass CSS3 mixins for reduced code & better browser support |
|
|
|
@import compass |
|
|
|
// cleverButtons by Olivier Lacan & Andrew Smith (http://clevercode.net) |
|
=cleverButton($radius : 5px, $textcolor : white, $from : #aaa, $to : #666, $edge : "glow") |
|
|
|
// adjustable settings for padding |
|
padding: 0.3em 1.5em 0.2em |
|
|
|
// defaulting background to gradient end color |
|
background-color: $to |
|
+background-image(linear-gradient($from, $to)) |
|
// legacy IE |
|
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$from}', endColorstr='#{$to}') |
|
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$from}', endColorstr='#{$to}')" |
|
|
|
@if $edge == "glow" |
|
+box-shadow(0 1px 1px rgba(0,0,0,.6), rgba(255,255,255,.9) 0px 1px 2px inset) |
|
|
|
@if $edge == "stark" |
|
+box-shadow(rgba(255,255,255,.7) 0 10px 10px inset, rgba(0,0,0,.4) 0 0 1px inset) |
|
|
|
@if $edge == "3d" |
|
+box-shadow(rgba(0,0,0,.9) 0 3px 1px, rgba(0,0,0,.4) 0 0 1px inset) |
|
|
|
// making sure IE gets at least a border |
|
border: 1px solid saturate(darken($to, 10%), 10%) |
|
// would benefit from CSS3 PIE radius |
|
+border-radius($radius) |
|
|
|
|
|
$is_light: lightness($textcolor) > 50% |
|
|
|
$dark_shadow_color : darken($textcolor,100%) |
|
$light_shadow_color : lighten($textcolor,100%) |
|
|
|
@if $is_light |
|
text-shadow: transparentize($dark_shadow_color, .4) 0 1px 0 |
|
@if $is_light == false |
|
text-shadow: transparentize($light_shadow_color, .4) 0 1px 0 |
|
|
|
&:link, &:visited |
|
color: $textcolor |
|
|
|
&, &:hover, &:focus, &:active |
|
color: $textcolor |
|
text-decoration: none |
|
|
|
&:hover, &:focus |
|
background-color: darken($from, 10%) |
|
+background-image(linear-gradient(darken($from, 5%), darken($to, 5%))) |
|
// legacy IE |
|
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{darken($from, 5%)}', endColorstr='#{darken($to, 5%)}') |
|
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#{darken($from, 5%)}', endColorstr='#{darken($to, 5%)}')" |
|
|
|
&:active |
|
background-color: $from |
|
+background-image(linear-gradient($to, $from)) |
|
// legacy IE |
|
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$to}', endColorstr='#{$from}') |
|
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$to}', endColorstr='#{$from}')" |
|
|
|
@if $is_light |
|
text-shadow: transparentize($dark_shadow_color, .4) 0 -1px 0 |
|
@if $is_light == false |
|
text-shadow: transparentize($light_shadow_color, .4) 0 -1px 0 |
|
|
|
@if $edge == "stark" |
|
+box-shadow(rgba(0,0,0,.7) 0 5px 10px inset, rgba(255,255,255,.4) 0 0 1px inset) |
|
@if $edge == "3d" |
|
+box-shadow(rgba(0,0,0,.7) 0 1px 1px, rgba(0,0,0,.4) 0 0 1px inset) |
|
+transform(translateY(2px)) |
