resources/scss/bootstrap/mixins/_buttons.scss

   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 }