zhdk/madek

/**
 * ## ui-slider `.ui-slider`
 *
 * Styleguide 6.9

.ui-slider
  +border-radius($border-radius-m)
  +box-shadow(inset 0 1px 2px $darken)
  +dimension(100%, 12px)
  background: $mono-bright
  border: 1px solid $mono-light
  position: relative

.ui-slider-handle
  @extend .primary-button
  +border-radius(100px)
  +dimension($space-s, $space-s)
  +position-top-left(0, 20px)
  min-height: $space-s
  line-height: 0
  overflow: visible
  padding: 0
  &:focus
    outline: none !important

// Dark tooltip

.ui-slider-info
  +dimension(120px, auto)
  +border-radius($border-radius-s)
  +box-shadow(inset 0 1px 0 $lighten-less, 0 1px 2px $darken)
  +position-bottom-left($space-m, 0)
  border: 1px solid $black
  color: $white
  display: block
  font-size: $font-xs
  line-height: 1
  margin-left: -62px
  padding: $space-x

// Tooltip arrow

.ui-slider-info:after,
.ui-slider-info:before
  top: 100%
  border: solid transparent
  content: " "
  height: 0
  width: 0
  position: absolute
  pointer-events: none

.ui-slider-info:after
  border-color: rgba(212, 212, 13, 0)
  border-top-color: $mono-dark
  border-width: 5px
  left: 50%
  margin-left: -5px

.ui-slider-info:before
  border-color: rgba(0, 0, 0, 0)
  border-top-color: $black
  border-width: 6px
  left: 50%
  margin-left: -6px