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

#35 finally using swiperjs as image slider

Browse source
This commit is contained in:
Fedor Katurov 2021-03-06 14:48:24 +07:00
parent d3473eab4c
commit 68249a4c62
11 changed files with 202 additions and 29 deletions
Download patch file Download diff file Expand all files Collapse all files

66
src/components/node/NodeImageSwiperBlock/styles.module.scss Normal file
View file

@ -0,0 +1,66 @@
@import "~/styles/variables.scss";
.wrapper {
border-radius: $radius;
display: flex;
align-items: center;
justify-content: center;
:global(.swiper-pagination) {
left: 50%;
bottom: $gap * 2;
transform: translate(-50%, 0);
background: darken($comment_bg, 4%);
width: auto;
padding: 5px 10px;
border-radius: 10px;
font: $font_10_semibold;
}
:global(.swiper-container) {
width: 100vw;
}
}
.slide {
text-align: center;
text-transform: uppercase;
font: $font_32_bold;
display: flex;
border-radius: $radius;
align-items: center;
justify-content: center;
width: auto;
max-width: 100vw;
opacity: 1;
filter: brightness(50%) saturate(0.5);
transition: opacity 0.5s, filter 1s, transform 1s;
padding-bottom: $gap * 1.5;
padding-top: $gap;
&:global(.swiper-slide-active) {
opacity: 1;
filter: brightness(100%);
}
@include tablet {
padding-bottom: 0;
}
}
.image {
max-height: calc(100vh - 70px - 70px);
max-width: 100%;
border-radius: $radius;
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;
max-height: 100vh;
border-radius: 0;
}
}