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 { &__avatar-container {
padding-top: 6px; padding-top: 6px;
margin-right: var(--sp-tight); margin-right: var(--sp-tight);
& .avatar-container {
transition: transform 200ms var(--fluid-push);
&:hover {
transform: translateY(-4px);
}
}
& button { & button {
cursor: pointer; cursor: pointer;

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

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

3
src/index.scss
View file

@ -157,6 +157,9 @@
// large size nav drawer & people drawer width => 326px, 312px // large size nav drawer & people drawer width => 326px, 312px
// medium size nav drawer & people drawer width => 280, 268 // 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; --font-family: 'Roboto', 'Supreme', sans-serif;
} }