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($border, .5);
24 box-shadow: 0 0 0 $btn-focus-width rgba($border, .5);
28 // Disabled comes first so active can properly restyle
31 color: color-yiq($background);
32 background-color: $background;
33 border-color: $border;
36 &:not(:disabled):not(.disabled):active,
37 &:not(:disabled):not(.disabled).active,
38 .show > &.dropdown-toggle {
39 color: color-yiq($active-background);
40 background-color: $active-background;
41 @if $enable-gradients {
42 background-image: none; // Remove the gradient for the pressed/active state
44 border-color: $active-border;
47 // Avoid using mixin so we can pass custom focus shadow properly
49 box-shadow: $btn-active-box-shadow, 0 0 0 $btn-focus-width rgba($border, .5);
51 box-shadow: 0 0 0 $btn-focus-width rgba($border, .5);
57 @mixin button-outline-variant($color, $color-hover: color-yiq($color), $active-background: $color, $active-border: $color) {
59 background-color: transparent;
60 background-image: none;
65 background-color: $active-background;
66 border-color: $active-border;
71 box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);
77 background-color: transparent;
80 &:not(:disabled):not(.disabled):active,
81 &:not(:disabled):not(.disabled).active,
82 .show > &.dropdown-toggle {
83 color: color-yiq($active-background);
84 background-color: $active-background;
85 border-color: $active-border;
88 // Avoid using mixin so we can pass custom focus shadow properly
89 @if $enable-shadows and $btn-active-box-shadow != none {
90 box-shadow: $btn-active-box-shadow, 0 0 0 $btn-focus-width rgba($color, .5);
92 box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);
99 @mixin button-size($padding-y, $padding-x, $font-size, $line-height, $border-radius) {
100 padding: $padding-y $padding-x;
101 font-size: $font-size;
102 line-height: $line-height;
103 // Manually declare to provide an override to the browser default
104 @if $enable-rounded {
105 border-radius: $border-radius;