codeforamerica/michigan-benefits

View on GitHub
app/assets/stylesheets/michigan-benefits/organisms/_form-card.scss

Summary

Maintainability
Test Coverage
%max-container {
  max-width: $max-width;
  margin-left: auto;
  margin-right: auto;
}

.form-card {
  @extend %max-container;
  @include clearfix;
  margin-bottom: $padding-small;
}

.form-card__title {
  font-weight: 600;
  text-align: center;
}

.form-card__buttons {
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  @include media($mobile-up) {
    flex-direction: row;
  }
}

.form-card__button_right {
  display: flex;
  justify-content: flex-end;
}

.form-card__button_centered {
  text-align: center;
  + .form-card__button_centered {
    margin-top: 1em;
  }
}


.pre-title {
  font-weight: 600;
  color: $color-sky;
  text-align: center;
}

.form-card__select {
  margin-top: $padding-med;
}

.form-card__confirmation {
  margin-bottom: $padding-med;
  p {
    margin-bottom: 0;
  }
}

.form-card__header {
  .text--help {
    margin-bottom: 1em;
    font-size: $font-size-normal;
  }
  .text--help:last-of-type {
    margin-bottom: 0;
  }
}

.form-card--meta-data {
  margin-bottom: $padding-small;
  text-align: center;

  @include media($tablet-up) {
    max-width: $max-width;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
  }
}

.form-card--security-message,
.form-card--benefit-label {
  color: $color-dark-grey;
  font-size: $font-size-smallest;
}

.dark-background .form-card--security-message,
.dark-background .form-card--benefit-label {
  color: $color-grey;
}
.form-card--security-message {
  display: inline-block;

  &:before {
    content: "\e899";
    display: inline-block;
    font-family: $font-icon;
    margin-right: .5em;
   }
}

.form-card--benefit-label {

  @include media($tablet-up) {
    float: right;
  }
}