diff options
author | Brandon Millman <brandon.millman@gmail.com> | 2018-12-18 04:23:08 +0800 |
---|---|---|
committer | Brandon Millman <brandon.millman@gmail.com> | 2018-12-18 06:31:14 +0800 |
commit | c4036d7d0f0b0aa2491b67ea882365858574d440 (patch) | |
tree | a83587b2104832cc2e3d21f8a6b8e5d1415226eb /packages/website/ts/components/ui | |
parent | 30ccddf0d521f0721f475ae75039fdb966ff7ab0 (diff) | |
download | dexon-0x-contracts-c4036d7d0f0b0aa2491b67ea882365858574d440.tar dexon-0x-contracts-c4036d7d0f0b0aa2491b67ea882365858574d440.tar.gz dexon-0x-contracts-c4036d7d0f0b0aa2491b67ea882365858574d440.tar.bz2 dexon-0x-contracts-c4036d7d0f0b0aa2491b67ea882365858574d440.tar.lz dexon-0x-contracts-c4036d7d0f0b0aa2491b67ea882365858574d440.tar.xz dexon-0x-contracts-c4036d7d0f0b0aa2491b67ea882365858574d440.tar.zst dexon-0x-contracts-c4036d7d0f0b0aa2491b67ea882365858574d440.zip |
fix(website): update Animation component for styled components v4
Diffstat (limited to 'packages/website/ts/components/ui')
-rw-r--r-- | packages/website/ts/components/ui/animation.tsx | 42 | ||||
-rw-r--r-- | packages/website/ts/components/ui/ease_up_from_bottom_animation.tsx | 32 |
2 files changed, 32 insertions, 42 deletions
diff --git a/packages/website/ts/components/ui/animation.tsx b/packages/website/ts/components/ui/animation.tsx deleted file mode 100644 index 943e3bf28..000000000 --- a/packages/website/ts/components/ui/animation.tsx +++ /dev/null @@ -1,42 +0,0 @@ -import * as React from 'react'; -import { keyframes, styled } from 'ts/style/theme'; - -export type AnimationType = 'easeUpFromBottom'; - -export interface AnimationProps { - type: AnimationType; -} - -const PlainAnimation: React.StatelessComponent<AnimationProps> = props => <div {...props} />; - -const appearFromBottomFrames = keyframes` - from { - 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'; 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'; |