@taiga-ui/core/styles/variables/media.less

Core library for creating Angular components and applications using Taiga UI

/*
Every max-width of breakpoint is equal:
next min-width - 60% from 1px (1/16 * 0.6 = 0.0375)
*/

@tui-media-retina: ~'(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)';
@tui-media-retina-mobile: ~'(-webkit-min-device-pixel-ratio: 2) and (max-width: 37.4625em), (min-resolution: 192dpi) and (max-width: 37.4625em)';
@tui-media-retina-tablet: ~'(-webkit-min-device-pixel-ratio: 2) and (max-width: 63.9625em), (min-resolution: 192dpi) and (max-width: 63.9625em)';
@tui-media-retina-desktop: ~'(-webkit-min-device-pixel-ratio: 2) and (max-width: 84.9625em), (min-resolution: 192dpi) and (max-width: 84.9625em)';

@tui-mobile: ~'screen and (max-width: 47.9625em)';
@tui-mobile-min: ~'screen and (min-width: 22.5em)';
@tui-mobile-interval: ~'(min-width: 22.5em) and (max-width: 47.9625em)';

@tui-tablet: ~'screen and (max-width: 63.9625em)';
@tui-tablet-min: ~'screen and (min-width: 48em)';
@tui-tablet-interval: ~'(min-width: 48em) and (max-width: 63.9625em)';

@tui-desktop: ~'screen and (max-width: 79.9625em)';
@tui-desktop-min: ~'screen and (min-width: 64em)';
@tui-desktop-interval: ~'(min-width: 64em) and (max-width: 79.9625em)';

@tui-desktop-lg-min: ~'screen and (min-width: 80em)';

@tui-touch: ~'(hover: none) and (pointer: coarse)';
@tui-stylus: ~'(hover: none) and (pointer: fine)';
@tui-pointer: ~'(hover: hover) and (pointer: coarse)';
@tui-mouse: ~'(hover: hover) and (pointer: fine)';