_range_slider.sass 4.33 KB
Newer Older
arturo's avatar
arturo committed
1 2 3
// Colors based on Chromium engine
// (every browser renders its input range on its own, here we are trying
// to add some consistency)
arturo's avatar
arturo committed
4 5 6
$range-bg-color: $gray-175
$range-border-color: $gray-400
$range-bg-progress-color: $secondary
arturo's avatar
arturo committed
7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49
$range-height: 8px
$range-radius: 3px
$knob-size: 14px

.range-control
  display: inline-flex
  flex-direction: column
  vertical-align: top

  &__label
    font-size: 14px
    color: $gray-700
    margin-bottom: space-x(0.5)

  // enhance hover area of ".range-slider" placeholder
  // (cf ".range-slider")
  &:hover .range-slider .range-slider__placeholder
    display: block

///////////////////////////////////////////////

.range-slider
  $self: &
  $placeholder-offset-y: -32px

  position: relative
  width: 100%
  height: $range-height

  &__scale
    position: absolute
    width: inherit
    height: inherit
    background-color: $range-bg-color
    border: 1px solid $range-border-color
    border-radius: $range-radius

  &__scale-sel
    position: absolute
    background-color: $range-bg-progress-color
    width: inherit
    height: inherit
    border-radius: $range-radius
arturo's avatar
arturo committed
50
    border: 1px solid $range-border-color
arturo's avatar
arturo committed
51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124

  &__knob
    @include unselectable
    @include clickable

    z-index: 1
    background-color: $range-bg-progress-color
    width: $knob-size
    height: $knob-size
    border-radius: 50%
    position: absolute
    box-shadow: 0 0 1px 0 $range-bg-progress-color

    // alignement with the bar
    transform: translateX(-5px) translateY(-3px)

    &:hover
      background-color: darken($range-bg-progress-color, 15%)


  &__placeholder
    display: none
    background-color: $black
    color: $white
    position: absolute
    padding: space-x(0.5) space-x(1)
    text-align: center
    font-size: 14px
    font-weight: bold
    border-radius: 5px
    box-shadow: 0 0 1px 0 $black
    opacity: 0.8
    transform: translateX(-25%) translateY($placeholder-offset-y)

  &:hover &

    &__placeholder
      display: block

////////////////////////////////////////////

.range-simple
  display: inline-flex
  flex-direction: column
  vertical-align: top
  position: relative

  &__label
    font-size: 14px
    color: $gray-700

  &__field
    position: relative

////////////////////////////////////////////

// Cross browser rules
//
// (?) Range consistency issue between browsers UI engine: mostly rely on
//     Chromium UI and adapt it to other engine
//
// Some examples:
// @link https://brennaobrien.com/blog/2014/05/style-input-type-range-in-every-browser.html
input[type=range]
  @include clickable

  width: 100%

// Styling FireFox input range, mimicking Chromium one
//
// (?) * unable to differenciate selector betwenn background range and progress
//       one → set only background range
//     * unable to position the input ideally → have to rely on
//       absolute + position
arturo's avatar
arturo committed
125 126 127
input[type=range]
  -webkit-appearance: none

arturo's avatar
arturo committed
128 129 130 131 132 133 134 135 136 137 138 139
input[type=range]::-webkit-slider-runnable-track
  $chromium-offset-y: 4px

  height: $range-height
  border-radius: $range-radius
  border: 1px solid $range-border-color
  background: $range-bg-color
  width: 100%
  position: absolute
  top: $chromium-offset-y

input[type=range]::-webkit-slider-thumb
arturo's avatar
arturo committed
140
  $chromium-offset-y: -4px
arturo's avatar
arturo committed
141

arturo's avatar
arturo committed
142 143 144 145 146 147 148 149
  -webkit-appearance: none
  transform: translateY($chromium-offset-y)
  border: none
  height: $knob-size
  width: $knob-size
  border-radius: 50%
  background-color: $range-bg-progress-color
  box-shadow: 0 0 1px 0 $range-bg-progress-color
arturo's avatar
arturo committed
150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181

// Styling FireFox input range, mimicking Chromium one
//
// (?) * unable to differenciate selector betwenn background range and progress
//       one → set only background range
//     * unable to position the input ideally → have to rely on
//       translation
input[type=range]::-moz-range-track
  $firefox-height: #{ $range-height - 2px }
  $firefox-offset-y: -2px

  height: $firefox-height
  border-radius: $range-radius
  border: 1px solid $range-border-color
  background: $range-bg-color
  transform: translateY($firefox-offset-y)

input[type=range]::-moz-range-thumb
  $firefox-offset-y: -2px

  border: none
  height: $knob-size
  width: $knob-size
  border-radius: 50%
  background-color: $range-bg-progress-color
  box-shadow: 0 0 2px 0 $range-bg-progress-color
  transform: translateY($firefox-offset-y)

// hide the outline behind the border
input[type=range]:-moz-focusring
  outline: 1px solid white
  outline-offset: -1px