Cirrus

#Cursor

New
0.8.0

These are utility classes that specify the cursor style of elements.

ClassStyles
u-cursor-auto
cursor: auto;
u-cursor-pointer
cursor: pointer;
u-cursor-wait
cursor: wait;
u-cursor-text
cursor: text;
u-cursor-move
cursor: move;
u-cursor-help
cursor: help;
u-cursor-not-allowed
cursor: not-allowed;
u-cursor-none
cursor: none;
u-cursor-cell
cursor: cell;
u-cursor-crosshair
cursor: crosshair;
u-cursor-grab
cursor: grab;
u-cursor-grabbing
cursor: grabbing;
u-cursor-all-scroll
cursor: all-scroll;
u-cursor-col-resize
cursor: col-resize;
u-cursor-row-resize
cursor: row-resize;
u-cursor-zoom-in
cursor: zoom-in;
u-cursor-zoom-out
cursor: zoom-out;
Supported Pseudo-Variants
New
0.8.0
active
checked
dark
disabled
first-of-type
focus
focus-visible
focus-within
group-focus
group-hover
hover
landscape
last-of-type
light
portrait
reduce-motion
responsive
visited

See more pseudo-variants.

#Examples

Below is a demo of all supported cursor utility classes.
🖱 Hover over the buttons below to try them out.

#Responsive

âš  Note that the viewport variants are disabled in the default build of Cirrus. To enable, you must enable it yourself in _configs.scss and create a custom build or enable it in the config in your Sass project.

//_configs.scss
$config: (
    viewports: (
        flags.$CURSOR: true,
    )
) !default;

To use the viewport variant of a given class, you just need to suffix each class with a viewport selector. For example, if I only want u-cursor-pointer to be applied to some element for lg and above, then I would use the lg:u-cursor-pointer class.

<div class="lg:u-cursor-pointer">
    <!-- ... -->
</div>

For more information, visit the Viewports documentation.