acud/lib/slider/style/index.less

acg react 组件库

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

.@{slider-prefix-cls} {
    .reset-component();
    position: relative;
    height: 12px;
    margin: @slider-margin;
    padding: 4px 0;
    cursor: pointer;
    touch-action: none;

    .vertical();

    &-with-marks {
        margin-bottom: 28px;
    }

    &-rail {
        .basic-config(@slider-rail-tp, @slider-rail-p);
        position: absolute;
        width: 100%;
        height: 4px;
        border-radius: @slider-border-radius;
        transition: background-color 0.3s;
    }

    &-track {
        .basic-config(@slider-track-tp, @slider-track-p);
        position: absolute;
        height: 4px;
        border-radius: @slider-border-radius;
        transition: background-color 0.3s;
    }

    &-handle {
        .basic-config(@slider-handle-tp, @slider-handle-p);
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: center;
        width: @slider-handle-size;
        height: @slider-handle-size;
        margin-top: @slider-handle-margin-top;
        border-radius: 50%;
        border-width: @slider-handle-border-width;
        border-style: solid;
        cursor: pointer;
        transition: border-color 0.3s, box-shadow 0.6s, transform 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
        .@{iconfont-css-prefix} {
            margin: @slider-handle-icon-margin;
            color: @slider-handle-icon-color;
        }
    }

    &:not(.@{slider-prefix-cls}-disabled) {
        .@{slider-prefix-cls}-handle {
            &:focus,
            &:hover {
                width: @slider-handle-focus-size;
                height: @slider-handle-focus-size;
                margin-top: @slider-handle-focus-margin-top;
                border-width: @slider-handle-border-width;
                outline: none;
            }
            &:focus {
                border-width: @slider-handle-border-width * 2;
            }
        }
    }

    &-mark {
        position: absolute;
        top: 14px;
        left: 0;
        width: 100%;
        font-size: @font-size-base;
    }

    &-mark-text {
        position: absolute;
        display: inline-block;
        color: @text-color-secondary;
        text-align: center;
        word-break: keep-all;
        cursor: pointer;
        user-select: none;
        // UE要求 除了第一个和最右边最后一个，其他文字都是和白点垂直居中对齐
        // 这里其实有个小瑕疵，就是如果最后一个mark并不是max value，那么这个text会有点小偏移
        // 因为rc-slider渲染marks的时候会把空value的mark给filter掉
        // 没想到好的方法来解决，暂时放着。
        &:first-child {
            transform: translateX(0) !important;
        }
        &:last-child {
            transform: translateX(-100%) !important;
        }
    }

    &-step {
        position: absolute;
        width: 100%;
        height: 4px;
        background: transparent;
    }

    &-dot {
        position: absolute;
        top: 0;
        width: 1 * @P;
        height: 1 * @P;
        margin-left: -4px;
        border-radius: 50%;
        cursor: pointer;
        background-color: #fff;
        &:first-child {
            margin-left: -4px;
        }

        &:last-child {
            margin-left: -4px;
        }

        &-active {
        }
    }

    &-disabled {
        cursor: not-allowed;

        .@{slider-prefix-cls}-track {
            background-color: @slider-disabled-color;
        }

        .@{slider-prefix-cls}-handle,
        .@{slider-prefix-cls}-dot {
            box-shadow: none;
            cursor: not-allowed;
            border-color: @slider-disabled-border-color;
        }

        .@{slider-prefix-cls}-mark-text,
        .@{slider-prefix-cls}-dot {
            cursor: not-allowed !important;
        }
    }
    &-tooltip {
        .@{acud-prefix}-tooltip-inner {
            color: #fff;
            background-color: rgba(7, 12, 20, 0.85);
        }
        .@{acud-prefix}-tooltip-arrow-content {
            background-color: rgba(7, 12, 20, 0.85);
        }
    }
}

.vertical() {
    &-vertical {
        width: 12px;
        height: 100%;
        margin: 6px 10px;
        padding: 0 4px;

        .@{slider-prefix-cls}-rail {
            width: 4px;
            height: 100%;
        }

        .@{slider-prefix-cls}-track {
            width: 4px;
        }

        .@{slider-prefix-cls}-handle {
            margin-top: -6px; // we chould consider border width as well: (10 + 2 ) / 2
            margin-left: -5px;
        }

        .@{slider-prefix-cls}-mark {
            top: 0;
            left: 12px;
            width: 18px;
            height: 100%;
        }

        .@{slider-prefix-cls}-mark-text {
            left: 4px;
            white-space: nowrap;
        }

        .@{slider-prefix-cls}-step {
            width: 4px;
            height: 100%;
        }

        .@{slider-prefix-cls}-dot {
            top: auto;
            left: 2px;
            margin-bottom: -4px;
        }
    }

    &-tooltip {
        .@{acud-prefix}-tooltip-inner {
            min-width: unset;
        }
    }
}