@casoon/dragonfly/effects/interaction/active.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.

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

/* Component Styles */
@layer components {
    .active-scale {
        transition: transform 0.2s ease;
    }

    .active-scale:active {
        transform: var(--transform-scale-95);
    }

    .active-scale-sm {
        transition: transform 0.2s ease;
    }

    .active-scale-sm:active {
        transform: var(--transform-scale-98);
    }

    .active-scale-lg {
        transition: transform 0.2s ease;
    }

    .active-scale-lg:active {
        transform: var(--transform-scale-90);
    }

    .active-lift {
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .active-lift:active {
        box-shadow: 0 var(--border-width-thick) var(--spacing-1) rgb(0 0 0 / 10%);
        transform: translateY(var(--border-width-thick));
    }

    .active-lift-sm {
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .active-lift-sm:active {
        box-shadow: 0 var(--border-width) var(--border-width-thick) rgb(0 0 0 / 10%);
        transform: translateY(var(--border-width));
    }

    .active-lift-lg {
        transition: transform 0.2s ease, box-shadow 0.2s ease;
    }

    .active-lift-lg:active {
        box-shadow: 0 var(--spacing-1) var(--spacing-2) rgb(0 0 0 / 10%);
        transform: translateY(var(--spacing-1));
    }

    .active-tilt {
        perspective: var(--space-large-1000);
        transform-style: preserve-3d;
        transition: transform 0.2s ease;
    }

    .active-tilt:active {
        transform: rotateX(-5deg) rotateY(-5deg);
    }

    .active-tilt-sm {
        perspective: var(--space-large-1000);
        transform-style: preserve-3d;
        transition: transform 0.2s ease;
    }

    .active-tilt-sm:active {
        transform: rotateX(-2deg) rotateY(-2deg);
    }

    .active-tilt-lg {
        perspective: var(--space-large-1000);
        transform-style: preserve-3d;
        transition: transform 0.2s ease;
    }

    .active-tilt-lg:active {
        transform: rotateX(-10deg) rotateY(-10deg);
    }

    .active-glow {
        transition: box-shadow 0.2s ease;
    }

    .active-glow:active {
        box-shadow: 0 0 var(--spacing-2-5) var(--active-glow-color, rgb(59 130 246 / 30%));
    }

    .active-glow-sm {
        transition: box-shadow 0.2s ease;
    }

    .active-glow-sm:active {
        box-shadow: 0 0 var(--spacing-1) var(--active-glow-color, rgb(59 130 246 / 30%));
    }

    .active-glow-lg {
        transition: box-shadow 0.2s ease;
    }

    .active-glow-lg:active {
        box-shadow: 0 0 var(--spacing-1)(--spacing-1) var(--active-glow-color, rgb(59 130 246 / 30%));
    }

    .active-border {
        position: relative;
        transition: border-color 0.2s ease;
    }

    .active-border::after {
        background: var(--active-border-color, #3b82f6);
        bottom: 0%;
        content: '';
        height: var(--border-width-thick);
        left: 0%;
        opacity: var(--opacity-0);
        position: absolute;
        transition: opacity 0.2s ease;
        width: 100%;
    }

    .active-border:active::after {
        opacity: var(--opacity-100);
    }

    .active-border-sm::after {
        height: var(--border-width);
    }

    .active-border-lg::after {
        height: var(--spacing-1);
    }

    .active-bg {
        transition: background-color 0.2s ease;
    }

    .active-bg:active {
        background-color: var(--active-bg-color, rgb(59 130 246 / 20%));
    }

    .active-bg-sm:active {
        background-color: var(--active-bg-color-sm, rgb(59 130 246 / 10%));
    }

    .active-bg-lg:active {
        background-color: var(--active-bg-color-lg, rgb(59 130 246 / 30%));
    }

    .active-color-primary {
        --active-glow-color: var(--active-primary, rgb(59 130 246 / 30%));
        --active-border-color: var(--active-primary, #3b82f6);
        --active-bg-color: var(--active-primary-bg, rgb(59 130 246 / 20%));
    }

    .active-color-secondary {
        --active-glow-color: var(--active-secondary, rgb(107 114 128 / 30%));
        --active-border-color: var(--active-secondary, #6b7280);
        --active-bg-color: var(--active-secondary-bg, rgb(107 114 128 / 20%));
    }

    .active-color-success {
        --active-glow-color: var(--active-success, rgb(16 185 129 / 30%));
        --active-border-color: var(--active-success, #10b981);
        --active-bg-color: var(--active-success-bg, rgb(16 185 129 / 20%));
    }

    .active-color-error {
        --active-glow-color: var(--active-error, rgb(239 68 68 / 30%));
        --active-border-color: var(--active-error, #ef4444);
        --active-bg-color: var(--active-error-bg, rgb(239 68 68 / 20%));
    }

    .active-color-warning {
        --active-glow-color: var(--active-warning, rgb(245 158 11 / 30%));
        --active-border-color: var(--active-warning, #f59e0b);
        --active-bg-color: var(--active-warning-bg, rgb(245 158 11 / 20%));
    }

    .active-color-info {
        --active-glow-color: var(--active-info, rgb(6 182 212 / 30%));
        --active-border-color: var(--active-info, #06b6d4);
        --active-bg-color: var(--active-info-bg, rgb(6 182 212 / 20%));
    }
}

/* Accessibility - Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    @layer components {
        .active-scale,
        .active-scale-sm,
        .active-scale-lg,
        .active-lift,
        .active-lift-sm,
        .active-lift-lg,
        .active-tilt,
        .active-tilt-sm,
        .active-tilt-lg,
        .active-glow,
        .active-glow-sm,
        .active-glow-lg,
        .active-border,
        .active-border-sm,
        .active-border-lg,
        .active-bg,
        .active-bg-sm,
        .active-bg-lg {
            transition: var(--transition-none);
        }
        
        .active-scale:active,
        .active-scale-sm:active,
        .active-scale-lg:active,
        .active-lift:active,
        .active-lift-sm:active,
        .active-lift-lg:active,
        .active-tilt:active,
        .active-tilt-sm:active,
        .active-tilt-lg:active {
            transform: var(--transform-none);
        }
        
        .active-border::after {
            transition: var(--transition-none);
        }
    }
}