@symbion/opalui
Version:
A minimalistic CSS framework
51 lines (42 loc) • 1.01 kB
CSS
/* ==========================================================================
Modal Component - OpalUI
Overlay dialog with backdrop and animations
========================================================================== */
.c-modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(var(--blur-radius));
z-index: var(--z-modal, 600);
}
.c-modal.show {
display: flex;
align-items: center;
justify-content: center;
animation: fade-in var(--duration-fast) var(--ease-out) both;
}
.c-modal.show > .c-dialog {
animation: scale-spring var(--anim-modal) both;
}
/* Exit animation */
.c-modal.closing {
animation: fade-out var(--duration-fast) var(--ease-in) both;
}
.c-modal.closing > .c-dialog {
animation: scale-out var(--duration-fast) var(--ease-in) both;
}
.c-modal > .c-dialog {
--op-panel: 1;
position: relative;
width: auto;
max-width: 60rem;
}
.c-dialog {
border: 0;
}
/* vim: ts=4
*/