aboutsummaryrefslogtreecommitdiffstats
path: root/packages/website/ts/@next/components
diff options
context:
space:
mode:
authorEzekiel Aquino <ezekiel@bakkenbaeck.no>2018-11-30 21:55:13 +0800
committerEzekiel Aquino <ezekiel@bakkenbaeck.no>2018-11-30 21:55:13 +0800
commitbb63c5c86fd6559c13e2cebef253e81f379b46a6 (patch)
tree9d3a22e94f05c3285b8a3b291e0b3376a3325154 /packages/website/ts/@next/components
parent82d6f2150b5a96b9effbaf86b9c28abb5b2b750a (diff)
downloaddexon-0x-contracts-bb63c5c86fd6559c13e2cebef253e81f379b46a6.tar.gz
dexon-0x-contracts-bb63c5c86fd6559c13e2cebef253e81f379b46a6.tar.zst
dexon-0x-contracts-bb63c5c86fd6559c13e2cebef253e81f379b46a6.zip
Adds proposal for padding prop on Wrappers
Diffstat (limited to 'packages/website/ts/@next/components')
-rw-r--r--packages/website/ts/@next/components/layout.tsx23
1 files changed, 22 insertions, 1 deletions
diff --git a/packages/website/ts/@next/components/layout.tsx b/packages/website/ts/@next/components/layout.tsx
index ce5d6d578..e66dac8a9 100644
--- a/packages/website/ts/@next/components/layout.tsx
+++ b/packages/website/ts/@next/components/layout.tsx
@@ -12,6 +12,10 @@ interface ColumnWidths {
[key: string]: string;
}
+interface PaddingSizes {
+ [key: string]: string;
+}
+
interface SectionProps {
noPadding?: any;
padLarge?: any;
@@ -23,6 +27,7 @@ interface SectionProps {
interface WrapProps {
width?: 'default' | 'full' | 'medium' | 'narrow';
bgColor?: string;
+ margin?: number | (string | number)[];
}
interface ColumnProps {
@@ -37,7 +42,6 @@ interface GetColWidthArgs {
columns: number;
}
-
const _getColumnWidth = (args: GetColWidthArgs) => {
const { span = 1, columns } = args;
const percentWidth = (span / columns) * 100;
@@ -45,6 +49,18 @@ const _getColumnWidth = (args: GetColWidthArgs) => {
return `calc(${percentWidth}% - ${gutterDiff}px)`;
};
+const _getPadding = (value: number | (string | number)[]) => {
+ let padding = '';
+
+ if (Array.isArray(value)) {
+ padding = value.map(val => PADDING_SIZES[val] || '0px').join(' ');
+ } else {
+ padding = `${value}px`;
+ }
+
+ return padding;
+}
+
const GUTTER = 30 as number;
const MAX_WIDTH = 1500;
const BREAKPOINTS = {
@@ -62,6 +78,10 @@ const COLUMN_WIDTHS: ColumnWidths = {
'1/2': _getColumnWidth({ columns: 2 }),
'2/3': _getColumnWidth({ span: 2, columns: 3 }),
};
+const PADDING_SIZES: PaddingSizes = {
+ 'default': '30px',
+ 'large': '60px',
+};
export const Main = styled.main`
@@ -87,6 +107,7 @@ export const Section = styled.section<SectionProps>`
const WrapBase = styled.div<WrapProps>`
max-width: ${props => WRAPPER_WIDTHS[props.width || 'default']};
+ padding: ${props => _getPadding(props.margin)};
background-color: ${props => props.bgColor};
margin: 0 auto;
`;