quasar-framework/src/vue-components/range/range.ios.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        ?= 1px
$range-mark-height         ?= 10px

$range-handle-size         ?= 25px
$range-handle-radius       ?= 50%
$range-handle-box-shadow   ?= 0 1px 3px 1px rgba(0, 0, 0, .4)


.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 1px
  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 0
  padding 8px 0
  opacity 0
  text-align center
  transform translateY(0) scale(.1)
  transition all .3s ease
  width $range-handle-size
  height ($range-handle-size / 2)
  font-size ($range-handle-size / 2)
  line-height ($range-handle-size / 2.1)
  color white
  background black
  border-radius $generic-border-radius

.quasar-range-handle
  position absolute
  top 50%
  transform translate3d(-50%, -50%, 0)
  transform-origin center
  transition all .3s ease
  width $range-handle-size
  height $range-handle-size
  border-radius $range-handle-radius
  background white
  box-shadow $range-handle-box-shadow
  box-sizing content-box
  &.dragging
    transform translate3d(-50%, -50%, 0)
    transition opacity .3s ease, transform .3s ease
    .quasar-range-label
      opacity 1
      transform translateY(-50%)

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

  for $name, $color in $colors
    &.{$name} .quasar-range-track.active-track
      background $color