mirror_css/bootstrap
1
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2025-08-28 07:39:57 +02:00
Code Issues Releases Wiki Activity

Add new form feedback states, clean up existing form styles

Browse Source 
New stuff:

* Adds `.has-feedback` and `.form-control-feedback` to show icon-based
form feedback to users. Fixes #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.
This commit is contained in:
Mark Otto
2013-12-15 17:15:09 -08:00
parent d9345ff7d5
commit 2979e4bcea
7 changed files with 184 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
dist/css/bootstrap.css vendored
View File

@@ -1783,6 +1783,22 @@ select.input-lg {
textarea.input-lg {
height: auto;
}
.has-feedback {
position: relative;
}
.has-feedback .form-control {
padding-right: 42.5px;
}
.has-feedback .form-control-feedback {
position: absolute;
top: 25px;
right: 0;
display: block;
width: 34px;
height: 34px;
line-height: 34px;
text-align: center;
}
.has-warning .help-block,
.has-warning .control-label,
.has-warning .radio,
@@ -1806,6 +1822,9 @@ textarea.input-lg {
background-color: #fcf8e3;
border-color: #8a6d3b;
}
.has-warning .form-control-feedback {
color: #8a6d3b;
}
.has-error .help-block,
.has-error .control-label,
.has-error .radio,
@@ -1829,6 +1848,9 @@ textarea.input-lg {
background-color: #f2dede;
border-color: #a94442;
}
.has-error .form-control-feedback {
color: #a94442;
}
.has-success .help-block,
.has-success .control-label,
.has-success .radio,
@@ -1852,6 +1874,9 @@ textarea.input-lg {
background-color: #dff0d8;
border-color: #3c763d;
}
.has-success .form-control-feedback {
color: #3c763d;
}
.form-control-static {
margin-bottom: 0;
}
@@ -1869,13 +1894,12 @@ textarea.input-lg {
}
.form-inline .form-control {
display: inline-block;
width: auto;
vertical-align: middle;
}
.form-inline select.form-control {
width: auto;
}
.form-inline > select.form-control {
width: auto;
.form-inline .control-label {
margin-bottom: 0;
vertical-align: middle;
}
.form-inline .radio,
.form-inline .checkbox {
@@ -1890,6 +1914,9 @@ textarea.input-lg {
float: none;
margin-left: 0;
}
.form-inline .has-feedback .form-control-feedback {
top: 0;
}
}
.form-horizontal .control-label,
.form-horizontal .radio,
@@ -1916,6 +1943,10 @@ textarea.input-lg {
text-align: right;
}
}
.form-horizontal .has-feedback .form-control-feedback {
top: 0;
right: 15px;
}
.btn {
display: inline-block;
padding: 6px 12px;
@@ -2311,9 +2342,6 @@ input[type="button"].btn-block {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.glyphicon:empty {
width: 1em;
}
.glyphicon-asterisk:before {
content: "\2a";
}
@@ -3783,13 +3811,12 @@ textarea.input-group-sm > .input-group-btn > .btn {
}
.navbar-form .form-control {
display: inline-block;
width: auto;
vertical-align: middle;
}
.navbar-form select.form-control {
width: auto;
}
.navbar-form > select.form-control {
width: auto;
.navbar-form .control-label {
margin-bottom: 0;
vertical-align: middle;
}
.navbar-form .radio,
.navbar-form .checkbox {
@@ -3804,6 +3831,9 @@ textarea.input-group-sm > .input-group-btn > .btn {
float: none;
margin-left: 0;
}
.navbar-form .has-feedback .form-control-feedback {
top: 0;
}
}
@media (max-width: 767px) {
.navbar-form .form-group {