Merge branch '3.0.0-wip' into bs3_homepage

1 files changed, 98 insertions, 23 deletions

diff --git a/less/button-groups.less b/less/button-groups.less
index d78815c93..e4a78cd4e 100644
--- a/less/button-groups.less
+++ b/less/button-groups.less
@@ -3,11 +3,34 @@
 // --------------------------------------------------
 
 // Button carets
-.btn .caret {
-  border-top-color: @btn-default-color;
+//
+// Match the button text color to the arrow/caret for indicating dropdown-ness.
+
+.caret {
+  .btn-default & {
+    border-top-color: @btn-default-color;
+  }
+  .btn-primary &,
+  .btn-success &,
+  .btn-warning &,
+  .btn-danger &,
+  .btn-info & {
+    border-top-color: #fff;
+  }
 }
-.dropup .btn .caret {
-  border-bottom-color: @btn-default-color;
+.dropup {
+  & .btn-default .caret {
+    border-bottom-color: @btn-default-color;
+  }
+  & .btn-primary,
+  & .btn-success,
+  & .btn-warning,
+  & .btn-danger,
+  & .btn-info {
+   .caret {
+      border-bottom-color: #fff;
+    }
+  }
 }
 
 // Make the div behave like a button
@@ -22,15 +45,25 @@
     // Bring the "active" button to the front
     &:hover,
     &:focus,
-    &:active {
+    &:active,
+    &.active {
       z-index: 2;
     }
+    &:focus {
+      // Remove focus outline when dropdown JS adds it after closing the menu
+      outline: none;
+    }
   }
 }
 
 // Prevent double borders when buttons are next to each other
-.btn-group .btn + .btn {
-  margin-left: -1px;
+.btn-group {
+  .btn + .btn,
+  .btn + .btn-group,
+  .btn-group + .btn,
+  .btn-group + .btn-group {
+    margin-left: -1px;
+  }
 }
 
 // Optional: Group multiple button groups together for a toolbar
@@ -91,6 +124,14 @@
 }
 
 
+// Sizing
+//
+// Remix the default button sizing classes into new ones for easier manipulation.
+
+.btn-group-xs > .btn { .btn-xs(); }
+.btn-group-sm > .btn { .btn-sm(); }
+.btn-group-lg > .btn { .btn-lg(); }
+
 
 // Split button dropdowns
 // ----------------------
@@ -100,7 +141,7 @@
   padding-left: 8px;
   padding-right: 8px;
 }
-.btn-group > .btn-large + .dropdown-toggle {
+.btn-group > .btn-lg + .dropdown-toggle {
   padding-left: 12px;
   padding-right: 12px;
 }
@@ -117,38 +158,70 @@
   margin-left: 0;
 }
 // Carets in other button sizes
-.btn-large .caret {
-  border-width: 5px;
+.btn-lg .caret {
+  border-width: @caret-width-large;
 }
 // Upside down carets for .dropup
-.dropup .btn-large .caret {
-  border-bottom-width: 5px;
+.dropup .btn-lg .caret {
+  border-bottom-width: @caret-width-large;
 }
 
 
 // Vertical button groups
 // ----------------------
 
-.btn-group-vertical > .btn {
-  display: block;
-  float: none;
-  width: 100%;
-  max-width: 100%;
-  + .btn {
+.btn-group-vertical {
+  > .btn,
+  > .btn-group {
+    display: block;
+    float: none;
+    width: 100%;
+    max-width: 100%;
+  }
+
+  // Clear floats so dropdown menus can be properly placed
+  > .btn-group {
+    .clearfix();
+    > .btn {
+      float: none;
+    }
+  }
+
+  > .btn + .btn,
+  > .btn + .btn-group,
+  > .btn-group + .btn,
+  > .btn-group + .btn-group {
     margin-top: -1px;
+    margin-left: 0;
   }
 }
-.btn-group-vertical .btn {
+
+.btn-group-vertical > .btn {
   &:not(:first-child):not(:last-child) {
     border-radius: 0;
   }
-  &:first-child {
+  &:first-child:not(:last-child) {
+    border-top-right-radius: @border-radius-base;
     .border-bottom-radius(0);
   }
-  &:last-child {
+  &:last-child:not(:first-child) {
+    border-bottom-left-radius: @border-radius-base;
     .border-top-radius(0);
   }
 }
+.btn-group-vertical > .btn-group:not(:first-child):not(:last-child) > .btn {
+  border-radius: 0;
+}
+.btn-group-vertical > .btn-group:first-child {
+  > .btn:last-child,
+  > .dropdown-toggle {
+    .border-bottom-radius(0);
+  }
+}
+.btn-group-vertical > .btn-group:last-child > .btn:first-child {
+  .border-top-radius(0);
+}
+
 
 
 // Justified button groups
@@ -157,6 +230,8 @@
 .btn-group-justified {
   display: table;
   width: 100%;
+  table-layout: fixed;
+  border-collapse: separate;
   .btn {
     float: none;
     display: table-cell;
@@ -166,7 +241,7 @@
 
 
 // Checkbox and radio options
-.btn-group[data-toggle="buttons"] > .btn > input[type="radio"],
-.btn-group[data-toggle="buttons"] > .btn > input[type="checkbox"] {
+[data-toggle="buttons"] > .btn > input[type="radio"],
+[data-toggle="buttons"] > .btn > input[type="checkbox"] {
   display: none;
 }