Named as button-variant(), the mixin responsible for creating different color states for buttons in CSS is located in bootstrap/scss/mixins.
This particular SASS mixin has the ability to handle custom colors for .btn hover and active states through various parameters...
@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%)
) {
//...
}
However, it's worth noting that the hover and active parameters are set as defaults using the SASS color darken() function to calculate the colors based on the passed $theme-colors value automatically.
As a result, relying solely on $theme-colors becomes ineffective in managing button state colors.
To customize the colors for the active and hover states of .btn while also minimizing compiled CSS output and avoiding duplicate selectors, there are a few approaches you can take.
Simplest Method
Refer to the following SCSS code which deals with importing individual Bootstrap vendors and appropriately handling custom variables and map removals to ensure the correct compilation and usage of variables by Bootstrap.
Follow the comments within the SCSS code to understand the process...
// import initial bootstrap vendors
@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/mixins";
//... omitted for brevity ...//
By emptying the $theme-colors map, Bootstrap will no longer compile loops that rely on $theme-colors since it's now empty.
You can manually utilize the button-variant() mixin within any .btn-* selector to create customized buttons without bloating the compiled output with unnecessary CSS declarations.
This method is straightforward as it allows you to specify any color for the button-variant() parameters.
.btn-primary {
@include button-variant(
// customization goes here
);
}
.btn-secondary {
@include button-variant(
// customization goes here
);
}
Advanced Method
Reintroduce the $theme-colors and alter the @include button-variant() in mixins.scss using the previous code as reference.
Before proceeding, remove the custom button selectors from the aforementioned code.
This approach is more complex as it involves controlling hover and active state colors precisely by modifying how @include button-variant() handles the colors.
One potential solution is to reintegrate $theme-colors before root.scss, right after the array declaration of $colors.
$theme-colors: (
"primary": $new-color-1,
"secondary": $new-color-2
);
Create an overriding button mixin to manage all button variant calls effectively.
Insert this modified button-variant mixin after
@import "~bootstrap/scss/mixins";
and prior to the
map-removals declaration in a file named
_mixins.scss which can be imported neatly into your project.
You can further organize all custom mixins for the project under "mixins".
Adjust the parameters of the custom @mixin button-variant() to accommodate the passed $theme-colors.
// Customizations made to params in button-variant() mixin below
// Default mixin params commented out below
// $background
// $border
// $hover-background: darken($background, 7.5%)
// $hover-border: darken($border, 10%)
// $active-background: darken($background, 10%)
// $active-border: darken($border, 12.5%)
@mixin button-variant(
$background,
$border,
$hover-background: lighten($background, 10%),
$hover-border: lighten($border, 10%),
$active-background: lighten($background, 2.5%),
$active-border: lighten($border, 2.5%)
) {
// Mixin content goes here
}