diff options
author | Ezekiel Aquino <ezekiel@bakkenbaeck.no> | 2018-12-12 20:24:13 +0800 |
---|---|---|
committer | Ezekiel Aquino <ezekiel@bakkenbaeck.no> | 2018-12-12 20:32:42 +0800 |
commit | b1f4bb722d9a6aaacdd3fdfe1bf7049efe043aa7 (patch) | |
tree | 2eeabf74cfc10ede91b7637ebd62271129de7ed4 /packages/website/ts/@next/components/newLayout.tsx | |
parent | c5db8f25d31d45ac3ff9fff78f7e1fde348d81d4 (diff) | |
download | dexon-sol-tools-b1f4bb722d9a6aaacdd3fdfe1bf7049efe043aa7.tar dexon-sol-tools-b1f4bb722d9a6aaacdd3fdfe1bf7049efe043aa7.tar.gz dexon-sol-tools-b1f4bb722d9a6aaacdd3fdfe1bf7049efe043aa7.tar.bz2 dexon-sol-tools-b1f4bb722d9a6aaacdd3fdfe1bf7049efe043aa7.tar.lz dexon-sol-tools-b1f4bb722d9a6aaacdd3fdfe1bf7049efe043aa7.tar.xz dexon-sol-tools-b1f4bb722d9a6aaacdd3fdfe1bf7049efe043aa7.tar.zst dexon-sol-tools-b1f4bb722d9a6aaacdd3fdfe1bf7049efe043aa7.zip |
More layout changes
Diffstat (limited to 'packages/website/ts/@next/components/newLayout.tsx')
-rw-r--r-- | packages/website/ts/@next/components/newLayout.tsx | 98 |
1 files changed, 79 insertions, 19 deletions
diff --git a/packages/website/ts/@next/components/newLayout.tsx b/packages/website/ts/@next/components/newLayout.tsx index 8a3514bd9..8598b8f12 100644 --- a/packages/website/ts/@next/components/newLayout.tsx +++ b/packages/website/ts/@next/components/newLayout.tsx @@ -1,39 +1,99 @@ import * as React from 'react'; import styled from 'styled-components'; -interface Props { - isPadded: boolean; +interface WrapProps { + isFullWidth?: boolean; + isTextCentered?: boolean; +} + +interface SectionProps { + isPadded?: boolean; + isFullWidth?: boolean; + isFlex?: boolean; + flexBreakpoint?: string; + maxWidth?: string; bgColor?: 'dark' | 'light' | string; } -export const Section = (props: Props) => ( - <SectionBase bgColor={props.bgColor}> - <Wrap - isPadded={props.isPadded} - > - {props.children} - </Wrap> - </SectionBase> -); +interface FlexProps { + padding?: string; + isFlex?: boolean; +} -Section.defaultProps = { - isPadded: true, +interface ColumnProps { + padding?: string; +} + +export const Section = (props: SectionProps) => { + return ( + <SectionBase {...props}> + <Wrap {...props}> + {props.children} + </Wrap> + </SectionBase> + ); }; +export const Column = styled.div` + width: ${props => props.width}; + max-width: ${props => props.maxWidth}; + padding: ${props => props.padding}; + + @media (max-width: 768px) { + width: 100%; + margin-bottom: 60px; + } +`; + +export const FlexWrap = styled.div` + padding: ${props => props.padding}; + + @media (min-width: ${props => props.flexBreakpoint || '768px'}) { + display: ${props => props.isFlex && 'flex'}; + justify-content: ${props => props.isFlex && 'space-between'}; + } +`; + +export const WrapSticky = styled.div` + position: sticky; + top: ${props => props.offsetTop || '60px'}; +`; + const SectionBase = styled.section` - width: calc(100% - 60px); margin: 0 auto; - padding: 120px 0; + padding: ${props => props.isPadded && '120px 0'}; background-color: ${props => props.theme[`${props.bgColor}BgColor`] || props.bgColor}; @media (max-width: 768px) { - padding: 40px 0; + padding: ${props => props.isPadded && '40px 0'}; } `; -const Wrap = styled.div` +const Wrap = styled(FlexWrap)` width: calc(100% - 60px); - max-width: 895px; + max-width: ${props => !props.isFullWidth && (props.maxWidth || '895px')}; margin: 0 auto; - text-align: center; + text-align: ${props => props.isTextCentered && 'center'}; +`; + +export const WrapGrid = styled(Wrap)` + display: flex; + flex-wrap: ${props => props.isWrapped && `wrap`}; + justify-content: ${props => props.isCentered ? `center` : 'space-between'}; `; + +Section.defaultProps = { + isPadded: true, +}; + +FlexWrap.defaultProps = { + isFlex: true, +}; + +WrapGrid.defaultProps = { + isCentered: true, +}; + +Wrap.defaultProps = { + isFlex: false, +}; |