@casoon/dragonfly/effects/interaction/error.css

Modular, lightweight CSS framework and design system for modern web projects. Optimized for Astro JS, LightningCSS and Container Queries with @layer-based architecture and comprehensive accessibility.

/**
 * Error Effects
 * 
 * This file contains various error effects for modern UIs.
 * The effects are optimized for performance and consider reduced motion.
 */

@keyframes error-shake {
    10%, 90% {
        transform: translate3d(calc(-1 * var(--border-width)), 0%, 0);
    }

    20%, 80% {
        transform: translate3d(var(--border-width-thick), 0%, 0);
    }

    30%, 50%, 70% {
        transform: translate3d(calc(-1 * var(--spacing-1)), 0, 0);
    }

    40%, 60% {
        transform: translate3d(var(--spacing-1), 0, 0);
    }
}

@keyframes error-shake-sm {
    10%, 90% {
        transform: translate3d(-0.5 var(--spacing-1), 0, 0);
    }

    20%, 80% {
        transform: translate3d(var(--border-width), 0%, 0);
    }

    30%, 50%, 70% {
        transform: translate3d(calc(-1 * var(--border-width-thick)), 0%, 0);
    }

    40%, 60% {
        transform: translate3d(var(--border-width-thick), 0%, 0);
    }
}

@keyframes error-shake-lg {
    10%, 90% {
        transform: translate3d(calc(-1 * var(--border-width-thick)), 0%, 0);
    }

    20%, 80% {
        transform: translate3d(var(--spacing-1), 0, 0);
    }

    30%, 50%, 70% {
        transform: translate3d(calc(-1 * var(--spacing-2)), 0, 0);
    }

    40%, 60% {
        transform: translate3d(var(--spacing-2), 0, 0);
    }
}

@keyframes error-pulse {
    0%, 100% {
        opacity: var(--opacity-100);
    }

    50% {
        opacity: var(--opacity-70);
    }
}

@layer components {
    .error-shake {
        animation: error-shake 0.5s var(--easing-bounce) both;
    }

    .error-shake-sm {
        animation: error-shake-sm 0.5s var(--easing-bounce) both;
    }

    .error-shake-lg {
        animation: error-shake-lg 0.5s var(--easing-bounce) both;
    }

    .error-border {
        animation: error-pulse 2s infinite;
        border: var(--border-width-thick) solid var(--error-color, #ef4444);
    }

    .error-border-sm {
        border-width: var(--border-width);
    }

    .error-border-lg {
        border-width: var(--spacing-1);
    }

    .error-bg {
        animation: error-pulse 2s infinite;
        background-color: var(--error-bg, rgb(239 68 68 / 10%));
    }

    .error-bg-sm {
        background-color: var(--error-bg-sm, rgb(239 68 68 / 5%));
    }

    .error-bg-lg {
        background-color: var(--error-bg-lg, rgb(239 68 68 / 20%));
    }

    .error-text {
        color: var(--error-text, #ef4444);
    }

    .error-text-sm {
        color: var(--error-text-sm, #f87171);
    }

    .error-text-lg {
        color: var(--error-text-lg, #dc2626);
    }

    .error-glow {
        animation: error-pulse 2s infinite;
        box-shadow: 0 0 var(--spacing-2-5) var(--error-glow, rgb(239 68 68 / 50%));
    }

    .error-glow-sm {
        box-shadow: 0 0 var(--spacing-1) var(--error-glow-sm, rgb(239 68 68 / 30%));
    }

    .error-glow-lg {
        box-shadow: 0 0 var(--spacing-1)(--spacing-1) var(--error-glow-lg, rgb(239 68 68 / 70%));
    }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    @layer components {
        .error-shake,
        .error-shake-sm,
        .error-shake-lg,
        .error-border,
        .error-bg,
        .error-glow {
            animation: var(--animation-none);
        }
    }
}