Sha256: 67fd13eba650b4afab8d9c63fbd63d1927436ca34750eb09114031605cce204a
Contents?: true
Size: 1.51 KB
Versions: 10
Compression:
Stored size: 1.51 KB
Contents
body.modal {
& > .wrapper {
transition: filter 1000ms linear;
filter: blur(10px);
@media (--mobile) {
filter: none;
}
}
}
.modal-wrapper {
display: flex;
align-items: center;
justify-content: center;
& .background {
background: radial-gradient(
rgba(255, 255, 255, 0.9),
rgba(255, 255, 255, 0.9) 50%,
rgba(80, 80, 80, 0.9)
);
cursor: pointer;
position: absolute;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
z-index: 1;
animation-name: modal-background-appear;
animation-duration: 200ms;
animation-timing-function: ease-out;
}
& .modal {
max-width: 90%;
background: var(--background-color);
padding: 20px;
border-radius: 5px;
box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.2);
background: #fff;
animation-name: modal-appear;
animation-duration: 200ms;
animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
animation-fill-mode: forwards;
z-index: 2;
@media (--mobile) {
max-width: 100%;
width: 100vw;
height: 100vh;
border-radius: 0px;
}
}
&.open {
display: flex;
position: fixed;
top: 0px;
bottom: 0px;
left: 0px;
right: 0px;
z-index: 100;
opacity: 1;
}
}
@keyframes modal-appear {
0% {
opacity: 0.1;
transform: scale(0.97) translate(0px, 10px);
}
100% {
opacity: 1;
transform: scale(1);
}
}
@keyframes modal-background-appear {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
Version data entries
10 entries across 10 versions & 1 rubygems