@icure/cardinal-prescription-be-react/src/styles/responsive-media-queries.ts

This is a Belgian-specific React application for healthcare professionals to manage electronic prescriptions with SAM. Created by iCure.

import { css } from 'styled-components'

export const displayResolution = {
  xs: 420,
  s: 576,
  m: 768,
  l: 992,
  xl: 1200,
  xxl: 1400,
}

export const responsiveMediaQueries = {
  up:
    (size: number) =>
    (first: TemplateStringsArray, ...args: { [key: string]: string }[]) => css`
      @media (min-width: ${size}px) {
        ${css(first, ...args)}
      }
    `,
  down:
    (size: number) =>
    (first: TemplateStringsArray, ...args: { [key: string]: string }[]) => css`
      @media (max-width: ${size}px) {
        ${css(first, ...args)}
      }
    `,
  between:
    (min: number, max: number) =>
    (first: TemplateStringsArray, ...args: { [key: string]: string }[]) => css`
      @media (min-width: ${displayResolution[min]}px) and (max-width: ${displayResolution[max]}px) {
        ${css(first, ...args)}
      }
    `,
}