From 6455a84c95ccaa3a3c8e5a7eb116456cb97bbb7d Mon Sep 17 00:00:00 2001 From: Gergely Meszaros Date: Sat, 1 Apr 2023 15:51:47 +0000 Subject: [PATCH 1/2] FIX: Fix search icons displayed outside with small base font size When `--pst-font-size-base` is small (i.e. 12px) the search icons (magnifying-glass and keyboard shortcut hint) could appear outside the search bar because their positions did not take the negative margins of their parent container into account. Use css `calc()` to include it now. TBH I don't know why a padding + negative margin is employed on the form element. Online I found that this technique can be used to make just one element (like a header) not constrained by the padding, but here there is only one child element (the `
`). The commit history doesn't help either the stylesheet had this since it's first version. --- .../assets/styles/components/_search.scss | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/src/pydata_sphinx_theme/assets/styles/components/_search.scss b/src/pydata_sphinx_theme/assets/styles/components/_search.scss index c4f08b693..a06de518e 100644 --- a/src/pydata_sphinx_theme/assets/styles/components/_search.scss +++ b/src/pydata_sphinx_theme/assets/styles/components/_search.scss @@ -15,7 +15,11 @@ i.fa-solid.fa-magnifying-glass { position: absolute; - left: 1.6rem; + // Roughly center within the padding of the input element, taking the search + // container's negative margins into account. + // The search-icon is ~0.8em wide (its font-size depends on location, + // adjusted by the rules below) + left: calc(15px + (2.5rem - 0.8em) / 2); color: var(--pst-color-text-muted); } @@ -50,7 +54,8 @@ .search-button__kbd-shortcut { display: flex; position: absolute; - right: 2em; + // Similarly to the search icon include the margins of the search bar + right: calc(15px + 0.5rem); color: var(--pst-color-border); } } From cc0988311de311232f865c7bf6499091507f3c33 Mon Sep 17 00:00:00 2001 From: Gergely Meszaros Date: Wed, 12 Apr 2023 12:43:48 +0000 Subject: [PATCH 2/2] Refactor style: drop negative margin from search box --- .../assets/styles/components/_search.scss | 13 +++---------- 1 file changed, 3 insertions(+), 10 deletions(-) diff --git a/src/pydata_sphinx_theme/assets/styles/components/_search.scss b/src/pydata_sphinx_theme/assets/styles/components/_search.scss index a06de518e..b77ee57d6 100644 --- a/src/pydata_sphinx_theme/assets/styles/components/_search.scss +++ b/src/pydata_sphinx_theme/assets/styles/components/_search.scss @@ -3,9 +3,7 @@ */ .bd-search { position: relative; - padding: 1rem 15px; - margin-right: -15px; - margin-left: -15px; + padding: 1rem 0; .icon { position: absolute; @@ -15,11 +13,7 @@ i.fa-solid.fa-magnifying-glass { position: absolute; - // Roughly center within the padding of the input element, taking the search - // container's negative margins into account. - // The search-icon is ~0.8em wide (its font-size depends on location, - // adjusted by the rules below) - left: calc(15px + (2.5rem - 0.8em) / 2); + left: calc((2.5rem - 0.7em) / 2); color: var(--pst-color-text-muted); } @@ -54,8 +48,7 @@ .search-button__kbd-shortcut { display: flex; position: absolute; - // Similarly to the search icon include the margins of the search bar - right: calc(15px + 0.5rem); + right: 0.5rem; color: var(--pst-color-border); } }