Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
cleverButton Sass mixin for Compass
// ##### 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))
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment