styles.scss

$screen-sm-width: 510px;
$screen-md-width: 830px;
$screen-lg-width: 1200px;
$screen-sm-height: 300px;
$screen-md-height: 500px;
$screen-lg-height: 700px;

@function get-vw($target) {
  $vw-context: (1280 * 0.01) * 1px;
  @return ($target / $vw-context) * 1vw;
}

$size: 70px;
$padding-outer: 55px;
$padding-inner: 55px;
$line-offset: 0;
$inner-distance:  20px;
$ruler-distance:  0;
$ruler-size: 20px;
$handle-size: 17px;
$handle-distance: -10px;
$offset-caption: 80px;

.timeline {
  position: fixed;
  z-index: 100;
  cursor: pointer;
  background-color: white;
  color: black;
  transform: translate3d(0, 0, 0);
  &.bottom {
    padding: 0 $padding-inner;
    height: $size;
    bottom: 0;
    right: $padding-outer;
    left: $padding-outer;
  }
  &.right {
    padding: $padding-inner 0;
    width: $size;
    right: 0;
    top: $padding-outer;
    bottom: $padding-outer;
  }
  &.left {
    padding: $padding-inner 0;
    width: $size;
    left: 0;
    top: $padding-outer;
    bottom: $padding-outer;
  }
}
.slider-inner {
  background-color: rgba(255,0,0,0.1);
  position: relative;
  z-index: 0;
  .left & {
    right: $inner-distance;
    height: 100%;
    border-right: 1px solid black;
  }
  .right & {
    left: $inner-distance;
    height: 100%;
    width: $size - $inner-distance;
    border-left: 1px solid black;
  }
  .bottom & {
    top: $inner-distance;
    width: 100%;
    border-top: 1px solid black;
  }
}

.slider-handle {
  box-sizing: border-box;
  position: absolute;
  width: $handle-size;
  height: $handle-size;
  // border: 1px solid black;
  background: gray;
  border-radius: 50%;
  // z-index: 0;
  .bottom & {
    cursor:ew-resize;
    touch-action: pan-y;
    top: - $handle-size/2 - 1px;
    margin-left: - $handle-size/2;
    left: 0;

  }
  .left & {
    cursor:ns-resize;
    touch-action: pan-x;
    right: - $handle-size/2;
    margin-top: - $handle-size/2;
    top: 0;

  }
  .right & {
    cursor:ns-resize;
    touch-action: pan-x;
    left: - $handle-size/2 - 1px;
    margin-top: - $handle-size/2;
    top: 0;
  }
  &:before {
    // COVER TIMELINE with white
    z-index: -1;
    content: '';
    position: absolute;
    display: block;
    left: 50%;
    top:50%;
    background-color: white;
    $size: 44px;
    .bottom & {
      margin-left: -$size/2;
      width: $size;
      height: 1px;
    }
    .left &, .right & {
      margin-top: -$size/2;
      height: $size;
      width: 1px;
    }
  }
  &:active {
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
  }
}
.slider-ruler {
  background-color: pink;
  font-size: 10px;
  letter-spacing: 2px;
  position: absolute;
  user-select: none;
  .bottom & {
    left: 0;
    right: 0;
    top: $ruler-distance;
  }
  .left & {
    top: 0;
    bottom: 0;
    right: $ruler-distance;
  }
  .right & {
    top: 0;
    bottom: 0;
    left: $ruler-distance;
  }
  span {
    position: absolute;
    display: block;
    -webkit-backface-visibility: visible;
    .left & {
      border-top: 1px solid green;
      width: $ruler-size;
      right: 0;
    }
    .right & {
      border-top: 1px solid green;
      width: $ruler-size;
      left: 0;
    }
    .bottom & {
      border-left: 1px solid green;
      height: $ruler-size;
    }

    &:after {
      // CAPTION
      content: attr(data-value);
      background-color: pink;
      position: absolute;
      z-index: 100;
      display: block;
      .bottom & {
        transform-origin: center center;
        transform: translate3d(-50%,0,0) scale(0.3);

      }
      .left & {
        right:0;
        transform-origin: right center;
        transform: translate3d(0,-50%,0) scale(0.3);
      }
      .right & {
        transform-origin: left center;
        transform: translate3d(0,-50%,0) scale(0.3);

      }
      font-size: 30px;
      line-height: 1;
      letter-spacing: 0;
      text-align: center;
      transition: all 0.2s linear;
      opacity: 0;
    }
    &.active {
      &:before {
        opacity: 0;
      }
      &:after {
        opacity: 1;
        .bottom & {
          transform: translate3d(-50%, -$offset-caption, 0) scale(1);
        }
        .left & {
          transform: translate3d($offset-caption, -50%, 0) scale(1);
        }
        .right & {
          transform: translate3d(-$offset-caption, -50%, 0) scale(1);
        }
      }
    }
    &.sibling {
      &:before {
        opacity: 0;
      }
      &:after {
        opacity: 0;
      }
    }
    .bottom & {
      @media (max-width: $screen-sm-width) {
        &:nth-child(10n+1) {
          &:before, &:after {
            opacity: 1;
          }
        }
      }
      @media (min-width: $screen-sm-width) and (max-width: $screen-md-width) {
        &:nth-child(6n+1) {
          &:before, &:after {
            opacity: 1;
          }
        }
      }
      @media (min-width: $screen-md-width) and (max-width: $screen-lg-width) {
        &:nth-child(3n+1) {
          &:before, &:after {
            opacity: 1;
          }
        }
      }

      @media (min-width: $screen-lg-width) {
        &:nth-child(2n+1) {
          &:before, &:after {
            opacity: 1;
          }
        }
      }
    }
    .left &, .right & {
      @media (max-height: $screen-sm-height) {
        &:nth-child(10n+1) {
          &:before, &:after {
            opacity: 1;
          }
        }
      }
      @media (min-height: $screen-sm-height) and (max-height: $screen-md-height) {
        &:nth-child(6n+1) {
          &:before, &:after {
            opacity: 1;
          }
        }
      }
      @media (min-height: $screen-md-height) and (max-height: $screen-lg-height) {
        &:nth-child(3n+1) {
          &:before, &:after {
            opacity: 1;
          }
        }
      }

      @media (min-height: $screen-lg-height) {
        &:nth-child(2n+1) {
          &:before, &:after {
            opacity: 1;
          }
        }
      }
    }
    .timeline.highlight-all & {
      &:before, &:after {
        opacity: 0;
      }
    }
    .timeline.highlight-all &.highlight {
      &:before, &:after {
        opacity: 1;
      }
    }
    .timeline.show-all & {
      &:before, &:after {
        opacity: 1;
      }
    }



  }
}

.no-select, .slider-inner {
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  -khtml-user-select:none;
  -moz-user-select:none;
  -moz-user-select: -moz-none;
  -ms-user-select:none;
  user-select:none;
}