Added styles for notifications

dyatlov-a · Sep 23, 2024 · 3fd08f8 · 3fd08f8
1 parent 6199e17
commit 3fd08f8
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 2 deletions.
diff --git a/src/Inc.TeamAssistant.WebUI/Features/Notifications/NotificationBar.razor b/src/Inc.TeamAssistant.WebUI/Features/Notifications/NotificationBar.razor
@@ -5,7 +5,7 @@
 <div class="notification-bar">
     @foreach (var notification in Notifications)
     {
-        <div class="notification-bar__item @CssClass(notification)">
+        <div class="notification-bar__item animation__fade-in @CssClass(notification)">
             <a
                 href="#"
                 class="notification-bar__link"

diff --git a/src/Inc.TeamAssistant.WebUI/Features/Notifications/NotificationBar.razor.css b/src/Inc.TeamAssistant.WebUI/Features/Notifications/NotificationBar.razor.css
@@ -1,6 +1,6 @@
 .notification-bar {
     position: fixed;
-    top: 80px;
+    top: 70px;
     right: 0;
     width: 315px;
     z-index: 9999;
@@ -13,6 +13,7 @@
     color: #000;
     overflow: hidden;
     border-radius: 10px;
+    box-shadow: 3px 3px 6px rgba(0, 0, 0, .5);
 }
 .notification-bar__item_info {
     background-color: #2A9D8F;

diff --git a/src/Inc.TeamAssistant.WebUI/wwwroot/css/main.css b/src/Inc.TeamAssistant.WebUI/wwwroot/css/main.css
@@ -255,6 +255,13 @@ html {
     from { transform: translateX(-150%); }
     to { transform: translateY(0); }
 }
+.animation__fade-in {
+    animation: fade-in .7s;
+}
+@keyframes fade-in {
+    0% { opacity: 0; }
+    100% { opacity: 1; }
+}
 /* ICONS */
 .icon {
     transition: stroke 0.3s ease 0s;