|
// 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%)); |
|
} |
|
} |
|
} |
|
} |
|
} |