feat(core): Add admonition style

ref: #14 #96 #93 #95 #90 #250 #270 closes #272
nofusscomputing · Sep 11, 2024 · c7f69ad · c7f69ad
1 parent 008f8c1
commit c7f69ad
Show file tree

Hide file tree

Showing 3 changed files with 111 additions and 3 deletions.
diff --git a/app/project-static/ticketing.css b/app/project-static/ticketing.css
@@ -653,12 +653,93 @@
 }
 
 
-#ticket-content #markdown p {
+
+#ticket-content #markdown p:not(div.admonition p){
     background-color: inherit;
-    font-size: 14px;
+    font-size: inherit;
     line-height: 25px;
     padding: 0px;
     margin: 0px;
     text-align: left;
 
 }
+
+#markdown div.admonition {
+    border-width: 1px;
+    border-style: solid;
+    border-radius: 10px;
+    font-size: inherit;
+    margin: 10px;
+    padding: 0px;
+}
+
+#markdown div.admonition p.admonition-title {
+    border-top-left-radius: 10px;
+    border-top-right-radius: 10px;
+    font-size: inherit;
+    margin: 0px;
+    padding: 2px 10px 2px 10px;
+    width: 100%;
+}
+
+#markdown div.admonition p:not(p.admonition-title) {
+    border-bottom-left-radius: 10px;
+    border-bottom-right-radius: 10px;
+    font-size: inherit;
+    padding: 10px;
+    margin: 0px;
+    width: 100%;
+}
+
+#markdown div.admonition.note {
+    background-color: #b6d3f5;
+    border-color:#278cff;
+}
+
+#markdown div.admonition.note p.admonition-title {
+    background-color: #1e82f570;
+    color: #fff;
+}
+
+#markdown div.admonition.tip {
+    background-color: #bbf5b6;
+    border-color:#39ff27;
+}
+
+#markdown div.admonition.tip p.admonition-title {
+    background-color: #37f51e70;
+    color: #fff;
+}
+
+#markdown div.admonition.warning {
+    background-color: #f5d8b6;
+    border-color:#ffa127;
+}
+
+#markdown div.admonition.warning p.admonition-title {
+    background-color: #f5911e70;
+    color: #fff;
+}
+
+#markdown div.admonition.danger {
+    background-color: #f5b6b6;
+    border-color:#ff2727;
+}
+
+#markdown div.admonition.danger p.admonition-title {
+    background-color: #f51e1e70;
+    color: #fff;
+}
+
+#markdown div.admonition.quote {
+    background-color: #d3d3d3;
+    border-color:#868686;
+}
+
+#markdown div.admonition.quote p.admonition-title {
+    background-color: #81818170;
+    color: #fff;
+}
+#markdown div.admonition.quote p:not(p.admonition-title) {
+    font-style: italic;
+}
diff --git a/docs/projects/centurion_erp/user/core/markdown.md b/docs/projects/centurion_erp/user/core/markdown.md
@@ -23,4 +23,31 @@ All Text fields, that is those that are multi-lined support markdown text.
 
 - Linkify
 
-- Task Lists
+- Task Lists
+
+
+## Admonitions
+
+
+![admonition example](../images/admonition-example.png)
+
+declare with:
+
+``` md
+
+!!! <type> "<optional heading in double quotes>"
+    text goes here
+
+```
+
+Available admonition types are:
+
+- note
+
+- tip
+
+- warning
+
+- danger
+
+- quote
diff --git a/docs/projects/centurion_erp/user/images/admonition-example.png b/docs/projects/centurion_erp/user/images/admonition-example.png