// // Navs // -------------------------------------------------- // Base class // -------------------------------------------------- .nav { margin-bottom: 0; padding-left: 0; // Override default ul/ol list-style: none; .clearfix(); > li { position: relative; display: block; > a { position: relative; display: block; padding: @nav-link-padding; &:hover, &:focus { text-decoration: none; background-color: @nav-link-hover-bg; } } // Disabled state sets text to gray and nukes hover/tab effects &.disabled > a { color: @nav-disabled-link-color; &:hover, &:focus { color: @nav-disabled-link-hover-color; text-decoration: none; background-color: transparent; cursor: not-allowed; } } } // Open dropdowns .open > a { &, &:hover, &:focus { background-color: @nav-link-hover-bg; border-color: @link-color; } } // Dividers (basically an hr) within the dropdown .nav-divider { .nav-divider(); } // Prevent IE8 from misplacing imgs // See https://github.com/h5bp/html5-boilerplate/issues/984#issuecomment-3985989 > li > a > img { max-width: none; } } // NAV LIST // -------- .nav-list { padding-left: 15px; padding-right: 15px; 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, .nav-list > .active > a:focus { color: #ffffff; text-shadow: 0 -1px 0 rgba(0,0,0,.2); background-color: @link-color; } .nav-list [class^="icon-"], .nav-list [class*=" icon-"] { margin-right: 2px; } // Dividers (basically an hr) within the dropdown .nav-list .divider { .nav-divider(); } // Tabs // ------------------------- // Give the tabs something to sit on .nav-tabs { border-bottom: 1px solid @nav-tabs-border-color; > li { float: left; // Make the list-items overlay the bottom border margin-bottom: -1px; // Actual tabs (as links) > a { margin-right: 2px; line-height: @line-height-base; border: 1px solid transparent; border-radius: @border-radius-base @border-radius-base 0 0; &:hover { border-color: @nav-tabs-link-hover-border-color @nav-tabs-link-hover-border-color @nav-tabs-border-color; } } // Active state, and it's :hover to override normal :hover &.active > a { &, &:hover, &:focus { color: @nav-tabs-active-link-hover-color; background-color: @nav-tabs-active-link-hover-bg; border: 1px solid @nav-tabs-active-link-hover-border-color; border-bottom-color: transparent; cursor: default; } } } // pulling this in mainly for less shorthand &.nav-justified { .nav-justified(); .nav-tabs-justified(); } } // Pills // ------------------------- .nav-pills { > li { float: left; // Links rendered as pills > a { border-radius: 5px; } + li { margin-left: 2px; } // Active state &.active > a { &, &:hover, &:focus { color: @nav-pills-active-link-hover-color; background-color: @nav-pills-active-link-hover-bg; } } } } // Stacked pills .nav-stacked { > li { float: none; + li { margin-top: 2px; margin-left: 0; // no need for this gap between nav items } } } // Nav variations // -------------------------------------------------- // Justified nav links // ------------------------- .nav-justified { width: 100%; > li { float: none; > a { text-align: center; } } @media (min-width: @screen-sm) { > li { display: table-cell; width: 1%; } } } // Move borders to anchors instead of bottom of list .nav-tabs-justified { border-bottom: 0; > li > a { border-bottom: 1px solid @nav-tabs-justified-link-border-color; // Override margin from .nav-tabs margin-right: 0; } > .active > a { border-bottom-color: @nav-tabs-justified-active-link-border-color; } } // Tabbable tabs // ------------------------- // Clear any floats .tabbable { .clearfix(); } // Show/hide tabbable areas .tab-content > .tab-pane, .pill-content > .pill-pane { display: none; } .tab-content, .pill-content { > .active { display: block; } } // Dropdowns // ------------------------- // Make dropdown carets use link color in navs .nav .caret { border-top-color: @link-color; border-bottom-color: @link-color; } .nav a:hover .caret { border-top-color: @link-hover-color; border-bottom-color: @link-hover-color; } // Specific dropdowns .nav-tabs .dropdown-menu { // make dropdown border overlap tab border margin-top: -1px; // Remove the top rounded corners here since there is a hard edge above the menu .border-top-radius(0); }