Discovery engine prototype

src/scss/app.scss

@@ -22,6 +22,7 @@
 @import 'components/header';
 @import 'components/notifications';
 @import 'components/dropdown-field';
+@import 'components/autocomplete-field';
 @import 'components/debug';
 
 @import 'views/artist';

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%);
+				}
+			}
+		}
+	}
+}
+

src/scss/global/_forms.scss

@@ -80,16 +80,30 @@ input[type="submit"] {
 	}
 
 	&.secondary {
-		color: #000000;
-		border-color: #000000;
+		color: $black;
+		border-color: $black;
 		&:hover {
-			color: lighten( #000000, 40% );
-			border-color: lighten( #000000, 40% );
+			color: lighten( $black, 40% );
+			border-color: lighten( $black, 40% );
 		}
 		&:active {
-			color: #FFFFFF;
-			background: #000000;
-			border-color: #000000;
+			color: $white;
+			background: $black;
+			border-color: $black;
+		}
+	}
+
+	&.alternative {
+		color: $blue;
+		border-color: $blue;
+		&:hover {
+			color: darken($blue, 10%);
+			border-color: darken($blue, 10%);
+		}
+		&:active {
+			color: $white;
+			background: $blue;
+			border-color: $blue;
 		}
 	}
 

src/scss/views/_discover.scss

@@ -1,7 +1,92 @@
 
 .discover-view {
-	section {
-		padding: 40px;
+	
+	.intro {
+		position: relative;
+		padding: 60px 40px;
+
+		.parallax {
+			position: absolute;
+			top: 0;
+			left: 0;
+			width: 100%;
+			height: 100%;
+			z-index: 1;
+		}
+
+		.liner {
+			z-index: 2;
+			position: relative;
+			color: $white;
+
+			h1 {
+				padding-bottom: 8px;
+			}
+
+			h3 {
+				padding-bottom: 40px;
+				opacity: 0.5;
+			}
+		}
+	}
+
+	.seeds {
+
+		.seed {
+			display: inline-block;
+			background: $blue;
+			color: $white;
+			padding: 8px 26px 8px 14px;
+			font-size: 16px;
+			position: relative;
+			vertical-align: top;
+			margin: 0 10px 10px 0;
+
+			.type {
+				display: inline-block;
+				font-size: 12px;
+				opacity: 0.5;
+				padding: 0 10px 0 5px;
+			}
+
+			.remove {
+				font-size: 10px;
+				padding: 12px;
+				position: absolute;
+				top: 0;
+				right: 0;
+				cursor: pointer;
+			}
+		}
+	}
+
+	.autocomplete-field {
+		width: 250px;
+		display: inline-block;
+		vertical-align: top;
+		padding: 0;
+
+		.input {
+			float: none;
+			margin: 0 10px 10px 0;
+
+			input {
+				background: rgba(100,100,100,0.5);
+				color: $white;
+				padding: 7px 13px;
+				font-size: 16px;
+				border: 1px solid transparent;
+
+				&:focus,
+				&:active {
+					border-color: $blue;
+				}
+			}
+
+			&:after {
+				background: $blue;
+			}
+		}
 	}
 
 	@include responsive( $bp_medium ){