diff options
| author | Ezekiel Aquino <ezekiel@bakkenbaeck.no> | 2018-11-29 22:17:00 +0800 |
|---|---|---|
| committer | Ezekiel Aquino <ezekiel@bakkenbaeck.no> | 2018-11-29 22:17:00 +0800 |
| commit | a114cf5c2eebb62af1faff4c4186d542612f84cc (patch) | |
| tree | 8a668c095aa778e6c6c25ee9af6b1f4122053a23 /packages/website/ts/@next/components/layout.tsx | |
| parent | 4bc5881e9a4214a132481062651ff088f61d3241 (diff) | |
| download | dexon-sol-tools-a114cf5c2eebb62af1faff4c4186d542612f84cc.tar.gz dexon-sol-tools-a114cf5c2eebb62af1faff4c4186d542612f84cc.tar.zst dexon-sol-tools-a114cf5c2eebb62af1faff4c4186d542612f84cc.zip | |
Introduces WrapCentered
Diffstat (limited to 'packages/website/ts/@next/components/layout.tsx')
| -rw-r--r-- | packages/website/ts/@next/components/layout.tsx | 11 |
1 files changed, 10 insertions, 1 deletions
diff --git a/packages/website/ts/@next/components/layout.tsx b/packages/website/ts/@next/components/layout.tsx index d64bcf74a..c807ccb36 100644 --- a/packages/website/ts/@next/components/layout.tsx +++ b/packages/website/ts/@next/components/layout.tsx @@ -83,17 +83,26 @@ export const Section = styled.section<SectionProps>` } `; -export const Wrap = styled.div<WrapProps>` +const WrapBase = styled.div<WrapProps>` max-width: ${props => WRAPPER_WIDTHS[props.width || 'default']}; background-color: ${props => props.bgColor}; margin: 0 auto; +`; +export const Wrap = styled(WrapBase)` @media (min-width: ${BREAKPOINTS.mobile}) { display: flex; justify-content: space-between; } `; +export const WrapCentered = styled(WrapBase)` + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +`; + export const Column = styled.div<ColumnProps>` padding: ${props => !props.noPadding && '30px'}; border: 1px dotted rgba(255, 0, 0, 0.3); |