Merge pull request #48 from plone/versionremoved

Add support for versionremoved directive

docs/reference/special-theme-elements.md

@@ -95,3 +95,12 @@ Wow, a note with an image in a margin!
 ````
 `````
 ``````
+
+
+## `versionremoved`
+
+```{versionremoved} v0.1.1
+Here's a version removed message.
+
+We also support *italic*, **bold**, `code`, [links](https://www.sphinx-doc.org/), and more.
+```

news/48.feature

@@ -0,0 +1 @@
+Add support for `versionremoved` directive. @stevepiercy

src/plone_sphinx_theme/assets/styles/abstracts/_mixins.scss

@@ -1,23 +1,10 @@
+/*  Snippets from:
+src/pydata_sphinx_theme/assets/styles/abstracts/_mixins.scss
+*/
 /*********************************************
 * SASS Mixins
 *********************************************/
-/**
-* Hide the scrollbar until the element is hovered, so keep the page clean
-* Use this sparingly because it's not a great UX pattern.
-*/
-@mixin scrollbar-on-hover() {
-  &:not(:hover) {
-    &::-webkit-scrollbar-thumb {
-      visibility: hidden;
-    }
-  }
-}
-
-/**
- * The PyData Sphinx Theme box shadow rule
- * Copied here in csae we need to re-use.
-*/
-@mixin pst-box-shadow() {
+@mixin box-shadow() {
   box-shadow:
     0 0.2rem 0.5rem var(--pst-color-shadow),
     0 0 0.0625rem var(--pst-color-shadow) !important;

src/plone_sphinx_theme/assets/styles/components/_versionmodified.scss

@@ -0,0 +1,39 @@
+@import "../abstracts/mixins";
+@import "../variables/layout";
+@import "../variables/versionmodified";
+
+div.versionremoved {
+  vertical-align: middle;
+  margin: 1.5625em auto;
+  padding: 0 0.6rem;
+  overflow: hidden;
+
+  /* break-inside has replaced page-break-inside and is widely usable since 2019 */
+  page-break-inside: avoid;
+  break-inside: avoid;
+  border-left: 0.2rem solid;
+  border-color: var(--pst-color-info);
+  border-radius: $admonition-border-radius;
+  background-color: var(--pst-color-on-background);
+
+  @include box-shadow;
+
+  position: relative;
+
+  > p {
+    margin-bottom: 0.6rem;
+    margin-top: 0.6rem;
+  }
+}
+
+div.versionremoved {
+  border-color: var(--pst-color-danger);
+  background-color: var(--pst-color-danger-bg);
+}
+
+span.versionmodified.removed {
+  &::before {
+    color: var(--pst-color-danger);
+    content: var(--pst-icon-versionmodified-removed);
+  }
+}

src/plone_sphinx_theme/assets/styles/index.scss

@@ -10,6 +10,7 @@
 // Re-usable components across the theme
 @use "components/icon-links";
 @use "components/title";
+@use "components/versionmodified";
 
 @use "content/code";
 @use "content/lists";

src/plone_sphinx_theme/assets/styles/variables/_layout.scss

@@ -0,0 +1,5 @@
+/*  Snippets from src/pydata_sphinx_theme/assets/styles/variables/_layout.scss */
+/*******************************************************************************
+* UI shaping and padding
+*/
+$admonition-border-radius: 0.25rem;

src/plone_sphinx_theme/assets/styles/variables/_versionmodified.scss

@@ -0,0 +1,7 @@
+/*  Snippets from src/pydata_sphinx_theme/assets/styles/variables/_versionmodified.scss */
+html {
+  /*****************************************************************************
+  * versionmodified
+  **/
+  --pst-icon-versionmodified-removed: var(--pst-icon-exclamation-circle);
+}