ztr/TelegramPWA
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Adjust transitions (follow-up)

Browse Source
This commit is contained in:
Alexander Zinchuk 2021-12-10 18:32:41 +01:00
parent 00c61e570f
commit ccb7aeb3b1
2 changed files with 5 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/ui/TabList.tsx
View File

@ -27,7 +27,7 @@ type OwnProps = {
const TAB_SCROLL_THRESHOLD_PX = 16; const TAB_SCROLL_THRESHOLD_PX = 16;
// Should match duration from `--slide-transition` CSS variable // 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<OwnProps> = ({ const TabList: FC<OwnProps> = ({
tabs, activeTab, big, onSwitchTab, tabs, activeTab, big, onSwitchTab,

6
src/styles/_variables.scss
View File

@ -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: 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"); --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-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); --slide-transition: 300ms cubic-bezier(0.25, 1, 0.5, 1);
--select-transition: 200ms ease-out; --select-transition: 200ms ease-out;
body.is-ios { body.is-ios {
--layer-transition: 450ms cubic-bezier(0.33, 1, 0.68, 1); --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 { body.is-android {
--layer-transition: 450ms cubic-bezier(0.25, 1, 0.5, 1); --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);
} }
} }