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 {
colors,
sizes
breakpoints
} = constants;
const {
@ -13,6 +13,9 @@ const {
// Main Contonent Wrapper Styles
module.exports = styled.article`
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`
position: relative;
text-align: right;
`;
const StyledAvatarWrapper = styled.div`
@ -116,12 +117,12 @@ const Header = ({
<StyledHeader name="application-header">
<Container fluid>
<Row>
<Column xs={2}>
<Column lg={10} xs={8}>
<Link to='/'>
<StyledLogo alt='Joyent' src={logo} />
</Link>
</Column>
<Column smOffset={8.5} xs={1.5}>
<Column lg={2} xs={4}>
<StyledProfileWrapper>
<StyledAvatarWrapper toggled={tooltip}>
<EmptyButton onClick={handleToggleClick}>

View File

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