// Button variants // // Easily pump out default styles, as well as :hover, :focus, :active, // and disabled options for all buttons @mixin button-variant($color, $background, $border) { color: $color; background-color: $background; border-color: $border; &:focus, &.focus { color: $color; background-color: darken($background, 10%); border-color: darken($border, 25%); outline:0; } &:hover { color: $color; background-color: darken($background, 10%); border-color: darken($border, 12%); } &:active, &.active, .open > &.dropdown-toggle { color: $color; background-color: darken($background, 10%); border-color: darken($border, 12%); &:hover, &:focus, &.focus { color: $color; background-color: darken($background, 17%); border-color: darken($border, 25%); outline:0; } } &:active, &.active, .open > &.dropdown-toggle { background-image: none; } &.disabled, &[disabled], fieldset[disabled] & { &:hover, &:focus, &.focus { background-color: $background; border-color: $border; } } .badge { color: $background; background-color: $color; } } // Button sizes @mixin button-size($padding-vertical, $padding-horizontal, $font-size, $line-height, $border-radius) { padding: $padding-vertical $padding-horizontal; font-size: $font-size; line-height: $line-height; border-radius: $border-radius; } // Drop shadows @mixin box-shadow($shadow) { -webkit-box-shadow: $shadow; // iOS <4.3 & Android <4.1 box-shadow: $shadow; } @mixin form-control-focus($color) { $color-rgba: rgba(red($color), green($color), blue($color), .6); &:focus { border-color: $color; outline: 0; $shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px $color-rgba; @include box-shadow($shadow); } } // Alerts @mixin alert-variant($background, $border, $text-color) { background-color: $background; border-color: $border; color: $text-color; hr { border-top-color: darken($border, 5%); } .alert-link { color: darken($text-color, 10%); } } // Contextual backgrounds // [converter] $parent hack @mixin bg-variant($parent, $color) { #{$parent} { background-color: $color; } a#{$parent}:hover, a#{$parent}:focus { background-color: darken($color, 10%); } }