nukeop/nuclear

View on GitHub
packages/app/app/components/Dashboard/BestNewMusicTab/BestNewMusicContent/styles.scss

Summary

Maintainability
Test Coverage
@import '../../../../vars.scss';

.best_new_music_content {
  position: relative;
  height: 100%;
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 0 1em;
  
  .review_header {
    display: flex;
    flex-flow: row;
    margin-bottom: 1rem;
    max-width: 720px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  .review_headings {
    display: flex;
    flex-flow: column;
    flex: 1 1 50%;

    justify-content: center;
    align-items: center;

    padding: 0 1rem;
  }

  .artist {
    font-size: 24px;
    line-height: 24px;
    margin-bottom: 1rem;
    cursor: pointer;
  }

  .title {
    text-align: center;
    font-size: 28px;
    line-height: 28px;
    cursor: pointer;
  }

  .thumbnail {

  }

  .score {
    display: flex;
    flex-flow: row;
    justify-content: center;
    align-items: center;
    
    flex: 0 0 16%;
  }

  .score_box {
    display: flex;
    justify-content: center;
    align-items: center;

    border: 4px solid $red;
    border-radius: 50%;
    width: 96px;
    height: 96px;
    font-size: 48px;
    color: $white;
  }

  .paragraph {
    max-width: 720px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    color: rgba($white, 0.85);
  }
}