| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109 | // Button variants//// Easily pump out default styles, as well as :hover, :focus, :active,// and disabled options for all buttons@mixin button-variant($background, $border, $hover-background: darken($background, 7.5%), $hover-border: darken($border, 10%), $active-background: darken($background, 10%), $active-border: darken($border, 12.5%)) {  color: color-yiq($background);  @include gradient-bg($background);  border-color: $border;  @include box-shadow($btn-box-shadow);  @include hover {    color: color-yiq($hover-background);    @include gradient-bg($hover-background);    border-color: $hover-border;  }  &:focus,  &.focus {    // Avoid using mixin so we can pass custom focus shadow properly    @if $enable-shadows {      box-shadow: $btn-box-shadow, 0 0 0 $btn-focus-width rgba($border, .5);    } @else {      box-shadow: 0 0 0 $btn-focus-width rgba($border, .5);    }  }  // Disabled comes first so active can properly restyle  &.disabled,  &:disabled {    color: color-yiq($background);    background-color: $background;    border-color: $border;  }  &:not(:disabled):not(.disabled):active,  &:not(:disabled):not(.disabled).active,  .show > &.dropdown-toggle {    color: color-yiq($active-background);    background-color: $active-background;    @if $enable-gradients {      background-image: none; // Remove the gradient for the pressed/active state    }    border-color: $active-border;    &:focus {      // Avoid using mixin so we can pass custom focus shadow properly      @if $enable-shadows {        box-shadow: $btn-active-box-shadow, 0 0 0 $btn-focus-width rgba($border, .5);      } @else {        box-shadow: 0 0 0 $btn-focus-width rgba($border, .5);      }    }  }}@mixin button-outline-variant($color, $color-hover: color-yiq($color), $active-background: $color, $active-border: $color) {  color: $color;  background-color: transparent;  background-image: none;  border-color: $color;  &:hover {    color: $color-hover;    background-color: $active-background;    border-color: $active-border;  }  &:focus,  &.focus {    box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);  }  &.disabled,  &:disabled {    color: $color;    background-color: transparent;  }  &:not(:disabled):not(.disabled):active,  &:not(:disabled):not(.disabled).active,  .show > &.dropdown-toggle {    color: color-yiq($active-background);    background-color: $active-background;    border-color: $active-border;    &:focus {      // Avoid using mixin so we can pass custom focus shadow properly      @if $enable-shadows and $btn-active-box-shadow != none {        box-shadow: $btn-active-box-shadow, 0 0 0 $btn-focus-width rgba($color, .5);      } @else {        box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);      }    }  }}// Button sizes@mixin button-size($padding-y, $padding-x, $font-size, $line-height, $border-radius) {  padding: $padding-y $padding-x;  font-size: $font-size;  line-height: $line-height;  // Manually declare to provide an override to the browser default  @if $enable-rounded {    border-radius: $border-radius;  } @else {    border-radius: 0;  }}
 |