sce-component/slider/slider.ios.styl

$slider-height              = 28px
$slider-track-height        = 2px
$slider-mark-height         = 10px
$slider-handle-size         = 22px
$slider-label-transform     = translateX(-50%) translateY(-139%) scale(1)

.s-slider-track, .s-slider-mark
  opacity .4
  background currentColor

.s-slider-track
  position absolute
  top 50%
  left 0
  transform translateY(-50%)
  height $slider-track-height
  width 100%
  &:not(.dragging)
    transition all .3s ease
  &.active-track
    opacity 1
  &.track-draggable.dragging
    height ($slider-track-height * 2)
    transition height .3s ease
  &.handle-at-minimum
    background transparent

.s-slider-mark
  position absolute
  top 50%
  height $slider-mark-height
  width 2px
  transform translateX(-50%) translateY(-50%)

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

.s-slider-label
  top 0
  left ($slider-handle-size / 2)
  opacity 0
  transform translateX(-50%) translateY(0) scale(0)
  transition all .2s
  padding 5px 9px
  &.label-always
    opacity 1
    transform $slider-label-transform

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

.s-slider-ring
  position absolute
  top -50%
  left -50%
  width 200%
  height 200%
  border-radius inherit
  pointer-events none
  opacity 0
  transform scale(0)
  transition all .2s ease-in
  background currentColor

.s-slider:not(.disabled)
  &:focus, &:hover
    .s-slider-ring
      opacity .4
      transform scale(1)

.s-slider.disabled
  .s-slider-handle
    border 2px solid white
  .s-slider-handle.handle-at-minimum
    background currentColor

.s-slider
  height $slider-height
  width 100%
  color $primary
  cursor pointer

  &.label-always, &.with-padding
    padding 55px 0 5px
    height 85px

  &.has-error
    color $negative