Spearhead
/
joyent-portal
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

feat(ui-toolkit): update breakpoints

This commit is contained in:
Fábio Moreira 2018-05-16 14:32:52 +01:00
parent a49cbe0882
commit cdb54dc987
1 changed files with 9 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
packages/ui-toolkit/src/breakpoints/screens.js
View File

@ -2,33 +2,33 @@ import remcalc from 'remcalc';
export const breakpoints = { export const breakpoints = {
small: { small: {
upper: 767 upper: 599
}, },
medium: { medium: {
upper: 1023, upper: 999,
lower: 768 lower: 600
}, },
large: { large: {
upper: 1199, upper: 1399,
lower: 1024 lower: 1000
}, },
xlarge: { xlarge: {
lower: 1200 lower: 1400
} }
}; };
export default { export default {
// >= 768px // >= 599px
smallOnly: `only screen and (max-width: ${remcalc(breakpoints.small.upper)})`, smallOnly: `only screen and (max-width: ${remcalc(breakpoints.small.upper)})`,
small: `only screen and (min-width: ${remcalc(breakpoints.small.upper)})`, small: `only screen and (min-width: ${remcalc(breakpoints.small.upper)})`,
// >= 1024px // >= 999px
mediumOnly: `only screen and (min-width: ${remcalc(breakpoints.medium.lower)}) mediumOnly: `only screen and (min-width: ${remcalc(breakpoints.medium.lower)})
and (max-width: ${remcalc(breakpoints.medium.upper)})`, and (max-width: ${remcalc(breakpoints.medium.upper)})`,
mediumDown: `only screen and (max-width: ${remcalc( mediumDown: `only screen and (max-width: ${remcalc(
breakpoints.medium.upper breakpoints.medium.upper
)})`, )})`,
medium: `only screen and (min-width: ${remcalc(breakpoints.medium.lower)})`, medium: `only screen and (min-width: ${remcalc(breakpoints.medium.lower)})`,
// >= 1200px // >= 1400px
largeOnly: `only screen and (min-width: ${remcalc(breakpoints.large.lower)}) largeOnly: `only screen and (min-width: ${remcalc(breakpoints.large.lower)})
and (max-width: ${remcalc(breakpoints.large.upper)})`, and (max-width: ${remcalc(breakpoints.large.upper)})`,
largeDown: `only screen and (max-width: ${remcalc(breakpoints.large.upper)})`, largeDown: `only screen and (max-width: ${remcalc(breakpoints.large.upper)})`,