Kalkuli/2018.2-Kalkuli_Front-End

View on GitHub
src/components/UI/DropArea/DropArea.scss

Summary

Maintainability
Test Coverage
@import "../../../assets/sass/main.scss";

.drop-area {
  height: 45rem;
  width: 55rem;
  display: flex;
  margin-top: 2.5rem;
  flex-flow: column;
  text-align: center;
  justify-content: center;
  color: $color-light-blue;
  border: 6px dashed rgba($color-light-blue, .6);
  border-radius: 30px;
  transition: all 1s;
  &__title {
    font-size: 3rem;
    user-select: none;
    color: $color-light-blue;
  }
  &__p {
    font-family: 'Alfa Slab One', cursive;
    margin-top: 25px;
    font-size: 2rem;
    user-select: none;
  }
}
.accept {
  border: 6px solid $color-dark-blue;
  box-shadow: 0px 1px 3px $color-black;
}
.pdf {
  border: 2px solid black;
  height: 500px;
  width: 300px;
}
.pulsing-text { 
  animation: pulse 1s 2s infinite alternate backwards;
}

@media screen and (max-height: 760px) {
  height: 40rem;
}
@media (max-width:480px) { 
  .drop-area {
    height: 23rem;
    width: 23rem;
    margin: auto;
    &__title {
      font-size: 2rem;
    }
    &__p {
      font-size: 1.3rem;
    }
  }
}
@media (min-width: 480px) and (max-width:800px) {
  .drop-area {
    height: 35rem;
    width: 35rem;
    margin: auto;
    &__title {
      font-size: 2.2rem;
    }
    &__p {
      font-size: 1.6rem;
    }
  }
}