Disabled buttons with .active are incorrectly styled by :hover styles

Created by: toby-howell

The following CSS is what is applied when a button.btn.btn-secondary.active[disabled] is hovered over:

.btn-secondary.disabled:hover, .btn-secondary:disabled:hover {
    background-color: #FFFFFF;
    border-color: #CCCCCC;
}

This overrides declarations applied by .active:

.btn-secondary.active, .btn-secondary:active, .open > .btn-secondary.dropdown-toggle {
    background-color: #E6E6E6;
    border-color: #ADADAD;
    /* ... */
}

This makes the button appear to be responsive to the user's interaction, despite it being disabled.

An example of the change needed is as follows:

.btn-secondary.active.disabled:hover, .btn-secondary.active:disabled:hover {
    background-color: #E6E6E6;
    border-color: #ADADAD;
}

• Operating system: Windows 10 Pro x64
• Browser: Chrome 54.0.2840.99 m
• Test case and workaround: https://jsbin.com/fakejeyero

Although I used .btn-secondary as an example, this affects all similarly coloured button styles, as well as other button styles, such as outline buttons (although I have not exhaustively tested other styles). This issue was encountered in Bootstrap v4.0.0-alpha.5.