wikijs/client/scss/components/nav.scss

.nav {
	align-items: stretch;
	background-color: mc($primary, '500');
	display: flex;
	min-height: 50px;
	position: relative;
	text-align: center;
	box-shadow: 0 2px 3px rgba(mc($primary, '500'), 0.2);
	z-index: 2;
	color: #FFF;

	@each $color, $colorvalue in $material-colors {
		&.is-#{$color} {
			background-color: mc($color, '500');
			box-shadow: 0 2px 3px rgba(mc($color, '500'), 0.2);

			.nav-item {

				.button {
					border: 1px solid mc($color, '900');
					background-color: mc($color, '800');

					&.is-outlined {
						background-color: mc($color, '600');
						border-color: mc($color, '800');
						color: mc($color, '100');
					}

					&:hover {
						border-color: mc($color, '900');
						background-color: mc($color, '900');
					}

				}

			}

		}
	}

}

.nav-left {
	align-items: stretch;
	display: flex;
	flex-basis: 0;
	flex-grow: 1;
	justify-content: flex-start;
	overflow: hidden;
	overflow-x: auto;
	white-space: nowrap;
}

.nav-center {
	align-items: stretch;
	display: flex;
	justify-content: center;
	margin-left: auto;
	margin-right: auto;
}

.nav-right {
	@include tablet {
		align-items: stretch;
		display: flex;
		flex-basis: 0;
		flex-grow: 1;
		justify-content: flex-end;
	}
}

.nav-item {
	align-items: center;
	display: flex;
	justify-content: center;
	padding: 0 10px;

	// LINKS

	@at-root .nav-item a, a.nav-item {
		color: mc($primary, '50');
		transition: color .4s ease;
		cursor: pointer;

		&:hover {
			color: mc($primary, '200');
			text-decoration: none;
		}

	}

	// LOGO

	img {
		max-height: 34px;
	}

	// HEADERS

	h1 {
		font-size: 16px;
		font-weight: 400;
		letter-spacing: 0.5px;
		text-transform: uppercase;
		transition: color .4s ease;
		color: #FFF;
		padding-left: 10px;

		i {
			margin-right: 8px;
		}

		&:hover {
			color: mc('indigo', '100');
		}
	}

	@at-root h2.nav-item, .nav-item h2 {
		color: mc($primary, '50');
	}

	// BUTTONS

	.button {
		border: 1px solid mc($primary, '900');
		background-color: mc($primary, '800');
		transition: all .4s ease;
		color: #FFF;
		border-radius: 0;

		&:first-child {
			border-top-left-radius: 4px;
			border-bottom-left-radius: 4px;
		}

		&:last-child {
			border-top-right-radius: 4px;
			border-bottom-right-radius: 4px;
		}

		&.is-outlined {
			background-color: mc($primary, '600');
			border-color: mc($primary, '800');
			color: mc($primary, '100');
		}

		&:hover {
			border-color: mc($primary, '900');
			background-color: mc($primary, '900');
			color: #FFF;
		}

	}

	.button + .button {
		margin-left: 1px;
	}

	// INPUTS

	.control {

		input[type=text] {
			background-color: mc($primary, '800');
			border-color: mc($primary, '400');
			color: mc($primary, '50');

			&:focus {
				border-color: mc($primary, '200');
				box-shadow: inset 0 0 5px 0 rgba(mc($primary, '900'), 0.5);
			}

			@include placeholder {
				color: mc($primary, '200');
			}

		}

	}

}