Merge branch '1209' of github.com:yldio/joyent-portal into 1209
# Conflicts: # packages/ui-toolkit/src/footer/index.js
Before Width: | Height: | Size: 14 KiB After Width: | Height: | Size: 14 KiB |
Before Width: | Height: | Size: 11 KiB After Width: | Height: | Size: 11 KiB |
Before Width: | Height: | Size: 11 KiB After Width: | Height: | Size: 11 KiB |
Before Width: | Height: | Size: 9.2 KiB After Width: | Height: | Size: 9.2 KiB |
Before Width: | Height: | Size: 31 KiB After Width: | Height: | Size: 31 KiB |
|
@ -4,7 +4,7 @@ import { withTheme } from 'styled-components';
|
|||
|
||||
import {
|
||||
Button,
|
||||
Footer,
|
||||
StickyFooter,
|
||||
QueryBreakpoints,
|
||||
StartIcon,
|
||||
StopIcon,
|
||||
|
@ -25,7 +25,7 @@ export default withTheme(
|
|||
onRemove,
|
||||
theme = {}
|
||||
}) => (
|
||||
<Footer fixed bottom>
|
||||
<StickyFooter fixed bottom>
|
||||
<Row between="xs" middle="xs">
|
||||
<Col xs={7}>
|
||||
{onStart && [
|
||||
|
@ -162,6 +162,6 @@ export default withTheme(
|
|||
</Col>
|
||||
)}
|
||||
</Row>
|
||||
</Footer>
|
||||
</StickyFooter>
|
||||
)
|
||||
);
|
||||
|
|
Before Width: | Height: | Size: 39 KiB After Width: | Height: | Size: 39 KiB |
Before Width: | Height: | Size: 84 KiB After Width: | Height: | Size: 84 KiB |
Before Width: | Height: | Size: 116 KiB After Width: | Height: | Size: 116 KiB |
Before Width: | Height: | Size: 30 KiB After Width: | Height: | Size: 30 KiB |
Before Width: | Height: | Size: 122 KiB After Width: | Height: | Size: 122 KiB |
Before Width: | Height: | Size: 87 KiB After Width: | Height: | Size: 87 KiB |
Before Width: | Height: | Size: 91 KiB After Width: | Height: | Size: 91 KiB |
Before Width: | Height: | Size: 70 KiB After Width: | Height: | Size: 70 KiB |
Before Width: | Height: | Size: 70 KiB After Width: | Height: | Size: 70 KiB |
Before Width: | Height: | Size: 42 KiB After Width: | Height: | Size: 42 KiB |
Before Width: | Height: | Size: 78 KiB After Width: | Height: | Size: 78 KiB |
Before Width: | Height: | Size: 76 KiB After Width: | Height: | Size: 76 KiB |
Before Width: | Height: | Size: 34 KiB After Width: | Height: | Size: 37 KiB |
Before Width: | Height: | Size: 34 KiB After Width: | Height: | Size: 37 KiB |
Before Width: | Height: | Size: 34 KiB After Width: | Height: | Size: 38 KiB |
Before Width: | Height: | Size: 15 KiB After Width: | Height: | Size: 15 KiB |
Before Width: | Height: | Size: 16 KiB After Width: | Height: | Size: 16 KiB |
Before Width: | Height: | Size: 50 KiB After Width: | Height: | Size: 50 KiB |
Before Width: | Height: | Size: 38 KiB After Width: | Height: | Size: 38 KiB |
Before Width: | Height: | Size: 9.1 KiB After Width: | Height: | Size: 9.1 KiB |
Before Width: | Height: | Size: 9.1 KiB After Width: | Height: | Size: 9.1 KiB |
Before Width: | Height: | Size: 9.1 KiB After Width: | Height: | Size: 9.1 KiB |
Before Width: | Height: | Size: 13 KiB After Width: | Height: | Size: 13 KiB |
Before Width: | Height: | Size: 9.1 KiB After Width: | Height: | Size: 9.1 KiB |
Before Width: | Height: | Size: 23 KiB After Width: | Height: | Size: 23 KiB |
Before Width: | Height: | Size: 16 KiB After Width: | Height: | Size: 16 KiB |
|
@ -0,0 +1,44 @@
|
|||
import React from 'react';
|
||||
import styled from 'styled-components';
|
||||
import is from 'styled-is';
|
||||
import remcalc from 'remcalc';
|
||||
|
||||
import Baseline from '../baseline';
|
||||
import { ViewContainer } from '../layout';
|
||||
|
||||
const Container = ViewContainer.extend`
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
align-content: stretch;
|
||||
align-items: stretch;
|
||||
`;
|
||||
|
||||
const Footer = styled.div`
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
align-content: stretch;
|
||||
align-items: stretch;
|
||||
background-color: rgba(241, 241, 241, 1);
|
||||
border-top: ${remcalc(1)} solid ${props => props.theme.grey};
|
||||
max-height: ${remcalc(53)};
|
||||
min-height: ${remcalc(53)};
|
||||
line-height: ${remcalc(25)};
|
||||
height: ${remcalc(70)};
|
||||
max-height: ${remcalc(70)};
|
||||
z-index: 1;
|
||||
${is('fixed')`
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
`};
|
||||
${is('bottom', 'fixed')`
|
||||
bottom: 0;
|
||||
`};
|
||||
`;
|
||||
|
||||
export default Baseline(({ children, fluid, ...rest }) => (
|
||||
<Footer {...rest}>
|
||||
<Container fluid={fluid}>{children}</Container>
|
||||
</Footer>
|
||||
));
|
|
@ -2,6 +2,8 @@ import React from 'react';
|
|||
import styled from 'styled-components';
|
||||
import remcalc from 'remcalc';
|
||||
|
||||
import StickyFooter from './StickyFooter';
|
||||
|
||||
const List = styled.ul`
|
||||
display: flex;
|
||||
list-style: none;
|
||||
|
@ -56,3 +58,5 @@ export default () => (
|
|||
</ListItem>
|
||||
</List>
|
||||
);
|
||||
|
||||
export { default as StickyFooter } from './StickyFooter';
|
||||
|
|
|
@ -11,7 +11,7 @@ export { default as Strong } from './text/strong';
|
|||
export { default as Sup } from './text/sup';
|
||||
export { default as theme } from './theme';
|
||||
export { default as Divider } from './divider';
|
||||
export { default as Footer } from './footer';
|
||||
export { default as Footer, StickyFooter } from './footer';
|
||||
export { default as KeyValue } from './key-value';
|
||||
export { default as StatusLoader } from './status-loader';
|
||||
|
||||
|
|