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
This commit is contained in:
Mark Otto
2013-01-16 12:20:34 -08:00
parent b6b8633542
commit 992e0d922a
6 changed files with 650 additions and 52 deletions

1
less/bootstrap.less vendored
View File

@@ -23,6 +23,7 @@
@import "tables.less";
@import "forms.less";
@import "buttons.less";
// Components: common

View File

@@ -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) {
input,
select,
textarea,
.uneditable-input {
margin-bottom: 0;
.form-horizontal {
// 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;
}
}
}