diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css index d6b4fc38dae06c8d8f05c223c5a9d08fef13d58a..cbc25bddb7c2f08b16e20f64a8f44d18a887db73 100644 --- a/docs/assets/css/bootstrap.css +++ b/docs/assets/css/bootstrap.css @@ -1406,6 +1406,45 @@ input[type="checkbox"][readonly] { border-color: #468847; } +.control-group.info > label, +.control-group.info .help-block, +.control-group.info .help-inline { + color: #3a87ad; +} + +.control-group.info .checkbox, +.control-group.info .radio, +.control-group.info input, +.control-group.info select, +.control-group.info textarea { + color: #3a87ad; +} + +.control-group.info input, +.control-group.info select, +.control-group.info textarea { + border-color: #3a87ad; + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); + -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); +} + +.control-group.info input:focus, +.control-group.info select:focus, +.control-group.info textarea:focus { + border-color: #2d6987; + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #7ab5d3; + -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #7ab5d3; + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #7ab5d3; +} + +.control-group.info .input-prepend .add-on, +.control-group.info .input-append .add-on { + color: #3a87ad; + background-color: #d9edf7; + border-color: #3a87ad; +} + input:focus:required:invalid, textarea:focus:required:invalid, select:focus:required:invalid { diff --git a/docs/base-css.html b/docs/base-css.html index 9874bcfbb4b577b3c29794c5d43a9cffdcb7823f..576a5cfb1aeada3dbc1d1833b99e6814879cc4e9 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -1367,7 +1367,7 @@ For example, <code><section></code> should be wrapped as inlin </pre> <h3>Validation states</h3> - <p>Bootstrap includes validation styles for error, warning, and success messages. To use, add the appropriate class to the surrounding <code>.control-group</code>.</p> + <p>Bootstrap includes validation styles for error, warning, info, and success messages. To use, add the appropriate class to the surrounding <code>.control-group</code>.</p> <form class="bs-docs-example form-horizontal"> <div class="control-group warning"> @@ -1384,6 +1384,13 @@ For example, <code><section></code> should be wrapped as inlin <span class="help-inline">Please correct the error</span> </div> </div> + <div class="control-group info"> + <label class="control-label" for="inputError">Input with info</label> + <div class="controls"> + <input type="text" id="inputError"> + <span class="help-inline">Username is taken</span> + </div> + </div> <div class="control-group success"> <label class="control-label" for="inputSuccess">Input with success</label> <div class="controls"> diff --git a/docs/templates/pages/base-css.mustache b/docs/templates/pages/base-css.mustache index e6970fbc7b909e24c59e1e9b1cf4b2142792bb31..7d2fd8d55d812b460947efe23b554ada1bb30906 100644 --- a/docs/templates/pages/base-css.mustache +++ b/docs/templates/pages/base-css.mustache @@ -1304,7 +1304,7 @@ </pre> <h3>{{_i}}Validation states{{/i}}</h3> - <p>{{_i}}Bootstrap includes validation styles for error, warning, and success messages. To use, add the appropriate class to the surrounding <code>.control-group</code>.{{/i}}</p> + <p>{{_i}}Bootstrap includes validation styles for error, warning, info, and success messages. To use, add the appropriate class to the surrounding <code>.control-group</code>.{{/i}}</p> <form class="bs-docs-example form-horizontal"> <div class="control-group warning"> @@ -1321,6 +1321,13 @@ <span class="help-inline">{{_i}}Please correct the error{{/i}}</span> </div> </div> + <div class="control-group info"> + <label class="control-label" for="inputError">{{_i}}Input with info{{/i}}</label> + <div class="controls"> + <input type="text" id="inputError"> + <span class="help-inline">{{_i}}Username is taken{{/i}}</span> + </div> + </div> <div class="control-group success"> <label class="control-label" for="inputSuccess">{{_i}}Input with success{{/i}}</label> <div class="controls"> diff --git a/less/forms.less b/less/forms.less index c766f5d9c271e37ec7980e3661fb9340d1644868..2bac862062c097b5f93d286a3d14b024b825cc6a 100644 --- a/less/forms.less +++ b/less/forms.less @@ -349,6 +349,10 @@ input[type="checkbox"][readonly] { .control-group.success { .formFieldState(@successText, @successText, @successBackground); } +// Success +.control-group.info { + .formFieldState(@infoText, @infoText, @infoBackground); +} // HTML5 invalid states // Shares styles with the .control-group.error above