[Summary view] [Print] [Text view]

   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  // scss-docs-start btn-variant-mixin
   7  @mixin button-variant(
   8    $background,
   9    $border,
  10    $color: color-contrast($background),
  11    $hover-background: if($color == $color-contrast-light, shade-color($background, $btn-hover-bg-shade-amount), tint-color($background, $btn-hover-bg-tint-amount)),
  12    $hover-border: if($color == $color-contrast-light, shade-color($border, $btn-hover-border-shade-amount), tint-color($border, $btn-hover-border-tint-amount)),
  13    $hover-color: color-contrast($hover-background),
  14    $active-background: if($color == $color-contrast-light, shade-color($background, $btn-active-bg-shade-amount), tint-color($background, $btn-active-bg-tint-amount)),
  15    $active-border: if($color == $color-contrast-light, shade-color($border, $btn-active-border-shade-amount), tint-color($border, $btn-active-border-tint-amount)),
  16    $active-color: color-contrast($active-background),
  17    $disabled-background: $background,
  18    $disabled-border: $border,
  19    $disabled-color: color-contrast($disabled-background)
  20  ) {
  21    color: $color;
  22    @include gradient-bg($background);
  23    border-color: $border;
  24    @include box-shadow($btn-box-shadow);
  25  
  26    &:hover {
  27      color: $hover-color;
  28      @include gradient-bg($hover-background);
  29      border-color: $hover-border;
  30    }
  31  
  32    .btn-check:focus + &,
  33    &:focus {
  34      color: $hover-color;
  35      @include gradient-bg($hover-background);
  36      border-color: $hover-border;
  37      @if $enable-shadows {
  38        @include box-shadow($btn-box-shadow, 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5));
  39      } @else {
  40        // Avoid using mixin so we can pass custom focus shadow properly
  41        box-shadow: 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5);
  42      }
  43    }
  44  
  45    .btn-check:checked + &,
  46    .btn-check:active + &,
  47    &:active,
  48    &.active,
  49    .show > &.dropdown-toggle {
  50      color: $active-color;
  51      background-color: $active-background;
  52      // Remove CSS gradients if they're enabled
  53      background-image: if($enable-gradients, none, null);
  54      border-color: $active-border;
  55  
  56      &:focus {
  57        @if $enable-shadows {
  58          @include box-shadow($btn-active-box-shadow, 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5));
  59        } @else {
  60          // Avoid using mixin so we can pass custom focus shadow properly
  61          box-shadow: 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5);
  62        }
  63      }
  64    }
  65  
  66    &:disabled,
  67    &.disabled {
  68      color: $disabled-color;
  69      background-color: $disabled-background;
  70      // Remove CSS gradients if they're enabled
  71      background-image: if($enable-gradients, none, null);
  72      border-color: $disabled-border;
  73    }
  74  }
  75  // scss-docs-end btn-variant-mixin
  76  
  77  // scss-docs-start btn-outline-variant-mixin
  78  @mixin button-outline-variant(
  79    $color,
  80    $color-hover: color-contrast($color),
  81    $active-background: $color,
  82    $active-border: $color,
  83    $active-color: color-contrast($active-background)
  84  ) {
  85    color: $color;
  86    border-color: $color;
  87  
  88    &:hover {
  89      color: $color-hover;
  90      background-color: $active-background;
  91      border-color: $active-border;
  92    }
  93  
  94    .btn-check:focus + &,
  95    &:focus {
  96      box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);
  97    }
  98  
  99    .btn-check:checked + &,
 100    .btn-check:active + &,
 101    &:active,
 102    &.active,
 103    &.dropdown-toggle.show {
 104      color: $active-color;
 105      background-color: $active-background;
 106      border-color: $active-border;
 107  
 108      &:focus {
 109        @if $enable-shadows {
 110          @include box-shadow($btn-active-box-shadow, 0 0 0 $btn-focus-width rgba($color, .5));
 111        } @else {
 112          // Avoid using mixin so we can pass custom focus shadow properly
 113          box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);
 114        }
 115      }
 116    }
 117  
 118    &:disabled,
 119    &.disabled {
 120      color: $color;
 121      background-color: transparent;
 122    }
 123  }
 124  // scss-docs-end btn-outline-variant-mixin
 125  
 126  // scss-docs-start btn-size-mixin
 127  @mixin button-size($padding-y, $padding-x, $font-size, $border-radius) {
 128    padding: $padding-y $padding-x;
 129    @include font-size($font-size);
 130    // Manually declare to provide an override to the browser default
 131    @include border-radius($border-radius, 0);
 132  }
 133  // scss-docs-end btn-size-mixin