From fe8061b84ecdda5ea70514fe487e2f46564439e2 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Fri, 30 Nov 2012 13:35:20 -0800 Subject: [PATCH] more tests for form styles; includes lightening help text --- docs/assets/css/bootstrap.css | 70 ++++++++++++-------------- docs/base-css.html | 36 +++++++------ docs/templates/pages/base-css.mustache | 36 +++++++------ less/forms.less | 49 ++++++++++-------- 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 a227de6822..f57c6ff747 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 8ddb107fff..c8a785fed3 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

Default styles

-

Individual form controls receive styling, but without any required base class on the <form> or large changes in markup. Results in stacked, left-aligned labels on top of form controls.

+

Individual form controls automatically receive some global styling. By default, inputs are set to width: 100%;.

Legend - Example block-level help text here. - +

Example block-level help text here.

+
+ +
@@ -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="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>
diff --git a/docs/templates/pages/base-css.mustache b/docs/templates/pages/base-css.mustache index 8dda0cb204..4be10716ca 100644 --- a/docs/templates/pages/base-css.mustache +++ b/docs/templates/pages/base-css.mustache @@ -825,16 +825,18 @@

{{_i}}Default styles{{/i}}

-

{{_i}}Individual form controls receive styling, but without any required base class on the <form> or large changes in markup. Results in stacked, left-aligned labels on top of form controls.{{/i}}

+

{{_i}}Individual form controls automatically receive some global styling. By default, inputs are set to width: 100%;.{{/i}}

Legend - {{_i}}Example block-level help text here.{{/i}} - +

{{_i}}Example block-level help text here.{{/i}}

+
+ +
{{! /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 @@
- +
+ +
{{! /example }} 
 <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>
diff --git a/less/forms.less b/less/forms.less index 383f105fc6..5115f0c23d 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 a63d728a00..ea85411c96 100644 --- a/less/tests/forms.html +++ b/less/tests/forms.html @@ -173,6 +173,26 @@ + + +
+

Form components

+
+ +
+ Legend + + +

Example block-level help text here.

+
+ +
+ +
+ + -- 2.47.3