@navinc/base-react-components/dist/themes/media.js

Nav's Pattern Library

/**
 * `xs`: Phones, < 768px
 *
 * `sm`: Tablets, 768px - 1024px
 *
 * `md`: Laptops, 1024px - 1280px
 *
 * `lg`: Desktops, > 1280px
 *
 * `small` and `large` are deprecated
 */
export const media = {
    xs: '768px',
    sm: '1024px',
    /** @deprecated
     * use `sm` instead
     */
    small: '600px',
    md: '1280px',
    /** @deprecated
     * use `lg` instead
     */
    large: '1440px',
    lg: '1280px',
};
export const mediaQueryFragments = {
    onlyPhones: `(max-width: ${media.xs})`,
    largerThanPhone: `(min-width: ${media.xs})`,
    onlyTablets: `(min-width: ${media.xs}) and (max-width: ${media.sm})`,
    largerThanTablet: `(min-width: ${media.sm})`,
    onlyLaptops: `(min-width: ${media.sm}) and (max-width: ${media.md})`,
    largerThanLaptop: `(min-width: ${media.md})`,
    onlyDesktops: `(min-width: ${media.lg})`,
};
export const mediaQuery = {
    onlyPhones: `@media ${mediaQueryFragments.onlyPhones}`,
    largerThanPhone: `@media ${mediaQueryFragments.largerThanPhone}`,
    onlyTablets: `@media ${mediaQueryFragments.onlyTablets}`,
    largerThanTablet: `@media ${mediaQueryFragments.largerThanTablet}`,
    onlyLaptops: `@media ${mediaQueryFragments.onlyLaptops}`,
    largerThanLaptop: `@media ${mediaQueryFragments.largerThanLaptop}`,
    onlyDesktops: `@media ${mediaQueryFragments.onlyDesktops}`,
};
//# sourceMappingURL=media.js.map