button group sizes for ie7 fixes

jwieland · Mar 12, 2012 · 7f3a2b3 · 7f3a2b3
1 parent e12c66a
commit 7f3a2b3
Show file tree

Hide file tree

Showing 6 changed files with 87 additions and 14 deletions.
diff --git a/docs/assets/bootstrap.zip b/docs/assets/bootstrap.zip
diff --git a/docs/assets/css/bootstrap.css b/docs/assets/css/bootstrap.css
@@ -2265,6 +2265,11 @@ input[type="submit"].btn.btn-small {
   *padding-top: 3px;
   *padding-bottom: 3px;
 }
+button.btn.btn-mini,
+input[type="submit"].btn.btn-mini {
+  *padding-top: 1px;
+  *padding-bottom: 1px;
+}
 .btn-group {
   position: relative;
   *zoom: 1;
@@ -2355,12 +2360,18 @@ input[type="submit"].btn.btn-small {
   -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);
-  *padding-top: 5px;
-  *padding-bottom: 5px;
+  *padding-top: 3px;
+  *padding-bottom: 3px;
 }
 .btn-group .btn-mini.dropdown-toggle {
   padding-left: 5px;
   padding-right: 5px;
+  *padding-top: 1px;
+  *padding-bottom: 1px;
+}
+.btn-group .btn-small.dropdown-toggle {
+  *padding-top: 4px;
+  *padding-bottom: 4px;
 }
 .btn-group .btn-large.dropdown-toggle {
   padding-left: 12px;

diff --git a/docs/components.html b/docs/components.html
@@ -420,13 +420,39 @@ <h3>Overview and examples</h3>
           </ul>
         </div><!-- /btn-group -->
       </div><!-- /btn-toolbar -->
-      <h3>Right aligned menus</h3>
-      <p>Add <code>.pull-right</code> to the <code>.dropdown-menu</code> of any button dropdown for right aligned menus.</p>
+      <h3>Sizes</h3>
+      <p>Utilize the extra button classe <code>.btn-mini</code>, <code>.btn-small</code>, or <code>.btn-large</code> for sizing.</p>
       <div class="btn-toolbar">
         <div class="btn-group">
-          <button class="btn">Right aligned</button>
-          <button class="btn dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
-          <ul class="dropdown-menu pull-right">
+          <button class="btn btn-large">Large action</button>
+          <button class="btn btn-large dropdown-toggle" data-toggle="dropdown"><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 class="btn-toolbar">
+        <div class="btn-group">
+          <button class="btn btn-small">Small action</button>
+          <button class="btn btn-small dropdown-toggle" data-toggle="dropdown"><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 class="btn-toolbar">
+        <div class="btn-group">
+          <button class="btn btn-mini">Mini action</button>
+          <button class="btn btn-mini dropdown-toggle" data-toggle="dropdown"><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>

diff --git a/docs/templates/pages/components.mustache b/docs/templates/pages/components.mustache
@@ -344,13 +344,39 @@
           </ul>
         </div><!-- /btn-group -->
       </div><!-- /btn-toolbar -->
-      <h3>{{_i}}Right aligned menus{{/i}}</h3>
-      <p>{{_i}}Add <code>.pull-right</code> to the <code>.dropdown-menu</code> of any button dropdown for right aligned menus.{{/i}}</p>
+      <h3>{{_i}}Sizes{{/i}}</h3>
+      <p>{{_i}}Utilize the extra button classe <code>.btn-mini</code>, <code>.btn-small</code>, or <code>.btn-large</code> for sizing.{{/i}}</p>
       <div class="btn-toolbar">
         <div class="btn-group">
-          <button class="btn">{{_i}}Right aligned{{/i}}</button>
-          <button class="btn dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
-          <ul class="dropdown-menu pull-right">
+          <button class="btn btn-large">{{_i}}Large action{{/i}}</button>
+          <button class="btn btn-large dropdown-toggle" data-toggle="dropdown"><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 class="btn-toolbar">
+        <div class="btn-group">
+          <button class="btn btn-small">{{_i}}Small action{{/i}}</button>
+          <button class="btn btn-small dropdown-toggle" data-toggle="dropdown"><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 class="btn-toolbar">
+        <div class="btn-group">
+          <button class="btn btn-mini">{{_i}}Mini action{{/i}}</button>
+          <button class="btn btn-mini dropdown-toggle" data-toggle="dropdown"><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>

diff --git a/less/button-groups.less b/less/button-groups.less
@@ -95,12 +95,18 @@
   padding-right: 8px;
   @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);
   .box-shadow(@shadow);
-  *padding-top: 5px;
-  *padding-bottom: 5px;
+  *padding-top: 3px;
+  *padding-bottom: 3px;
 }
 .btn-group .btn-mini.dropdown-toggle {
   padding-left: 5px;
   padding-right: 5px;
+  *padding-top: 1px;
+  *padding-bottom: 1px;
+}
+.btn-group .btn-small.dropdown-toggle {
+  *padding-top: 4px;
+  *padding-bottom: 4px;
 }
 .btn-group .btn-large.dropdown-toggle {
   padding-left: 12px;

diff --git a/less/buttons.less b/less/buttons.less
@@ -180,4 +180,8 @@ input[type="submit"].btn {
     *padding-top: 3px;
     *padding-bottom: 3px;
   }
+  &.btn-mini {
+    *padding-top: 1px;
+    *padding-bottom: 1px;
+  }
 }