143 lines
2.7 KiB
SCSS
143 lines
2.7 KiB
SCSS
@import "~bootstrap/scss/carousel";
|
|
|
|
/*
|
|
* Bootstrap carousel improvement
|
|
*/
|
|
|
|
/*.carousel-item {
|
|
&.active {
|
|
display: flex !important;
|
|
justify-content: center;
|
|
align-items: flex-start;
|
|
}
|
|
}*/
|
|
|
|
$carousel-title-color: $white !default;
|
|
$carousel-slide-min-height: 4rem !default;
|
|
$carousel-text-shadow: 1px 1px $black !default;
|
|
$carousel-controls-font-size: 3rem;
|
|
$carousel-controls-zindex: 11 !default;
|
|
$carousel-controls-shadow: 1px 1px $black !default;
|
|
$carousel-controls-hover-bg: transparentize($black, .4) !default;
|
|
$carousel-slide-img-loading-max-height: 25vh !default;
|
|
|
|
.carousel-slide {
|
|
display: flex;
|
|
flex-direction: column;
|
|
min-height: $carousel-slide-min-height;
|
|
|
|
align-items: flex-start;
|
|
justify-content: center;
|
|
|
|
> .container {
|
|
position: relative;
|
|
}
|
|
|
|
.video {
|
|
width: 100%;
|
|
|
|
iframe {
|
|
width: 100% !important;
|
|
height: auto !important;
|
|
}
|
|
}
|
|
|
|
.img {
|
|
display: block;
|
|
width: 100%;
|
|
}
|
|
|
|
img.loading {
|
|
max-height: $carousel-slide-img-loading-max-height;
|
|
}
|
|
}
|
|
|
|
.carousel-control-prev,
|
|
.carousel-control-next {
|
|
font-size: $carousel-controls-font-size;
|
|
z-index: $carousel-controls-zindex;
|
|
text-shadow: $carousel-controls-shadow;
|
|
|
|
&:hover,
|
|
&:focus {
|
|
background: $carousel-controls-hover-bg;
|
|
}
|
|
}
|
|
|
|
.carousel-indicators li {
|
|
box-shadow: none;
|
|
}
|
|
|
|
.carousel-title {
|
|
color: $carousel-title-color;
|
|
}
|
|
|
|
.carousel-title,
|
|
.carousel-content {
|
|
text-shadow: $carousel-text-shadow;
|
|
}
|
|
|
|
.carousel-caption {
|
|
right: 0;
|
|
bottom: 0;
|
|
left: auto;
|
|
width: 50%;
|
|
}
|
|
|
|
.slide-link__media {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
opacity: 0;
|
|
}
|
|
|
|
.carousel-multislide {
|
|
overflow: hidden;
|
|
|
|
.carousel-item {
|
|
display: block;
|
|
width: 50%;
|
|
margin: 0;
|
|
|
|
@media (max-width: (map-get($grid-breakpoints, "md") - 1)) {
|
|
width: 100%!important;
|
|
}
|
|
}
|
|
|
|
.carousel-item-next:not(.carousel-item-start),
|
|
.active.carousel-item-end {
|
|
transform: none;
|
|
}
|
|
|
|
.carousel-item-prev:not(.carousel-item-end),
|
|
.active.carousel-item-start {
|
|
transform: none;
|
|
}
|
|
|
|
.carousel-inner {
|
|
display: flex;
|
|
flex-direction: row;
|
|
|
|
align-items: center;
|
|
justify-content: center;
|
|
transition: all 1s ease;
|
|
/*@media (min-width: map-get($grid-breakpoints, "md")) {
|
|
flex-direction: row;
|
|
}*/
|
|
}
|
|
}
|
|
|
|
.carousel-inner {
|
|
transition: all .4s ease;
|
|
}
|
|
|
|
.js-carousel-no-slide {
|
|
.carousel-control-next,
|
|
.carousel-control-prev,
|
|
.carousel-indicators {
|
|
display: none;
|
|
}
|
|
}
|