diff --git a/preview-src/admonitions.adoc b/preview-src/admonitions.adoc
index 2f0a389d..e3fb0910 100644
--- a/preview-src/admonitions.adoc
+++ b/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.
\ No newline at end of file
+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.
+====
+
+=====
diff --git a/src/css/doc.css b/src/css/doc.css
index 93b7b47b..9db3f71c 100644
--- a/src/css/doc.css
+++ b/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);
}
diff --git a/src/css/labels.css b/src/css/labels.css
index fea91721..72f926f1 100644
--- a/src/css/labels.css
+++ b/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;
}
diff --git a/src/css/themes.css b/src/css/themes.css
index 403b374f..03acf785 100644
--- a/src/css/themes.css
+++ b/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);
}
diff --git a/src/css/vars.css b/src/css/vars.css
index 9cbbb086..32f5ca3c 100644
--- a/src/css/vars.css
+++ b/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);
diff --git a/src/img/ndl-icons/exclamation-circle.svg b/src/img/ndl-icons/exclamation-circle.svg
new file mode 100644
index 00000000..a6180593
--- /dev/null
+++ b/src/img/ndl-icons/exclamation-circle.svg
@@ -0,0 +1,3 @@
+
diff --git a/src/img/ndl-icons/exclamation-triangle.svg b/src/img/ndl-icons/exclamation-triangle.svg
new file mode 100644
index 00000000..9b6ce924
--- /dev/null
+++ b/src/img/ndl-icons/exclamation-triangle.svg
@@ -0,0 +1,3 @@
+
diff --git a/src/img/ndl-icons/fire.svg b/src/img/ndl-icons/fire.svg
new file mode 100644
index 00000000..66b58644
--- /dev/null
+++ b/src/img/ndl-icons/fire.svg
@@ -0,0 +1,4 @@
+
diff --git a/src/img/ndl-icons/information-circle.svg b/src/img/ndl-icons/information-circle.svg
new file mode 100644
index 00000000..7744caa4
--- /dev/null
+++ b/src/img/ndl-icons/information-circle.svg
@@ -0,0 +1,3 @@
+
diff --git a/src/img/ndl-icons/light-bulb.svg b/src/img/ndl-icons/light-bulb.svg
new file mode 100644
index 00000000..640d9a11
--- /dev/null
+++ b/src/img/ndl-icons/light-bulb.svg
@@ -0,0 +1,3 @@
+