Utilities & helpers

# 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>

Top