1 files changed, 75 insertions, 0 deletions
diff --git a/assets/scss/components/_search.scss b/assets/scss/components/_search.scss
new file mode 100644
index 0000000..3a70b2b
--- /dev/null
+++ b/assets/scss/components/_search.scss
@@ -0,0 +1,75 @@
+.navbar-form {
+  position: relative;
+}
+
+#suggestions {
+  position: absolute;
+  right: 0;
+  margin-top: 0.5rem;
+  width: calc(100vw - 3rem);
+}
+
+#suggestions a {
+  display: block;
+  text-decoration: none;
+  padding: 0.75rem;
+  margin: 0 0.5rem;
+}
+
+#suggestions a:focus {
+  background: $gray-100;
+  outline: 0;
+}
+
+#suggestions div:not(:first-child) {
+  border-top: 1px dashed $gray-200;
+}
+
+#suggestions div:first-child {
+  margin-top: 0.5rem;
+}
+
+#suggestions div:last-child {
+  margin-bottom: 0.5rem;
+}
+
+#suggestions a:hover {
+  background: $gray-100;
+}
+
+#suggestions span {
+  display: flex;
+  font-size: $font-size-base;
+}
+
+#suggestions span:first-child {
+  font-weight: $headings-font-weight;
+  color: $black;
+}
+
+#suggestions span:nth-child(2) {
+  color: $gray-700;
+}
+
+@include media-breakpoint-up(sm) {
+  #suggestions {
+    width: 30rem;
+  }
+
+  #suggestions a {
+    display: flex;
+  }
+
+  #suggestions span:first-child {
+    width: 9rem;
+    padding-right: 1rem;
+    border-right: 1px solid $gray-200;
+    display: inline-block;
+    text-align: right;
+  }
+
+  #suggestions span:nth-child(2) {
+    width: 19rem;
+    padding-left: 1rem;
+  }
+}