Stacks

Pointer events

The pointer-events CSS property enables or disables all mouse events on an element.

Pointer events classes

Class	Output	Definition
`.pe-auto`	`pointer-events: auto;`	The element behaves as it would if the pointer-events property were not specified.
`.pe-none`	`pointer-events: none;`	Disables mouse events (clicking, dragging, hovering, etc.) on the element and its decendents.

Pointer events examples

Section titled Pointer events examples

<div class="pe-auto">…</div>
<div class="pe-none">…</div>

Focus

Section titled Focus

The focus utility classes allow you to apply custom focus styles to an element. Add the conditional prefix f: to only apply the style when the element is focused.

Focus classes

Section titled Focus classes

Class	Definition
`.focus`	The element will have the default Stacks focus style applied.
`.focus-inset`	The element will have the inset Stacks focus style applied.
`.focus-bordered`	The element will have the default Stacks focus style applied and match the border to the focus style.
`.focus-inset-bordered`	The element will have the inset Stacks focus style applied and match the border to the focus style.

Focus examples

Section titled Focus examples

<div class="focus">…</div>
<div class="focus-inset">…</div>
<div class="focus-bordered">…</div>
<div class="focus-inset-bordered">…</div>

.focus

.focus-inset

.focus-bordered

.focus-inset-bordered

Conditional focus examples

Section titled Conditional focus examples

Add the conditional prefix f: to only apply the style when the element is focused.

<div class="f:focus" role="button" tabindex="0">…</div>
<div class="f:focus-inset" role="button" tabindex="0">…</div>
<div class="f:focus-bordered" role="button" tabindex="0">…</div>
<div class="f:focus-inset-bordered" role="button" tabindex="0">…</div>

.f:focus

.f:focus-inset

.f:focus-bordered

.f:focus-inset-bordered

User select

Section titled User select

The user-select CSS property controls whether the user can select text.

User select classes

Section titled User select classes

Class	Output	Definition
`.us-auto`	`user-select: auto;`	The element behaves as it would if the user-select property were not specified.
`.us-none`	`user-select: none;`	The text of the element and its sub-elements is not selectable. It may be appropriate to combine with `.c-default`

User select examples

Section titled User select examples

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

.us-auto

.us-none