moonleerecords/moonlee-website

// basic slider
.slider {
  height: auto;
  position: relative;
  width: 100%;
  z-index: 1;

  .slide {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 2;

    &.active {
      z-index: 3;
    }
  }

  .slider-control {
    @include vertical-align(50px);
    background: $color-limed-spruce;
    display: block;
    height: 100px;
    position: absolute;
    width: 75px;
    z-index: 10;

    &.slider-control-previous {
      left: 0;
    }

    &.slider-control-next {
      right: 0;
    }
  }

  .slider-arrow {
    @include vertical-align(15px);
    border-bottom: 5px solid $color-gold;
    border-right: 5px solid $color-gold;
    height: 30px;
    position: absolute;
    width: 30px;

    &.slider-arrow-previous {
      right: 0;
      transform: rotate(135deg);
    }

    &.slider-arrow-next {
      left: 0;
      transform: rotate(-45deg);
    }
  }
}

// hero slider
.slider-hero {
  .slide {
    background: no-repeat center center;
    background-size: cover;
    opacity: 0;
    -moz-transition: opacity 2.0s;
    -o-transition: opacity 2.0s;
    -webkit-transition: opacity 2.0s;
    transition: opacity 2.0s;

    &.active {
      opacity: 1;
    }

    .slide-title {
      -moz-box-sizing: border-box;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      color: $color-white;
      padding: 0 200px;
      position: absolute;
      text-align: center;
      text-shadow: 0 4px 3px rgba(0, 0, 0, 0.4), 0 8px 13px rgba(0, 0, 0, 0.1), 0 18px 23px rgba(0, 0, 0, 0.1);
      top: 60%;
      width: 100%;
    }
  }

  .slider-navigation {
    bottom: 20px;
    margin: 0;
    padding: 0;
    position: absolute;
    text-align: center;
    width: 100%;
    z-index: 10;

    li {
      border: 5px solid $color-limed-spruce;
      box-sizing: border-box;
      cursor: pointer;
      display: inline-block;
      height: 28px;
      margin-right: 20px;
      width: 28px;

      &.active {
        background-color: $color-white;
      }

      &:last-child {
        margin: 0;
      }
    }
  }
}

// releases slider
.slider-releases {
  height: 380px;

  .slide {
    background-color: $color-gold;
    border: 5px solid $color-gold;
    height: 380px;
    left: 70%;
    -moz-transition: left 1s;
    -o-transition: left 1s;
    -webkit-transition: left 1s;
    transition: left 1s;
    width: 68%;

    &.active {
      border: 5px solid $color-white;
      left: 0;

      .release {
        .release-info {
          display: block;
          position: absolute;

          .release-number {
            color: $color-limed-spruce;
          }
        }
      }
    }

    .release {
      .release-cover {
        float: left;
        height: 100%;
        width: 380px;
      }

      .release-info {
        display: none;
      }
    }
  }

  .slider-control {
    &.slider-control-previous {
      left: -5%;
    }

    &.slider-control-next {
      right: -5%;
    }
  }
}

@include respond-to(small) {
  //.slider {
  //  .slider-control {
  //    display: none;
  //  }
  //}

  .slider-hero {
    display: none; // TODO: show and adjust text
    height: 350px;
    //max-height: 350px;
  }

  .slider-releases {
    min-height: 420px;
    text-align: center;

    .slide {
      width: 100%;

      .release {
        .release-cover {
          width: 100%;
        }
      }

      &.active {
        border: none;

        .release {
          .release-info {
            display: none;
          }
        }
      }
    }

    .slider-control {
      &.slider-control-previous {
        left: 0;
      }

      &.slider-control-next {
        right: 0;
      }
    }
  }
}

@include respond-to(medium) {
  .slider-hero {
    min-height: 550px;
  }
}

@include respond-to(large) {
  .slider-hero {
    min-height: 550px;
  }
}