mirror of
https://github.com/jasny/bootstrap.git
synced 2026-02-04 11:05:01 -05:00
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:
1
less/bootstrap.less
vendored
1
less/bootstrap.less
vendored
@@ -23,6 +23,7 @@
|
||||
|
||||
|
||||
@import "tables.less";
|
||||
@import "forms.less";
|
||||
@import "buttons.less";
|
||||
|
||||
// Components: common
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user