From f29dc02c475980509599018bae3ff45beecad6f3 Mon Sep 17 00:00:00 2001 From: Christian Flach Date: Sun, 12 Jun 2022 13:40:36 +0200 Subject: [PATCH] fix: Correct alignment of search input, closes #117 BREAKING CHANGE: The default height of the search input is now 36px. Use the --aa-search-input-height CSS variable to adjust it if needed. --- README.md | 3 +++ .../src/client/theme/SearchBar/index.css | 4 ++-- packages/docusaurus-search-local/src/server/index.ts | 2 +- 3 files changed, 6 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 16477d1..c853122 100644 --- a/README.md +++ b/README.md @@ -87,6 +87,9 @@ The following options are available (defaults are shown below): // setting this to "none" will prevent the default CSS to be included. The default CSS // comes from autocomplete-theme-classic, which you can read more about here: // https://www.algolia.com/doc/ui-libraries/autocomplete/api-reference/autocomplete-theme-classic/ + // When you want to overwrite CSS variables defined by the default theme, make sure to suffix your + // overwrites with `!important`, because they might otherwise not be applied as expected. See the + // following comment for more information: https://github.com/cmfcmf/docusaurus-search-local/issues/107#issuecomment-1119831938. style: undefined, // lunr.js-specific settings diff --git a/packages/docusaurus-search-local/src/client/theme/SearchBar/index.css b/packages/docusaurus-search-local/src/client/theme/SearchBar/index.css index 3b56bc1..6db400b 100644 --- a/packages/docusaurus-search-local/src/client/theme/SearchBar/index.css +++ b/packages/docusaurus-search-local/src/client/theme/SearchBar/index.css @@ -1,5 +1,5 @@ -.dsla-search-wrapper { - margin-left: var(--aa-spacing); +:root { + --aa-search-input-height: 36px; } body.dark, diff --git a/packages/docusaurus-search-local/src/server/index.ts b/packages/docusaurus-search-local/src/server/index.ts index 7be67aa..57a3d43 100644 --- a/packages/docusaurus-search-local/src/server/index.ts +++ b/packages/docusaurus-search-local/src/server/index.ts @@ -174,7 +174,7 @@ export default function cmfcmfDocusaurusSearchLocal( "// THIS FILE IS AUTOGENERATED\n" + "// DO NOT EDIT THIS FILE!\n\n"; if (style !== "none") { - generated += 'require("@algolia/autocomplete-theme-classic");\n'; + generated += 'import "@algolia/autocomplete-theme-classic";\n'; generated += 'import "./index.css";\n'; }