diff options
| author | Jacob Thornton <[email protected]> | 2012-02-16 22:41:02 -0800 |
|---|---|---|
| committer | Jacob Thornton <[email protected]> | 2012-02-16 22:41:02 -0800 |
| commit | 03e6dc66c2fe14e756723395752feefb687b6526 (patch) | |
| tree | b8cfe13d72e1a780ef08dbd26e3bfe48e406c59e /less/forms.less | |
| parent | 9143d8e449a852c606194ea8c529e30ea1a52ddf (diff) | |
| parent | 091622644a0c619e1afbb21041c141da30df76b7 (diff) | |
| download | bootstrap-03e6dc66c2fe14e756723395752feefb687b6526.tar.xz bootstrap-03e6dc66c2fe14e756723395752feefb687b6526.zip | |
Merge branch '2.0.1-wip'
Diffstat (limited to 'less/forms.less')
| -rw-r--r-- | less/forms.less | 89 |
1 files changed, 48 insertions, 41 deletions
diff --git a/less/forms.less b/less/forms.less index 9c9a9b8a9..0a5fa2b86 100644 --- a/less/forms.less +++ b/less/forms.less @@ -28,6 +28,12 @@ legend { color: @grayDark; border: 0; border-bottom: 1px solid #eee; + + // Small + small { + font-size: @baseLineHeight * .75; + color: @grayLight; + } } // Set font for forms @@ -36,7 +42,13 @@ input, button, select, textarea { - #font > .sans-serif(@baseFontSize,normal,@baseLineHeight); + #font > .shorthand(@baseFontSize,normal,@baseLineHeight); // Set size, weight, line-height here +} +input, +button, +select, +textarea { + #font > #family > .sans-serif(); // And only set font-family here for those that need it (note the missing label element) } // Identify controls by their labels @@ -84,13 +96,17 @@ input[type="radio"] { margin: 3px 0; *margin-top: 0; /* IE7 */ line-height: normal; - border: 0; cursor: pointer; .border-radius(0); + border: 0 \9; /* IE9 and down */ +} +input[type="image"] { + border: 0; } // Reset the file input to browser defaults input[type="file"] { + width: auto; padding: initial; line-height: initial; border: initial; @@ -115,6 +131,11 @@ input[type="file"] { line-height: 28px; } +// Reset line-height for IE +input[type="file"] { + line-height: 18px \9; +} + // Chrome on Linux and Mobile Safari need background-color select { width: 220px; // default input width + 10px of padding that doesn't get applied @@ -165,9 +186,11 @@ input[type="hidden"] { } // Radios and checkboxes on same line +// TODO v3: Convert .inline to .control-inline .radio.inline, .checkbox.inline { display: inline-block; + padding-top: 5px; margin-bottom: 0; vertical-align: middle; } @@ -175,11 +198,6 @@ input[type="hidden"] { .checkbox.inline + .checkbox.inline { margin-left: 10px; // space out consecutive inline controls } -// But don't forget to remove their padding on first-child -.controls > .radio.inline:first-child, -.controls > .checkbox.inline:first-child { - padding-top: 0; -} @@ -198,9 +216,10 @@ textarea:focus { @shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 8px rgba(82,168,236,.6); .box-shadow(@shadow); outline: 0; - outline: thin dotted \9; /* IE6-8 */ + outline: thin dotted \9; /* IE6-9 */ } input[type="file"]:focus, +input[type="radio"]:focus, input[type="checkbox"]:focus, select:focus { .box-shadow(none); // override for file inputs @@ -260,33 +279,6 @@ textarea[readonly] { // FORM FIELD FEEDBACK STATES // -------------------------- -// Mixin for form field states -.formFieldState(@textColor: #555, @borderColor: #ccc, @backgroundColor: #f5f5f5) { - // Set the text color - > label, - .help-block, - .help-inline { - color: @textColor; - } - // Style inputs accordingly - input, - select, - textarea { - color: @textColor; - border-color: @borderColor; - &:focus { - border-color: darken(@borderColor, 10%); - .box-shadow(0 0 6px lighten(@borderColor, 20%)); - } - } - // Give a small background color for input-prepend/-append - .input-prepend .add-on, - .input-append .add-on { - color: @textColor; - background-color: @backgroundColor; - border-color: @textColor; - } -} // Warning .control-group.warning { .formFieldState(@warningText, @warningText, @warningBackground); @@ -344,6 +336,7 @@ select:focus:required:invalid { // --------- .help-block { + display: block; // account for any element using help-block margin-top: 5px; margin-bottom: 0; color: @grayLight; @@ -412,6 +405,7 @@ select:focus:required:invalid { .border-radius(3px 0 0 3px); } .uneditable-input { + border-left-color: #eee; border-right-color: #ccc; } .add-on { @@ -461,6 +455,10 @@ select:focus:required:invalid { display: inline-block; margin-bottom: 0; } + // Re-hide hidden elements due to specifity + .hide { + display: none; + } } .form-search label, .form-inline label, @@ -477,28 +475,37 @@ select:focus:required:invalid { .form-inline .input-prepend .add-on { vertical-align: middle; } +// Inline checkbox/radio labels +.form-search .radio, +.form-inline .radio, +.form-search .checkbox, +.form-inline .checkbox { + margin-bottom: 0; + vertical-align: middle; +} // Margin to space out fieldsets .control-group { margin-bottom: @baseLineHeight / 2; } +// Legend collapses margin, so next element is responsible for spacing +legend + .control-group { + margin-top: @baseLineHeight; + -webkit-margin-top-collapse: separate; +} + // Horizontal-specific styles // -------------------------- .form-horizontal { - // Legend collapses margin, so we're relegated to padding - legend + .control-group { - margin-top: @baseLineHeight; - -webkit-margin-top-collapse: separate; - } // Increase spacing between groups .control-group { margin-bottom: @baseLineHeight; .clearfix(); } // Float the labels left - .control-group > label { + .control-label { float: left; width: 140px; padding-top: 5px; |
