amis/scss/components/_carousel.scss

198 lines
3.6 KiB
SCSS
Raw Normal View History

2019-05-16 11:04:55 +08:00
@mixin arrow-control {
2019-12-06 09:58:08 +08:00
width: 10%;
min-width: var(--Carousel-arrowControl-width);
2019-12-06 09:58:08 +08:00
height: 100%;
cursor: pointer;
top: 0;
bottom: 0;
2019-12-06 09:58:08 +08:00
position: absolute;
transition-duration: var(--Carousel-transitionDuration);
2019-12-06 09:58:08 +08:00
svg {
2019-05-16 11:04:55 +08:00
position: absolute;
2019-12-06 09:58:08 +08:00
top: 50%;
left: 50%;
right: 50%;
transform: translate(-50%, -50%);
width: var(--Carousel-svg-width);
height: var(--Carousel-svg-height);
2019-12-06 09:58:08 +08:00
}
2019-05-16 16:31:20 +08:00
}
.#{$ns}Carousel {
min-width: var(--Carousel-minWidth);
height: var(--Carousel-height);
2019-12-06 09:58:08 +08:00
position: relative;
display: block;
background: var(--Carousel-bg);
2019-12-06 09:58:08 +08:00
&.#{$ns}Carousel--light {
.#{$ns}Carousel-dot {
background: var(--Carousel--light-control);
2019-05-16 11:04:55 +08:00
}
2019-12-06 09:58:08 +08:00
svg {
fill: var(--Carousel--light-control);
}
2019-05-16 11:04:55 +08:00
2019-12-06 09:58:08 +08:00
.#{$ns}Carousel-item {
.title,
.description {
color: var(--Carousel--light-control);
2019-12-06 09:58:08 +08:00
}
2019-05-16 11:04:55 +08:00
}
2019-12-06 09:58:08 +08:00
}
2019-05-16 11:04:55 +08:00
2019-12-06 09:58:08 +08:00
&.#{$ns}Carousel--dark {
.#{$ns}Carousel-dot {
background: var(--Carousel--dark-control);
2019-12-06 09:58:08 +08:00
}
2019-05-16 11:04:55 +08:00
2019-12-06 09:58:08 +08:00
svg {
fill: var(--Carousel--dark-control);
2019-05-16 11:04:55 +08:00
}
2019-12-06 09:58:08 +08:00
.#{$ns}Carousel-item {
.title,
.description {
color: var(--Carousel--dark-control);
2019-12-06 09:58:08 +08:00
}
}
}
&-container {
position: relative;
2019-12-06 09:58:08 +08:00
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;
2019-12-06 09:58:08 +08:00
&.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 {
2019-05-16 11:04:55 +08:00
position: absolute;
bottom: var(--Carousel-imageTitle-bottom);
2019-12-06 09:58:08 +08:00
text-align: center;
2019-05-16 11:04:55 +08:00
width: 100%;
2019-12-06 09:58:08 +08:00
opacity: 0.8;
}
.description {
position: absolute;
bottom: var(--Carousel-imageDescription-bottom);
2019-05-16 11:04:55 +08:00
text-align: center;
2019-12-06 09:58:08 +08:00
width: 100%;
opacity: 0.8;
}
2019-05-16 11:04:55 +08:00
2019-12-06 09:58:08 +08:00
.image {
width: 100%;
height: 100%;
background-size: cover;
}
}
}
&-image {
width: 100%;
height: 100%;
}
&-image .#{$ns}Image-origin {
height: 100%;
width: 100%;
}
2019-12-06 09:58:08 +08:00
&-dotsControl {
position: absolute;
bottom: 0px;
width: 100%;
z-index: 100;
text-align: center;
.#{$ns}Carousel-dot {
cursor: pointer;
2019-12-06 09:58:08 +08:00
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);
2019-12-06 09:58:08 +08:00
opacity: 0.3;
&.is-active {
opacity: 1;
}
}
}
2019-05-16 11:04:55 +08:00
.#{$ns}Carousel-leftArrow {
@include arrow-control;
display: none;
left: 0;
}
.#{$ns}Carousel-rightArrow {
@include arrow-control;
display: none;
right: 0;
}
&:hover {
.#{$ns}Carousel-leftArrow {
display: block;
}
.#{$ns}Carousel-rightArrow {
display: block;
}
}
2019-12-06 09:58:08 +08:00
&-arrowsControl {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
2019-12-06 09:58:08 +08:00
z-index: 100;
text-align: center;
}
}