Syntax

Pointer Events

Setting whether an element reacts to pointer events.

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

Overview

ClassDeclarations
pointer-events:valuepointer-events: value;
pointer-events:autopointer-events: auto;
pointer-events:none / untouchablepointer-events: none;
pointer-events:visiblePaintedpointer-events: visiblePainted;
pointer-events:visibleFillpointer-events: visibleFill;
pointer-events:visibleStrokepointer-events: visibleStroke;
pointer-events:visiblepointer-events: visible;
pointer-events:paintedpointer-events: painted;
pointer-events:fillpointer-events: fill;
pointer-events:strokepointer-events: stroke;
pointer-events:allpointer-events: all;
pointer-events:bounding-boxpointer-events: bounding-box;

Conditionally apply

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

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

Customizing color variables or starting with the crafted palette.

© Aoyue Design LLC.