Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
const maxWidth = (until: number): string =>
`@media (max-width: ${`${until - 1}px`})`
const minWidthMaxWidth = (from: number, until: number): string =>
`@media (min-width: ${`${from}px`}) and (max-width: ${`${until - 1}px`})`
// e.g. from.*
const from: BreakpointMap = {
mobileMedium: minWidth(breakpoints.mobileMedium),
mobileLandscape: minWidth(breakpoints.mobileLandscape),
phablet: minWidth(breakpoints.phablet),
tablet: minWidth(breakpoints.tablet),
desktop: minWidth(breakpoints.desktop),
leftCol: minWidth(breakpoints.leftCol),
wide: minWidth(breakpoints.wide),
}
// e.g. until.*
const until: BreakpointMap = {
mobileMedium: maxWidth(breakpoints.mobileMedium),
mobileLandscape: maxWidth(breakpoints.mobileLandscape),
phablet: maxWidth(breakpoints.phablet),
tablet: maxWidth(breakpoints.tablet),
desktop: maxWidth(breakpoints.desktop),
leftCol: maxWidth(breakpoints.leftCol),
wide: maxWidth(breakpoints.wide),
}
// e.g. between.*.and.*
const between = {
mobileMedium: {
type ContainerWidths = {
[key in GridBreakpoints]: string
}
const gridColumns: GridColumns = {
mobile: 4,
tablet: 12,
desktop: 12,
wide: 16,
}
const containerWidths: ContainerWidths = {
mobile: "100%",
tablet: `${breakpoints.tablet}px`,
desktop: `${breakpoints.desktop}px`,
wide: `${breakpoints.wide}px`,
}
const GUTTER_WIDTH = space[5]
const gridRow = css`
@supports (display: grid) {
display: grid;
}
grid-auto-columns: max-content;
column-gap: ${GUTTER_WIDTH}px;
/* horizontal padding is smaller on mobile */
padding: 0 ${space[3]}px;
${from.tablet} {
padding: 0 ${GUTTER_WIDTH}px;
breakpoints.mobileMedium,
breakpoints.phablet,
),
tablet: minWidthMaxWidth(
breakpoints.mobileMedium,
breakpoints.tablet,
),
desktop: minWidthMaxWidth(
breakpoints.mobileMedium,
breakpoints.desktop,
),
leftCol: minWidthMaxWidth(
breakpoints.mobileMedium,
breakpoints.leftCol,
),
wide: minWidthMaxWidth(breakpoints.mobileMedium, breakpoints.wide),
},
},
mobileLandscape: {
and: {
phablet: minWidthMaxWidth(
breakpoints.mobileLandscape,
breakpoints.phablet,
),
tablet: minWidthMaxWidth(
breakpoints.mobileLandscape,
breakpoints.tablet,
),
desktop: minWidthMaxWidth(
breakpoints.mobileLandscape,
breakpoints.desktop,
),