crowetic/protocol
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Quick test responsive cols

Browse Source
This commit is contained in:
Ezekiel Aquino
2018-11-29 09:58:08 +01:00
parent 03289293c3
commit 9b794c00ea
1 changed files with 9 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
packages/website/ts/@next/components/layout.tsx
View File

@@ -77,12 +77,18 @@ export const Wrap = styled.div<WrapProps>`
max-width: ${props => WRAPPER_WIDTHS[props.width || 'default']}; max-width: ${props => WRAPPER_WIDTHS[props.width || 'default']};
background-color: ${props => props.bgColor}; background-color: ${props => props.bgColor};
margin: 0 auto; margin: 0 auto;
display: flex;
justify-content: space-between; @media (min-width: 768px) {
display: flex;
justify-content: space-between;
}
`; `;
export const Column = styled.div<ColumnProps>` export const Column = styled.div<ColumnProps>`
width: ${props => props.colWidth ? COLUMN_WIDTHS[props.colWidth] : '100%'};
padding: ${props => !props.noPadding && '30px'}; padding: ${props => !props.noPadding && '30px'};
border: 1px dotted rgba(255, 0, 0, 0.3); border: 1px dotted rgba(255, 0, 0, 0.3);
@media (min-width: 768px) {
width: ${props => props.colWidth ? COLUMN_WIDTHS[props.colWidth] : '100%'};
}
`; `;