168 lines
5.0 KiB
SCSS
168 lines
5.0 KiB
SCSS
|
@import "./variables-slider";
|
||
|
|
|
||
|
|
/*
|
||
|
|
* Visual Portfolio layout Slider.
|
||
|
|
*/
|
||
|
|
[data-vp-layout="slider"] {
|
||
|
|
// Initial styles before Swiper init.
|
||
|
|
.vp-portfolio__items-wrap:not(.swiper) .vp-portfolio__items,
|
||
|
|
.vp-portfolio__thumbnails-wrap:not(.swiper) .vp-portfolio__thumbnails {
|
||
|
|
position: relative;
|
||
|
|
box-sizing: content-box;
|
||
|
|
display: flex;
|
||
|
|
}
|
||
|
|
|
||
|
|
.vp-portfolio__items-wrap:not(.swiper) .vp-portfolio__items .vp-portfolio__item-wrap,
|
||
|
|
.vp-portfolio__thumbnails-wrap:not(.swiper) .vp-portfolio__thumbnails .vp-portfolio__thumbnail-wrap {
|
||
|
|
width: calc(100% / var(--vp-layout-slider__initial-slides-per-view, 8));
|
||
|
|
min-width: calc(100% / var(--vp-layout-slider__initial-slides-per-view, 8));
|
||
|
|
}
|
||
|
|
|
||
|
|
@for $i from 1 through 8 {
|
||
|
|
&[data-vp-slider-slides-per-view="#{$i}"] .vp-portfolio__items-wrap:not(.swiper),
|
||
|
|
&[data-vp-slider-thumbnails-per-view="#{$i}"] .vp-portfolio__thumbnails-wrap:not(.swiper) {
|
||
|
|
--vp-layout-slider__initial-slides-per-view: #{$i};
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.vp-portfolio__thumbnail-img-wrap {
|
||
|
|
position: relative;
|
||
|
|
display: block;
|
||
|
|
overflow: hidden;
|
||
|
|
}
|
||
|
|
|
||
|
|
.vp-portfolio__item-img-wrap::before,
|
||
|
|
.vp-portfolio__thumbnail-img-wrap::before {
|
||
|
|
display: block;
|
||
|
|
content: "";
|
||
|
|
}
|
||
|
|
|
||
|
|
.vp-portfolio__item-img img,
|
||
|
|
.vp-portfolio__thumbnail-img img {
|
||
|
|
object-fit: var(--vp-images__object-fit);
|
||
|
|
object-position: var(--vp-images__object-position);
|
||
|
|
}
|
||
|
|
|
||
|
|
// arrows
|
||
|
|
.vp-portfolio__items-arrow {
|
||
|
|
position: absolute;
|
||
|
|
top: 50%;
|
||
|
|
z-index: 1;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
width: var(--vp-layout-slider--arrows__width);
|
||
|
|
height: var(--vp-layout-slider--arrows__height);
|
||
|
|
margin-top: calc(-1 * var(--vp-layout-slider--arrows__height) / 2);
|
||
|
|
color: var(--vp-layout-slider--arrows__color);
|
||
|
|
cursor: pointer;
|
||
|
|
background-color: var(--vp-layout-slider--arrows__background-color);
|
||
|
|
border-radius: var(--vp-layout-slider--arrows__border-radius);
|
||
|
|
box-shadow: var(--vp-layout-slider--arrows__box-shadow);
|
||
|
|
opacity: var(--vp-layout-slider--arrows__opacity);
|
||
|
|
transition: var(--vp-layout-slider__transition-duration) opacity var(--vp-layout-slider__transition-easing), var(--vp-layout-slider__transition-duration) box-shadow var(--vp-layout-slider__transition-easing);
|
||
|
|
|
||
|
|
// additional element to make the buttons clickable also in outside.
|
||
|
|
&::after {
|
||
|
|
position: absolute;
|
||
|
|
top: calc(-1 * var(--vp-layout-slider--arrows__compensation));
|
||
|
|
right: calc(-1 * var(--vp-layout-slider--arrows__compensation));
|
||
|
|
bottom: calc(-1 * var(--vp-layout-slider--arrows__compensation));
|
||
|
|
left: calc(-1 * var(--vp-layout-slider--arrows__compensation));
|
||
|
|
display: block;
|
||
|
|
content: "";
|
||
|
|
}
|
||
|
|
|
||
|
|
&:hover {
|
||
|
|
box-shadow: var(--vp-layout-slider--arrows-hover__box-shadow);
|
||
|
|
opacity: var(--vp-layout-slider--arrows-hover__opacity);
|
||
|
|
}
|
||
|
|
|
||
|
|
// RTL.
|
||
|
|
@if variable-exists(rtl) and $rtl {
|
||
|
|
svg {
|
||
|
|
transform: scaleX(-1);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.vp-portfolio__items-arrow-prev {
|
||
|
|
left: var(--vp-layout-slider--arrows__offset);
|
||
|
|
}
|
||
|
|
|
||
|
|
.vp-portfolio__items-arrow-next {
|
||
|
|
right: var(--vp-layout-slider--arrows__offset);
|
||
|
|
}
|
||
|
|
|
||
|
|
// bullets
|
||
|
|
&[data-vp-slider-bullets="true"] .vp-portfolio__items-wrap {
|
||
|
|
padding-bottom: var(--vp-layout-slider--bullets__margin-top);
|
||
|
|
|
||
|
|
.vp-portfolio__items-arrow {
|
||
|
|
transform: translateY(calc(var(--vp-layout-slider--bullets__margin-top) / -2));
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.vp-portfolio__items-bullets {
|
||
|
|
position: absolute;
|
||
|
|
bottom: 0;
|
||
|
|
z-index: 1;
|
||
|
|
text-align: center;
|
||
|
|
|
||
|
|
// Fixes Swiper default font-size
|
||
|
|
&.swiper-pagination-bullets-dynamic {
|
||
|
|
font-size: 1em;
|
||
|
|
}
|
||
|
|
|
||
|
|
> .swiper-pagination-bullet {
|
||
|
|
position: relative;
|
||
|
|
width: var(--vp-layout-slider--bullets__width);
|
||
|
|
height: var(--vp-layout-slider--bullets__height);
|
||
|
|
margin: 0 calc(var(--vp-layout-slider--bullets__gap) / 2);
|
||
|
|
cursor: pointer;
|
||
|
|
background-color: var(--vp-layout-slider--bullets__background-color);
|
||
|
|
border-radius: var(--vp-layout-slider--bullets__border-radius);
|
||
|
|
opacity: var(--vp-layout-slider--bullets__opacity);
|
||
|
|
transition: var(--vp-layout-slider__transition-duration) opacity var(--vp-layout-slider__transition-easing);
|
||
|
|
|
||
|
|
&:hover,
|
||
|
|
&:focus {
|
||
|
|
opacity: var(--vp-layout-slider--bullets-hover__opacity);
|
||
|
|
}
|
||
|
|
|
||
|
|
&.swiper-pagination-bullet-active {
|
||
|
|
opacity: var(--vp-layout-slider--bullets-active__opacity);
|
||
|
|
}
|
||
|
|
|
||
|
|
// additional element to make the buttons clickable also in outside.
|
||
|
|
&::after {
|
||
|
|
position: absolute;
|
||
|
|
top: calc(-1 * var(--vp-layout-slider--bullets__compensation));
|
||
|
|
right: calc(-1 * var(--vp-layout-slider--bullets__compensation));
|
||
|
|
bottom: calc(-1 * var(--vp-layout-slider--bullets__compensation));
|
||
|
|
left: calc(-1 * var(--vp-layout-slider--bullets__compensation));
|
||
|
|
display: block;
|
||
|
|
content: "";
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
// thumbnails
|
||
|
|
.vp-portfolio__thumbnails-wrap {
|
||
|
|
.vp-portfolio__thumbnail-wrap {
|
||
|
|
cursor: pointer;
|
||
|
|
opacity: var(--vp-layout-slider--thumbnails__opacity);
|
||
|
|
transition: var(--vp-layout-slider__transition-duration) opacity;
|
||
|
|
|
||
|
|
&:hover,
|
||
|
|
&:focus {
|
||
|
|
opacity: var(--vp-layout-slider--thumbnails-hover__opacity);
|
||
|
|
}
|
||
|
|
|
||
|
|
&.swiper-slide-thumb-active {
|
||
|
|
opacity: var(--vp-layout-slider--thumbnails-active__opacity);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|