Skip to content

Commit

Permalink
docs(cursor): reorder elements, add sass variables section
Browse files Browse the repository at this point in the history
  • Loading branch information
johnleider committed Apr 4, 2024
1 parent 918c74c commit 5d5e9f0
Showing 1 changed file with 32 additions and 16 deletions.
48 changes: 32 additions & 16 deletions packages/docs/src/pages/en/styles/cursor.md
Expand Up @@ -8,6 +8,8 @@ related:
- /styles/content/
- /styles/spacing/
- /styles/text-and-typography/
features:
report: true
---

# Cursor
Expand All @@ -16,30 +18,44 @@ Utilities for controlling the cursor styling when hovering over elements.

<PageFeatures />

| Class | Properties | |
| - | - | - |
| **cursor-auto** | cursor: auto; |
| **cursor-default** | cursor: default; |
| **cursor-grab** | cursor: grab; |
| **cursor-grabbing** | cursor: grabbing; |
| **cursor-help** | cursor: help; |
| **cursor-move** | cursor: move; |
| **cursor-none** | cursor: none; |
| **cursor-not-allowed** | cursor: not-allowed; |
| **cursor-pointer** | cursor: pointer; |
| **cursor-progress** | cursor: progress; |
| **cursor-text** | cursor: text; |
| **cursor-wait** | cursor: wait; { style="max-height: 420px;" fixed-header } |

<PromotedEntry />

## Usage

Apply custom cursor styling to a component or element.

<ExamplesExample file="cursor/usage" />

| Class | Properties | |
| - | - | - |
| **cursor-auto** | cursor: auto; | |
| **cursor-default** | cursor: default; | |
| **cursor-grab** | cursor: grab; | |
| **cursor-grabbing** | cursor: grabbing; | |
| **cursor-help** | cursor: help; | |
| **cursor-move** | cursor: move; | |
| **cursor-none** | cursor: none; | |
| **cursor-not-allowed** | cursor: not-allowed; | |
| **cursor-pointer** | cursor: pointer; | |
| **cursor-progress** | cursor: progress; | |
| **cursor-text** | cursor: text; | |
| **cursor-wait** | cursor: wait; | |
## SASS variables

<PromotedEntry />
You can also use the following SASS variables to customize the border color and width:

## Disable
```scss { resource="src/styles/settings.scss" }
@use 'vuetify/settings' with (
$utilities: (
"cursor": (
property: cursor,
class: cursor,
values: auto default pointer wait text move help not-allowed progress grab grabbing none
)
)
);
```

Disable the generation of **cursor** utility classes by overwriting the utilities value:

Expand Down

0 comments on commit 5d5e9f0

Please sign in to comment.