contextual states

[tlindig]

Inspired by a comment from @mdo in #11731

This general idea is what I wanted to do for contextual states—the icons—since I redid all this stuff. Will try to work it into v3.1.

I would suggest a context-depending-show-class. something like this:

.show-on-default,
.show-on-success,
.show-on-danger {
  display: none;
}

.default .show-on-default {
  display: block;
}

.success .show-on-success {
  display: block;
}

.danger .show-on-danger {
  display: block;
}

I have made an example: http://jsbin.com/efExUnO/1/edit?html,css,output

It would get big benefits of simple modifier classes, how I described it here: #11794

May be it is necessary to restrict the affected level by adding some child and sibling selectors:

.danger > .show-on-danger,
.danger > * > .show-on-danger, 
.danger ~ .show-on-danger,
.danger ~ * > .show-on-danger {
  display: block;
}

or restrict it to .input-group:

.input-group.danger .show-on-danger {
  display: block;
}

There are so many ways, but which is the best?