From ccb7aeb3b1ba1c1d0a4cfd47500b1bdd5064e543 Mon Sep 17 00:00:00 2001 From: Alexander Zinchuk Date: Fri, 10 Dec 2021 18:32:41 +0100 Subject: [PATCH] Adjust transitions (follow-up) --- src/components/ui/TabList.tsx | 2 +- src/styles/_variables.scss | 6 ++++-- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/src/components/ui/TabList.tsx b/src/components/ui/TabList.tsx index 3516eb751..b1cf35c59 100644 --- a/src/components/ui/TabList.tsx +++ b/src/components/ui/TabList.tsx @@ -27,7 +27,7 @@ type OwnProps = { const TAB_SCROLL_THRESHOLD_PX = 16; // Should match duration from `--slide-transition` CSS variable -const SCROLL_DURATION = IS_IOS || IS_ANDROID ? 450 : 300; +const SCROLL_DURATION = IS_IOS ? 450 : IS_ANDROID ? 400 : 300; const TabList: FC = ({ tabs, activeTab, big, onSwitchTab, diff --git a/src/styles/_variables.scss b/src/styles/_variables.scss index 19fe6a0a2..a9955bb1a 100644 --- a/src/styles/_variables.scss +++ b/src/styles/_variables.scss @@ -208,17 +208,19 @@ $color-user-8: #faa774; --drag-target-border: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='8' ry='8' stroke='%23DDDFE0' stroke-width='4' stroke-dasharray='9.1%2c 10.5' stroke-dashoffset='3' stroke-linecap='round'/%3e%3c/svg%3e"); --drag-target-border-hovered: url("data:image/svg+xml,%3csvg width='100%25' height='100%25' xmlns='http://www.w3.org/2000/svg'%3e%3crect width='100%25' height='100%25' fill='none' rx='8' ry='8' stroke='%2363A2E3' stroke-width='4' stroke-dasharray='9.1%2c 10.5' stroke-dashoffset='3' stroke-linecap='round'/%3e%3c/svg%3e"); - --layer-transition: 300ms cubic-bezier(0.33, 1, 0.68, 1); --layer-blackout-opacity: 0.3; + + --layer-transition: 300ms cubic-bezier(0.33, 1, 0.68, 1); --slide-transition: 300ms cubic-bezier(0.25, 1, 0.5, 1); --select-transition: 200ms ease-out; body.is-ios { --layer-transition: 450ms cubic-bezier(0.33, 1, 0.68, 1); + --slide-transition: 450ms cubic-bezier(0.25, 1, 0.5, 1); } body.is-android { --layer-transition: 450ms cubic-bezier(0.25, 1, 0.5, 1); - --slide-transition: 450ms cubic-bezier(0.25, 1, 0.5, 1); + --slide-transition: 400ms cubic-bezier(0.25, 1, 0.5, 1); } }