From 0d12c64c478b9d0595fb3fa7be4a8fa666e39281 Mon Sep 17 00:00:00 2001 From: Ajay Bura Date: Wed, 8 Dec 2021 14:02:44 +0530 Subject: [PATCH] Add animation on profile pic hover Signed-off-by: Ajay Bura --- src/app/molecules/message/Message.scss | 6 ++++++ src/app/molecules/sidebar-avatar/SidebarAvatar.scss | 2 +- src/index.scss | 3 +++ 3 files changed, 10 insertions(+), 1 deletion(-) diff --git a/src/app/molecules/message/Message.scss b/src/app/molecules/message/Message.scss index 1b7da57..1011926 100644 --- a/src/app/molecules/message/Message.scss +++ b/src/app/molecules/message/Message.scss @@ -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; diff --git a/src/app/molecules/sidebar-avatar/SidebarAvatar.scss b/src/app/molecules/sidebar-avatar/SidebarAvatar.scss index ecb3812..ce447ae 100644 --- a/src/app/molecules/sidebar-avatar/SidebarAvatar.scss +++ b/src/app/molecules/sidebar-avatar/SidebarAvatar.scss @@ -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) diff --git a/src/index.scss b/src/index.scss index 941f94d..605de41 100644 --- a/src/index.scss +++ b/src/index.scss @@ -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; }