@littlespoon/theme/lib/breakpoints.js.flow

Little Spoon theme

/**
 * Flowtype definitions for breakpoints
 * Generated by Flowgen from a Typescript Definition
 * Flowgen v1.21.0
 * @flow
 */

declare export var mobile: 0;
declare export var xs: 375;
declare export var sm: 550;
declare export var md: 768;
declare export var tablet: 768;
declare export var lg: 1000;
declare export var desktop: 1000;
declare export var xl: 1200;
declare export var 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; }'
 * ```
 */
declare export var up: (minWidth: number, css?: string) => string;
declare export var 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; }'
 * ```
 */
declare export var down: (maxWidth: number, css?: string) => string;
declare export var maxWidth: (maxWidth: number, css?: string) => string;
declare var breakpoints: {
  +xs: 375,
  +sm: 550,
  +md: 768,
  +lg: 1000,
  +xl: 1200,
  +xxl: 1440,
  +mobile: 0,
  +tablet: 768,
  +desktop: 1000,
  +up: (minWidth: number, css?: string) => string,
  +down: (maxWidth: number, css?: string) => string,
  +minWidth: (minWidth: number, css?: string) => string,
  +maxWidth: (maxWidth: number, css?: string) => string,
  ...
};
declare export default typeof breakpoints;