quasar-framework/src/vue-components/range/range.mat.styl

Simultaneously build desktop/mobile SPA websites & phone/tablet apps with VueJS

$range-height              ?= 36px
$range-color               ?= $grey-4
$range-active-color        ?= $form-active-color

$range-track-height        ?= 2px
$range-mark-height         ?= 10px

$range-handle-size         ?= 20px
$range-handle-radius       ?= 50%


.quasar-range-track
  position absolute
  top 50%
  left 0
  transform translateY(-50%)
  height $range-track-height
  width 100%
  background $range-color
  transition all .3s ease
  &.active-track
    background $range-active-color
  &.handle-at-minimum
    background transparent

.quasar-range-mark
  position absolute
  top 50%
  height $range-mark-height
  width 2px
  background $range-color
  transform translateX(-50%) translateY(-50%)

.quasar-range-handle-container
  position relative
  height 100%
  margin-left ($range-handle-size / 2)
  margin-right ($range-handle-size / 2)

.quasar-range-label
  position relative
  top (- $range-handle-size / 1.5)
  left -25%
  padding 8px 0
  opacity 0
  text-align center
  transform translateY(0) scale(.1)
  transition all .3s ease
  width (1.5 * $range-handle-size)
  height (1.5 * $range-handle-size)
  font-size ($range-handle-size / 2)
  line-height ($range-handle-size / 3)
  color white
  &:before
    content ''
    z-index -1
    position absolute
    top -5px
    left 0
    width (1.5 * $range-handle-size)
    height (1.5 * $range-handle-size)
    background $range-active-color
    border-radius 50% 50% 50% 0
    transform rotate(-45deg)

.quasar-range-handle
  position absolute
  top 50%
  transform translate3d(-50%, -50%, 0) scale(.67)
  transform-origin center
  transition all .3s ease
  width $range-handle-size
  height $range-handle-size
  border-radius $range-handle-radius
  background $range-active-color
  box-sizing content-box
  &.dragging
    transform translate3d(-50%, -50%, 0) scale(1)
    transition opacity .3s ease, transform .3s ease
    .quasar-range-label
      opacity 1
      transform translateY(-50%) scale(1)
  &.handle-at-minimum
    background white
    border 2px solid $range-color
    .quasar-range-label
      color black
      &:before
        background $range-color

.quasar-range
  height $range-height
  width 100%
  cursor pointer

  for $name, $color in $colors
    &.{$name}
      .quasar-range-track.active-track,
      .quasar-range-handle:not(.handle-at-minimum)
        background $color
        .quasar-range-label
          &:before
            background $color
          if luminosity($color) > .3
            color black