Settings animations added

iwokonl · May 20, 2024 · d25230b · d25230b
1 parent 36fbbe5
commit d25230b
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 3 deletions.
diff --git a/Front/kantor-angular/src/app/settings/settings.component.html b/Front/kantor-angular/src/app/settings/settings.component.html
@@ -30,18 +30,18 @@ <h1>Ustawienia</h1>
     </div>
     <div class="lower-settings-container">
 
-      <div *ngIf="isProfileSelected">
+      <div class="selected-profile" *ngIf="isProfileSelected">
         <!-- Profile settings go here -->
         <p> Profil </p>
       </div>
 
-      <div *ngIf="isSecuritySelected">
+      <div class="selected-security"  *ngIf="isSecuritySelected">
         <!-- Security settings go here -->
         <p> Bezpieczeństwo </p>
 
       </div>
 
-      <div *ngIf="isHelpSelected">
+      <div class="selected-help" *ngIf="isHelpSelected">
         <!-- Help settings go here -->
         <p> Pomocy </p>
 

diff --git a/Front/kantor-angular/src/app/settings/settings.component.scss b/Front/kantor-angular/src/app/settings/settings.component.scss
@@ -118,3 +118,15 @@ h1{
   height: 100%;
   width: 100%;
 }
+.selected-profile, .selected-help, .selected-security{
+  animation: fade-in 1s ease 0s 1 normal forwards;
+  @keyframes fade-in {
+    0% {
+      opacity: 0;
+    }
+
+    100% {
+      opacity: 1;
+    }
+  }
+}