| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143 | // stylelint-disable selector-no-qualifying-type//// Base styles//.btn {  display: inline-block;  font-weight: $btn-font-weight;  text-align: center;  white-space: nowrap;  vertical-align: middle;  user-select: none;  border: $btn-border-width solid transparent;  @include button-size($btn-padding-y, $btn-padding-x, $font-size-base, $btn-line-height, $btn-border-radius);  @include transition($btn-transition);  // Share hover and focus styles  @include hover-focus {    text-decoration: none;  }  &:focus,  &.focus {    outline: 0;    box-shadow: $btn-focus-box-shadow;  }  // Disabled comes first so active can properly restyle  &.disabled,  &:disabled {    opacity: $btn-disabled-opacity;    @include box-shadow(none);  }  // Opinionated: add "hand" cursor to non-disabled .btn elements  &:not(:disabled):not(.disabled) {    cursor: pointer;  }  &:not(:disabled):not(.disabled):active,  &:not(:disabled):not(.disabled).active {    @include box-shadow($btn-active-box-shadow);    &:focus {      @include box-shadow($btn-focus-box-shadow, $btn-active-box-shadow);    }  }}// Future-proof disabling of clicks on `<a>` elementsa.btn.disabled,fieldset:disabled a.btn {  pointer-events: none;}//// Alternate buttons//@each $color, $value in $theme-colors {  .btn-#{$color} {    @include button-variant($value, $value);  }}@each $color, $value in $theme-colors {  .btn-outline-#{$color} {    @include button-outline-variant($value);  }}//// Link buttons//// Make a button look and behave like a link.btn-link {  font-weight: $font-weight-normal;  color: $link-color;  background-color: transparent;  @include hover {    color: $link-hover-color;    text-decoration: $link-hover-decoration;    background-color: transparent;    border-color: transparent;  }  &:focus,  &.focus {    text-decoration: $link-hover-decoration;    border-color: transparent;    box-shadow: none;  }  &:disabled,  &.disabled {    color: $btn-link-disabled-color;    pointer-events: none;  }  // No need for an active state here}//// Button Sizes//.btn-lg {  @include button-size($btn-padding-y-lg, $btn-padding-x-lg, $font-size-lg, $btn-line-height-lg, $btn-border-radius-lg);}.btn-sm {  @include button-size($btn-padding-y-sm, $btn-padding-x-sm, $font-size-sm, $btn-line-height-sm, $btn-border-radius-sm);}//// Block button//.btn-block {  display: block;  width: 100%;  // Vertically space out multiple block buttons  + .btn-block {    margin-top: $btn-block-spacing-y;  }}// Specificity overridesinput[type="submit"],input[type="reset"],input[type="button"] {  &.btn-block {    width: 100%;  }}
 |