#68163 Make footer messaging sticky to bottom of page (#68327)

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
This commit is contained in:
Jen Huang 2020-06-08 15:20:36 -07:00 committed by GitHub
parent e591aa99d3
commit b39234ce80
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 76 additions and 71 deletions

View file

@ -15,6 +15,7 @@ const Message = styled(EuiText).attrs((props) => ({
size: 's',
}))`
padding: ${(props) => props.theme.eui.paddingSizes.m};
margin-top: auto;
`;
export const AlphaMessaging: React.FC<{}> = () => {

View file

@ -20,6 +20,8 @@ interface Props {
const Container = styled.div`
min-height: calc(100vh - ${(props) => props.theme.eui.euiHeaderChildSize});
background: ${(props) => props.theme.eui.euiColorEmptyShade};
display: flex;
flex-direction: column;
`;
const Nav = styled.nav`
@ -52,6 +54,7 @@ export const DefaultLayout: React.FunctionComponent<Props> = ({
/>
)}
<Container>
<div>
<Nav>
<EuiFlexGroup gutterSize="l" alignItems="center">
<EuiFlexItem grow={false}>
@ -131,6 +134,7 @@ export const DefaultLayout: React.FunctionComponent<Props> = ({
</EuiFlexGroup>
</Nav>
{children}
</div>
<AlphaMessaging />
</Container>
</>