aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts/components/ui/animation.tsx
diff options
context:
space:
mode:
authorLeonid Logvinov <logvinov.leon@gmail.com>2018-07-05 21:04:01 +0800
committerLeonid Logvinov <logvinov.leon@gmail.com>2018-07-05 21:04:01 +0800
commit1ee2d6ed54b6159d1e8952692f4ddba0ebd65012 (patch)
tree1cebf47acf4fff2352a709035c141ec7ffdb8353 /packages/website/ts/components/ui/animation.tsx
parent1eba78e20ac468d3b4d6ebe8fd91eb5277577e0a (diff)
parent5176d929fa6d3c6ce414448ea2441bd450f04e3c (diff)
downloaddexon-0x-contracts-1ee2d6ed54b6159d1e8952692f4ddba0ebd65012.tar
dexon-0x-contracts-1ee2d6ed54b6159d1e8952692f4ddba0ebd65012.tar.gz
dexon-0x-contracts-1ee2d6ed54b6159d1e8952692f4ddba0ebd65012.tar.bz2
dexon-0x-contracts-1ee2d6ed54b6159d1e8952692f4ddba0ebd65012.tar.lz
dexon-0x-contracts-1ee2d6ed54b6159d1e8952692f4ddba0ebd65012.tar.xz
dexon-0x-contracts-1ee2d6ed54b6159d1e8952692f4ddba0ebd65012.tar.zst
dexon-0x-contracts-1ee2d6ed54b6159d1e8952692f4ddba0ebd65012.zip
Merge branch 'v2-prototype' into v2-contract-wrappers-WIP
Diffstat (limited to 'packages/website/ts/components/ui/animation.tsx')
-rw-r--r--packages/website/ts/components/ui/animation.tsx8
1 files changed, 8 insertions, 0 deletions
diff --git a/packages/website/ts/components/ui/animation.tsx b/packages/website/ts/components/ui/animation.tsx
index 136f3d005..943e3bf28 100644
--- a/packages/website/ts/components/ui/animation.tsx
+++ b/packages/website/ts/components/ui/animation.tsx
@@ -14,21 +14,29 @@ const appearFromBottomFrames = keyframes`
position: fixed;
bottom: -500px;
left: 0px;
+ right: 0px;
}
to {
position: fixed;
bottom: 0px;
left: 0px;
+ right: 0px;
}
`;
+const stylesForAnimation: { [K in AnimationType]: string } = {
+ // Needed for safari
+ easeUpFromBottom: `position: fixed`,
+};
+
const animations: { [K in AnimationType]: string } = {
easeUpFromBottom: `${appearFromBottomFrames} 1s ease 0s 1 forwards`,
};
export const Animation = styled(PlainAnimation)`
animation: ${props => animations[props.type]};
+ ${props => stylesForAnimation[props.type]};
`;
Animation.displayName = 'Animation';