diff options
Diffstat (limited to 'less')
| -rw-r--r-- | less/forms.less | 49 | ||||
| -rw-r--r-- | less/tests/forms.html | 20 |
2 files changed, 48 insertions, 21 deletions
diff --git a/less/forms.less b/less/forms.less index 383f105fc..5115f0c23 100644 --- a/less/forms.less +++ b/less/forms.less @@ -3,10 +3,9 @@ // -------------------------------------------------- -// General styles +// Non-controls // ------------------------- - form { margin: 0 0 @baseLineHeight; } @@ -30,8 +29,9 @@ legend { } label { - display: block; + display: inline-block; margin-bottom: 5px; + font-weight: bold; } // Form controls @@ -65,7 +65,10 @@ input[type="color"], color: @gray; vertical-align: middle; background-color: @inputBackground; + border: 1px solid @inputBorder; border-radius: @inputBorderRadius; + .box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); + .transition(~"border linear .2s, box-shadow linear .2s"); } // Reset appearance properties for textual inputs and textarea @@ -77,6 +80,17 @@ textarea, width: 100%; } +// Reset width of input images, buttons, radios, checkboxes +input[type="file"], +input[type="image"], +input[type="submit"], +input[type="reset"], +input[type="button"], +input[type="radio"], +input[type="checkbox"] { + width: auto; // Override of generic input selector +} + // Reset height since textareas have rows textarea { height: auto; @@ -99,10 +113,6 @@ input[type="search"], input[type="tel"], input[type="color"], .uneditable-input { - border: 1px solid @inputBorder; - .box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); - .transition(~"border linear .2s, box-shadow linear .2s"); - // Focus state &:focus { border-color: rgba(82,168,236,.8); @@ -120,17 +130,6 @@ input[type="checkbox"] { line-height: normal; } -// Reset width of input images, buttons, radios, checkboxes -input[type="file"], -input[type="image"], -input[type="submit"], -input[type="reset"], -input[type="button"], -input[type="radio"], -input[type="checkbox"] { - width: auto; // Override of generic input selector -} - // Set the height of select and file controls to match text inputs select, input[type="file"] { @@ -201,9 +200,14 @@ textarea { // Indent the labels to position radios/checkboxes as hanging .radio, .checkbox { + display: block; min-height: @baseLineHeight; // clear the floating input if there is no label text padding-left: 20px; } +.radio label, +.checkbox label { + font-weight: normal; +} .radio input[type="radio"], .checkbox input[type="checkbox"] { float: left; @@ -401,7 +405,7 @@ select:focus:invalid { .help-block, .help-inline { - color: lighten(@textColor, 15%); // lighten the text some for contrast + color: lighten(@textColor, 25%); // lighten the text some for contrast } .help-block { @@ -618,9 +622,12 @@ input.search-query { .form-search .checkbox, .form-inline .radio, .form-inline .checkbox { + display: inline-block; padding-left: 0; - margin-bottom: 0; - vertical-align: middle; + label { + margin-bottom: 0; + vertical-align: middle; + } } // Remove float and margin, set to inline-block .form-search .radio input[type="radio"], diff --git a/less/tests/forms.html b/less/tests/forms.html index a63d728a0..ea85411c9 100644 --- a/less/tests/forms.html +++ b/less/tests/forms.html @@ -173,6 +173,26 @@ </div><!-- /span4 --> </div><!-- /row --> + + + <div class="page-header"> + <h1>Form components</h1> + </div> + + <fieldset> + <legend>Legend</legend> + <label>Label name</label> + <input type="text" placeholder="Type something…"> + <p class="help-block">Example block-level help text here.</p> + <div class="checkbox"> + <label> + <input type="checkbox"> Check me out + </label> + </div> + <button type="submit" class="btn">Submit</button> + </fieldset> + + </form> <!-- /container --> </body> |
