jonasled2/website
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

fix basiclightbox

Browse source
This commit is contained in:
Jonas Leder 2022-01-17 19:56:52 +01:00
parent 45ab2d0394
commit 61889809e9
2 changed files with 74 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

73
styl/lib/_basicLightbox.styl Normal file
View file

@ -0,0 +1,73 @@
// Vars ---------------------------------------------------------------- //
$basicLightbox__background= rgba(0, 0, 0, .8);
$basicLightbox__zIndex= 1000 !default;
$basicLightbox__duration= .4s !default;
$basicLightbox__timing= ease !default;
// basicLightbox ------------------------------------------------------- //
.basicLightbox {
position: fixed;
display: flex;
justify-content: center;
align-items: center;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background: $basicLightbox__background;
opacity: .01; // Start with .01 to avoid the repaint that happens from 0 to .01
transition: opacity $basicLightbox__duration $basicLightbox__timing;
z-index: $basicLightbox__zIndex;
will-change: opacity;
&--visible {
opacity: 1;
}
&__placeholder {
max-width: 100%;
transform: scale(.9);
transition: transform $basicLightbox__duration $basicLightbox__timing;
z-index: 1;
will-change: transform;
> img:first-child:last-child,
> video:first-child:last-child,
> iframe:first-child:last-child {
display: block;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
max-width: 95%;
max-height: 95%;
}
> video:first-child:last-child,
> iframe:first-child:last-child {
pointer-events: auto;
}
> img:first-child:last-child,
> video:first-child:last-child {
width: auto;
height: auto;
}
}
&--img &__placeholder,
&--video &__placeholder,
&--iframe &__placeholder {
width: 100%;
height: 100%;
pointer-events: none;
}
&--visible &__placeholder {
transform: scale(1);
}
}

3
styl/style.styl
View file

@ -16,5 +16,4 @@
@import "lib/_prism";
@import "lib/_sellingTable";
@import "lib/_skills";
@import "../node_modules/basiclightbox/dist/basicLightbox.min.css";
@import "lib/_basicLightbox"