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;
  transition: background-color 1s ease;

  /* THEME OVERRIDE - START */

	@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 a, a.nav-item {
        color: mc($color, '50');

        &:hover {
          color: mc($color, '200');
        }

      }

      h1:hover {
        color: mc($color, '100');
      }

			.nav-item {

				.button {
					background-color: mc($color, '800');

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

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

				}

			}

      .control {

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

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

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

        }

      }

		}
	}

  /* THEME OVERRIDE - END */

}

.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: stretch;
    padding: 0 0 0 10px;
  }
}

.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($primary, '100');
		}
	}

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

	// BUTTONS

	.button {
		border: none;
		background-color: mc($primary, '600');
		transition: all .4s ease;
		color: #FFF;
		border-radius: 0;
    height: auto;

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

    &.is-icon-only i {
      margin-right: 0;
    }

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

	}

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

		}

	}

}