crowetic/protocol
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix isFullWidth type declaration in layout

Browse Source
This commit is contained in:
Ezekiel Aquino
2018-12-03 12:21:57 +01:00
parent 7f77347ea4
commit 6f333f2b55
1 changed files with 4 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
packages/website/ts/@next/components/layout.tsx
View File

@@ -92,16 +92,16 @@ export const Main = styled.main`
// make a const on every route to withComponent-size it. // make a const on every route to withComponent-size it.
// just <Section asElement?="div/section/footer/header/whatever" /> ? // just <Section asElement?="div/section/footer/header/whatever" /> ?
export const Section = styled.section<SectionProps>` export const Section = styled.section<SectionProps>`
width: ${props => props.fullWidth ? `calc(100% + ${GUTTER * 2}px)` : '100%'}; width: ${props => props.isFullWidth ? `calc(100% + ${GUTTER * 2}px)` : '100%'};
padding: ${props => !props.isNoPadding && (props.isPadLarge ? '60px 30px' : '30px')}; padding: ${props => !props.isNoPadding && (props.isPadLarge ? '60px 30px' : '30px')};
margin-bottom: ${props => !props.isNoMargin && `${GUTTER}px`}; margin-bottom: ${props => !props.isNoMargin && `${GUTTER}px`};
margin-left: ${props => props.fullWidth && `-${GUTTER}px`}; margin-left: ${props => props.isFullWidth && `-${GUTTER}px`};
background-color: ${props => props.bgColor}; background-color: ${props => props.bgColor};
border: 1px dotted rgba(0, 255, 0, 0.3); border: 1px dotted rgba(0, 255, 0, 0.3);
@media (min-width: 1560px) { @media (min-width: 1560px) {
width: ${props => props.fullWidth && '100vw'}; width: ${props => props.isFullWidth && '100vw'};
margin-left: ${props => props.fullWidth && `calc(750px - 50vw)`}; margin-left: ${props => props.isFullWidth && `calc(750px - 50vw)`};
} }
@media (max-width: ${BREAKPOINTS.mobile}) { @media (max-width: ${BREAKPOINTS.mobile}) {