Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

contextual states #11836

Closed
tlindig opened this issue Dec 11, 2013 · 0 comments
Closed

contextual states #11836

tlindig opened this issue Dec 11, 2013 · 0 comments
Labels
css feature
Milestone
v3.1.0

Comments

@tlindig
Copy link
Contributor

tlindig commented Dec 11, 2013

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?
@mdo mdo closed this as completed in 2979e4b Dec 16, 2013
This was referenced Dec 16, 2013
Closed
Closed
stempler pushed a commit to stempler/bootstrap that referenced this issue Apr 11, 2014
@mdo
(less) Add new form feedback states, clean up existing form styles
6ca5be0 
New stuff:

* Adds `.has-feedback` and `.form-control-feedback` to show icon-based
form feedback to users. Fixes twbs#11836.
* Removes the `width: 1em` on `.glyphicon` because it makes it
impractical to resize the width of all icons, even if they’re not
“empty” (e.g., a simple `.glyphicon { width: 30px; }` wouldn’t work,
nor would a class preceeded by a parent class.

Clean up:

* Sets `width: auto;` on all `.form-control`s within inline forms.
* Removes all the inline `select` menu `width` styles because all
inputs are now `auto`.
* Update form states docs to separate out sections better.
stempler pushed a commit to stempler/bootstrap that referenced this issue Nov 4, 2014
@mdo
(less) Add new form feedback states, clean up existing form styles
5dd4290 
New stuff:

* Adds `.has-feedback` and `.form-control-feedback` to show icon-based
form feedback to users. Fixes twbs#11836.
* Removes the `width: 1em` on `.glyphicon` because it makes it
impractical to resize the width of all icons, even if they’re not
“empty” (e.g., a simple `.glyphicon { width: 30px; }` wouldn’t work,
nor would a class preceeded by a parent class.

Clean up:

* Sets `width: auto;` on all `.form-control`s within inline forms.
* Removes all the inline `select` menu `width` styles because all
inputs are now `auto`.
* Update form states docs to separate out sections better.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
css feature
Projects
None yet
Milestone
v3.1.0
Development

No branches or pull requests
1 participant
@tlindig