@codegouvfr/react-dsfr/fr/breakpoints.js

French State Design System React integration library

import { breakpointValues as values, breakpointValuesUnit as unit, breakpointKeys as keys } from "./generatedFromCss/breakpoints";
import { assert } from "tsafe/assert";
const epsilon = 0.003125;
export const breakpoints = {
    "up": (key) => `@media (min-width:${values[key]}${unit})`,
    "down": (key) => `@media (max-width:${values[key] - epsilon}${unit})`,
    "between": (start, end) => `@media (min-width:${values[start]}${unit}) and (max-width:${values[end] - epsilon}${unit})`,
    "only": (key) => keys.indexOf(key) + 1 < keys.length
        ? breakpoints.between(key, keys[keys.indexOf(key) + 1])
        : breakpoints.up((assert(key !== "xs"), key)),
    "not": (key) => {
        // handle first and last key separately, for better readability
        const keyIndex = keys.indexOf(key);
        if (keyIndex === 0) {
            return breakpoints.up(keys[1]);
        }
        if (keyIndex === keys.length - 1) {
            const key = keys[keyIndex];
            assert(key !== "xs");
            return breakpoints.down(key);
        }
        return breakpoints
            .between(key, keys[keys.indexOf(key) + 1])
            .replace("@media", "@media not all and");
    }
};
//# sourceMappingURL=breakpoints.js.map