<commit_before>.form-control,
%form-control {
  @include form-control-size($textfield-border-width, $textfield-font-size, $textfield-height, $textfield-padding-top, $textfield-padding-bottom);
  @include transition-standard(border-bottom-color);

  background-clip: padding-box;
  background-color: transparent;
  background-image: none;
  border: 0;
  border-bottom: $textfield-border-width solid $textfield-border-color;
  border-radius: 0;
  box-shadow: none;
  color: inherit;
  display: block;
  width: 100%;

  &::-ms-expand {
    background-color: transparent;
    border: 0;
  }

  &::placeholder {
    color: $textfield-hint-color;
    opacity: 1;
  }

  // Active, focus, hover
  &:focus {
    border-bottom-color: $textfield-border-color-focus;
    border-bottom-width: ($textfield-border-width + 1);
    outline: 0;
  }

  // Disbaled
  &:disabled,
  &[readonly] {
    border-bottom-style: dotted;
    color: $textfield-color-disabled;
    opacity: 1;
  }
}

// Colour
@each $color in $palettes {
  $i: index($palettes, $color);

  .form-control-#{$color} {
    &,
    &:focus {
      border-bottom-color: nth($palettes-color, $i);
    }

    &::placeholder {
      color: nth($palettes-color-light, $i);
    }
  }
}

// Size
.form-control-lg,
%form-control-lg {
  @include form-control-size($textfield-border-width, $textfield-font-size-lg, $textfield-height-lg, $textfield-padding-top-lg, $textfield-padding-bottom-lg);
}

.form-control-sm,
%form-control-sm {
  @include form-control-size($textfield-border-width, $textfield-font-size-sm, $textfield-height-sm, $textfield-padding-top-sm, $textfield-padding-bottom-sm);
}

// Special treatment for some elements
input {
  &[type="color"],
  &[type="date"],
  &[type="datetime-local"],
  &[type="month"],
  &[type="time"],
  &[type="week"] {
    &.form-control {
      height: $textfield-height;
    }

    &.form-control-lg,
    &%form-control-lg {
      height: $textfield-height-lg;
    }

    &.form-control-sm,
    &%form-control-sm {
      height: $textfield-height-sm;
    }
  }

  &[type="color"] {
    &.form-control {
      min-width: $textfield-font-size;
    }

    &.form-control-lg,
    &%form-control-lg {
      min-width: $textfield-font-size-lg;
    }

    &.form-control-sm,
    &%form-control-sm {
      min-width: $textfield-font-size-sm;
    }
  }
}

select {
  &.form-control,
  &%form-control {
    appearance: none;

    @include media-moz-webkit {
      $select-bg-size: (($material-icon-size / $font-size-root * 1rem / $textfield-font-size) * $textfield-font-size);

      background-image: $caret-bg;
      background-position: 100% ($textfield-height / 2 - $select-bg-size / 2);
      background-repeat: no-repeat;
      background-size: $select-bg-size $select-bg-size;
      padding-right: $select-bg-size;

      &[multiple],
      &[size] {
        background-image: none;
        height: auto;
        padding-right: 0;
      }
    }
  }

  &.form-control-lg,
  &%form-control-lg {
    @include media-moz-webkit {
      $select-bg-size-lg: (($material-icon-size / $font-size-root * 1rem / $textfield-font-size) * $textfield-font-size-lg);

      background-position: 100% ($textfield-height-lg / 2 - $select-bg-size-lg / 2);
      background-size: $select-bg-size-lg $select-bg-size-lg;
      padding-right: $select-bg-size-lg;
    }
  }

  &.form-control-sm,
  &%form-control-sm {
    @include media-moz-webkit {
      $select-bg-size-sm: (($material-icon-size / $font-size-root * 1rem / $textfield-font-size) * $textfield-font-size-sm);

      background-position: 100% ($textfield-height-sm / 2 - $select-bg-size-sm / 2);
      background-size: $select-bg-size-sm $select-bg-size-sm;
      padding-right: $select-bg-size-sm;
    }
  }
}

textarea {
  &.form-control {
    height: auto;
  }
}



// Form control state

.has-danger {
  @include form-control-validation($palette-red-500);
}

.has-success {
  @include form-control-validation($palette-green-500);
}

.has-warning {
  @include form-control-validation($palette-orange-500);
}



// Form control static

.form-control-static {
  @include form-control-size(0, $textfield-font-size, $textfield-height, $textfield-padding-top, $textfield-padding-bottom);

  border: 0;
  margin-bottom: 0;

  &.form-control-lg {
    @include form-control-size(0, $textfield-font-size-lg, $textfield-height-lg, $textfield-padding-top-lg, $textfield-padding-bottom-lg);
  }

  &.form-control-sm {
    @include form-control-size(0, $textfield-font-size-sm, $textfield-height-sm, $textfield-padding-top-sm, $textfield-padding-bottom-sm);
  }
}



// Style of Material design `select` should also be applied to `.custom-select`

.custom-select {
  @extend %form-control;

  display: inline-block;
  vertical-align: middle;
  width: auto;
}
<commit_msg>use vars defined in $palettes instead of hardcoded colours for form validation states<commit_after>.form-control,
%form-control {
  @include form-control-size($textfield-border-width, $textfield-font-size, $textfield-height, $textfield-padding-top, $textfield-padding-bottom);
  @include transition-standard(border-bottom-color);

  background-clip: padding-box;
  background-color: transparent;
  background-image: none;
  border: 0;
  border-bottom: $textfield-border-width solid $textfield-border-color;
  border-radius: 0;
  box-shadow: none;
  color: inherit;
  display: block;
  width: 100%;

  &::-ms-expand {
    background-color: transparent;
    border: 0;
  }

  &::placeholder {
    color: $textfield-hint-color;
    opacity: 1;
  }

  // Active, focus, hover
  &:focus {
    border-bottom-color: $textfield-border-color-focus;
    border-bottom-width: ($textfield-border-width + 1);
    outline: 0;
  }

  // Disbaled
  &:disabled,
  &[readonly] {
    border-bottom-style: dotted;
    color: $textfield-color-disabled;
    opacity: 1;
  }
}

// Colour
@each $color in $palettes {
  $i: index($palettes, $color);

  .form-control-#{$color} {
    &,
    &:focus {
      border-bottom-color: nth($palettes-color, $i);
    }

    &::placeholder {
      color: nth($palettes-color-light, $i);
    }
  }
}

// Size
.form-control-lg,
%form-control-lg {
  @include form-control-size($textfield-border-width, $textfield-font-size-lg, $textfield-height-lg, $textfield-padding-top-lg, $textfield-padding-bottom-lg);
}

.form-control-sm,
%form-control-sm {
  @include form-control-size($textfield-border-width, $textfield-font-size-sm, $textfield-height-sm, $textfield-padding-top-sm, $textfield-padding-bottom-sm);
}

// Special treatment for some elements
input {
  &[type="color"],
  &[type="date"],
  &[type="datetime-local"],
  &[type="month"],
  &[type="time"],
  &[type="week"] {
    &.form-control {
      height: $textfield-height;
    }

    &.form-control-lg,
    &%form-control-lg {
      height: $textfield-height-lg;
    }

    &.form-control-sm,
    &%form-control-sm {
      height: $textfield-height-sm;
    }
  }

  &[type="color"] {
    &.form-control {
      min-width: $textfield-font-size;
    }

    &.form-control-lg,
    &%form-control-lg {
      min-width: $textfield-font-size-lg;
    }

    &.form-control-sm,
    &%form-control-sm {
      min-width: $textfield-font-size-sm;
    }
  }
}

select {
  &.form-control,
  &%form-control {
    appearance: none;

    @include media-moz-webkit {
      $select-bg-size: (($material-icon-size / $font-size-root * 1rem / $textfield-font-size) * $textfield-font-size);

      background-image: $caret-bg;
      background-position: 100% ($textfield-height / 2 - $select-bg-size / 2);
      background-repeat: no-repeat;
      background-size: $select-bg-size $select-bg-size;
      padding-right: $select-bg-size;

      &[multiple],
      &[size] {
        background-image: none;
        height: auto;
        padding-right: 0;
      }
    }
  }

  &.form-control-lg,
  &%form-control-lg {
    @include media-moz-webkit {
      $select-bg-size-lg: (($material-icon-size / $font-size-root * 1rem / $textfield-font-size) * $textfield-font-size-lg);

      background-position: 100% ($textfield-height-lg / 2 - $select-bg-size-lg / 2);
      background-size: $select-bg-size-lg $select-bg-size-lg;
      padding-right: $select-bg-size-lg;
    }
  }

  &.form-control-sm,
  &%form-control-sm {
    @include media-moz-webkit {
      $select-bg-size-sm: (($material-icon-size / $font-size-root * 1rem / $textfield-font-size) * $textfield-font-size-sm);

      background-position: 100% ($textfield-height-sm / 2 - $select-bg-size-sm / 2);
      background-size: $select-bg-size-sm $select-bg-size-sm;
      padding-right: $select-bg-size-sm;
    }
  }
}

textarea {
  &.form-control {
    height: auto;
  }
}



// Form control state

@each $color in $palettes {
  $i: index($palettes, $color);

  .has-#{$color} {
    @include form-control-validation(nth($palettes-color, $i));
  }
}



// Form control static

.form-control-static {
  @include form-control-size(0, $textfield-font-size, $textfield-height, $textfield-padding-top, $textfield-padding-bottom);

  border: 0;
  margin-bottom: 0;

  &.form-control-lg {
    @include form-control-size(0, $textfield-font-size-lg, $textfield-height-lg, $textfield-padding-top-lg, $textfield-padding-bottom-lg);
  }

  &.form-control-sm {
    @include form-control-size(0, $textfield-font-size-sm, $textfield-height-sm, $textfield-padding-top-sm, $textfield-padding-bottom-sm);
  }
}



// Style of Material design `select` should also be applied to `.custom-select`

.custom-select {
  @extend %form-control;

  display: inline-block;
  vertical-align: middle;
  width: auto;
}

{'fraction_non_alphanumeric': 0.17559803614331976, 'fraction_numerical': 0.00804345555207354, 'mean_word_length': 2.89979633401222, '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': '2348807', 'n_tokens_mistral': 3606, 'n_tokens_neox': 3464, 'n_words': 560}