Finder utilities
Custom Finder utility classes.
Dotted background
.bg-dotted
Primary
Success
Danger
Warning
Info
Dark
<!-- Default dotted background -->
<div class="bg-dotted p-4">...</div>
<!-- Primary dotted background -->
<div class="bg-dotted p-4" style="--fn-bg-color: var(--fn-primary-bg-subtle); --fn-dot-color: var(--fn-primary)">...</div>
<!-- Success dotted background -->
<div class="bg-dotted p-4" style="--fn-bg-color: var(--fn-success-bg-subtle); --fn-dot-color: var(--fn-success)">...</div>
<!-- Danger dotted background -->
<div class="bg-dotted p-4" style="--fn-bg-color: var(--fn-danger-bg-subtle); --fn-dot-color: var(--fn-danger)">...</div>
<!-- Warning dotted background -->
<div class="bg-dotted p-4" style="--fn-bg-color: var(--fn-warning-bg-subtle); --fn-dot-color: var(--fn-warning)">...</div>
<!-- Info dotted background -->
<div class="bg-dotted p-4" style="--fn-bg-color: var(--fn-info-bg-subtle); --fn-dot-color: var(--fn-info)">...</div>
<!-- Dark dotted background -->
<div class="bg-dotted p-4" style="--fn-bg-color: var(--fn-dark-bg-subtle); --fn-dot-color: var(--fn-dark)">...</div>Borders
.border-dashed
.border-dotted
<!-- Dashed border -->
<div class="border border-dashed p-4">...</div>
<!-- Dotted border -->
<div class="border border-dotted p-4">...</div>Cursors
.cursor-pointer
.cursor-default
.cursor-help
.cursor-wait
.cursor-crosshair
.cursor-not-allowed
.cursor-zoom-in
.cursor-zoom-out
.cursor-grab
<!-- Pointer cursor -->
<div class="cursor-pointer">...</div>
<!-- Default cursor -->
<div class="cursor-default">...</div>
<!-- Help cursor -->
<div class="cursor-help">...</div>
<!-- Wait cursor -->
<div class="cursor-wait">...</div>
<!-- Crosshair cursor -->
<div class="cursor-crosshair">...</div>
<!-- Not allowed cursor -->
<div class="cursor-not-allowed">...</div>
<!-- Zoom in cursor -->
<div class="cursor-zoom-in">...</div>
<!-- Zoom out cursor -->
<div class="cursor-zoom-out">...</div>
<!-- Grab cursor -->
<div class="cursor-grab">...</div>