From 293a3baca36fb8788fb75d331439f143f6762fc1 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Thu, 9 May 2013 15:05:06 -0700 Subject: [PATCH] More forms overhaul * Refactor the .forms-horizontal code--much simpler now and built on the Bootstrap grid system instead * Remove all the margins on form controls for simpler styling everywhere else--was overriding that way too often * Drop .help-inline, but keep .help-block * Drop the unused input grid class overrides --- docs/assets/css/bootstrap.css | 84 +++++--------------------- docs/css.html | 56 ++++++----------- less/forms.less | 110 ++++++++-------------------------- 3 files changed, 58 insertions(+), 192 deletions(-) diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css index 03a26d13d3..236256f641 100644 --- a/docs/assets/css/bootstrap.css +++ b/docs/assets/css/bootstrap.css @@ -1252,7 +1252,6 @@ input[type="color"] { display: block; min-height: 34px; padding: 6px 9px; - margin-bottom: 10px; font-size: 14px; line-height: 20px; color: #555555; @@ -1374,6 +1373,7 @@ textarea::-webkit-input-placeholder { display: block; min-height: 20px; padding-left: 20px; + margin-top: 10px; margin-bottom: 10px; vertical-align: middle; } @@ -1466,25 +1466,6 @@ input[type="color"].input-small { border-radius: 3px; } -input[class*="span"], -select[class*="span"], -textarea[class*="span"] { - float: none; - margin-right: 0; - margin-left: 0; -} - -.input-append input[class*="span"], -.input-prepend input[class*="span"] { - display: inline-block; -} - -input[class*="span"], -select[class*="span"], -textarea[class*="span"] { - height: 34px; -} - input[disabled], select[disabled], textarea[disabled], @@ -1601,20 +1582,11 @@ select:focus:invalid:focus { clear: both; } -.help-block, -.help-inline { - color: #737373; -} - .help-block { display: block; + margin-top: 5px; margin-bottom: 10px; -} - -.help-inline { - display: inline-block; - padding-left: 5px; - vertical-align: middle; + color: #737373; } .input-group { @@ -1790,47 +1762,21 @@ select:focus:invalid:focus { .form-inline .radio, .form-inline .checkbox { display: inline-block; +} + +.form-inline .radio, +.form-inline .checkbox { + margin-top: 0; margin-bottom: 0; } -@media screen and (min-width: 768px) { - .form-horizontal .control-group { - position: relative; - margin-bottom: 20px; - } - .form-horizontal .control-group:before, - .form-horizontal .control-group:after { - display: table; - content: " "; - } - .form-horizontal .control-group:after { - clear: both; - } - .form-horizontal .control-group:before, - .form-horizontal .control-group:after { - display: table; - content: " "; - } - .form-horizontal .control-group:after { - clear: both; - } - .form-horizontal .control-group input, - .form-horizontal .control-group select, - .form-horizontal .control-group textarea { - margin-bottom: 0; - } - .form-horizontal .control-group > .control-label { - float: left; - width: 160px; - padding-top: 6px; - text-align: right; - } - .form-horizontal .control-group > .controls { - margin-left: 180px; - } - .form-horizontal .form-actions { - padding-left: 180px; - } +.form-horizontal .row + .row { + margin-top: 15px; +} + +.form-horizontal .row-label { + padding-top: 6px; + text-align: right; } .btn { diff --git a/docs/css.html b/docs/css.html index 2473576e29..6d29f6ff2a 100644 --- a/docs/css.html +++ b/docs/css.html @@ -1008,7 +1008,7 @@ For example, <section> should be wrapped as inline.

Basic example

-

Individual form controls automatically receive some global styling. By default, inputs are set to width: 100%;.

+

Individual form controls automatically receive some global styling. All textual <input>, <textarea>, and <select> elements are set to width: 100%; by default.

Legend @@ -1074,23 +1074,17 @@ For example, <section> should be wrapped as inline. {% endhighlight %}

Horizontal form

-

Right align labels and float them to the left to make them appear on the same line as controls. Requires the most markup changes from a default form:

-
    -
  • Add .form-horizontal to the form
    • -
  • Wrap labels and controls in .control-group
    • -
  • Add .control-label to the label
    • -
  • Wrap any associated controls in .controls for proper alignment
    • -
+

Use Bootstrap's predefined grid classes to align labels and groups of form controls in a horizontal layout.

-
- -
+
+ +
-
- -
+
+ +
-
-
-
+
{% highlight html %}
-
- -
+
+ +
-
- -
+
+ +
-
-
-
+
@@ -1693,18 +1683,8 @@ For example, <section> should be wrapped as inline. {% endhighlight %}

Help text

-

Inline and block level support for help text that appears around form controls.

-

Inline help

- - Inline help text - -{% highlight html %} - -Inline help text -{% endhighlight %} - -

Block help

-
+

Block level help text for form controls.

+ A longer block of help text that breaks onto a new line and may extend beyond one line.
diff --git a/less/forms.less b/less/forms.less index 6162cd4f13..6b3bff7280 100644 --- a/less/forms.less +++ b/less/forms.less @@ -57,7 +57,6 @@ input[type="color"] { display: block; min-height: @input-height-base; // Make inputs at least the height of their button counterpart (base line-height + padding + border) padding: 6px 9px; - margin-bottom: 10px; font-size: @font-size-base; line-height: @line-height-base; color: @gray; @@ -172,7 +171,8 @@ textarea { .checkbox { display: block; min-height: @line-height-base; // clear the floating input if there is no label text - margin-bottom: (@line-height-base / 2); + margin-top: 10px; + margin-bottom: 10px; padding-left: 20px; vertical-align: middle; label { @@ -182,7 +182,6 @@ textarea { cursor: pointer; } } - .radio input[type="radio"], .radio-inline input[type="radio"], .checkbox input[type="checkbox"], @@ -192,7 +191,7 @@ textarea { } .radio + .radio, .checkbox + .checkbox { - margin-top: ((@line-height-base / 4) * -1); + margin-top: -5px; // Move up sibling radios or checkboxes for tighter spacing } /* @@ -255,33 +254,6 @@ input[type="color"] { } - -// GRID SIZING FOR INPUTS -// ---------------------- - -// Grid style input sizes -input[class*="span"], -select[class*="span"], -textarea[class*="span"] { - float: none; - margin-left: 0; - margin-right: 0; -} - -// Ensure input-prepend/append never wraps -.input-append input[class*="span"], -.input-prepend input[class*="span"] { - display: inline-block; -} - -input[class*="span"], -select[class*="span"], -textarea[class*="span"] { - height: @input-height-base; -} - - - // DISABLED STATE // -------------- @@ -361,20 +333,11 @@ select:focus:invalid { // HELP TEXT // --------- -.help-block, -.help-inline { - color: lighten(@text-color, 25%); // lighten the text some for contrast -} - .help-block { display: block; // account for any element using help-block - margin-bottom: (@line-height-base / 2); -} - -.help-inline { - display: inline-block; - vertical-align: middle; - padding-left: 5px; + margin-top: 5px; + margin-bottom: 10px; + color: lighten(@text-color, 25%); // lighten the text some for contrast } @@ -436,14 +399,14 @@ select:focus:invalid { background-color: @gray-lighter; border: 1px solid #ccc; - &.input-small { - padding: @padding-small; - font-size: @font-size-small; + &.input-small { + padding: @padding-small; + font-size: @font-size-small; + } + &.input-large { + padding: @padding-large; + font-size: @font-size-large; } - &.input-large { - padding: @padding-large; - font-size: @font-size-large; - } } // Reset rounded corners @@ -528,6 +491,10 @@ select:focus:invalid { .radio, .checkbox { display: inline-block; + } + .radio, + .checkbox { + margin-top: 0; margin-bottom: 0; } } @@ -535,41 +502,14 @@ select:focus:invalid { // Horizontal forms // -------------------------------------------------- +// Horizontal forms are built on grid classes. -@media screen and (min-width: @screen-tablet) { - - .form-horizontal { - - // Increase spacing between groups - .control-group { - position: relative; - margin-bottom: @line-height-base; - .clearfix(); - - input, - select, - textarea { - margin-bottom: 0; - } - } - - // Float the labels left - .control-group > .control-label { - float: left; - width: (@component-offset-horizontal - 20); - padding-top: 6px; - text-align: right; - } - - // Move over all input controls and content over - .control-group > .controls { - margin-left: @component-offset-horizontal; - } - - // Make sure form actions buttons are aligned with controls - .form-actions { - padding-left: @component-offset-horizontal; - } - +.form-horizontal { + .row + .row { + margin-top: 15px; + } + .row-label { + padding-top: 6px; + text-align: right; } }