Added hover effect for sidebar-card-medium

ls1intum · Nov 3, 2024 · fd92a89 · fd92a89
1 parent d567cf4
commit fd92a89
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 2 deletions.
diff --git a/src/main/webapp/app/shared/sidebar/sidebar-card-medium/sidebar-card-medium.component.html b/src/main/webapp/app/shared/sidebar/sidebar-card-medium/sidebar-card-medium.component.html
@@ -1,7 +1,7 @@
 @if (sidebarType === 'inExam') {
     <div
         id="test-sidebar-card-medium"
-        class="pointer rounded-3 col-12 px-1 pt-2 pb-1 border-5 highlight-card bg-module"
+        class="pointer rounded-3 col-12 px-1 pt-2 pb-1 border-5 highlight-card bg-module hover-effect"
         [ngClass]="{ 'bg-selected border-selected': itemSelected }"
         (click)="emitPageChangeForExam()"
     >
@@ -10,7 +10,7 @@
 } @else {
     <div
         id="test-sidebar-card-medium"
-        class="pointer rounded-3 col-12 px-1 py-2 border-start border-5 highlight-card bg-module"
+        class="pointer rounded-3 col-12 px-1 py-2 border-start border-5 highlight-card bg-module hover-effect"
         [ngClass]="{
             'border-success': sidebarItem?.difficulty === DifficultyLevel.EASY,
             'border-warning': sidebarItem?.difficulty === DifficultyLevel.MEDIUM,

diff --git a/src/main/webapp/app/shared/sidebar/sidebar-card-medium/sidebar-card-medium.component.scss b/src/main/webapp/app/shared/sidebar/sidebar-card-medium/sidebar-card-medium.component.scss
@@ -6,6 +6,12 @@
     border-color: var(--module-bg) !important;
 }
 
+.hover-effect {
+    &:hover {
+        background-color: var(--hover-slightly-darker-body-bg);
+    }
+}
+
 .bg-selected {
     background-color: var(--sidebar-card-selected-bg);