Sped up animation

ls1intum · Oct 4, 2024 · 2d8359b · 2d8359b
1 parent 172edd6
commit 2d8359b
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 9 deletions.
diff --git 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
@@ -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 {