Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Reposition the admonition title icon to the top of the paragraph in m… #2100

Open
wants to merge 5 commits into
base: main
Choose a base branch
from
Open

Reposition the admonition title icon to the top of the paragraph in m… #2100

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
ac4687d
Reposition the admonition title icon to the top of the paragraph in m…
stevepiercy Jan 20, 2025
f39142e
Merge remote-tracking branch 'upstream/main' into position-admonition…
drammock Jan 24, 2025
eda91a7
use sass variables to show how admonition icon and title are aligned
gabalafou Jan 29, 2025
1699131
add regressions page to docs
gabalafou Jan 30, 2025
81bb8b1
Move regressions page to reference and test section
gabalafou Jan 30, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions docs/examples/index.rst
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@ See the sections in the primary sidebar and below to explore.
:numbered:
:caption: Reference and test section. Mostly meant for developers to check that things look OK.

regressions
no-sidebar
persistent-search-field
in-page-toc
Expand Down
20 changes: 20 additions & 0 deletions docs/examples/regressions.rst
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
===========
Regressions
===========

Whenever a corner case is reported and fixed that the theme got wrong, it should
be added to this page. That way it can be inspected against current and upcoming
versions of the theme to help prevent the bug from reappearing in a release.

Admonition with multi-line title
================================

Issue `#2099 <https://github.com/pydata/pydata-sphinx-theme/issues/2099>`_

In the following example, the admonition title should span multiple lines and
the icon should be aligned with the top line of the admonition title text.

.. admonition:: Warning! This feature is experimental and only applies to registering routes for React Router 7 applications. Click to accept the risks and read details.
:class: warning, toggle

Uh-oh, now you're in trouble!
12 changes: 9 additions & 3 deletions src/pydata_sphinx_theme/assets/styles/content/_admonitions.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,8 +40,12 @@ div.admonition,

// Defaults for all admonitions
> .admonition-title {
$padding-top: 0.4rem;
$icon-width: 1rem;
$icon-margin-x: 0.5rem;

margin: 0 -0.6rem;
padding: 0.4rem 0.6rem 0.4rem 2rem;
padding: 0.4rem 0.6rem $padding-top calc($icon-width + 2 * $icon-margin-x);
font-weight: var(--pst-admonition-font-weight-heading);
position: relative;

Expand All @@ -54,8 +58,10 @@ div.admonition,

&::after {
position: absolute;
left: 0.5rem;
width: 1rem;
top: $padding-top; // align icon with title text
left: 0;
margin: 0 $icon-margin-x;
width: $icon-width;
height: 1rem;
color: var(--pst-color-info);
font: var(--fa-font-solid);
Expand Down
Loading