18F/e-QIP-prototype

View on GitHub
src/components/Section/History/SummaryCounter/SummaryCounter.scss

Summary

Maintainability
Test Coverage
.summary-counter {
  display: flex;
  flex-direction: row;
  color: $eapp-grey-darker;
  margin: 4rem 0 2rem 0;
  padding: 1.5rem;
  border: 1px solid $color-gray-lighter;
  border-radius: 4px;
}

.summary-counter-title {
  width: 50%;
  display: flex;
  align-items: center;
  align-self: center;

  img {
    width: 4.6rem;
    margin-right: 1rem;
  }
}

.summary-counter-schools,
.summary-counter-diplomas {
  width: 25%;
  text-align: center;
}

.summary-counter .total,
.summary-counter .unit,
.summary-counter .title {
  font-weight: bold;
}

.summary-counter .total,
.summary-counter .unit {
  display: block;
}

.summary-counter .total {
  font-size: 4rem;
}

@media only screen and (max-width: 1000px) {
  .summary-counter {
    flex-direction: column;
    justify-content: center;
  }

  .summary-counter-title,
  .summary-counter-schools,
  .summary-counter-diplomas {
    width: 100%;
  }

  .summary-counter-title {
    justify-content: center;
  }
}