src/scss/bootstrap-4.0.0-alpha.6/scss/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   $active-background: darken($background, 10%);
   8   $active-border: darken($border, 12%);
   9
  10   color: $color;
  11   background-color: $background;
  12   border-color: $border;
  13   @include box-shadow($btn-box-shadow);
  14
  15   // Hover and focus styles are shared
  16   @include hover {
  17     color: $color;
  18     background-color: $active-background;
  19     border-color: $active-border;
  20   }
  21   &:focus,
  22   &.focus {
  23     // Avoid using mixin so we can pass custom focus shadow properly
  24     @if $enable-shadows {
  25       box-shadow: $btn-box-shadow, 0 0 0 2px rgba($border, .5);
  26     } @else {
  27       box-shadow: 0 0 0 2px rgba($border, .5);
  28     }
  29   }
  30
  31   // Disabled comes first so active can properly restyle
  32   &.disabled,
  33   &:disabled {
  34     background-color: $background;
  35     border-color: $border;
  36   }
  37
  38   &:active,
  39   &.active,
  40   .show > &.dropdown-toggle {
  41     color: $color;
  42     background-color: $active-background;
  43     background-image: none; // Remove the gradient for the pressed/active state
  44     border-color: $active-border;
  45     @include box-shadow($btn-active-box-shadow);
  46   }
  47 }
  48
  49 @mixin button-outline-variant($color, $color-hover: #fff) {
  50   color: $color;
  51   background-image: none;
  52   background-color: transparent;
  53   border-color: $color;
  54
  55   @include hover {
  56     color: $color-hover;
  57     background-color: $color;
  58     border-color: $color;
  59   }
  60
  61   &:focus,
  62   &.focus {
  63     box-shadow: 0 0 0 2px rgba($color, .5);
  64   }
  65
  66   &.disabled,
  67   &:disabled {
  68     color: $color;
  69     background-color: transparent;
  70   }
  71
  72   &:active,
  73   &.active,
  74   .show > &.dropdown-toggle {
  75     color: $color-hover;
  76     background-color: $color;
  77     border-color: $color;
  78   }
  79 }
  80
  81 // Button sizes
  82 @mixin button-size($padding-y, $padding-x, $font-size, $border-radius) {
  83   padding: $padding-y $padding-x;
  84   font-size: $font-size;
  85   @include border-radius($border-radius);
  86 }