aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts/components/ui/ease_up_from_bottom_animation.tsx
diff options
context:
space:
mode:
authorLeonid Logvinov <logvinov.leon@gmail.com>2019-01-09 19:02:25 +0800
committerLeonid Logvinov <logvinov.leon@gmail.com>2019-01-09 19:02:25 +0800
commitea14913b412e78ff458bdfba47182f7363e776e5 (patch)
tree3ee220bfbbd9923b5e1adc36ee51f9b5d39ad640 /packages/website/ts/components/ui/ease_up_from_bottom_animation.tsx
parent5868c91cfb54cfa9177572b201d88d1168bf5b06 (diff)
parent5dd55491b86bf8577405e37d0f2d668aa1273b10 (diff)
downloaddexon-sol-tools-ea14913b412e78ff458bdfba47182f7363e776e5.tar
dexon-sol-tools-ea14913b412e78ff458bdfba47182f7363e776e5.tar.gz
dexon-sol-tools-ea14913b412e78ff458bdfba47182f7363e776e5.tar.bz2
dexon-sol-tools-ea14913b412e78ff458bdfba47182f7363e776e5.tar.lz
dexon-sol-tools-ea14913b412e78ff458bdfba47182f7363e776e5.tar.xz
dexon-sol-tools-ea14913b412e78ff458bdfba47182f7363e776e5.tar.zst
dexon-sol-tools-ea14913b412e78ff458bdfba47182f7363e776e5.zip
Merge development
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.tsx31
1 files changed, 31 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..ba141c01e
--- /dev/null
+++ b/packages/website/ts/components/ui/ease_up_from_bottom_animation.tsx
@@ -0,0 +1,31 @@
+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';