/bower_components/bootstrap/less/navs.less |
@@ -0,0 +1,242 @@ |
// |
// 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); |
} |