michael/cinny
1
0
Fork 0
Code Issues 8 Pull requests Projects Releases Packages Wiki Activity

Add animation on profile pic hover

Browse source 
Signed-off-by: Ajay Bura <ajbura@gmail.com>
This commit is contained in:
Ajay Bura 2021-12-08 14:02:44 +05:30
parent 27d0a88b36
commit 0d12c64c47
3 changed files with 10 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/app/molecules/message/Message.scss
View file

@ -23,6 +23,12 @@
&__avatar-container {
padding-top: 6px;
margin-right: var(--sp-tight);
& .avatar-container {
transition: transform 200ms var(--fluid-push);
&:hover {
transform: translateY(-4px);
}
}
& button {
cursor: pointer;

2
src/app/molecules/sidebar-avatar/SidebarAvatar.scss
View file

@ -16,7 +16,7 @@
}
& .avatar-container,
& .notification-badge {
transition: transform 200ms cubic-bezier(0, 0.8, 0.67, 0.97);
transition: transform 200ms var(--fluid-push);
}
&:hover .avatar-container {
transform: translateX(4px)

3
src/index.scss
View file

@ -157,6 +157,9 @@
// large size nav drawer & people drawer width => 326px, 312px
// medium size nav drawer & people drawer width => 280, 268
/* transition curves */
--fluid-push: cubic-bezier(0, 0.8, 0.67, 0.97);
--font-family: 'Roboto', 'Supreme', sans-serif;
}