bootstrap/mixins/_buttons.scss

0001 // Button variants
0002 //
0003 // Easily pump out default styles, as well as :hover, :focus, :active,
0004 // and disabled options for all buttons
0005
0006 @mixin button-variant(
0007   $background,
0008   $border,
0009   $color: color-contrast($background),
0010   $hover-background: if($color == $color-contrast-light, shade-color($background, 15%), tint-color($background, 15%)),
0011   $hover-border: if($color == $color-contrast-light, shade-color($border, 20%), tint-color($border, 10%)),
0012   $hover-color: color-contrast($hover-background),
0013   $active-background: if($color == $color-contrast-light, shade-color($background, 20%), tint-color($background, 20%)),
0014   $active-border: if($color == $color-contrast-light, shade-color($border, 25%), tint-color($border, 10%)),
0015   $active-color: color-contrast($active-background),
0016   $disabled-background: $background,
0017   $disabled-border: $border,
0018   $disabled-color: color-contrast($disabled-background)
0019 ) {
0020   color: $color;
0021   @include gradient-bg($background);
0022   border-color: $border;
0023   @include box-shadow($btn-box-shadow);
0024
0025   &:hover {
0026     color: $hover-color;
0027     @include gradient-bg($hover-background);
0028     border-color: $hover-border;
0029   }
0030
0031   .btn-check:focus + &,
0032   &:focus {
0033     color: $hover-color;
0034     @include gradient-bg($hover-background);
0035     border-color: $hover-border;
0036     @if $enable-shadows {
0037       @include box-shadow($btn-box-shadow, 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5));
0038     } @else {
0039       // Avoid using mixin so we can pass custom focus shadow properly
0040       box-shadow: 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5);
0041     }
0042   }
0043
0044   .btn-check:checked + &,
0045   .btn-check:active + &,
0046   &:active,
0047   &.active,
0048   .show > &.dropdown-toggle {
0049     color: $active-color;
0050     background-color: $active-background;
0051     // Remove CSS gradients if they're enabled
0052     background-image: if($enable-gradients, none, null);
0053     border-color: $active-border;
0054
0055     &:focus {
0056       @if $enable-shadows {
0057         @include box-shadow($btn-active-box-shadow, 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5));
0058       } @else {
0059         // Avoid using mixin so we can pass custom focus shadow properly
0060         box-shadow: 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), .5);
0061       }
0062     }
0063   }
0064
0065   &:disabled,
0066   &.disabled {
0067     color: $disabled-color;
0068     background-color: $disabled-background;
0069     // Remove CSS gradients if they're enabled
0070     background-image: if($enable-gradients, none, null);
0071     border-color: $disabled-border;
0072   }
0073 }
0074
0075 @mixin button-outline-variant(
0076   $color,
0077   $color-hover: color-contrast($color),
0078   $active-background: $color,
0079   $active-border: $color,
0080   $active-color: color-contrast($active-background)
0081 ) {
0082   color: $color;
0083   border-color: $color;
0084
0085   &:hover {
0086     color: $color-hover;
0087     background-color: $active-background;
0088     border-color: $active-border;
0089   }
0090
0091   .btn-check:focus + &,
0092   &:focus {
0093     box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);
0094   }
0095
0096   .btn-check:checked + &,
0097   .btn-check:active + &,
0098   &:active,
0099   &.active,
0100   &.dropdown-toggle.show {
0101     color: $active-color;
0102     background-color: $active-background;
0103     border-color: $active-border;
0104
0105     &:focus {
0106       @if $enable-shadows {
0107         @include box-shadow($btn-active-box-shadow, 0 0 0 $btn-focus-width rgba($color, .5));
0108       } @else {
0109         // Avoid using mixin so we can pass custom focus shadow properly
0110         box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);
0111       }
0112     }
0113   }
0114
0115   &:disabled,
0116   &.disabled {
0117     color: $color;
0118     background-color: transparent;
0119   }
0120 }
0121
0122 // Button sizes
0123 @mixin button-size($padding-y, $padding-x, $font-size, $border-radius) {
0124   padding: $padding-y $padding-x;
0125   @include font-size($font-size);
0126   // Manually declare to provide an override to the browser default
0127   @include border-radius($border-radius, 0);
0128 }