diff options
author | fragosti <francesco.agosti93@gmail.com> | 2018-12-18 07:27:15 +0800 |
---|---|---|
committer | fragosti <francesco.agosti93@gmail.com> | 2018-12-18 07:27:15 +0800 |
commit | 8452c05952171943eae3145b82492dc018d31e1a (patch) | |
tree | e6093b1dd34ff065160591eb7b915f410036b824 /packages/website/ts/components/ui/ease_up_from_bottom_animation.tsx | |
parent | be3142a96a860d764ebb95cc2bc680fc11fd146e (diff) | |
parent | 8925317c95927111b48d29d15e44de19db432052 (diff) | |
download | dexon-sol-tools-8452c05952171943eae3145b82492dc018d31e1a.tar dexon-sol-tools-8452c05952171943eae3145b82492dc018d31e1a.tar.gz dexon-sol-tools-8452c05952171943eae3145b82492dc018d31e1a.tar.bz2 dexon-sol-tools-8452c05952171943eae3145b82492dc018d31e1a.tar.lz dexon-sol-tools-8452c05952171943eae3145b82492dc018d31e1a.tar.xz dexon-sol-tools-8452c05952171943eae3145b82492dc018d31e1a.tar.zst dexon-sol-tools-8452c05952171943eae3145b82492dc018d31e1a.zip |
Merge branch 'feature/website/0x-org' of https://github.com/0xProject/0x-monorepo into feature/website/0x-org-jank-links
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.tsx | 32 |
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'; |