mirror of
https://github.com/the-djmaze/snappymail.git
synced 2024-12-28 02:21:06 +08:00
56 lines
1.3 KiB
Text
56 lines
1.3 KiB
Text
//
|
|
// Button groups
|
|
// --------------------------------------------------
|
|
|
|
|
|
// Make the div behave like a button
|
|
.btn-group {
|
|
position: relative;
|
|
white-space: nowrap; // prevent buttons from wrapping when in tight spaces (e.g., the table on the tests page)
|
|
}
|
|
|
|
.btn-group + .btn-group {
|
|
margin-left: 3px;
|
|
}
|
|
|
|
// Optional: Group multiple button groups together for a toolbar
|
|
.btn-toolbar {
|
|
.btn-group {
|
|
display: inline-block;
|
|
}
|
|
.btn + .btn,
|
|
.btn-group + .btn,
|
|
.btn + .btn-group {
|
|
margin-left: 3px;
|
|
}
|
|
}
|
|
|
|
// Float them, remove border radius, then re-add to first and last elements
|
|
.btn-group > .btn {
|
|
position: relative;
|
|
border-radius: 0;
|
|
}
|
|
.btn-group > .btn + .btn {
|
|
margin-left: -1px;
|
|
}
|
|
|
|
// 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;
|
|
border-top-left-radius: 3px;
|
|
border-bottom-left-radius: 3px;
|
|
}
|
|
// 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 {
|
|
border-top-right-radius: 3px;
|
|
border-bottom-right-radius: 3px;
|
|
}
|
|
|
|
// 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;
|
|
}
|