Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
}
const minWidth = (from: number): string => `@media (min-width: ${`${from}px`})`
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),
}
}
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;
breakpoints.wide,
),
},
},
phablet: {
and: {
tablet: minWidthMaxWidth(breakpoints.phablet, breakpoints.tablet),
desktop: minWidthMaxWidth(breakpoints.phablet, breakpoints.desktop),
leftCol: minWidthMaxWidth(breakpoints.phablet, breakpoints.leftCol),
wide: minWidthMaxWidth(breakpoints.phablet, breakpoints.wide),
},
},
tablet: {
and: {
desktop: minWidthMaxWidth(breakpoints.tablet, breakpoints.desktop),
leftCol: minWidthMaxWidth(breakpoints.tablet, breakpoints.leftCol),
wide: minWidthMaxWidth(breakpoints.tablet, breakpoints.wide),
},
},
desktop: {
and: {
leftCol: minWidthMaxWidth(breakpoints.desktop, breakpoints.leftCol),
wide: minWidthMaxWidth(breakpoints.desktop, breakpoints.wide),
},
},
leftCol: {
and: {
wide: minWidthMaxWidth(breakpoints.leftCol, breakpoints.wide),
},
},
}
breakpoints.mobileLandscape,
breakpoints.desktop,
),
leftCol: minWidthMaxWidth(
breakpoints.mobileLandscape,
breakpoints.leftCol,
),
wide: minWidthMaxWidth(
breakpoints.mobileLandscape,
breakpoints.wide,
),
},
},
phablet: {
and: {
tablet: minWidthMaxWidth(breakpoints.phablet, breakpoints.tablet),
desktop: minWidthMaxWidth(breakpoints.phablet, breakpoints.desktop),
leftCol: minWidthMaxWidth(breakpoints.phablet, breakpoints.leftCol),
wide: minWidthMaxWidth(breakpoints.phablet, breakpoints.wide),
},
},
tablet: {
and: {
desktop: minWidthMaxWidth(breakpoints.tablet, breakpoints.desktop),
leftCol: minWidthMaxWidth(breakpoints.tablet, breakpoints.leftCol),
wide: minWidthMaxWidth(breakpoints.tablet, breakpoints.wide),
},
},
desktop: {
and: {
leftCol: minWidthMaxWidth(breakpoints.desktop, breakpoints.leftCol),
wide: minWidthMaxWidth(breakpoints.desktop, breakpoints.wide),