1 // Button variants

     2 //

     3 // Easily pump out default styles, as well as :hover, :focus, :active,

     4 // and disabled options for all buttons

     5 

     6 @mixin button-variant($color, $background, $border) {

     7   color: $color;

     8   background-color: $background;

     9   border-color: $border;

    10 

    11   &:focus,

    12   &.focus {

    13     color: $color;

    14     background-color: darken($background, 10%);

    15         border-color: darken($border, 25%);

    16   }

    17   &:hover {

    18     color: $color;

    19     background-color: darken($background, 10%);

    20         border-color: darken($border, 12%);

    21   }

    22   &:active,

    23   &.active,

    24   .open > &.dropdown-toggle {

    25     color: $color;

    26     background-color: darken($background, 10%);

    27         border-color: darken($border, 12%);

    28 

    29     &:hover,

    30     &:focus,

    31     &.focus {

    32       color: $color;

    33       background-color: darken($background, 17%);

    34           border-color: darken($border, 25%);

    35     }

    36   }

    37   &:active,

    38   &.active,

    39   .open > &.dropdown-toggle {

    40     background-image: none;

    41   }

    42   &.disabled,

    43   &[disabled],

    44   fieldset[disabled] & {

    45     &,

    46     &:hover,

    47     &:focus,

    48     &.focus,

    49     &:active,

    50     &.active {

    51       background-color: $background;

    52           border-color: $border;

    53     }

    54   }

    55 

    56   .badge {

    57     color: $background;

    58     background-color: $color;

    59   }

    60 }

    61 

    62 // Button sizes

    63 @mixin button-size($padding-vertical, $padding-horizontal, $font-size, $line-height, $border-radius) {

    64   padding: $padding-vertical $padding-horizontal;

    65   font-size: $font-size;

    66   line-height: $line-height;

    67   border-radius: $border-radius;

    68 }