@siberiaweb/components/lib/example-styles/modal-form.css

Веб-компоненты.

.sw-modal-form {
    background-color: white;
    border-radius: 3px;
    box-shadow: 0 7px 8px -4px rgba( 0, 0, 0, 0.2 ), 0 13px 19px 2px rgba( 0, 0, 0, 0.14 ),
        0 5px 24px 4px rgba( 0, 0, 0, 0.12 );
    padding: 15px 30px;
}

@keyframes sw-modal-form-show-overlay {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes sw-modal-form-hide-overlay {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

@keyframes sw-modal-form-slide-down {
    from {
        transform: translateY( -20px );
    }
    to {
        transform: translateY( 0 );
    }
}

@keyframes sw-modal-form-slide-up {
    from {
        transform: translateY( 0 );
    }
    to {
        transform: translateY( -20px );
    }
}

.sw-modal-form_overlay {
    animation: sw-modal-form-show-overlay 0.15s linear;
    background-color: rgba( 0, 0, 0, 0.5 );
}

.sw-modal-form {
    animation: sw-modal-form-slide-down 0.15s linear;
}

.sw-modal-form_overlay.sw-modal-form_closing {
    animation: sw-modal-form-hide-overlay 0.15s linear;
    pointer-events: none;
}

.sw-modal-form_overlay.sw-modal-form_closing .sw-modal-form {
    animation: sw-modal-form-slide-up 0.15s linear;
}