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 color: color-yiq($hover-background);
21 @include gradient-bg($hover-background);
22 border-color: $hover-border;
24 @include box-shadow($btn-box-shadow, 0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $border, 15%), .5));
26 // Avoid using mixin so we can pass custom focus shadow properly
27 box-shadow: 0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $border, 15%), .5);
31 // Disabled comes first so active can properly restyle
34 color: color-yiq($background);
35 background-color: $background;
36 border-color: $border;
37 // Remove CSS gradients if they're enabled
38 @if $enable-gradients {
39 background-image: none;
43 &:not(:disabled):not(.disabled):active,
44 &:not(:disabled):not(.disabled).active,
45 .show > &.dropdown-toggle {
46 color: color-yiq($active-background);
47 background-color: $active-background;
48 @if $enable-gradients {
49 background-image: none; // Remove the gradient for the pressed/active state
51 border-color: $active-border;
54 @if $enable-shadows and $btn-active-box-shadow != none {
55 @include box-shadow($btn-active-box-shadow, 0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $border, 15%), .5));
57 // Avoid using mixin so we can pass custom focus shadow properly
58 box-shadow: 0 0 0 $btn-focus-width rgba(mix(color-yiq($background), $border, 15%), .5);
64 @mixin button-outline-variant($color, $color-hover: color-yiq($color), $active-background: $color, $active-border: $color) {
70 background-color: $active-background;
71 border-color: $active-border;
76 box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);
82 background-color: transparent;
85 &:not(:disabled):not(.disabled):active,
86 &:not(:disabled):not(.disabled).active,
87 .show > &.dropdown-toggle {
88 color: color-yiq($active-background);
89 background-color: $active-background;
90 border-color: $active-border;
93 @if $enable-shadows and $btn-active-box-shadow != none {
94 @include box-shadow($btn-active-box-shadow, 0 0 0 $btn-focus-width rgba($color, .5));
96 // Avoid using mixin so we can pass custom focus shadow properly
97 box-shadow: 0 0 0 $btn-focus-width rgba($color, .5);
104 @mixin button-size($padding-y, $padding-x, $font-size, $line-height, $border-radius) {
105 padding: $padding-y $padding-x;
106 @include font-size($font-size);
107 line-height: $line-height;
108 // Manually declare to provide an override to the browser default
109 @include border-radius($border-radius, 0);