quasar/src/components/slider/QSlider.styl

Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time

.q-slider
  position: relative
  color: $primary
  color: var(--q-color-primary)
  outline: 0

  &--h
    width: 100%
    height: 40px
  &--v
    width: 40px
    height: 200px

  &__track-container
    background: rgba(0,0,0,.26)

    &--h
      top: 50%
      margin-top: -1px
      width: 100%
      height: 2px
    &--v
      left: 50%
      margin-left: -1px
      height: 100%
      width: 2px

  &__track
    background: currentColor

    &--h
      will-change: width, left
      top: 0
      bottom: 0
    &--v
      will-change: height, top
      left: 0
      right: 0

  &__track-markers
    color: #000

    &--h
      background-image: repeating-linear-gradient(to right, currentColor, currentColor 2px, rgba(255,255,255,0) 0, rgba(255,255,255,0))
    &--v
      background-image: repeating-linear-gradient(to top, currentColor, currentColor 2px, rgba(255,255,255,0) 0, rgba(255,255,255,0))

    &:after
      content: ''
      position: absolute
      right: 0
      top: 0
      bottom: 0
      height: 2px
      width: 2px
      background: currentColor

  &__thumb-container
    width: 20px
    height: 20px
    outline: 0

    &--h
      top: 50%
      margin-top: -10px
      transform: translateX(-10px) /* rtl:ignore */
      will-change: left
    &--v
      left: 50%
      margin-left: -10px
      transform: translateY(-10px)
      will-change: top

  &__thumb
    top: 0
    left: 0
    transform: scale(1)
    transition: transform .18s ease-out, fill .18s ease-out, stroke .18s ease-out
    stroke-width: 3.5
    stroke: currentColor

    path
      stroke: currentColor
      fill: currentColor

  &__focus-ring
    width: 20px
    height: 20px
    transition: transform 266.67ms ease-out, opacity 266.67ms ease-out, background-color 266.67ms ease-out
    border-radius: 50%
    opacity: 0
    transition-delay: .14s

  &__arrow
    position: absolute
    width: 0
    height: 0
    transform-origin: 50% 50%
    transition: transform 100ms ease-out

    &--h
      top: 19px
      left: 4px
      border-top: 6px solid currentColor
      border-left: 6px solid transparent
      border-right: 6px solid transparent
      transform: scale(0) translateY(0)
    &--v
      top: 4px
      left: 15px
      border-top: 6px solid transparent
      border-bottom: 6px solid transparent
      border-right: 6px solid currentColor
      transform: scale(0) translateX(-20px)

  &__pin
    transition: transform 100ms ease-out
    z-index: 1
    white-space: nowrap

    &--h
      bottom: 0
      right: 0
      transform: scale(0) translateY(0)
      will-change: left
    &--v
      top: 50%
      left: 20px
      height: 0
      transform: scale(0) translateX(-20px)
      will-change: top
      transform-origin: left center

    &-text-container
      min-height: 25px
      padding: 2px 8px
      border-radius: $generic-border-radius
      background: currentColor
      position: relative
      text-align: center

      &--h
        right: -50%
      &--v
        transform: translateY(-50%)

    &-text
      color: #fff
      font-size: 12px

  &--editable
    cursor: grab

  &--no-value
    .q-slider__thumb, .q-slider__track
      visibility: hidden

  &--focus
    .q-slider__thumb
      transform: scale(1)

  &--focus, body.desktop &.q-slider--editable:hover
    .q-slider__focus-ring
      background: currentColor
      transform: scale3d(1.55, 1.55, 1)
      opacity: .25
    .q-slider__thumb, .q-slider__track
      visibility: visible

  &--inactive
    .q-slider__thumb-container
      &--h
        transition: left .28s, right .28s
      &--v
        transition: top .28s, bottom .28s

    .q-slider__track
      &--h
        transition: width .28s, left .28s, right .28s
      &--v
        transition: height .28s, top .28s, bottom .28s

  &--active
    cursor: grabbing

    .q-slider__thumb
      transform: scale(1.5)

    .q-slider__focus-ring, &.q-slider--label .q-slider__thumb
      transform: scale(0) !important

  body.desktop &.q-slider--enabled:hover
    .q-slider__pin,
    .q-slider__arrow
      &--h
        transform: scale(1) translateY(-25px)
      &--v
        transform: scale(1) translateX(5px)

  &--label
    &.q-slider--active, .q-slider--focus, &.q-slider--label-always
      .q-slider__pin,
      .q-slider__arrow
        &--h
          transform: scale(1) translateY(-25px)
        &--v
          transform: scale(1) translateX(5px)

  &--dark
    .q-slider__track-container
      background: rgba(#fff, .3)
    .q-slider__track-markers
      color: #fff

  &--reversed
    .q-slider__thumb-container
      &--h
        transform: translateX(10px) /* rtl:ignore */
      &--v
        transform: translateY(10px)

  &--dense
    &--h
      height: 20px
    &--v
      width: 20px