roleypoly/v1
1
0
Fork 0
mirror of https://github.com/roleypoly/roleypoly-v1.git synced 2025-04-25 20:19:12 +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
export type MediaQuery = $Shape<{
import styled from 'styled-components'
export type MediaQueryConfig = $Shape<{
xs: string,
sm: string,
md: string,
@ -15,7 +17,7 @@ export const breakpoints = {
xl: 1280
}
export default (mq: MediaQuery) => {
const MediaQuery = (mq: MediaQueryConfig) => {
const out = []
for (const size in mq) {
@ -30,3 +32,43 @@ export default (mq: MediaQuery) => {
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` })}
`
}