bootstrap-sass 2.3.1.3 → 3.0.0.0

data/vendor/assets/stylesheets/bootstrap/_button-groups.scss

@@ -2,90 +2,119 @@
 // Button groups
 // --------------------------------------------------
 
+// Button carets
+//
+// 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-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
-.btn-group {
+.btn-group,
+.btn-group-vertical {
   position: relative;
   display: inline-block;
-  @include ie7-inline-block();
-  font-size: 0; // remove as part 1 of font-size inline-block hack
   vertical-align: middle; // match .btn alignment given font-size hack above
-  white-space: nowrap; // prevent buttons from wrapping when in tight spaces (e.g., the table on the tests page)
-  @include ie7-restore-left-whitespace();
+  > .btn {
+    position: relative;
+    float: left;
+    // Bring the "active" button to the front
+    &:hover,
+    &:focus,
+    &:active,
+    &.active {
+      z-index: 2;
+    }
+    &:focus {
+      // Remove focus outline when dropdown JS adds it after closing the menu
+      outline: none;
+    }
+  }
 }
 
-// Space out series of button groups
-.btn-group + .btn-group {
-  margin-left: 5px;
+// Prevent double borders when buttons are next to each other
+.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
 .btn-toolbar {
-  font-size: 0; // Hack to remove whitespace that results from using inline-block
-  margin-top: $baseLineHeight / 2;
-  margin-bottom: $baseLineHeight / 2;
-  > .btn + .btn,
-  > .btn-group + .btn,
-  > .btn + .btn-group {
-    margin-left: 5px;
-  }
-}
+  @include clearfix();
 
-// Float them, remove border radius, then re-add to first and last elements
-.btn-group > .btn {
-  position: relative;
-  @include border-radius(0);
-}
-.btn-group > .btn + .btn {
-  margin-left: -1px;
-}
-.btn-group > .btn,
-.btn-group > .dropdown-menu,
-.btn-group > .popover {
-  font-size: $baseFontSize; // redeclare as part 2 of font-size inline-block hack
+  .btn-group {
+    float: left;
+  }
+  // Space out series of button groups
+  > .btn,
+  > .btn-group {
+    + .btn,
+    + .btn-group {
+      margin-left: 5px;
+    }
+  }
 }
 
-// Reset fonts for other sizes
-.btn-group > .btn-mini {
-  font-size: $fontSizeMini;
-}
-.btn-group > .btn-small {
-  font-size: $fontSizeSmall;
-}
-.btn-group > .btn-large {
-  font-size: $fontSizeLarge;
+.btn-group > .btn:not(:first-child):not(:last-child):not(.dropdown-toggle) {
+  border-radius: 0;
 }
 
 // Set corners individual because sometimes a single button can be in a .btn-group and we need :first-child and :last-child to both match
 .btn-group > .btn:first-child {
   margin-left: 0;
-  @include border-top-left-radius($baseBorderRadius);
-  @include border-bottom-left-radius($baseBorderRadius);
+  &:not(:last-child):not(.dropdown-toggle) {
+    @include border-right-radius(0);
+  }
 }
 // Need .dropdown-toggle since :last-child doesn't apply given a .dropdown-menu immediately after it
-.btn-group > .btn:last-child,
-.btn-group > .dropdown-toggle {
-  @include border-top-right-radius($baseBorderRadius);
-  @include border-bottom-right-radius($baseBorderRadius);
+.btn-group > .btn:last-child:not(:first-child),
+.btn-group > .dropdown-toggle:not(:first-child) {
+  @include border-left-radius(0);
 }
-// Reset corners for large buttons
-.btn-group > .btn.large:first-child {
-  margin-left: 0;
-  @include border-top-left-radius($borderRadiusLarge);
-  @include border-bottom-left-radius($borderRadiusLarge);
+
+// Custom edits for including btn-groups within btn-groups (useful for including dropdown buttons within a btn-group)
+.btn-group > .btn-group {
+  float: left;
 }
-.btn-group > .btn.large:last-child,
-.btn-group > .large.dropdown-toggle {
-  @include border-top-right-radius($borderRadiusLarge);
-  @include border-bottom-right-radius($borderRadiusLarge);
+.btn-group > .btn-group:not(:first-child):not(:last-child) > .btn {
+  border-radius: 0;
 }
-
-// On hover/focus/active, bring the proper btn to front
-.btn-group > .btn:hover,
-.btn-group > .btn:focus,
-.btn-group > .btn:active,
-.btn-group > .btn.active {
-  z-index: 2;
+.btn-group > .btn-group:first-child {
+  > .btn:last-child,
+  > .dropdown-toggle {
+    @include border-right-radius(0);
+  }
+}
+.btn-group > .btn-group:last-child > .btn:first-child {
+  @include border-left-radius(0);
 }
 
 // On active and open, don't show outline
@@ -95,6 +124,14 @@
 }
 
 
+// Sizing
+//
+// Remix the default button sizing classes into new ones for easier manipulation.
+
+.btn-group-xs > .btn { @extend .btn-xs; }
+.btn-group-sm > .btn { @extend .btn-sm; }
+.btn-group-lg > .btn { @extend .btn-lg; }
+
 
 // Split button dropdowns
 // ----------------------
@@ -103,127 +140,109 @@
 .btn-group > .btn + .dropdown-toggle {
   padding-left: 8px;
   padding-right: 8px;
-  @include 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: 5px;
-  *padding-bottom: 5px;
-}
-.btn-group > .btn-mini + .dropdown-toggle {
-  padding-left: 5px;
-  padding-right: 5px;
-  *padding-top: 2px;
-  *padding-bottom: 2px;
 }
-.btn-group > .btn-small + .dropdown-toggle {
-  *padding-top: 5px;
-  *padding-bottom: 4px;
-}
-.btn-group > .btn-large + .dropdown-toggle {
+.btn-group > .btn-lg + .dropdown-toggle {
   padding-left: 12px;
   padding-right: 12px;
-  *padding-top: 7px;
-  *padding-bottom: 7px;
 }
 
-.btn-group.open {
-
-  // The clickable button for toggling the menu
-  // Remove the gradient and set the same inset shadow as the :active state
-  .dropdown-toggle {
-    background-image: none;
-    @include box-shadow(inset 0 2px 4px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05));
-  }
-
-  // Keep the hover's background when dropdown is open
-  .btn.dropdown-toggle {
-    background-color: $btnBackgroundHighlight;
-  }
-  .btn-primary.dropdown-toggle {
-    background-color: $btnPrimaryBackgroundHighlight;
-  }
-  .btn-warning.dropdown-toggle {
-    background-color: $btnWarningBackgroundHighlight;
-  }
-  .btn-danger.dropdown-toggle {
-    background-color: $btnDangerBackgroundHighlight;
-  }
-  .btn-success.dropdown-toggle {
-    background-color: $btnSuccessBackgroundHighlight;
-  }
-  .btn-info.dropdown-toggle {
-    background-color: $btnInfoBackgroundHighlight;
-  }
-  .btn-inverse.dropdown-toggle {
-    background-color: $btnInverseBackgroundHighlight;
-  }
+// The clickable button for toggling the menu
+// Remove the gradient and set the same inset shadow as the :active state
+.btn-group.open .dropdown-toggle {
+  @include box-shadow(inset 0 3px 5px rgba(0,0,0,.125));
 }
 
 
 // Reposition the caret
 .btn .caret {
-  margin-top: 8px;
   margin-left: 0;
 }
 // Carets in other button sizes
-.btn-large .caret {
-  margin-top: 6px;
-}
-.btn-large .caret {
-  border-left-width:  5px;
-  border-right-width: 5px;
-  border-top-width:   5px;
-}
-.btn-mini .caret,
-.btn-small .caret {
-  margin-top: 8px;
+.btn-lg .caret {
+  border-width: $caret-width-large $caret-width-large 0;
+  border-bottom-width: 0;
 }
 // Upside down carets for .dropup
-.dropup .btn-large .caret {
-  border-bottom-width: 5px;
+.dropup .btn-lg .caret {
+  border-width: 0 $caret-width-large $caret-width-large;
 }
 
 
-
-// Account for other colors
-.btn-primary,
-.btn-warning,
-.btn-danger,
-.btn-info,
-.btn-success,
-.btn-inverse {
-  .caret {
-    border-top-color: $white;
-    border-bottom-color: $white;
-  }
-}
-
-
-
 // Vertical button groups
 // ----------------------
 
 .btn-group-vertical {
-  display: inline-block; // makes buttons only take up the width they need
-  @include ie7-inline-block();
+  > .btn,
+  > .btn-group {
+    display: block;
+    float: none;
+    width: 100%;
+    max-width: 100%;
+  }
+
+  // Clear floats so dropdown menus can be properly placed
+  > .btn-group {
+    @include 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 {
-  display: block;
-  float: none;
-  max-width: 100%;
-  @include border-radius(0);
+  &:not(:first-child):not(:last-child) {
+    border-radius: 0;
+  }
+  &:first-child:not(:last-child) {
+    border-top-right-radius: $border-radius-base;
+    @include border-bottom-radius(0);
+  }
+  &:last-child:not(:first-child) {
+    border-bottom-left-radius: $border-radius-base;
+    @include border-top-radius(0);
+  }
 }
-.btn-group-vertical > .btn + .btn {
-  margin-left: 0;
-  margin-top: -1px;
+.btn-group-vertical > .btn-group:not(:first-child):not(:last-child) > .btn {
+  border-radius: 0;
 }
-.btn-group-vertical > .btn:first-child {
-  @include border-radius($baseBorderRadius $baseBorderRadius 0 0);
+.btn-group-vertical > .btn-group:first-child {
+  > .btn:last-child,
+  > .dropdown-toggle {
+    @include border-bottom-radius(0);
+  }
 }
-.btn-group-vertical > .btn:last-child {
-  @include border-radius(0 0 $baseBorderRadius $baseBorderRadius);
+.btn-group-vertical > .btn-group:last-child > .btn:first-child {
+  @include border-top-radius(0);
 }
-.btn-group-vertical > .btn-large:first-child {
-  @include border-radius($borderRadiusLarge $borderRadiusLarge 0 0);
+
+
+
+// Justified button groups
+// ----------------------
+
+.btn-group-justified {
+  display: table;
+  width: 100%;
+  table-layout: fixed;
+  border-collapse: separate;
+  .btn {
+    float: none;
+    display: table-cell;
+    width: 1%;
+  }
 }
-.btn-group-vertical > .btn-large:last-child {
-  @include border-radius(0 0 $borderRadiusLarge $borderRadiusLarge);
+
+
+// Checkbox and radio options
+[data-toggle="buttons"] > .btn > input[type="radio"],
+[data-toggle="buttons"] > .btn > input[type="checkbox"] {
+  display: none;
 }