From 2d8359b966ecaecfa54e6fb6b49b95040f9e2075 Mon Sep 17 00:00:00 2001
From: Paul Rangger <paul.rangger@timebite.at>
Date: Fri, 4 Oct 2024 08:37:33 +0200
Subject: [PATCH] Sped up animation

---
 .../app/overview/course-overview.component.scss      |  9 ++++++---
 src/main/webapp/content/scss/global.scss             | 12 ++++++------
 2 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/src/main/webapp/app/overview/course-overview.component.scss b/src/main/webapp/app/overview/course-overview.component.scss
index a5376a397fcd..633664e59c2a 100644
--- a/src/main/webapp/app/overview/course-overview.component.scss
+++ b/src/main/webapp/app/overview/course-overview.component.scss
@@ -3,7 +3,7 @@ $menu-width-open: 220px;
 $breadcrumb-height: 45px; // needed to make the exam fullscreen
 
 // Sidebar Button Transition Variables
-$transition-delay: 0.1s;
+$transition-delay: 0.3s;
 $transition-in-between-delay: 0.2s;
 $transition-chevron-rotate-length: 0.2s;
 $transition-chevron-max-width-length: 0.2s;
@@ -290,11 +290,14 @@ jhi-secured-image {
     transition: opacity $transition-color-length $transition-delay + $transition-chevron-rotate-length * 2 ease-in-out;
 }
 
-.btn-sidebar-collapse:hover::after,
-.btn-sidebar-collapse:hover::before {
+.btn-sidebar-collapse:hover::after {
     background-color: var(--sidebar-card-selected-bg);
 }
 
+.btn-sidebar-collapse:hover::before {
+    background-color: var(--link-item-bg);
+}
+
 .btn-sidebar-collapse.is-collapsed {
     border-color: var(--bs-secondary);
 }
diff --git a/src/main/webapp/content/scss/global.scss b/src/main/webapp/content/scss/global.scss
index c7f38171835d..bf31699937ef 100644
--- a/src/main/webapp/content/scss/global.scss
+++ b/src/main/webapp/content/scss/global.scss
@@ -1096,14 +1096,14 @@ body.transparent-background {
     display: none;
 }
 
-$transition-sidebar-content-opacity-length: 0.2s;
-$transition-sidebar-width-length: 0.2s;
-$transition-in-between-delay: 0.1s;
+$transition-sidebar-content-opacity-length: 0.1s;
+$transition-sidebar-width-length: 0.1s;
+$transition-in-between-delay: 0.05s;
 
 .sidebar-content {
     opacity: 1;
 
-    transition: opacity $transition-sidebar-content-opacity-length ($transition-sidebar-width-length + $transition-in-between-delay) ease-in-out;
+    transition: opacity $transition-sidebar-content-opacity-length 0s ease-in-out;
 }
 
 .sidebar-collapsed .sidebar-content {
@@ -1127,8 +1127,8 @@ $transition-in-between-delay: 0.1s;
     margin-right: 0;
 
     transition:
-        max-width $transition-sidebar-width-length $transition-sidebar-content-opacity-length + $transition-in-between-delay ease-in-out,
-        margin-right $transition-sidebar-width-length $transition-sidebar-content-opacity-length + $transition-in-between-delay ease-in-out;
+        max-width $transition-sidebar-width-length 0s ease-in-out,
+        margin-right $transition-sidebar-width-length 0s ease-in-out;
 }
 
 .sidebar-width {