<commit_before>/*=========================================
=          _COMPONENTS.FORMS           =
=========================================*/


/* ===== FORMS & INPUTS ============================== */


.form {
  clear: both;
  padding: $gap-box;
  background-color: $grey-gallery;

  // Single combination of label, input and add-ons
  .group {
    @include clearfix;
    margin-bottom: .5em;

    .error-text { color: $red-roof-terratcotta; }

    &.group--solo {
      margin-bottom: 0;
      text-align: center;
    }
  }

  label {
    display: inline-block;
    padding-right: .7rem;
    width: 25%;

    vertical-align: top;
    font-weight: $weight-bold;
    line-height: 1.3;

    em { font-weight: $weight-normal; }
  }

  input:not([type=submit]),
  textarea {
    padding: .4rem .6rem;
    border: 2px solid $grey-silver;

    &.error {
      border: 2px solid $red-roof-terratcotta;
      background-color: $red-oyster-pink;
    }

    &:focus {
      outline: none;
      border: 2px solid $blue-azure;
    }

    &.field__input--wide {
      @include breakpoint(desktop) {
        width: 300px;
      }
    }
  }

  textarea { width: 50%; }

  &.course-search-bar {
    flex: 1 0 auto;
    margin: 1.5rem;

    .group {
      display: flex;
      margin-bottom: 0;
    }

    input[type=text] { width: 80%; }
  }
}

.group--vspace {
  margin:$gap 0;
}

.group__list {
  display: inline-block;

  li {
    @include breakpoint(tablet) {
      display: inline-block;
    }

    label {
      vertical-align: middle;
    }
  }
}
<commit_msg>FEAT; Add form-flex class<commit_after>/*=========================================
=          _COMPONENTS.FORMS           =
=========================================*/


/* ===== FORMS & INPUTS ============================== */


.form {
  clear: both;
  padding: $gap-box;
  background-color: $grey-gallery;

  // Single combination of label, input and add-ons
  .group {
    @include clearfix;
    margin-bottom: .5em;

    .error-text { color: $red-roof-terratcotta; }

    &.group--solo {
      margin-bottom: 0;
      text-align: center;
    }
  }

  label {
    display: inline-block;
    padding-right: .7rem;
    width: 25%;

    vertical-align: top;
    font-weight: $weight-bold;
    line-height: 1.3;

    em { font-weight: $weight-normal; }
  }

  input:not([type=submit]),
  textarea {
    padding: .4rem .6rem;
    border: 2px solid $grey-silver;

    &.error {
      border: 2px solid $red-roof-terratcotta;
      background-color: $red-oyster-pink;
    }

    &:focus {
      outline: none;
      border: 2px solid $blue-azure;
    }

    &.field__input--wide {
      @include breakpoint(desktop) {
        width: 300px;
      }
    }
  }

  textarea { width: 50%; }

  &.course-search-bar {
    flex: 1 0 auto;
    margin: 1.5rem;

    .group {
      display: flex;
      margin-bottom: 0;
    }

    input[type=text] { width: 80%; }
  }
}

.form-flex {
  padding: $gap-box;
  background-color: $grey-gallery;

  .group {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: .5em;
    width: 100%;
  }

  .full-width {
    width: 100%;
  }

  .field,
  input:not([type=submit]),
  textarea {
    padding: .4rem .6rem;
    border: 2px solid $grey-silver;

    &.error {
      border: 2px solid $red-roof-terratcotta;
      background-color: $red-oyster-pink;
    }

    &:focus {
      outline: none;
      border: 2px solid $blue-azure;
    }

    &.field__input--wide {
      @include breakpoint(desktop) {
        width: 300px;
      }
    }
  }
}

.group--vspace {
  margin:$gap 0;
}

.group__list {
  display: inline-block;

  li {
    @include breakpoint(tablet) {
      display: inline-block;
    }

    label {
      vertical-align: middle;
    }
  }
}

{'fraction_non_alphanumeric': 0.19920529801324505, 'fraction_numerical': 0.017218543046357615, 'mean_word_length': 2.1440466278101584, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2141457', 'n_tokens_mistral': 1439, 'n_tokens_neox': 1313, 'n_words': 265}