ddea8b597f
- Move Bootstrap LESS files into new subdirectory - Change app.css to app.less, add @import's to utilize Bootstrap variables and mixins - Remove plugins.js and main.js - Move Bootstrap JS plugins into new subdirectory - Add new _main.js file with example DOM-based routing script that works off the WordPress body_class - lib/scripts.php has been updated to remove all extra CSS and JS files and also places JavaScript in the footer
246 lines
6.0 KiB
Plaintext
Executable File
246 lines
6.0 KiB
Plaintext
Executable File
//
|
|
// Button groups
|
|
// --------------------------------------------------
|
|
|
|
|
|
// Make the div behave like a button
|
|
.btn-group {
|
|
position: relative;
|
|
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)
|
|
.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 {
|
|
font-size: 0; // Hack to remove whitespace that results from using inline-block
|
|
margin-top: @baseLineHeight / 2;
|
|
margin-bottom: @baseLineHeight / 2;
|
|
.btn-group {
|
|
display: inline-block;
|
|
.ie7-inline-block();
|
|
}
|
|
.btn + .btn,
|
|
.btn-group + .btn,
|
|
.btn + .btn-group {
|
|
margin-left: 5px;
|
|
}
|
|
}
|
|
|
|
// 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;
|
|
}
|
|
.btn-group > .btn,
|
|
.btn-group > .dropdown-menu {
|
|
font-size: @baseFontSize; // redeclare as part 2 of font-size inline-block hack
|
|
}
|
|
|
|
// Reset fonts for other sizes
|
|
.btn-group > .btn-mini {
|
|
font-size: 11px;
|
|
}
|
|
.btn-group > .btn-small {
|
|
font-size: 12px;
|
|
}
|
|
.btn-group > .btn-large {
|
|
font-size: 16px;
|
|
}
|
|
|
|
// 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;
|
|
}
|
|
// 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 {
|
|
-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 > .btn + .dropdown-toggle {
|
|
padding-left: 8px;
|
|
padding-right: 8px;
|
|
.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 {
|
|
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;
|
|
.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;
|
|
}
|
|
}
|
|
|
|
|
|
// Reposition the caret
|
|
.btn .caret {
|
|
margin-top: 8px;
|
|
margin-left: 0;
|
|
}
|
|
// Carets in other button sizes
|
|
.btn-mini .caret,
|
|
.btn-small .caret,
|
|
.btn-large .caret {
|
|
margin-top: 6px;
|
|
}
|
|
.btn-large .caret {
|
|
border-left-width: 5px;
|
|
border-right-width: 5px;
|
|
border-top-width: 5px;
|
|
}
|
|
// Upside down carets for .dropup
|
|
.dropup .btn-large .caret {
|
|
border-bottom: 5px solid @black;
|
|
border-top: 0;
|
|
}
|
|
|
|
|
|
|
|
// 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
|
|
.ie7-inline-block();
|
|
}
|
|
.btn-group-vertical .btn {
|
|
display: block;
|
|
float: none;
|
|
width: 100%;
|
|
.border-radius(0);
|
|
}
|
|
.btn-group-vertical .btn + .btn {
|
|
margin-left: 0;
|
|
margin-top: -1px;
|
|
}
|
|
.btn-group-vertical .btn:first-child {
|
|
.border-radius(4px 4px 0 0);
|
|
}
|
|
.btn-group-vertical .btn:last-child {
|
|
.border-radius(0 0 4px 4px);
|
|
}
|
|
.btn-group-vertical .btn-large:first-child {
|
|
.border-radius(6px 6px 0 0);
|
|
}
|
|
.btn-group-vertical .btn-large:last-child {
|
|
.border-radius(0 0 6px 6px);
|
|
}
|