diff options
| -rw-r--r-- | docs/assets/css/bootstrap.css | 70 | ||||
| -rw-r--r-- | docs/base-css.html | 36 | ||||
| -rw-r--r-- | docs/templates/pages/base-css.mustache | 36 | ||||
| -rw-r--r-- | less/forms.less | 49 | ||||
| -rw-r--r-- | less/tests/forms.html | 20 |
5 files changed, 125 insertions, 86 deletions
diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css index a227de682..f57c6ff74 100644 --- a/docs/assets/css/bootstrap.css +++ b/docs/assets/css/bootstrap.css @@ -751,8 +751,9 @@ legend { } label { - display: block; + display: inline-block; margin-bottom: 5px; + font-weight: bold; } select, @@ -781,10 +782,17 @@ input[type="color"], 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, @@ -794,33 +802,18 @@ textarea, width: 100%; } -textarea { - height: auto; +input[type="file"], +input[type="image"], +input[type="submit"], +input[type="reset"], +input[type="button"], +input[type="radio"], +input[type="checkbox"] { + width: auto; } -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 { - border: 1px solid #cccccc; - -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-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; +textarea { + height: auto; } textarea:focus, @@ -857,16 +850,6 @@ input[type="checkbox"] { line-height: normal; } -input[type="file"], -input[type="image"], -input[type="submit"], -input[type="reset"], -input[type="button"], -input[type="radio"], -input[type="checkbox"] { - width: auto; -} - select, input[type="file"] { height: 34px; @@ -930,10 +913,16 @@ textarea::-webkit-input-placeholder { .radio, .checkbox { + display: block; min-height: 20px; padding-left: 20px; } +.radio label, +.checkbox label { + font-weight: normal; +} + .radio input[type="radio"], .checkbox input[type="checkbox"] { float: left; @@ -1354,7 +1343,7 @@ select:focus:invalid:focus { .help-block, .help-inline { - color: #595959; + color: #737373; } .help-block { @@ -1599,7 +1588,14 @@ input.search-query { .form-search .checkbox, .form-inline .radio, .form-inline .checkbox { + display: inline-block; padding-left: 0; +} + +.form-search .radio label, +.form-search .checkbox label, +.form-inline .radio label, +.form-inline .checkbox label { margin-bottom: 0; vertical-align: middle; } diff --git a/docs/base-css.html b/docs/base-css.html index 8ddb107ff..c8a785fed 100644 --- a/docs/base-css.html +++ b/docs/base-css.html @@ -885,16 +885,18 @@ For example, <code><section></code> should be wrapped as inlin </div> <h2 id="forms-default">Default styles</h2> - <p>Individual form controls receive styling, but without any required base class on the <code><form></code> or large changes in markup. Results in stacked, left-aligned labels on top of form controls.</p> + <p>Individual form controls automatically receive some global styling. By default, inputs are set to <code>width: 100%;</code>.</p> <form class="bs-docs-example"> <fieldset> <legend>Legend</legend> <label>Label name</label> <input type="text" placeholder="Type something…"> - <span class="help-block">Example block-level help text here.</span> - <label class="checkbox"> - <input type="checkbox"> Check me out - </label> + <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> @@ -905,9 +907,11 @@ For example, <code><section></code> should be wrapped as inlin <label>Label name</label> <input type="text" placeholder="Type something…"> <span class="help-block">Example block-level help text here.</span> - <label class="checkbox"> - <input type="checkbox"> Check me out - </label> + <div class="checkbox"> + <label> + <input type="checkbox"> Check me out + </label> + </div> <button type="submit" class="btn">Submit</button> </fieldset> </form> @@ -938,18 +942,22 @@ For example, <code><section></code> should be wrapped as inlin <form class="bs-docs-example form-inline"> <input type="text" class="span3" placeholder="Email"> <input type="password" class="span3" placeholder="Password"> - <label class="checkbox"> - <input type="checkbox"> Remember me - </label> + <div class="checkbox"> + <label> + <input type="checkbox"> Remember me + </label> + </div> <button type="submit" class="btn">Sign in</button> </form> <pre class="prettyprint linenums"> <form class="form-inline"> <input type="text" class="span3" placeholder="Email"> <input type="password" class="span3" placeholder="Password"> - <label class="checkbox"> - <input type="checkbox"> Remember me - </label> + <div class="checkbox"> + <label> + <input type="checkbox"> Remember me + </label> + </div> <button type="submit" class="btn">Sign in</button> </form> </pre> diff --git a/docs/templates/pages/base-css.mustache b/docs/templates/pages/base-css.mustache index 8dda0cb20..4be10716c 100644 --- a/docs/templates/pages/base-css.mustache +++ b/docs/templates/pages/base-css.mustache @@ -825,16 +825,18 @@ </div> <h2 id="forms-default">{{_i}}Default styles{{/i}}</h2> - <p>{{_i}}Individual form controls receive styling, but without any required base class on the <code><form></code> or large changes in markup. Results in stacked, left-aligned labels on top of form controls.{{/i}}</p> + <p>{{_i}}Individual form controls automatically receive some global styling. By default, inputs are set to <code>width: 100%;</code>.{{/i}}</p> <form class="bs-docs-example"> <fieldset> <legend>Legend</legend> <label>{{_i}}Label name{{/i}}</label> <input type="text" placeholder="{{_i}}Type something…{{/i}}"> - <span class="help-block">{{_i}}Example block-level help text here.{{/i}}</span> - <label class="checkbox"> - <input type="checkbox"> {{_i}}Check me out{{/i}} - </label> + <p class="help-block">{{_i}}Example block-level help text here.{{/i}}</p> + <div class="checkbox"> + <label> + <input type="checkbox"> {{_i}}Check me out{{/i}} + </label> + </div> <button type="submit" class="btn">{{_i}}Submit{{/i}}</button> </fieldset> </form>{{! /example }} @@ -845,9 +847,11 @@ <label>{{_i}}Label name{{/i}}</label> <input type="text" placeholder="{{_i}}Type something…{{/i}}"> <span class="help-block">Example block-level help text here.</span> - <label class="checkbox"> - <input type="checkbox"> {{_i}}Check me out{{/i}} - </label> + <div class="checkbox"> + <label> + <input type="checkbox"> {{_i}}Check me out{{/i}} + </label> + </div> <button type="submit" class="btn">{{_i}}Submit{{/i}}</button> </fieldset> </form> @@ -878,18 +882,22 @@ <form class="bs-docs-example form-inline"> <input type="text" class="span3" placeholder="{{_i}}Email{{/i}}"> <input type="password" class="span3" placeholder="{{_i}}Password{{/i}}"> - <label class="checkbox"> - <input type="checkbox"> {{_i}}Remember me{{/i}} - </label> + <div class="checkbox"> + <label> + <input type="checkbox"> {{_i}}Remember me{{/i}} + </label> + </div> <button type="submit" class="btn">{{_i}}Sign in{{/i}}</button> </form>{{! /example }} <pre class="prettyprint linenums"> <form class="form-inline"> <input type="text" class="span3" placeholder="{{_i}}Email{{/i}}"> <input type="password" class="span3" placeholder="{{_i}}Password{{/i}}"> - <label class="checkbox"> - <input type="checkbox"> {{_i}}Remember me{{/i}} - </label> + <div class="checkbox"> + <label> + <input type="checkbox"> {{_i}}Remember me{{/i}} + </label> + </div> <button type="submit" class="btn">{{_i}}Sign in{{/i}}</button> </form> </pre> 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> |