Syntax

Touch Action

Setting how an element's region can be manipulated by a touchscreen user.

🚧This page is still under construction and some content may not be complete.

Overview

ClassDeclarations
touch-action:valuetouch-action: value;
touch-action:autotouch-action: auto;
touch-action:nonetouch-action: none;
touch-action:pan-xtouch-action: pan-x;
touch-action:pan-lefttouch-action: pan-left;
touch-action:pan-righttouch-action: pan-right;
touch-action:pan-ytouch-action: pan-y;
touch-action:pan-uptouch-action: pan-up;
touch-action:pan-downtouch-action: pan-down;
touch-action:pinch-zoomtouch-action: pinch-zoom;
touch-action:manipulationtouch-action: manipulation;

Conditionally apply

Apply styles based on different states using selectors and applying conditionally.

<div class="touch-action:auto:hover touch-action:auto@sm touch-action:auto@dark touch-action:auto@print"></div>
Design Token
Colors

Customizing color variables or starting with the crafted palette.

© Aoyue Design LLC.