fix(component): forms

message for input error
black label for all inputs
10 px spacing between label and input
no padding for vertical form labels

docs-orange/_includes/boostwatch/forms.html

@@ -151,6 +151,7 @@ <h2 id="forms">Forms</h2>
           <div class="form-group has-danger">
               <label class="form-control-label" for="inputError">Input error</label>
               <input class="form-control" id="inputError" type="text">
+              <span class="form-control-message">This is an error message</span>
           </div>
 
           <div class="form-group has-success">

scss/_o-forms.scss

@@ -0,0 +1,34 @@
+//
+//  Orange forms
+//
+
+.form-group {
+
+  &.row {
+    .form-control-label {
+      padding: .625rem;
+    }
+  }
+
+  .form-control-label {
+    padding: .625rem 0;
+  }
+
+  &.has-danger,
+  &.has-warning,
+  &.has-success {
+      .form-control-label {
+        color: #000;
+      }
+  }
+
+  &.has-danger {
+    .form-control-message {
+      color: $brand-danger;
+      padding: .625rem 0;
+      display: inline-block;
+      font-size: $font-size-sm;
+      font-weight: bold;
+    }
+  }
+}

scss/bootstrap.scss

@@ -54,6 +54,7 @@
 
 // boosted mod
 @import "o-buttons";
+@import "o-forms";
 @import "o-helvetica";
 @import "o-iconOrange";
 @import "o-bullet_points";