acud/lib/carousel/style/index.less

acg react 组件库

@import '../../style/themes/index';
@import '../../style/mixins/index';
@import './mixin.less';

@carousel-prefix-cls: ~'@{acud-prefix}-carousel';

.@{carousel-prefix-cls} {
    .reset-component();

    position: relative;
    width: @carousel-width;
    height: @carousel-height;
    background: @carousel-background;
    overflow: hidden;
    cursor: pointer;

    &:hover &-switch {
        display: block;
    }
    &-switch {
        display: none;
        position: absolute;
        z-index: 2;
        top: 50%;
        margin-top: -0.5*@carousel-switch-size;
        width: 100%;
        height: @carousel-switch-size;
        pointer-events: none;
        > span {
            cursor: pointer;
            pointer-events: visible;
            opacity: 1;
            &.disabled {
                cursor: not-allowed; 
                opacity: 0.5;
            }
            > .@{iconfont-css-prefix} {
                .circle(@carousel-switch-size);
                display: inline-block;
                background: @carousel-switch-bg-color;
                box-shadow: @carousel-switch-shadow;
                color: @carousel-switch-icon-color;
                font-size: @carousel-switch-icon-size;

                position: relative;
                svg {
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    margin-top: -0.5*@carousel-switch-icon-size;
                    margin-left: -0.5*@carousel-switch-icon-size;
                }
            }
        }
        &-left {
            float: left;
            margin-left: @carousel-switch-margin;
        }
        &-right {
            float: right;
            margin-right: @carousel-switch-margin;
        }
    }

    &-indicator {
        position: absolute;
        z-index: 2;
        width: 100%;
        ul, li {
            list-style: none !important;
        }

        &-bottom,
        &-top {
            line-height: 0;
            font-size: 0;
            ul {
                text-align: center;
                li {
                    display: inline-block;
                    width: @carousel-indicator-dot-width;
                    height: @carousel-indicator-dot-height;
                    background-color: @carousel-indicator-bg-color;
                    margin-right: @carousel-indicator-dot-margin;
                    cursor: pointer;
                    border-radius: 0.5*@carousel-indicator-dot-height;
                    .fill {
                        width: 0;
                        height: 100%;
                        background-color: @carousel-indicator-active-bg-color;
                        border-radius: 0.5*@carousel-indicator-dot-height;
                        transition: none;
                    }
                    &.active .fill {
                        width: @carousel-indicator-dot-width;
                        transition: width 5s linear;
                    }
                }
            }
        }

        &-bottom {
            bottom: @carousel-indicator-bottom-gap;
        }

        &-top {
            top: @carousel-indicator-top-gap;
        }

        &-left,
        &-right {
            top: 50%;
            transform: translateY(-50%);
            width: @carousel-indicator-dot-height;
            ul {
                text-align: center;
                li {
                    display: block;
                    width: @carousel-indicator-dot-height;
                    height: @carousel-indicator-dot-width;
                    background-color: @carousel-indicator-bg-color;
                    margin-bottom: @carousel-indicator-dot-margin;
                    cursor: pointer;
                    border-radius: 0.5*@carousel-indicator-dot-height;
                    .fill {
                        width: 100%;
                        height: 0;
                        background-color: @carousel-indicator-active-bg-color;
                        border-radius: 0.5*@carousel-indicator-dot-height;
                        transition: none;
                    }
                    &.active .fill {
                        height: @carousel-indicator-dot-width;
                        transition: height 5s linear;
                    }
                }
            }
        }

        &-left {
            left: @carousel-indicator-left-gap;
        }

        &-right {
            right: @carousel-indicator-right-gap;
        }
        
        &-number&-left {
            left: 0.5*@carousel-indicator-number-height;
        }
        &-number&-right {
            right: 0.5*@carousel-indicator-number-height + @carousel-indicator-number-width;
        }
        &-number&-bottom {
            bottom: 0.5*@carousel-indicator-number-height;
        }
        &-number&-top {
            top: 0.5*@carousel-indicator-number-height;
        }

        &-number {
            >div {
                margin: 0 auto;
                text-align: center;
                width: @carousel-indicator-number-width;
                height: @carousel-indicator-number-height;
                line-height: @carousel-indicator-number-height;
                color: @carousel-indicator-number-font-color;
                background-color: @carousel-indicator-number-bg-color;
                font-size: @carousel-indicator-number-font-size;
                .total {
                    color: fade(@carousel-indicator-number-font-color, 50%);
                }
            }
        }
    }

    &-content {
        width: 100%;
        height: 100%;
        >ul{
            list-style: none !important;
            position: relative;
            font-size: 0;
            >li {
                list-style: none !important;
                position: absolute;
                width: @carousel-width;
                height: @carousel-height;
                background-size: contain;
                transition: left ease-in-out 1s;
                * {
                    font-size: @T1;
                }
            }
        }
    }

    &&-multi {
        .@{carousel-prefix-cls}-switch {
            &-left {
                margin-left: 11*@P;
            }
            &-right {
                margin-right: 11*@P;
            }
        }
        .@{carousel-prefix-cls}-content {
            ul {
                height: 100%;
                overflow: hidden;
            }
        }
    }
}