@cyberpunk-vue/theme-chalk 1.14.0 → 1.14.2

package/src/components/slider.scss

@@ -1,436 +1,436 @@
-@use 'sass:map';
-@use '../common/var' as *;
-@use '../mixins/mixins' as *;
-
-// ============================================
-// CpSlider - 赛博朋克风格滑块
-// ============================================
-
-// 尺寸变量
-$slider-sizes: (
-  'sm': (
-    'track-height': 4px,
-    'thumb-size': 14px,
-    'clip-size': 3px,
-  ),
-  'md': (
-    'track-height': 6px,
-    'thumb-size': 18px,
-    'clip-size': 4px,
-  ),
-  'lg': (
-    'track-height': 8px,
-    'thumb-size': 22px,
-    'clip-size': 5px,
-  ),
-);
-
-@include b(slider) {
-  position: relative;
-  width: 100%;
-  height: 32px;
-  display: flex;
-  align-items: center;
-  cursor: pointer;
+@use 'sass:map';
+@use '../common/var' as *;
+@use '../mixins/mixins' as *;
+
+// ============================================
+// CpSlider - 赛博朋克风格滑块
+// ============================================
+
+// 尺寸变量
+$slider-sizes: (
+  'sm': (
+    'track-height': 4px,
+    'thumb-size': 14px,
+    'clip-size': 3px,
+  ),
+  'md': (
+    'track-height': 6px,
+    'thumb-size': 18px,
+    'clip-size': 4px,
+  ),
+  'lg': (
+    'track-height': 8px,
+    'thumb-size': 22px,
+    'clip-size': 5px,
+  ),
+);
+
+@include b(slider) {
+  position: relative;
+  width: 100%;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
   user-select: none;
   --cp-slider-color: var(--cp-color-primary);
   --cp-slider-color-light: var(--cp-color-primary-light);
-
-  // ========== 轨道 ==========
-  @include e(runway) {
-    position: relative;
-    flex: 1;
-    height: 6px;
-    background: #1a1a1f; // 使用稍微亮一点的深色背景
-    border: 1px solid var(--cp-border);
-    transition: all 0.2s ease;
-    overflow: hidden;
-
-    // 切角默认形状
-    clip-path: polygon(
-      4px 0,
-      100% 0,
-      100% calc(100% - 4px),
-      calc(100% - 4px) 100%,
-      0 100%,
-      0 4px
-    );
-  }
-
-  // ========== 填充条 ==========
-  @include e(bar) {
-    position: absolute;
-    top: 0;
-    left: 0;
-    height: 100%;
+
+  // ========== 轨道 ==========
+  @include e(runway) {
+    position: relative;
+    flex: 1;
+    height: 6px;
+    background: #1a1a1f; // 使用稍微亮一点的深色背景
+    border: 1px solid var(--cp-border);
+    transition: all 0.2s ease;
+    overflow: hidden;
+
+    // 切角默认形状
+    clip-path: polygon(
+      4px 0,
+      100% 0,
+      100% calc(100% - 4px),
+      calc(100% - 4px) 100%,
+      0 100%,
+      0 4px
+    );
+  }
+
+  // ========== 填充条 ==========
+  @include e(bar) {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
     background: var(--cp-slider-color);
     box-shadow: 0 0 10px var(--cp-slider-color-light);
-    z-index: 1;
-
-    // 内部纹理，增加科幻感
-    &::after {
-      content: '';
-      position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      background: linear-gradient(
-        90deg,
-        rgba(255, 255, 255, 0) 0%,
-        rgba(255, 255, 255, 0.1) 50%,
-        rgba(255, 255, 255, 0) 100%
-      );
-      pointer-events: none;
-    }
-  }
-
-  // ========== 滑块手柄 ==========
-  @include e(thumb) {
-    position: absolute;
-    width: 18px;
-    height: 18px;
-    background: var(--cp-bg-elevated);
+    z-index: 1;
+
+    // 内部纹理，增加科幻感
+    &::after {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background: linear-gradient(
+        90deg,
+        rgba(255, 255, 255, 0) 0%,
+        rgba(255, 255, 255, 0.1) 50%,
+        rgba(255, 255, 255, 0) 100%
+      );
+      pointer-events: none;
+    }
+  }
+
+  // ========== 滑块手柄 ==========
+  @include e(thumb) {
+    position: absolute;
+    width: 18px;
+    height: 18px;
+    background: var(--cp-bg-elevated);
     border: var(--cp-slider-thumb-border-width, 2px) solid var(--cp-slider-color);
     box-shadow: 0 0 8px var(--cp-slider-color-light);
-    transform: translate(-50%, 0);
-    cursor: grab;
-    z-index: 2;
-    outline: none;
-
-    // 切角造型
-    clip-path: polygon(
-      4px 0,
-      100% 0,
-      100% calc(100% - 4px),
-      calc(100% - 4px) 100%,
-      0 100%,
-      0 4px
-    );
-
-    // 装饰元素
-    &::before {
-      content: '';
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      width: var(--cp-slider-inner-dot-size, 6px);
-      height: var(--cp-slider-inner-dot-size, 6px);
+    transform: translate(-50%, 0);
+    cursor: grab;
+    z-index: 2;
+    outline: none;
+
+    // 切角造型
+    clip-path: polygon(
+      4px 0,
+      100% 0,
+      100% calc(100% - 4px),
+      calc(100% - 4px) 100%,
+      0 100%,
+      0 4px
+    );
+
+    // 装饰元素
+    &::before {
+      content: '';
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      width: var(--cp-slider-inner-dot-size, 6px);
+      height: var(--cp-slider-inner-dot-size, 6px);
       background: var(--cp-slider-color);
-      transform: translate(-50%, -50%);
-      clip-path: polygon(
-        var(--cp-slider-inner-clip-size, 2px) 0,
-        100% 0,
-        100% calc(100% - var(--cp-slider-inner-clip-size, 2px)),
-        calc(100% - var(--cp-slider-inner-clip-size, 2px)) 100%,
-        0 100%,
-        0 var(--cp-slider-inner-clip-size, 2px)
-      );
-    }
-
-    &:hover {
+      transform: translate(-50%, -50%);
+      clip-path: polygon(
+        var(--cp-slider-inner-clip-size, 2px) 0,
+        100% 0,
+        100% calc(100% - var(--cp-slider-inner-clip-size, 2px)),
+        calc(100% - var(--cp-slider-inner-clip-size, 2px)) 100%,
+        0 100%,
+        0 var(--cp-slider-inner-clip-size, 2px)
+      );
+    }
+
+    &:hover {
       border-color: var(--cp-slider-color);
       box-shadow: 0 0 12px var(--cp-slider-color-light);
-      transform: translate(-50%, 0) scale(1.1);
-    }
-
-    &:active,
-    &:focus {
-      cursor: grabbing;
+      transform: translate(-50%, 0) scale(1.1);
+    }
+
+    &:active,
+    &:focus {
+      cursor: grabbing;
       border-color: var(--cp-slider-color);
       box-shadow: 0 0 16px var(--cp-slider-color-light);
-    }
-
-    @include when(active) {
+    }
+
+    @include when(active) {
       border-color: var(--cp-slider-color);
       box-shadow: 0 0 16px var(--cp-slider-color-light);
-      transform: translate(-50%, 0) scale(1.15);
-    }
-  }
-
-  // ========== Tooltip ==========
-  @include e(tooltip) {
-    position: absolute;
-    bottom: calc(100% + 8px);
-    left: 50%;
-    transform: translateX(-50%);
-    padding: 4px 8px;
-    background: var(--cp-bg-elevated);
+      transform: translate(-50%, 0) scale(1.15);
+    }
+  }
+
+  // ========== Tooltip ==========
+  @include e(tooltip) {
+    position: absolute;
+    bottom: calc(100% + 8px);
+    left: 50%;
+    transform: translateX(-50%);
+    padding: 4px 8px;
+    background: var(--cp-bg-elevated);
     border: 1px solid var(--cp-slider-color);
     color: var(--cp-slider-color);
-    font-family: var(--cp-font-family-mono);
-    font-size: 12px;
-    font-weight: 600;
-    white-space: nowrap;
+    font-family: var(--cp-font-family-mono);
+    font-size: 12px;
+    font-weight: 600;
+    white-space: nowrap;
     box-shadow: 0 0 8px var(--cp-slider-color-light);
-    z-index: 10;
-
-    // 箭头
-    &::after {
-      content: '';
-      position: absolute;
-      top: 100%;
-      left: 50%;
-      transform: translateX(-50%);
-      border: 4px solid transparent;
+    z-index: 10;
+
+    // 箭头
+    &::after {
+      content: '';
+      position: absolute;
+      top: 100%;
+      left: 50%;
+      transform: translateX(-50%);
+      border: 4px solid transparent;
       border-top-color: var(--cp-slider-color);
-    }
-  }
-
-  // ========== 刻度点 (放在轨道外面，位置基于 slider 根元素) ==========
-  @include e(stop) {
-    position: absolute;
-    top: 50%;
-    width: 2px;
-    height: 2px;
-    background: var(--cp-text-secondary);
-    opacity: 0.3;
-    transform: translate(-50%, -50%);
-    transition: opacity 0.2s ease;
-    z-index: 0; // 低于 thumb
-    pointer-events: none;
-  }
-
-  // ========== 刻度标记 ==========
-  @include e(marks) {
-    position: absolute;
-    top: 100%;
-    left: 0;
-    right: 0;
-    margin-top: 8px;
-  }
-
-  @include e(mark) {
-    position: absolute;
-    transform: translateX(-50%);
-  }
-
-  @include e(mark-text) {
-    font-family: var(--cp-font-family-ui);
-    font-size: 11px;
-    color: var(--cp-text-secondary);
-    white-space: nowrap;
-  }
-
-  // ========== 垂直模式 ==========
-  &.is-vertical {
-    width: 32px;
-    height: 200px;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-
-    .#{$namespace}-slider__runway {
-      width: 6px;
-      height: 100%;
-      flex: 1;
-      clip-path: none;
-    }
-
-    .#{$namespace}-slider__bar {
-      top: auto;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      width: 100%;
-      height: auto;
-    }
-
-    .#{$namespace}-slider__thumb {
-      left: 50%;
-      transform: translate(-50%, 50%);
-
-      &:hover {
-        transform: translate(-50%, 50%) scale(1.1);
-      }
-
-      &.is-active {
-        transform: translate(-50%, 50%) scale(1.15);
-      }
-    }
-
-    .#{$namespace}-slider__tooltip {
-      bottom: auto;
-      left: calc(100% + 8px);
-      top: 50%;
-      transform: translateY(-50%);
-
-      &::after {
-        top: 50%;
-        left: auto;
-        right: 100%;
-        transform: translateY(-50%);
-        border: 4px solid transparent;
+    }
+  }
+
+  // ========== 刻度点 (放在轨道外面，位置基于 slider 根元素) ==========
+  @include e(stop) {
+    position: absolute;
+    top: 50%;
+    width: 2px;
+    height: 2px;
+    background: var(--cp-text-secondary);
+    opacity: 0.3;
+    transform: translate(-50%, -50%);
+    transition: opacity 0.2s ease;
+    z-index: 0; // 低于 thumb
+    pointer-events: none;
+  }
+
+  // ========== 刻度标记 ==========
+  @include e(marks) {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    right: 0;
+    margin-top: 8px;
+  }
+
+  @include e(mark) {
+    position: absolute;
+    transform: translateX(-50%);
+  }
+
+  @include e(mark-text) {
+    font-family: var(--cp-font-family-ui);
+    font-size: 11px;
+    color: var(--cp-text-secondary);
+    white-space: nowrap;
+  }
+
+  // ========== 垂直模式 ==========
+  &.is-vertical {
+    width: 32px;
+    height: 200px;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+
+    .#{$namespace}-slider__runway {
+      width: 6px;
+      height: 100%;
+      flex: 1;
+      clip-path: none;
+    }
+
+    .#{$namespace}-slider__bar {
+      top: auto;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      width: 100%;
+      height: auto;
+    }
+
+    .#{$namespace}-slider__thumb {
+      left: 50%;
+      transform: translate(-50%, 50%);
+
+      &:hover {
+        transform: translate(-50%, 50%) scale(1.1);
+      }
+
+      &.is-active {
+        transform: translate(-50%, 50%) scale(1.15);
+      }
+    }
+
+    .#{$namespace}-slider__tooltip {
+      bottom: auto;
+      left: calc(100% + 8px);
+      top: 50%;
+      transform: translateY(-50%);
+
+      &::after {
+        top: 50%;
+        left: auto;
+        right: 100%;
+        transform: translateY(-50%);
+        border: 4px solid transparent;
         border-right-color: var(--cp-slider-color);
-        border-top-color: transparent;
-      }
-    }
-
-    .#{$namespace}-slider__stop {
-      top: auto;
-      left: 50%;
-      // 垂直模式的 stop 使用 bottom 定位
-      transform: translate(-50%, 50%);
-    }
-
-    .#{$namespace}-slider__marks {
-      top: 0;
-      left: 100%;
-      right: auto;
-      bottom: 0;
-      margin-top: 0;
-      margin-left: 8px;
-    }
-
-    .#{$namespace}-slider__mark {
-      transform: translateY(50%);
-    }
-  }
-
-  // ========== 尺寸变体 ==========
-  @each $size, $values in $slider-sizes {
-    @include m($size) {
-      $track-height: map.get($values, 'track-height');
-      $thumb-size: map.get($values, 'thumb-size');
-      $clip-size: map.get($values, 'clip-size');
-
-      .#{$namespace}-slider__runway {
-        height: $track-height;
-        clip-path: polygon(
-          $clip-size 0,
-          100% 0,
-          100% calc(100% - #{$clip-size}),
-          calc(100% - #{$clip-size}) 100%,
-          0 100%,
-          0 $clip-size
-        );
-      }
-
-      .#{$namespace}-slider__thumb {
-        width: $thumb-size;
-        height: $thumb-size;
-        clip-path: polygon(
-          $clip-size 0,
-          100% 0,
-          100% calc(100% - #{$clip-size}),
-          calc(100% - #{$clip-size}) 100%,
-          0 100%,
-          0 $clip-size
-        );
-      }
-
-      &.is-vertical {
-        .#{$namespace}-slider__runway {
-          width: $track-height;
-          height: 100%;
-        }
-      }
-    }
-  }
-
-
-
-  // ========== 自定义尺寸 ==========
-  @include when(custom-size) {
-    .#{$namespace}-slider__runway {
-      height: var(--cp-slider-track-height);
-      clip-path: polygon(
-        var(--cp-slider-clip-size) 0,
-        100% 0,
-        100% calc(100% - var(--cp-slider-clip-size)),
-        calc(100% - var(--cp-slider-clip-size)) 100%,
-        0 100%,
-        0 var(--cp-slider-clip-size)
-      );
-    }
-
-    .#{$namespace}-slider__thumb {
-      width: var(--cp-slider-thumb-size);
-      height: var(--cp-slider-thumb-size);
-      clip-path: polygon(
-        var(--cp-slider-clip-size) 0,
-        100% 0,
-        100% calc(100% - var(--cp-slider-clip-size)),
-        calc(100% - var(--cp-slider-clip-size)) 100%,
-        0 100%,
-        0 var(--cp-slider-clip-size)
-      );
-    }
-
-    &.is-vertical {
-      .#{$namespace}-slider__runway {
-        width: var(--cp-slider-track-height);
-        height: 100%;
-      }
-    }
-  }
-
-  // ========== 形状变体 ==========
-  @include m(shape-no-clip) {
-    .#{$namespace}-slider__runway {
-      clip-path: none !important;
-    }
-
-    .#{$namespace}-slider__thumb {
-      clip-path: none !important;
-    }
-  }
-
-  @include m(shape-round) {
-    .#{$namespace}-slider__runway {
-      clip-path: none !important;
-      border-radius: 100px;
-    }
-
-    .#{$namespace}-slider__thumb {
-      clip-path: none !important;
-      border-radius: 50%;
-
-      &::before {
-        clip-path: none !important;
-        border-radius: 50%;
-      }
-    }
-  }
-
-  // ========== 禁用状态 ==========
-  @include when(disabled) {
-    cursor: not-allowed;
-    opacity: 0.5;
-    filter: grayscale(0.5);
-
-    @include e(thumb) {
-      cursor: not-allowed;
-
-      &:hover {
-        transform: translate(-50%, 0);
-        box-shadow: none;
-      }
-    }
-
-    @include when(vertical) {
-      @include e(thumb) {
-        &:hover {
-          transform: translate(0, 50%);
-        }
-      }
-    }
-  }
-
-  // ========== 拖动状态 ==========
-  @include when(dragging) {
-    // 拖动时禁用所有过渡，实现即时响应
-    .#{$namespace}-slider__bar {
-      transition: none;
-    }
-
-    .#{$namespace}-slider__thumb {
-      cursor: grabbing;
-      transition: none;
-    }
-  }
-
-  // ========== 自定义颜色 ==========
+        border-top-color: transparent;
+      }
+    }
+
+    .#{$namespace}-slider__stop {
+      top: auto;
+      left: 50%;
+      // 垂直模式的 stop 使用 bottom 定位
+      transform: translate(-50%, 50%);
+    }
+
+    .#{$namespace}-slider__marks {
+      top: 0;
+      left: 100%;
+      right: auto;
+      bottom: 0;
+      margin-top: 0;
+      margin-left: 8px;
+    }
+
+    .#{$namespace}-slider__mark {
+      transform: translateY(50%);
+    }
+  }
+
+  // ========== 尺寸变体 ==========
+  @each $size, $values in $slider-sizes {
+    @include m($size) {
+      $track-height: map.get($values, 'track-height');
+      $thumb-size: map.get($values, 'thumb-size');
+      $clip-size: map.get($values, 'clip-size');
+
+      .#{$namespace}-slider__runway {
+        height: $track-height;
+        clip-path: polygon(
+          $clip-size 0,
+          100% 0,
+          100% calc(100% - #{$clip-size}),
+          calc(100% - #{$clip-size}) 100%,
+          0 100%,
+          0 $clip-size
+        );
+      }
+
+      .#{$namespace}-slider__thumb {
+        width: $thumb-size;
+        height: $thumb-size;
+        clip-path: polygon(
+          $clip-size 0,
+          100% 0,
+          100% calc(100% - #{$clip-size}),
+          calc(100% - #{$clip-size}) 100%,
+          0 100%,
+          0 $clip-size
+        );
+      }
+
+      &.is-vertical {
+        .#{$namespace}-slider__runway {
+          width: $track-height;
+          height: 100%;
+        }
+      }
+    }
+  }
+
+
+
+  // ========== 自定义尺寸 ==========
+  @include when(custom-size) {
+    .#{$namespace}-slider__runway {
+      height: var(--cp-slider-track-height);
+      clip-path: polygon(
+        var(--cp-slider-clip-size) 0,
+        100% 0,
+        100% calc(100% - var(--cp-slider-clip-size)),
+        calc(100% - var(--cp-slider-clip-size)) 100%,
+        0 100%,
+        0 var(--cp-slider-clip-size)
+      );
+    }
+
+    .#{$namespace}-slider__thumb {
+      width: var(--cp-slider-thumb-size);
+      height: var(--cp-slider-thumb-size);
+      clip-path: polygon(
+        var(--cp-slider-clip-size) 0,
+        100% 0,
+        100% calc(100% - var(--cp-slider-clip-size)),
+        calc(100% - var(--cp-slider-clip-size)) 100%,
+        0 100%,
+        0 var(--cp-slider-clip-size)
+      );
+    }
+
+    &.is-vertical {
+      .#{$namespace}-slider__runway {
+        width: var(--cp-slider-track-height);
+        height: 100%;
+      }
+    }
+  }
+
+  // ========== 形状变体 ==========
+  @include m(shape-no-clip) {
+    .#{$namespace}-slider__runway {
+      clip-path: none !important;
+    }
+
+    .#{$namespace}-slider__thumb {
+      clip-path: none !important;
+    }
+  }
+
+  @include m(shape-round) {
+    .#{$namespace}-slider__runway {
+      clip-path: none !important;
+      border-radius: 100px;
+    }
+
+    .#{$namespace}-slider__thumb {
+      clip-path: none !important;
+      border-radius: 50%;
+
+      &::before {
+        clip-path: none !important;
+        border-radius: 50%;
+      }
+    }
+  }
+
+  // ========== 禁用状态 ==========
+  @include when(disabled) {
+    cursor: not-allowed;
+    opacity: 0.5;
+    filter: grayscale(0.5);
+
+    @include e(thumb) {
+      cursor: not-allowed;
+
+      &:hover {
+        transform: translate(-50%, 0);
+        box-shadow: none;
+      }
+    }
+
+    @include when(vertical) {
+      @include e(thumb) {
+        &:hover {
+          transform: translate(0, 50%);
+        }
+      }
+    }
+  }
+
+  // ========== 拖动状态 ==========
+  @include when(dragging) {
+    // 拖动时禁用所有过渡，实现即时响应
+    .#{$namespace}-slider__bar {
+      transition: none;
+    }
+
+    .#{$namespace}-slider__thumb {
+      cursor: grabbing;
+      transition: none;
+    }
+  }
+
+  // ========== 自定义颜色 ==========
   @include when(custom-color) {
     .#{$namespace}-slider__bar {
       background: var(--cp-slider-color);
@@ -467,14 +467,14 @@ $slider-sizes: (
         border-top-color: var(--cp-slider-color);
       }
     }
-
-    &.is-vertical {
-      .#{$namespace}-slider__tooltip {
+
+    &.is-vertical {
+      .#{$namespace}-slider__tooltip {
         &::after {
           border-right-color: var(--cp-slider-color);
           border-top-color: transparent;
         }
-      }
-    }
-  }
-}
+      }
+    }
+  }
+}