49 lines
1.1 KiB
TypeScript
49 lines
1.1 KiB
TypeScript
import styled from 'styled-components'
|
|
|
|
export function keys<O>(o: O) {
|
|
return Object.keys(o) as (keyof O)[]
|
|
}
|
|
|
|
export const Container = styled.div`
|
|
margin: 0 auto;
|
|
padding: 0 1rem;
|
|
|
|
${props => keys(props.theme.screen.min)
|
|
.map(key => `@media(min-width: ${props.theme.screen.min[key]}) {
|
|
max-width: ${props.theme.container[key]};
|
|
}`)
|
|
.join('\n')
|
|
}
|
|
`
|
|
|
|
export const Columns = styled.div`
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
margin: -1rem -1rem -1rem -1rem;
|
|
align-items: center;
|
|
`
|
|
|
|
export interface ColumnProps {
|
|
xs?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12
|
|
sm?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12
|
|
md?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12
|
|
lg?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12
|
|
}
|
|
|
|
export const Column = styled.div<ColumnProps>`
|
|
padding: 1rem;
|
|
|
|
width: ${props => props.xs! * 100 / 12}%;
|
|
|
|
${props => keys(props.theme.screen.min)
|
|
.filter(key => !!props[key])
|
|
.map(key => `@media(min-width: ${props.theme.screen.min[key]}) {
|
|
width: ${props[key]! * 100 / 12}%;
|
|
}`)
|
|
.join('\n')
|
|
}
|
|
`
|
|
Column.defaultProps = {
|
|
xs: 12,
|
|
}
|