Autocomplete search now in sidebar

src/scss/app.scss

@@ -7,6 +7,7 @@
 @import 'global/forms';
 
 @import 'components/context-menu';
+@import 'components/loader';
 @import 'components/modal';
 @import 'components/dragger';
 @import 'components/images';

src/scss/components/_autocomplete-field.scss

@@ -57,6 +57,18 @@
 				}
 			}
 		}
+
+		.all-results {
+			display: block;
+			padding: 10px 14px;
+			border-top: 1px solid lighten($dark_grey, 10%);
+			cursor: pointer;
+			font-weight: bold;
+
+			&:hover {
+				background: lighten($dark_grey, 10%);
+			}
+		}
 	}
 }
 

src/scss/components/_debug.scss

@@ -4,6 +4,7 @@
 	position: fixed;
 	top: 0;
 	right: 0;
+	z-index: 96;
 	padding: 10px;
 	background: rgba(0,0,0,0.5);
 	color: #FFFFFF;

src/scss/components/_loader.scss

@@ -0,0 +1,22 @@
+
+.body-loader {
+	padding: 50px 0;
+
+	.loader {
+		@include spin();
+		margin: 0 auto;
+		width: 30px;
+		height: 30px;
+		border: {
+			radius: 100%;
+			style: solid;
+			color: $mid_grey;
+			width: 2px;
+		}
+		border-top-color: transparent;
+	}
+
+	&.lazy-loader {
+		padding: 20px 0 40px;
+	}
+}

src/scss/components/_search-form.scss

@@ -1,6 +1,6 @@
 
 .search-form {
-	z-index: 2;
+	z-index: 3;
 	position: relative;
 
 	input {
@@ -18,6 +18,18 @@
 
 	&.sidebar {
 		padding: 10px 15px 0 15px;
+
+		.autocomplete-field {
+			.results {
+				top: 42px;
+			}
+
+			&.loading {
+				.input:after {
+					background: $turquoise;
+				}
+			}
+		}
 	}
 
 }

src/scss/views/_discover.scss

@@ -4,6 +4,7 @@
 	.intro {
 		position: relative;
 		padding: 60px 40px;
+		z-index: 1;
 
 		.parallax {
 			position: absolute;