maverick/netlify-cms-react-starter
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add <Flex />

Browse source
This commit is contained in:
Jinksi 2017-03-29 12:01:55 +10:00
parent 15b6ee34ee
commit 383a3f90a5
1 changed files with 26 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

32
src/components/common.js
View file

@ -1,11 +1,5 @@
import styled from 'styled-components'
export const Container = styled.div`
margin: 0 auto;
max-width: 1111px;
width: 90vw;
`
export const Section = styled.section`
width: 100%;
padding: ${props => {
@ -14,3 +8,29 @@ export const Section = styled.section`
return '5rem 0'
}};
`
export const Container = styled.div`
margin: 0 auto;
max-width: 1111px;
width: 90vw;
`
export const Flex = styled.div`
display: flex;
flex-direction: ${props => props.column ? 'column' : 'row'};
justify-content: ${props => {
if (props.justifyCenter) return 'center'
if (props.justifyEnd) return 'flex-end'
if (props.justifyBetween) return 'space-between'
if (props.justifyAround) return 'space-around'
return 'flex-start'
}};
align-items: ${props => {
if (props.alignStart) return 'flex-start'
if (props.alignEnd) return 'flex-end'
if (props.alignStretch) return 'stretch'
return 'center'
}};
height: ${props => props.fill ? '100%' : 'auto'};
width: ${props => props.fill ? '100%' : 'auto'};
`