semi-design/packages/semi-foundation/slider/slider.scss

//@import '../theme/variables.scss';
@import "./variables.scss";
@import "./animation.scss";

$module: #{$prefix}-slider;

.#{$module} {
    padding: $spacing-slider-paddingY $spacing-slider-paddingX;
    margin: $spacing-slider-margin;

    &-wrapper {
        box-sizing: border-box;
        position: relative;
        // margin: 15px 0px 15px 0px;
        height: $height-slider_wrapper;
        width: 100%;
        //padding-top: 12px;
        // min-width: 500px;
        display: inline-block;
        // vertical-align 默认值 baseline 会导致父级元素高度比子元素高 https://codepen.io/shijiame/pen/rNeraYg
        vertical-align: bottom;
    }

    &-rail {
        box-sizing: border-box;
        margin: $spacing-slider_rail-margin;
        padding: $spacing-slider_rail-padding;
        color: $color-slider_rail;
        font-size: $font-slider_rail-fontSize;
        font-variant: tabular-nums;
        line-height: $font-slider_rail-lineHeight;
        list-style: none;
        font-feature-settings: 'tnum';
        position: absolute;
        height: $height-slider_rail;
        cursor: pointer;
        touch-action: none;
        background-color: $color-slider_rail-bg-default;
        width: 100%;
        border-radius: $radius-slider_rail;
        top: $spacing-slider_rail-top;
    }

    &-handle {
        @include shadow-knob;
        // 不设置border-box会在点击时border向下偏移1px
        box-sizing: border-box;
        touch-action: none;
        position: absolute;
        width: $width-slider_handle;
        height: $width-slider_handle;
        margin-top: $spacing-slider_handle-marginTop;
        // margin-left: -11px;
        background-color: $color-slider_handle-bg-default; //$color-white;
        border: none;
        border-radius: 50%;
        cursor: pointer;
        transition: background-color $transition_duration_slider_handle-bg $transition_function-slider-handle-bg $transition_delay-slider_handle-bg;
        transform: scale($transform_scale-slider_handle);
        &:focus-visible {
            outline: $width-slider_handle-focus solid $color-slider_handle-focus;
        }
    }

    &-handle:hover {
        background-color: $color-slider_handle-bg-hover;
    }

    &-handle-clicked {
        border: solid $width-slider_handle_clicked $color-slider_handle-border-focus;
        cursor: grabbing;
    }

    &-track {
        height: $height-slider_track;
        background: $color-slider_track-bg-default;
        border-radius: $radius-slider_track;
        position: absolute;
        cursor: pointer;
        top: $spacing-slider_track-top;
    }

    &-tooltip {
        position: absolute;
        top: $spacing-slider_tooltip-top;
        // margin-left: -15px;
    }

    &-dots {
        width: 100%;
        background: transparent;
    }

    &-dot {
        position: absolute;
        top: $spacing-slider_dot-top;
        width: $width-slider_dot;
        height: $width-slider_dot;
        background-color: $color-slider_dot-bg-default;
        //border: 1px solid $color-control-bg-default;
        border-radius: 50%;
        cursor: pointer;
    }

    &-dot-active {
        background-color: $color-slider_dot-border-active;
    }

    &-marks {
        position: absolute;
        top: $spacing-slider_marks-top;
        left: $spacing-slider_marks-left;
        width: 100%;
        font-size: $font-slider_marks-fontSize;
    }

    &-mark {
        position: absolute;
        display: inline-block;
        color: $color-slider_mark-text-default;
        text-align: center;
        cursor: pointer;
        transform: translate(-50%, 0);
    }

    &-marks-reverse {
        position: absolute;
        top: $spacing-slider_marks-top;
        left: $spacing-slider_marks-left;
        width: 100%;
        font-size: $font-slider_marks-fontSize;
    }

    &-mark-reverse {
        position: absolute;
        display: inline-block;
        color: $color-slider_mark-text-default;
        text-align: center;
        cursor: pointer;
        transform: translate(-50%, 0) rotate(-180deg);
    }

    &-boundary {
        position: relative;
        font-size: $font-size-small;
        color: $color-slider-text-default;
        visibility: hidden;
        top: $spacing-slider_boundary-top;

        span {
            position: absolute;
            display: inline-block;
        }
    }

    &-boundary-min {
        left: $spacing-slider_boundary_min-left;
    }

    &-boundary-max {
        right: $spacing-slider_boundary_max-right;
    }

    &-boundary-show {
        visibility: visible;
    }
}

.#{$module}-vertical-wrapper {
    width: $height-slider_vertical_wrapper;
    height: 100%;

    .#{$module}-track {
        width: $height-slider_track;
    }

    .#{$module}-marks {
        height: 100%;
        margin-top: $spacing-slider_vertical_marks-marginTop;
        margin-left: $spacing-slider_vertical_marks-marginLeft;
    }

    .#{$module}-marks-reverse {
        height: 100%;
        margin-top: $spacing-slider_vertical_marks-marginTop;
        margin-left: $spacing-slider_vertical_marks-reverse-marginLeft;
    }

    .#{$module}-rail {
        width: $height-slider_rail;
        height: 100%;
        top: $spacing-slider_vertical_rail-top;
    }

    .#{$module}-handle {
        margin-top: $spacing-slider_vertical_handle-marginTop;
        margin-left: $spacing-slider_vertical_handle-marginLeft;
    }
}

.#{$module}-disabled {
    cursor: not-allowed;
    $color: $color-slider_disabled-text-default !important;

    .#{$module}-handle {
        cursor: not-allowed;
        @include shadow-0;
        border: $width-slider_handle_border_disabled $color-slider_handle_disabled-border solid;

        &:hover {
            background-color: $color-slider_handle_disabled-border-hover;
        }
    }

    .#{$module}-rail {
        cursor: not-allowed;
    }

    .#{$module}-track {
        cursor: not-allowed;
        background-color: $color-slider_track_disabled-bg;
    }

    .#{$module}-dot {
        cursor: not-allowed;
        background-color: $color-slider_dot-bg-default;
        border-color: $color-slider_dot-border;
        box-shadow: none;
    }
}

.#{$module}-handle-tooltip {
    text-align: center;
}

.#{$module}-reverse {
    transform: rotate(180deg);
}