/* * Button mixin- creates 3d-ish button effect with correct * highlights/shadows, based on a base color. */ @mixin button( $button-color, $text-color: white ) { background: $button-color; border-color: darken( $button-color, 10% ); color: $text-color; box-shadow: inset 0 1px 0 lighten( $button-color, 15% ), 0 1px 0 rgba(0,0,0,.15); &:hover, &:focus { background: darken( $button-color, 5% ); border-color: darken( $button-color, 15% ); color: $text-color; box-shadow: inset 0 1px 0 lighten( $button-color, 10% ); } &:focus { box-shadow: inset 0 1px 0 lighten( $button-color, 10% ), 0 0 0 1px #5b9dd9, 0 0 2px 1px rgba( 30, 140, 190, .8 ); } &:active { background: darken( $button-color, 10% ); border-color: darken( $button-color, 15% ); color: $text-color; box-shadow: inset 0 2px 5px -3px rgba( 0, 0, 0, 0.5 ), 0 0 0 1px #5b9dd9, 0 0 2px 1px rgba( 30, 140, 190, .8 ); } &[disabled], &:disabled, &.button-primary-disabled, &.disabled { color: hsl( hue( $button-color ), 10%, 80% ) !important; background: darken( $button-color, 8% ) !important; border-color: darken( $button-color, 15% ) !important; text-shadow: none !important; } }