muerwre/vault-frontend
1
0
Fork 0
mirror of https://github.com/muerwre/vault-frontend.git synced 2025-04-25 04:46:40 +07:00
Code Packages Activity Actions

#35 fixed image transitions

Browse source
This commit is contained in:
Fedor Katurov 2021-03-06 15:13:15 +07:00
parent 5496db54f7
commit d6c88da2c9
1 changed files with 12 additions and 5 deletions
Download patch file Download diff file Expand all files Collapse all files

17
src/components/node/NodeImageSwiperBlock/styles.module.scss
View file

@ -33,18 +33,21 @@
width: auto;
max-width: 100vw;
opacity: 1;
transform: translate(0, 10px);
filter: brightness(50%) saturate(0.5);
transition: opacity 0.5s, filter 1s, transform 1s;
transition: opacity 0.5s, filter 0.5s, transform 0.5s;
padding-bottom: $gap * 1.5;
padding-top: $gap;
&:global(.swiper-slide-active) {
opacity: 1;
filter: brightness(100%);
transform: translate(0, 0);
}
@include tablet {
padding-bottom: 0;
transform: translate(0, 0);
}
}
@ -52,11 +55,15 @@
max-height: calc(100vh - 70px - 70px);
max-width: 100%;
border-radius: $radius;
transition: box-shadow 1s;
box-shadow: transparentize(black, 0.7) 0 3px 5px;
box-shadow: transparentize(black, 0.9) 0 10px 5px 4px,
transparentize(black, 0.7) 0 5px 5px,
transparentize(white, 0.95) 0 -1px 2px,
transparentize(white, 0.95) 0 -1px;
:global(.swiper-slide-active) & {
box-shadow: transparentize(black, 0.9) 0 10px 5px 4px,
transparentize(black, 0.7) 0 5px 5px,
transparentize(white, 0.95) 0 -1px 2px,
transparentize(white, 0.95) 0 -1px;
}
@include tablet {
padding-bottom: 0;