aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts/@next
diff options
context:
space:
mode:
authorFred Carlsen <fred@sjelfull.no>2018-12-03 21:28:42 +0800
committerFred Carlsen <fred@sjelfull.no>2018-12-03 21:28:42 +0800
commit64d52e2113f289b7866ce89f2d18e5107dc0edce (patch)
treeb1f9f1ad08a8c319f0c8f007bcc4f650ade3d864 /packages/website/ts/@next
parente0475ce84edbc2a007127824104e2e906a0743f3 (diff)
downloaddexon-sol-tools-64d52e2113f289b7866ce89f2d18e5107dc0edce.tar
dexon-sol-tools-64d52e2113f289b7866ce89f2d18e5107dc0edce.tar.gz
dexon-sol-tools-64d52e2113f289b7866ce89f2d18e5107dc0edce.tar.bz2
dexon-sol-tools-64d52e2113f289b7866ce89f2d18e5107dc0edce.tar.lz
dexon-sol-tools-64d52e2113f289b7866ce89f2d18e5107dc0edce.tar.xz
dexon-sol-tools-64d52e2113f289b7866ce89f2d18e5107dc0edce.tar.zst
dexon-sol-tools-64d52e2113f289b7866ce89f2d18e5107dc0edce.zip
Misc fixes to layout
Diffstat (limited to 'packages/website/ts/@next')
-rw-r--r--packages/website/ts/@next/components/layout.tsx16
1 files changed, 11 insertions, 5 deletions
diff --git a/packages/website/ts/@next/components/layout.tsx b/packages/website/ts/@next/components/layout.tsx
index 4b0b25074..21820f192 100644
--- a/packages/website/ts/@next/components/layout.tsx
+++ b/packages/website/ts/@next/components/layout.tsx
@@ -19,7 +19,7 @@ interface PaddingSizes {
interface SectionProps {
isNoPadding?: boolean;
isPadLarge?: boolean;
- isNoMargin?: any;
+ isNoMargin?: boolean;
bgColor?: string;
isFullWidth?: boolean;
}
@@ -27,6 +27,8 @@ interface SectionProps {
interface WrapProps {
width?: 'default' | 'full' | 'medium' | 'narrow';
bgColor?: string;
+ isWrapped?: boolean;
+ isCentered?: boolean;
padding?: number | ('large' | 'default' | number)[];
}
@@ -55,7 +57,7 @@ const _getPadding = (value: number | (string | number)[]): string => {
} else {
return `${value}px`;
}
-}
+};
const GUTTER = 30 as number;
const MAX_WIDTH = 1500;
@@ -79,7 +81,6 @@ const PADDING_SIZES: PaddingSizes = {
'large': '60px',
};
-
export const Main = styled.main`
border: 1px dotted rgba(0, 0, 255, 0.3);
width: calc(100% - 60px);
@@ -120,6 +121,7 @@ export const Wrap = styled(WrapBase)`
@media (min-width: ${BREAKPOINTS.mobile}) {
display: flex;
justify-content: space-between;
+ flex-wrap: wrap;
}
`;
@@ -132,8 +134,8 @@ export const WrapCentered = styled(WrapBase)`
export const WrapGrid = styled(WrapBase)`
display: flex;
- flex-wrap: wrap;
- justify-content: center;
+ flex-wrap: ${props => props.isWrapped && `wrap`};
+ justify-content: ${props => props.isCentered ? `center` : 'space-between'};
`;
export const Column = styled.div<ColumnProps>`
@@ -145,3 +147,7 @@ export const Column = styled.div<ColumnProps>`
width: ${props => props.colWidth ? COLUMN_WIDTHS[props.colWidth] : '100%'};
}
`;
+
+WrapGrid.defaultProps = {
+ isCentered: true,
+};