@littlespoon/theme/lib/breakpoints.d.ts

Little Spoon theme

export declare const mobile = 0;
export declare const xs = 375;
export declare const sm = 550;
export declare const md = 768;
export declare const tablet = 768;
export declare const lg = 1000;
export declare const desktop = 1000;
export declare const xl = 1200;
export declare const xxl = 1440;
/**
 * Generates media query that matches screen widths greater than the screen size given by the breakpoint (inclusive).
 * You can use up or minWidth aliases.
 *
 * @param minWidth - The min-width.
 * @param css - The CSS.
 *
 * @example
 *
 * ```ts
 * breakpoints.up(breakpoints.tablet)
 * // '@media (min-width: 768px)
 * ```
 *
 * ```ts
 * breakpoints.minWidth(breakpoints.tablet)
 * // '@media (min-width: 768px)
 * ```
 *
 * ```ts
 * breakpoints.up(breakpoints.tablet, 'width: 42rem')
 * // '@media (min-width: 768px) { width: 42rem; }'
 * ```
 */
export declare const up: (minWidth: number, css?: string) => string;
export declare const minWidth: (minWidth: number, css?: string) => string;
/**
 * Generates media query that matches screen widths smaller than the screen size given by the breakpoint (inclusive).
 * You can use down or maxWidth aliases.
 *
 * @param maxWidth - The max-width.
 * @param css - The CSS.
 *
 * @example
 *
 * ```ts
 * breakpoints.down(breakpoints.desktop)
 * // '@media (max-width: 1000px)'
 * ```
 *
 * ```ts
 * breakpoints.maxWidth(breakpoints.desktop)
 * // '@media (max-width: 1000px)'
 * ```
 *
 * ```ts
 * breakpoints.down(breakpoints.desktop, 'display: none;')
 * // '@media (max-width: 1000px) { display: none; }'
 * ```
 */
export declare const down: (maxWidth: number, css?: string) => string;
export declare const maxWidth: (maxWidth: number, css?: string) => string;
declare const breakpoints: {
    readonly xs: 375;
    readonly sm: 550;
    readonly md: 768;
    readonly lg: 1000;
    readonly xl: 1200;
    readonly xxl: 1440;
    readonly mobile: 0;
    readonly tablet: 768;
    readonly desktop: 1000;
    readonly up: (minWidth: number, css?: string) => string;
    readonly down: (maxWidth: number, css?: string) => string;
    readonly minWidth: (minWidth: number, css?: string) => string;
    readonly maxWidth: (maxWidth: number, css?: string) => string;
};
export default breakpoints;
//# sourceMappingURL=breakpoints.d.ts.map