Sha256: 1f850c4231ca8a239aca5796d6f9b0e6c34c89f6c3ae4002a070f74e7fcb5dff
Contents?: true
Size: 1.86 KB
Versions: 17
Compression:
Stored size: 1.86 KB
Contents
body > .wrapper {
}
body.modal {
> .wrapper {
transition: filter 1000ms linear;
filter: blur(10px);
@include breakpoint-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: $c-background;
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;
@include breakpoint-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.0;
transform: scale(1.0);
}
}
@keyframes modal-background-appear {
0% {
opacity: 0.0;
}
100% {
opacity: 1.0;
}
}
/* Old rules */
#modal-container {
z-index:20;
border: 1px solid #555;
position: absolute;
background: #f8f8f8;
padding:20px;
padding-top: 10px;
}
#modal-container h2 {
padding: 0 0 8px 0;
color: #27495e;
font-size: 1.45em;
border-bottom: 1px solid #e0e0e0;
}
Version data entries
17 entries across 17 versions & 1 rubygems