Skip to content

Instantly share code, notes, and snippets.

@uberbuilder
Created February 12, 2013 00:49
Show Gist options
  • Save uberbuilder/4759060 to your computer and use it in GitHub Desktop.
Save uberbuilder/4759060 to your computer and use it in GitHub Desktop.
Sonya Style - SASS/Compass Button @mixin. This is my first mixin ever :)
// Button Mixin ------------------------------------------------------------------------------------
@mixin sonya_button($button_color: rgba(62,184,229,1), $borderRadius: 5px, $scale_border_lightness_by: -20%, $scale_border_saturation_by: -62%, $border_side: false, $isPushable: false, $pushable_highlight: 10%, $button_shadow_tint: 14%, $has_shadow: true) {
// Box
// Positioning
position: relative;
top: 0;
// Background Color
background-color: $button_color; // Old browsers
@include filter-gradient(scale-lightness($button_color, 25%), $button_color, vertical); // IE6-9
@include background-image(linear-gradient(top, scale-lightness($button_color, 25%) 0%,$button_color 100%));
@if $isPushable {
&:active, &:hover {
background-color: scale-lightness($button_color, $pushable_highlight); // Old browsers
@include filter-gradient(scale-lightness($button_color, (25% + $pushable_highlight)), scale-lightness($button_color, $pushable_highlight), vertical); // IE6-9
@include background-image(linear-gradient(top, scale-lightness($button_color, (25% + $pushable_highlight)) 0%,scale-lightness($button_color, $pushable_highlight) 100%));
cursor: pointer;
}
}
// Border
@if $border_side {
border-#{$border_side}: 1px solid scale-saturation(scale-lightness($button_color, $scale_border_lightness_by), $scale_border_saturation_by);
@if $border_side == "left" {
@include border-radius(0px $borderRadius $borderRadius 0px);
} @else if $border_side == "right" {
@include border-radius($borderRadius 0px 0px $borderRadius);
}
} @else {
@include border-radius($borderRadius);
}
// Box Shadow
@if $has_shadow {
@include box-shadow(inset 0px 1px 0px scale-lightness($button_color, 50%), 0px 5px 0px 0px scale-saturation(scale-lightness($button_color, -38%), -38%), 0px 12px 10px -3px scale-saturation(scale-lightness($button_color, $button_shadow_tint), -80%));
@if $isPushable {
&:active {
top: 3px;
@if $border_side == "left" {
@include box-shadow(inset 5px 0px 10px -6px scale-saturation(scale-lightness($button_color, -80%), -80%), inset 0px 1px 0px scale-lightness($button_color, 50%), 0px 2px 0px 0px scale-saturation(scale-lightness($button_color, -38%), -38%), 0px 9px 7px -4px scale-saturation(scale-lightness($button_color, $button_shadow_tint), -80%));
} @else if $border_side == "right" {
@include box-shadow(inset -5px 0px 10px -6px scale-saturation(scale-lightness($button_color, -80%), -80%), inset 0px 1px 0px scale-lightness($button_color, 50%), 0px 2px 0px 0px scale-saturation(scale-lightness($button_color, -38%), -38%), 0px 9px 7px -4px scale-saturation(scale-lightness($button_color, $button_shadow_tint), -80%));
} @else {
@include box-shadow(inset 0px 1px 0px scale-lightness($button_color, 50%), 0px 2px 0px 0px scale-saturation(scale-lightness($button_color, -38%), -38%), 0px 9px 7px -4px scale-saturation(scale-lightness($button_color, $button_shadow_tint), -80%));
}
}
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment