semi-design/packages/semi-foundation/carousel/carousel.scss

@import "./variables.scss";

$module: #{$prefix}-carousel;

.#{$module} {
    position: relative;
    overflow: hidden;

    &-content {
        width: 100%;
        height: 100%;
        overflow: hidden;
        position: relative;

        &-item {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;

            &-current {
                z-index: 1;
            }

        }

        &-fade {
            
            > * {
                opacity: 0;
            }
    
            .#{$module}-content-item-current {
                opacity: 1;
            }
        }

        &-slide {
            &>*:not(.#{$module}-content-item-current) {
                visibility: hidden;
            }

            .#{$module}-content-item-slide-out {
                display: block;
                animation: #{$module}-content-item-keyframe-slide-out;
            }
        
            .#{$module}-content-item-slide-in {
                display: block;
                animation: #{$module}-content-item-keyframe-slide-in;
            }
          
        }

        &-reverse {
            .#{$module}-content-item-slide-out {
                animation: #{$module}-content-item-keyframe-slide-out-reverse ;
            }
    
            .#{$module}-content-item-slide-in {
                animation: #{$module}-content-item-keyframe-slide-in-reverse ;
            }
        }
    }

    &-indicator {
        display: flex;
        align-items: flex-end;
        z-index: 2;

        &-left {
            position: absolute;
            left: $spacing-carousel_indicator-padding;
            bottom: $spacing-carousel_indicator-padding;
        }

        &-center {
            position: absolute;
            left: 50%;
            bottom: $spacing-carousel_indicator-padding;
            transform: translate(-50%);
        }

        &-right {
            position: absolute;
            right: $spacing-carousel_indicator-padding;
            bottom: $spacing-carousel_indicator-padding;
        }

    
        &-dot {
            .#{$module}-indicator-item {
                border-radius: $radius-carousel_indicator_dot;
                cursor: pointer;

                &:not(:last-child) {
                    margin-right: $spacing-carousel_indicator_dot-marginX;
                }

                &-small {
                    width: $width-carousel_indicator_dot_small;
                    height: $width-carousel_indicator_dot_small;
                   
                }

                &-medium {
                    width: $width-carousel_indicator_dot_medium;
                    height: $width-carousel_indicator_dot_medium;
                }

                &-primary {
                    background-color: $color-carousel_indicator_theme_primary-bg-default;

                    &.#{$module}-indicator-item-active {
                        background: $color-carousel_indicator_theme_primary-bg-active;
                    }

                    &:hover {
                        background-color: $color-carousel_indicator_theme_primary-bg-hover;
                    }

                    &:active {
                        background: $color-carousel_indicator_theme_primary-bg-active;
                    }
                }

                &-light {

                    background-color: $color-carousel_indicator_theme_light-bg-default;

                    &.#{$module}-indicator-item-active {
                        background: $color-carousel_indicator_theme_light-bg-active;
                    }

                    &:hover {
                        background-color: $color-carousel_indicator_theme_light-bg-hover;
                    }

                    &:active {
                        background: $color-carousel_indicator_theme_light-bg-active;
                    }
                }

                &-dark {
                    background-color: $color-carousel_indicator_theme_dark-bg-default;

                    &.#{$module}-indicator-item-active {
                        background-color: $color-carousel_indicator_theme_dark-bg-active;
                    }

                    &:hover {
                        background-color: $color-carousel_indicator_theme_dark-bg-hover;
                    }

                    &:active {
                        background: $color-carousel_indicator_theme_dark-bg-active;
                    }
                }
            }

        }

        &-line {
            width: $width-carousel_indicator_line;

            .#{$module}-indicator-item {
                flex: 1; 
                cursor: pointer;

                &:not(:last-child) {
                    margin-right: $spacing-carousel_indicator_line-marginX;
                }

                &-small {
                    height: $height-carousel_indicator_line_small;
                   
                }

                &-medium {
                    height: $height-carousel_indicator_line_medium;
                }

                &-primary {
                    background-color: $color-carousel_indicator_theme_primary-bg-default;

                    &.#{$module}-indicator-item-active {
                        background: $color-carousel_indicator_theme_primary-bg-active;
                    }

                    &:hover {
                        background-color: $color-carousel_indicator_theme_primary-bg-hover;
                    }

                    &:active {
                        background: $color-carousel_indicator_theme_primary-bg-active;
                    }
                }

                &-light {

                    background-color: $color-carousel_indicator_theme_light-bg-default;

                    &.#{$module}-indicator-item-active {
                        background: $color-carousel_indicator_theme_light-bg-active;
                    }

                    &:hover {
                        background-color: $color-carousel_indicator_theme_light-bg-hover;
                    }

                    &:active {
                        background: $color-carousel_indicator_theme_light-bg-active;
                    }
                }

                &-dark {

                    background-color: $color-carousel_indicator_theme_dark-bg-default;

                    &.#{$module}-indicator-item-active {
                        background: $color-carousel_indicator_theme_dark-bg-active;
                    }

                    &:hover {
                        background-color: $color-carousel_indicator_theme_dark-bg-hover;
                    }

                    &:active {
                        background: $color-carousel_indicator_theme_dark-bg-active;
                    }
                }
        
            }

        }

        &-columnar {
            .#{$module}-indicator-item {
                cursor: pointer;
                
                &:not(:last-child) {
                    margin-right: $spacing-carousel_indicator_columnar-marginX;
                }

                &-small {
                    width: $width-carousel_indicator_columnar_small;
                    height: $height-carousel_indicator_columnar_small_default;

                    &.#{$module}-indicator-item-active {
                        height: $height-carousel_indicator_columnar_small_active;
                    }
                }

                &-medium {
                    width: $width-carousel_indicator_columnar_medium;
                    height: $height-carousel_indicator_columnar_medium_default;

                    &.#{$module}-indicator-item-active {
                        height: $height-carousel_indicator_columnar_medium_active;
                    }
                }


                &-primary {
                    background-color: $color-carousel_indicator_theme_primary-bg-default;


                    &.#{$module}-indicator-item-active {
                        background: $color-carousel_indicator_theme_primary-bg-active;
                    }

                    &:hover {
                        background-color: $color-carousel_indicator_theme_primary-bg-hover;
                    }

                    &:active {
                        background: $color-carousel_indicator_theme_primary-bg-active;
                    }
                }

                &-light {
                    background-color: $color-carousel_indicator_theme_light-bg-default;

                    &.#{$module}-indicator-item-active {
                        background: $color-carousel_indicator_theme_light-bg-active;
                    }

                    &:hover {
                        background-color: $color-carousel_indicator_theme_light-bg-hover;
                    }

                    &:active {
                        background: $color-carousel_indicator_theme_light-bg-active;
                    }
                }

                &-dark {
                    background-color: $color-carousel_indicator_theme_dark-bg-default;
                    
                    &.#{$module}-indicator-item-active {
                        background: $color-carousel_indicator_theme_dark-bg-active;
                    }

                    &:hover {
                        background-color: $color-carousel_indicator_theme_dark-bg-hover;
                    }

                    &:active {
                        background: $color-carousel_indicator_theme_dark-bg-active;
                    }
                }
        
            }

        }
    }

    &-arrow {
        display: flex;
        font-size: $width-carousel_arrow;
        cursor: pointer;

        &-prev {
            position: absolute;
            top: 50%;
            left: $spacing-carousel_arrow-left;
            transform: translateY(-50%);
            z-index: 2;
        }

        &-next {
            position: absolute;
            top: 50%;
            right: $spacing-carousel_arrow-right;
            transform: translateY(-50%);
            z-index: 2;
        }

        &-light {
            color: $color-carousel_arrow_theme_light-bg-default;

            &:hover {
                color: $color-carousel_arrow_theme_light-bg-hover;
            }
        }


        &-primary {
            color: $color-carousel_arrow_theme_primary-bg-default;

            &:hover {
                color: $color-carousel_arrow_theme_primary-bg-hover;
            }
        }

        &-dark {
            color: $color-carousel_arrow_theme_dark-bg-default;

            &:hover {
                color: $color-carousel_arrow_theme_dark-bg-hover;
            }
        }

    }

    &-arrow-hover div {
        z-index: 2;
        opacity: 0;
        transition: all .3s;
    }
    
    &:hover {
        .#{$module}-arrow-hover div {
            opacity: 1;
        }
    }
}

@keyframes #{$module}-content-item-keyframe-slide-in {

    from {
        transform: translateX(-100%);
    }
    
    to {
        transform: translateX(0);
    }
}

@keyframes #{$module}-content-item-keyframe-slide-out {

    from {
        transform: translateX(0);
    }
    
    to {
        transform: translateX(100%);
    }
}

@keyframes #{$module}-content-item-keyframe-slide-in-reverse {

    from {
        transform: translateX(100%);
    }
  
    to {
        transform: translateX(0);
    }
}
  
@keyframes #{$module}-content-item-keyframe-slide-out-reverse {

    from {
        transform: translateX(0);
    }
  
    to {
        transform: translateX(-100%);
    }
}

@import "./rtl.scss";