aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts/components/ui/ease_up_from_bottom_animation.tsx
diff options
context:
space:
mode:
authorBrandon Millman <brandon@0xproject.com>2018-12-18 06:50:36 +0800
committerGitHub <noreply@github.com>2018-12-18 06:50:36 +0800
commit4e80c395b15fc1a9ee33eea8b476527dcba672c5 (patch)
treea83587b2104832cc2e3d21f8a6b8e5d1415226eb /packages/website/ts/components/ui/ease_up_from_bottom_animation.tsx
parent30ccddf0d521f0721f475ae75039fdb966ff7ab0 (diff)
parentc4036d7d0f0b0aa2491b67ea882365858574d440 (diff)
downloaddexon-sol-tools-4e80c395b15fc1a9ee33eea8b476527dcba672c5.tar
dexon-sol-tools-4e80c395b15fc1a9ee33eea8b476527dcba672c5.tar.gz
dexon-sol-tools-4e80c395b15fc1a9ee33eea8b476527dcba672c5.tar.bz2
dexon-sol-tools-4e80c395b15fc1a9ee33eea8b476527dcba672c5.tar.lz
dexon-sol-tools-4e80c395b15fc1a9ee33eea8b476527dcba672c5.tar.xz
dexon-sol-tools-4e80c395b15fc1a9ee33eea8b476527dcba672c5.tar.zst
dexon-sol-tools-4e80c395b15fc1a9ee33eea8b476527dcba672c5.zip
Merge pull request #1443 from 0xProject/feature/website/0x-org-portal-updated
[0x.org] fix portal
Diffstat (limited to 'packages/website/ts/components/ui/ease_up_from_bottom_animation.tsx')
-rw-r--r--packages/website/ts/components/ui/ease_up_from_bottom_animation.tsx32
1 files changed, 32 insertions, 0 deletions
diff --git a/packages/website/ts/components/ui/ease_up_from_bottom_animation.tsx b/packages/website/ts/components/ui/ease_up_from_bottom_animation.tsx
new file mode 100644
index 000000000..176c9410c
--- /dev/null
+++ b/packages/website/ts/components/ui/ease_up_from_bottom_animation.tsx
@@ -0,0 +1,32 @@
+import * as React from 'react';
+import { css, keyframes, styled } from 'ts/style/theme';
+
+const appearFromBottomFrames = keyframes`
+ from {
+ position: fixed;
+ bottom: -500px;
+ left: 0px;
+ right: 0px;
+ }
+
+ to {
+ position: fixed;
+ bottom: 0px;
+ left: 0px;
+ right: 0px;
+ }
+`;
+
+const stylesForAnimation = css`
+ position: fixed;
+`;
+const animations = css`
+ animation: ${appearFromBottomFrames} 1s ease 0s 1 forwards;
+`;
+
+export const EaseUpFromBottomAnimation = styled.div`
+ ${props => animations};
+ ${props => stylesForAnimation};
+`;
+
+EaseUpFromBottomAnimation.displayName = 'EaseUpFromBottomAnimation';