6f838a09b8
Moved the tests to the horizon portion since they test core functionality. This also required moving some of the templates, etc. that belong in horizon to their proper homes. Change-Id: I7d9758845b81e4b8bcf1ffaaff4f6e237b4fe9f8
354 lines
6.4 KiB
Plaintext
354 lines
6.4 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 headers (for dropdowns and lists)
|
|
.nav .nav-header {
|
|
display: block;
|
|
padding: 3px 15px;
|
|
font-size: 11px;
|
|
font-weight: bold;
|
|
line-height: @baseLineHeight;
|
|
color: @grayLight;
|
|
text-shadow: 0 1px 0 rgba(255,255,255,.5);
|
|
text-transform: uppercase;
|
|
}
|
|
// Space them out when they follow another list item (link)
|
|
.nav li + .nav-header {
|
|
margin-top: 9px;
|
|
}
|
|
|
|
|
|
// NAV LIST
|
|
// --------
|
|
|
|
.nav-list {
|
|
padding-left: 14px;
|
|
padding-right: 14px;
|
|
margin-bottom: 0;
|
|
}
|
|
.nav-list > li > a,
|
|
.nav-list .nav-header {
|
|
margin-left: -15px;
|
|
margin-right: -15px;
|
|
text-shadow: 0 1px 0 rgba(255,255,255,.5);
|
|
}
|
|
.nav-list > li > a {
|
|
padding: 3px 15px;
|
|
}
|
|
.nav-list .active > a,
|
|
.nav-list .active > a:hover {
|
|
color: @white;
|
|
text-shadow: 0 -1px 0 rgba(0,0,0,.2);
|
|
background-color: @linkColor;
|
|
}
|
|
.nav-list [class^="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();
|
|
}
|
|
.tab-content {
|
|
overflow: hidden; // prevent content from running below tabs
|
|
}
|
|
|
|
// 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;
|
|
}
|