rabbit-simple-ui/src/styles/components/carousel.less

A simple UI component library based on JavaScript

@import '../custom.less';

@carousel-tag-name: r-carousel;
@carousel-prefix-cls: ~'@{css-prefix}carousel';

@{carousel-tag-name} {
    position: relative;
    display: block;
}

.@{carousel-prefix-cls} {
    &-list {
        position: relative;
        width: 100%;
        overflow: hidden;
    }

    &-item {
        position: relative;
        display: none;
        float: left;
        width: 100%;
        margin-right: -100%;
        backface-visibility: hidden;
        transition: transform 0.5s ease;

        &.active,
        &-next,
        &-prev {
            display: block;
        }

        &-next:not(&-left),
        .active&-right {
            transform: translateX(100%);
        }

        &-prev:not(&-right),
        .active&-left {
            transform: translateX(-100%);
        }
    }

    &-fade &-item {
        opacity: 0;
        transition-property: opacity;
        transform: none;
    }

    &-fade &-item.active,
    &-fade &-item-next&-item-left,
    &-fade &-item-prev&-item-right {
        z-index: 1;
        opacity: 1;
    }

    &-fade .active&-item-left,
    &-fade .active&-item-right {
        z-index: 0;
        opacity: 0;
        transition: opacity 0.5s ease 0s;
    }

    &-arrow {
        border: 0;
        padding: 0;
        margin: 0;
        outline: none;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        cursor: pointer;
        display: none;
        position: absolute;
        top: 50%;
        z-index: 10;
        transform: translateY(-50%);
        transition: @transition-time;
        background-color: rgba(31, 45, 61, 0.11);
        color: @white;

        &:hover {
            background-color: rgba(31, 45, 61, 0.5);
        }

        text-align: center;
        font-size: 1em;
        font-family: inherit;
        line-height: inherit;

        & > * {
            vertical-align: baseline;
        }

        &.left {
            left: 16px;
        }

        &.right {
            right: 16px;
        }

        &-always {
            display: inherit;
        }

        &-hover {
            display: inherit;

            opacity: 0;
        }
    }

    @{carousel-tag-name}:hover &-arrow-hover {
        opacity: 1;
    }

    &-dots {
        @padding: 7px;

        z-index: 10;
        display: none;
        position: relative;

        &-inside {
            display: block;
            position: absolute;
            bottom: 10px - @padding;
        }

        &-outside {
            display: block;
            margin-top: 10px - @padding;
        }

        list-style: none;
        text-align: center;
        padding: 0;
        width: 100%;
        height: 3px + @padding * 2;

        li {
            position: relative;
            display: inline-block;
            vertical-align: top;
            text-align: center;
            margin: 0 2px;
            padding: @padding 0;
            cursor: pointer;

            button {
                width: 16px;
                height: 3px;
                border: 0;
                cursor: pointer;
                background: #8391a5;
                opacity: 0.3;
                display: block;
                border-radius: 1px;
                outline: none;
                font-size: 0;
                color: transparent;
                transition: all 0.5s;

                &.radius {
                    width: 9px;
                    height: 9px;
                    border-radius: 50%;
                }
            }

            &:hover > button {
                opacity: 0.7;
            }

            &.@{carousel-prefix-cls}-active > button {
                opacity: 1;
                width: 24px;

                &.radius {
                    width: 9px;
                }
            }
        }
    }
}