MCorange/cinny
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add animation on hover in sidebar

Browse Source 
Signed-off-by: Ajay Bura <ajbura@gmail.com>
This commit is contained in:
Ajay Bura
2021-12-08 11:11:05 +05:30
parent c1e3645d57
commit e20b9d054d
3 changed files with 15 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/app/molecules/sidebar-avatar/SidebarAvatar.scss
View File

@@ -14,6 +14,16 @@
margin: 0 !important;
}
& .avatar-container,
& .notification-badge {
transition: transform 200ms cubic-bezier(0, 0.8, 0.67, 0.97);
}
&:hover .avatar-container {
transform: translateX(4px)
}
&:hover .notification-badge {
transform: translate(calc(20% + 4px), -20%);
}
&:focus {
outline: none;
}
@@ -33,7 +43,7 @@
width: 3px;
height: 12px;
background-color: var(--ic-surface-normal);
background-color: var(--tc-surface-high);
border-radius: 0 4px 4px 0;
transition: height 200ms linear;