Fix up some form docs styles, sizing, etc

2 files changed, 74 insertions, 75 deletions

diff --git a/scss/_forms.scss b/scss/_forms.scss
index e5d6e344a..091d733f4 100644
--- a/scss/_forms.scss
+++ b/scss/_forms.scss
@@ -111,6 +111,79 @@
 // }
 
 
+// Static form control text
+//
+// Apply class to an element to make any string of text align with labels in a
+// horizontal form layout.
+
+.form-control-static {
+  min-height: ($line-height-computed + $font-size-base);
+  // Size it appropriately next to real form controls
+  padding-top: ($padding-base-vertical + $border-width);
+  padding-bottom: ($padding-base-vertical + $border-width);
+  // Remove default margin from `p`
+  margin-bottom: 0;
+
+  &.form-control-sm,
+  &.form-control-lg {
+    padding-right: 0;
+    padding-left: 0;
+  }
+}
+
+
+// Form control sizing
+//
+// Build on `.form-control` with modifier classes to decrease or increase the
+// height and font-size of form controls.
+//
+// The `.form-group-* form-control` variations are sadly duplicated to avoid the
+// issue documented in https://github.com/twbs/bootstrap/issues/15074.
+
+.form-control-sm {
+  height: $input-height-sm;
+  padding: $padding-sm-vertical $padding-sm-horizontal;
+  font-size: $font-size-sm;
+  line-height: $line-height-sm;
+  border-radius: $input-border-radius-sm;
+}
+
+.form-control-lg {
+  height: $input-height-lg;
+  padding: $padding-lg-vertical $padding-lg-horizontal;
+  font-size: $font-size-lg;
+  line-height: $line-height-lg;
+  border-radius: $input-border-radius-lg;
+}
+
+// @include input-size('.input-sm', $input-height-sm, $padding-sm-vertical, $padding-sm-horizontal, $font-size-sm, $line-height-sm, $input-border-radius-sm);
+
+// .form-group-sm {
+//   @include input-size('.form-control', $input-height-sm, $padding-sm-vertical, $padding-sm-horizontal, $font-size-sm, $line-height-sm, $input-border-radius-sm);
+
+//   .form-control-static {
+//     height: $input-height-sm;
+//     min-height: ($line-height-computed + $font-size-sm);
+//     padding: $padding-sm-vertical $padding-sm-horizontal;
+//     font-size: $font-size-sm;
+//     line-height: $line-height-sm;
+//   }
+// }
+
+// @include input-size('.input-lg', $input-height-lg, $padding-lg-vertical, $padding-lg-horizontal, $font-size-lg, $line-height-lg, $input-border-radius-lg);
+
+// .form-group-lg {
+//   @include input-size('.form-control', $input-height-lg, $padding-lg-vertical, $padding-lg-horizontal, $font-size-lg, $line-height-lg, $input-border-radius-lg);
+
+//   .form-control-static {
+//     height: $input-height-lg;
+//     min-height: ($line-height-computed + $font-size-lg);
+//     padding: $padding-lg-vertical $padding-lg-horizontal;
+//     font-size: $font-size-lg;
+//     line-height: $line-height-lg;
+//   }
+// }
+
 // Form groups
 //
 // Designed to help with the organization and spacing of vertical forms. For
@@ -206,80 +279,6 @@ input[type="checkbox"] {
 }
 
 
-// Static form control text
-//
-// Apply class to a `p` element to make any string of text align with labels in
-// a horizontal form layout.
-
-.form-control-static {
-  min-height: ($line-height-computed + $font-size-base);
-  // Size it appropriately next to real form controls
-  padding-top: ($padding-base-vertical + 1);
-  padding-bottom: ($padding-base-vertical + 1);
-  // Remove default margin from `p`
-  margin-bottom: 0;
-
-  &.input-lg,
-  &.input-sm {
-    padding-right: 0;
-    padding-left: 0;
-  }
-}
-
-
-// Form control sizing
-//
-// Build on `.form-control` with modifier classes to decrease or increase the
-// height and font-size of form controls.
-//
-// The `.form-group-* form-control` variations are sadly duplicated to avoid the
-// issue documented in https://github.com/twbs/bootstrap/issues/15074.
-
-.form-control-sm {
-  height: $input-height-sm;
-  padding: $padding-sm-vertical $padding-sm-horizontal;
-  font-size: $font-size-sm;
-  line-height: $line-height-sm;
-  border-radius: $input-border-radius-sm;
-}
-
-.form-control-lg {
-  height: $input-height-lg;
-  padding: $padding-lg-vertical $padding-lg-horizontal;
-  font-size: $font-size-lg;
-  line-height: $line-height-lg;
-  border-radius: $input-border-radius-lg;
-}
-
-// @include input-size('.input-sm', $input-height-sm, $padding-sm-vertical, $padding-sm-horizontal, $font-size-sm, $line-height-sm, $input-border-radius-sm);
-
-// .form-group-sm {
-//   @include input-size('.form-control', $input-height-sm, $padding-sm-vertical, $padding-sm-horizontal, $font-size-sm, $line-height-sm, $input-border-radius-sm);
-
-//   .form-control-static {
-//     height: $input-height-sm;
-//     min-height: ($line-height-computed + $font-size-sm);
-//     padding: $padding-sm-vertical $padding-sm-horizontal;
-//     font-size: $font-size-sm;
-//     line-height: $line-height-sm;
-//   }
-// }
-
-// @include input-size('.input-lg', $input-height-lg, $padding-lg-vertical, $padding-lg-horizontal, $font-size-lg, $line-height-lg, $input-border-radius-lg);
-
-// .form-group-lg {
-//   @include input-size('.form-control', $input-height-lg, $padding-lg-vertical, $padding-lg-horizontal, $font-size-lg, $line-height-lg, $input-border-radius-lg);
-
-//   .form-control-static {
-//     height: $input-height-lg;
-//     min-height: ($line-height-computed + $font-size-lg);
-//     padding: $padding-lg-vertical $padding-lg-horizontal;
-//     font-size: $font-size-lg;
-//     line-height: $line-height-lg;
-//   }
-// }
-
-
 // Form control feedback states
 //
 // Apply contextual and semantic states to individual form controls.
diff --git a/scss/mixins/_forms.scss b/scss/mixins/_forms.scss
index 0c057e874..6113a390c 100644
--- a/scss/mixins/_forms.scss
+++ b/scss/mixins/_forms.scss
@@ -55,7 +55,7 @@
 @mixin form-control-focus() {
   &:focus {
     border-color: $input-border-focus;
-    outline: 0;
+    outline: none;
     $shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px $input-box-shadow-focus;
     @include box-shadow($shadow);
   }