diff options
author | Ezekiel Aquino <ezekiel@bakkenbaeck.no> | 2018-12-11 21:21:41 +0800 |
---|---|---|
committer | Ezekiel Aquino <ezekiel@bakkenbaeck.no> | 2018-12-11 21:21:41 +0800 |
commit | 1b7c9b0775b12a2a1dac4a4a548a32bdf6aeedc8 (patch) | |
tree | c18da35d5d4f9a9bf110b3d83067ac0970de450f /packages/website/ts/@next/components/layout.tsx | |
parent | a4d9434290bbc4c8f4424dd0fdc61cb8b1e7aa97 (diff) | |
download | dexon-0x-contracts-1b7c9b0775b12a2a1dac4a4a548a32bdf6aeedc8.tar.gz dexon-0x-contracts-1b7c9b0775b12a2a1dac4a4a548a32bdf6aeedc8.tar.zst dexon-0x-contracts-1b7c9b0775b12a2a1dac4a4a548a32bdf6aeedc8.zip |
WIP about pages
Diffstat (limited to 'packages/website/ts/@next/components/layout.tsx')
-rw-r--r-- | packages/website/ts/@next/components/layout.tsx | 4 |
1 files changed, 3 insertions, 1 deletions
diff --git a/packages/website/ts/@next/components/layout.tsx b/packages/website/ts/@next/components/layout.tsx index 0559d6e3d..fc2a41dd3 100644 --- a/packages/website/ts/@next/components/layout.tsx +++ b/packages/website/ts/@next/components/layout.tsx @@ -34,6 +34,7 @@ interface ColumnProps { colWidth?: '1/4' | '1/3' | '1/2' | '2/3'; isNoPadding?: boolean; isPadLarge?: boolean; + isFlexGrow?: boolean; bgColor?: string; } @@ -83,7 +84,7 @@ export const Main = styled.main` // just <Section asElement?="div/section/footer/header/whatever" /> ? export const Section = styled.section<SectionProps>` width: ${props => props.isFullWidth ? `calc(100% + ${GUTTER * 2}px)` : '100%'}; - padding: ${props => !props.isNoPadding && (props.isPadLarge ? `${PADDING_SIZES.large} ${PADDING_SIZES.default}` : PADDING_SIZES.default)}; + padding: ${props => !props.isNoPadding && (props.isPadLarge ? `${PADDING_SIZES.large}` : PADDING_SIZES.default)}; background-color: ${props => props.bgColor}; position: ${props => props.isRelative && 'relative'}; overflow: ${props => props.isRelative && 'hidden'}; @@ -136,6 +137,7 @@ export const WrapGrid = styled(WrapBase)` export const Column = styled.div<ColumnProps>` background-color: ${props => props.bgColor}; + flex-grow: ${props => props.isFlexGrow && 1}; @media (min-width: ${BREAKPOINTS.mobile}) { padding: ${props => !props.isNoPadding && (props.isPadLarge ? `${PADDING_SIZES.large} ${PADDING_SIZES.default}` : PADDING_SIZES.default)}; |