Show More
navs.less
242 lines
| 4.8 KiB
| text/x-less
|
LessCssLexer
r0 | // | |||
// Navs | ||||
// -------------------------------------------------- | ||||
// Base class | ||||
// -------------------------------------------------- | ||||
.nav { | ||||
margin-bottom: 0; | ||||
padding-left: 0; // Override default ul/ol | ||||
list-style: none; | ||||
&: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: @cursor-disabled; | ||||
} | ||||
} | ||||
} | ||||
// Open dropdowns | ||||
.open > a { | ||||
&, | ||||
&:hover, | ||||
&:focus { | ||||
background-color: @nav-link-hover-bg; | ||||
border-color: @link-color; | ||||
} | ||||
} | ||||
// 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(); | ||||
} | ||||
// Prevent IE8 from misplacing imgs | ||||
// | ||||
// See https://github.com/h5bp/html5-boilerplate/issues/984#issuecomment-3985989 | ||||
> li > a > img { | ||||
max-width: none; | ||||
} | ||||
} | ||||
// 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 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(); | ||||
} | ||||
} | ||||
// Pills | ||||
// ------------------------- | ||||
.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; | ||||
} | ||||
} | ||||
} | ||||
} | ||||
// 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; | ||||
margin-bottom: 5px; | ||||
} | ||||
} | ||||
> .dropdown .dropdown-menu { | ||||
top: auto; | ||||
left: auto; | ||||
} | ||||
@media (min-width: @screen-sm-min) { | ||||
> li { | ||||
display: table-cell; | ||||
width: 1%; | ||||
> a { | ||||
margin-bottom: 0; | ||||
} | ||||
} | ||||
} | ||||
} | ||||
// 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; | ||||
> li > a { | ||||
// Override margin from .nav-tabs | ||||
margin-right: 0; | ||||
border-radius: @border-radius-base; | ||||
} | ||||
> .active > a, | ||||
> .active > a:hover, | ||||
> .active > a:focus { | ||||
border: 1px solid @nav-tabs-justified-link-border-color; | ||||
} | ||||
@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; | ||||
} | ||||
} | ||||
} | ||||
// Tabbable tabs | ||||
// ------------------------- | ||||
// Hide tabbable panes to start, show them when `.active` | ||||
.tab-content { | ||||
> .tab-pane { | ||||
display: none; | ||||
} | ||||
> .active { | ||||
display: block; | ||||
} | ||||
} | ||||
// Dropdowns | ||||
// ------------------------- | ||||
// 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); | ||||
} | ||||