gitlab-org--gitlab-foss/app/assets/stylesheets/framework/forms.scss

textarea {
  resize: vertical;
}

input {
  border-radius: $border-radius-base;
}

input[type='text'].danger {
  background: $input-danger-bg !important;
  border-color: $red-400;
  text-shadow: 0 1px 1px $white-light;
}

.datetime-controls {
  select {
    width: 100px;
  }
}

.form-actions {
  margin-top: 0;
  margin-bottom: -$gl-padding;
  padding: $gl-padding;
  background-color: $gray-light;
  border-top: 1px solid $border-color;
}

label {
  &.inline-label {
    margin: 0;
  }

  &.label-bold {
    font-weight: $gl-font-weight-bold;
  }
}

.label-wrapper {
  display: block;
  margin: 0;
}

.form-label {
  @extend label;
}

.form-control-label {
  @extend .col-md-2;
}

.inline-input-group {
  width: 250px;
}

.custom-form-control {
  width: 150px;
}

@include media-breakpoint-up(sm) {
  .custom-form-control {
    width: 150px;
  }
}

/* Medium devices (desktops, 992px and up) */
@include media-breakpoint-up(md) {
  .custom-form-control {
    width: 170px;
  }
}

/* Large devices (large desktops, 1200px and up) */
@include media-breakpoint-up(lg) {
  .custom-form-control {
    width: 200px;
  }
}

.help-form .form-group {
  margin-left: 0;
  margin-right: 0;

  .form-control-label {
    font-weight: $gl-font-weight-bold;
    padding-top: 4px;
  }

  .form-control {
    height: 29px;
    background: $white-light;
    font-family: $monospace-font;
  }

  .input-group-prepend .btn,
  .input-group-append .btn {
    padding: 3px $gl-btn-padding;
    background-color: $gray-light;
    border: 1px solid $border-color;
  }

  .text-block {
    line-height: 0.8;
    padding-top: 9px;

    code {
      line-height: 1.8;
    }

    img {
      margin-right: $gl-padding;
    }
  }

  @include media-breakpoint-down(xs) {
    padding: 0 $gl-padding;

    .form-control-label,
    .text-block {
      padding-left: 0;
    }
  }
}

.fieldset-form fieldset {
  margin-bottom: 20px;
}

.form-control {
  @include box-shadow(none);
  border-radius: $border-radius-default;
  padding: $gl-vert-padding $gl-input-padding;

  &.input-short {
    width: $input-short-width;

    @include media-breakpoint-up(md) {
      width: $input-short-md-width;
    }
  }
}

.select-wrapper {
  position: relative;

  .fa-chevron-down {
    position: absolute;
    font-size: 10px;
    right: 10px;
    top: 12px;
    color: $gray-darkest;
    pointer-events: none;
  }
}

.select-control {
  padding-left: 10px;
  padding-right: 10px;
  appearance: none;
  /* stylelint-disable property-no-vendor-prefix */
  -webkit-appearance: none;
  -moz-appearance: none;
  /* stylelint-enable property-no-vendor-prefix */

  &::-ms-expand {
    display: none;
  }
}

.form-control-inline {
  display: inline;
}

.wiki-content {
  margin-top: 35px;
}

.form-group .form-control-label,
.form-group .form-control-label-full-width {
  font-weight: $gl-font-weight-normal;
}


.form-control::placeholder {
  color: $gl-text-color-tertiary;
}

.input-group {
  .select2-container {
    display: table-cell;
    max-width: 180px;
  }

  .input-group-prepend,
  .input-group-append {
    background-color: $input-group-addon-bg;
  }

  .input-group-prepend:not(:first-child):not(:last-child),
  .input-group-append:not(:first-child):not(:last-child) {
    border-left: 0;
    border-right: 0;
  }
}

.form-text.text-muted {
  margin-bottom: 0;
  margin-top: #{$grid-size / 2};
  font-size: $gl-font-size;
}

.gl-field-error,
.invalid-feedback {
  color: $red-500;
  font-size: $gl-font-size;
}

.gl-show-field-errors {
  .form-control:not(textarea) {
    height: 34px;
  }

  .gl-field-success-outline {
    border: 1px solid $green-600;

    &:focus {
      box-shadow: 0 0 0 1px $green-600 inset, 0 1px 1px $gl-field-focus-shadow inset, 0 0 4px 0 $green-600;
      border: 0 none;
    }
  }

  .gl-field-error-outline {
    border: 1px solid $red-500;

    &:focus {
      box-shadow: 0 0 0 1px $red-500 inset, 0 1px 1px $gl-field-focus-shadow inset, 0 0 4px 0 $gl-field-focus-shadow-error;
      border: 0 none;
    }
  }

  .gl-field-success-message {
    color: $green-600;
  }

  .gl-field-error-message {
    color: $red-500;
  }

  .gl-field-hint {
    color: $gl-text-color;
  }
}

@include media-breakpoint-down(xs) {
  .remember-me {
    .remember-me-checkbox {
      margin-top: 0;
    }
  }
}

.input-icon-wrapper {
  position: relative;

  .input-icon-right {
    position: absolute;
    right: 0.8em;
    top: 50%;
    transform: translateY(-50%);
    color: $gray-600;
  }
}

.input-md {
  max-width: $input-md-width;
  width: 100%;
}

.input-lg {
  max-width: $input-lg-width;
  width: 100%;
}

.input-group-text {
  max-height: $input-height;
}