arno/trezor-wallet
1
0
Fork 0
mirror of https://github.com/trezor/trezor-wallet synced 2024-11-30 20:28:09 +00:00
Code Issues Releases Wiki Activity

add slide down animation for device menu

Browse Source
This commit is contained in:
slowbackspace 2019-01-21 16:51:52 +01:00
parent 59c4e69ab4
commit 251eb61177
3 changed files with 12 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/DeviceHeader/index.js
View File

@ -15,6 +15,7 @@ const Wrapper = styled.div`
position: relative; position: relative;
height: 70px; height: 70px;
width: 320px; width: 320px;
z-index: 10;
display: flex; display: flex;
align-items: center; align-items: center;
background: ${props => (props.disabled ? colors.GRAY_LIGHT : 'transparent')}; background: ${props => (props.disabled ? colors.GRAY_LIGHT : 'transparent')};

9
src/config/animations.js
View File

@ -72,3 +72,12 @@ export const FADE_IN = keyframes`
opacity: 1; opacity: 1;
} }
`; `;
export const SLIDE_DOWN = keyframes`
0% {
transform: translateY(-100%);
}
100% {
transform: translateY(0%);
}
`;

2
src/views/Wallet/components/LeftNavigation/components/DeviceMenu/index.js
View File

@ -6,6 +6,7 @@ import type { TrezorDevice } from 'flowtype';
import COLORS from 'config/colors'; import COLORS from 'config/colors';
import { FONT_SIZE, FONT_WEIGHT } from 'config/variables'; import { FONT_SIZE, FONT_WEIGHT } from 'config/variables';
import { SLIDE_DOWN } from 'config/animations';
import Button from 'components/Button'; import Button from 'components/Button';
import * as deviceUtils from 'utils/device'; import * as deviceUtils from 'utils/device';
@ -21,6 +22,7 @@ const Wrapper = styled.div`
border-bottom: 1px solid #E3E3E3; border-bottom: 1px solid #E3E3E3;
background: white; background: white;
box-shadow: 0 3px 8px rgba(0,0,0,0.06); box-shadow: 0 3px 8px rgba(0,0,0,0.06);
animation: ${SLIDE_DOWN} 0.25s cubic-bezier(0.17, 0.04, 0.03, 0.94) forwards;
`; `;
const ButtonWrapper = styled.div` const ButtonWrapper = styled.div`