Improved form styles

Combining horizontal and vertical form
Wells in forms
Vertical align for checkbox/radio in label
Support for .small-labels

less/jasny/forms.less

@@ -0,0 +1,78 @@
+// Forms.less
+// General improvements on form styling
+// ------------------------------------
+
+
+// GENERAL STYLES
+// --------------
+
+form {
+  > *:last-child {
+    margin-bottom: 0;
+  }
+}
+
+label input[type="image"],
+label input[type="checkbox"],
+label input[type="radio"] {
+  vertical-align: middle;
+}
+
+
+// Smaller labels
+// --------------
+.small-labels {
+  .control-group > label {
+    width: 70px;
+  }
+  .controls {
+    margin-left: 80px;
+  }
+  .form-actions {
+    padding-left: 80px;
+  }
+}
+
+
+// Combining horizonal and vertical forms
+// --------------------------------------
+
+.form-vertical .form-horizontal {
+  .control-group > label {
+    text-align: left;
+  }
+}
+.form-horizontal .form-vertical {
+  .control-group > label {
+    float: none;
+    padding-top: 0;
+    text-align: left;
+  }
+  .controls {
+    margin-left: 0;
+  }
+  &.form-actions, .form-actions {
+    padding-left: 20px;
+  }
+}
+
+.control-group .control-group {
+  margin-bottom: 0;
+}
+
+
+// Wells in forms
+// --------------
+
+.form-horizontal .well {
+  .control-label {
+    width: 120px;
+  }
+  .controls {
+    margin-left: 140px;
+  }
+}
+
+form .well > *:last-child {
+  margin-bottom: 0;
+}

less/jasny/forms.responsive.less

@@ -0,0 +1,66 @@
+// Forms.responsive.less
+// General improvements on form styling for responsive designs
+// -----------------------------------------------------------
+
+@media (max-width: 480px) {
+  // Move over all input controls and content
+  .form-horizontal .controls,
+  .form-horizontal .well .controls,
+  .small-labels .controls {
+    margin-left: 0;
+  }
+}
+
+@media (max-width: 768px) {
+  .form-horizontal .form-actions {
+    padding-left: 18px;
+  }
+}
+
+@media (min-width: 768px) and (max-width: 979px) {
+  .form-horizontal {
+    .control-label {
+      width: 100px;
+    }
+    .controls {
+      margin-left: 110px;
+    }
+    .form-actions {
+      padding-left: 110px;
+    }
+  }
+  .form-horizontal .well {
+    .control-label {
+      width: 80px;
+    }
+    .controls {
+      margin-left: 90px;
+    }
+  }
+  
+  .small-labels {
+    .control-group > label {
+      width: 50px;
+    }
+    .controls {
+      margin-left: 60px;
+    }
+    .form-actions {
+      padding-left: 60px;
+    }
+  }
+}
+
+@media (min-width: 1200px) {
+  .small-labels {
+    .control-group > label {
+      width: 80px;
+    }
+    .controls {
+      margin-left: 100px;
+    }
+    .form-actions {
+      padding-left: 100px;
+    }
+  }
+}