aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts/components/newLayout.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'packages/website/ts/components/newLayout.tsx')
-rw-r--r--packages/website/ts/components/newLayout.tsx30
1 files changed, 6 insertions, 24 deletions
diff --git a/packages/website/ts/components/newLayout.tsx b/packages/website/ts/components/newLayout.tsx
index 28e7653c5..07691a02a 100644
--- a/packages/website/ts/components/newLayout.tsx
+++ b/packages/website/ts/components/newLayout.tsx
@@ -54,10 +54,7 @@ export const Section: React.FunctionComponent<SectionProps> = (props: SectionPro
);
};
-export const Column =
- styled.div <
- ColumnProps >
- `
+export const Column = styled.div<ColumnProps>`
width: ${props => props.width};
max-width: ${props => props.maxWidth};
padding: ${props => props.padding};
@@ -71,10 +68,7 @@ export const Column =
}
`;
-export const FlexWrap =
- styled.div <
- FlexProps >
- `
+export const FlexWrap = styled.div<FlexProps>`
max-width: 1500px;
margin: 0 auto;
padding: ${props => props.padding};
@@ -85,18 +79,12 @@ export const FlexWrap =
}
`;
-export const WrapSticky =
- styled.div <
- WrapProps >
- `
+export const WrapSticky = styled.div<WrapProps>`
position: sticky;
top: ${props => props.offsetTop || '60px'};
`;
-const SectionBase =
- styled.section <
- SectionProps >
- `
+const SectionBase = styled.section<SectionProps>`
width: ${props => !props.isFullWidth && 'calc(100% - 60px)'};
max-width: 1500px;
margin: 0 auto;
@@ -110,10 +98,7 @@ const SectionBase =
}
`;
-const Wrap =
- styled(FlexWrap) <
- WrapProps >
- `
+const Wrap = styled(FlexWrap)<WrapProps>`
width: ${props => props.wrapWidth || 'calc(100% - 60px)'};
width: ${props => props.bgColor && 'calc(100% - 60px)'};
max-width: ${props => !props.isFullWidth && (props.maxWidth || '895px')};
@@ -121,10 +106,7 @@ const Wrap =
margin: 0 auto;
`;
-export const WrapGrid =
- styled(Wrap) <
- WrapProps >
- `
+export const WrapGrid = styled(Wrap)<WrapProps>`
display: flex;
flex-wrap: ${props => props.isWrapped && `wrap`};
justify-content: ${props => (props.isCentered ? `center` : 'space-between')};