diff options
| author | Mark Otto <[email protected]> | 2013-01-16 12:20:34 -0800 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2013-01-16 12:23:05 -0800 |
| commit | 992e0d922ae5c15bf9df2d65cbc6293cf203734f (patch) | |
| tree | d04f016e94931c6339dcb5deaee146d37b3d8aa4 /less | |
| parent | b6b8633542623b1d86254b6d2b653754bb2c933f (diff) | |
| download | bootstrap-992e0d922ae5c15bf9df2d65cbc6293cf203734f.tar.xz bootstrap-992e0d922ae5c15bf9df2d65cbc6293cf203734f.zip | |
Re-add and update form styles:
* Restore forms.less file
* Overhaul .radio.inline .checkbox.inline to be .radio-inline or .checkbox-inline
* Update docs to reflect changes
Diffstat (limited to 'less')
| -rw-r--r-- | less/bootstrap.less | 1 | ||||
| -rw-r--r-- | less/forms.less | 89 |
2 files changed, 53 insertions, 37 deletions
diff --git a/less/bootstrap.less b/less/bootstrap.less index 56cc462b8..9e18c4fb3 100644 --- a/less/bootstrap.less +++ b/less/bootstrap.less @@ -23,6 +23,7 @@ @import "tables.less"; +@import "forms.less"; @import "buttons.less"; // Components: common diff --git a/less/forms.less b/less/forms.less index cc7cc8a6a..781218b44 100644 --- a/less/forms.less +++ b/less/forms.less @@ -7,7 +7,7 @@ // ------------------------- form { - margin: 0 0 @line-height-base; + margin: 0; } fieldset { @@ -55,7 +55,7 @@ input[type="search"], input[type="tel"], input[type="color"], .uneditable-input { - display: inline-block; + display: block; .box-sizing(border-box); // Makes inputs behave like true block-level elements min-height: @input-height; // Make inputs at least the height of their button counterpart (base line-height + padding + border) padding: 6px 9px; @@ -67,7 +67,7 @@ input[type="color"], background-color: @input-background; border: 1px solid @input-border; border-radius: @input-border-radius; - // .box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); + .box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); .transition(~"border linear .2s, box-shadow linear .2s"); } @@ -203,18 +203,26 @@ 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; padding-left: 20px; + label { + display: inline; + margin-bottom: 0; + font-weight: normal; + } } -.radio label, -.checkbox label { - margin-bottom: 0; - font-weight: normal; -} + .radio input[type="radio"], -.checkbox input[type="checkbox"] { +.radio-inline input[type="radio"], +.checkbox input[type="checkbox"], +.checkbox-inline input[type="checkbox"] { float: left; margin-left: -20px; } +.radio + .radio, +.checkbox + .checkbox { + margin-top: (@line-height-base / 4) * -1; +} // Move the options list down to align with labels .controls > .radio:first-child, @@ -224,15 +232,18 @@ textarea { // Radios and checkboxes on same line // TODO v3: Convert .inline to .control-inline -.radio.inline, -.checkbox.inline { +.radio-inline, +.checkbox-inline { display: inline-block; padding-top: 5px; + padding-left: 20px; margin-bottom: 0; vertical-align: middle; + font-weight: normal; } -.radio.inline + .radio.inline, -.checkbox.inline + .checkbox.inline { +.radio-inline + .radio-inline, +.checkbox-inline + .checkbox-inline { + margin-top: 0; margin-left: 10px; // space out consecutive inline controls } @@ -380,7 +391,7 @@ select:focus:invalid { margin-bottom: @line-height-base; background-color: @form-actions-background; border-top: 1px solid #e5e5e5; - .clearfix(); // Adding clearfix to allow for .pull-right button containers + .clear_float(); // Adding clearfix to allow for .pull-right button containers } @@ -520,33 +531,37 @@ select:focus:invalid { // Horizontal forms // -------------------------------------------------- -.form-horizontal { - // Increase spacing between groups - .control-group { - position: relative; - margin-bottom: @line-height-base; - .clearfix(); +@media screen and (min-width: 768px) { + + .form-horizontal { - input, - select, - textarea, - .uneditable-input { - margin-bottom: 0; + // Increase spacing between groups + .control-group { + position: relative; + margin-bottom: @line-height-base; + .clear_float(); + + input, + select, + textarea, + .uneditable-input { + margin-bottom: 0; + } } - } - // Float the labels left - .control-group > .control-label { - float: left; - width: @component-offset-horizontal - 20; - padding-top: 6px; - text-align: right; - } + // 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; - } + // Move over all input controls and content over + .control-group > .controls { + margin-left: @component-offset-horizontal; + } + } } |
