roleypoly/v1
1
0
Fork 0
mirror of https://github.com/roleypoly/roleypoly-v1.git synced 2025-04-28 05:29:11 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

media query creator improvement

Browse source
This commit is contained in:
41666 2019-03-18 04:52:28 -05:00
parent 007e0d3197
commit 3ba5bdb999
1 changed files with 44 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

46
ui/kit/media.js
View file

@ -1,5 +1,7 @@
// @flow // @flow
export type MediaQuery = $Shape<{ import styled from 'styled-components'
export type MediaQueryConfig = $Shape<{
xs: string, xs: string,
sm: string, sm: string,
md: string, md: string,
@ -15,7 +17,7 @@ export const breakpoints = {
xl: 1280 xl: 1280
} }
export default (mq: MediaQuery) => { const MediaQuery = (mq: MediaQueryConfig) => {
const out = [] const out = []
for (const size in mq) { for (const size in mq) {
@ -30,3 +32,43 @@ export default (mq: MediaQuery) => {
return out.join('\n') return out.join('\n')
} }
export default MediaQuery
export const Hide = {
XS: styled.div`
display: none;
${() => MediaQuery({ sm: `display: block` })}
`,
SM: styled.div`
display: none;
${() => MediaQuery({ md: `display: block` })}
`,
MD: styled.div`
display: none;
${() => MediaQuery({ lg: `display: block` })}
`,
LG: styled.div`
display: none;
${() => MediaQuery({ xl: `display: block` })}
`
}
export const Show = {
XS: styled.div`
display: block;
${() => MediaQuery({ sm: `display: none` })}
`,
SM: styled.div`
display: block;
${() => MediaQuery({ md: `display: none` })}
`,
MD: styled.div`
display: block;
${() => MediaQuery({ lg: `display: none` })}
`,
LG: styled.div`
display: block;
${() => MediaQuery({ xl: `display: none` })}
`
}