@casoon/dragonfly/effects/motion/ripple.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.

/**
 * Ripple-Effekte
 * 
 * Diese Datei enthält verschiedene Ripple-Effekte für moderne UIs.
 * Die Effekte sind performant optimiert und berücksichtigen reduzierte Bewegung.
 */

@layer components {
    .ripple {
        overflow: hidden;
        position: relative;
    }

    .ripple::after {
        background-image: radial-gradient(circle, var(--ripple-color, rgb(255 255 255 / 30%)) 10, transparent 10.01%);
        background-position: 50%;
        background-repeat: no-repeat;
        content: '';
        height: 100%;
        left: 0%;
        opacity: var(--opacity-0);
        pointer-events: none;
        position: absolute;
        top: 0%;
        transform: scale(10, 10);
        transition: transform 0.5s, opacity 0.5s;
        width: 100%;
    }

    .ripple:active::after {
        opacity: var(--opacity-30);
        transform: scale(0, 0);
        transition: 0s;
    }

    .ripple-sm::after {
        background-image: radial-gradient(circle, var(--ripple-color-sm, rgb(255 255 255 / 20%)) 5%, transparent 5.01%);
    }

    .ripple-lg::after {
        background-image: radial-gradient(circle, var(--ripple-color-lg, rgb(255 255 255 / 40%)) 15%, transparent 15.01%);
    }

    .ripple-slow::after {
        transition: transform 0.8s, opacity 0.8s;
    }

    .ripple-fast::after {
        transition: transform 0.3s, opacity 0.3s;
    }

    .ripple-color-primary::after {
        background-image: radial-gradient(circle, var(--ripple-primary, rgb(59 130 246 / 30%)) 10, transparent 10.01%);
    }

    .ripple-color-secondary::after {
        background-image: radial-gradient(circle, var(--ripple-secondary, rgb(107 114 128 / 30%)) 10, transparent 10.01%);
    }

    .ripple-color-success::after {
        background-image: radial-gradient(circle, var(--ripple-success, rgb(16 185 129 / 30%)) 10, transparent 10.01%);
    }

    .ripple-color-error::after {
        background-image: radial-gradient(circle, var(--ripple-error, rgb(239 68 68 / 30%)) 10, transparent 10.01%);
    }

    .ripple-color-warning::after {
        background-image: radial-gradient(circle, var(--ripple-warning, rgb(245 158 11 / 30%)) 10, transparent 10.01%);
    }

    .ripple-color-info::after {
        background-image: radial-gradient(circle, var(--ripple-info, rgb(6 182 212 / 30%)) 10, transparent 10.01%);
    }

    .ripple-outline {
        overflow: hidden;
        position: relative;
    }

    .ripple-outline::after {
        border: var(--border-width-thick) solid var(--ripple-outline-color, rgb(255 255 255 / 30%));
        border-radius: inherit;
        content: '';
        height: 100%;
        left: 0%;
        opacity: var(--opacity-0);
        pointer-events: none;
        position: absolute;
        top: 0%;
        transform: scale(1.5);
        transition: transform 0.5s, opacity 0.5s;
        width: 100%;
    }

    .ripple-outline:active::after {
        opacity: var(--opacity-30);
        transform: var(--transform-scale-100);
        transition: 0s;
    }
}

/* Reduzierte Bewegung */
@media (prefers-reduced-motion: reduce) {
    @layer components {
        .ripple::after,
        .ripple-outline::after {
            transition: var(--transition-none);
        }
    }
}