// --------------------------------------------------
// 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
float: left;
// Bring the "active" button to the front
&:hover,
- &:active {
+ &:focus,
+ &: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
}
+// 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
// ----------------------
padding-left: 8px;
padding-right: 8px;
}
-.btn-group > .btn-large + .dropdown-toggle {
+.btn-group > .btn-lg + .dropdown-toggle {
padding-left: 12px;
padding-right: 12px;
}
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
.btn-group-justified {
display: table;
width: 100%;
+ table-layout: fixed;
+ border-collapse: separate;
.btn {
float: none;
display: table-cell;
// 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;
}