Tweak the docs and address the new forms list of controls: radios and checkboxes are now hanging controls to wrap text properly

6 files changed, 49 insertions, 25 deletions

diff --git a/bootstrap.css b/bootstrap.css
index 55706e2a3..ea084d5f0 100644
--- a/bootstrap.css
+++ b/bootstrap.css
@@ -6,7 +6,7 @@
  * http://www.apache.org/licenses/LICENSE-2.0
  *
  * Designed and built with all the love in the world @twitter by @mdo and @fat.
- * Date: Thu Jan  5 10:00:31 PST 2012
+ * Date: Thu Jan  5 14:10:04 PST 2012
  */
 html, body {
   margin: 0;
@@ -615,6 +615,16 @@ input[type=image] {
 textarea {
   height: auto;
 }
+.radio, .checkbox {
+  padding-left: 18px;
+}
+.radio input[type=radio], .checkbox input[type=checkbox] {
+  float: left;
+  margin-left: -18px;
+}
+.controls > .radio:first-child, .controls > .checkbox:first-child {
+  padding-top: 6px;
+}
 input, textarea {
   -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
   -moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
@@ -986,9 +996,6 @@ textarea[readonly] {
 .horizontal-form .controls {
   margin-left: 150px;
 }
-.horizontal-form .controls > .radio:first-child, .horizontal-form .controls > .checkbox:first-child {
-  padding-top: 6px;
-}
 .horizontal-form .form-actions {
   padding-left: 150px;
 }
diff --git a/bootstrap.min.css b/bootstrap.min.css
index d0ba4dc53..a021bf774 100644
--- a/bootstrap.min.css
+++ b/bootstrap.min.css
@@ -104,6 +104,9 @@ select{background-color:#ffffff;vertical-align:middle;}
 select[multiple],select[size]{height:inherit;}
 input[type=image]{-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;}
 textarea{height:auto;}
+.radio,.checkbox{padding-left:18px;}
+.radio input[type=radio],.checkbox input[type=checkbox]{float:left;margin-left:-18px;}
+.controls>.radio:first-child,.controls>.checkbox:first-child{padding-top:6px;}
 input,textarea{-webkit-box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1);-moz-box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1);box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1);-webkit-transition:border linear 0.2s,box-shadow linear 0.2s;-moz-transition:border linear 0.2s,box-shadow linear 0.2s;-ms-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:focus,textarea:focus{border-color:rgba(82, 168, 236, 0.8);-webkit-box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1),0 0 8px rgba(82, 168, 236, 0.6);-moz-box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1),0 0 8px rgba(82, 168, 236, 0.6);box-shadow:inset 0 1px 3px rgba(0, 0, 0, 0.1),0 0 8px rgba(82, 168, 236, 0.6);outline:0;}
 input[type=file]:focus,input[type=checkbox]:focus,select:focus{-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;outline:1px dotted #666;}
@@ -159,7 +162,6 @@ input[disabled],select[disabled],textarea[disabled],input[readonly],select[reado
 .control-group>label{font-weight:bold;}
 .horizontal-form .control-group>label{float:left;width:130px;padding-top:5px;text-align:right;}
 .horizontal-form .controls{margin-left:150px;}
-.horizontal-form .controls>.radio:first-child,.horizontal-form .controls>.checkbox:first-child{padding-top:6px;}
 .horizontal-form .form-actions{padding-left:150px;}
 table{width:100%;margin-bottom:18px;}
 th,td{padding:8px;line-height:18px;text-align:left;border-top:1px solid #ddd;}
diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css
index a4573448f..9501ec5dc 100644
--- a/docs/assets/css/docs.css
+++ b/docs/assets/css/docs.css
@@ -36,7 +36,11 @@ body > .navbar-fixed .brand:hover {
 /* Space out sub-sections more
 -------------------------------------------------- */
 .page-header {
-  margin-top: 36px;
+  margin: 36px 0 18px;
+  border-bottom: 1px solid #eee;
+}
+.page-header h1 {
+  margin-bottom: 9px;
 }
 
 
diff --git a/docs/base-css.html b/docs/base-css.html
index 58d42c2b0..1ec808a39 100644
--- a/docs/base-css.html
+++ b/docs/base-css.html
@@ -795,9 +795,16 @@ Form states
   warning
   error
   success
-
 -->
 
+<div class="row">
+  <div class="span4">
+    <h3>Flexible markup and styles</h3>
+    <p>The best part about forms in Bootstrap is that all your inputs and controls look great no matter how you build them in your markup. No superfluous HTML is required, but we provide the patterns for those who require it.</p>
+  </div>
+</div>
+
+  
   <h2>Four types of forms</h2>
   <table class="bordered-table striped-table">
     <thead>
diff --git a/lib/forms.less b/lib/forms.less
index 0c624fa88..32acbdaba 100644
--- a/lib/forms.less
+++ b/lib/forms.less
@@ -116,6 +116,28 @@ textarea {
 
 
 
+// CHECKBOXES & RADIOS
+// -------------------
+
+// Indent the labels to position radios/checkboxes as hanging
+.radio,
+.checkbox {
+  padding-left: 18px;
+}
+.radio input[type=radio],
+.checkbox input[type=checkbox] {
+  float: left;
+  margin-left: -18px;
+}
+
+// Move the options list down to align with labels
+.controls > .radio:first-child,
+.controls > .checkbox:first-child {
+  padding-top: 6px; // has to be padding because margin collaspes
+}
+
+
+
 // FOCUS STATE
 // -----------
 
@@ -390,11 +412,6 @@ textarea[readonly] {
   .controls {
     margin-left: 150px;
   }
-  // Move the options list down to align with labels
-  .controls > .radio:first-child,
-  .controls > .checkbox:first-child {
-    padding-top: 6px; // has to be padding because margin collaspes
-  }
   // Move over buttons in .form-actions to align with .controls
   .form-actions {
     padding-left: 150px;
diff --git a/lib/patterns.less b/lib/patterns.less
index 72c3e8ec5..7a039ce26 100644
--- a/lib/patterns.less
+++ b/lib/patterns.less
@@ -28,16 +28,3 @@ footer {
   margin-top: @baseLineHeight - 1;
   border-top: 1px solid #eee;
 }
-
-
-// PAGE HEADERS
-// ------------
-
-.page-header {
-  margin-bottom: @baseLineHeight * 1.5;
-  border-bottom: 1px solid #eee;
-  .box-shadow(0 1px 0 rgba(255,255,255,.5));
-  h1 {
-    margin-bottom: @baseLineHeight * .75;
-  }
-}