Cleanup algolia theming (#29888)

diff --git a/site/assets/scss/_algolia.scss b/site/assets/scss/_algolia.scss
index 5d9951dc3c1924d0ee4b1b4d5eb654c1f099c308..07b440d9757354717c731013b4469601d732a997 100644 (file)
--- a/site/assets/scss/_algolia.scss
+++ b/site/assets/scss/_algolia.scss
@@ -1,155 +1,99 @@
-// stylelint-disable declaration-no-important
+// Docsearch theming
 
-// Docsearch overrides
-//
-// `!important` indicates overridden properties.
 .algolia-autocomplete {
-  display: block !important;
-  flex: 1;
-
-  // Menu container
-  .ds-dropdown-menu {
-    width: 100%;
-    min-width: 0 !important;
-    max-width: none !important;
-    padding: .75rem 0 !important;
-    background-color: $white;
-    background-clip: padding-box;
-    border: 1px solid rgba(0, 0, 0, .1);
-    box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .175);
-
-    @include media-breakpoint-up(md) {
-      width: 175%;
-    }
-
-    // Caret
-    &::before {
-      display: none !important;
-    }
-
-    [class^="ds-dataset-"] {
-      padding: 0 !important;
-      overflow: visible !important;
-      background-color: transparent !important;
-      border: 0 !important;
-    }
-
-    .ds-suggestions {
-      margin-top: 0 !important;
-    }
-  }
+  width: 100%;
+}
 
-  .algolia-docsearch-suggestion {
-    padding: 0 !important;
-    overflow: visible !important;
+.ds-dropdown-menu {
+  width: 100%;
+  padding: $dropdown-padding-y 0;
+  margin: $dropdown-spacer 0 0;
+  @include font-size(.875rem);
+  background-color: $dropdown-bg;
+  border: $dropdown-border-width solid $dropdown-border-color;
+  @include border-radius($dropdown-border-radius);
+  @include box-shadow($dropdown-box-shadow);
+
+  @include media-breakpoint-up(md) {
+    // stylelint-disable declaration-no-important
+    right: 0 !important; // Override inline style
+    left: auto !important; // Override inline style
+    // stylelint-enable declaration-no-important
+    width: 400px;
   }
+}
 
-  .algolia-docsearch-suggestion--category-header {
-    padding: .125rem 1rem !important;
-    margin-top: 0 !important;
-    @include font-size(.875rem !important);
-    font-weight: 600 !important;
-    color: $bd-purple-bright !important;
-    border-bottom: 0 !important;
-  }
+.algolia-docsearch-suggestion--category-header {
+  padding: .125rem 1rem;
+  font-weight: 600;
+  color: $bd-purple-bright;
 
-  .algolia-docsearch-suggestion--wrapper {
-    float: none !important;
-    padding-top: 0 !important;
+  // stylelint-disable-next-line selector-class-pattern
+  :not(.algolia-docsearch-suggestion__main) > & {
+    display: none;
   }
 
-  // Section header
-  .algolia-docsearch-suggestion--subcategory-column {
-    float: none !important;
-    width: auto !important;
-    padding: 0 !important;
-    text-align: left !important;
+  .ds-suggestion:not(:first-child) & {
+    padding-top: .75rem;
+    margin-top: .75rem;
+    border-top: 1px solid rgba(0, 0, 0, .1);
   }
+}
 
-  .algolia-docsearch-suggestion--subcategory-inline {
-    display: block !important;
-    @include font-size(.875rem);
-    color: $gray-700;
+.algolia-docsearch-suggestion--content {
+  padding: .25rem 1rem;
 
-    &::after {
-      padding: 0 .25rem;
-      content: "/";
-    }
+  .ds-cursor & {
+    background-color: rgba($bd-purple-light, .2);
   }
+}
 
-  .algolia-docsearch-suggestion--content {
-    display: flex;
-    flex-wrap: wrap;
-    float: none !important;
-    width: 100% !important;
-    padding: .25rem 1rem !important;
-
-    // Vertical divider between column header and content
-    &::before {
-      display: none !important;
-    }
-  }
+.algolia-docsearch-suggestion {
+  display: block;
 
-  .ds-suggestion {
-    &:not(:first-child) {
-      .algolia-docsearch-suggestion--category-header {
-        padding-top: .75rem !important;
-        margin-top: .75rem !important;
-        border-top: 1px solid rgba(0, 0, 0, .1);
-      }
-    }
-
-    .algolia-docsearch-suggestion--subcategory-column {
-      display: none !important;
-    }
+  &:hover {
+    text-decoration: none;
   }
+}
 
-  .algolia-docsearch-suggestion--title {
-    display: block;
-    margin-bottom: 0 !important;
-    @include font-size(.875rem !important);
-    font-weight: 400 !important;
-  }
+.algolia-docsearch-suggestion--subcategory-column {
+  display: none;
+}
 
-  .algolia-docsearch-suggestion--text {
-    flex: 0 0 100%;
-    max-width: 100%;
-    padding: .2rem 0;
-    @include font-size(.8125rem !important);
-    font-weight: 400;
-    line-height: 1.25 !important;
-    color: $gray-600;
-  }
+.algolia-docsearch-suggestion--subcategory-inline {
+  display: inline;
+  color: $gray-700;
 
-  .algolia-docsearch-footer {
-    float: none !important;
-    width: auto !important;
-    height: auto !important;
-    padding: .75rem 1rem 0;
-    @include font-size(.75rem !important);
-    line-height: 1 !important;
-    color: $gray-600 !important;
-    border-top: 1px solid rgba(0, 0, 0, .1);
+  &::after {
+    padding: 0 .25rem;
+    content: "/";
   }
+}
 
-  .algolia-docsearch-footer--logo {
-    display: inline !important;
-    overflow: visible !important;
-    color: inherit !important;
-    text-indent: 0 !important;
-    background: none !important;
-  }
+.algolia-docsearch-suggestion--title {
+  display: inline;
+  font-weight: 500;
+  color: $gray-800;
+}
 
-  .algolia-docsearch-suggestion--highlight {
-    color: #5f2dab;
-    background-color: rgba(154, 132, 187, .12);
-  }
+.algolia-docsearch-suggestion--text {
+  color: $gray-800;
+  @include font-size(.75rem);
+}
 
-  .algolia-docsearch-suggestion--text .algolia-docsearch-suggestion--highlight {
-    box-shadow: inset 0 -2px 0 0 rgba(95, 45, 171, .5) !important;
-  }
+.algolia-docsearch-suggestion--highlight {
+  color: $purple;
+  background-color: rgba($purple, .1);
+}
 
-  .ds-suggestion.ds-cursor .algolia-docsearch-suggestion--content {
-    background-color: rgba(208, 189, 236, .15) !important;
-  }
+.algolia-docsearch-footer {
+  padding: .5rem 1rem 0;
+  margin-top: .625rem;
+  @include font-size(.75rem);
+  color: $gray-600;
+  border-top: 1px solid rgba(0, 0, 0, .1);
+}
+
+.algolia-docsearch-footer--logo {
+  color: inherit;
 }

diff --git a/site/layouts/partials/stylesheet.html b/site/layouts/partials/stylesheet.html
index d673472f99321b93c4b40df5c11b25a7c7e3e0c1..705f5fa7384320ff4a6e637051c2e438c089a283 100644 (file)
--- a/site/layouts/partials/stylesheet.html
+++ b/site/layouts/partials/stylesheet.html
@@ -5,11 +5,6 @@
 <link href="/docs/{{ .Site.Params.docs_version }}/dist/css/bootstrap.css" rel="stylesheet">
 {{- end }}
 
-{{ if (or (eq .Page.Layout "docs") (eq .Page.Layout "single")) -}}
-{{- "<!-- Documentation extras -->" | safeHTML }}
-<link href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" rel="stylesheet">
-{{- end -}}
-
 {{- if (ne .Page.Layout "examples") }}
 {{- $targetDocsCssPath := printf "/docs/%s/assets/css/docs.css" .Site.Params.docs_version -}}
 {{- $sassOptions := dict "targetPath" $targetDocsCssPath "precision" 6 -}}