.badge within .btn-primary within .panel-default>.panel-heading using wrong style

[colincameron]

I have a button inside a panel heading, and the button has a badge on it. The badge is being styled based on being inside the panel heading rather than based on being inside the button, i.e. this rule:

.panel-default>.panel-heading .badge{color:#f5f5f5;background-color:#333}

is taking precedence over this rule:

.btn-primary .badge{color:#337ab7;background-color:#fff}

This is causing my badge to look like this:

Code example here.

Of course, I can add the correct colour styling manually to the span to solve my immediate problem, but I would suggest that the styles for badges within button types are moved to later in the CSS file than the styles for badges within panel headers.

[zacechola]

This is related to discussions in issue #13686 and PR #13687.

[mdo]

We can't really scope these styles any better. If we scope them with a > selector to make things more specific and prevent this inheritance, we screw up folks' implementations where they have even a single wrapping element around those badges.

Not sure we can address this in v3, so punting for now. Holler if anyone has any ideas though, save for overriding things one more time just for buttons.