Cartzilla utilities
Custom Cartzilla 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="--cz-bg-color: var(--cz-primary-bg-subtle); --cz-dot-color: var(--cz-primary)">...</div>
<!-- Success dotted background -->
<div class="bg-dotted p-4" style="--cz-bg-color: var(--cz-success-bg-subtle); --cz-dot-color: var(--cz-success)">...</div>
<!-- Danger dotted background -->
<div class="bg-dotted p-4" style="--cz-bg-color: var(--cz-danger-bg-subtle); --cz-dot-color: var(--cz-danger)">...</div>
<!-- Warning dotted background -->
<div class="bg-dotted p-4" style="--cz-bg-color: var(--cz-warning-bg-subtle); --cz-dot-color: var(--cz-warning)">...</div>
<!-- Info dotted background -->
<div class="bg-dotted p-4" style="--cz-bg-color: var(--cz-info-bg-subtle); --cz-dot-color: var(--cz-info)">...</div>
<!-- Dark dotted background -->
<div class="bg-dotted p-4" style="--cz-bg-color: var(--cz-dark-bg-subtle); --cz-dot-color: var(--cz-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>