| // 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; |
| } |