diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css index 74e99c75cd..c30443f795 100644 --- a/docs/assets/css/bootstrap.css +++ b/docs/assets/css/bootstrap.css @@ -904,6 +904,585 @@ table th[class*="span"] { background-color: #c4e3f3; } +form { + margin: 0; +} + +fieldset { + padding: 0; + margin: 0; + border: 0; +} + +legend { + display: block; + width: 100%; + padding: 0; + margin-bottom: 20px; + font-size: 21px; + line-height: 40px; + color: #333333; + border: 0; + border-bottom: 1px solid #e5e5e5; +} + +label { + display: inline-block; + margin-bottom: 5px; + font-weight: bold; +} + +select, +textarea, +input[type="text"], +input[type="password"], +input[type="datetime"], +input[type="datetime-local"], +input[type="date"], +input[type="month"], +input[type="time"], +input[type="week"], +input[type="number"], +input[type="email"], +input[type="url"], +input[type="search"], +input[type="tel"], +input[type="color"], +.uneditable-input { + display: block; + min-height: 34px; + padding: 6px 9px; + margin-bottom: 10px; + font-size: 14px; + line-height: 20px; + color: #555555; + vertical-align: middle; + background-color: #ffffff; + border: 1px solid #cccccc; + border-radius: 4px; + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + -webkit-transition: border linear 0.2s, box-shadow linear 0.2s; + -moz-transition: border linear 0.2s, box-shadow linear 0.2s; + -o-transition: border linear 0.2s, box-shadow linear 0.2s; + transition: border linear 0.2s, box-shadow linear 0.2s; +} + +input, +select, +textarea, +.uneditable-input { + width: 100%; +} + +input[type="file"], +input[type="image"], +input[type="submit"], +input[type="reset"], +input[type="button"], +input[type="radio"], +input[type="checkbox"] { + width: auto; +} + +textarea { + height: auto; +} + +textarea:focus, +input[type="text"]:focus, +input[type="password"]:focus, +input[type="datetime"]:focus, +input[type="datetime-local"]:focus, +input[type="date"]:focus, +input[type="month"]:focus, +input[type="time"]:focus, +input[type="week"]:focus, +input[type="number"]:focus, +input[type="email"]:focus, +input[type="url"]:focus, +input[type="search"]:focus, +input[type="tel"]:focus, +input[type="color"]:focus, +.uneditable-input:focus { + border-color: rgba(82, 168, 236, 0.8); + outline: 0; + outline: thin dotted \9; + /* IE6-9 */ + + -webkit-box-shadow: 0 0 8px rgba(82, 168, 236, 0.6); + box-shadow: 0 0 8px rgba(82, 168, 236, 0.6); +} + +input[type="radio"], +input[type="checkbox"] { + margin: 4px 0 0; + margin-top: 1px \9; + /* IE8-9 */ + + line-height: normal; +} + +select, +input[type="file"] { + height: 34px; + /* In IE7, the height of the select element cannot be changed by height, only font-size. TODO: Check if this is still needed when dropping IE7 support */ + + line-height: 34px; +} + +select { + border: 1px solid #cccccc; +} + +select[multiple], +select[size] { + height: auto; +} + +select:focus, +input[type="file"]:focus, +input[type="radio"]:focus, +input[type="checkbox"]:focus { + outline: thin dotted #333; + outline: 5px auto -webkit-focus-ring-color; + outline-offset: -2px; +} + +.uneditable-input, +.uneditable-textarea { + color: #999999; + cursor: not-allowed; + background-color: #fcfcfc; + border-color: #cccccc; + -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.025); + box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.025); +} + +.uneditable-input { + overflow: hidden; + white-space: nowrap; +} + +.uneditable-textarea { + width: auto; + height: auto; +} + +input:-moz-placeholder, +textarea:-moz-placeholder { + color: #999999; +} + +input:-ms-input-placeholder, +textarea:-ms-input-placeholder { + color: #999999; +} + +input::-webkit-input-placeholder, +textarea::-webkit-input-placeholder { + color: #999999; +} + +.radio, +.checkbox { + display: block; + min-height: 20px; + padding-left: 20px; + margin-bottom: 10px; +} + +.radio label, +.checkbox label { + display: inline; + margin-bottom: 0; + font-weight: normal; +} + +.radio input[type="radio"], +.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: -5px; +} + +.controls > .radio:first-child, +.controls > .checkbox:first-child { + padding-top: 5px; +} + +.radio-inline, +.checkbox-inline { + display: inline-block; + padding-top: 5px; + padding-left: 20px; + margin-bottom: 0; + font-weight: normal; + vertical-align: middle; +} + +.radio-inline + .radio-inline, +.checkbox-inline + .checkbox-inline { + margin-top: 0; + margin-left: 10px; +} + +select.input-large, +textarea.input-large, +input[type="text"].input-large, +input[type="password"].input-large, +input[type="datetime"].input-large, +input[type="datetime-local"].input-large, +input[type="date"].input-large, +input[type="month"].input-large, +input[type="time"].input-large, +input[type="week"].input-large, +input[type="number"].input-large, +input[type="email"].input-large, +input[type="url"].input-large, +input[type="search"].input-large, +input[type="tel"].input-large, +input[type="color"].input-large, +.uneditable-input.input-large { + padding: 11px 19px; + padding-right: 14px; + padding-left: 14px; + font-size: 17.5px; + border-radius: 6px; +} + +select.input-small, +textarea.input-small, +input[type="text"].input-small, +input[type="password"].input-small, +input[type="datetime"].input-small, +input[type="datetime-local"].input-small, +input[type="date"].input-small, +input[type="month"].input-small, +input[type="time"].input-small, +input[type="week"].input-small, +input[type="number"].input-small, +input[type="email"].input-small, +input[type="url"].input-small, +input[type="search"].input-small, +input[type="tel"].input-small, +input[type="color"].input-small, +.uneditable-input.input-small { + padding: 2px 10px; + font-size: 11.9px; + border-radius: 3px; +} + +select.input-mini, +textarea.input-mini, +input[type="text"].input-mini, +input[type="password"].input-mini, +input[type="datetime"].input-mini, +input[type="datetime-local"].input-mini, +input[type="date"].input-mini, +input[type="month"].input-mini, +input[type="time"].input-mini, +input[type="week"].input-mini, +input[type="number"].input-mini, +input[type="email"].input-mini, +input[type="url"].input-mini, +input[type="search"].input-mini, +input[type="tel"].input-mini, +input[type="color"].input-mini, +.uneditable-input.input-mini { + padding: 0 6px; + font-size: 10.5px; + border-radius: 3px; +} + +input[class*="span"], +select[class*="span"], +textarea[class*="span"], +.uneditable-input[class*="span"] { + float: none; + margin-right: 0; + margin-left: 0; +} + +.input-append input[class*="span"], +.input-append .uneditable-input[class*="span"], +.input-prepend input[class*="span"], +.input-prepend .uneditable-input[class*="span"] { + display: inline-block; +} + +input[class*="span"], +select[class*="span"], +textarea[class*="span"], +.uneditable-input[class*="span"] { + height: 34px; +} + +input[disabled], +select[disabled], +textarea[disabled], +input[readonly], +select[readonly], +textarea[readonly], +fieldset[disabled] input, +fieldset[disabled] select, +fieldset[disabled] textarea { + cursor: not-allowed; + background-color: #eeeeee; +} + +input[type="radio"][disabled], +input[type="checkbox"][disabled], +input[type="radio"][readonly], +input[type="checkbox"][readonly], +fieldset[disabled] input[type="radio"], +fieldset[disabled] input[type="checkbox"] { + background-color: transparent; +} + +.has-warning .control-label { + color: #c09853; +} + +.has-warning .input-with-feedback { + padding-right: 32px; + border-color: #c09853; + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); +} + +.has-warning .input-with-feedback:focus { + border-color: #a47e3c; + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #dbc59e; + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #dbc59e; +} + +.has-error .control-label { + color: #b94a48; +} + +.has-error .input-with-feedback { + padding-right: 32px; + border-color: #b94a48; + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); +} + +.has-error .input-with-feedback:focus { + border-color: #953b39; + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #d59392; + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #d59392; +} + +.has-success .control-label { + color: #468847; +} + +.has-success .input-with-feedback { + padding-right: 32px; + border-color: #468847; + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); +} + +.has-success .input-with-feedback:focus { + border-color: #356635; + -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #7aba7b; + box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px #7aba7b; +} + +input:focus:invalid, +textarea:focus:invalid, +select:focus:invalid { + color: #b94a48; + border-color: #ee5f5b; +} + +input:focus:invalid:focus, +textarea:focus:invalid:focus, +select:focus:invalid:focus { + border-color: #e9322d; + -webkit-box-shadow: 0 0 6px #f8b9b7; + box-shadow: 0 0 6px #f8b9b7; +} + +.form-actions { + padding: 19px 20px 20px; + margin-top: 20px; + margin-bottom: 20px; + background-color: #f5f5f5; + border-top: 1px solid #e5e5e5; +} + +.form-actions:before, +.form-actions:after { + display: table; + content: " "; +} + +.form-actions:after { + clear: both; +} + +.help-block, +.help-inline { + color: #737373; +} + +.help-block { + display: block; + margin-bottom: 10px; +} + +.help-inline { + display: inline-block; + padding-left: 5px; + vertical-align: middle; +} + +.input-group { + display: table; +} + +.input-group[class*="span"] { + float: none; + padding: 0; +} + +.input-group input, +.input-group select, +.input-group .uneditable-input { + width: 100%; +} + +.input-group-addon, +.input-group-btn, +.input-group input, +.input-group .uneditable-input { + display: table-cell; + margin: 0; + border-radius: 0; +} + +.input-group-addon, +.input-group-btn { + width: 1%; + vertical-align: middle; +} + +.input-group-addon { + padding: 6px 8px; + font-size: 14px; + font-weight: normal; + line-height: 20px; + text-align: center; + text-shadow: 0 1px 0 #fff; + background-color: #eeeeee; + border: 1px solid #ccc; + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} + +.input-group input:first-child, +.input-group .uneditable-input:first-child, +.input-group-addon:first-child { + border-bottom-left-radius: 4px; + border-top-left-radius: 4px; +} + +.input-group-addon:first-child { + border-right: 0; +} + +.input-group input:last-child, +.input-group .uneditable-input:last-child, +.input-group-addon:last-child { + border-top-right-radius: 4px; + border-bottom-right-radius: 4px; +} + +.input-group-addon:last-child { + border-left: 0; +} + +.input-group-btn, +.input-group-btn .btn { + white-space: nowrap; +} + +.input-group-btn > .btn { + float: left; + border-radius: 0; +} + +.input-group-btn > .btn + .btn { + border-left: 0; +} + +.input-group-btn.btn-group { + display: table-cell; +} + +.input-group-btn:first-child > .btn, +.input-group-btn.btn-group:first-child > .btn { + border-right: 0; +} + +.input-group-btn:first-child > .btn, +.input-group-btn.btn-group:first-child > .btn { + border-radius: 4px 0 0 4px; +} + +.input-group-btn:last-child > .btn, +.input-group-btn.btn-group:last-child > .btn:first-child { + border-left: 0; +} + +.input-group-btn:last-child > .btn, +.input-group-btn.btn-group:last-child > .btn { + border-radius: 0 4px 4px 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 input, + .form-horizontal .control-group select, + .form-horizontal .control-group textarea, + .form-horizontal .control-group .uneditable-input { + 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; + } +} + .btn { display: inline-block; padding: 6px 12px; diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css index ac64c87694..06f94fd2e3 100644 --- a/docs/assets/css/docs.css +++ b/docs/assets/css/docs.css @@ -197,7 +197,10 @@ section > ul li { .bs-docs-example > ul:last-child, .bs-docs-example > ol:last-child, .bs-docs-example > blockquote:last-child, -.bs-docs-example > .table:last-child { +.bs-docs-example > .table:last-child, +.bs-docs-example > input:last-child, +.bs-docs-example > select:last-child, +.bs-docs-example > textarea:last-child { margin-bottom: 0; } diff --git a/docs/css.html b/docs/css.html index 5054df37bc..756cec1ea9 100644 --- a/docs/css.html +++ b/docs/css.html @@ -1228,26 +1228,26 @@ For example, <code><section></code> should be wrapped
Add the .inline
class to a series of checkboxes or radios for controls appear on the same line.
Use .checkbox-inline
or .radio-inline
class to a series of checkboxes or radios for controls appear on the same line.
-<label class="checkbox inline"> +<label class="checkbox-inline"> <input type="checkbox" id="inlineCheckbox1" value="option1"> 1 </label> -<label class="checkbox inline"> +<label class="checkbox-inline"> <input type="checkbox" id="inlineCheckbox2" value="option2"> 2 </label> -<label class="checkbox inline"> +<label class="checkbox-inline"> <input type="checkbox" id="inlineCheckbox3" value="option3"> 3 </label>diff --git a/docs/templates/pages/css.mustache b/docs/templates/pages/css.mustache index 92cf57dff4..9e373dec6c 100644 --- a/docs/templates/pages/css.mustache +++ b/docs/templates/pages/css.mustache @@ -1168,26 +1168,26 @@ For example, <code><section></code> should be wrapped
Add the .inline
class to a series of checkboxes or radios for controls appear on the same line.
Use .checkbox-inline
or .radio-inline
class to a series of checkboxes or radios for controls appear on the same line.
-<label class="checkbox inline"> +<label class="checkbox-inline"> <input type="checkbox" id="inlineCheckbox1" value="option1"> 1 </label> -<label class="checkbox inline"> +<label class="checkbox-inline"> <input type="checkbox" id="inlineCheckbox2" value="option2"> 2 </label> -<label class="checkbox inline"> +<label class="checkbox-inline"> <input type="checkbox" id="inlineCheckbox3" value="option3"> 3 </label>diff --git a/less/bootstrap.less b/less/bootstrap.less index 56cc462b89..9e18c4fb36 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 cc7cc8a6a5..781218b444 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) { - 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; + } + } }