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
344 lines
6.1 KiB
Plaintext
344 lines
6.1 KiB
Plaintext
// NAVIGATIONS
|
|
// -----------
|
|
|
|
|
|
|
|
// BASE CLASS
|
|
// ----------
|
|
|
|
.nav {
|
|
margin-left: 0;
|
|
margin-bottom: @baseLineHeight;
|
|
list-style: none;
|
|
}
|
|
|
|
// Make links block level
|
|
.nav > li > a {
|
|
display: block;
|
|
}
|
|
.nav > li > a:hover {
|
|
text-decoration: none;
|
|
background-color: @grayLighter;
|
|
}
|
|
|
|
|
|
|
|
// NAV LIST
|
|
// --------
|
|
|
|
.nav-list {
|
|
padding-left: 14px;
|
|
padding-right: 14px;
|
|
margin-bottom: 0;
|
|
}
|
|
.nav-list > li > a,
|
|
.nav-list .nav-header {
|
|
display: block;
|
|
padding: 3px 15px;
|
|
margin-left: -15px;
|
|
margin-right: -15px;
|
|
text-shadow: 0 1px 0 rgba(255,255,255,.5);
|
|
}
|
|
.nav-list .nav-header {
|
|
font-size: 11px;
|
|
font-weight: bold;
|
|
line-height: @baseLineHeight;
|
|
color: @grayLight;
|
|
text-transform: uppercase;
|
|
}
|
|
.nav-list > li + .nav-header {
|
|
margin-top: 9px;
|
|
}
|
|
.nav-list .active > a {
|
|
color: @white;
|
|
text-shadow: 0 -1px 0 rgba(0,0,0,.2);
|
|
background-color: @linkColor;
|
|
}
|
|
.nav-list .icon {
|
|
margin-right: 2px;
|
|
}
|
|
|
|
|
|
|
|
// TABS AND PILLS
|
|
// -------------
|
|
|
|
// Common styles
|
|
.nav-tabs,
|
|
.nav-pills {
|
|
.clearfix();
|
|
}
|
|
.nav-tabs > li,
|
|
.nav-pills > li {
|
|
float: left;
|
|
}
|
|
.nav-tabs > li > a,
|
|
.nav-pills > li > a {
|
|
padding-right: 12px;
|
|
padding-left: 12px;
|
|
margin-right: 2px;
|
|
line-height: 14px; // keeps the overall height an even number
|
|
}
|
|
|
|
// TABS
|
|
// ----
|
|
|
|
// Give the tabs something to sit on
|
|
.nav-tabs {
|
|
border-bottom: 1px solid #ddd;
|
|
}
|
|
|
|
// Make the list-items overlay the bottom border
|
|
.nav-tabs > li {
|
|
margin-bottom: -1px;
|
|
}
|
|
|
|
// Actual tabs (as links)
|
|
.nav-tabs > li > a {
|
|
padding-top: 9px;
|
|
padding-bottom: 9px;
|
|
border: 1px solid transparent;
|
|
.border-radius(4px 4px 0 0);
|
|
&:hover {
|
|
border-color: @grayLighter @grayLighter #ddd;
|
|
}
|
|
}
|
|
// Active state, and it's :hover to override normal :hover
|
|
.nav-tabs > .active > a,
|
|
.nav-tabs > .active > a:hover {
|
|
color: @gray;
|
|
background-color: @white;
|
|
border: 1px solid #ddd;
|
|
border-bottom-color: transparent;
|
|
cursor: default;
|
|
}
|
|
|
|
// PILLS
|
|
// -----
|
|
|
|
// Links rendered as pills
|
|
.nav-pills > li > a {
|
|
padding-top: 8px;
|
|
padding-bottom: 8px;
|
|
margin-top: 2px;
|
|
margin-bottom: 2px;
|
|
.border-radius(5px);
|
|
}
|
|
|
|
// Active state
|
|
.nav-pills .active > a,
|
|
.nav-pills .active > a:hover {
|
|
color: @white;
|
|
background-color: @linkColor;
|
|
}
|
|
|
|
|
|
|
|
// STACKED NAV
|
|
// -----------
|
|
|
|
// Stacked tabs and pills
|
|
.nav-stacked > li {
|
|
float: none;
|
|
}
|
|
.nav-stacked > li > a {
|
|
margin-right: 0; // no need for the gap between nav items
|
|
}
|
|
|
|
// Tabs
|
|
.nav-tabs.nav-stacked {
|
|
border-bottom: 0;
|
|
}
|
|
.nav-tabs.nav-stacked > li > a {
|
|
border: 1px solid #ddd;
|
|
.border-radius(0);
|
|
}
|
|
.nav-tabs.nav-stacked > li:first-child > a {
|
|
.border-radius(4px 4px 0 0);
|
|
}
|
|
.nav-tabs.nav-stacked > li:last-child > a {
|
|
.border-radius(0 0 4px 4px);
|
|
}
|
|
.nav-tabs.nav-stacked > li > a:hover {
|
|
border-color: #ddd;
|
|
z-index: 2;
|
|
}
|
|
|
|
// Pills
|
|
.nav-pills.nav-stacked > li > a {
|
|
margin-bottom: 3px;
|
|
}
|
|
.nav-pills.nav-stacked > li:last-child > a {
|
|
margin-bottom: 1px; // decrease margin to match sizing of stacked tabs
|
|
}
|
|
|
|
|
|
|
|
// DROPDOWNS
|
|
// ---------
|
|
|
|
// Position the menu
|
|
.nav-tabs .dropdown-menu,
|
|
.nav-pills .dropdown-menu {
|
|
margin-top: 1px;
|
|
border-width: 1px;
|
|
}
|
|
.nav-pills .dropdown-menu {
|
|
.border-radius(4px);
|
|
}
|
|
|
|
// Default dropdown links
|
|
// -------------------------
|
|
// Make carets use linkColor to start
|
|
.nav-tabs .dropdown-toggle .caret,
|
|
.nav-pills .dropdown-toggle .caret {
|
|
border-top-color: @linkColor;
|
|
margin-top: 6px;
|
|
}
|
|
.nav-tabs .dropdown-toggle:hover .caret,
|
|
.nav-pills .dropdown-toggle:hover .caret {
|
|
border-top-color: @linkColorHover;
|
|
}
|
|
|
|
// Active dropdown links
|
|
// -------------------------
|
|
.nav-tabs .active .dropdown-toggle .caret,
|
|
.nav-pills .active .dropdown-toggle .caret {
|
|
border-top-color: @grayDark;
|
|
}
|
|
|
|
// Active:hover dropdown links
|
|
// -------------------------
|
|
.nav > .dropdown.active > a:hover {
|
|
color: @black;
|
|
cursor: pointer;
|
|
}
|
|
|
|
// Open dropdowns
|
|
// -------------------------
|
|
.nav-tabs .open .dropdown-toggle,
|
|
.nav-pills .open .dropdown-toggle,
|
|
.nav > .open.active > a:hover {
|
|
color: @white;
|
|
background-color: @grayLight;
|
|
border-color: @grayLight;
|
|
}
|
|
.nav .open .caret,
|
|
.nav .open.active .caret,
|
|
.nav .open a:hover .caret {
|
|
border-top-color: @white;
|
|
.opacity(100);
|
|
}
|
|
|
|
// Dropdowns in stacked tabs
|
|
.tabs-stacked .open > a:hover {
|
|
border-color: @grayLight;
|
|
}
|
|
|
|
|
|
|
|
// TABBABLE
|
|
// --------
|
|
|
|
|
|
// COMMON STYLES
|
|
// -------------
|
|
|
|
// Clear any floats
|
|
.tabbable {
|
|
.clearfix();
|
|
}
|
|
|
|
// Remove border on bottom, left, right
|
|
.tabs-below .nav-tabs,
|
|
.tabs-right .nav-tabs,
|
|
.tabs-left .nav-tabs {
|
|
border-bottom: 0;
|
|
}
|
|
|
|
// Show/hide tabbable areas
|
|
.tab-content > .tab-pane,
|
|
.pill-content > .pill-pane {
|
|
display: none;
|
|
}
|
|
.tab-content > .active,
|
|
.pill-content > .active {
|
|
display: block;
|
|
}
|
|
|
|
|
|
// BOTTOM
|
|
// ------
|
|
|
|
.tabs-below .nav-tabs {
|
|
border-top: 1px solid #ddd;
|
|
}
|
|
.tabs-below .nav-tabs > li {
|
|
margin-top: -1px;
|
|
margin-bottom: 0;
|
|
}
|
|
.tabs-below .nav-tabs > li > a {
|
|
.border-radius(0 0 4px 4px);
|
|
&:hover {
|
|
border-bottom-color: transparent;
|
|
border-top-color: #ddd;
|
|
}
|
|
}
|
|
.tabs-below .nav-tabs .active > a,
|
|
.tabs-below .nav-tabs .active > a:hover {
|
|
border-color: transparent #ddd #ddd #ddd;
|
|
}
|
|
|
|
// LEFT & RIGHT
|
|
// ------------
|
|
|
|
// Common styles
|
|
.tabs-left .nav-tabs > li,
|
|
.tabs-right .nav-tabs > li {
|
|
float: none;
|
|
}
|
|
.tabs-left .nav-tabs > li > a,
|
|
.tabs-right .nav-tabs > li > a {
|
|
min-width: 74px;
|
|
margin-right: 0;
|
|
margin-bottom: 3px;
|
|
}
|
|
|
|
// Tabs on the left
|
|
.tabs-left .nav-tabs {
|
|
float: left;
|
|
margin-right: 19px;
|
|
border-right: 1px solid #ddd;
|
|
}
|
|
.tabs-left .nav-tabs > li > a {
|
|
margin-right: -1px;
|
|
.border-radius(4px 0 0 4px);
|
|
}
|
|
.tabs-left .nav-tabs > li > a:hover {
|
|
border-color: @grayLighter #ddd @grayLighter @grayLighter;
|
|
}
|
|
.tabs-left .nav-tabs .active > a,
|
|
.tabs-left .nav-tabs .active > a:hover {
|
|
border-color: #ddd transparent #ddd #ddd;
|
|
*border-right-color: @white;
|
|
}
|
|
|
|
// Tabs on the right
|
|
.tabs-right .nav-tabs {
|
|
float: right;
|
|
margin-left: 19px;
|
|
border-left: 1px solid #ddd;
|
|
}
|
|
.tabs-right .nav-tabs > li > a {
|
|
margin-left: -1px;
|
|
.border-radius(0 4px 4px 0);
|
|
}
|
|
.tabs-right .nav-tabs > li > a:hover {
|
|
border-color: @grayLighter @grayLighter @grayLighter #ddd;
|
|
}
|
|
.tabs-right .nav-tabs .active > a,
|
|
.tabs-right .nav-tabs .active > a:hover {
|
|
border-color: #ddd #ddd #ddd transparent;
|
|
*border-left-color: @white;
|
|
}
|