19 lines
635 B
TypeScript
19 lines
635 B
TypeScript
 
|
import { style } from '@vanilla-extract/css';
|
|||
|
|
import { toRem } from 'folds';
|
|||
|
|
|
|||
|
|
/**
|
|||
|
|
* A 44px minimum touch target on phones for otherwise-small interactive controls
|
|||
|
|
* (folds `IconButton`/`Chip` at `size="300"`/`"400"` render ~24–40px, below the
|
|||
|
|
* 44px guideline). Apply via `className`; the icon/label stays its normal visual
|
|||
|
|
* size — only the hit area grows — and desktop is unchanged (the rule is gated to
|
|||
|
|
* `@media (max-width: 750px)`, matching MOBILE_BREAKPOINT).
|
|||
|
|
*/
|
|||
|
|
export const MobileTouchTarget = style({
|
|||
|
|
'@media': {
|
|||
|
|
'(max-width: 750px)': {
|
|||
|
|
minWidth: toRem(44),
|
|||
|
|
minHeight: toRem(44),
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
});
|