nukeop/nuclear

View on GitHub
packages/app/app/components/Dashboard/GenresTab/styles.scss

Summary

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

.genre_tab_container {
  display: flex;
  flex-flow: row wrap;
  overflow-x: hidden;
  
  svg, path {
    stroke: $white;
  }

  svg {
    width: 96px;
    height: 96px;
  }
    
  
  .svg_icon {
    margin-bottom: 1rem;
  }
  
  .genre_container {
    position: relative;
    display: flex;
    flex-flow: row;
    justify-content: center;
    align-items: center;
    width: 25%;
    height: 0;
    padding-bottom: 25%;
    border-radius: 0.25rem;
    transition: $short-duration;
    overflow: hidden;
    cursor: pointer;

    &:hover {
      transform: scale(1.1);
    }
  }

  .genre_name,
  .genre_overlay {
    position: absolute;
    top: 1rem;
    bottom: 1rem;
    left: 1rem;
    right: 1rem;
    border-radius: 0.25rem;
  }

  .genre_overlay {
    overflow: hidden;
    background-color: $black;
  }

  .genre_overlay img:first-child {
    opacity: 0.6;
  }

  .genre_name {
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    font-size: 1rem;
    letter-spacing: 4px;
    text-transform: uppercase;
    text-align: center;
  }

  @media screen and (max-width: 1366px) {
    .genre_container {
      width: 33.33%;
      padding-bottom: 33.33%;
    }
  }

  @media screen and (max-width: 1180px) {
    .genre_container {
      width: 50%;
      padding-bottom: 50%;
    }
  }

  @media screen and (max-width: 1050px) {
    .genre_container {
      width: 100%;
      padding-bottom: 100%;
    }
  }
}