diff options
Diffstat (limited to 'css/bootstrap/navs.less')
| -rw-r--r-- | css/bootstrap/navs.less | 526 |
1 files changed, 192 insertions, 334 deletions
diff --git a/css/bootstrap/navs.less b/css/bootstrap/navs.less index 4c38f7d..9e729b3 100644 --- a/css/bootstrap/navs.less +++ b/css/bootstrap/navs.less @@ -3,382 +3,240 @@ // -------------------------------------------------- -// BASE CLASS -// ---------- +// Base class +// -------------------------------------------------- .nav { - margin-left: 0; - margin-bottom: @baseLineHeight; + margin-bottom: 0; + padding-left: 0; // Override default ul/ol list-style: none; -} - -// Make links block level -.nav > li > a { - display: block; -} -.nav > li > a:hover { - text-decoration: none; - background-color: @grayLighter; -} - -// Redeclare pull classes because of specifity -.nav > .pull-right { - float: right; -} - -// Nav headers (for dropdowns and lists) -.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; -} - + &:extend(.clearfix all); + + > 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; + } + } -// NAV LIST -// -------- + // Nav dividers (deprecated with v3.0.1) + // + // This should have been removed in v3 with the dropping of `.nav-list`, but + // we missed it. We don't currently support this anywhere, but in the interest + // of maintaining backward compatibility in case you use it, it's deprecated. + .nav-divider { + .nav-divider(); + } -.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 { - color: @white; - text-shadow: 0 -1px 0 rgba(0,0,0,.2); - background-color: @linkColor; -} -.nav-list [class^="icon-"] { - margin-right: 2px; -} -// Dividers (basically an hr) within the dropdown -.nav-list .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; + } } - -// 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 -// ---- +// 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: 8px; - padding-bottom: 8px; - line-height: @baseLineHeight; - border: 1px solid transparent; - .border-radius(4px 4px 0 0); - &:hover { - border-color: @grayLighter @grayLighter #ddd; + 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 its :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(); } -} -// 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-top-radius(4px); -} -.nav-tabs.nav-stacked > li:last-child > a { - .border-bottom-radius(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 -// --------- - -.nav-tabs .dropdown-menu { - .border-radius(0 0 6px 6px); // remove the top rounded corners here since there is a hard edge above the menu -} -.nav-pills .dropdown-menu { - .border-radius(6px); // make rounded corners match the pills -} - -// Default dropdown links // ------------------------- -// Make carets use linkColor to start -.nav .dropdown-toggle .caret { - border-top-color: @linkColor; - border-bottom-color: @linkColor; - margin-top: 6px; -} -.nav .dropdown-toggle:hover .caret { - border-top-color: @linkColorHover; - border-bottom-color: @linkColorHover; -} -/* move down carets for tabs */ -.nav-tabs .dropdown-toggle .caret { - margin-top: 8px; +.nav-pills { + > li { + float: left; + + // Links rendered as pills + > a { + border-radius: @nav-pills-border-radius; + } + + 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; + } + } + } } -// Active dropdown links -// ------------------------- -.nav .active .dropdown-toggle .caret { - border-top-color: #fff; - border-bottom-color: #fff; -} -.nav-tabs .active .dropdown-toggle .caret { - border-top-color: @gray; - border-bottom-color: @gray; -} -// Active:hover dropdown links -// ------------------------- -.nav > .dropdown.active > a:hover { - cursor: pointer; -} - -// Open dropdowns -// ------------------------- -.nav-tabs .open .dropdown-toggle, -.nav-pills .open .dropdown-toggle, -.nav > li.dropdown.open.active > a:hover { - color: @white; - background-color: @grayLight; - border-color: @grayLight; -} -.nav li.dropdown.open .caret, -.nav li.dropdown.open.active .caret, -.nav li.dropdown.open a:hover .caret { - border-top-color: @white; - border-bottom-color: @white; - .opacity(100); +// Stacked pills +.nav-stacked { + > li { + float: none; + + li { + margin-top: 2px; + margin-left: 0; // no need for this gap between nav items + } + } } -// Dropdowns in stacked tabs -.tabs-stacked .open > a:hover { - border-color: @grayLight; -} +// Nav variations +// -------------------------------------------------- +// Justified nav links +// ------------------------- -// TABBABLE -// -------- +.nav-justified { + width: 100%; + > li { + float: none; + > a { + text-align: center; + margin-bottom: 5px; + } + } -// COMMON STYLES -// ------------- + > .dropdown .dropdown-menu { + top: auto; + left: auto; + } -// Clear any floats -.tabbable { - .clearfix(); -} -.tab-content { - overflow: auto; // prevent content from running below tabs + @media (min-width: @screen-sm-min) { + > li { + display: table-cell; + width: 1%; + > a { + margin-bottom: 0; + } + } + } } -// Remove border on bottom, left, right -.tabs-below > .nav-tabs, -.tabs-right > .nav-tabs, -.tabs-left > .nav-tabs { +// Move borders to anchors instead of bottom of list +// +// Mixin for adding on top the shared `.nav-justified` styles for our tabs +.nav-tabs-justified { 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; -} + > li > a { + // Override margin from .nav-tabs + margin-right: 0; + border-radius: @border-radius-base; + } -// BOTTOM -// ------ + > .active > a, + > .active > a:hover, + > .active > a:focus { + border: 1px solid @nav-tabs-justified-link-border-color; + } -.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; + @media (min-width: @screen-sm-min) { + > li > a { + border-bottom: 1px solid @nav-tabs-justified-link-border-color; + border-radius: @border-radius-base @border-radius-base 0 0; + } + > .active > a, + > .active > a:hover, + > .active > a:focus { + border-bottom-color: @nav-tabs-justified-active-link-border-color; + } } } -.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; -} +// Tabbable tabs +// ------------------------- -// 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; +// Hide tabbable panes to start, show them when `.active` +.tab-content { + > .tab-pane { + display: none; + } + > .active { + display: block; + } } +// Dropdowns +// ------------------------- -// DISABLED STATES -// --------------- - -// Gray out text -.nav > .disabled > a { - color: @grayLight; -} -// Nuke hover effects -.nav > .disabled > a:hover { - text-decoration: none; - background-color: transparent; - cursor: default; +// 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); } |