Discovery engine prototype

src/scss/components/_autocomplete-field.scss

@@ -0,0 +1,62 @@
+
+.autocomplete-field {
+	position: relative;
+
+	.input {
+		width: 100%;
+	}
+
+	&.loading {
+		.input {
+			position: relative;
+
+			&:after {
+				position: absolute;
+				display: block;
+				content: '';
+				background: rgba(255,255,255,0.2);
+				opacity: 1;
+			    animation: slideloader 1s infinite;
+				bottom: 0;
+				left: 0;
+				right: 0;
+				height: 4px;
+				z-index: 1;
+			}
+		}
+	}
+
+	.results {
+		position: absolute;
+		top: 37px;
+		left: 0;
+		right: 0;
+		z-index: 97;
+		background: $dark_grey;
+		color: $white;
+
+		.type {
+			&:not(:first-child){
+				padding-top: 5px;
+			}
+
+			h4 {
+				padding: 10px 14px 4px;
+				margin: 0;
+				font-size: 12px;
+			}
+
+			.result {
+				display: block;
+				padding: 10px 14px;
+				border-top: 1px solid lighten($dark_grey, 10%);
+				cursor: pointer;
+
+				&:hover {
+					background: lighten($dark_grey, 10%);
+				}
+			}
+		}
+	}
+}
+