chroline/lynk

View on GitHub
src/styles/components/Button.scss

Summary

Maintainability
Test Coverage
.btn {
  display: block;
  box-sizing: border-box;
  width: 100%;
  border: none;
  border-radius: 6px;
  font-size: 1.125rem;
  font-weight: 500;
  padding: 1rem 3.5rem 1rem 3.5rem;
  -webkit-tap-highlight-color: transparent;
  text-decoration: none;
  margin-bottom: 0.75rem;
  position: relative;

  .icon {
    width: 1.5rem;
    height: 1.5rem;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 1rem;
  }

  &.sm {
    font-size: 1rem;
    padding: 1rem 3.25rem 1rem 3.25rem;

    .icon {
      width: 1.25rem;
      height: 1.25rem;
    }
  }
}