Admonition EPUB styles (#1793)

Author: cgerling

assets/css/_epub.css

@@ -1,6 +1,7 @@
 @import 'custom-props/common.css';
 @import 'custom-props/theme-light.css';
 
+@import 'content/epub-admonition.css';
 @import 'content/code.css';
 @import 'content/functions.css';
 @import 'screen-reader.css';

assets/css/content/epub-admonition.css

@@ -0,0 +1,76 @@
+.content-inner blockquote:is(.warning, .error, .info, .neutral, .tip) {
+  border-left: solid 4px;
+  color: var(--black);
+  font-size: 0.9em;
+  line-height: 1.4em;
+  margin-bottom: 1.5em;
+  margin-left: 5px;
+  padding: 7px 15px;
+  page-break-inside: avoid;
+}
+
+.content-inner blockquote.warning {
+  background-color: var(--warningBackground);
+  border-left-color: var(--warningHeadingBackground);
+}
+
+.content-inner blockquote.error {
+  background-color: var(--errorBackground);
+  border-left-color: var(--errorHeadingBackground);
+}
+
+.content-inner blockquote.info {
+  background-color: var(--infoBackground);
+  border-left-color: var(--infoHeadingBackground);
+}
+
+.content-inner blockquote.neutral {
+  background-color: var(--neutralBackground);
+  border-left-color: var(--neutralHeadingBackground);
+}
+
+.content-inner blockquote.tip {
+  background-color: var(--tipBackground);
+  border-left-color: var(--tipHeadingBackground);
+}
+
+.content-inner blockquote :is(h3, h4) {
+  font-weight: bold;
+  margin: 0px 10px 5px 0px;
+}
+
+.content-inner blockquote :is(h3, h4):is(.warning, .error, .info, .neutral, .tip) {
+  font-style: normal;
+  font-weight: 700;
+}
+
+.content-inner blockquote :is(h3, h4).warning {
+  color: var(--warningHeadingBackground);
+}
+.content-inner blockquote :is(h3, h4).error {
+  color: var(--errorHeadingBackground);
+}
+.content-inner blockquote :is(h3, h4).info {
+  color: var(--infoHeadingBackground);
+}
+.content-inner blockquote :is(h3, h4).neutral {
+  color: var(--neutralHeadingBackground);
+}
+.content-inner blockquote :is(h3, h4).tip {
+  color: var(--tipHeadingBackground);
+}
+
+.content-inner blockquote :is(h3, h4):is(.warning, .error, .info, .neutral, .tip) code {
+  margin: 0 0.5ch;
+}
+
+.content-inner blockquote:is(.warning, .error, .info, .neutral, .tip) code {
+  background-color: var(--admInlineCodeBackground);
+  border: 1px solid var(--admInlineCodeBorder);
+  color: var(--admInlineCode);
+}
+
+.content-inner blockquote:is(.warning, .error, .info, .neutral, .tip) pre code {
+  background-color: var(--admCodeBackground);
+  border: 1px solid var(--admCodeBorder);
+}

assets/js/content.js

@@ -30,7 +30,7 @@ function fixLinks () {
  * Add CSS classes to `blockquote` elements when those are used to
  * support admonition text blocks
  */
-function fixBlockquotes () {
+export function fixBlockquotes () {
   const classes = ['warning', 'info', 'error', 'neutral', 'tip']
 
   classes.forEach(element => {

assets/js/entry/epub.js

@@ -1,3 +1,8 @@
+import { onDocumentReady } from '../helpers'
+import { fixBlockquotes } from '../content'
 import { initialize as initMakeup } from '../makeup'
 
-initMakeup()
+onDocumentReady(() => {
+  initMakeup()
+  fixBlockquotes()
+})