d045e1be56
roots-actions.php: added responsive css framework file roots-options.php: changed default css classes for bootstrap v2.0.0 roots-scripts.php: updated less to v1.2.1, changed the load order and added new scripts for bootstrap v2.0.0 Added all of the new css, js, less asset files and updated all of the previous ones for bootstrap v2.0.0
148 lines
3.5 KiB
Plaintext
148 lines
3.5 KiB
Plaintext
// BUTTON GROUPS
|
|
// -------------
|
|
|
|
|
|
// Make the div behave like a button
|
|
.btn-group {
|
|
position: relative;
|
|
.clearfix(); // clears the floated buttons
|
|
.ie7-restore-left-whitespace();
|
|
}
|
|
|
|
// Space out series of button groups
|
|
.btn-group + .btn-group {
|
|
margin-left: 5px;
|
|
}
|
|
|
|
// Optional: Group multiple button groups together for a toolbar
|
|
.btn-toolbar {
|
|
margin-top: @baseLineHeight / 2;
|
|
margin-bottom: @baseLineHeight / 2;
|
|
.btn-group {
|
|
display: inline-block;
|
|
.ie7-inline-block();
|
|
}
|
|
}
|
|
|
|
// 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
|
|
.btn-group .btn: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;
|
|
}
|
|
.btn-group .btn:last-child,
|
|
.btn-group .dropdown-toggle {
|
|
-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
|
|
.btn-group .btn.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;
|
|
}
|
|
.btn-group .btn.large:last-child,
|
|
.btn-group .large.dropdown-toggle {
|
|
-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,
|
|
.btn-group .btn.active {
|
|
z-index: 2;
|
|
}
|
|
|
|
// On active and open, don't show outline
|
|
.btn-group .dropdown-toggle:active,
|
|
.btn-group.open .dropdown-toggle {
|
|
outline: 0;
|
|
}
|
|
|
|
|
|
|
|
// Split button dropdowns
|
|
// ----------------------
|
|
|
|
// Give the line between buttons some depth
|
|
.btn-group .dropdown-toggle {
|
|
padding-left: 8px;
|
|
padding-right: 8px;
|
|
@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);
|
|
.box-shadow(@shadow);
|
|
*padding-top: 5px;
|
|
*padding-bottom: 5px;
|
|
}
|
|
|
|
.btn-group.open {
|
|
// IE7's z-index only goes to the nearest positioned ancestor, which would
|
|
// make the menu appear below buttons that appeared later on the page
|
|
*z-index: @zindexDropdown;
|
|
|
|
// Reposition menu on open and round all corners
|
|
.dropdown-menu {
|
|
display: block;
|
|
margin-top: 1px;
|
|
.border-radius(5px);
|
|
}
|
|
|
|
.dropdown-toggle {
|
|
background-image: none;
|
|
@shadow: inset 0 1px 6px rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.05);
|
|
.box-shadow(@shadow);
|
|
}
|
|
}
|
|
|
|
// Reposition the caret
|
|
.btn .caret {
|
|
margin-top: 7px;
|
|
margin-left: 0;
|
|
}
|
|
.btn:hover .caret,
|
|
.open.btn-group .caret {
|
|
.opacity(100);
|
|
}
|
|
|
|
|
|
// Account for other colors
|
|
.btn-primary,
|
|
.btn-danger,
|
|
.btn-info,
|
|
.btn-success {
|
|
.caret {
|
|
border-top-color: @white;
|
|
.opacity(75);
|
|
}
|
|
}
|
|
|
|
// Small button dropdowns
|
|
.btn-small .caret {
|
|
margin-top: 4px;
|
|
}
|
|
|