[Summary view] [Print] [Text view]

   1  //
   2  // Base styles
   3  //
   4  
   5  .btn {
   6    display: inline-block;
   7    font-family: $btn-font-family;
   8    font-weight: $btn-font-weight;
   9    line-height: $btn-line-height;
  10    color: $body-color;
  11    text-align: center;
  12    text-decoration: if($link-decoration == none, null, none);
  13    white-space: $btn-white-space;
  14    vertical-align: middle;
  15    cursor: if($enable-button-pointers, pointer, null);
  16    user-select: none;
  17    background-color: transparent;
  18    border: $btn-border-width solid transparent;
  19    @include button-size($btn-padding-y, $btn-padding-x, $btn-font-size, $btn-border-radius);
  20    @include transition($btn-transition);
  21  
  22    &:hover {
  23      color: $body-color;
  24      text-decoration: if($link-hover-decoration == underline, none, null);
  25    }
  26  
  27    .btn-check:focus + &,
  28    &:focus {
  29      outline: 0;
  30      box-shadow: $btn-focus-box-shadow;
  31    }
  32  
  33    .btn-check:checked + &,
  34    .btn-check:active + &,
  35    &:active,
  36    &.active {
  37      @include box-shadow($btn-active-box-shadow);
  38  
  39      &:focus {
  40        @include box-shadow($btn-focus-box-shadow, $btn-active-box-shadow);
  41      }
  42    }
  43  
  44    &:disabled,
  45    &.disabled,
  46    fieldset:disabled & {
  47      pointer-events: none;
  48      opacity: $btn-disabled-opacity;
  49      @include box-shadow(none);
  50    }
  51  }
  52  
  53  
  54  //
  55  // Alternate buttons
  56  //
  57  
  58  // scss-docs-start btn-variant-loops
  59  @each $color, $value in $theme-colors {
  60    .btn-#{$color} {
  61      @include button-variant($value, $value);
  62    }
  63  }
  64  
  65  @each $color, $value in $theme-colors {
  66    .btn-outline-#{$color} {
  67      @include button-outline-variant($value);
  68    }
  69  }
  70  // scss-docs-end btn-variant-loops
  71  
  72  
  73  //
  74  // Link buttons
  75  //
  76  
  77  // Make a button look and behave like a link
  78  .btn-link {
  79    font-weight: $font-weight-normal;
  80    color: $btn-link-color;
  81    text-decoration: $link-decoration;
  82  
  83    &:hover {
  84      color: $btn-link-hover-color;
  85      text-decoration: $link-hover-decoration;
  86    }
  87  
  88    &:focus {
  89      text-decoration: $link-hover-decoration;
  90    }
  91  
  92    &:disabled,
  93    &.disabled {
  94      color: $btn-link-disabled-color;
  95    }
  96  
  97    // No need for an active state here
  98  }
  99  
 100  
 101  //
 102  // Button Sizes
 103  //
 104  
 105  .btn-lg {
 106    @include button-size($btn-padding-y-lg, $btn-padding-x-lg, $btn-font-size-lg, $btn-border-radius-lg);
 107  }
 108  
 109  .btn-sm {
 110    @include button-size($btn-padding-y-sm, $btn-padding-x-sm, $btn-font-size-sm, $btn-border-radius-sm);
 111  }