diff options
| author | Ezekiel Aquino <ezekiel@bakkenbaeck.no> | 2018-11-29 21:51:41 +0800 |
|---|---|---|
| committer | Ezekiel Aquino <ezekiel@bakkenbaeck.no> | 2018-11-29 21:52:13 +0800 |
| commit | 96b9ffc847c9c8b4ab342fe175865bc3d05d7c8e (patch) | |
| tree | 11584bee50b733992f8bd4c1d5a647a235dd05b8 /packages | |
| parent | 9d850cea144492752818ecd0c04b605be4486487 (diff) | |
| download | dexon-sol-tools-96b9ffc847c9c8b4ab342fe175865bc3d05d7c8e.tar dexon-sol-tools-96b9ffc847c9c8b4ab342fe175865bc3d05d7c8e.tar.gz dexon-sol-tools-96b9ffc847c9c8b4ab342fe175865bc3d05d7c8e.tar.bz2 dexon-sol-tools-96b9ffc847c9c8b4ab342fe175865bc3d05d7c8e.tar.lz dexon-sol-tools-96b9ffc847c9c8b4ab342fe175865bc3d05d7c8e.tar.xz dexon-sol-tools-96b9ffc847c9c8b4ab342fe175865bc3d05d7c8e.tar.zst dexon-sol-tools-96b9ffc847c9c8b4ab342fe175865bc3d05d7c8e.zip | |
Adds fullWidth prop to sections
Diffstat (limited to 'packages')
| -rw-r--r-- | packages/website/ts/@next/components/button.tsx | 2 | ||||
| -rw-r--r-- | packages/website/ts/@next/components/layout.tsx | 13 | ||||
| -rw-r--r-- | packages/website/ts/@next/pages/landing.tsx | 2 |
3 files changed, 12 insertions, 5 deletions
diff --git a/packages/website/ts/@next/components/button.tsx b/packages/website/ts/@next/components/button.tsx index 9cadc4fd5..067576d3c 100644 --- a/packages/website/ts/@next/components/button.tsx +++ b/packages/website/ts/@next/components/button.tsx @@ -8,6 +8,8 @@ interface ButtonInterface { text: string; transparent?: boolean; inline?: boolean; + href?: string, + onClick?: Function, } const StyledButton = styled.button<ButtonInterface>` diff --git a/packages/website/ts/@next/components/layout.tsx b/packages/website/ts/@next/components/layout.tsx index 81ae43db7..6f6e6cd6b 100644 --- a/packages/website/ts/@next/components/layout.tsx +++ b/packages/website/ts/@next/components/layout.tsx @@ -17,6 +17,7 @@ interface SectionProps { noPadding?: any; noMargin?: any; bgColor?: string; + fullWidth?: any; } interface WrapProps { @@ -44,6 +45,9 @@ const _getColumnWidth = (args: GetColWidthArgs) => { const GUTTER = 30 as number; const MAX_WIDTH = 1500; +const BREAKPOINTS = { + mobile: '768px', +}; const WRAPPER_WIDTHS: WrapWidths = { default: `${MAX_WIDTH}px`, // tbd full: '100%', @@ -66,9 +70,10 @@ export const Main = styled.main` `; export const Section = styled.section<SectionProps>` - width: 100%; + width: ${props => props.fullWidth ? `calc(100% + ${GUTTER * 2}px)` : '100%'}; padding: ${props => !props.noPadding && '30px'}; - margin-bottom: ${props => !props.noMargin && '30px'}; + margin-bottom: ${props => !props.noMargin && `${GUTTER}px`}; + margin-left: ${props => props.fullWidth && `-${GUTTER}px`}; background-color: ${props => props.bgColor}; border: 1px dotted rgba(0, 255, 0, 0.3); `; @@ -78,7 +83,7 @@ export const Wrap = styled.div<WrapProps>` background-color: ${props => props.bgColor}; margin: 0 auto; - @media (min-width: 768px) { + @media (min-width: ${BREAKPOINTS.mobile}) { display: flex; justify-content: space-between; } @@ -88,7 +93,7 @@ export const Column = styled.div<ColumnProps>` padding: ${props => !props.noPadding && '30px'}; border: 1px dotted rgba(255, 0, 0, 0.3); - @media (min-width: 768px) { + @media (min-width: ${BREAKPOINTS.mobile}) { width: ${props => props.colWidth ? COLUMN_WIDTHS[props.colWidth] : '100%'}; } `; diff --git a/packages/website/ts/@next/pages/landing.tsx b/packages/website/ts/@next/pages/landing.tsx index 603a26ba3..fa2bf45a1 100644 --- a/packages/website/ts/@next/pages/landing.tsx +++ b/packages/website/ts/@next/pages/landing.tsx @@ -52,7 +52,7 @@ export const NextLanding = () => ( </Wrap> </Section> - <Section noPadding> + <Section fullWidth noPadding> <Wrap width="full"> <Column colWidth="2/3"> SAMPLE FLUSHED width |