Topic: Secondary button (.btn-secdondary) is messed up

webservices priority asked 4 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 priority answered 4 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 4 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.



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • ForumUser: Priority
  • Premium support: Yes
  • Technology: MDB Standard
  • MDB Version: MDB5 7.1.0
  • Device: All
  • Browser: All
  • OS: All
  • Provided sample code: Yes
  • Provided link: No