2019-11-23 19:41:14 +07:00
|
|
|
import styled from '@emotion/styled';
|
|
|
|
import { css } from '@emotion/core';
|
2019-10-08 03:19:18 +07:00
|
|
|
|
2019-11-23 19:41:14 +07:00
|
|
|
import { Theme } from '../../design-tokens/theme';
|
2019-02-03 17:23:33 +07:00
|
|
|
|
2019-11-23 19:41:14 +07:00
|
|
|
export const Content = styled('div')<{ theme?: Theme }>(props => ({
|
|
|
|
backgroundColor: props.theme && props.theme.palette.white,
|
|
|
|
flex: 1,
|
|
|
|
display: 'flex',
|
|
|
|
position: 'relative',
|
|
|
|
flexDirection: 'column',
|
|
|
|
}));
|
2019-02-03 17:23:33 +07:00
|
|
|
|
2019-10-03 18:22:36 +07:00
|
|
|
interface ContainerProps {
|
|
|
|
isLoading: boolean;
|
|
|
|
}
|
|
|
|
|
2019-11-23 19:41:14 +07:00
|
|
|
export const Container = styled('div')<ContainerProps>(props => ({
|
|
|
|
display: 'flex',
|
|
|
|
flexDirection: 'column',
|
|
|
|
minHeight: '100vh',
|
|
|
|
overflow: 'hidden',
|
|
|
|
...(props.isLoading &&
|
|
|
|
css`
|
|
|
|
${Content} {
|
|
|
|
background-color: #f5f6f8;
|
|
|
|
}
|
|
|
|
`),
|
|
|
|
}));
|