pressbooks-aldine/resources/assets/styles/components/_forms.scss

/** Search form */
// TODO: .search-form {}
// TODO: .search-form label {}
// TODO: .search-form .search-field {}
// TODO: .search-form .search-submit {}

::placeholder {
  color: $black;
}

.contact {
  background: #f6f6f6;
  padding: rem(65) 0 rem(120);

  h3 {
    color: var(--primary, $brand-primary);

    &::before {
      content: '';
      display: block;
      margin: 0 auto 1rem;
      width: rem(46);
      height: rem(5);
      background: var(--accent, $brand-accent);
    }
  }

  p {
    font-size: 0.875rem;
    font-weight: 600;
    font-family: $font-family-sans-serif;

    &:last-child {
      margin-top: rem(47);
    }
  }

  .success {
    color: $dark-green;
  }

  .error {
    color: $dark-red;
  }

  form {
    width: 22.125rem;

    .error > input[type="text"],
    .error > input[type="email"],
    .error > textarea {
      border-bottom: solid 2px $dark-red;
    }

    .error > ::placeholder {
      color: $dark-red;
    }
  }

  label {
    margin-bottom: 1rem;
  }

  label,
  input[type="text"],
  input[type="email"],
  textarea {
    font-size: 0.875rem;
    font-weight: 600;
    font-family: $font-family-sans-serif;
    background: transparent;
  }

  .button {
    background: transparent;
  }

  textarea {
    height: 7.5em; // TODO
    resize: none;
  }

  input[type="text"],
  input[type="email"],
  textarea {
    flex-grow: 1;
    border-top: 0;
    border-right: 0;
    border-left: 0;
    border-bottom: solid 2px $black;
    padding: 0 0 1em;

    &:focus {
      outline: none;
      border-bottom: solid 2px var(--accent, $brand-accent);
    }
  }
}