139 lines
3.8 KiB
SCSS
139 lines
3.8 KiB
SCSS
// Carousel (slider) component
|
|
// based on https://swiperjs.com/
|
|
|
|
|
|
// Pagination
|
|
|
|
// Navigation (Prev/next buttons)
|
|
|
|
.swiper-button-lock {
|
|
display: none !important;
|
|
}
|
|
|
|
|
|
// Bullets
|
|
|
|
.swiper-pagination-bullets {
|
|
--swiper-pagination-bottom: 1.5rem;
|
|
--swiper-pagination-right: 1.5rem;
|
|
--swiper-pagination-bullet-inactive-color: #{$carousel-bullet-bg};
|
|
--swiper-pagination-color: #{$carousel-bullet-active-bg};
|
|
--swiper-pagination-bullet-border-radius: #{$carousel-bullet-border-radius};
|
|
--swiper-pagination-bullet-inactive-opacity: #{$carousel-bullet-opacity};
|
|
--swiper-pagination-bullet-opacity: #{$carousel-bullet-active-opacity};
|
|
--swiper-pagination-bullet-horizontal-gap: #{$carousel-bullet-gap * .5};
|
|
--swiper-pagination-bullet-vertical-gap: #{$carousel-bullet-gap * .5};
|
|
--swiper-pagination-bullet-transition: #{$carousel-bullet-transition};
|
|
}
|
|
|
|
.swiper-pagination-bullet {
|
|
transition: var(--swiper-pagination-bullet-transition);
|
|
}
|
|
|
|
|
|
// Progress bar
|
|
|
|
.swiper-pagination-progressbar {
|
|
--swiper-pagination-progressbar-size: #{$carousel-progressbar-size};
|
|
--swiper-pagination-progressbar-border-radius: #{$carousel-progressbar-border-radius};
|
|
--swiper-pagination-progressbar-bg-color: #{$carousel-progressbar-bg};
|
|
--swiper-pagination-color: #{$carousel-progressbar-fill-bg};
|
|
|
|
overflow: hidden;
|
|
@include border-radius(var(--swiper-pagination-progressbar-border-radius));
|
|
}
|
|
|
|
|
|
// Scrollbar
|
|
|
|
.swiper-scrollbar {
|
|
--swiper-scrollbar-bottom: .25rem;
|
|
--swiper-scrollbar-right: .25rem;
|
|
--swiper-scrollbar-size: #{$carousel-scrollbar-size};
|
|
--swiper-scrollbar-border-radius: #{$carousel-scrollbar-border-radius};
|
|
--swiper-scrollbar-bg-color: #{$carousel-scrollbar-bg};
|
|
--swiper-scrollbar-drag-bg-color: #{$carousel-scrollbar-drag-bg};
|
|
|
|
display: none;
|
|
|
|
&.swiper-scrollbar-horizontal,
|
|
&.swiper-scrollbar-vertical {
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
|
|
// Thumbnails
|
|
|
|
.swiper-thumbs {
|
|
--swiper-thumbnail-border-width: var(--#{$prefix}border-width);
|
|
--swiper-thumbnail-border-color: var(--#{$prefix}border-color);
|
|
--swiper-thumbnail-active-border-color: var(--#{$prefix}component-active-color);
|
|
--swiper-thumbnail-border-radius: var(--#{$prefix}border-radius);
|
|
--swiper-thumbnail-opacity: .5;
|
|
--swiper-thumbnail-active-opacity: 1;
|
|
}
|
|
|
|
.swiper-thumb-img {
|
|
opacity: var(--swiper-thumbnail-opacity);
|
|
transition: opacity .2s ease-in-out;
|
|
@include border-radius(var(--swiper-thumbnail-border-radius));
|
|
}
|
|
|
|
.swiper-thumb {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: auto;
|
|
height: auto;
|
|
cursor: pointer;
|
|
border: var(--swiper-thumbnail-border-width) solid var(--swiper-thumbnail-border-color);
|
|
@include border-radius(var(--swiper-thumbnail-border-radius));
|
|
transition: border-color .2s ease-in-out;
|
|
|
|
&:hover,
|
|
&.active,
|
|
&.swiper-slide-thumb-active {
|
|
.swiper-thumb-img {
|
|
opacity: var(--swiper-thumbnail-active-opacity);
|
|
}
|
|
}
|
|
|
|
&.active,
|
|
&.swiper-slide-thumb-active {
|
|
border-color: var(--swiper-thumbnail-active-border-color);
|
|
}
|
|
}
|
|
|
|
|
|
// Load swiper nicely
|
|
|
|
.swiper-load {
|
|
visibility: hidden;
|
|
|
|
&.swiper-initialized {
|
|
visibility: visible;
|
|
}
|
|
}
|
|
|
|
|
|
// Dark mode
|
|
|
|
@if $enable-dark-mode {
|
|
@include color-mode(dark) {
|
|
.swiper-pagination-bullets:not([data-bs-theme="light"]) {
|
|
--swiper-pagination-bullet-inactive-color: #{$carousel-bullet-bg-dark};
|
|
--swiper-pagination-color: #{$carousel-bullet-active-bg-dark};
|
|
}
|
|
.swiper-pagination-progressbar:not([data-bs-theme="light"]) {
|
|
--swiper-pagination-progressbar-bg-color: #{$carousel-progressbar-bg-dark};
|
|
--swiper-pagination-color: #{$carousel-progressbar-fill-bg-dark};
|
|
}
|
|
.swiper-scrollbar:not([data-bs-theme="light"]) {
|
|
--swiper-scrollbar-bg-color: #{$carousel-scrollbar-bg-dark};
|
|
--swiper-scrollbar-drag-bg-color: #{$carousel-scrollbar-drag-bg-dark};
|
|
}
|
|
}
|
|
}
|
|
|