Updating Bootstrap to v2.0.1

css/less/forms.less

@@ -28,6 +28,12 @@ legend {
   color: @grayDark;
   border: 0;
   border-bottom: 1px solid #eee;
+
+  // Small
+  small {
+    font-size: @baseLineHeight * .75;
+    color: @grayLight;
+  }
 }
 
 // Set font for forms
@@ -36,7 +42,13 @@ input,
 button,
 select,
 textarea {
-  #font > .sans-serif(@baseFontSize,normal,@baseLineHeight);
+  #font > .shorthand(@baseFontSize,normal,@baseLineHeight); // Set size, weight, line-height here
+}
+input,
+button,
+select,
+textarea {
+  #font > #family > .sans-serif(); // And only set font-family here for those that need it (note the missing label element)
 }
 
 // Identify controls by their labels
@@ -84,13 +96,17 @@ input[type="radio"] {
   margin: 3px 0;
   *margin-top: 0; /* IE7 */
   line-height: normal;
-  border: 0;
   cursor: pointer;
   .border-radius(0);
+  border: 0 \9; /* IE9 and down */
+}
+input[type="image"] {
+  border: 0;
 }
 
 // Reset the file input to browser defaults
 input[type="file"] {
+  width: auto;
   padding: initial;
   line-height: initial;
   border: initial;
@@ -115,6 +131,11 @@ input[type="file"] {
   line-height: 28px;
 }
 
+// Reset line-height for IE
+input[type="file"] {
+  line-height: 18px \9;
+}
+
 // Chrome on Linux and Mobile Safari need background-color
 select {
   width: 220px; // default input width + 10px of padding that doesn't get applied
@@ -165,9 +186,11 @@ input[type="hidden"] {
 }
 
 // Radios and checkboxes on same line
+// TODO v3: Convert .inline to .control-inline
 .radio.inline,
 .checkbox.inline {
   display: inline-block;
+  padding-top: 5px;
   margin-bottom: 0;
   vertical-align: middle;
 }
@@ -175,11 +198,6 @@ input[type="hidden"] {
 .checkbox.inline + .checkbox.inline {
   margin-left: 10px; // space out consecutive inline controls
 }
-// But don't forget to remove their padding on first-child
-.controls > .radio.inline:first-child,
-.controls > .checkbox.inline:first-child {
-  padding-top: 0;
-}
 
 
 
@@ -198,9 +216,10 @@ textarea:focus {
   @shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6);
   .box-shadow(@shadow);
   outline: 0;
-  outline: thin dotted \9; /* IE6-8 */
+  outline: thin dotted \9; /* IE6-9 */
 }
 input[type="file"]:focus,
+input[type="radio"]:focus,
 input[type="checkbox"]:focus,
 select:focus {
   .box-shadow(none); // override for file inputs
@@ -260,33 +279,6 @@ textarea[readonly] {
 // FORM FIELD FEEDBACK STATES
 // --------------------------
 
-// Mixin for form field states
-.formFieldState(@textColor: #555, @borderColor: #ccc, @backgroundColor: #f5f5f5) {
-  // Set the text color
-  > label,
-  .help-block,
-  .help-inline {
-    color: @textColor;
-  }
-  // Style inputs accordingly
-  input,
-  select,
-  textarea {
-    color: @textColor;
-    border-color: @borderColor;
-    &:focus {
-      border-color: darken(@borderColor, 10%);
-      .box-shadow(0 0 6px lighten(@borderColor, 20%));
-    }
-  }
-  // Give a small background color for input-prepend/-append
-  .input-prepend .add-on,
-  .input-append .add-on {
-    color: @textColor;
-    background-color: @backgroundColor;
-    border-color: @textColor;
-  }
-}
 // Warning
 .control-group.warning {
   .formFieldState(@warningText, @warningText, @warningBackground);
@@ -344,6 +336,7 @@ select:focus:required:invalid {
 // ---------
 
 .help-block {
+  display: block; // account for any element using help-block
   margin-top: 5px;
   margin-bottom: 0;
   color: @grayLight;
@@ -412,6 +405,7 @@ select:focus:required:invalid {
     .border-radius(3px 0 0 3px);
   }
   .uneditable-input {
+    border-left-color: #eee;
     border-right-color: #ccc;    
   }
   .add-on {
@@ -461,6 +455,10 @@ select:focus:required:invalid {
     display: inline-block;
     margin-bottom: 0;
   }
+  // Re-hide hidden elements due to specifity
+  .hide {
+    display: none;
+  }
 }
 .form-search label,
 .form-inline label,
@@ -477,28 +475,37 @@ select:focus:required:invalid {
 .form-inline .input-prepend .add-on {
   vertical-align: middle;
 }
+// Inline checkbox/radio labels
+.form-search .radio,
+.form-inline .radio,
+.form-search .checkbox,
+.form-inline .checkbox {
+  margin-bottom: 0;
+  vertical-align: middle;
+}
 
 // Margin to space out fieldsets
 .control-group {
   margin-bottom: @baseLineHeight / 2;
 }
 
+// Legend collapses margin, so next element is responsible for spacing
+legend + .control-group {
+  margin-top: @baseLineHeight;
+  -webkit-margin-top-collapse: separate;
+}
+
 // Horizontal-specific styles
 // --------------------------
 
 .form-horizontal {
-  // Legend collapses margin, so we're relegated to padding
-  legend + .control-group {
-    margin-top: @baseLineHeight;
-    -webkit-margin-top-collapse: separate;
-  }
   // Increase spacing between groups
   .control-group {
     margin-bottom: @baseLineHeight;
     .clearfix();
   }
   // Float the labels left
-  .control-group > label {
+  .control-label {
     float: left;
     width: 140px;
     padding-top: 5px;