diff options
| author | Fabio Berger <me@fabioberger.com> | 2019-01-12 00:12:55 +0800 |
|---|---|---|
| committer | Fabio Berger <me@fabioberger.com> | 2019-01-12 00:12:55 +0800 |
| commit | 96ff5eef644b8c4d3f8fc4ec53270991fb51f121 (patch) | |
| tree | 530f43b03d2b3aa09b5f6552d4285df92d45fed0 /packages/website/ts/components/newLayout.tsx | |
| parent | 7f5a2c972bb86df77c423fb7029e9a629ecc1ede (diff) | |
| parent | 2cf57a48dd2857dd5cf2f31f4c60dd47ae4d34a5 (diff) | |
| download | dexon-0x-contracts-96ff5eef644b8c4d3f8fc4ec53270991fb51f121.tar.gz dexon-0x-contracts-96ff5eef644b8c4d3f8fc4ec53270991fb51f121.tar.zst dexon-0x-contracts-96ff5eef644b8c4d3f8fc4ec53270991fb51f121.zip | |
merge development
Diffstat (limited to 'packages/website/ts/components/newLayout.tsx')
| -rw-r--r-- | packages/website/ts/components/newLayout.tsx | 30 |
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')}; |