66 lines
1.9 KiB
Plaintext
66 lines
1.9 KiB
Plaintext
|
// BUTTON GROUPS
|
||
|
|
// -------------
|
||
|
|
|
||
|
|
// Group multiple button groups together for a toolbar
|
||
|
|
.btn-toolbar {
|
||
|
|
.clearfix();
|
||
|
|
.btn-group {
|
||
|
|
float: left;
|
||
|
|
margin-right: 10px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// Clear the float
|
||
|
|
.btn-group {
|
||
|
|
.clearfix();
|
||
|
|
}
|
||
|
|
// Float them, remove border radius, then re-add to first and last elements
|
||
|
|
.btn-group .btn {
|
||
|
|
position: relative;
|
||
|
|
float: left;
|
||
|
|
margin-left: -1px;
|
||
|
|
.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
|
||
|
|
&:first-child {
|
||
|
|
margin-left: 0;
|
||
|
|
-webkit-border-top-left-radius: 4px;
|
||
|
|
-moz-border-radius-topleft: 4px;
|
||
|
|
border-top-left-radius: 4px;
|
||
|
|
-webkit-border-bottom-left-radius: 4px;
|
||
|
|
-moz-border-radius-bottomleft: 4px;
|
||
|
|
border-bottom-left-radius: 4px;
|
||
|
|
}
|
||
|
|
&:last-child {
|
||
|
|
-webkit-border-top-right-radius: 4px;
|
||
|
|
-moz-border-radius-topright: 4px;
|
||
|
|
border-top-right-radius: 4px;
|
||
|
|
-webkit-border-bottom-right-radius: 4px;
|
||
|
|
-moz-border-radius-bottomright: 4px;
|
||
|
|
border-bottom-right-radius: 4px;
|
||
|
|
}
|
||
|
|
// Reset corners for large buttons
|
||
|
|
&.large:first-child {
|
||
|
|
margin-left: 0;
|
||
|
|
-webkit-border-top-left-radius: 6px;
|
||
|
|
-moz-border-radius-topleft: 6px;
|
||
|
|
border-top-left-radius: 6px;
|
||
|
|
-webkit-border-bottom-left-radius: 6px;
|
||
|
|
-moz-border-radius-bottomleft: 6px;
|
||
|
|
border-bottom-left-radius: 6px;
|
||
|
|
}
|
||
|
|
&.large:last-child {
|
||
|
|
-webkit-border-top-right-radius: 6px;
|
||
|
|
-moz-border-radius-topright: 6px;
|
||
|
|
border-top-right-radius: 6px;
|
||
|
|
-webkit-border-bottom-right-radius: 6px;
|
||
|
|
-moz-border-radius-bottomright: 6px;
|
||
|
|
border-bottom-right-radius: 6px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
// On hover/focus/active, bring the proper btn to front
|
||
|
|
.btn-group .btn:hover,
|
||
|
|
.btn-group .btn:focus,
|
||
|
|
.btn-group .btn:active {
|
||
|
|
z-index: 2;
|
||
|
|
}
|