mirror of
https://gitee.com/baidu/amis.git
synced 2024-12-05 21:39:53 +08:00
168 lines
3.0 KiB
SCSS
168 lines
3.0 KiB
SCSS
@mixin arrow-control {
|
|
width: 10%;
|
|
min-width: $Carousel-arrowControl-width;
|
|
height: 100%;
|
|
cursor: pointer;
|
|
position: absolute;
|
|
transition-duration: $Carousel-transitionDuration;
|
|
svg {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
right: 50%;
|
|
transform: translate(-50%, -50%);
|
|
width: $Carousel-svg-width;
|
|
height: $Carousel-svg-height;
|
|
}
|
|
}
|
|
|
|
.#{$ns}Carousel {
|
|
min-width: $Carousel-minWidth;
|
|
height: $Carousel-height;
|
|
position: relative;
|
|
display: block;
|
|
background: $Carousel-bg;
|
|
|
|
&.#{$ns}Carousel--light {
|
|
.#{$ns}Carousel-dot {
|
|
background-color: $Carousel--light-control;
|
|
}
|
|
|
|
svg {
|
|
fill: $Carousel--light-control;
|
|
}
|
|
|
|
.#{$ns}Carousel-item {
|
|
.title,
|
|
.description {
|
|
color: $Carousel--light-control;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.#{$ns}Carousel--dark {
|
|
.#{$ns}Carousel-dot {
|
|
background-color: $Carousel--dark-control;
|
|
}
|
|
|
|
svg {
|
|
fill: $Carousel--dark-control;
|
|
}
|
|
|
|
.#{$ns}Carousel-item {
|
|
.title,
|
|
.description {
|
|
color: $Carousel--dark-control;
|
|
}
|
|
}
|
|
}
|
|
|
|
&-container {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: relative;
|
|
overflow: hidden;
|
|
|
|
.#{$ns}Carousel-item {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: absolute;
|
|
transition: ease-out all $Carousel-transitionDuration;
|
|
|
|
&.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: $Carousel-imageTitle-bottom;
|
|
text-align: center;
|
|
width: 100%;
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.description {
|
|
position: absolute;
|
|
bottom: $Carousel-imageDescription-bottom;
|
|
text-align: center;
|
|
width: 100%;
|
|
opacity: 0.8;
|
|
}
|
|
|
|
.image {
|
|
width: 100%;
|
|
height: 100%;
|
|
background-size: cover;
|
|
}
|
|
}
|
|
}
|
|
|
|
&-dotsControl {
|
|
position: absolute;
|
|
bottom: 0px;
|
|
width: 100%;
|
|
z-index: 100;
|
|
text-align: center;
|
|
|
|
.#{$ns}Carousel-dot {
|
|
display: inline-block;
|
|
height: $Carousel-dot-width;
|
|
width: $Carousel-dot-height;
|
|
border-radius: $Carousel-dot-borderRadius;
|
|
margin: $Carousel-dot-margin;
|
|
transition-duration: $Carousel-transitionDuration;
|
|
opacity: 0.3;
|
|
|
|
&.is-active {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
}
|
|
|
|
&-arrowsControl {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: inherit;
|
|
z-index: 100;
|
|
text-align: center;
|
|
|
|
.#{$ns}Carousel-leftArrow {
|
|
@include arrow-control;
|
|
left: 0;
|
|
}
|
|
|
|
.#{$ns}Carousel-rightArrow {
|
|
@include arrow-control;
|
|
right: 0;
|
|
}
|
|
}
|
|
}
|