bootstrap-less-port/less/_navbar.less

A Less port of Bootstrap v4

// Contents
//
// Navbar
// Navbar brand
// Navbar nav
// Navbar text
// Navbar divider
// Responsive navbar
// Navbar position
// Navbar themes


// Navbar
//
// Provide a static navbar from which we expand to create full-width, fixed, and
// other navbar variations.
// LESS PORT: Because of the way `:extend()` works in Less (and the workaround we’re using to
// emulate Sass’ placeholder selectors) we need to include the selectors that extend the
// placeholders at the root. Then `&:extend(<placeholder> all)` will attach the selectors to every
// instance of the placeholder.
.container,
.container-fluid {
	&:extend(\%container-flex-properties all);
}
.navbar {
	position: relative;
	display: flex;
	flex-wrap: wrap; // allow us to do the line break for collapsing content
	align-items: center;
	justify-content: space-between; // space out brand from logo
	padding: @navbar-padding-y @navbar-padding-x;

	// Because flex properties aren't inherited, we need to redeclare these first
	// few properties so that content nested within behave properly.
	// LESS PORT: Unfortunately we have to use an actual selector here in order to be able to
	// `:extend()` it later. This means that the selector is output in the compiled CSS, creating a
	// small disparity between the Less and Sass versions.
	// LESS PORT: The `-@{breakpoint}` suffix is omitted from the selector here since it’s not needed
	// with the `:extend()` workaround we’re using.
	\%container-flex-properties {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
	}

	// LESS PORT: Because of the way `:extend()` works in Less (and the workaround we’re using to
	// emulate Sass’ placeholder selectors) we include this selector at the root, instead.  (We also
	// omit the `-@{breakpoint}` suffix since it’s not needed.)
	// .container,
	// .container-fluid {
	// 	&:extend(\%container-flex-properties);
	// }

	// LESS PORT: Since we `&:extend(.container-fluid all)` in `_grid.less` we don’t need to output
	// the container-max-width selectors here. Using the `all` means the container-max-width
	// selectors will already be attached to all instances of `.container-fluid`.
	// each(@container-max-widths, #(@container-max-width, @breakpoint) {
	// 	// LESS PORT: A variable is required here to do the selector interpolation, since an
	// 	// expression cannot be interpolated like in the Sass version.
	// 	@infix: breakpoint-infix(@breakpoint, @container-max-widths);
	// 	// LESS PORT: The Sass version actually uses `> .container` here but that doesn’t seem to
	// 	// match the output CSS, so we‘re omitting it.
	// 	.container@{infix} {
	// 		&:extend(.navbar \%container-flex-properties);
	// 	}
	// });
}


// Navbar brand
//
// Used for brand, project, or site names.

.navbar-brand {
	display: inline-block;
	padding-top: @navbar-brand-padding-y;
	padding-bottom: @navbar-brand-padding-y;
	margin-right: @navbar-padding-x;
	#font-size(@navbar-brand-font-size);
	line-height: inherit;
	white-space: nowrap;

	#hover-focus({
		text-decoration: none;
	});
}


// Navbar nav
//
// Custom navbar navigation (doesn't require `.nav`, but does make use of `.nav-link`).

.navbar-nav {
	display: flex;
	flex-direction: column; // cannot use `inherit` to get the `.navbar`s value
	padding-left: 0;
	margin-bottom: 0;
	list-style: none;

	.nav-link {
		padding-right: 0;
		padding-left: 0;
	}

	.dropdown-menu {
		position: static;
		float: none;
	}
}


// Navbar text
//
//

.navbar-text {
	display: inline-block;
	padding-top: @nav-link-padding-y;
	padding-bottom: @nav-link-padding-y;
}


// Responsive navbar
//
// Custom styles for responsive collapsing and toggling of navbar contents.
// Powered by the collapse Bootstrap JavaScript plugin.

// When collapsed, prevent the toggleable navbar contents from appearing in
// the default flexbox row orientation. Requires the use of `flex-wrap: wrap`
// on the `.navbar` parent.
.navbar-collapse {
	flex-basis: 100%;
	flex-grow: 1;
	// For always expanded or extra full navbars, ensure content aligns itself
	// properly vertically. Can be easily overridden with flex utilities.
	align-items: center;
}

// Button for toggling the navbar when in its collapsed state
.navbar-toggler {
	padding: @navbar-toggler-padding-y @navbar-toggler-padding-x;
	#font-size(@navbar-toggler-font-size);
	line-height: 1;
	background-color: transparent; // remove default button style
	border: @border-width solid transparent; // remove default button style
	#border-radius(@navbar-toggler-border-radius);

	#hover-focus({
		text-decoration: none;
	});
}

// Keep as a separate element so folks can easily override it with another icon
// or image file as needed.
.navbar-toggler-icon {
	display: inline-block;
	width: 1.5em;
	height: 1.5em;
	vertical-align: middle;
	content: "";
	background: 50% ~"/" 100% 100% no-repeat;
}

.navbar-nav-scroll {
	max-height: @navbar-nav-scroll-max-height;
	overflow-y: auto;
}

// Generate series of `.navbar-expand-*` responsive classes for configuring
// where your navbar collapses.
//.navbar-expand {
//  @each $breakpoint in map-keys($grid-breakpoints) {
//    $next: breakpoint-next($breakpoint, $grid-breakpoints);
//    $infix: breakpoint-infix($next, $grid-breakpoints);
//
//    &#{$infix} {
//      @include media-breakpoint-down($breakpoint) {
//        %container-navbar-expand-#{$breakpoint} {
//          padding-right: 0;
//          padding-left: 0;
//        }
//
//        > .container,
//        > .container-fluid {
//          @extend %container-navbar-expand-#{$breakpoint};
//        }
//
//        @each $size, $container-max-width in $container-max-widths {
//          > .container#{breakpoint-infix($size, $container-max-widths)} {
//            @extend %container-navbar-expand-#{$breakpoint};
//          }
//        }
//      }
//
//      @include media-breakpoint-up($next) {
//        flex-flow: row nowrap;
//        justify-content: flex-start;
//
//        .navbar-nav {
//          flex-direction: row;
//
//          .dropdown-menu {
//            position: absolute;
//          }
//
//          .nav-link {
//            padding-right: $navbar-nav-link-padding-x;
//            padding-left: $navbar-nav-link-padding-x;
//          }
//        }
//
//        // For nesting containers, have to redeclare for alignment purposes
//        %container-nesting-#{$breakpoint} {
//          flex-wrap: nowrap;
//        }
//
//        > .container,
//        > .container-fluid {
//          @extend %container-nesting-#{$breakpoint};
//        }
//
//        @each $size, $container-max-width in $container-max-widths {
//          > .container#{breakpoint-infix($size, $container-max-widths)} {
//            @extend %container-nesting-#{$breakpoint};
//          }
//        }
//
//        .navbar-nav-scroll {
//          overflow: visible;
//        }
//
//        .navbar-collapse {
//          display: flex !important; // stylelint-disable-line declaration-no-important
//
//          // Changes flex-bases to auto because of an IE10 bug
//          flex-basis: auto;
//        }
//
//        .navbar-toggler {
//          display: none;
//        }
//      }
//    }
//  }
//}
// LESS PORT: Because of the way `:extend()` works in Less (and the workaround we’re using to
// emulate Sass’ placeholder selectors) we need to include the selectors that extend the
// placeholders at the root. Then `&:extend(<placeholder> all)` will attach the selectors to every
// instance of the placeholder.
> .container,
> .container-fluid {
	&:extend(\%container-navbar-expand all);
	&:extend(\%container-nesting all);
}
each(map-keys(@grid-breakpoints), #(@breakpoint) {
	.navbar-expand {
		@next: breakpoint-next(@breakpoint, @grid-breakpoints);
		@infix: breakpoint-infix(@next, @grid-breakpoints);

		&@{infix} {
			#media-breakpoint-down(@breakpoint, {
				// LESS PORT: Unfortunately we have to use an actual selector here in order to be able
				// to `:extend()` it later. This means that the selector is output in the compiled CSS,
				// creating a small disparity between the Less and Sass versions.
				// LESS PORT: The `-@{breakpoint}` suffix is omitted from the selector here since it’s
				// not needed with the `:extend()` workaround we’re using.
				> \%container-navbar-expand {
					padding-right: 0;
					padding-left: 0;
				}

				// LESS PORT: Because of the way `:extend()` works in Less (and the workaround we’re
				// using to emulate Sass’ placeholder selectors) we include this selector at the root,
				// instead. (We also omit the `-@{breakpoint}` suffix since it’s not needed.)
				// > .container,
				// > .container-fluid {
				// 	&:extend(\%container-navbar-expand-@{breakpoint});
				// }

				// LESS PORT: Since we `&:extend(.container-fluid all)` in `_grid.less` we don’t need to
				// output the container-max-width selectors here. Using the `all` means the
				// container-max-width selectors will already be attached to all instances of
				// `.container-fluid`.
				// each(@container-max-widths, #(@container-max-width, @size) {
				// 	// LESS PORT: A variable is required here to do the selector interpolation, since an
				// 	// expression cannot be interpolated like in the Sass version.
				// 	@infix: breakpoint-infix(@size, @container-max-widths);
				// 	> .container@{infix} {
				// 		&:extend(\%container-navbar-expand-@{breakpoint});
				// 	}
				// });
			});

			#media-breakpoint-up(@next, {
				flex-flow: row nowrap;
				justify-content: flex-start;

				.navbar-nav {
					flex-direction: row;

					.dropdown-menu {
						position: absolute;
					}

					.nav-link {
						padding-right: @navbar-nav-link-padding-x;
						padding-left: @navbar-nav-link-padding-x;
					}
				}

				// For nesting containers, have to redeclare for alignment purposes
				// LESS PORT: Unfortunately we have to use an actual selector here in order to be able
				// to `:extend()` it later. This means that the selector is output in the compiled CSS,
				// creating a small disparity between the Less and Sass versions.
				// LESS PORT: The `-@{breakpoint}` suffix is omitted from the selector here since it’s
				// not needed with the `:extend()` workaround we’re using. We also have to prefix with
				// a `>` so that the immediate decendant selector will be included when we `:extend()`.
				> \%container-nesting {
					flex-wrap: nowrap;
				}

				// LESS PORT: The `-@{breakpoint}` suffix is omitted from the  since the
				// \%container-nesting-@{breakpoint} {
				// 	flex-wrap: nowrap;
				// }

				// LESS PORT: Because of the way `:extend()` works in Less (and the workaround we’re
				// using to emulate Sass’ placeholder selectors) we include this selector at the root,
				// instead. (We also omit the `-@{breakpoint}` suffix since it’s not needed.)
				// > .container,
				// > .container-fluid {
				// 	&:extend(\%container-nesting-@{breakpoint});
				// }

				// LESS PORT: Since we `&:extend(.container-fluid all)` in `_grid.less` we don’t need to
				// output the container-max-width selectors here. Using the `all` means the
				// container-max-width selectors will already be attached to all instances of
				// `.container-fluid`.
				// each(@container-max-widths, #(@container-max-width, @size) {
				// 	// LESS PORT: A variable is required here to do the selector interpolation, since an
				// 	// expression cannot be interpolated like in the Sass version.
				// 	@infix: breakpoint-infix(@size, @container-max-widths);
				// 	> .container@{infix} {
				// 		&:extend(\%container-nesting-@{breakpoint});
				// 	}
				// });

				.navbar-nav-scroll {
					overflow: visible;
				}

				.navbar-collapse {
					display: flex !important;

					// Changes flex-bases to auto because of an IE10 bug
					flex-basis: auto;
				}

				.navbar-toggler {
					display: none;
				}
			});
		}
	}
});


// Navbar themes
//
// Styles for switching between navbars with light or dark background.

// Dark links against a light background
.navbar-light {
	.navbar-brand {
		color: @navbar-light-brand-color;

		#hover-focus({
			color: @navbar-light-brand-hover-color;
		});
	}

	.navbar-nav {
		.nav-link {
			color: @navbar-light-color;

			#hover-focus({
				color: @navbar-light-hover-color;
			});

			&.disabled {
				color: @navbar-light-disabled-color;
			}
		}

		.show > .nav-link,
		.active > .nav-link,
		.nav-link.show,
		.nav-link.active {
			color: @navbar-light-active-color;
		}
	}

	.navbar-toggler {
		color: @navbar-light-color;
		border-color: @navbar-light-toggler-border-color;
	}

	.navbar-toggler-icon {
		background-image: escape-svg(@navbar-light-toggler-icon-bg);
	}

	.navbar-text {
		color: @navbar-light-color;
		a {
			color: @navbar-light-active-color;

			#hover-focus({
				color: @navbar-light-active-color;
			});
		}
	}
}

// White links against a dark background
.navbar-dark {
	.navbar-brand {
		color: @navbar-dark-brand-color;

		#hover-focus({
			color: @navbar-dark-brand-hover-color;
		});
	}

	.navbar-nav {
		.nav-link {
			color: @navbar-dark-color;

			#hover-focus({
				color: @navbar-dark-hover-color;
			});

			&.disabled {
				color: @navbar-dark-disabled-color;
			}
		}

		.show > .nav-link,
		.active > .nav-link,
		.nav-link.show,
		.nav-link.active {
			color: @navbar-dark-active-color;
		}
	}

	.navbar-toggler {
		color: @navbar-dark-color;
		border-color: @navbar-dark-toggler-border-color;
	}

	.navbar-toggler-icon {
		background-image: escape-svg(@navbar-dark-toggler-icon-bg);
	}

	.navbar-text {
		color: @navbar-dark-color;
		a {
			color: @navbar-dark-active-color;

			#hover-focus({
				color: @navbar-dark-active-color;
			});
		}
	}
}