Improve mark element and cursor utilities

1 files changed, 47 insertions, 1 deletions

diff --git a/docs/utilities.html b/docs/utilities.html
index 05c538e..77022bb 100644
--- a/docs/utilities.html
+++ b/docs/utilities.html
@@ -182,6 +182,9 @@
                     <a href="utilities.html#colors">Colors</a>
                   </li>
                   <li class="menu-item">
+                    <a href="utilities.html#cursors">Cursors</a>
+                  </li>
+                  <li class="menu-item">
                     <a href="utilities.html#display">Display</a>
                   </li>
                   <li class="menu-item">
@@ -325,6 +328,49 @@
 
         </div>
 
+        <div id="cursors" class="container">
+          <h3 class="s-title"><a href="#cursors" class="anchor" aria-hidden="true">#</a>Cursors utilities</h3>
+          <div class="docs-note">
+            <p>Cursors utilities specify which mouse cursor to display when mouseover.</p>
+          </div>
+          <div class="columns">
+            <div class="column">
+              <div class="bg-gray docs-block c-hand">c-hand</div>
+            </div>
+            <div class="column">
+              <div class="bg-gray docs-block c-move">c-move</div>
+            </div>
+            <div class="column">
+              <div class="bg-gray docs-block c-zoom-in">c-zoom-in</div>
+            </div>
+            <div class="column">
+              <div class="bg-gray docs-block c-zoom-out">c-zoom-out</div>
+            </div>
+            <div class="column">
+              <div class="bg-gray docs-block c-not-allowed">c-not-allowed</div>
+            </div>
+            <div class="column">
+              <div class="bg-gray docs-block c-auto">c-auto</div>
+            </div>
+          </div>
+
+<!-- display utilities example -->
+<pre class="code" data-lang="HTML"><code><span class="com">&lt;!-- cursor: hand; --&gt;</span>
+&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;c-hand&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
+<span class="com">&lt;!-- cursor: move; --&gt;</span>
+&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;c-move&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
+<span class="com">&lt;!-- cursor: zoom-in; --&gt;</span>
+&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;c-zoom-in&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
+<span class="com">&lt;!-- cursor: zoom-out; --&gt;</span>
+&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;c-zoom-out&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
+<span class="com">&lt;!-- cursor: not-allowed; --&gt;</span>
+&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;c-not-allowed&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
+<span class="com">&lt;!-- cursor: auto; --&gt;</span>
+&lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;c-auto&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
+</code></pre>
+
+        </div>
+
         <div id="display" class="container">
           <h3 class="s-title"><a href="#display" class="anchor" aria-hidden="true">#</a>Display utilities</h3>
           <div class="docs-note">
@@ -447,7 +493,6 @@
           <div class="columns">
             <div class="column col-12 text-center">
               <div class="loading loading-lg"></div>
-              <p class="text-gray">Loading</p>
             </div>
           </div>
 
@@ -477,6 +522,7 @@
 &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;fixed&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
 <span class="com">&lt;!-- centered block --&gt;</span>
 &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;centered&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
+
 <span class="com">&lt;!-- m-1 {margin: 4px;} m-2 {margin: 8px;} --&gt;</span>
 &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;m-1&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;
 &lt;<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">&quot;m-2&quot;</span>&gt;&lt;<span class="tag">/div</span>&gt;