193 lines
4.2 KiB
SCSS
193 lines
4.2 KiB
SCSS
// @import 'swiper/css/bundle';
|
|
.swiper-theme-container {
|
|
position: relative;
|
|
.swiper-wrapper {
|
|
&.swiper-continuous-autoplay {
|
|
transition-timing-function: linear;
|
|
}
|
|
.swiper-slide {
|
|
height: auto;
|
|
}
|
|
}
|
|
.swiper-nav {
|
|
margin-top: 0;
|
|
cursor: pointer;
|
|
[class*='swiper-'] {
|
|
position: absolute;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
border: 1px solid;
|
|
border-color: var(--#{$prefix}border-color-translucent);
|
|
transition: opacity 0.4s ease-in-out;
|
|
width: 2rem;
|
|
height: 2rem;
|
|
border-radius: 50%;
|
|
color: var(--#{$prefix}body-color);
|
|
background-color: var(--#{$prefix}body-bg);
|
|
box-shadow: 0px 8px 24px -4px rgba(36, 40, 46, 0.12);
|
|
z-index: 1;
|
|
margin: 0;
|
|
@include hover-focus {
|
|
background-color: var(--#{$prefix}emphasis-bg);
|
|
color: var(--#{$prefix}tertiary-color);
|
|
}
|
|
}
|
|
.swiper-button-prev,
|
|
.swiper-button-next {
|
|
svg {
|
|
width: 50%;
|
|
height: 50%;
|
|
}
|
|
&::after,
|
|
&::before {
|
|
content: '';
|
|
}
|
|
&.swiper-button-disabled {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
.swiper-button-prev {
|
|
left: -1rem;
|
|
}
|
|
.swiper-button-next {
|
|
right: -1rem;
|
|
[dir='rtl'] & {
|
|
left: calc(100% - 1rem);
|
|
}
|
|
}
|
|
&.swiper-nav-inside {
|
|
.swiper-button-prev {
|
|
left: map-get($spacers, 2);
|
|
}
|
|
.swiper-button-next {
|
|
right: map-get($spacers, 2);
|
|
[dir='rtl'] & {
|
|
left: calc(100% - map-get($spacers, 6));
|
|
}
|
|
}
|
|
}
|
|
}
|
|
&.swiper-slide-nav-top {
|
|
.swiper-button-next,
|
|
.swiper-button-prev {
|
|
left: 50%;
|
|
top: -60px;
|
|
transform: translateX(-50%);
|
|
}
|
|
.swiper-button-next {
|
|
margin-left: 1.25rem;
|
|
[dir='rtl'] & {
|
|
left: 50%;
|
|
}
|
|
}
|
|
.swiper-button-prev {
|
|
margin-left: -1.25rem;
|
|
}
|
|
}
|
|
.swiper-pagination-bullet {
|
|
border: 1px solid transparent;
|
|
padding: 3px;
|
|
background: var(--#{$prefix}white) content-box;
|
|
opacity: 1;
|
|
width: 1rem;
|
|
height: 1rem;
|
|
margin: 0 2px !important;
|
|
text-align: center;
|
|
&.swiper-pagination-bullet-active {
|
|
border: 1px solid var(--#{$prefix}white);
|
|
}
|
|
}
|
|
.thumb {
|
|
.swiper-slide {
|
|
img {
|
|
border: 2px solid transparent;
|
|
}
|
|
}
|
|
.swiper-slide-thumb-active {
|
|
img {
|
|
border: 2px solid var(--#{$prefix}primary);
|
|
}
|
|
}
|
|
}
|
|
&.swiper-slider-gallery {
|
|
.theme-slider {
|
|
&::before,
|
|
&:after {
|
|
content: '';
|
|
background: linear-gradient(
|
|
to left,
|
|
rgba(var(--#{$prefix}body-bg-rgb), 0) 0%,
|
|
var(--#{$prefix}body-bg) 100%
|
|
);
|
|
height: 34.875rem;
|
|
width: 10vw;
|
|
position: absolute;
|
|
z-index: 2;
|
|
display: none;
|
|
@include media-breakpoint-up(xxl) {
|
|
display: block;
|
|
}
|
|
}
|
|
&::before {
|
|
left: 0;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
}
|
|
&:after {
|
|
right: -1px;
|
|
top: 50%;
|
|
transform: translateY(-50%) rotateZ(180deg);
|
|
}
|
|
.swiper-wrapper {
|
|
height: 34.81rem;
|
|
.swiper-slide {
|
|
transition: 0.5s ease-in-out;
|
|
transition-property: opacity, height;
|
|
height: 28.125rem !important;
|
|
opacity: 0.5;
|
|
&.landscape {
|
|
max-width: 50rem;
|
|
}
|
|
&.portrait {
|
|
max-width: 25rem;
|
|
}
|
|
&.square {
|
|
max-width: 34.81rem;
|
|
}
|
|
}
|
|
.swiper-slide-active {
|
|
height: 34.81rem !important;
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|
|
.swiper-thumbs {
|
|
max-width: 42.5rem;
|
|
width: 100%;
|
|
margin-top: 12px;
|
|
.swiper-wrapper {
|
|
width: max-content;
|
|
.swiper-slide {
|
|
opacity: 0.5;
|
|
img {
|
|
width: 100%;
|
|
height: 4rem;
|
|
object-fit: cover;
|
|
margin-bottom: map-get($spacers, 2);
|
|
}
|
|
&.swiper-slide-thumb-active {
|
|
opacity: 1;
|
|
img {
|
|
box-shadow: $input-focus-box-shadow;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.swiper-button-prev,
|
|
.swiper-button-next {
|
|
top: calc(50% - 2.875rem);
|
|
}
|
|
}
|
|
}
|