astuto/app/javascript/stylesheets/common/_form.scss

.field_with_errors {
  label {
    color: $danger;
  }

  input {
    border-color: $danger;
  }
}

.form-control:focus {
  border-color: $astuto-light-grey;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 4px rgba(0, 0, 0, 0.6);
}

.new_user, .edit_user {
  @extend .card;

  width: 100%;
  max-width: 360px;

  text-align: center;

  padding: 15px;
  margin: 0 auto;
}

.deviseLinks {
  @extend .new_user;

  display: flex;
  flex-direction: column;

  margin-top: 24px;

  a { color: $primary-color; }
}

.formRow {
  @extend .form-row;

  margin-top: 10px;
  margin-bottom: 10px;
}

.formGroup {
  @extend .form-group;
}

.formControl {
  @extend .form-control;

  &.invalid {
    border-color: red;
  }
}

.switch {
  @extend
    .custom-control-input;
}