chore(component): Add status colours for icons

ref: #54
nofusscomputing · Jan 23, 2025 · 076874a · 076874a
1 parent 80744e7
commit 076874a
Showing 1 changed file with 39 additions and 16 deletions.
diff --git a/src/index.css b/src/index.css
@@ -847,16 +847,6 @@ span.text-inline {
   line-height: inherit;
 }
 
-span.text-inline span.badge-icon {
-  display: inline-block;
-  width: fit-content;
-
-}
-
-span.text-inline span.badge-icon svg {
-  transform: translateY(5px);
-
-}
 
 
 span.badge {
@@ -880,12 +870,9 @@ span.badge span {
   line-height: normal;
 }
 
-span.badge span.badge-icon {
+span.badge.badge-icon {
   height: fit-content;
-  margin: auto 1px auto 3px;
-  padding: 0px;
-  width: fit-content;
-
+  padding: 0px 1px 0 2px;
 }
 
 span.badge span.badge-text {
@@ -894,7 +881,7 @@ span.badge span.badge-text {
   border-top-right-radius: 10px;
   height: fit-content;
   margin: 2px 2px;
-  padding: 0px 3px 0px 2px;
+  padding: 0 3px 0 2px;
 }
 
 a.badge-link {
@@ -2025,3 +2012,39 @@ div.content .header .column.right {
   height: 1.9rem;
   margin: 0 3px;
 }
+
+
+
+
+
+.badge.status svg {
+  border-radius: 50%;
+  width: 1rem;
+  height: 1rem;
+}
+
+
+.badge.status.very-low svg {
+  background-color: #008cff83;
+  fill: #008cff;
+}
+
+.badge.status.low svg {
+  background-color: #00ff2a83;
+  fill: #00ff2a;
+}
+
+.badge.status.med svg {
+  background-color: #fbff0083;
+  fill: #fbff00;
+}
+
+.badge.status.high svg {
+  background-color: #ff880083;
+  fill: #ff8800;
+}
+
+.badge.status.very-high svg {
+  background-color: #ff000083;
+  fill: #ff0000;
+}