App.scss

$padWidth: 100px;
$padHeight: 80px;
@import url("https://fonts.googleapis.com/css?family=Russo+One");

body {
  font-family: Russo One;
}

body {
  user-select: none;
  background-color: lighten(hsl(0, 5%, 4%), 5%);
}

#root {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

.inner-container {
  outline: 5px solid rgb(151, 112, 38);
  position: relative;
  width: 660px;
  text-align: center;
  background-color: lighten(rgb(151, 41, 166), 20%);
  .pad-bank {
    width: $padWidth * 1 + 32;
    height: $padHeight * 1 + 22;
    display: inline-block;
    margin: 20px;
    margin-bottom: -30px;
    .drum-pad {
      background-color: rgb(60, 40, 213);
      position: relative;
      float: none;
      width: $padWidth;
      height: $padHeight;
      margin-right: 10px;
      margin-left: 14px;
      border-radius: 5px;
      padding-top: 35px;
      box-sizing: border-box;
      cursor: pointer;
      box-shadow: black 3px 3px 5px;
    }
  }
  .logo {
    position: absolute;
    top: 5px;
    right: 10px;
    .inner-logo {
      display: inline-block;
      font-style: italic;
      font-weight: bold;
      font-size: 20px;
    }
  }
  .controls-container {
    width: 240px;
    height: $padHeight * 3 + 32;
    display: inline-block;
    margin: 40px 20px 0 10px;
    vertical-align: top;
    .control {
      width: 100px;
      margin: auto;
      p {
        margin-bottom: 0;
      }
      .select {
        @extend .outer-select;
        .inner {
          @extend .inner-select;
        }
      }
    }
    #display {
      width: 200px;
      background-color: gray;
      margin: 15px auto;
      padding: 15px;
      box-sizing: border-box;
    }
  }
}

.outer-select {
  margin: auto;
  border: 1px solid black;
  width: 50px;
  height: 20px;
  padding: 1px;
  background-color: black;
}

.inner-select {
  width: 23px;
  height: 19px;
  background: blue;
  border: 1px solid black;
  box-sizing: border-box;
  cursor: pointer;
}

@media screen and (max-width: 650px) {
  .inner-container {
    transform: scale(0.7);
  }
}

.recBtn1 {
  font-family: Russo One;
  background-color: green;
  height: 30px;
  width: 80px;
  box-shadow: black 3px 3px 5px;
}
.recBtn1 {
    &.recBtn2 {
    background-color: rgb(242, 11, 11);
  }
}
// CUSTOM RANGE INPUT : Credit : https://github.com/darlanrod/input-range-scss/blob/master/_inputrange.scss

$track-color: #424242 !default;
$thumb-color: blue !default;

$thumb-radius: 0 !default;
$thumb-height: 25px !default;
$thumb-width: 8px !default;
$thumb-shadow-size: 1px !default;
$thumb-shadow-blur: 1px !default;
$thumb-shadow-color: #111 !default;
$thumb-border-width: 0 !default;
$thumb-border-color: #fff !default;

$track-width: 100% !default;
$track-height: 5px !default;
$track-shadow-size: 2px !default;
$track-shadow-blur: 2px !default;
$track-shadow-color: #222 !default;
$track-border-width: 1px !default;
$track-border-color: #000 !default;

$track-radius: 0 !default;
$contrast: 5% !default;

@mixin shadow($shadow-size, $shadow-blur, $shadow-color) {
  box-shadow: $shadow-size $shadow-size $shadow-blur $shadow-color,
    0 0 $shadow-size lighten($shadow-color, 5%);
}

@mixin track() {
  width: $track-width;
  height: $track-height;
  cursor: pointer;
  transition: all 0.2s ease;
}

@mixin thumb() {
  @include shadow($thumb-shadow-size, $thumb-shadow-blur, $thumb-shadow-color);
  border: $thumb-border-width solid $thumb-border-color;
  height: $thumb-height;
  width: $thumb-width;
  border-radius: $thumb-radius;
  background: $thumb-color;
  cursor: pointer;
}

[type="range"] {
  -webkit-appearance: none;
  margin: $thumb-height / 2 0;
  width: $track-color;

  &:focus {
    outline: none;
  }

  &::-webkit-slider-runnable-track {
    @include track();
    @include shadow(
      $track-shadow-size,
      $track-shadow-blur,
      $track-shadow-color
    );
    background: $track-color;
    border: $track-border-width solid $track-border-color;
    border-radius: $track-radius;
  }

  &::-webkit-slider-thumb {
    @include thumb();
    -webkit-appearance: none;
    margin-top: ((-$track-border-width * 2 + $track-height) / 2) -
      ($thumb-height / 2);
  }

  &:focus::-webkit-slider-runnable-track {
    background: lighten($track-color, $contrast);
  }

  &::-moz-range-track {
    @include track();
    @include shadow(
      $track-shadow-size,
      $track-shadow-blur,
      $track-shadow-color
    );
    background: $track-color;
    border: $track-border-width solid $track-border-color;
    border-radius: $track-radius;
  }

  &::-moz-range-thumb {
    @include thumb();
  }

  &::-ms-track {
    @include track();
    background: transparent;
    border-color: transparent;
    border-width: $thumb-width 0;
    color: transparent;
  }

  &::-ms-fill-lower {
    @include shadow(
      $track-shadow-size,
      $track-shadow-blur,
      $track-shadow-color
    );
    background: darken($track-color, $contrast);
    border: $track-border-width solid $track-border-color;
    border-radius: $track-radius * 2;
  }

  &::-ms-fill-upper {
    @include shadow(
      $track-shadow-size,
      $track-shadow-blur,
      $track-shadow-color
    );
    background: $track-color;
    border: $track-border-width solid $track-border-color;
    border-radius: $track-radius * 2;
  }

  &::-ms-thumb {
    @include thumb();
  }

  &:focus::-ms-fill-lower {
    background: $track-color;
  }

  &:focus::-ms-fill-upper {
    background: lighten($track-color, $contrast);
  }
}