206 lines
3.7 KiB
SCSS
206 lines
3.7 KiB
SCSS
@mixin arrow-control {
|
|
width: 10%;
|
|
min-width: var(--Carousel-arrowControl-width);
|
|
height: 100%;
|
|
cursor: pointer;
|
|
top: 0;
|
|
bottom: 0;
|
|
position: absolute;
|
|
transition-duration: var(--Carousel-transitionDuration);
|
|
svg {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
right: 50%;
|
|
transform: translate(-50%, -50%);
|
|
width: var(--Carousel-svg-width);
|
|
}
|
|
}
|
|
|
|
.#{$ns}Carousel {
|
|
min-width: var(--Carousel-minWidth);
|
|
height: var(--Carousel-height);
|
|
position: relative;
|
|
display: block;
|
|
background: var(--Carousel-bg);
|
|
|
|
&.#{$ns}Carousel--light {
|
|
.#{$ns}Carousel-dot {
|
|
background: var(--Carousel--light-control);
|
|
}
|
|
|
|
svg {
|
|
fill: var(--Carousel--light-control);
|
|
}
|
|
|
|
.#{$ns}Carousel-item {
|
|
.title,
|
|
.description {
|
|
color: var(--Carousel--light-control);
|
|
}
|
|
}
|
|
}
|
|
|
|
&.#{$ns}Carousel--dark {
|
|
.#{$ns}Carousel-dot {
|
|
background: var(--Carousel--dark-control);
|
|
}
|
|
|
|
svg {
|
|
fill: var(--Carousel--dark-control);
|
|
}
|
|
|
|
.#{$ns}Carousel-item {
|
|
.title,
|
|
.description {
|
|
color: var(--Carousel--dark-control);
|
|
}
|
|
}
|
|
}
|
|
|
|
&-container {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
|
|
.#{$ns}Carousel-item {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
transition-duration: var(--Carousel-transitionDuration);
|
|
transition-timing-function: ease-out;
|
|
transition-property: transform, opacity;
|
|
|
|
&.fade {
|
|
opacity: 0;
|
|
}
|
|
|
|
&.fade.in {
|
|
opacity: 1;
|
|
}
|
|
|
|
&.slide {
|
|
transform: translateX(100%);
|
|
}
|
|
|
|
&.slide.in {
|
|
transform: translateX(0);
|
|
}
|
|
|
|
&.slide.out {
|
|
transform: translateX(-100%);
|
|
}
|
|
|
|
&.slideRight {
|
|
transform: translateX(-100%);
|
|
}
|
|
|
|
&.slideRight.in {
|
|
transform: translateX(0);
|
|
}
|
|
|
|
&.slideRight.out {
|
|
transform: translateX(100%);
|
|
}
|
|
|
|
.title {
|
|
position: absolute;
|
|
bottom: var(--Carousel-imageTitle-bottom);
|
|
text-align: center;
|
|
width: 100%;
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.description {
|
|
position: absolute;
|
|
bottom: var(--Carousel-imageDescription-bottom);
|
|
text-align: center;
|
|
width: 100%;
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.image {
|
|
width: 100%;
|
|
height: 100%;
|
|
background-size: cover;
|
|
}
|
|
}
|
|
}
|
|
|
|
&-image {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
&-image .#{$ns}Image-origin {
|
|
height: 100%;
|
|
width: 100%;
|
|
}
|
|
|
|
&-dotsControl {
|
|
position: absolute;
|
|
bottom: 0px;
|
|
width: 100%;
|
|
z-index: 100;
|
|
text-align: center;
|
|
|
|
.#{$ns}Carousel-dot {
|
|
cursor: pointer;
|
|
display: inline-block;
|
|
height: var(--Carousel-dot-width);
|
|
width: var(--Carousel-dot-height);
|
|
border-radius: var(--Carousel-dot-borderRadius);
|
|
margin: var(--Carousel-dot-margin);
|
|
transition-duration: var(--Carousel-transitionDuration);
|
|
opacity: 0.3;
|
|
|
|
&.is-active {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|
|
|
|
.#{$ns}Carousel-leftArrow {
|
|
@include arrow-control;
|
|
display: none;
|
|
left: 0;
|
|
}
|
|
|
|
.#{$ns}Carousel-rightArrow {
|
|
@include arrow-control;
|
|
display: none;
|
|
right: 0;
|
|
}
|
|
|
|
&.#{$ns}Carousel-arrow--always {
|
|
.#{$ns}Carousel-leftArrow {
|
|
display: block;
|
|
}
|
|
.#{$ns}Carousel-rightArrow {
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
&:hover {
|
|
.#{$ns}Carousel-leftArrow {
|
|
display: block;
|
|
}
|
|
.#{$ns}Carousel-rightArrow {
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
&-arrowsControl {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 100%;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 100;
|
|
text-align: center;
|
|
}
|
|
}
|