yyzone/src/assets/styles/components/slider.less

yyzone vue components and utils

@prefixSliderCls: ~"@{yy-css-prefix}slider";

.@{prefixSliderCls} {
    line-height: normal;
    padding: @yy-slider-margin;
    &-wrap {
        width: 100%;
        height: @yy-slider-height;
        background-color: @yy-slider-bg;
        border-radius: @yy-btn-border-radius;
        vertical-align: middle;
        position: relative;
        cursor: pointer;
        &:before {
            content: '';
            position: absolute;
            left: 0;
            right: 0;
            top: -8px;
            bottom: -8px;
        }
    }

    &-button-wrap {
        .square(@yy-slider-button-wrap-size);
        text-align: center;
        background-color: transparent;
        position: absolute;
        top: -(@yy-slider-button-wrap-size - @yy-slider-height)/2;
        transform: translateX(-50%);

        .@{prefixTipCls} {
            display: block;
            user-select: none;
            &-rel {
                display: block;
            }
        }
    }

    &-button {
        .square(@yy-slider-button-wrap-size);
        box-sizing: border-box;
        border: 2px solid @yy-slider-color;
        border-radius: 50%;
        background-color: @yy-background-component;
        transition: all @yy-transition-time linear;
        outline: 0;

        &:focus,
        &:hover,
        &-dragging {
            border-color: @yy-slider-color;;
            // transform: scale(1.2);
        }

        &:hover {
            cursor: grab;
        }

        &-dragging,
        &-dragging:hover {
            cursor: grabbing;
        }
    }

    &-bar {
        height: @yy-slider-height;
        background: @yy-slider-color;
        border-radius: @yy-btn-border-radius;
        position: absolute;
    }

    &-stop {
        position: absolute;
        .square(@yy-slider-height*2);
        top: -(@yy-slider-height)/2;
        border-radius: 50%;
        box-sizing: border-box;
        background-color: @yy-background-component;
        border: 2px solid @yy-slider-bg;
        transform: translateX(-50%);
    }
}

.@{prefixSliderCls}-disabled {
    .cursor(not-allowed);

    .@{prefixSliderCls}-wrap {
        background-color: @yy-slider-disabled-color;
        .cursor(not-allowed);
    }

    .@{prefixSliderCls}-bar {
        background-color: fade(@yy-slider-color, 40%);
    }

    .@{prefixSliderCls}-button {
        border-color: fade(@yy-slider-color, 40%);

        &:hover,
        &-dragging {
            border-color: fade(@yy-slider-color, 40%);
        }

        &:hover {
            .cursor(not-allowed);

        }

        &-dragging,
        &-dragging:hover {
            .cursor(not-allowed);
        }
    }
}

.@{prefixSliderCls}-input {
    .@{prefixSliderCls}-wrap {
        width: auto;
        margin-right: 100px;
    }

    .@{prefixInputNumberCls} {
        float: right;
        margin-top: -@yy-slider-button-wrap-size;
    }
}