more tests for form styles; includes lightening help text

diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index a227de6822412e9c83d989a80ea4f21ea1a48689..f57c6ff747c3004527fa0967f525fc4322cd8fa8 100644 (file)
--- 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 8ddb107fff231cd1c649e659426792adeb100910..c8a785fed3db99a44063c1572685347c9424ed06 100644 (file)
--- 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>&lt;form&gt;</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, &lt;code&gt;&lt;section&gt;&lt;/code&gt; should be wrapped as inlin
     &lt;label&gt;Label name&lt;/label&gt;
     &lt;input type="text" placeholder="Type something…"&gt;
     &lt;span class="help-block"&gt;Example block-level help text here.&lt;/span&gt;
-    &lt;label class="checkbox"&gt;
-      &lt;input type="checkbox"&gt; Check me out
-    &lt;/label&gt;
+    &lt;div class="checkbox"&gt;
+      &lt;label&gt;
+        &lt;input type="checkbox"&gt; Check me out
+      &lt;/label&gt;
+    &lt;/div&gt;
     &lt;button type="submit" class="btn"&gt;Submit&lt;/button&gt;
   &lt;/fieldset&gt;
 &lt;/form&gt;
@@ -938,18 +942,22 @@ For example, &lt;code&gt;&lt;section&gt;&lt;/code&gt; 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">
 &lt;form class="form-inline"&gt;
   &lt;input type="text" class="span3" placeholder="Email"&gt;
   &lt;input type="password" class="span3" placeholder="Password"&gt;
-  &lt;label class="checkbox"&gt;
-    &lt;input type="checkbox"&gt; Remember me
-  &lt;/label&gt;
+    &lt;div class="checkbox"&gt;
+      &lt;label&gt;
+        &lt;input type="checkbox"&gt; Remember me
+      &lt;/label&gt;
+    &lt;/div&gt;
   &lt;button type="submit" class="btn"&gt;Sign in&lt;/button&gt;
 &lt;/form&gt;
 </pre>

diff --git a/docs/templates/pages/base-css.mustache b/docs/templates/pages/base-css.mustache
index 8dda0cb204e752faa349fb66cb02b0b9f2bb9d10..4be10716ca15777311a21c196a05c59121f47198 100644 (file)
--- 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>&lt;form&gt;</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 @@
     &lt;label&gt;{{_i}}Label name{{/i}}&lt;/label&gt;
     &lt;input type="text" placeholder="{{_i}}Type something…{{/i}}"&gt;
     &lt;span class="help-block"&gt;Example block-level help text here.&lt;/span&gt;
-    &lt;label class="checkbox"&gt;
-      &lt;input type="checkbox"&gt; {{_i}}Check me out{{/i}}
-    &lt;/label&gt;
+    &lt;div class="checkbox"&gt;
+      &lt;label&gt;
+        &lt;input type="checkbox"&gt; {{_i}}Check me out{{/i}}
+      &lt;/label&gt;
+    &lt;/div&gt;
     &lt;button type="submit" class="btn"&gt;{{_i}}Submit{{/i}}&lt;/button&gt;
   &lt;/fieldset&gt;
 &lt;/form&gt;
@@ -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">
 &lt;form class="form-inline"&gt;
   &lt;input type="text" class="span3" placeholder="{{_i}}Email{{/i}}"&gt;
   &lt;input type="password" class="span3" placeholder="{{_i}}Password{{/i}}"&gt;
-  &lt;label class="checkbox"&gt;
-    &lt;input type="checkbox"&gt; {{_i}}Remember me{{/i}}
-  &lt;/label&gt;
+    &lt;div class="checkbox"&gt;
+      &lt;label&gt;
+        &lt;input type="checkbox"&gt; {{_i}}Remember me{{/i}}
+      &lt;/label&gt;
+    &lt;/div&gt;
   &lt;button type="submit" class="btn"&gt;{{_i}}Sign in{{/i}}&lt;/button&gt;
 &lt;/form&gt;
 </pre>

diff --git a/less/forms.less b/less/forms.less
index 383f105fc6384770dc26b3e9b9cf84c5bfce0fe3..5115f0c23d6529e01d408c9d2c062a27db3e6777 100644 (file)
--- 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 a63d728a0084b6c766c550967c8d4b0c39c390b6..ea85411c96c33f4db9dd1cd7dcf827a5f7ff8d24 100644 (file)
--- 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>