forms.scss in anjlab-bootstrap-rails-2.2.0.0

- old
+ new

@@ -79,15 +79,16 @@
 input[type="color"],
 .uneditable-input {
   display: inline-block;
   height: $baseLineHeight;
   padding: 4px 6px;
-  margin-bottom: 9px;
+  margin-bottom: $baseLineHeight / 2;
   font-size: $baseFontSize;
   line-height: $baseLineHeight;
   color: $gray;
   @include border-radius($inputBorderRadius);
+  vertical-align: middle;
 }
 
 // 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,
@@ -152,13 +153,13 @@
 }
 
 // Set the height of select and file controls to match text inputs
 select,
 input[type="file"] {
-  height: 30px; /* In IE7, the height of the select element cannot be changed by height, only font-size */
+  height: $inputHeight; /* In IE7, the height of the select element cannot be changed by height, only font-size */
   *margin-top: 4px; /* For IE7, add top margin to align select with labels */
-  line-height: 30px;
+  line-height: $inputHeight;
 }
 
 // Make select elements obey height by applying a border
 select {
   width: 220px; // default input width + 10px of padding that doesn't get applied
@@ -208,11 +209,11 @@
 
 
 // Placeholder
 // -------------------------
 
-// Placeholder text gets special styles because when browsers invalidate entire lines if it doesn’t understand a selector
+// Placeholder text gets special styles because when browsers invalidate entire lines if it doesn't understand a selector
 input,
 textarea {
   @include placeholder();
 }
 
@@ -221,17 +222,17 @@
 // -------------------
 
 // Indent the labels to position radios/checkboxes as hanging
 .radio,
 .checkbox {
-  min-height: 18px; // clear the floating input if there is no label text
-  padding-left: 18px;
+  min-height: $baseLineHeight; // clear the floating input if there is no label text
+  padding-left: 20px;
 }
 .radio input[type="radio"],
 .checkbox input[type="checkbox"] {
   float: left;
-  margin-left: -18px;
+  margin-left: -20px;
 }
 
 // Move the options list down to align with labels
 .controls > .radio:first-child,
 .controls > .checkbox:first-child {
@@ -302,13 +303,22 @@
 
 // Control row for multiple inputs per line
 .controls-row {
   @include clearfix(); // Clear the float from controls
 }
-.controls-row [class*="span"] {
-  float: left; // Float to collapse white-space for proper grid alignment
+
+// Float to collapse white-space for proper grid alignment
+.controls-row [class*="span"],
+// Redeclare the fluid grid collapse since we undo the float for inputs
+.row-fluid .controls-row [class*="span"] {
+  float: left;
 }
+// Explicity set top padding on all checkboxes/radios, not just first-child
+.controls-row .checkbox[class*="span"],
+.controls-row .radio[class*="span"] {
+  padding-top: 5px;
+}
 
 
 
 
 // DISABLED STATE
@@ -362,11 +372,12 @@
 select:focus:required:invalid {
   color: #b94a48;
   border-color: #ee5f5b;
   &:focus {
     border-color: darken(#ee5f5b, 10%);
-    @include box-shadow(0 0 6px lighten(#ee5f5b, 20%));
+    $shadow: 0 0 6px lighten(#ee5f5b, 20%);
+    @include box-shadow($shadow);
   }
 }
 
 
 
@@ -411,20 +422,27 @@
 
 // Allow us to put symbols and text within the input field for a cleaner look
 .input-append,
 .input-prepend {
   margin-bottom: 5px;
-  font-size: 0;
+  font-size: 0; // white space collapse hack
   white-space: nowrap; // Prevent span and input from separating
 
+  // Reset the white space collapse hack
   input,
   select,
+  .uneditable-input,
+  .dropdown-menu {
+    font-size: $baseFontSize;
+  }
+
+  input,
+  select,
   .uneditable-input {
     position: relative; // placed here by default so that on :focus we can place the input above the .add-on for full border and box-shadow goodness
     margin-bottom: 0; // prevent bottom margin from screwing up alignment in stacked forms
     *margin-left: 0;
-    font-size: $baseFontSize;
     vertical-align: top;
     @include border-radius(0 $inputBorderRadius $inputBorderRadius 0);
     // Make input on top when focused so blue border and shadow always show
     &:focus {
       z-index: 2;
@@ -452,41 +470,52 @@
   .active {
     background-color: lighten($green, 30);
     border-color: $green;
   }
 }
+
 .input-prepend {
   .add-on,
   .btn {
     margin-right: -1px;
   }
   .add-on:first-child,
   .btn:first-child {
+    // FYI, `.btn:first-child` accounts for a button group that's prepended
     @include border-radius($inputBorderRadius 0 0 $inputBorderRadius);
   }
 }
+
 .input-append {
   input,
   select,
   .uneditable-input {
     @include border-radius($inputBorderRadius 0 0 $inputBorderRadius);
+    + .btn-group .btn {
+      @include border-radius(0 $inputBorderRadius $inputBorderRadius 0);
+    }
   }
   .add-on,
-  .btn {
+  .btn,
+  .btn-group {
     margin-left: -1px;
   }
   .add-on:last-child,
   .btn:last-child {
     @include border-radius(0 $inputBorderRadius $inputBorderRadius 0);
   }
 }
+
 // Remove all border-radius for inputs with both prepend and append
 .input-prepend.input-append {
   input,
   select,
   .uneditable-input {
     @include border-radius(0);
+    + .btn-group .btn {
+      @include border-radius(0 $inputBorderRadius $inputBorderRadius 0);
+    }
   }
   .add-on:first-child,
   .btn:first-child {
     margin-right: -1px;
     @include border-radius($inputBorderRadius 0 0 $inputBorderRadius);
@@ -494,10 +523,14 @@
   .add-on:last-child,
   .btn:last-child {
     margin-left: -1px;
     @include border-radius(0 $inputBorderRadius $inputBorderRadius 0);
   }
+  .btn-group:first-child {
+    margin-left: 0;
+  }
 }
+
 
 
 
 // SEARCH FORM
 // -----------