diff --git a/src/qiskit_sphinx_theme/assets/styles/_custom-directives.scss b/src/qiskit_sphinx_theme/assets/styles/_custom-directives.scss new file mode 100644 index 00000000..f22abb5a --- /dev/null +++ b/src/qiskit_sphinx_theme/assets/styles/_custom-directives.scss @@ -0,0 +1,74 @@ +// ------------------------------------------------------------------------------- +// qiskit-card +// ------------------------------------------------------------------------------- + +.qiskit-card { + position: relative; // Needed for `.qiskit-card::after`. + display: flex; + justify-content: space-between; + height: 12rem; + margin-bottom: 1.875rem; + + border: 1px solid var(--color-table-border); + background-color: var(--color-sidebar-background); + cursor: pointer; + + p { + color: var(--color-sidebar-link-text); + } + + // This creates a purple border at the bottom. We set the width to 0, but to 100% on hover, so + // that it transitions in. + &::after { + content: ""; + display: block; + position: absolute; + width: 0; + height: 1px; + bottom: 0; + left: 0; + background-color: var(--qiskit-color-purple); + transition: width .250s ease-in-out; + } + + &:hover { + background-color: unset; + border-bottom: none; + + p { + color: unset; + } + + &::after { + width: 100%; + } + + .qiskit-card-image-container { + opacity: unset; + } + } +} + +.qiskit-card-text-container { + flex-grow: 1; + min-width: 0; + padding: 1rem; +} + +.qiskit-card-image-container { + flex-shrink: 0; + height: 100%; + width: 20rem; // We use a fixed width so the image doesn't keep resizing. + + opacity: 0.7; + + // Float the image to the right of the container. + display: flex; + align-items: center; + justify-content: flex-end; + + img { + max-height: 100%; + max-width: 100%; + } +} diff --git a/src/qiskit_sphinx_theme/assets/styles/qiskit-sphinx-theme.scss b/src/qiskit_sphinx_theme/assets/styles/qiskit-sphinx-theme.scss index 93487a09..8b50aa6a 100644 --- a/src/qiskit_sphinx_theme/assets/styles/qiskit-sphinx-theme.scss +++ b/src/qiskit_sphinx_theme/assets/styles/qiskit-sphinx-theme.scss @@ -1,5 +1,6 @@ @import "admonitions"; @import "api"; +@import "custom-directives"; @import "drop-shadows"; @import "footer"; @import "icons"; diff --git a/src/qiskit_sphinx_theme/directives.py b/src/qiskit_sphinx_theme/directives.py index c5379c97..07f8a7ff 100644 --- a/src/qiskit_sphinx_theme/directives.py +++ b/src/qiskit_sphinx_theme/directives.py @@ -52,9 +52,11 @@ def run(self) -> list[nodes.paragraph]: .. raw:: html
{card_description}
- +