Kercode/tutti_gruppi

View on GitHub
app/assets/stylesheets/sass/components/_groupment.scss

Summary

Maintainability
Test Coverage
#bloc_facture {
  border: 2px solid $color-black;
  height: 200px;
  margin: 1rem;
  padding: 3rem;

  @include respond(tab-port) {
    padding: 2rem;
  }

  @include respond(tab-land) {
    padding: 4rem;
  }

  @include respond(tab-port) {
    padding: 2rem;
  }
}

section.gpmt {
  justify-content: center;

  .block-gpmt {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;

    .profil-card {
      background-color: $color-pagination-bg;
      display: flex;
      width: 300px;
      height: 90px;
      padding: 10px;
      margin: 5px;
      justify-content: center;
      border-radius: 5px;

      &:hover {
        box-shadow: 0 4px 12px rgba($color-black, 0.5);
        background-image: linear-gradient(to right bottom, $color-gradient-1, $color-gradient-3);
        transform: scale(1) translateY(-.2rem);
      }

      .main-image {
        width: 30%;
        display: flex;
        justify-content: center;

        .profil-img {
          width: 70px;
          clip-path: circle(50.0% at 50% 50%);
        }
      }

      .image {
        width: 15%;
        display: flex;
        align-items: center;
        justify-content: center;

        .rank-img {
          width: 25px;
        }
      }

      .name {
        color: white;
        width: 55%;
        display: flex;
        align-items: center;

        p {
          margin-bottom: 0;
          font-size: 15px;
        }
      }
    }
  }
}

.bl-2 {
  border-left: 1px solid rgba($color-black, .2);

  @include respond(tab-port) {
    border: none;
    border-top: 1px solid rgba($color-black, .2);
  }
}