twbs / bootstrap

The most popular HTML, CSS, and JavaScript framework for developing responsive, mobile first projects on the web.
https://getbootstrap.com
MIT License
170.27k stars 78.78k forks source link

Enhance button-variant mixin to accept disable styles #26737

Closed epignosisx closed 6 years ago

epignosisx commented 6 years ago

Our styles require us that all buttons end up with the same disable style:

image image

The current implementation of the disable state is based on the button background. Each button has its own disable state that is a lighter version of the regular button background color:

image

Would you consider accepting a PR that enhances the button-variant mixin in a backward compatible way to allow for such extensibility?

This is what I have in mind:

Current:

@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%)) {

    ...
    &.disabled,
    &:disabled {
      color: color-yiq($background);
      background-color: $background;
      border-color: $border;
    }
    ...
}

Proposed:

@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%),
    $disabled-background: $background,
    $disabled-border: $border,
    $disabled-color: color-yiq($background)) {

    ...
    &.disabled,
    &:disabled {
      color: $disabled-color;
      background-color: $disabled-background;
      border-color: $disabled-border;
    }
    ...

}
mdo commented 6 years ago

No plans to change our mixins at this point. We use a slightly different approach that conflicts with this and would create a decent amount of new code.