altering header columns and changing rows to have max-width instead of width

This commit is contained in:
Alex Windett 2017-02-03 11:57:13 +00:00
parent 7508f3fdcb
commit 63699eb2c7
3 changed files with 12 additions and 8 deletions

View File

@ -3,7 +3,7 @@ const constants = require('@ui/shared/constants');
const { const {
colors, colors,
sizes breakpoints
} = constants; } = constants;
const { const {
@ -13,6 +13,9 @@ const {
// Main Contonent Wrapper Styles // Main Contonent Wrapper Styles
module.exports = styled.article` module.exports = styled.article`
background-color: ${colors.base.grey}; background-color: ${colors.base.grey};
padding: 2rem;
${sizes.sm} ${breakpoints.large`
padding: 0;
`}
`; `;

View File

@ -44,6 +44,7 @@ const StyledLogo = styled.img`
const StyledProfileWrapper = styled.div` const StyledProfileWrapper = styled.div`
position: relative; position: relative;
text-align: right;
`; `;
const StyledAvatarWrapper = styled.div` const StyledAvatarWrapper = styled.div`
@ -116,12 +117,12 @@ const Header = ({
<StyledHeader name="application-header"> <StyledHeader name="application-header">
<Container fluid> <Container fluid>
<Row> <Row>
<Column xs={2}> <Column lg={10} xs={8}>
<Link to='/'> <Link to='/'>
<StyledLogo alt='Joyent' src={logo} /> <StyledLogo alt='Joyent' src={logo} />
</Link> </Link>
</Column> </Column>
<Column smOffset={8.5} xs={1.5}> <Column lg={2} xs={4}>
<StyledProfileWrapper> <StyledProfileWrapper>
<StyledAvatarWrapper toggled={tooltip}> <StyledAvatarWrapper toggled={tooltip}>
<EmptyButton onClick={handleToggleClick}> <EmptyButton onClick={handleToggleClick}>

View File

@ -28,14 +28,14 @@ module.exports = styled.div`
${fluid} ${fluid}
${breakpoints.small` ${breakpoints.small`
width: ${sizes.containerSm || '46rem'}; max-width: ${sizes.containerSm || '46rem'};
`} `}
${breakpoints.medium` ${breakpoints.medium`
width: ${sizes.containerMd || '61rem'}; max-width: ${sizes.containerMd || '61rem'};
`} `}
${breakpoints.large` ${breakpoints.large`
width: ${sizes.containerLg || '71rem'}; max-width: ${sizes.containerLg || '71rem'};
`} `}
`; `;