diff --git a/src/qiskit_sphinx_theme/assets/styles/_admonitions.scss b/src/qiskit_sphinx_theme/assets/styles/_admonitions.scss index 8178ca98..1a62995f 100644 --- a/src/qiskit_sphinx_theme/assets/styles/_admonitions.scss +++ b/src/qiskit_sphinx_theme/assets/styles/_admonitions.scss @@ -133,3 +133,61 @@ p.topic-title { background-color: $info-border; } } + +// Style deprecations like a warning. +div.deprecated { + border-color: $warning-background; + border-left: 0; + border-right-style: solid; + border-right-width: 1px; + border-bottom-style: solid; + border-bottom-width: 1px; + position: relative; + background: var(--color-admonition-background); + font-size: var(--admonition-font-size); + margin: 1rem auto; + overflow: hidden; + padding: 0 0.5rem 0.5rem; + padding-left: 12px; + page-break-inside: avoid; +} + +div.deprecated::before { + background: $warning-border; + content: ""; + position: absolute; + top: 0; + bottom: 0; + left: 0; + width: 3px; +} + +span.deprecated { + background-color: $warning-background; + font-size: var(--admonition-title-font-size); + line-height: 1.3; + margin: 0 -0.5rem 0.25rem -0.55rem; + padding: 0.4rem; + position: relative; + display: block; + + // Turn off italics from Furo. + font-style: normal; +} + +span.deprecated::before { + content: ""; + display: inline-block; + background-image: var(--icon-warning); + width: 16px; + height: 16px; + margin-right: 5px; + // This aligns the icon with the text properly. + vertical-align: bottom; +} + +div.deprecated p, +div.versionchanged p { + margin-bottom: 0; + margin-top: 0; +} diff --git a/tests/js/qiskit.test.js b/tests/js/qiskit.test.js index 04c9f149..9d212cfd 100644 --- a/tests/js/qiskit.test.js +++ b/tests/js/qiskit.test.js @@ -215,6 +215,12 @@ test("admonitions use Carbon style", async ({ page }) => { await expect(admonitions).toHaveScreenshot(); }); +test("deprecations look like warning", async ({ page }) => { + await page.goto("sphinx_guide/paragraph.html#deprecation-note"); + const deprecations = page.locator("section#deprecation-note"); + await expect(deprecations).toHaveScreenshot(); +}); + test("Sphinx Design elements have no shadows", async ({ page }) => { await page.goto("sphinx_guide/panels.html"); await hideTopNavBar(page); diff --git a/tests/js/qiskit.test.js-snapshots/admonitions-use-Carbon-style-1-linux.png b/tests/js/qiskit.test.js-snapshots/admonitions-use-Carbon-style-1-linux.png index 787ebf3d..904ca0a7 100644 Binary files a/tests/js/qiskit.test.js-snapshots/admonitions-use-Carbon-style-1-linux.png and b/tests/js/qiskit.test.js-snapshots/admonitions-use-Carbon-style-1-linux.png differ diff --git a/tests/js/qiskit.test.js-snapshots/deprecations-look-like-warning-1-linux.png b/tests/js/qiskit.test.js-snapshots/deprecations-look-like-warning-1-linux.png new file mode 100644 index 00000000..75dc3516 Binary files /dev/null and b/tests/js/qiskit.test.js-snapshots/deprecations-look-like-warning-1-linux.png differ