3 // Easily pump out default styles, as well as :hover, :focus, :active,
4 // and disabled options for all buttons
6 @mixin button-variant($background, $border, $hover-background: darken($background, 7.5%), $hover-border: darken($border, 10%), $active-background: darken($background, 10%), $active-border: darken($border, 12.5%)) {
7 color: color-yiq($background);
8 @include gradient-bg($background);
10 @include box-shadow($btn-box-shadow);
13 color: color-yiq($hover-background);
14 @include gradient-bg($hover-background);
15 border-color: $hover-border;
20 // Avoid using mixin so we can pass custom focus shadow properly
22 box-shadow: $btn-box-shadow, 0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $border, 15%), .5);
24 box-shadow: 0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $border, 15%), .5);
28 // Disabled comes first so active can properly restyle
31 color: color-yiq($background);
32 background-color: $background;
33 border-color: $border;
34 // Remove CSS gradients if they're enabled
35 @if $enable-gradients {
36 background-image: none;
40 &:not(:disabled):not(.disabled):active,
41 &:not(:disabled):not(.disabled).active,
42 .show > &.dropdown-toggle {
43 color: color-yiq($active-background);
44 background-color: $active-background;
45 @if $enable-gradients {
46 background-image: none; // Remove the gradient for the pressed/active state
48 border-color: $active-border;
51 // Avoid using mixin so we can pass custom focus shadow properly
53 box-shadow: $btn-active-box-shadow, 0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $border, 15%), .5);
55 box-shadow: 0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $border, 15%), .5);
61 @mixin button-outline-variant($color, $color-hover: color-yiq($color), $active-background: $color, $active-border: $color) {
67 background-color: $active-background;
68 border-color: $active-border;
73 box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);
79 background-color: transparent;
82 &:not(:disabled):not(.disabled):active,
83 &:not(:disabled):not(.disabled).active,
84 .show > &.dropdown-toggle {
85 color: color-yiq($active-background);
86 background-color: $active-background;
87 border-color: $active-border;
90 // Avoid using mixin so we can pass custom focus shadow properly
91 @if $enable-shadows and $btn-active-box-shadow != none {
92 box-shadow: $btn-active-box-shadow, 0 0 0 $btn-focus-width rgba($color, .5);
94 box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);
101 @mixin button-size($padding-y, $padding-x, $font-size, $line-height, $border-radius) {
102 padding: $padding-y $padding-x;
103 font-size: $font-size;
104 line-height: $line-height;
105 // Manually declare to provide an override to the browser default
106 @if $enable-rounded {
107 border-radius: $border-radius;