form-group.scss

// stylelint-disable selector-max-compound-selectors
// stylelint-disable selector-max-type

// Form groups
//
// Usage:
//
// <div class="form-group">
//   <div class="form-group-header"> containing the label
//   <div class="form-group-body"> containing the form elements
// </div>

.form-group {
  // stylelint-disable-next-line primer/spacing
  margin: 15px 0;

  // Autocomplete with embedded icon
  .form-control.autocomplete-embedded-icon-wrap {
    &:focus-within {
      background-color: var(--bgColor-default, var(--color-canvas-default));
    }
  }

  // Text fields
  .form-control {
    // stylelint-disable-next-line primer/responsive-widths
    width: 440px;
    max-width: 100%;
    // stylelint-disable-next-line primer/spacing
    margin-right: 5px;
    background-color: var(--bgColor-muted, var(--color-canvas-inset));

    &:focus {
      background-color: var(--bgColor-default, var(--color-canvas-default));
    }

    &.shorter {
      width: 130px;
    }

    &.short {
      width: 250px;
    }

    &.input-block,
    &.long {
      width: 100%;
    }
  }

  // Textarea
  // stylelint-disable selector-no-qualifying-type
  textarea.form-control {
    width: 100%;
    height: 200px;
    min-height: 200px;

    &.short {
      height: 50px;
      min-height: 50px;
    }
  }
  // stylelint-enable selector-no-qualifying-type

  // The Label
  dt, // TODO: Deprecate
  .form-group-header {
    // stylelint-disable-next-line primer/spacing
    margin: 0 0 6px;
  }

  label {
    // fix for chrome bug, see https://github.com/github/github/issues/53931
    position: static;
  }

  &.flattened dt, // TODO: Deprecate
  &.flattened .form-group-header {
    float: left;
    margin: 0;
    // stylelint-disable-next-line primer/typography
    line-height: 32px;
  }

  &.flattened dd, // TODO: Deprecate
  &.flattened .form-group-body {
    // stylelint-disable-next-line primer/typography
    line-height: 32px;
  }

  //
  // Form Elements
  //
  // stylelint-disable selector-no-qualifying-type
  dd, // TODO: Deprecate
  .form-group-body {
    h4 {
      margin: var(--base-size-4) 0 0;

      &.is-error {
        color: var(--fgColor-danger, var(--color-danger-fg));
      }

      &.is-success {
        color: var(--fgColor-success, var(--color-success-fg));
      }

      + .note {
        margin-top: 0;
      }
    }
  }
  // stylelint-enable selector-no-qualifying-type

  //
  // Variants
  //

  &.required {
    dt label::after, // TODO: Deprecate
    .form-group-header label::after {
      // stylelint-disable-next-line primer/spacing
      padding-left: 5px;
      color: var(--fgColor-danger, var(--color-danger-fg));
      content: '*';
    }
  }

  // Form AJAX states
  //
  // Form fields that need feedback for AJAX loading, success
  // states and errored states.
  .success,
  .error,
  .indicator {
    display: none;
    // stylelint-disable-next-line primer/typography
    font-size: $font-size-small;
    // stylelint-disable-next-line primer/typography
    font-weight: $font-weight-bold;
  }

  &.loading {
    opacity: 0.5;

    .indicator {
      display: inline;
    }

    .spinner {
      display: inline-block;
      vertical-align: middle;
    }
  }

  &.successful {
    .success {
      display: inline;
      color: var(--fgColor-success, var(--color-success-fg));
    }
  }

  // Form validation
  //
  // Our inline errors

  &.successed,
  &.warn,
  &.errored {
    .success,
    .warning,
    .error {
      position: absolute;
      z-index: 10;
      display: block; // Show up in errored/warn state
      max-width: 450px; // Keep our long errors readable
      padding: var(--base-size-4) var(--base-size-8);
      margin: var(--base-size-8) 0 0;
      // stylelint-disable-next-line primer/typography
      font-size: $font-size-small;
      // stylelint-disable-next-line primer/typography
      font-weight: $font-weight-normal;
      // stylelint-disable-next-line primer/borders
      border-style: $border-style;
      // stylelint-disable-next-line primer/borders
      border-width: $border-width;
      // stylelint-disable-next-line primer/borders
      border-radius: $border-radius;

      &::after,
      &::before {
        position: absolute;
        bottom: 100%;
        // stylelint-disable-next-line primer/spacing
        left: 10px;
        z-index: 15;
        width: 0;
        height: 0;
        pointer-events: none;
        content: ' ';
        // stylelint-disable-next-line primer/borders, primer/colors
        border: $border-style transparent;
      }

      &::after {
        // stylelint-disable-next-line primer/borders
        border-width: 5px;
      }

      &::before {
        // stylelint-disable-next-line primer/spacing
        margin-left: -1px;
        // stylelint-disable-next-line primer/borders
        border-width: 6px;
      }
    }
  }

  &.successed {
    .success {
      color: var(--fgColor-default, var(--color-fg-default));
      background-color: var(--bgColor-default, var(--color-canvas-default)); // Makes sure the background is opaque to cover any content underneath
      background-image: linear-gradient(var(--bgColor-success-muted, var(--bgColor-success-muted, var(--color-success-subtle))), var(--color-success-subtle));
      border-color: var(--borderColor-success-muted, var(--color-success-muted));

      &::after {
        border-bottom-color: var(--borderColor-success-muted, var(--color-success-muted));
      }

      &::before {
        border-bottom-color: var(--borderColor-success-muted, var(--color-success-muted));
      }
    }
  }

  &.warn {
    .form-control:not(:focus, :focus-visible) {
      border-color: var(--borderColor-attention-emphasis, var(--color-attention-emphasis));
    }

    .warning {
      color: var(--fgColor-default, var(--color-fg-default));
      background-color: var(--bgColor-default, var(--color-canvas-default)); // Makes sure the background is opaque to cover any content underneath
      background-image: linear-gradient(var(--bgColor-attention-muted, var(--bgColor-attention-muted, var(--color-attention-subtle))), var(--color-attention-subtle));
      border-color: var(--borderColor-attention-muted, var(--color-attention-muted));

      &::after {
        border-bottom-color: var(--borderColor-attention-muted, var(--color-attention-muted));
      }

      &::before {
        border-bottom-color: var(--borderColor-attention-muted, var(--color-attention-muted));
      }
    }
  }

  &.errored {
    .form-control:not(:focus, :focus-visible) {
      border-color: var(--borderColor-danger-emphasis, var(--color-danger-emphasis));
    }

    label {
      color: var(--fgColor-danger, var(--color-danger-fg));
    }

    .error {
      color: var(--fgColor-default, var(--color-fg-default));
      background-color: var(--bgColor-default, var(--color-canvas-default)); // Makes sure the background is opaque to cover any content underneath
      background-image: linear-gradient(var(--bgColor-danger-muted, var(--bgColor-danger-muted, var(--color-danger-subtle))), var(--color-danger-subtle));
      border-color: var(--borderColor-danger-muted, var(--color-danger-muted));

      &::after {
        border-bottom-color: var(--borderColor-danger-muted, var(--color-danger-muted));
      }

      &::before {
        border-bottom-color: var(--borderColor-danger-muted, var(--color-danger-muted));
      }
    }
  }
}

// tooltip
.note {
  min-height: 17px;
  // stylelint-disable-next-line primer/spacing
  margin: var(--base-size-4) 0 2px;
  // stylelint-disable-next-line primer/typography
  font-size: $font-size-small;
  color: var(--fgColor-muted, var(--color-fg-muted));

  .spinner {
    // stylelint-disable-next-line primer/spacing
    margin-right: 3px;
    vertical-align: middle;
  }
}