@mixin button-effect($bg:$primary-color){
$dark-bg: darken($bg, 5%); $darker-bg: darken($bg, 10%); text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); border-color:$dark-bg !important; border-width:2px; @include background-image(linear-gradient($bg, $bg 5%, $dark-bg)); &:hover, &:focus, &:active{ background-color: $bg; @include background-image(linear-gradient($bg, $bg)); @include opacity(0.95); @include box-shadow(0 1px 1px rgba( 0, 0, 0, .1)); border-color:$darker-bg !important; @include transition(.25s); } @include box-shadow(0 1px 0 rgba(255, 255, 255, 0.0) inset);
} .disabled:hover{
opacity: 0.6 !important;
} .button {
@include button-effect();
}
a, button, input{
&.primary-dark { @include button-effect($belize-hole); } &.secondary { @include button-effect($clouds); text-shadow: 0 -1px 0 rgba(255, 255, 255, 0.25); } &.success{ @include button-effect($emerland); } &.success-dark{ @include button-effect($turquoise); } &.success-darker{ @include button-effect($nephritis); } &.success-darkest{ @include button-effect($green-sea); } &.alert{ @include button-effect($alizarin); } &.alert-dark{ @include button-effect($pomegranate); } &.info{ @include button-effect($sun-flower); } &.info-dark{ @include button-effect($orange); } &.warning{ @include button-effect($carrot); } &.warning-dark{ @include button-effect($pumpkin); } &.highlight{ @include button-effect($amethyst); } &.highlight-dark{ @include button-effect($wisteria); } &.inverse{ @include button-effect($wet-asphalt); } &.inverse-dark{ @include button-effect($midnight-blue); }
}