@chief-editor/ui/css/components/Slider/styles.less

UI Component for chief editor

@import "./var.less";
@import "./mixin.less";

@slider-height: 24px;
@high-light-type: #2f88FF;

.@{prefixCls}-slider {
    height: @slider-height;
    display: flex;

    &-prefix {
        flex: 0 0 22px;
        padding-right: 8px;
        font-size: 12px;
        color: @color-neutral5;
        line-height: @slider-height;
    }

    &-suffix {
        flex: 0 0 22px;
        padding-left: 8px;
        font-size: 12px;
        color: @color-neutral5;
        line-height: @slider-height;
    }

    &-content {
        position: relative;
        flex: 1;
        height: @slider-height;
    }

    &-input {
        flex: 0 0 50px;
        margin-left: 14px;
    }

    &-background, &-selected {
        position: absolute;
        height: 2px;
        top: 10px;
        border-radius: @border-radius;
    }

    &-selected {
        background: @color-primary6;

        &-invalid {
            background: @color-danger6;
        }

        &-disabled {
            background-color: @color-neutral7;
        }
    }

    &-click {
        height: @slider-height;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        cursor: pointer;

        &-disabled {
            cursor: not-allowed;
        }
    }

    &-background {
        background: @color-neutral5;
        left: 0;
        right: 0;
    }

    &-dragger {
        position: absolute;
        top: 6px;
        box-sizing: border-box;
        border-radius: 50%;
        width: 8.8px;
        height: 8.8px;
        background-color: @high-light-type;
        cursor: pointer;
        pointer-events: auto;
        border: 1.2px solid @border-color3;

        &-invalid {
            border-color: @color-danger6;
            &:hover, &:active {
                border-color: @color-danger6;
            }
        }

        &-disabled {
            // border-color: @color-neutral7;
            background-color: @color-neutral7;
        }

        &-pop-wrapper {
            &,
            &.@{prefixCls}-popover-wrapper-mounted.@{prefixCls}-popover-wrapper-transition {
                .property-prefix(transition, none);
            }

            .@{prefixCls}-popover-inner {
                text-align: center;
                .font-height(12px);
            }
        }
    }

    &-mark {
        position: absolute;
        top: 10px;
        transform: translateX(-4px);
        box-sizing: border-box;
        border-radius: 50%;
        width: 8px;
        height: 8px;
        background-color: @color-neutral1;
        cursor: pointer;
        pointer-events: auto;
        border: 2px solid @color-neutral5;

        &-pressed {
            border-color: @color-primary7;
        }

        &-disabled {
            cursor: not-allowed;
        }

        &-selected {
            border-color: @color-primary6;
        }

        &-pop {
            font-size: 12px;
            margin-top: 12px;
            box-shadow: none;
        }

        &-pop-wrapper {
            pointer-events: none;

            &,
            &.@{prefixCls}-popover-wrapper-mounted.@{prefixCls}-popover-wrapper-transition {
                .property-prefix(transition, none);
            }
        }

        &-selected {
            border-color: @color-primary6;
        }
    }
}