navs.less
View Options

	//
	// 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;
	visibility: hidden;
	}
	> .active {
	display: block;
	visibility: visible;
	}
	}


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

File Metadata

Mime Type: text/plain
Expires: Mon, Jan 12, 07:41 (2 h, 45 m)
Storage Engine: blob
Storage Format: Raw Data
Storage Handle: 3340583
Default Alt Text: navs.less (4 KB)

navs.less
No OneTemporary
Actions

navs.less
View Options

File Metadata

Event Timeline

navs.lessNo OneTemporaryActions

navs.lessView Options

File Metadata

Event Timeline

navs.less
No OneTemporary
Actions

navs.less
View Options