scss/bootstrap/_buttons.scss

0001 //
0002 // Base styles
0003 //
0004
0005 .btn {
0006   display: inline-block;
0007   font-family: $btn-font-family;
0008   font-weight: $btn-font-weight;
0009   line-height: $btn-line-height;
0010   color: $body-color;
0011   text-align: center;
0012   text-decoration: if($link-decoration == none, null, none);
0013   white-space: $btn-white-space;
0014   vertical-align: middle;
0015   cursor: if($enable-button-pointers, pointer, null);
0016   user-select: none;
0017   background-color: transparent;
0018   border: $btn-border-width solid transparent;
0019   @include button-size($btn-padding-y, $btn-padding-x, $btn-font-size, $btn-border-radius);
0020   @include transition($btn-transition);
0021
0022   &:hover {
0023     color: $body-color;
0024     text-decoration: if($link-hover-decoration == underline, none, null);
0025   }
0026
0027   .btn-check:focus + &,
0028   &:focus {
0029     outline: 0;
0030     box-shadow: $btn-focus-box-shadow;
0031   }
0032
0033   .btn-check:checked + &,
0034   .btn-check:active + &,
0035   &:active,
0036   &.active {
0037     @include box-shadow($btn-active-box-shadow);
0038
0039     &:focus {
0040       @include box-shadow($btn-focus-box-shadow, $btn-active-box-shadow);
0041     }
0042   }
0043
0044   &:disabled,
0045   &.disabled,
0046   fieldset:disabled & {
0047     pointer-events: none;
0048     opacity: $btn-disabled-opacity;
0049     @include box-shadow(none);
0050   }
0051 }
0052
0053
0054 //
0055 // Alternate buttons
0056 //
0057
0058 @each $color, $value in $theme-colors {
0059   .btn-#{$color} {
0060     @include button-variant($value, $value);
0061   }
0062 }
0063
0064 @each $color, $value in $theme-colors {
0065   .btn-outline-#{$color} {
0066     @include button-outline-variant($value);
0067   }
0068 }
0069
0070
0071 //
0072 // Link buttons
0073 //
0074
0075 // Make a button look and behave like a link
0076 .btn-link {
0077   font-weight: $font-weight-normal;
0078   color: $btn-link-color;
0079   text-decoration: $link-decoration;
0080
0081   &:hover {
0082     color: $btn-link-hover-color;
0083     text-decoration: $link-hover-decoration;
0084   }
0085
0086   &:focus {
0087     text-decoration: $link-hover-decoration;
0088   }
0089
0090   &:disabled,
0091   &.disabled {
0092     color: $btn-link-disabled-color;
0093   }
0094
0095   // No need for an active state here
0096 }
0097
0098
0099 //
0100 // Button Sizes
0101 //
0102
0103 .btn-lg {
0104   @include button-size($btn-padding-y-lg, $btn-padding-x-lg, $btn-font-size-lg, $btn-border-radius-lg);
0105 }
0106
0107 .btn-sm {
0108   @include button-size($btn-padding-y-sm, $btn-padding-x-sm, $btn-font-size-sm, $btn-border-radius-sm);
0109 }