moonleerecords/moonlee-website

View on GitHub
app/assets/stylesheets/records/releases.scss

Summary

Maintainability
Test Coverage
.release-cover {
  width: 100%;
}

.release-info {
  margin-left: 35px;
  margin-top: 35px;

  .release-number {
    color: $color-tower-grey;
    display: block;
    font-size: 18px;
    font-weight: lighter;
    margin-bottom: 5px;
    text-transform: uppercase;
  }

  .release-artists {
    font-weight: bold;
    margin-bottom: 5px;
    text-transform: capitalize;
    word-wrap: break-word;
  }

  .release-title {
    margin-bottom: 20px;
    word-wrap: break-word;
  }

  .release-formats {
    font-size: 16px;

    .release-format {
      display: inline-block;
      margin-right: 10px;
      margin-top: 10px;

      &.buy-link {
        border-width: 3px;
        box-shadow: inset 0 0 0 0 $color-blue;
        float: none;
        padding: 10px 15px;
        position: relative;
        text-decoration: none;

        &:hover {
          box-shadow: inset 0 100px 0 0 $color-blue;
        }
      }

      &.inactive {
        opacity: .5;
      }

      i {
        height: 24px;
        margin-right: 5px;
        margin-top: -3px;
        vertical-align: middle;
        width: 24px;
      }
    }
  }
}

.releases-list {
  padding-top: 50px;

  .item-column {
    margin-bottom: 30px;
    padding-bottom: 30px;
  }
}

.release-show {
  .release-main {
    overflow: hidden;
    padding-top: 20px;

    .bandcamp-player {
      display: none;
    }

    .release-formats {
      margin-bottom: 20px;
    }
  }

  .release-side {
    -webkit-transition: all .5s ease-in-out;
    -moz-transition: all .5s ease-in-out;
    -o-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
  }
}

.releases-slider {
  background-color: $color-gold;
  overflow: hidden;

  .slider-releases-list {
    display: none;
  }

  .release-info {
    margin-left: 415px;
  }

  .more-releases {
    @include vertical-align(25px);
    position: absolute;
    right: 0;
  }
}

.artist-show {
  .release-info {
    margin-left: 15px;
    margin-top: 15px;
    padding: 10px;

    .release-title {
      font-size: 24px;
    }
  }
}

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

    .slider-releases-list {
      display: block;
    }

    &.page-section {
      padding: 0;
    }

    .release-info {
      margin-left: 35px;
      width: 100%;
    }
  }

  .releases-list {
    .item-column {
      margin-top: 20px;
    }
  }

  .release-show {
    .release-main {
      .bandcamp-player {
        display: block;
      }

      .release-number {
        margin-top: 20px;
      }
    }
  }
}