wikijs/client/scss/components/search.scss

.searchresults {
	position: fixed;
	top: 50px;
	left: 0;
	right: 0;
	margin: 0 auto;
	width: 500px;
	z-index: 1;
	background-color: darken(mc('blue-grey', '900'), 2%);
  border: 1px solid mc('blue-grey', '900');
	box-shadow: 0 0 5px mc('blue-grey', '500');
	color: #FFF;
  transition: max-height 1s ease;

	&-enter-active, &-leave-active {
    overflow: hidden;
  }
  &-enter-to, &-leave {
    max-height: 500px;
  }
  &-enter, &-leave-to {
    max-height: 0px;
  }

	.searchresults-label {
    background-color: mc('blue-grey', '800');
		color: mc('blue-grey', '300');
		padding: 8px;
		font-size: 13px;
    letter-spacing: 1px;
    text-transform: uppercase;
    box-shadow: 0 0 5px rgba(0,0,0,0.3);
	}

	.searchresults-list {
    padding-bottom: 5px;

		> li {
			display: flex;
			font-size: 14px;
			transition: background-color .2s linear;

			&:nth-child(odd) {
				background-color: mc('blue-grey', '900');
			}

			&.is-active, &:hover {
				background-color: mc('blue-grey', '600');
				color: #FFF;
			}

			a {
				color: mc('blue-grey', '50');
				display: flex;
				align-items: center;
				height: 30px;
				padding: 0 20px;
				width: 100%;
				cursor: pointer;
			}

		}

	}

}