diff options
author | Steve Klebanoff <steve@0xproject.com> | 2018-12-20 00:18:17 +0800 |
---|---|---|
committer | GitHub <noreply@github.com> | 2018-12-20 00:18:17 +0800 |
commit | a7f847bf3e693a275b0aa71bcdb12d947b445175 (patch) | |
tree | 314c9d1899070b8d8a35c7df3b2fd0a9f214268e /packages/website/ts/@next/components/newLayout.tsx | |
parent | 59d7efa78af41a91617b5a1f253a0f7e17553dca (diff) | |
parent | 0eef07307eb31fe3d72cb26634f102ad6115fccb (diff) | |
download | dexon-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.tsx | 36 |
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%; |