Move Algolia styling to Styleguide

addon/styles/addon.css

@@ -14,6 +14,7 @@
 @import 'icon.css';
 @import 'sidebar-container.css';
 @import 'well.css';
+@import 'algolia-search.css';
 
 /* Helpers */
 @import 'helpers/index.css';

addon/styles/algolia-search.css

@@ -0,0 +1,78 @@
+#search-input {
+  border-radius: 18px;
+  border: 2px solid var(--color-card-border);
+  line-height: 30px;
+  padding-left: 8px;
+  width: 100%;
+}
+
+/* Dropdown styling */
+.ds-dropdown-results {
+  z-index: 1; /* makes sure that the search is above the version selector */
+}
+.ds-dropdown-menu {
+  width: 500px;
+  background-color: white;
+  color: black;
+  border-radius: 8px;
+  margin-top: 10px;
+  border: 2px solid var(--color-card-border);
+  overflow-x: hidden;
+}
+
+/* Dropdown header styling */
+.algolia-docsearch-suggestion__main {
+  background-color: var(--color-info);
+  padding: 8px 16px;
+}
+
+.algolia-docsearch-suggestion__main > .algolia-docsearch-suggestion--wrapper {
+  border: none;
+  padding: 0;
+}
+
+/* No results styling */
+.algolia-docsearch-suggestion--noresults {
+  color: var(--color-gray-600);
+  padding: 8px 16px;
+}
+
+/* Result styling */
+.algolia-docsearch-suggestion--wrapper {
+  display: flex;
+  border-bottom: 1px solid var(--color-card-border);
+  gap: 10px;
+  font-size: 14px;
+  padding: 8px 16px;
+}
+
+.algolia-docsearch-suggestion--subcategory-column {
+  flex-basis: 80px;
+  min-width: 80px;
+}
+
+.algolia-docsearch-suggestion--subcategory-column-text {
+  font-weight: bold;
+}
+
+/* Search sponsor styling */
+.powered-by-algolia {
+  display: flex;
+  justify-content: end;
+  margin: 8px;
+}
+.powered-by-algolia > a {
+  display: flex;
+}
+
+@media (min-width: 1008px) {
+  .navbar-list {
+    flex-grow: 1;
+  }
+}
+
+@media (max-width: 1007px) {
+  .ds-dropdown-menu {
+    width: calc(100vw - 2rem);
+  }
+}

docs/concepts/search.md

@@ -0,0 +1,3 @@
+# Algolia Search style overrides
+
+We use Algolia as search engine. This comes with some default styling which we've updated a bit to look nicer and fit more with our theme.