From dc5c6d6be8e46e36aa8a2e1d35f6ed8c8e3cd8cb Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Wed, 26 Dec 2012 15:57:52 -0600 Subject: [PATCH] Simplify form validation states while enabling them to be applied to one field at a time. --- docs/assets/css/bootstrap.css | 96 +++++++------------------------ docs/css.html | 30 ++++------ docs/templates/pages/css.mustache | 30 ++++------ less/forms.less | 18 ++++-- less/mixins.less | 28 ++------- 5 files changed, 64 insertions(+), 138 deletions(-) diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css index fe6adf2cc3..fcc8a8c107 100644 --- a/docs/assets/css/bootstrap.css +++ b/docs/assets/css/bootstrap.css @@ -1116,117 +1116,57 @@ fieldset[disabled] input[type="checkbox"] { background-color: transparent; } -.control-group.warning .control-label, -.control-group.warning .help-block, -.control-group.warning .help-inline { +.has-warning .control-label { color: #c09853; } -.control-group.warning .checkbox, -.control-group.warning .radio, -.control-group.warning input, -.control-group.warning select, -.control-group.warning textarea { - color: #c09853; -} - -.control-group.warning input, -.control-group.warning select, -.control-group.warning textarea { +.has-warning .input-with-feedback { + padding-right: 32px; border-color: #c09853; -webkit-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.warning input:focus, -.control-group.warning select:focus, -.control-group.warning textarea:focus { +.has-warning .input-with-feedback:focus { border-color: #a47e3c; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #dbc59e; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #dbc59e; } -.control-group.warning .input-prepend .add-on, -.control-group.warning .input-append .add-on { - color: #c09853; - background-color: #fcf8e3; - border-color: #c09853; -} - -.control-group.error .control-label, -.control-group.error .help-block, -.control-group.error .help-inline { +.has-error .control-label { color: #b94a48; } -.control-group.error .checkbox, -.control-group.error .radio, -.control-group.error input, -.control-group.error select, -.control-group.error textarea { - color: #b94a48; -} - -.control-group.error input, -.control-group.error select, -.control-group.error textarea { +.has-error .input-with-feedback { + padding-right: 32px; border-color: #b94a48; -webkit-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.error input:focus, -.control-group.error select:focus, -.control-group.error textarea:focus { +.has-error .input-with-feedback:focus { border-color: #953b39; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #d59392; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #d59392; } -.control-group.error .input-prepend .add-on, -.control-group.error .input-append .add-on { - color: #b94a48; - background-color: #f2dede; - border-color: #b94a48; -} - -.control-group.success .control-label, -.control-group.success .help-block, -.control-group.success .help-inline { +.has-success .control-label { color: #468847; } -.control-group.success .checkbox, -.control-group.success .radio, -.control-group.success input, -.control-group.success select, -.control-group.success textarea { - color: #468847; -} - -.control-group.success input, -.control-group.success select, -.control-group.success textarea { +.has-success .input-with-feedback { + padding-right: 32px; border-color: #468847; -webkit-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.success input:focus, -.control-group.success select:focus, -.control-group.success textarea:focus { +.has-success .input-with-feedback:focus { border-color: #356635; -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #7aba7b; box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #7aba7b; } -.control-group.success .input-prepend .add-on, -.control-group.success .input-append .add-on { - color: #468847; - background-color: #dff0d8; - border-color: #468847; -} - input:focus:invalid, textarea:focus:invalid, select:focus:invalid { @@ -1381,7 +1321,8 @@ select:focus:invalid:focus { } .form-horizontal .control-group { - margin-bottom: 10px; + position: relative; + margin-bottom: 20px; } .form-horizontal .control-group:before, @@ -1394,10 +1335,17 @@ select:focus:invalid:focus { clear: both; } +.form-horizontal .control-group input, +.form-horizontal .control-group select, +.form-horizontal .control-group textarea, +.form-horizontal .control-group .uneditable-input { + margin-bottom: 0; +} + .form-horizontal .control-group > .control-label { float: left; width: 160px; - padding-top: 5px; + padding-top: 6px; text-align: right; } diff --git a/docs/css.html b/docs/css.html index 33dc6966df..31e745378f 100644 --- a/docs/css.html +++ b/docs/css.html @@ -1671,48 +1671,42 @@ For example, <code>&lt;section&gt;</code> should be wrapped

Bootstrap includes validation styles for error, warning, info, and success messages. To use, add the appropriate class to the surrounding .control-group.

-
+
- - Something may have gone wrong +
-
+
- - Please correct the error +
-
+
- - Woohoo! + 
-<div class="control-group warning">
+<div class="control-group has-warning">
   <label class="control-label" for="inputWarning">Input with warning</label>
   <div class="controls">
-    <input type="text" id="inputWarning">
-    <span class="help-inline">Something may have gone wrong</span>
+    <input type="text" class="input-with-feedback" id="inputWarning">
   </div>
 </div>
-<div class="control-group error">
+<div class="control-group has-error">
   <label class="control-label" for="inputError">Input with error</label>
   <div class="controls">
-    <input type="text" id="inputError">
-    <span class="help-inline">Please correct the error</span>
+    <input type="text" class="input-with-feedback" id="inputError">
   </div>
 </div>
-<div class="control-group success">
+<div class="control-group has-success">
   <label class="control-label" for="inputSuccess">Input with success</label>
   <div class="controls">
-    <input type="text" id="inputSuccess">
-    <span class="help-inline">Woohoo!</span>
+    <input type="text" class="input-with-feedback id="inputSuccess"">
   </div>
 </div>
diff --git a/docs/templates/pages/css.mustache b/docs/templates/pages/css.mustache index a72352017f..c82d48351d 100644 --- a/docs/templates/pages/css.mustache +++ b/docs/templates/pages/css.mustache @@ -1611,48 +1611,42 @@ For example, <code>&lt;section&gt;</code> should be wrapped

Bootstrap includes validation styles for error, warning, info, and success messages. To use, add the appropriate class to the surrounding .control-group.

-
+
- - Something may have gone wrong +
-
+
- - Please correct the error +
-
+
- - Woohoo! + 
-<div class="control-group warning">
+<div class="control-group has-warning">
   <label class="control-label" for="inputWarning">Input with warning</label>
   <div class="controls">
-    <input type="text" id="inputWarning">
-    <span class="help-inline">Something may have gone wrong</span>
+    <input type="text" class="input-with-feedback" id="inputWarning">
   </div>
 </div>
-<div class="control-group error">
+<div class="control-group has-error">
   <label class="control-label" for="inputError">Input with error</label>
   <div class="controls">
-    <input type="text" id="inputError">
-    <span class="help-inline">Please correct the error</span>
+    <input type="text" class="input-with-feedback" id="inputError">
   </div>
 </div>
-<div class="control-group success">
+<div class="control-group has-success">
   <label class="control-label" for="inputSuccess">Input with success</label>
   <div class="controls">
-    <input type="text" id="inputSuccess">
-    <span class="help-inline">Woohoo!</span>
+    <input type="text" class="input-with-feedback id="inputSuccess"">
   </div>
 </div>
diff --git a/less/forms.less b/less/forms.less index 4abb7874a3..de814a915a 100644 --- a/less/forms.less +++ b/less/forms.less @@ -342,15 +342,15 @@ input[type="checkbox"] { // -------------------------- // Warning -.control-group.warning { +.has-warning { .formFieldState(@state-warning-text, @state-warning-text, @state-warning-background); } // Error -.control-group.error { +.has-error { .formFieldState(@state-error-text, @state-error-text, @state-error-background); } // Success -.control-group.success { +.has-success { .formFieldState(@state-success-text, @state-success-text, @state-success-background); } @@ -523,15 +523,23 @@ select:focus:invalid { // Increase spacing between groups .control-group { - margin-bottom: @line-height-base / 2; + position: relative; + margin-bottom: @line-height-base; .clearfix(); + + input, + select, + textarea, + .uneditable-input { + margin-bottom: 0; + } } // Float the labels left .control-group > .control-label { float: left; width: @component-offset-horizontal - 20; - padding-top: 5px; + padding-top: 6px; text-align: right; } diff --git a/less/mixins.less b/less/mixins.less index 243436b18c..1ab0a4eb23 100644 --- a/less/mixins.less +++ b/less/mixins.less @@ -122,25 +122,14 @@ // FORMS // -------------------------------------------------- -// Mixin for form field states .formFieldState(@text-color: #555, @border-color: #ccc, @background-color: #f5f5f5) { - // Set the text color - .control-label, - .help-block, - .help-inline { + // Color the label text + .control-label { color: @text-color; } - // Style inputs accordingly - .checkbox, - .radio, - input, - select, - textarea { - color: @text-color; - } - input, - select, - textarea { + // Set the border and box shadow on specific inputs to match + .input-with-feedback { + padding-right: 32px; // to account for the feedback icon border-color: @border-color; .box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); // Redeclare so transitions work &:focus { @@ -149,13 +138,6 @@ .box-shadow(@shadow); } } - // Give a small background color for input-prepend/-append - .input-prepend .add-on, - .input-append .add-on { - color: @text-color; - background-color: @background-color; - border-color: @text-color; - } }