• Home
• com.liferay
• com.liferay.frontend.theme.unstyled
• 6.0.69
• source code
• _navbar.scss

×

Project download

Many resources are needed to download a project. Please understand that we have to compensate our server costs. Thank you in advance.
Project price only 1 $

You can buy this project and download/modify it how often you want.

META-INF.resources._unstyled.css.clay.components._navbar.scss Maven / Gradle / Ivy

// Navbar

.navbar {
	align-items: center;
	border-width: 0;
	display: flex;
	flex-wrap: wrap;
	font-size: $navbar-font-size;
	justify-content: space-between;
	padding: $navbar-padding-y $navbar-padding-x;
	position: relative;

	%container-flex-properties {
		align-items: inherit;
		background-color: inherit;
		display: inherit;
		flex-wrap: inherit;
		justify-content: inherit;
	}

	.container,
	.container-fluid {
		@extend %container-flex-properties;
	}

	@each $breakpoint, $container-max-width in $container-max-widths {
		> .container#{breakpoint-infix($breakpoint, $container-max-widths)} {
			@extend %container-flex-properties;
		}
	}
}

.navbar-nowrap {
	flex-wrap: nowrap;

	.navbar-text {
		min-width: 0;
		white-space: nowrap;
	}
}

.navbar-nav,
.navbar-form {
	.dropdown-menu-right {
		left: auto;
		right: 0;
	}
}

.navbar-nav {
	display: flex;
	flex-wrap: inherit;
	list-style: none;
	margin-bottom: 0;
	padding-left: 0;

	.dropdown-menu {
		float: none;
	}

	.nav-item,
	.nav-item .dropdown {
		align-items: center;
		display: flex;
		word-wrap: normal;
		max-width: 100%;
	}

	.nav-item {
		> .custom-control,
		> .form-check {
			margin-bottom: 0;
			margin-left: $navbar-nav-link-padding-x;
			margin-right: $navbar-nav-link-padding-x;
		}
	}

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

.navbar-nav-expand {
	flex-grow: 1;
	min-width: 0;
}

.navbar-nav-last {
	margin-left: auto;
}

.nav-item-expand {
	flex-grow: 1;
	min-width: 0;
}

.nav-item-shrink {
	min-width: 0;
}

.navbar-title {
	font-size: $navbar-title-font-size;
	font-weight: $navbar-title-font-weight;
	margin-bottom: $navbar-title-margin-bottom;
	text-transform: $navbar-title-text-transform;
}

.navbar-text {
	display: inline-block;
	padding-bottom: $nav-link-padding-y;
	padding-left: $navbar-nav-link-padding-x;
	padding-right: $navbar-nav-link-padding-x;
	padding-top: $nav-link-padding-y;
}

.navbar-collapse {
	align-items: center;
	flex-grow: 1;
	flex-wrap: wrap;
	justify-content: space-between;
	width: 100%;

	.container,
	.container-fluid {
		padding-left: 0;
		padding-right: 0;
	}

	.dropdown-toggle .navbar-text-truncate {
		max-width: calc(100% - #{$navbar-text-truncate-spacer-right});
	}
}

.navbar-text-truncate {
	@include clay-css($navbar-text-truncate);
}

// Navbar Toggler

.navbar-toggler-icon {
	background-size: 100% 100%;
	background: no-repeat center center;
	content: '';
	display: inline-block;
	height: 1.5em;
	vertical-align: middle;
	width: 1.5em;
}

.navbar-toggler {
	background-color: transparent;
	border: $border-width solid transparent;

	@include border-radius($navbar-toggler-border-radius);

	font-size: $navbar-toggler-font-size;
	line-height: 1;
	padding: $navbar-toggler-padding-y $navbar-toggler-padding-x;

	&:hover {
		text-decoration: none;
	}

	&:focus {
		text-decoration: none;
		z-index: $zindex-navbar-toggler-focus;
	}

	&:not(:disabled):not(.disabled) {
		cursor: $navbar-toggler-cursor;
	}
}

.navbar-toggler-link {
	align-items: center;
	display: flex;
	border-width: 0;
	line-height: $line-height-base;
	max-width: 100%;
	padding: $navbar-brand-padding-y $navbar-nav-link-padding-x;
	position: relative;

	.lexicon-icon {
		min-width: 1em;
		margin-left: 3px;
		margin-top: 0;
	}
}

// Navbar Brand

.navbar-brand {
	display: inline-block;
	font-size: $navbar-brand-font-size;
	line-height: inherit;
	max-width: calc(100% - 72px);
	padding-bottom: $navbar-brand-padding-y;
	padding-left: $navbar-nav-link-padding-x;
	padding-right: $navbar-nav-link-padding-x;
	padding-top: $navbar-brand-padding-y;
	white-space: nowrap;

	&:hover,
	&:focus {
		text-decoration: none;
	}
}

// Navbar Form

.navbar-form {
	align-items: center;
	display: flex;
	padding-left: $navbar-nav-link-padding-x;
	padding-right: $navbar-nav-link-padding-x;

	> form {
		width: 100%;
	}
}

.navbar-form-autofit {
	flex-basis: 100px;
	flex-grow: 1;

	form {
		display: flex;
		width: 100%;
	}
}

// Navbar Overlay

.navbar-overlay {
	background-color: inherit;
	flex-wrap: inherit;
}

// Navbar Display Utilities

.navbar-breakpoint-d-block,
.navbar-breakpoint-d-inline-block,
.navbar-breakpoint-d-flex {
	display: none !important;
}

// Navbar Expand

.navbar-expand {
	@each $breakpoint in map-keys($grid-breakpoints) {
		$next: breakpoint-next($breakpoint, $grid-breakpoints);
		$infix: breakpoint-infix($next, $grid-breakpoints);

		// sm, md, lg, xl, .navbar-expand

		&#{$infix} {
			.nav-item .navbar-text-truncate {
				max-width: $navbar-text-truncate-max-width;
			}

			// .navbar-expand-sm, md, lg, xl

			@if not($infix == '') {
				@include media-breakpoint-down($breakpoint) {
					&.navbar-collapse-absolute {
						.navbar-collapse {
							background-color: inherit;
							left: 0;
							padding: 0 $navbar-padding-x;
							position: absolute;
							right: 0;
							top: 100%;
							z-index: $zindex-navbar-collapse-absolute;

							.container,
							.container-fluid {
								padding-left: $grid-gutter-width * 0.5;
								padding-right: $grid-gutter-width * 0.5;
							}

							.navbar-nav,
							.navbar-form {
								&:last-child {
									padding-bottom: $navbar-padding-y;
								}
							}
						}
					}

					.navbar-collapse {
						.nav-item,
						.nav-item .dropdown {
							display: block;
						}

						.navbar-text-truncate {
							max-width: 100%;
						}

						.navbar-nav {
							flex-direction: column;

							.dropdown-toggle .navbar-text-truncate {
								max-width: calc(
									100% - #{$navbar-text-truncate-spacer-right}
								);
							}

							.dropdown-divider {
								margin-left: math-sign($navbar-padding-x);
								margin-right: math-sign($navbar-padding-x);
							}

							.dropdown-item {
								&:hover,
								&:focus {
									background-color: transparent;
								}

								&.active {
									background-color: transparent;
								}
							}

							.dropdown-menu {
								background-color: transparent;
								border-width: 0;
								box-shadow: none;
								margin: 0;
								max-height: none;
								max-width: none;
								overflow: visible;
								padding: 0;
								position: static;
							}
						}
					}

					.show-dropdown-on-collapse {
						.dropdown-header,
						.dropdown-item {
							padding: $nav-link-padding-y
								$navbar-nav-link-padding-x;
						}

						.dropdown-menu {
							display: block;
						}

						.dropdown-toggle {
							display: none;
						}
					}

					.navbar-breakpoint-down-d-block {
						display: block !important;
					}

					.navbar-breakpoint-down-d-inline-block {
						display: inline-block !important;
					}

					.navbar-breakpoint-down-d-flex {
						display: flex !important;
					}

					.navbar-breakpoint-down-d-none {
						display: none !important;
					}
				}
			}

			// .navbar-expand-sm, md, lg, xl, .navbar-expand

			@include media-breakpoint-up($next) {
				@if not($infix == '') {
					.navbar-brand .navbar-text-truncate {
						max-width: $navbar-text-truncate-max-width;
					}

					.navbar-collapse {
						display: flex !important;
						width: auto;

						.dropdown-toggle .navbar-text-truncate {
							max-width: $navbar-text-truncate-max-width -
								$navbar-text-truncate-spacer-right;
						}
					}

					.navbar-toggler {
						display: none;
					}

					.navbar-breakpoint-d-block {
						display: block !important;
					}

					.navbar-breakpoint-d-inline-block {
						display: inline-block !important;
					}

					.navbar-breakpoint-d-flex {
						display: flex !important;
					}

					.navbar-breakpoint-d-none {
						display: none !important;
					}
				}
			}
		}
	}
}

// Navbar Overlay Styles for `.navbar-overlay-xs-down`,
// `.navbar-overlay-sm-down`, `.navbar-overlay-md-down`,
// `.navbar-overlay-lg-down`, `.navbar-overlay-up`

@each $breakpoint in map-keys($grid-breakpoints) {
	$index: index(map-keys($grid-breakpoints), $breakpoint);
	$length: length(map-keys($grid-breakpoints));
	$infix: '.navbar-overlay-#{$breakpoint}-down';

	@if ($index == $length) {
		$infix: '.navbar-overlay-up';
	}

	#{$infix} {
		@include media-breakpoint-down($breakpoint) {
			@include border-radius($navbar-border-radius);

			bottom: 0;
			display: none;
			justify-content: space-between;
			left: 0;
			margin-left: 0;
			margin-right: 0;
			padding-bottom: $navbar-padding-y;
			padding-left: $navbar-padding-x;
			padding-right: $navbar-padding-x;
			padding-top: $navbar-padding-y;
			position: absolute;
			right: 0;
			top: 0;
			z-index: $zindex-navbar-overlay;

			&.show {
				display: flex;
			}
		}
	}
}

// Navbar Light

.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 {
		border-color: $navbar-light-toggler-border-color;
		color: $navbar-light-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;
			}
		}
	}
}

// Navbar Dark

.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 {
		border-color: $navbar-dark-toggler-border-color;
		color: $navbar-dark-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;
			}
		}
	}
}

// Navbar Underline

.navbar-underline {
	@include clay-navbar-variant($navbar-underline);
}