properties
changelog

Cursor Style

Set cursor (mouse pointer) style on hover.

Usage:

  • @live cursor-*;

Reference

shilp.config.js
const shilpConfig = {
	source: "react",

	properties: {
		live: {
			cursor: {
				property: "cursor: <v><i>;",
				values: {
					// general
					auto: "auto",
					default: "default",
					none: "none",

					// link & status
					menu: "context-menu",
					help: "help",
					pointer: "pointer",
					wait: "wait",
					progress: "progress",

					// selection
					cell: "cell",
					target: "crosshair",
					text: "text",
					vertical: "vertical-text",

					// drag & drop
					alias: "alias",
					copy: "copy",
					move: "move",
					no: {
						drop: "no-drop",
					},
					not: {
						allowed: "not-allowed",
					},
					grab: "grab",
					grabbing: "grabbing",

					// scroll
					scroll: "all-scroll",

					// zoom
					zoom: {
						in: "zoom-in",
						out: "zoom-out",
					},

					// resize
					resize: {
						col: "col-resize",
						row: "row-resize",
						top: {
							DEFAULT: "n-resize",
							right: "ne-resize",
							left: "nw-resize",
						},
						bottom: {
							DEFAULT: "s-resize",
							right: "se-resize",
							left: "sw-resize",
						},
						right: "e-resize",
						left: "w-resize",
						y: "ns-resize",
						x: "ew-resize",
						diagonal: {
							forward: "nesw-resize",
							backward: "nwse-resize",
						},
					},
				},
			},
		},
	},
};

export default shilpConfig;