frontend/source/sass/components/_formbuttonrow.scss

Summary

Maintainability
Test Coverage
// These styles create the row of buttons on the bottom of each data capture page.

@import '../base/variables';

.form-button-row {
  position: relative;
  margin-top: 4rem;
  text-align: right;
  &.align-left {
    text-align: left;
  }
  &.align-center {
    text-align: center;
  }

  .button-previous {
    float: left;
  }
  button,
  button[type="submit"],
  .usa-button,
  .usa-button-primary {
    display: inline-block;
    margin: 0 2em 0 0;
    &:last-of-type {
      margin-right: 0;
    }
  }

  .usa-button + .usa-button {
    display: inline-block;
    margin-left: $space-2x;
  }

  .download-group {
    float: left;
    text-align: left;

    .ghost-button {
    margin: 0 .3rem 0 -.75rem; // Negative margin to properly align ghost button
    }
  }

  .submit-group {
    display: inline-block;

    button,
    .usa-button {
      margin: 0;
    }
  }

  .submit-label {
    display: block;
    float: left;
    height: 38px;
    color: $color-gray-medium;
    margin-right: $space-2x;
    max-width: 130px; // hacky magic number
    font-size: $small-font-size;
    line-height: $small-line-height;
  }
}