forms.scss in anjlab-bootstrap-rails-2.1.1.0

- old
+ new

@@ -89,12 +89,13 @@
 }
 
 // Reset appearance properties for textual inputs and textarea
 // Declare width for legacy (can't be on input[type=*] selectors or it's too specific)
 input,
-textarea {
-  width: 210px;
+textarea,
+.uneditable-input {
+  width: 206px; // plus 12px padding and 2px border
 }
 // Reset height since textareas have rows
 textarea {
   height: auto;
 }
@@ -159,11 +160,11 @@
 }
 
 // Make select elements obey height by applying a border
 select {
   width: 220px; // default input width + 10px of padding that doesn't get applied
-  border: 1px solid #bbb;
+  border: 1px solid $inputBorder;
   background-color: $inputBackground; // Chrome on Linux and Mobile Safari need background-color
 }
 
 // Make multiple select elements height not fixed
 select[multiple],
@@ -207,11 +208,11 @@
 
 
 // Placeholder
 // -------------------------
 
-// Placeholder text gets special styles; can't be bundled together though for some reason
+// Placeholder text gets special styles because when browsers invalidate entire lines if it doesn’t understand a selector
 input,
 textarea {
   @include placeholder();
 }
 
@@ -347,10 +348,14 @@
 }
 // Success
 .control-group.success {
   @include form-field-state($successText, $successText, $successBackground);
 }
+// Success
+.control-group.info {
+  @include form-field-state($infoText, $infoText, $infoBackground);
+}
 
 // HTML5 invalid states
 // Shares styles with the .control-group.error above
 input:focus:required:invalid,
 textarea:focus:required:invalid,
@@ -439,11 +444,10 @@
     background-color: $grayLighter;
     border: 1px solid #ccc;
   }
   .add-on,
   .btn {
-    margin-left: -1px;
     vertical-align: top;
     @include border-radius(0);
   }
   .active {
     background-color: lighten($green, 30);
@@ -464,10 +468,14 @@
   input,
   select,
   .uneditable-input {
     @include border-radius($inputBorderRadius 0 0 $inputBorderRadius);
   }
+  .add-on,
+  .btn {
+    margin-left: -1px;
+  }
   .add-on:last-child,
   .btn:last-child {
     @include border-radius(0 $inputBorderRadius $inputBorderRadius 0);
   }
 }
@@ -508,20 +516,20 @@
 .form-search .input-append .search-query,
 .form-search .input-prepend .search-query {
   @include border-radius(0); // Override due to specificity
 }
 .form-search .input-append .search-query {
-  @include border-radius(14px 0 0 14px)
+  @include border-radius(14px 0 0 14px);
 }
 .form-search .input-append .btn {
-  @include border-radius(0 14px 14px 0)
+  @include border-radius(0 14px 14px 0);
 }
 .form-search .input-prepend .search-query {
-  @include border-radius(0 14px 14px 0)
+  @include border-radius(0 14px 14px 0);
 }
 .form-search .input-prepend .btn {
-  @include border-radius(14px 0 0 14px)
+  @include border-radius(14px 0 0 14px);
 }
 
 
 
 
@@ -605,31 +613,38 @@
     @include clearfix();
   }
   // Float the labels left
   .control-label {
     float: left;
-    width: 140px;
+    width: $horizontalComponentOffset - 20;
     padding-top: 5px;
     text-align: right;
   }
   // Move over all input controls and content
   .controls {
     // Super jank IE7 fix to ensure the inputs in .input-append and input-prepend
     // don't inherit the margin of the parent, in this case .controls
     *display: inline-block;
     *padding-left: 20px;
-    margin-left: 160px;
+    margin-left: $horizontalComponentOffset;
     *margin-left: 0;
     &:first-child {
-      *padding-left: 160px;
+      *padding-left: $horizontalComponentOffset;
     }
   }
   // Remove bottom margin on block level help text since that's accounted for on .control-group
   .help-block {
-    margin-top: $baseLineHeight / 2;
     margin-bottom: 0;
   }
+  // And apply it only to .help-block instances that follow a form control
+  input,
+  select,
+  textarea {
+    + .help-block {
+      margin-top: $baseLineHeight / 2;
+    }
+  }
   // Move over buttons in .form-actions to align with .controls
   .form-actions {
-    padding-left: 160px;
+    padding-left: $horizontalComponentOffset;
   }
 }