naive-ui/styles/Slider.scss

@import './mixins/mixins.scss';
@import './themes/vars.scss';

@include themes-mixin {
  @include b(slider) {
    display: block;
    padding: 5px 0;
    position: relative;
    z-index: 0;
    width: calc(100% - 14px);
    margin-left: 7px;
    margin-right: 7px;
    cursor: pointer;
    &:hover {
      @include b(slider-rail) {
        background-color: map-get($--slider-rail-background-color, 'hover');
        @include e(fill) {
          background-color: map-get($--slider-rail-fill-background-color, 'hover');
        }
        @include b(slider-dots) {
          @include b(slider-dot) {
            box-shadow: map-get($--slider-dot-box-shadow, 'active');
          }
        }
      }
      @include b(slider-handle) {
        box-shadow: map-get($--slider-handle-box-shadow, 'hover');
      }
    }
    @include m(active) {
      @include b(slider-rail) {
        background-color: map-get($--slider-rail-background-color, 'hover');
        @include e(fill) {
          background-color: map-get($--slider-rail-fill-background-color, 'hover');
        }
        @include b(slider-dots) {
          @include b(slider-dot) {
            box-shadow: map-get($--slider-dot-box-shadow, 'active');
          }
        }
      }
      @include b(slider-handle) {
        box-shadow: map-get($--slider-handle-box-shadow, 'hover');
      }
    }
    @include m(with-mark) {
      margin: 8px 12px 32px 12px;
    }
    @include b(slider-rail) {
      width: 100%;
      height: $--slider-rail-height;
      background-color: map-get($--slider-rail-background-color, 'default');
      position: relative;
      transition: background-color .2s $default-cubic-bezier;
      border-radius: $--slider-rail-height / 2;
      @include e(fill) {
        transition: background-color .3s $default-cubic-bezier;
        background-color: map-get($--slider-rail-fill-background-color, 'default');
        border-radius: $--slider-rail-height / 2;
        position: absolute;
        top: 0;
        bottom: 0;
      }
    }
    @include b(slider-handle) {
      outline: none;
      height: $--slider-handle-size;
      width: $--slider-handle-size;
      border-radius: $--slider-handle-size / 2;
      background-color: $--slider-handle-background-color;
      box-shadow: map-get($--slider-handle-box-shadow, 'default');
      transition: box-shadow .2s $default-cubic-bezier, background-color .3s $default-cubic-bezier;
      position: absolute;
      top: 0;
      transform: translateX(-50%);
      overflow: hidden;
      cursor: pointer;
      &:hover {
        box-shadow: map-get($--slider-handle-box-shadow, 'hover');
      }
      &:hover:focus {
        box-shadow: map-get($--slider-handle-box-shadow, 'active');
      }
      &:focus {
        box-shadow: map-get($--slider-handle-box-shadow, 'focus');
      }
    }
    @include b(slider-marks) {
      position: absolute;
      top: 14px;
      left: 0;
      right: 0;
      @include b(slider-mark) {
        position: absolute;
        transform: translateX(-50%);
      }
    }
    @include b(slider-dots) {
      position: absolute;
      left: 0;
      top: 50%;
      right: 0;
      @include b(slider-dot) {
        transition: box-shadow .3s $default-cubic-bezier, background-color .3s $default-cubic-bezier;
        position: absolute;
        transform: translateX(-50%) translateY(-50%);
        height: $--slider-dot-size;
        width: $--slider-dot-size;
        border-radius: $--slider-dot-size / 2;
        overflow: hidden;
        box-shadow: map-get($--slider-dot-box-shadow, 'default');
      }
    }
  }
  @include b(slider-handle-indicator) {
    @include fade-in-scale-up-transition();
    color: $--slider-indicator-color;
    font-size: 14px;
    padding: 8px 12px;
    margin-bottom: 12px;
    background-color: $--slider-indicator-background-color;
    box-shadow: $--slider-indicator-box-shadow;
    border-radius: 4px;
  }
}