receptty.org/sass/_lightbox.scss

46 lines
778 B
SCSS
Raw Permalink Normal View History

2023-11-08 11:00:57 +01:00
.lightbox {
display: none;
position: fixed;
z-index: 999;
top: 0;
left: 0;
right: 0;
bottom: 0;
padding: 1em 0;
background: rgba(0, 0, 0, 0.8);
cursor: pointer;
&.visible {
display: block;
animation: fade-in .3s ease-out;
div { animation: zoom-in .2s ease-out }
}
div {
display: block;
width: 100%;
height: 100%;
max-width: 1500px;
margin: 0 auto;
background-position: center;
background-repeat: no-repeat;
background-size: contain;
}
}
// Keyframes have to be used, because transition
// does not work with `display: none`
@keyframes fade-in {
0% { display: none; opacity: 0 }
1% { display: block; opacity: 0 }
100% { display: block; opacity: 1 }
}
@keyframes zoom-in {
0% { transform: scale(.5) }
100% { transform: scale(1) }
}