add button sizes to docs for button dropdowns, clean up styles for them

diff --git a/docs/assets/bootstrap.zip b/docs/assets/bootstrap.zip
index 70186cf1ba615ada762cb8f320c46fc94040fff4..ca6b71417ade9298374184e4866fed96ad9b7826 100644 (file)
Binary files a/docs/assets/bootstrap.zip and b/docs/assets/bootstrap.zip differ

diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
index 05b86bc3d1876e768847291265909b86fb3beaff..15d7c0d07014eec6e3a8ee55c6f03824dfd49a29 100644 (file)
--- a/docs/assets/css/bootstrap.css
+++ b/docs/assets/css/bootstrap.css
@@ -1677,9 +1677,6 @@ table .span24 {
   opacity: 1;
   filter: alpha(opacity=100);
 }
-.btn-small .caret {
-  margin-top: 6px;
-}
 .dropdown-menu {
   position: absolute;
   top: 100%;
@@ -2214,6 +2211,14 @@ button.btn.btn-small, input[type="submit"].btn.btn-small {
   *padding-top: 5px;
   *padding-bottom: 5px;
 }
+.btn-group .btn-mini.dropdown-toggle {
+  padding-left: 5px;
+  padding-right: 5px;
+}
+.btn-group .btn-large.dropdown-toggle {
+  padding-left: 12px;
+  padding-right: 12px;
+}
 .btn-group.open {
   *z-index: 1000;
 }
@@ -2238,6 +2243,18 @@ button.btn.btn-small, input[type="submit"].btn.btn-small {
   opacity: 1;
   filter: alpha(opacity=100);
 }
+.btn-mini .caret {
+  margin-top: 5px;
+}
+.btn-small .caret {
+  margin-top: 6px;
+}
+.btn-large .caret {
+  margin-top: 6px;
+  border-left: 5px solid transparent;
+  border-right: 5px solid transparent;
+  border-top: 5px solid #000000;
+}
 .btn-primary .caret,
 .btn-warning .caret,
 .btn-danger .caret,

diff --git a/docs/components.html b/docs/components.html
index 809f4d40e95a11de0e6f3f8386f035f19af8e5e8..767a8474d3775f567003a2535c40f2107ed29d8f 100644 (file)
--- a/docs/components.html
+++ b/docs/components.html
@@ -289,6 +289,50 @@
 </pre>
     </div>
   </div>
+  <div class="row">
+    <div class="span4">
+      <h3>Works with all button sizes</h3>
+      <p>Button dropdowns work at any size. your button sizes to <code>.btn-large</code>, <code>.btn-small</code>, or <code>.btn-mini</code>.</p>
+      <div class="btn-toolbar" style="margin-top: 18px;">
+        <div class="btn-group">
+          <button class="btn btn-large dropdown-toggle" data-toggle="dropdown">Large button <span class="caret"></span></button>
+          <ul class="dropdown-menu">
+            <li><a href="#">Action</a></li>
+            <li><a href="#">Another action</a></li>
+            <li><a href="#">Something else here</a></li>
+            <li class="divider"></li>
+            <li><a href="#">Separated link</a></li>
+          </ul>
+        </div><!-- /btn-group -->
+        <div class="btn-group">
+          <button class="btn btn-small dropdown-toggle" data-toggle="dropdown">Small button <span class="caret"></span></button>
+          <ul class="dropdown-menu">
+            <li><a href="#">Action</a></li>
+            <li><a href="#">Another action</a></li>
+            <li><a href="#">Something else here</a></li>
+            <li class="divider"></li>
+            <li><a href="#">Separated link</a></li>
+          </ul>
+        </div><!-- /btn-group -->
+        <div class="btn-group">
+          <button class="btn btn-mini dropdown-toggle" data-toggle="dropdown">Mini button <span class="caret"></span></button>
+          <ul class="dropdown-menu">
+            <li><a href="#">Action</a></li>
+            <li><a href="#">Another action</a></li>
+            <li><a href="#">Something else here</a></li>
+            <li class="divider"></li>
+            <li><a href="#">Separated link</a></li>
+          </ul>
+        </div><!-- /btn-group -->
+      </div><!-- /btn-toolbar -->
+    </div><!--/span-->
+    <div class="span4">
+
+    </div><!--/span-->
+    <div class="span4">
+
+    </div><!--/span-->
+  </div><!--/row-->
   <div class="alert alert-info">
     <strong>Heads up!</strong> In some cases&mdash;like mobile&mdash;dropdown menus will extend outside the viewport. You need to resolve the alignment manually or with custom javascript.
   </div>

diff --git a/docs/templates/pages/components.mustache b/docs/templates/pages/components.mustache
index 354c4d54dfce4928956e2185fe279b971ab3879d..b52919995e39dec0bb4a13cd5f24ffef5666b842 100644 (file)
--- a/docs/templates/pages/components.mustache
+++ b/docs/templates/pages/components.mustache
@@ -213,6 +213,50 @@
 </pre>
     </div>
   </div>
+  <div class="row">
+    <div class="span4">
+      <h3>{{_i}}Works with all button sizes{{/i}}</h3>
+      <p>Button dropdowns work at any size. your button sizes to <code>.btn-large</code>, <code>.btn-small</code>, or <code>.btn-mini</code>.</p>
+      <div class="btn-toolbar" style="margin-top: 18px;">
+        <div class="btn-group">
+          <button class="btn btn-large dropdown-toggle" data-toggle="dropdown">{{_i}}Large button{{/i}} <span class="caret"></span></button>
+          <ul class="dropdown-menu">
+            <li><a href="#">{{_i}}Action{{/i}}</a></li>
+            <li><a href="#">{{_i}}Another action{{/i}}</a></li>
+            <li><a href="#">{{_i}}Something else here{{/i}}</a></li>
+            <li class="divider"></li>
+            <li><a href="#">{{_i}}Separated link{{/i}}</a></li>
+          </ul>
+        </div><!-- /btn-group -->
+        <div class="btn-group">
+          <button class="btn btn-small dropdown-toggle" data-toggle="dropdown">{{_i}}Small button{{/i}} <span class="caret"></span></button>
+          <ul class="dropdown-menu">
+            <li><a href="#">{{_i}}Action{{/i}}</a></li>
+            <li><a href="#">{{_i}}Another action{{/i}}</a></li>
+            <li><a href="#">{{_i}}Something else here{{/i}}</a></li>
+            <li class="divider"></li>
+            <li><a href="#">{{_i}}Separated link{{/i}}</a></li>
+          </ul>
+        </div><!-- /btn-group -->
+        <div class="btn-group">
+          <button class="btn btn-mini dropdown-toggle" data-toggle="dropdown">{{_i}}Mini button{{/i}} <span class="caret"></span></button>
+          <ul class="dropdown-menu">
+            <li><a href="#">{{_i}}Action{{/i}}</a></li>
+            <li><a href="#">{{_i}}Another action{{/i}}</a></li>
+            <li><a href="#">{{_i}}Something else here{{/i}}</a></li>
+            <li class="divider"></li>
+            <li><a href="#">{{_i}}Separated link{{/i}}</a></li>
+          </ul>
+        </div><!-- /btn-group -->
+      </div><!-- /btn-toolbar -->
+    </div><!--/span-->
+    <div class="span4">
+
+    </div><!--/span-->
+    <div class="span4">
+
+    </div><!--/span-->
+  </div><!--/row-->
   <div class="alert alert-info">
     <strong>{{_i}}Heads up!{{/i}}</strong> {{_i}}In some cases&mdash;like mobile&mdash;dropdown menus will extend outside the viewport. You need to resolve the alignment manually or with custom javascript.{{/i}}
   </div>

diff --git a/less/button-groups.less b/less/button-groups.less
index a70d0153dc603712a36ac3dd007d1fb4d52e9b50..e7ba6a065e3cf119b02df179b1a33827e6c9489d 100644 (file)
--- a/less/button-groups.less
+++ b/less/button-groups.less
@@ -98,6 +98,14 @@
   *padding-top: 5px;
   *padding-bottom: 5px;
 }
+.btn-group .btn-mini.dropdown-toggle {
+  padding-left: 5px;
+  padding-right: 5px;
+}
+.btn-group .btn-large.dropdown-toggle {
+  padding-left: 12px;
+  padding-right: 12px;
+}
 
 .btn-group.open {
   // IE7's z-index only goes to the nearest positioned ancestor, which would
@@ -127,6 +135,19 @@
 .open.btn-group .caret {
   .opacity(100);
 }
+// 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:  5px solid transparent;
+  border-right: 5px solid transparent;
+  border-top:   5px solid @black;
+}
 
 
 // Account for other colors

diff --git a/less/dropdowns.less b/less/dropdowns.less
index e98dc45573fb87d1b6171afa2dbd0829eed75716..3e74b68ff067bae4fc3df5c3b782144c73c49d60 100644 (file)
--- a/less/dropdowns.less
+++ b/less/dropdowns.less
@@ -42,11 +42,6 @@
   .opacity(100);
 }
 
-// Small button dropdowns
-.btn-small .caret {
-  margin-top: 6px;
-}
-
 // The dropdown menu (ul)
 // ----------------------
 .dropdown-menu {