Kalkuli/2018.2-Kalkuli_Front-End

View on GitHub
src/components/UI/Button/SignUp/SignUp.scss

Summary

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

.SignUp-btn {
  background-color: $color-white;
  color: $color-dark-blue;
  font-weight: 700;
  padding: .8em;
  border-radius: .3em;
  cursor: pointer;
  transition: all 0.2s;
  user-select: none;
  text-align: center;
  &:hover {
    box-shadow: 0 1px 1.2rem $color-black;
    transform: translateY(-.2rem);
  }
  &:active {
    box-shadow: 0 1px .5rem $color-black;
    transform: translateY(.2rem);
  }
}
.large {
  width: 27rem;
  margin-top: 2.5rem;
  font-size: 2rem;
}

@media (max-width:600px) { 
  /* smartphones, portrait iPhone, portrait 480x320 phones (Android) */ 
  .large {
    margin-top: 2.5rem;
    font-size: 1.4rem;
    width: 19rem;
  }
}
@media (min-width:600px) and (max-width:800px) { 
  /* smartphones, portrait iPhone, portrait 480x320 phones (Android) */ 
  .large {
    margin-top: 2.5rem;
    font-size: 1.8rem;
    width: 24rem;
  }
}

.small {
  margin-left: 1.5rem;
}
@media (max-width:480px) { 
  /* smartphones, portrait iPhone, portrait 480x320 phones (Android) */ 
  .small {
    font-size: 1.1rem;
    width: 16rem;
    margin-left: .4rem;
  }
}
@media (min-width:480px) and (max-width:720px) { 
  /* smartphones, portrait iPhone, portrait 480x320 phones (Android) */ 
  .small {
    font-size: 1.4rem;
    width: 20rem;
  }
}