Simplify form validation states while enabling them to be applied to one field at a time.

2 files changed, 18 insertions, 28 deletions

diff --git a/less/forms.less b/less/forms.less
index 4abb7874a..de814a915 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 243436b18..1ab0a4eb2 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;
-  }
 }