Use icons from ndl, set admon title size

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);
@@ -360,13 +369,18 @@ body {
   padding: 0;
   position: absolute;
   top: 0;
-  transform: translate(-0.75rem, -50%);
+  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: 1rem;
+  border-radius: 9999px;
   display: inline-flex;
   filter: none;
   height: 1.5rem;
@@ -380,7 +394,7 @@ body {
   font-style: normal;
   font-weight: 600;
   font-weight: var(--admonition-label-font-weight);
-  padding-left: 0.5rem;
+  /* padding-left: 0.5rem; */
   text-transform: uppercase;
 }
 
@@ -409,24 +423,28 @@ body {
 /* admonition icon contents */
 
 .fa.icon-note::before {
-  content: "\f05a";
-  background: none;
+  background: url(../img/ndl-icons/information-circle.svg) no-repeat;
+  content: "";
 }
 
 .fa.icon-tip::before {
-  content: "\f0eb";
+  background: url(../img/ndl-icons/light-bulb.svg) no-repeat;
+  content: "";
 }
 
 .fa.icon-important::before {
-  content: "\f06a";
+  background: url(../img/ndl-icons/exclamation-circle.svg) no-repeat;
+  content: "";
 }
 
 .fa.icon-caution::before {
-  content: "\f06d";
+  background: url(../img/ndl-icons/fire.svg) no-repeat;
+  content: "";
 }
 
 .fa.icon-warning::before {
-  content: "\f071";
+  background: url(../img/ndl-icons/exclamation-triangle.svg) no-repeat;
+  content: "";
 }
 
 .doc .admonitionblock td .content {
@@ -790,7 +808,7 @@ body {
   padding: 0.75rem;
 } */
 
-.doc .exampleblock > .content > :first-child {
+.doc .exampleblock > .content > :first-child:not(.admonitionblock) {
   margin-top: 0;
 }
 
@@ -1143,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);