Added notifications badges to notifications

Shows the current amount of notifications

1 files changed, 19 insertions, 1 deletions

diff --git a/WebInterface/NodeJSServer/src/style/partials/front-layer/_notifications.scss b/WebInterface/NodeJSServer/src/style/partials/front-layer/_notifications.scss
index 4dd7361..d8e8159 100644
--- a/WebInterface/NodeJSServer/src/style/partials/front-layer/_notifications.scss
+++ b/WebInterface/NodeJSServer/src/style/partials/front-layer/_notifications.scss
@@ -2,7 +2,6 @@
 
 .front-layer {
   .banner {
-    z-index: 1;
     background-color: white;
     border: none;
     border-radius: 16px 16px 0 0;
@@ -34,6 +33,25 @@
       margin-bottom: 0;
     }
 
+    .notification-badge {
+      height: 1rem;
+      min-width: 1rem;
+      font-weight: bold;
+      color: $secondary-text;
+      font-size: 1rem;
+      padding: 0.5rem;
+      margin: 0.5rem 0 0.5rem 1rem;
+      text-align: center;
+      line-height: 1rem;
+      background-color: $secondary;
+      border: none;
+      border-radius: 50%;
+
+      &.hidden {
+        display: none;
+      }
+    }
+
     .banner-text {
       align-self: left;
       margin: 1rem;