@allxsmith/bestax-bulma 2.6.2 → 3.0.1

package/src/scss/form/_slider.scss

@@ -0,0 +1,630 @@
+// Slider Component Styles
+// A range slider input with ticks, range mode, vertical orientation
+// Follows Bulma v1 CSS variable convention (see _checkbox.scss)
+
+@use "bulma/sass/utilities/initial-variables" as iv;
+@use "bulma/sass/utilities/css-variables" as cv;
+
+// Slider-specific SCSS variables
+$slider-track-height: 0.5rem !default;
+$slider-track-height-small: 0.375rem !default;
+$slider-track-height-medium: 0.625rem !default;
+$slider-track-height-large: 0.75rem !default;
+$slider-thumb-size: 1.25rem !default;
+$slider-thumb-size-small: 1rem !default;
+$slider-thumb-size-medium: 1.5rem !default;
+$slider-thumb-size-large: 1.75rem !default;
+$slider-track-color: cv.getVar("border") !default;
+$slider-fill-color: cv.getVar("primary") !default;
+$slider-thumb-color: cv.getVar("scheme-main") !default;
+$slider-thumb-border: cv.getVar("border") !default;
+$slider-thumb-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !default;
+$slider-radius: cv.getVar("radius") !default;
+$slider-disabled-opacity: 0.5 !default;
+$slider-transition-duration: cv.getVar("duration") !default;
+// Tooltip colors match the slider fill color
+$slider-output-background: cv.getVar("slider-fill-color") !default;
+$slider-output-color: cv.getVar("scheme-main") !default;
+$slider-output-font-size: cv.getVar("size-small") !default;
+$slider-output-font-weight: cv.getVar("weight-medium") !default;
+// Tick variables
+$slider-tick-width: 2px !default;
+$slider-tick-height: 1rem !default;
+$slider-tick-color: cv.getVar("grey-light") !default;
+$slider-tick-opacity: 0.5 !default;
+$slider-tick-label-font-size: 0.75rem !default;
+$slider-tick-label-color: cv.getVar("text-light") !default;
+// Vertical
+$slider-vertical-height: 200px !default;
+
+// Register CSS custom properties
+.#{iv.$class-prefix}slider {
+  @include cv.register-vars(
+    (
+      "slider-track-height": #{$slider-track-height},
+      "slider-track-height-small": #{$slider-track-height-small},
+      "slider-track-height-medium": #{$slider-track-height-medium},
+      "slider-track-height-large": #{$slider-track-height-large},
+      "slider-thumb-size": #{$slider-thumb-size},
+      "slider-thumb-size-small": #{$slider-thumb-size-small},
+      "slider-thumb-size-medium": #{$slider-thumb-size-medium},
+      "slider-thumb-size-large": #{$slider-thumb-size-large},
+      "slider-track-color": #{$slider-track-color},
+      "slider-fill-color": #{$slider-fill-color},
+      "slider-thumb-color": #{$slider-thumb-color},
+      "slider-thumb-border": #{$slider-thumb-border},
+      "slider-thumb-shadow": #{$slider-thumb-shadow},
+      "slider-radius": #{$slider-radius},
+      "slider-disabled-opacity": #{$slider-disabled-opacity},
+      "slider-transition-duration": #{$slider-transition-duration},
+      "slider-output-background": #{$slider-output-background},
+      "slider-output-color": #{$slider-output-color},
+      "slider-output-font-size": #{$slider-output-font-size},
+      "slider-output-font-weight": #{$slider-output-font-weight},
+      "slider-tick-width": #{$slider-tick-width},
+      "slider-tick-height": #{$slider-tick-height},
+      "slider-tick-color": #{$slider-tick-color},
+      "slider-tick-opacity": #{$slider-tick-opacity},
+      "slider-tick-label-font-size": #{$slider-tick-label-font-size},
+      "slider-tick-label-color": #{$slider-tick-label-color},
+      "slider-vertical-height": #{$slider-vertical-height},
+    )
+  );
+}
+
+// Main slider wrapper
+.#{iv.$class-prefix}slider {
+  position: relative;
+  width: 100%;
+  padding: 0.5rem 0;
+}
+
+// Range input
+.#{iv.$class-prefix}slider-input {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 100%;
+  height: cv.getVar("slider-track-height");
+  background: linear-gradient(
+    to right,
+    cv.getVar("slider-fill-color") 0%,
+    cv.getVar("slider-fill-color") var(--slider-progress, 0%),
+    cv.getVar("slider-track-color") var(--slider-progress, 0%),
+    cv.getVar("slider-track-color") 100%
+  );
+  border-radius: cv.getVar("slider-radius");
+  outline: none;
+  cursor: pointer;
+  transition-property: background;
+  transition-duration: cv.getVar("slider-transition-duration");
+  transition-timing-function: ease;
+
+  // Webkit thumb
+  &::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    appearance: none;
+    width: cv.getVar("slider-thumb-size");
+    height: cv.getVar("slider-thumb-size");
+    background: cv.getVar("slider-thumb-color");
+    border: 2px solid cv.getVar("slider-thumb-border");
+    border-radius: 50%;
+    cursor: grab;
+    box-shadow: cv.getVar("slider-thumb-shadow");
+    transition-property: transform, border-color, box-shadow;
+    transition-duration: cv.getVar("slider-transition-duration");
+    transition-timing-function: ease;
+
+    &:hover {
+      transform: scale(1.1);
+      border-color: cv.getVar("slider-fill-color");
+    }
+
+    &:active {
+      cursor: grabbing;
+      transform: scale(1.15);
+    }
+  }
+
+  // Firefox thumb
+  &::-moz-range-thumb {
+    width: cv.getVar("slider-thumb-size");
+    height: cv.getVar("slider-thumb-size");
+    background: cv.getVar("slider-thumb-color");
+    border: 2px solid cv.getVar("slider-thumb-border");
+    border-radius: 50%;
+    cursor: grab;
+    box-shadow: cv.getVar("slider-thumb-shadow");
+    transition-property: transform, border-color, box-shadow;
+    transition-duration: cv.getVar("slider-transition-duration");
+    transition-timing-function: ease;
+
+    &:hover {
+      transform: scale(1.1);
+      border-color: cv.getVar("slider-fill-color");
+    }
+
+    &:active {
+      cursor: grabbing;
+      transform: scale(1.15);
+    }
+  }
+
+  // Firefox track
+  &::-moz-range-track {
+    background: transparent;
+    border: none;
+  }
+
+  // Focus styles
+  &:focus {
+    outline: none;
+
+    &::-webkit-slider-thumb {
+      border-color: cv.getVar("slider-fill-color");
+      box-shadow: 0 0 0 3px hsla(cv.getVar("primary-h"), cv.getVar("primary-s"), 50%, 0.3);
+    }
+
+    &::-moz-range-thumb {
+      border-color: cv.getVar("slider-fill-color");
+    }
+  }
+
+  // Disabled
+  .#{iv.$class-prefix}slider.#{iv.$class-prefix}is-disabled & {
+    cursor: not-allowed;
+    opacity: cv.getVar("slider-disabled-opacity");
+
+    &::-webkit-slider-thumb {
+      cursor: not-allowed;
+
+      &:hover {
+        transform: none;
+      }
+    }
+
+    &::-moz-range-thumb {
+      cursor: not-allowed;
+
+      &:hover {
+        transform: none;
+      }
+    }
+  }
+}
+
+// Output tooltip
+.#{iv.$class-prefix}slider-output {
+  position: absolute;
+  top: -2rem;
+  // Default transform; overridden by inline style when nudge is applied
+  transform: translateX(-50%);
+  padding: 0.25rem 0.5rem;
+  font-size: cv.getVar("slider-output-font-size");
+  font-weight: cv.getVar("slider-output-font-weight");
+  background: cv.getVar("slider-output-background");
+  color: cv.getVar("slider-output-color");
+  border-radius: cv.getVar("slider-radius");
+  white-space: nowrap;
+  pointer-events: none;
+  opacity: 0;
+  visibility: hidden;
+  transition-property: opacity, visibility;
+  transition-duration: cv.getVar("slider-transition-duration");
+  transition-timing-function: ease;
+
+  &::after {
+    content: "";
+    position: absolute;
+    top: 100%;
+    // Uses CSS var set by inline style; falls back to 50% (centered).
+    // Clamp so the arrow stays within the tooltip (5px = arrow half-width).
+    left: clamp(5px, var(--slider-output-arrow-offset, 50%), calc(100% - 5px));
+    transform: translateX(-50%);
+    border: 5px solid transparent;
+    border-top-color: cv.getVar("slider-output-background");
+  }
+
+  &.#{iv.$class-prefix}is-visible {
+    opacity: 1;
+    visibility: visible;
+  }
+
+  // Flipped: tooltip below the thumb when no space above
+  &.#{iv.$class-prefix}is-flipped {
+    top: auto;
+    bottom: -2rem;
+
+    &::after {
+      top: auto;
+      bottom: 100%;
+      border-top-color: transparent;
+      border-bottom-color: cv.getVar("slider-output-background");
+    }
+  }
+}
+
+// Tooltip always visible mode
+.#{iv.$class-prefix}slider.#{iv.$class-prefix}has-output-always {
+  .#{iv.$class-prefix}slider-output {
+    opacity: 1;
+    visibility: visible;
+  }
+}
+
+// --- Ticks ---
+// We overlay the ticks on the input by matching its position exactly.
+// The input is the first child in flow; ticks overlay it via the same
+// padding offset, then each tick centers itself on the track midpoint.
+.#{iv.$class-prefix}slider-ticks {
+  position: absolute;
+  left: 0;
+  right: 0;
+  // Match the input's track center: top padding + half thumb size + half track height.
+  top: calc(0.5rem + cv.getVar("slider-thumb-size") / 2 + cv.getVar("slider-track-height") / 2);
+  height: 0;
+  pointer-events: none;
+}
+
+.#{iv.$class-prefix}slider-tick {
+  position: absolute;
+  transform: translateX(-50%);
+  width: cv.getVar("slider-tick-width");
+  height: cv.getVar("slider-tick-height");
+  background: cv.getVar("slider-tick-color");
+  opacity: cv.getVar("slider-tick-opacity");
+  top: calc(-1 * cv.getVar("slider-tick-height") / 2);
+
+  // Hide the tick line at endpoints but keep labels visible
+  &.#{iv.$class-prefix}is-endpoint {
+    background: transparent;
+  }
+}
+
+.#{iv.$class-prefix}slider-tick-label {
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  transform: translateX(-50%);
+  margin-top: 4px;
+  font-size: cv.getVar("slider-tick-label-font-size");
+  color: cv.getVar("slider-tick-label-color");
+  white-space: nowrap;
+  opacity: 1;
+}
+
+// Extra padding when tick labels are present
+.#{iv.$class-prefix}slider.#{iv.$class-prefix}has-tick-labels {
+  padding-bottom: 1.5rem;
+}
+
+// --- Range mode ---
+.#{iv.$class-prefix}slider.#{iv.$class-prefix}is-range {
+  position: relative;
+
+  .#{iv.$class-prefix}slider-track {
+    position: absolute;
+    top: 50%;
+    left: 0;
+    right: 0;
+    height: cv.getVar("slider-track-height");
+    transform: translateY(-50%);
+    border-radius: cv.getVar("slider-radius");
+    background: linear-gradient(
+      to right,
+      cv.getVar("slider-track-color") 0%,
+      cv.getVar("slider-track-color") var(--slider-progress-low, 0%),
+      cv.getVar("slider-fill-color") var(--slider-progress-low, 0%),
+      cv.getVar("slider-fill-color") var(--slider-progress-high, 100%),
+      cv.getVar("slider-track-color") var(--slider-progress-high, 100%),
+      cv.getVar("slider-track-color") 100%
+    );
+    pointer-events: none;
+  }
+
+  .#{iv.$class-prefix}slider-input {
+    position: absolute;
+    top: 50%;
+    left: 0;
+    width: 100%;
+    height: cv.getVar("slider-track-height");
+    transform: translateY(-50%);
+    background: transparent;
+    pointer-events: none;
+    margin: 0;
+    padding: 0;
+
+    &::-webkit-slider-thumb {
+      pointer-events: auto;
+    }
+
+    &::-moz-range-thumb {
+      pointer-events: auto;
+    }
+  }
+
+  // Ensure the wrapper has enough height for thumbs
+  min-height: cv.getVar("slider-thumb-size");
+}
+
+// --- Vertical orientation ---
+.#{iv.$class-prefix}slider.#{iv.$class-prefix}is-vertical {
+  width: auto;
+  height: cv.getVar("slider-vertical-height");
+  display: inline-flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 0 0.5rem;
+
+  .#{iv.$class-prefix}slider-input {
+    writing-mode: vertical-lr;
+    direction: rtl;
+    height: 100%;
+    width: cv.getVar("slider-track-height");
+    background: linear-gradient(
+      to top,
+      cv.getVar("slider-fill-color") 0%,
+      cv.getVar("slider-fill-color") var(--slider-progress, 0%),
+      cv.getVar("slider-track-color") var(--slider-progress, 0%),
+      cv.getVar("slider-track-color") 100%
+    );
+  }
+
+  // Vertical output tooltip — positioned via inline left/right style
+  .#{iv.$class-prefix}slider-output {
+    top: auto;
+    transform: translateY(50%);
+    margin-left: 0;
+
+    // Arrow pointing left (tooltip to the right of thumb)
+    &::after {
+      top: 50%;
+      left: auto;
+      right: 100%;
+      transform: translateY(-50%);
+      border: 5px solid transparent;
+      border-right-color: cv.getVar("slider-output-background");
+      border-top-color: transparent;
+    }
+
+    // Flipped to left side when no space on the right
+    &.#{iv.$class-prefix}is-flipped-left {
+      &::after {
+        right: auto;
+        left: 100%;
+        border-right-color: transparent;
+        border-left-color: cv.getVar("slider-output-background");
+      }
+    }
+  }
+
+  // Vertical ticks
+  .#{iv.$class-prefix}slider-ticks {
+    top: 0;
+    bottom: 0;
+    left: 50%;
+    right: auto;
+    width: 0;
+    height: auto;
+  }
+
+  .#{iv.$class-prefix}slider-tick {
+    transform: translateY(50%);
+    top: auto;
+    // Swap dimensions for vertical: width becomes height, height becomes width
+    width: cv.getVar("slider-tick-height");
+    height: cv.getVar("slider-tick-width");
+    left: calc(-1 * cv.getVar("slider-tick-height") / 2);
+  }
+
+  .#{iv.$class-prefix}slider-tick-label {
+    top: auto;
+    left: calc(cv.getVar("slider-tick-height") / 2 + 4px);
+    transform: translateY(50%);
+  }
+
+  // Vertical range
+  &.#{iv.$class-prefix}is-range {
+    .#{iv.$class-prefix}slider-track {
+      top: 0;
+      bottom: 0;
+      left: 50%;
+      right: auto;
+      width: cv.getVar("slider-track-height");
+      height: 100%;
+      transform: translateX(-50%);
+      background: linear-gradient(
+        to top,
+        cv.getVar("slider-track-color") 0%,
+        cv.getVar("slider-track-color") var(--slider-progress-low, 0%),
+        cv.getVar("slider-fill-color") var(--slider-progress-low, 0%),
+        cv.getVar("slider-fill-color") var(--slider-progress-high, 100%),
+        cv.getVar("slider-track-color") var(--slider-progress-high, 100%),
+        cv.getVar("slider-track-color") 100%
+      );
+    }
+
+    .#{iv.$class-prefix}slider-input {
+      writing-mode: vertical-lr;
+      direction: rtl;
+      height: 100%;
+      width: cv.getVar("slider-track-height");
+      top: 0;
+      left: 50%;
+      transform: translateX(-50%);
+    }
+  }
+}
+
+// Sizes
+.#{iv.$class-prefix}slider.#{iv.$class-prefix}is-small {
+  .#{iv.$class-prefix}slider-input {
+    height: cv.getVar("slider-track-height-small");
+
+    &::-webkit-slider-thumb {
+      width: cv.getVar("slider-thumb-size-small");
+      height: cv.getVar("slider-thumb-size-small");
+    }
+
+    &::-moz-range-thumb {
+      width: cv.getVar("slider-thumb-size-small");
+      height: cv.getVar("slider-thumb-size-small");
+    }
+  }
+}
+
+.#{iv.$class-prefix}slider.#{iv.$class-prefix}is-medium {
+  .#{iv.$class-prefix}slider-input {
+    height: cv.getVar("slider-track-height-medium");
+
+    &::-webkit-slider-thumb {
+      width: cv.getVar("slider-thumb-size-medium");
+      height: cv.getVar("slider-thumb-size-medium");
+    }
+
+    &::-moz-range-thumb {
+      width: cv.getVar("slider-thumb-size-medium");
+      height: cv.getVar("slider-thumb-size-medium");
+    }
+  }
+}
+
+.#{iv.$class-prefix}slider.#{iv.$class-prefix}is-large {
+  .#{iv.$class-prefix}slider-input {
+    height: cv.getVar("slider-track-height-large");
+
+    &::-webkit-slider-thumb {
+      width: cv.getVar("slider-thumb-size-large");
+      height: cv.getVar("slider-thumb-size-large");
+    }
+
+    &::-moz-range-thumb {
+      width: cv.getVar("slider-thumb-size-large");
+      height: cv.getVar("slider-thumb-size-large");
+    }
+  }
+}
+
+// Color variants
+@each $name in "primary", "link", "info", "success", "warning", "danger" {
+  .#{iv.$class-prefix}slider.#{iv.$class-prefix}is-#{$name} {
+    @include cv.register-vars(
+      (
+        "slider-fill-color": #{cv.getVar($name)},
+      )
+    );
+  }
+}
+
+// Rounded track
+.#{iv.$class-prefix}slider.#{iv.$class-prefix}is-rounded .#{iv.$class-prefix}slider-input {
+  border-radius: cv.getVar("radius-rounded");
+}
+
+// Circle thumb (more prominent)
+.#{iv.$class-prefix}slider.#{iv.$class-prefix}is-circle {
+  .#{iv.$class-prefix}slider-input::-webkit-slider-thumb {
+    border-radius: 50%;
+    width: calc(cv.getVar("slider-thumb-size") * 1.2);
+    height: calc(cv.getVar("slider-thumb-size") * 1.2);
+  }
+
+  .#{iv.$class-prefix}slider-input::-moz-range-thumb {
+    border-radius: 50%;
+    width: calc(cv.getVar("slider-thumb-size") * 1.2);
+    height: calc(cv.getVar("slider-thumb-size") * 1.2);
+  }
+
+  &.#{iv.$class-prefix}is-small .#{iv.$class-prefix}slider-input {
+    &::-webkit-slider-thumb,
+    &::-moz-range-thumb {
+      width: calc(cv.getVar("slider-thumb-size-small") * 1.2);
+      height: calc(cv.getVar("slider-thumb-size-small") * 1.2);
+    }
+  }
+
+  &.#{iv.$class-prefix}is-medium .#{iv.$class-prefix}slider-input {
+    &::-webkit-slider-thumb,
+    &::-moz-range-thumb {
+      width: calc(cv.getVar("slider-thumb-size-medium") * 1.2);
+      height: calc(cv.getVar("slider-thumb-size-medium") * 1.2);
+    }
+  }
+
+  &.#{iv.$class-prefix}is-large .#{iv.$class-prefix}slider-input {
+    &::-webkit-slider-thumb,
+    &::-moz-range-thumb {
+      width: calc(cv.getVar("slider-thumb-size-large") * 1.2);
+      height: calc(cv.getVar("slider-thumb-size-large") * 1.2);
+    }
+  }
+}
+
+// High Contrast Mode support
+@media (forced-colors: active) {
+  .#{iv.$class-prefix}slider-input {
+    &::-webkit-slider-thumb {
+      background: ButtonText;
+      border-color: ButtonText;
+    }
+
+    &::-moz-range-thumb {
+      background: ButtonText;
+      border-color: ButtonText;
+    }
+
+    &:focus::-webkit-slider-thumb {
+      border-color: Highlight;
+    }
+
+    &:focus::-moz-range-thumb {
+      border-color: Highlight;
+    }
+  }
+
+  .#{iv.$class-prefix}slider.#{iv.$class-prefix}is-disabled .#{iv.$class-prefix}slider-input {
+    &::-webkit-slider-thumb {
+      background: GrayText;
+      border-color: GrayText;
+    }
+
+    &::-moz-range-thumb {
+      background: GrayText;
+      border-color: GrayText;
+    }
+  }
+
+  .#{iv.$class-prefix}slider-tick {
+    background: ButtonText;
+  }
+
+  .#{iv.$class-prefix}slider-tick-label {
+    color: ButtonText;
+  }
+
+  .#{iv.$class-prefix}slider.#{iv.$class-prefix}is-range .#{iv.$class-prefix}slider-track {
+    forced-color-adjust: none;
+  }
+}
+
+// Reduced motion
+@media (prefers-reduced-motion: reduce) {
+  .#{iv.$class-prefix}slider-input {
+    transition: none;
+
+    &::-webkit-slider-thumb {
+      transition: none;
+    }
+
+    &::-moz-range-thumb {
+      transition: none;
+    }
+  }
+
+  .#{iv.$class-prefix}slider-output {
+    transition: none;
+  }
+
+  .#{iv.$class-prefix}slider-tick {
+    transition: none;
+  }
+}