Cursor utilities

pages/_data/docs.yml

@@ -6,6 +6,7 @@
 - page: buttons
 - page: cards
 - page: carousel
+- page: cursors
 - page: charts
 - page: divider
 - page: flags

pages/_docs/cursors.md

@@ -0,0 +1,29 @@
+---
+title: Cursors
+menu: docs.cursors
+---
+
+### Cursor utilities 
+
+{% example html %}
+<div class="row text-center">
+  <div class="col-4 mb-3">
+    <div class="cursor-auto bg-light py-3">Cursor auto</div>
+  </div>
+  <div class="col-4 mb-3">
+    <div class="cursor-pointer bg-light py-3">Cursor pointer</div>
+  </div>
+  <div class="col-4 mb-3">
+    <div class="cursor-move bg-light py-3">Cursor move</div>
+  </div>
+  <div class="col-4">
+    <div class="cursor-not-allowed bg-light py-3">Cursor not allowed</div>
+  </div>
+  <div class="col-4">
+    <div class="cursor-zoom-in bg-light py-3">Cursor zoom in</div>
+  </div>
+  <div class="col-4">
+    <div class="cursor-zoom-out bg-light py-3">Cursor zoom out</div>
+  </div>
+</div>
+{% endexample %}

scss/tabler.scss

@@ -54,6 +54,7 @@
 @import "utils/sizing";
 @import "utils/opacity";
 @import "utils/shadow";
+@import "utils/cursor";
 
 
 @import "dark";

scss/utils/_cursor.scss

@@ -0,0 +1,23 @@
+.cursor-auto {
+  cursor: auto;
+}
+
+.cursor-pointer {
+  cursor: pointer;
+}
+
+.cursor-move {
+  cursor: move;
+}
+
+.cursor-not-allowed {
+  cursor: not-allowed;
+}
+
+.cursor-zoom-in {
+  cursor: zoom-in;
+}
+
+.cursor-zoom-out {
+  cursor: zoom-out;
+}