177 lines
3.5 KiB
SCSS
177 lines
3.5 KiB
SCSS
// Carousel
|
|
|
|
$carousel-control-offset: 30px !default;
|
|
|
|
$carousel-indicator-size: 14px !default;
|
|
$carousel-indicator-spacer: 6px !default;
|
|
$carousel-indicator-bg: $border-color-light !default;
|
|
$carousel-indicator-active-bg: $darkgray !default;
|
|
|
|
$carousel-caption-width: 70% !default;
|
|
$carousel-caption-color: $white !default;
|
|
|
|
$carousel-control-icon-width: 20px !default;
|
|
|
|
$carousel-transition: transform .6s ease !default;
|
|
|
|
|
|
// Wrapper for the slide container and indicators
|
|
.carousel {
|
|
position: relative;
|
|
padding: 20px 0 44px;
|
|
border-top: 1px solid $border-color-light;
|
|
border-bottom: 1px solid $border-color-light;
|
|
margin-bottom: 35px;
|
|
}
|
|
|
|
.carousel-inner {
|
|
position: relative;
|
|
width: 100%;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.carousel-item {
|
|
position: relative;
|
|
display: none;
|
|
align-items: center;
|
|
width: 100%;
|
|
transition: $carousel-transition;
|
|
backface-visibility: hidden;
|
|
perspective: 1000px;
|
|
}
|
|
|
|
.carousel-item.active,
|
|
.carousel-item-next,
|
|
.carousel-item-prev {
|
|
display: block;
|
|
}
|
|
|
|
.carousel-item-next,
|
|
.carousel-item-prev {
|
|
position: absolute;
|
|
top: 0;
|
|
}
|
|
|
|
// CSS3 transforms when supported by the browser
|
|
.carousel-item-next.carousel-item-left,
|
|
.carousel-item-prev.carousel-item-right {
|
|
transform: translateX(0);
|
|
|
|
@supports (transform-style: preserve-3d) {
|
|
transform: translate3d(0, 0, 0);
|
|
}
|
|
}
|
|
|
|
.carousel-item-next,
|
|
.active.carousel-item-right {
|
|
transform: translateX(100%);
|
|
|
|
@supports (transform-style: preserve-3d) {
|
|
transform: translate3d(100%, 0, 0);
|
|
}
|
|
}
|
|
|
|
.carousel-item-prev,
|
|
.active.carousel-item-left {
|
|
transform: translateX(-100%);
|
|
|
|
@supports (transform-style: preserve-3d) {
|
|
transform: translate3d(-100%, 0, 0);
|
|
}
|
|
}
|
|
|
|
|
|
//
|
|
// Left/right controls for nav
|
|
//
|
|
|
|
.carousel-control-prev,
|
|
.carousel-control-next {
|
|
position: absolute;
|
|
top: 50%;
|
|
}
|
|
|
|
.carousel-control-prev {
|
|
left: $carousel-control-offset;
|
|
}
|
|
|
|
.carousel-control-next {
|
|
right: $carousel-control-offset;
|
|
}
|
|
|
|
|
|
// Optional indicator pips
|
|
//
|
|
// Add an ordered list with the following class and add a list item for each
|
|
// slide your carousel holds.
|
|
|
|
.carousel-indicators {
|
|
position: absolute;
|
|
right: 0;
|
|
bottom: 15px;
|
|
left: 0;
|
|
z-index: 15;
|
|
display: flex;
|
|
justify-content: center;
|
|
padding-left: 0;
|
|
list-style: none;
|
|
margin: 0;
|
|
|
|
li {
|
|
position: relative;
|
|
flex: 0 1 auto;
|
|
width: $carousel-indicator-size;
|
|
height: $carousel-indicator-size;
|
|
margin-right: $carousel-indicator-spacer;
|
|
margin-left: $carousel-indicator-spacer;
|
|
text-indent: -999px;
|
|
background-color: $carousel-indicator-bg;
|
|
border-radius: 50%;
|
|
transition: $base-transition;
|
|
cursor: pointer;
|
|
|
|
// Use pseudo classes to increase the hit area by $carousel-indicator-spacer on top and bottom.
|
|
&::before,
|
|
&::after {
|
|
content: "";
|
|
position: absolute;
|
|
left: 0;
|
|
display: inline-block;
|
|
width: 100%;
|
|
height: $carousel-indicator-spacer;
|
|
}
|
|
|
|
&::before {
|
|
top: -$carousel-indicator-spacer;
|
|
}
|
|
|
|
&::after {
|
|
bottom: -$carousel-indicator-spacer;
|
|
}
|
|
}
|
|
|
|
li:hover,
|
|
li:active,
|
|
li:focus,
|
|
.active {
|
|
background-color: $carousel-indicator-active-bg;
|
|
}
|
|
}
|
|
|
|
|
|
// Optional captions
|
|
//
|
|
//
|
|
|
|
.carousel-caption {
|
|
position: absolute;
|
|
right: ((100% - $carousel-caption-width) / 2);
|
|
bottom: 20px;
|
|
left: ((100% - $carousel-caption-width) / 2);
|
|
z-index: 10;
|
|
padding-top: 20px;
|
|
padding-bottom: 20px;
|
|
color: $carousel-caption-color;
|
|
text-align: center;
|
|
}
|