46 lines
778 B
SCSS
46 lines
778 B
SCSS
|
.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) }
|
||
|
|
}
|