Вид курсора
cursor
В SIMAI Framework с помощью модифкаторов можно управлять стилем курсра.
Классы
| Класс | Значение |
|---|---|
cursor-auto |
cursor: auto; |
cursor-default |
cursor: default; |
cursor-pointer |
cursor: pointer; |
cursor-wait |
cursor: wait; |
cursor-text |
cursor: text; |
cursor-move |
cursor: move; |
cursor-help |
cursor: help; |
cursor-not-allowed |
cursor: not-allowed; |
cursor-context-menu |
cursor: context-menu; |
cursor-progress |
cursor: progress; |
cursor-cell |
cursor: cell; |
cursor-crosshair |
cursor: crosshair; |
cursor-vertical-text |
cursor: vertical-text; |
cursor-alias |
cursor: alias; |
cursor-copy |
cursor: copy; |
cursor-no-drop |
cursor: no-drop; |
cursor-grab |
cursor: grab; |
cursor-grabbing |
cursor: grabbing; |
cursor-all-scroll |
cursor: all-scroll; |
cursor-col-resize |
cursor: col-resize; |
cursor-row-resize |
cursor: row-resize; |
cursor-n-resize |
cursor: n-resize; |
cursor-e-resize |
cursor: e-resize; |
cursor-s-resize |
cursor: s-resize; |
cursor-w-resize |
cursor: w-resize; |
cursor-ne-resize |
cursor: ne-resize; |
cursor-nw-resize |
cursor: nw-resize; |
cursor-se-resize |
cursor: se-resize; |
cursor-sw-resize |
cursor: sw-resize; |
cursor-ew-resize |
cursor: ew-resize; |
cursor-ns-resize |
cursor: ns-resize; |
cursor-nesw-resize |
cursor: nesw-resize; |
cursor-nwse-resize |
cursor: nwse-resize; |
cursor-zoom-in |
cursor: zoom-in; |
cursor-zoom-out |
cursor: zoom-out; |
Описание
Адаптивный модификатор. Задает стиль курсора в зависимости от размера области просмотра.
Использование модификатора: {контрольная точка}:{модификатор}
-
Контрольная точка. Необязательный параметр.
Применяет модификатор начиная с определенного размера области
просмотра, согласно контрольным точкам
(
sm,md,lg,xl). Если контрольная точка не задана, то действует для любого размера области просмотра. - Модификатор. Обязательный параметр.
Пример
Используйте модификатор cursor-{cursor} чтобы задать стиль курсора.
<button type="button" class="cursor-pointer">
Отправить
</button>
<button type="button" class="cursor-progress">
Сохранение...
</button>
<button type="button" disabled class="cursor-not-allowed">
Подтвердитть
</button>