@mt-gloss/styles 0.0.3

package/src/lib/components/_slider.scss

@@ -0,0 +1,353 @@
+// ============================================
+// COMPONENT: SLIDER
+// ============================================
+
+@use '../tokens' as *;
+@use '../mixins' as *;
+
+.gloss-slider-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: $space-2;
+
+  &--disabled {
+    opacity: 0.6;
+  }
+}
+
+.gloss-slider {
+  position: relative;
+  display: flex;
+  align-items: center;
+  touch-action: none;
+  user-select: none;
+
+  // --- LABEL ---
+  &__label {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-size: $text-sm;
+    font-weight: 500;
+    color: $alias-text-primary;
+    margin-bottom: $space-1;
+  }
+
+  &__value-label {
+    font-weight: 400;
+    color: $alias-text-secondary;
+    font-feature-settings: 'tnum';
+  }
+
+  // --- TRACK ---
+  &__track {
+    position: relative;
+    flex: 1;
+    height: 6px;
+    background: $color-gray-200;
+    border-radius: $radius-full;
+    cursor: pointer;
+    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1);
+  }
+
+  // --- FILL ---
+  &__fill {
+    position: absolute;
+    height: 100%;
+    background: $alias-primary;
+    border-radius: $radius-full;
+    pointer-events: none;
+
+    // For single slider, starts from left
+    left: 0;
+  }
+
+  // --- THUMB ---
+  &__thumb {
+    position: absolute;
+    top: 50%;
+    width: 20px;
+    height: 20px;
+    background: $color-white;
+    border: 2px solid $alias-primary;
+    border-radius: 50%;
+    transform: translate(-50%, -50%);
+    cursor: grab;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.08);
+    transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
+    z-index: 2;
+
+    &:hover {
+      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15), 0 4px 12px rgba(0, 0, 0, 0.1);
+      transform: translate(-50%, -50%) scale(1.1);
+    }
+
+    &:focus-visible {
+      outline: none;
+      box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15), 0 4px 12px rgba(0, 0, 0, 0.1), 0 0 0 3px rgba(59, 130, 246, 0.4);
+    }
+
+    &:active,
+    &--active {
+      cursor: grabbing;
+      transform: translate(-50%, -50%) scale(1.15);
+    }
+  }
+
+  // --- TOOLTIP ---
+  &__tooltip {
+    position: absolute;
+    bottom: 100%;
+    left: 50%;
+    transform: translateX(-50%);
+    padding: $space-1 $space-2;
+    margin-bottom: $space-2;
+    background: $color-gray-800;
+    color: $color-white;
+    font-size: $text-xs;
+    font-weight: 500;
+    border-radius: $radius-sm;
+    white-space: nowrap;
+    pointer-events: none;
+    opacity: 0;
+    transition: opacity 0.2s ease;
+
+    &::after {
+      content: '';
+      position: absolute;
+      top: 100%;
+      left: 50%;
+      transform: translateX(-50%);
+      border: 4px solid transparent;
+      border-top-color: $color-gray-800;
+    }
+  }
+
+  &__thumb:hover &__tooltip,
+  &__thumb:focus-visible &__tooltip,
+  &--dragging &__tooltip {
+    opacity: 1;
+  }
+
+  // --- MARKS ---
+  &__marks {
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+  }
+
+  &__mark {
+    position: absolute;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    transform: translateX(-50%);
+    top: 50%;
+  }
+
+  &__mark-dot {
+    width: 4px;
+    height: 4px;
+    background: $color-gray-400;
+    border-radius: 50%;
+    transform: translateY(-50%);
+    transition: background-color 0.2s ease;
+  }
+
+  &__mark--active &__mark-dot {
+    background: $alias-primary;
+  }
+
+  &__mark-label {
+    position: absolute;
+    top: 16px;
+    font-size: $text-xs;
+    color: $alias-text-secondary;
+    white-space: nowrap;
+  }
+
+  // --- HELPER TEXT ---
+  &__helper {
+    display: flex;
+    align-items: center;
+    gap: $space-1;
+    font-size: $text-sm;
+    color: $alias-text-secondary;
+
+    &--error {
+      color: $alias-text-error;
+
+      svg {
+        color: $color-red-500;
+      }
+    }
+  }
+
+  // --- SIZE VARIANTS ---
+  &--sm {
+    .gloss-slider__track {
+      height: 4px;
+    }
+
+    .gloss-slider__thumb {
+      width: 16px;
+      height: 16px;
+    }
+
+    .gloss-slider__mark-dot {
+      width: 3px;
+      height: 3px;
+    }
+  }
+
+  &--lg {
+    .gloss-slider__track {
+      height: 8px;
+    }
+
+    .gloss-slider__thumb {
+      width: 24px;
+      height: 24px;
+      border-width: 3px;
+    }
+
+    .gloss-slider__mark-dot {
+      width: 5px;
+      height: 5px;
+    }
+  }
+
+  // --- VERTICAL ORIENTATION ---
+  &--vertical {
+    flex-direction: column;
+    height: 200px;
+    width: auto;
+
+    .gloss-slider__track {
+      width: 6px;
+      height: 100%;
+      flex: 1;
+    }
+
+    .gloss-slider__fill {
+      width: 100%;
+      height: auto;
+      bottom: 0;
+      left: auto;
+    }
+
+    .gloss-slider__thumb {
+      left: 50%;
+      top: auto;
+      transform: translate(-50%, 50%);
+
+      &:hover {
+        transform: translate(-50%, 50%) scale(1.1);
+      }
+
+      &:active,
+      &--active {
+        transform: translate(-50%, 50%) scale(1.15);
+      }
+    }
+
+    .gloss-slider__mark {
+      left: 50%;
+      top: auto;
+      transform: translate(-50%, 50%);
+    }
+
+    .gloss-slider__mark-label {
+      top: auto;
+      left: 20px;
+    }
+
+    .gloss-slider__tooltip {
+      bottom: auto;
+      left: 100%;
+      top: 50%;
+      transform: translateY(-50%);
+      margin-bottom: 0;
+      margin-left: $space-2;
+
+      &::after {
+        top: 50%;
+        left: -4px;
+        transform: translateY(-50%);
+        border: 4px solid transparent;
+        border-right-color: $color-gray-800;
+        border-top-color: transparent;
+      }
+    }
+
+    &.gloss-slider--sm .gloss-slider__track {
+      width: 4px;
+    }
+
+    &.gloss-slider--lg .gloss-slider__track {
+      width: 8px;
+    }
+  }
+
+  // --- RANGE SLIDER ---
+  &--range {
+    .gloss-slider__fill {
+      left: auto; // Overridden by inline styles
+    }
+  }
+
+  // --- STATUS VARIANTS ---
+  &--success {
+    .gloss-slider__fill {
+      background: $color-green-500;
+    }
+
+    .gloss-slider__thumb {
+      border-color: $color-green-500;
+    }
+
+    .gloss-slider__mark--active .gloss-slider__mark-dot {
+      background: $color-green-500;
+    }
+  }
+
+  &--error {
+    .gloss-slider__fill {
+      background: $color-red-500;
+    }
+
+    .gloss-slider__thumb {
+      border-color: $color-red-500;
+    }
+
+    .gloss-slider__mark--active .gloss-slider__mark-dot {
+      background: $color-red-500;
+    }
+  }
+
+  // --- DISABLED STATE ---
+  &--disabled {
+    pointer-events: none;
+
+    .gloss-slider__track {
+      cursor: not-allowed;
+    }
+
+    .gloss-slider__thumb {
+      cursor: not-allowed;
+      border-color: $color-gray-300;
+      box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
+    }
+
+    .gloss-slider__fill {
+      background: $color-gray-300;
+    }
+  }
+
+  // --- DRAGGING STATE ---
+  &--dragging {
+    .gloss-slider__thumb {
+      cursor: grabbing;
+    }
+  }
+}