diff options
Diffstat (limited to 'packages/website/ts/@next/components/newLayout.tsx')
-rw-r--r-- | packages/website/ts/@next/components/newLayout.tsx | 27 |
1 files changed, 16 insertions, 11 deletions
diff --git a/packages/website/ts/@next/components/newLayout.tsx b/packages/website/ts/@next/components/newLayout.tsx index 4c5afd318..f4cf19e29 100644 --- a/packages/website/ts/@next/components/newLayout.tsx +++ b/packages/website/ts/@next/components/newLayout.tsx @@ -1,14 +1,13 @@ import * as React from 'react'; import styled from 'styled-components'; -interface FlexProps { - padding?: string; - isFlex?: boolean; -} - -interface WrapProps extends FlexProps { +interface WrapProps { + offsetTop?: string; + maxWidth?: string; isFullWidth?: boolean; isTextCentered?: boolean; + isCentered?: boolean; + isWrapped?: boolean; } interface WrapGridProps { @@ -30,10 +29,16 @@ interface SectionProps extends WrapProps { bgColor?: 'dark' | 'light' | string; } +interface FlexProps { + padding?: string; + isFlex?: boolean; + flexBreakpoint?: string; +} + interface ColumnProps { + padding?: string; width?: string; maxWidth?: string; - padding?: string; } export const Section = (props: SectionProps) => { @@ -60,7 +65,7 @@ export const Column = styled.div<ColumnProps>` } `; -export const FlexWrap = styled.div<SectionProps>` +export const FlexWrap = styled.div<FlexProps>` padding: ${props => props.padding}; @media (min-width: ${props => props.flexBreakpoint || '768px'}) { @@ -69,7 +74,7 @@ export const FlexWrap = styled.div<SectionProps>` } `; -export const WrapSticky = styled.div<WrapStickyProps>` +export const WrapSticky = styled.div<WrapProps>` position: sticky; top: ${props => props.offsetTop || '60px'}; `; @@ -87,7 +92,7 @@ const SectionBase = styled.section<SectionProps>` `; const Wrap = styled(FlexWrap)<WrapProps>` - width: ${props => !props.isFullWidth && 'calc(100% - 60px)'}; + width: calc(100% - 60px); max-width: ${props => !props.isFullWidth && (props.maxWidth || '895px')}; text-align: ${props => props.isTextCentered && 'center'}; margin: 0 auto; @@ -97,7 +102,7 @@ const Wrap = styled(FlexWrap)<WrapProps>` } `; -export const WrapGrid = styled(Wrap)<WrapGridProps>` +export const WrapGrid = styled(Wrap)<WrapProps>` display: flex; flex-wrap: ${props => props.isWrapped && `wrap`}; justify-content: ${props => props.isCentered ? `center` : 'space-between'}; |