Topic: Secondary button (.btn-secdondary) is messed up
webservices pro premium priority asked 12 months ago
Why is the secondary button not taking on the color of $secondary in the SCSS? I found $btn-secondary-bg-tint-amount
, $btn-secondary-color-shade-amount
, and $btn-light-color-tint-amount
. I can get the color of the bg color to be set to the actual color of $secondary
but the text is also calculated of the color of $secondary
instead of using color-contrast()
to determine the color of the text.
It seems that only .btn-secondary
and .btn-light
have this weird functionality. Is there any setting in MDB for disabling this weird, built in behavior? Or am I going to have to write SCSS to fix this?
The problem is that I have two themes that are nearly identical except for some color variations. The build process uses the core theme and then adds in some custom variables. One theme sets $secondary
to a dark color and another theme sets it to a lighter color. color-contrast()
should be running on all buttons but it is obviously not for .btn-secondary
.
webservices pro premium priority answered 12 months ago
The answer from Mateusz Lazaru explains what is happening in MDB5 v7.1.0. This is an odd decision by MDB for button colors.
To fix this, here is what I've done so far. Hopefully this is useful for anyone else wanting to use the SCSS variables for $secondary
, $light
, and $dark
for buttons. I still need to get shadows working right but this at least gets colors working. Unfortunately, more work will be needed to get shadows working on .btn-secondary
.
Edit: The reason .btn-secondary
doesn't get a shadow is because in MDB's _buttons.scss
, the attribute for box-shadow
is hard coded to none
.
// Fixes MDB's use of color variables to set secondary buttons.
.btn-secondary {
@include button-variant(
$secondary,
$secondary,
color-contrast($secondary),
$btn-contextual-box-shadow #ff0000 // Not working.
);
}
// Fixes MDB's use of color variables to set light buttons.
.btn-light {
@include button-variant(
$light,
$light,
color-contrast($light),
$btn-contextual-box-shadow shade-color($light, $btn-hover-bg-tint-amount)
);
}
// Fixes MDB's use of color variables to set dark buttons.
.btn-dark {
@include button-variant(
$dark,
$dark,
color-contrast($dark),
$btn-contextual-box-shadow tint-color($dark, $btn-hover-bg-tint-amount)
);
}
Mateusz Lazaru staff answered 12 months ago
.btn-secondary
does not use $secondary
variable. Its bg colors are based on the $primary
- it is a tint made of it.
For example:
// modyfing $primary will make btn-secondary backgroung color faded red
$primary: red !default;
In this certain case, if you don't want to change primary color or want them to be unrelated, you would need to override styles for .btn-secondary
class.
To customize .btn-light
colors override these scss variables:
$light-bg-subtle: rgb(253, 236, 252) !default;
$light-text-emphasis: rgb(170, 42, 162) !default;
Keep in mind changing these variables will affect other 'light' components such as alerts, notes etc.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Pro
- Premium support: Yes
- Technology: MDB Standard
- MDB Version: MDB5 7.1.0
- Device: All
- Browser: All
- OS: All
- Provided sample code: No
- Provided link: No