updating docs examples to remove 13/18 resets, fix up buttons alignments and carets

6 files changed, 42 insertions, 98 deletions

diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index 5af92fad1..678559c5a 100644
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -2498,8 +2498,8 @@ table .span24 {
 .caret {
   display: inline-block;
   width: 0;
-  height: 0;
-  vertical-align: top;
+  height: 3px;
+  vertical-align: middle;
   border-top: 4px solid #000000;
   border-right: 4px solid transparent;
   border-left: 4px solid transparent;
@@ -2509,7 +2509,6 @@ table .span24 {
 }
 
 .dropdown .caret {
-  margin-top: 8px;
   margin-left: 2px;
 }
 
@@ -2617,6 +2616,8 @@ table .span24 {
 
 .dropup .caret,
 .navbar-fixed-bottom .dropdown .caret {
+  height: 0;
+  margin-top: -2px;
   border-top: 0;
   border-bottom: 4px solid #000000;
   content: "\2191";
@@ -3187,28 +3188,28 @@ input[type="submit"].btn.btn-mini {
 }
 
 .btn-group > .dropdown-toggle {
-  *padding-top: 4px;
-  padding-right: 8px;
-  *padding-bottom: 4px;
-  padding-left: 8px;
+  *padding-top: 8px;
+  padding-right: 10px;
+  *padding-bottom: 8px;
+  padding-left: 10px;
   -webkit-box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.125), inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
      -moz-box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.125), inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
           box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.125), inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
 }
 
 .btn-group > .btn-mini.dropdown-toggle {
-  padding-right: 5px;
-  padding-left: 5px;
+  padding-right: 8px;
+  padding-left: 8px;
 }
 
 .btn-group > .btn-small.dropdown-toggle {
-  *padding-top: 4px;
-  *padding-bottom: 4px;
+  *padding-top: 6px;
+  *padding-bottom: 6px;
 }
 
 .btn-group > .btn-large.dropdown-toggle {
-  padding-right: 12px;
-  padding-left: 12px;
+  padding-right: 14px;
+  padding-left: 14px;
 }
 
 .btn-group.open .dropdown-toggle {
@@ -3247,7 +3248,6 @@ input[type="submit"].btn.btn-mini {
 }
 
 .btn .caret {
-  margin-top: 7px;
   margin-left: 0;
 }
 
@@ -3257,16 +3257,7 @@ input[type="submit"].btn.btn-mini {
   filter: alpha(opacity=100);
 }
 
-.btn-mini .caret {
-  margin-top: 5px;
-}
-
-.btn-small .caret {
-  margin-top: 6px;
-}
-
 .btn-large .caret {
-  margin-top: 6px;
   border-top-width: 5px;
   border-right-width: 5px;
   border-left-width: 5px;
diff --git a/docs/assets/css/docs.css b/docs/assets/css/docs.css
index e2b6aeba1..9593ae772 100644
--- a/docs/assets/css/docs.css
+++ b/docs/assets/css/docs.css
@@ -544,14 +544,6 @@ h2 + .row {
 
 /* Tweak examples
 ------------------------- */
-.bs-docs-example,
-.bs-docs-example > p {
-  font-size: 13px;
-  line-height: 18px;
-}
-.bs-docs-example > p {
-  margin-bottom: 9px;
-}
 .bs-docs-example > p:last-child {
   margin-bottom: 0;
 }
diff --git a/docs/components.html b/docs/components.html
index 213247821..719a8ad48 100644
--- a/docs/components.html
+++ b/docs/components.html
@@ -214,27 +214,13 @@
 ================================================== -->
 <section id="buttonGroups">
   <div class="page-header">
-    <h1>Button groups <small>Join buttons for more toolbar-like functionality</small></h1>
+    <h1>Button groups</h1>
   </div>
 
-
-  <h2>Description and best practices</h2>
-  <p>Use button groups to join multiple buttons together as one composite component. Build them with a series of <code>&lt;a&gt;</code> or <code>&lt;button&gt;</code> elements. We recommend the following guidelines for using button groups and toolbars:</p>
-  <ul>
-    <li>Always use the same element in a single button group, <code>&lt;a&gt;</code> or <code>&lt;button&gt;</code>.</li>
-    <li>Don't mix buttons of different colors in the same button group.</li>
-    <li>Use icons in addition to or instead of text, but be sure include alt and title text where appropriate.</li>
-  </ul>
-  <p><span class="label label-info">Related</span> Button groups with dropdowns (see below) should be called out separately and always include a dropdown caret to indicate intended behavior.</p>
-
-
-  <hr class="bs-docs-separator">
-
-
-  <h2>Examples and variations</h2>
+  <h2>Examples</h2>
   <p>Two basic options, along with two more specific variations.</p>
 
-  <h3>Basic button group</h3>
+  <h3>Single button group</h3>
   <p>Wrap a series of buttons with <code>.btn</code> in <code>.btn-group</code>.</p>
   <div class="bs-docs-example">
     <div class="btn-group" style="margin: 9px 0 5px;">
@@ -251,7 +237,7 @@
 &lt;/div&gt;
 </pre>
 
-  <h3>Toolbar example</h3>
+  <h3>Multiple button groups</h3>
   <p>Combine sets of <code>&lt;div class="btn-group"&gt;</code> into a <code>&lt;div class="btn-toolbar"&gt;</code> for more complex components.</p>
   <div class="bs-docs-example">
     <div class="btn-toolbar" style="margin: 0;">
@@ -279,11 +265,7 @@
 &lt;/div&gt;
 </pre>
 
-
-  <hr class="bs-docs-separator">
-
-
-  <h2>Vertical button groups</h2>
+  <h3>Vertical button groups</h3>
   <p>Make a set of buttons appear vertically stacked rather than horizontally.</p>
   <div class="bs-docs-example">
     <div class="btn-group btn-group-vertical">
@@ -303,10 +285,10 @@
   <hr class="bs-docs-separator">
 
 
-  <h3>Checkbox and radio flavors</h3>
+  <h4>Checkbox and radio flavors</h4>
   <p>Button groups can also function as radios, where only one button may be active, or checkboxes, where any number of buttons may be active. View <a href="./javascript.html#buttons">the Javascript docs</a> for that.</p>
 
-  <h3>Dropdowns in button groups</h3>
+  <h4>Dropdowns in button groups</h4>
   <p><span class="label label-info">Heads up!</span> Buttons with dropdowns must be individually wrapped in their own <code>.btn-group</code> within a <code>.btn-toolbar</code> for proper rendering.</p>
 </section>
 
diff --git a/docs/templates/pages/components.mustache b/docs/templates/pages/components.mustache
index 306c4dea2..d696e683c 100644
--- a/docs/templates/pages/components.mustache
+++ b/docs/templates/pages/components.mustache
@@ -144,27 +144,13 @@
 ================================================== -->
 <section id="buttonGroups">
   <div class="page-header">
-    <h1>{{_i}}Button groups{{/i}} <small>{{_i}}Join buttons for more toolbar-like functionality{{/i}}</small></h1>
+    <h1>{{_i}}Button groups{{/i}}</h1>
   </div>
 
-
-  <h2>{{_i}}Description and best practices{{/i}}</h2>
-  <p>{{_i}}Use button groups to join multiple buttons together as one composite component. Build them with a series of <code>&lt;a&gt;</code> or <code>&lt;button&gt;</code> elements. We recommend the following guidelines for using button groups and toolbars:{{/i}}</p>
-  <ul>
-    <li>{{_i}}Always use the same element in a single button group, <code>&lt;a&gt;</code> or <code>&lt;button&gt;</code>.{{/i}}</li>
-    <li>{{_i}}Don't mix buttons of different colors in the same button group.{{/i}}</li>
-    <li>{{_i}}Use icons in addition to or instead of text, but be sure include alt and title text where appropriate.{{/i}}</li>
-  </ul>
-  <p>{{_i}}<span class="label label-info">Related</span> Button groups with dropdowns (see below) should be called out separately and always include a dropdown caret to indicate intended behavior.{{/i}}</p>
-
-
-  <hr class="bs-docs-separator">
-
-
-  <h2>{{_i}}Examples and variations{{/i}}</h2>
+  <h2>{{_i}}Examples{{/i}}</h2>
   <p>{{_i}}Two basic options, along with two more specific variations.{{/i}}</p>
 
-  <h3>{{_i}}Basic button group{{/i}}</h3>
+  <h3>{{_i}}Single button group{{/i}}</h3>
   <p>{{_i}}Wrap a series of buttons with <code>.btn</code> in <code>.btn-group</code>.{{/i}}</p>
   <div class="bs-docs-example">
     <div class="btn-group" style="margin: 9px 0 5px;">
@@ -181,7 +167,7 @@
 &lt;/div&gt;
 </pre>
 
-  <h3>{{_i}}Toolbar example{{/i}}</h3>
+  <h3>{{_i}}Multiple button groups{{/i}}</h3>
   <p>{{_i}}Combine sets of <code>&lt;div class="btn-group"&gt;</code> into a <code>&lt;div class="btn-toolbar"&gt;</code> for more complex components.{{/i}}</p>
   <div class="bs-docs-example">
     <div class="btn-toolbar" style="margin: 0;">
@@ -209,11 +195,7 @@
 &lt;/div&gt;
 </pre>
 
-
-  <hr class="bs-docs-separator">
-
-
-  <h2>{{_i}}Vertical button groups{{/i}}</h2>
+  <h3>{{_i}}Vertical button groups{{/i}}</h3>
   <p>{{_i}}Make a set of buttons appear vertically stacked rather than horizontally.{{/i}}</p>
   <div class="bs-docs-example">
     <div class="btn-group btn-group-vertical">
@@ -233,10 +215,10 @@
   <hr class="bs-docs-separator">
 
 
-  <h3>{{_i}}Checkbox and radio flavors{{/i}}</h3>
+  <h4>{{_i}}Checkbox and radio flavors{{/i}}</h4>
   <p>{{_i}}Button groups can also function as radios, where only one button may be active, or checkboxes, where any number of buttons may be active. View <a href="./javascript.html#buttons">the Javascript docs</a> for that.{{/i}}</p>
 
-  <h3>{{_i}}Dropdowns in button groups{{/i}}</h3>
+  <h4>{{_i}}Dropdowns in button groups{{/i}}</h4>
   <p><span class="label label-info">{{_i}}Heads up!{{/i}}</span> {{_i}}Buttons with dropdowns must be individually wrapped in their own <code>.btn-group</code> within a <code>.btn-toolbar</code> for proper rendering.{{/i}}</p>
 </section>
 
diff --git a/less/button-groups.less b/less/button-groups.less
index 26cc2091a..d421b8f42 100644
--- a/less/button-groups.less
+++ b/less/button-groups.less
@@ -107,23 +107,23 @@
 
 // Give the line between buttons some depth
 .btn-group > .dropdown-toggle {
-  padding-left: 8px;
-  padding-right: 8px;
+  padding-left: 10px;
+  padding-right: 10px;
   .box-shadow(~"inset 1px 0 0 rgba(255,255,255,.125), inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05)");
-  *padding-top: 4px;
-  *padding-bottom: 4px;
+  *padding-top: 8px;
+  *padding-bottom: 8px;
 }
 .btn-group > .btn-mini.dropdown-toggle {
-  padding-left: 5px;
-  padding-right: 5px;
+  padding-left: 8px;
+  padding-right: 8px;
 }
 .btn-group > .btn-small.dropdown-toggle {
-  *padding-top: 4px;
-  *padding-bottom: 4px;
+  *padding-top: 6px;
+  *padding-bottom: 6px;
 }
 .btn-group > .btn-large.dropdown-toggle {
-  padding-left: 12px;
-  padding-right: 12px;
+  padding-left: 14px;
+  padding-right: 14px;
 }
 
 .btn-group.open {
@@ -162,7 +162,6 @@
 
 // Reposition the caret
 .btn .caret {
-  margin-top: 7px;
   margin-left: 0;
 }
 .btn:hover .caret,
@@ -171,13 +170,10 @@
 }
 // Carets in other button sizes
 .btn-mini .caret {
-  margin-top: 5px;
 }
 .btn-small .caret {
-  margin-top: 6px;
 }
 .btn-large .caret {
-  margin-top: 6px;
   border-left-width:  5px;
   border-right-width: 5px;
   border-top-width:   5px;
diff --git a/less/dropdowns.less b/less/dropdowns.less
index e9e91b6a4..705b25d50 100644
--- a/less/dropdowns.less
+++ b/less/dropdowns.less
@@ -22,8 +22,8 @@
 .caret {
   display: inline-block;
   width: 0;
-  height: 0;
-  vertical-align: top;
+  height: 3px;
+  vertical-align: middle;
   border-top:   4px solid @black;
   border-right: 4px solid transparent;
   border-left:  4px solid transparent;
@@ -33,7 +33,6 @@
 
 // Place the caret
 .dropdown .caret {
-  margin-top: 8px;
   margin-left: 2px;
 }
 .dropdown a:focus .caret,
@@ -153,6 +152,8 @@
 .navbar-fixed-bottom .dropdown {
   // Reverse the caret
   .caret {
+    margin-top: -2px;
+    height: 0;
     border-top: 0;
     border-bottom: 4px solid @black;
     content: "\2191";