Expand Notifications on hover.

BerkeAras · Mar 19, 2022 · cd22c4d · cd22c4d
1 parent c93349b
commit cd22c4d
Showing 1 changed file with 12 additions and 1 deletion.
diff --git a/src/components/Header/HeaderNotificationsDropdown/style.scss b/src/components/Header/HeaderNotificationsDropdown/style.scss
@@ -89,11 +89,22 @@
                     overflow: hidden;
                     text-overflow: ellipsis;
                     white-space: nowrap;
+                    transform: all .1s;
                 }
             }
             &:hover {
                 background: #f7f7f7;
             }
+            // Expand
+            &:hover,
+            &:focus {
+                max-height: fit-content;
+                height: fit-content;
+                p {
+                    text-overflow: unset;
+                    white-space: normal;
+                }
+            }
             &--active {
                 background-color: #f7f7f7;
                 color: $primary-color;
@@ -109,4 +120,4 @@
     @media (max-width: 1300px) {
         right: 10px;
     }
-}
+}