Interactivity

Atomic classes for managing an element’s interactivity.

Pointer events

🔗

Class	CSS
`.pe-auto`	`pointer-events: auto;`
`.pe-none`	`pointer-events: none;`

🔗

<button class="pe-auto"></button>
<button class="pe-none"></button>

🔗

Class	CSS
`.us-auto`	`user-select: auto;`
`.us-none`	`user-select: none;`

🔗

<div class="us-auto"></div>
<div class="us-none"></div>

.us-auto

.us-none

🔗

Class	CSS
`.ud-auto`	`-webkit-user-drag: auto;`
`.ud-none`	`-webkit-user-drag: none;`

🔗

<img class="ud-auto" />
<img class="ud-none" />

Override interactivity variables:

$pointer-events: auto, none;
$user-selects: auto, none;
$user-drags: auto, none;