aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts/@next/components/newLayout.tsx
diff options
context:
space:
mode:
authorSteve Klebanoff <steve@0xproject.com>2018-12-20 00:18:17 +0800
committerGitHub <noreply@github.com>2018-12-20 00:18:17 +0800
commita7f847bf3e693a275b0aa71bcdb12d947b445175 (patch)
tree314c9d1899070b8d8a35c7df3b2fd0a9f214268e /packages/website/ts/@next/components/newLayout.tsx
parent59d7efa78af41a91617b5a1f253a0f7e17553dca (diff)
parent0eef07307eb31fe3d72cb26634f102ad6115fccb (diff)
downloaddexon-sol-tools-a7f847bf3e693a275b0aa71bcdb12d947b445175.tar
dexon-sol-tools-a7f847bf3e693a275b0aa71bcdb12d947b445175.tar.gz
dexon-sol-tools-a7f847bf3e693a275b0aa71bcdb12d947b445175.tar.bz2
dexon-sol-tools-a7f847bf3e693a275b0aa71bcdb12d947b445175.tar.lz
dexon-sol-tools-a7f847bf3e693a275b0aa71bcdb12d947b445175.tar.xz
dexon-sol-tools-a7f847bf3e693a275b0aa71bcdb12d947b445175.tar.zst
dexon-sol-tools-a7f847bf3e693a275b0aa71bcdb12d947b445175.zip
Merge pull request #1457 from 0xProject/feature/website/0x-org-linting
[website] 0x org linting and prettier
Diffstat (limited to 'packages/website/ts/@next/components/newLayout.tsx')
-rw-r--r--packages/website/ts/@next/components/newLayout.tsx36
1 files changed, 26 insertions, 10 deletions
diff --git a/packages/website/ts/@next/components/newLayout.tsx b/packages/website/ts/@next/components/newLayout.tsx
index edb236576..28e7653c5 100644
--- a/packages/website/ts/@next/components/newLayout.tsx
+++ b/packages/website/ts/@next/components/newLayout.tsx
@@ -49,14 +49,15 @@ export interface ColumnProps {
export const Section: React.FunctionComponent<SectionProps> = (props: SectionProps) => {
return (
<SectionBase {...props}>
- <Wrap {...props}>
- {props.children}
- </Wrap>
+ <Wrap {...props}>{props.children}</Wrap>
</SectionBase>
);
};
-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};
@@ -70,7 +71,10 @@ export const Column = styled.div<ColumnProps>`
}
`;
-export const FlexWrap = styled.div<FlexProps>`
+export const FlexWrap =
+ styled.div <
+ FlexProps >
+ `
max-width: 1500px;
margin: 0 auto;
padding: ${props => props.padding};
@@ -81,12 +85,18 @@ export const FlexWrap = styled.div<FlexProps>`
}
`;
-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;
@@ -100,7 +110,10 @@ const SectionBase = styled.section<SectionProps>`
}
`;
-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')};
@@ -108,10 +121,13 @@ const Wrap = styled(FlexWrap)<WrapProps>`
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'};
+ justify-content: ${props => (props.isCentered ? `center` : 'space-between')};
@media (max-width: 768px) {
width: 100%;