aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts/components/newLayout.tsx
diff options
context:
space:
mode:
Diffstat (limited to 'packages/website/ts/components/newLayout.tsx')
-rw-r--r--packages/website/ts/components/newLayout.tsx134
1 files changed, 0 insertions, 134 deletions
diff --git a/packages/website/ts/components/newLayout.tsx b/packages/website/ts/components/newLayout.tsx
deleted file mode 100644
index 07691a02a..000000000
--- a/packages/website/ts/components/newLayout.tsx
+++ /dev/null
@@ -1,134 +0,0 @@
-import * as React from 'react';
-import styled from 'styled-components';
-
-export interface WrapProps {
- bgColor?: string;
- id?: string;
- offsetTop?: string;
- maxWidth?: string;
- wrapWidth?: string;
- isFullWidth?: boolean;
- isTextCentered?: boolean;
- isCentered?: boolean;
- isWrapped?: boolean;
-}
-
-export interface WrapGridProps {
- isWrapped?: boolean;
- isCentered?: boolean;
-}
-
-export interface WrapStickyProps {
- offsetTop?: string;
-}
-
-export interface SectionProps extends WrapProps {
- isPadded?: boolean;
- isFullWidth?: boolean;
- isFlex?: boolean;
- padding?: string;
- paddingMobile?: string;
- flexBreakpoint?: string;
- maxWidth?: string;
- bgColor?: 'dark' | 'light' | string;
- children: any;
-}
-
-export interface FlexProps {
- padding?: string;
- isFlex?: boolean;
- flexBreakpoint?: string;
-}
-
-export interface ColumnProps {
- padding?: string;
- width?: string;
- maxWidth?: string;
-}
-
-export const Section: React.FunctionComponent<SectionProps> = (props: SectionProps) => {
- return (
- <SectionBase {...props}>
- <Wrap {...props}>{props.children}</Wrap>
- </SectionBase>
- );
-};
-
-export const Column = styled.div<ColumnProps>`
- width: ${props => props.width};
- max-width: ${props => props.maxWidth};
- padding: ${props => props.padding};
-
- @media (max-width: 768px) {
- width: 100%;
-
- & + & {
- margin-top: 60px;
- }
- }
-`;
-
-export const FlexWrap = styled.div<FlexProps>`
- max-width: 1500px;
- margin: 0 auto;
- 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<WrapProps>`
- position: sticky;
- top: ${props => props.offsetTop || '60px'};
-`;
-
-const SectionBase = styled.section<SectionProps>`
- width: ${props => !props.isFullWidth && 'calc(100% - 60px)'};
- max-width: 1500px;
- margin: 0 auto;
- padding: ${props => props.isPadded && '120px 0'};
- background-color: ${props => props.theme[`${props.bgColor}BgColor`] || props.bgColor};
- position: relative;
- overflow: ${props => !props.isFullWidth && 'hidden'};
-
- @media (max-width: 768px) {
- padding: ${props => props.isPadded && (props.paddingMobile || '40px 0')};
- }
-`;
-
-const Wrap = styled(FlexWrap)<WrapProps>`
- width: ${props => props.wrapWidth || 'calc(100% - 60px)'};
- width: ${props => props.bgColor && 'calc(100% - 60px)'};
- max-width: ${props => !props.isFullWidth && (props.maxWidth || '895px')};
- text-align: ${props => props.isTextCentered && 'center'};
- margin: 0 auto;
-`;
-
-export const WrapGrid = styled(Wrap)<WrapProps>`
- display: flex;
- flex-wrap: ${props => props.isWrapped && `wrap`};
- justify-content: ${props => (props.isCentered ? `center` : 'space-between')};
-
- @media (max-width: 768px) {
- width: 100%;
- }
-`;
-
-Section.defaultProps = {
- isPadded: true,
-};
-
-FlexWrap.defaultProps = {
- isFlex: true,
-};
-
-WrapGrid.defaultProps = {
- isCentered: true,
- isFullWidth: true,
-};
-
-Wrap.defaultProps = {
- isFlex: false,
-};