$main-field: $yellow;
$light-field: lighten($main-field, 10%);

.textfields {
  .field {
    @extend ._card;

    input, textarea {
      padding: .5rem 1rem;

      font-size: 1rem;
      color: $black;

      outline: none;
      border: none;
      border-bottom: 2px solid $main-field;

      &:active, &:focus {
        background-color: $light-field;
      }
    }

    textarea {
      min-width: 200px;
      min-height: 75px;

      line-height: 1.2rem;
    }
  }
}

$main-field: $yellow;
$light-field: lighten($main-field, 10%);

.textfields {
  .field {
    @extend ._card;

    input, textarea {
      padding: .5rem 1rem;

      font-size: 1rem;
      color: $black;

      outline: none;
      border: none;
      border-bottom: 2px solid $main-field;

      @include transition(background-color .5s ease);

      &:active, &:focus {
        background-color: $light-field;
      }
    }

    textarea {
      min-width: 200px;
      min-height: 75px;

      line-height: 1.2rem;
    }
  }
}

Add transitions to text fields
Add transitions to text fields
