add icons to admonitions (#306)

Author: recrwplay

preview-src/admonitions.adoc

@@ -179,4 +179,57 @@ $ npm i -g @antora/cli @antora/site-generator-default
 ====
 
 Nominavi luptatum eos, an vim hinc philosophia intellegebat.
-Eu mea inani iriure.
+Eu mea inani iriure.
+
+== Admonition in a table
+
+[options="header",width="100%",cols="2,3a"]
+|===
+| Parameter
+| Explanation
+
+
+| Parameter name
+| Parameter explanation
+Lorem ipsum
+
+Dolor sit est.
+
+[NOTE]
+====
+Note text goes here.
+Note should be nicely aligned and have no borders
+====
+
+|===
+
+
+== Admonition first element in an example block
+
+
+[.tabbed-example]
+=====
+[.include-with-admonition-first]
+======
+
+
+[WARNING]
+====
+Admonition should be given enough margin if it is the first element in an example block.
+====
+
+======
+
+[.include-with-admonition-not-first]
+======
+
+Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+
+Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+
+[TIP]
+====
+Admonition should be given normal margin if it is not the first element in an example block.
+====
+
+=====

src/css/doc.css

@@ -200,6 +200,15 @@ body {
 
 .doc i.fa {
   font-style: normal;
+  font-size: var(--admonition-title-font-size);
+}
+
+.doc i.fa::before {
+  width: 24px;
+  height: inherit;
+  background-size: 20px;
+  background-position-y: center;
+  filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(7500%) hue-rotate(199deg) brightness(103%) contrast(103%); /* filter to white */
 }
 
 .doc p code,
@@ -286,7 +295,7 @@ body {
   padding: 0.5rem;
 }
 
-.doc table.tableblock td,
+.doc table.tableblock > tbody > tr > td,
 .doc table.tableblock > :not(thead) th {
   border-top: 1px solid var(--table-border-color);
   border-bottom: 1px solid var(--table-border-color);
@@ -318,8 +327,8 @@ body {
 }
 
 .doc .admonitionblock {
-  margin: 0 0 1.5rem;
-  border-left: 4px solid var(--doc-font-color);
+  margin: 1.5rem 0 1.5rem;
+  /* border-left: 4px solid var(--doc-font-color); */
   border-radius: 0.25rem;
 }
 
@@ -345,7 +354,7 @@ body {
 }
 
 .doc .admonitionblock .content {
-  padding: 1rem 1rem 0.75rem;
+  padding: 1.5rem 1rem 0.75rem;
   /* background: var(--admonition-background); */
   width: 100%;
 }
@@ -354,19 +363,94 @@ body {
   padding: 0;
 }
 
-.doc .admonitionblock .icon {
-  display: none;
-  /* position: absolute;
-  top: 0;
+.doc .admonitionblock td.icon {
   left: 0;
-  font-size: calc(15 / var(--rem-base) * 1rem);
-  padding: 0 0.5rem;
-  height: 1.25rem;
   line-height: 1;
+  padding: 0;
+  position: absolute;
+  top: 0;
+  transform: translate(-1rem, -50%);
+}
+
+.doc .tableblock .admonitionblock td.icon {
+  transform: translate(0, -50%);
+  border: none;
+}
+
+.doc .admonitionblock td.icon i {
+  color: rgba(var(--colors-neutral-15));
+  align-items: center;
+  border-radius: 9999px;
+  display: inline-flex;
+  filter: none;
+  height: 1.5rem;
+  padding: 0 0.5rem;
+  width: fit-content;
+}
+
+.doc .admonitionblock td.icon i.fa::after {
+  content: attr(title);
+  font-family: var(--body-font-family);
+  font-style: normal;
+  font-weight: 600;
   font-weight: var(--admonition-label-font-weight);
+  /* padding-left: 0.5rem; */
   text-transform: uppercase;
-  border-radius: 0.45rem;
-  transform: translate(-0.5rem, -50%); */
+}
+
+/* admonition icon and text backgrounds */
+
+.doc .admonitionblock td.icon i.icon-note {
+  background-color: var(--note-color);
+}
+
+.doc .admonitionblock td.icon i.icon-tip {
+  background-color: var(--tip-border-color);
+}
+
+.doc .admonitionblock td.icon i.icon-important {
+  background-color: var(--important-border-color);
+}
+
+.doc .admonitionblock td.icon i.icon-caution {
+  background-color: var(--caution-border-color);
+}
+
+.doc .admonitionblock td.icon i.icon-warning {
+  background-color: var(--warning-border-color);
+}
+
+/* admonition icon contents */
+
+.fa.icon-note::before {
+  background: url(../img/ndl-icons/information-circle.svg) no-repeat;
+  content: "";
+}
+
+.fa.icon-tip::before {
+  background: url(../img/ndl-icons/light-bulb.svg) no-repeat;
+  content: "";
+}
+
+.fa.icon-important::before {
+  background: url(../img/ndl-icons/exclamation-circle.svg) no-repeat;
+  content: "";
+}
+
+.fa.icon-caution::before {
+  background: url(../img/ndl-icons/fire.svg) no-repeat;
+  content: "";
+}
+
+.fa.icon-warning::before {
+  background: url(../img/ndl-icons/exclamation-triangle.svg) no-repeat;
+  content: "";
+}
+
+.doc .admonitionblock td .content {
+  word-wrap: anywhere;
+  padding: 1rem 1rem 0.75rem;
+  width: 100%;
 }
 
 .doc .admonitionblock a.btn {
@@ -384,7 +468,7 @@ body {
 .doc .admonitionblock.warning {
   background-color: var(--warning-background-color);
   color: var(--warning-color);
-  border-left-color: var(--warning-border-color);
+  /* border-left-color: var(--warning-border-color); */
 }
 
 .doc .admonitionblock.warning a.btn {
@@ -398,7 +482,7 @@ body {
 .doc .admonitionblock.caution {
   background-color: var(--caution-background-color);
   color: var(--caution-color);
-  border-left-color: var(--caution-border-color);
+  /* border-left-color: var(--caution-border-color); */
 }
 
 .doc .admonitionblock.caution a {
@@ -416,7 +500,7 @@ body {
 .doc .admonitionblock.tip {
   background-color: var(--tip-background-color);
   color: var(--tip-color);
-  border-left-color: var(--tip-color);
+  /* border-left-color: var(--tip-color); */
 }
 
 .doc .admonitionblock.tip a {
@@ -434,7 +518,7 @@ body {
 .doc .admonitionblock.note {
   background-color: var(--note-background-color);
   color: var(--note-color);
-  border-left-color: var(--note-border-color);
+  /* border-left-color: var(--note-border-color); */
 }
 
 .doc .admonitionblock.note a {
@@ -452,7 +536,7 @@ body {
 .doc .admonitionblock.important {
   background-color: var(--important-background-color);
   color: var(--important-color);
-  border-left-color: var(--important-border-color);
+  /* border-left-color: var(--important-border-color); */
 }
 
 .doc .admonitionblock.important a {
@@ -724,7 +808,7 @@ body {
   padding: 0.75rem;
 } */
 
-.doc .exampleblock > .content > :first-child {
+.doc .exampleblock > .content > :first-child:not(.admonitionblock) {
   margin-top: 0;
 }
 
@@ -1077,13 +1161,13 @@ body {
   /* table-layout: fixed; */
 }
 
-.doc table.tableblock.frame-all tr:last-child td,
-.doc table.tableblock.frame-ends tr:last-child td {
+.doc table.tableblock.frame-all > tbody > tr:last-child > td,
+.doc table.tableblock.frame-ends > tbody > tr:last-child > td {
   border-bottom: 2.5px solid var(--table-border-color);
 }
 
-.doc table.tableblock.frame-all tr:first-child td,
-.doc table.tableblock.frame-ends tr:first-child td {
+.doc table.tableblock.frame-all > tbody > tr:first-child > td,
+.doc table.tableblock.frame-ends > tbody > tr:first-child > td {
   border-top: 2.5px solid var(--table-border-color);
 }
 

src/css/labels.css

@@ -93,7 +93,7 @@ h2 > .flex-label {
   background: rgba(var(--colors-baltic-50));
   color: rgba(var(--colors-baltic-10));
   font-weight: 600;
-  font-size: 0.7rem;
+  font-size: var(--label-title-font-size);
   font-style: normal;
 }
 

src/css/themes.css

@@ -102,7 +102,7 @@ body.docs #preamble .abstract blockquote {
   color: rgba(var(--colors-baltic-60));
 }
 
-body.docs .tableblock .icon i {
+body.docs .tableblock .icon i:not(.fa) {
   color: var(--color-docs);
 }
 
@@ -337,7 +337,7 @@ body.developer #preamble .abstract blockquote {
   border-left-color: var(--color-green-600);
 }
 
-body.developer .tableblock .icon i {
+body.developer .tableblock .icon i:not(.fa) {
   color: var(--color-green-600);
 }
 

src/css/vars.css

@@ -380,6 +380,11 @@
   --alpha-beta-color: var(--color-black);
   --alpha-beta-background-color: rgba(var(--colors-marigold-40));
 
+  /* labels and admonitions */
+
+  --label-title-font-size: calc(0.8 * var(--font-size-label)); /* set label font size from ndl */
+  --admonition-title-font-size: var(--font-size-label); /* set admonitino font size from ndl */
+
   /* footer */
   --footer-font-size: var(--font-size-body-medium);
   --footer-line-height: var(--doc-line-height);