Cursor - ZUI Documentation

Summary

A collection of classes and SASS variables that can be used to set a specific cursor to an HTML element.

There are no attributes defined for this pattern.

Name	Description
`zui-cursor-all-scroll`	Cursor showing that something can be scrolled in any direction (panned).
`zui-cursor-alias`	Indicating an alias or shortcut is to be created.
`zui-cursor-auto`	The browser determines the cursor to display based on the current context.
`zui-cursor-cell`	Indicating that cells can be selected.
`zui-cursor-col-resize`	The item/column can be resized horizontally. Often rendered as arrows pointing left and right with a vertical bar separating.
`zui-cursor-context-menu`	A context menu is available under the cursor.
`zui-cursor-copy`	Indicating that something can be copied.
`zui-cursor-crosshair`	Cross cursor, often used to indicate selection in a bitmap.
`zui-cursor-default`	Default cursor, typically an arrow.
`zui-cursor-e-resize`	Some edge is to be moved. For example, the se-resize cursor is used when the movement starts from the south-east corner of the box.
`zui-cursor-ew-resize`	Some edge is to be moved. For example, the se-resize cursor is used when the movement starts from the south-east corner of the box.
`zui-cursor-grab`	Indicates that something can be grabbed (dragged to be moved).
`zui-cursor-grabbing`	Indicates that something can be grabbed (dragged to be moved).
`zui-cursor-help`	Indicating help is available.
`zui-cursor-move`	The hovered object may be moved.
`zui-cursor-n-resize`	Some edge is to be moved. For example, the se-resize cursor is used when the movement starts from the south-east corner of the box.
`zui-cursor-ne-resize`	Some edge is to be moved. For example, the se-resize cursor is used when the movement starts from the south-east corner of the box.
`zui-cursor-nesw-resize`	Some edge is to be moved. For example, the se-resize cursor is used when the movement starts from the south-east corner of the box.
`zui-cursor-no-drop`	Cursor showing that a drop is not allowed at the current location.
`zui-cursor-none`	No cursor is rendered.
`zui-cursor-not-allowed`	Cursor showing that something cannot be done.
`zui-cursor-ns-resize`	Some edge is to be moved. For example, the se-resize cursor is used when the movement starts from the south-east corner of the box.
`zui-cursor-nw-resize`	Some edge is to be moved. For example, the se-resize cursor is used when the movement starts from the south-east corner of the box.
`zui-cursor-nwse-resize`	Some edge is to be moved. For example, the se-resize cursor is used when the movement starts from the south-east corner of the box.
`zui-cursor-pointer`	E.g. used when hovering over links, typically a hand.
`zui-cursor-progress`	The program is busy in the background but the user can still interact with the interface (unlike for wait).
`zui-cursor-row-resize`	The item/row can be resized vertically. Often rendered as arrows pointing up and down with a horizontal bar separating them.
`zui-cursor-s-resize`	Some edge is to be moved. For example, the se-resize cursor is used when the movement starts from the south-east corner of the box.
`zui-cursor-se-resize`	Some edge is to be moved. For example, the se-resize cursor is used when the movement starts from the south-east corner of the box.
`zui-cursor-sw-resize`	Some edge is to be moved. For example, the se-resize cursor is used when the movement starts from the south-east corner of the box.
`zui-cursor-text`	Indicating text can be selected, typically an I-beam.
`zui-cursor-vertical-text`	Indicating that vertical text can be selected, typically a sideways I-beam.
`zui-cursor-w-resize`	Some edge is to be moved. For example, the se-resize cursor is used when the movement starts from the south-east corner of the box.
`zui-cursor-wait`	The program is busy (sometimes an hourglass or a watch).
`zui-cursor-zoom-in`	Indicates that something can be zoomed (magnified) in.
`zui-cursor-zoom-out`	Indicates that something can be zoomed (magnified) out.

Name	Description
`zui-cursor-all-scroll-value`	Cursor showing that something can be scrolled in any direction (panned).
`zui-cursor-alias-value`	Indicating an alias or shortcut is to be created.
`zui-cursor-auto-value`	The browser determines the cursor to display based on the current context.
`zui-cursor-cell-value`	Indicating that cells can be selected.
`zui-cursor-col-resize-value`	The item/column can be resized horizontally. Often rendered as arrows pointing left and right with a vertical bar separating.
`zui-cursor-context-menu-value`	A context menu is available under the cursor.
`zui-cursor-copy-value`	Indicating that something can be copied.
`zui-cursor-crosshair-value`	Cross cursor, often used to indicate selection in a bitmap.
`zui-cursor-default-value`	Default cursor, typically an arrow.
`zui-cursor-e-resize-value`	Some edge is to be moved. For example, the se-resize cursor is used when the movement starts from the south-east corner of the box.
`zui-cursor-ew-resize-value`	Some edge is to be moved. For example, the se-resize cursor is used when the movement starts from the south-east corner of the box.
`zui-cursor-grab-value`	Indicates that something can be grabbed (dragged to be moved).
`zui-cursor-grabbing-value`	Indicates that something can be grabbed (dragged to be moved).
`zui-cursor-help-value`	Indicating help is available.
`zui-cursor-move-value`	The hovered object may be moved.
`zui-cursor-n-resize-value`	Some edge is to be moved. For example, the se-resize cursor is used when the movement starts from the south-east corner of the box.
`zui-cursor-ne-resize-value`	Some edge is to be moved. For example, the se-resize cursor is used when the movement starts from the south-east corner of the box.
`zui-cursor-nesw-resize-value`	Some edge is to be moved. For example, the se-resize cursor is used when the movement starts from the south-east corner of the box.
`zui-cursor-no-drop-value`	Cursor showing that a drop is not allowed at the current location.
`zui-cursor-none-value`	No cursor is rendered.
`zui-cursor-not-allowed-value`	Cursor showing that something cannot be done.
`zui-cursor-ns-resize-value`	Some edge is to be moved. For example, the se-resize cursor is used when the movement starts from the south-east corner of the box.
`zui-cursor-nw-resize-value`	Some edge is to be moved. For example, the se-resize cursor is used when the movement starts from the south-east corner of the box.
`zui-cursor-nwse-resize-value`	Some edge is to be moved. For example, the se-resize cursor is used when the movement starts from the south-east corner of the box.
`zui-cursor-pointer-value`	E.g. used when hovering over links, typically a hand.
`zui-cursor-progress-value`	The program is busy in the background but the user can still interact with the interface (unlike for wait).
`zui-cursor-row-resize-value`	The item/row can be resized vertically. Often rendered as arrows pointing up and down with a horizontal bar separating them.
`zui-cursor-s-resize-value`	Some edge is to be moved. For example, the se-resize cursor is used when the movement starts from the south-east corner of the box.
`zui-cursor-se-resize-value`	Some edge is to be moved. For example, the se-resize cursor is used when the movement starts from the south-east corner of the box.
`zui-cursor-sw-resize-value`	Some edge is to be moved. For example, the se-resize cursor is used when the movement starts from the south-east corner of the box.
`zui-cursor-text-value`	Indicating text can be selected, typically an I-beam.
`zui-cursor-vertical-text-value`	Indicating that vertical text can be selected, typically a sideways I-beam.
`zui-cursor-w-resize-value`	Some edge is to be moved. For example, the se-resize cursor is used when the movement starts from the south-east corner of the box.
`zui-cursor-wait-value`	The program is busy (sometimes an hourglass or a watch).
`zui-cursor-zoom-in-value`	Indicates that something can be zoomed (magnified) in.
`zui-cursor-zoom-out-value`	Indicates that something can be zoomed (magnified) out.

Example

zui-cursor-all-scroll

zui-cursor-alias

zui-cursor-auto

zui-cursor-cell

zui-cursor-col-resize

zui-cursor-copy

zui-cursor-crosshair

zui-cursor-default

zui-cursor-e-resize

zui-cursor-ew-resize

zui-cursor-grab

zui-cursor-grabbing

zui-cursor-help

zui-cursor-move

zui-cursor-n-resize

zui-cursor-ne-resize

zui-cursor-nesw-resize

zui-cursor-no-drop

zui-cursor-none

zui-cursor-not-allowed

zui-cursor-ns-resize

zui-cursor-nw-resize

zui-cursor-nwse-resize

zui-cursor-pointer

zui-cursor-progress

zui-cursor-row-resize

zui-cursor-s-resize

zui-cursor-se-resize

zui-cursor-sw-resize

zui-cursor-text

zui-cursor-vertical-text

zui-cursor-w-resize

zui-cursor-wait

zui-cursor-zoom-in

zui-cursor-zoom-out

Markup

<div class="zui-cursor-wait">This is the waiting line.</div>