grafana/public/sass/components/_gf-form.scss

@use 'sass:list';
$input-border: 1px solid $input-border-color;

.gf-form {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  text-align: left;
  position: relative;
  margin-bottom: $space-xs;

  &--offset-1 {
    margin-left: $spacer;
  }

  &--grow {
    flex-grow: 1;
  }

  &--flex-end {
    justify-content: flex-end;
  }

  &--align-center {
    align-content: center;
  }

  &--alt {
    flex-direction: column;
    align-items: flex-start;

    .gf-form-label {
      padding: 4px 0;
    }
  }
}

.gf-form--has-input-icon {
  position: relative;
  margin-right: $space-xs;

  .gf-form-input-icon {
    position: absolute;
    top: 8px;
    font-size: $font-size-lg;
    left: 10px;
    color: $input-color-placeholder;
  }

  > input {
    padding-left: 35px;

    &:focus + .gf-form-input-icon {
      color: $text-muted;
    }
  }

  .Select--multi .Select-multi-value-wrapper,
  .Select-placeholder {
    padding-left: 30px;
  }
}

.gf-form-disabled {
  color: $text-color-weak;

  .gf-form-select-wrapper::after {
    color: $text-color-weak;
  }

  a,
  .gf-form-input {
    color: $text-color-weak;
  }
}

.gf-form-group {
  margin-bottom: $spacer * 2.5;
}

.gf-form-inline {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-content: flex-start;

  &--nowrap {
    flex-wrap: nowrap;
  }

  &--xs-view-flex-column {
    flex-direction: row;
    flex-wrap: nowrap;
    @include media-breakpoint-down(xs) {
      flex-direction: column;
    }
  }

  .select-container {
    margin-right: $space-xs;
  }

  .gf-form-spacing {
    margin-right: $space-xs;
  }
}

.gf-form-button-row {
  padding-top: $spacer * 1.5;
  a,
  button {
    margin-right: $spacer;
  }
}

.gf-form-label {
  display: flex;
  align-items: center;
  padding: $input-padding;
  flex-shrink: 0;
  font-weight: $font-weight-semi-bold;
  font-size: $font-size-sm;
  background-color: $input-label-bg;
  height: $input-height;
  line-height: $input-height;
  margin-right: $space-xs;
  border-radius: $input-border-radius;
  justify-content: space-between;
  border: none;

  &--grow {
    flex-grow: 1;
  }

  &--error {
    color: $critical;
  }

  &--transparent {
    background-color: transparent;
    border: 0;
    text-align: right;
    padding-left: 0px;
  }

  &--variable {
    color: $variable;
    background: $panel-bg;
    border: $panel-border;
  }

  &--dashlink {
    background: $panel-bg;
    border: $panel-border;
  }

  &--justify-left {
    justify-content: left;
  }

  &--btn {
    border: none;
    border-radius: $border-radius;

    &:hover {
      background: $list-item-hover-bg;
      color: $link-color;
    }
  }

  &:disabled {
    color: $text-color-weak;
  }
}

.gf-form-label + .gf-form-label {
  margin-right: $space-xs;
}

.gf-form-pre {
  display: block !important;
  flex-grow: 1;
  margin: 0;
  margin-right: $space-xs;
  border: $border-width solid transparent;
  border-left: none;
  @include border-radius($input-border-radius);
}

.gf-form-textarea {
  max-width: 650px;
}

.gf-form-input {
  display: block;
  width: 100%;
  height: $input-height;
  padding: $input-padding;
  font-size: $font-size-md;
  line-height: $input-line-height;
  color: $input-color;
  background-color: $input-bg;
  background-image: none;
  background-clip: padding-box;
  border: $input-border;
  border-radius: $input-border-radius;
  margin-right: $space-xs;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  // text areas should be scrollable
  @at-root textarea#{&} {
    overflow: auto;
    white-space: pre-wrap;
    padding: 6px $space-sm;
    min-height: $input-height;
    height: auto;
  }

  // Unstyle the caret on `<select>`s in IE10+.
  &::-ms-expand {
    background-color: transparent;
    border: 0;
    display: none;
  }

  // Customize the `:focus` state to imitate native WebKit styles.
  @include form-control-focus();

  // Placeholder
  &::placeholder {
    color: $input-color-placeholder;
    opacity: 1;
  }

  &:disabled,
  &[readonly] {
    background-color: $input-bg-disabled;
    // iOS fix for unreadable disabled content; see https://github.com/twbs/bootstrap/issues/11655.
    opacity: 1;
  }

  &:disabled {
    cursor: $cursor-disabled;
  }

  &.gf-size-auto {
    width: auto;
  }

  &--dropdown {
    padding-right: $space-lg;
    position: relative;
    display: flex;
    align-items: center;

    &::after {
      position: absolute;
      top: 36%;
      right: 11px;
      font-size: 11px;
      background-color: transparent;
      color: $text-color;
      font: normal normal normal list.slash($font-size-sm, 1) FontAwesome;
      content: '\f0d7';
      pointer-events: none;
    }
  }

  &--small {
    padding-top: 4px;
    padding-bottom: 4px;
    font-size: $font-size-sm;
  }

  &--plaintext {
    white-space: unset;
  }

  &--has-help-icon {
    padding-right: $space-xl;
  }
}

.gf-form-hint {
  width: 100%;
}

.gf-form-hint-text {
  display: block;
  text-align: right;
  padding-top: 0.5em;
}

.gf-form-select-wrapper {
  position: relative;
  background-color: $input-bg;
  margin-right: $space-xs;

  .gf-form-select-icon {
    position: absolute;
    z-index: 1;
    left: $input-padding;
    top: 50%;
    margin-top: -7px;

    + .gf-form-input {
      position: relative;
      z-index: 2;
      padding-left: $space-xl;
      background-color: transparent;

      option {
        // Firefox
        color: $black;
      }
    }
  }

  .gf-form-input {
    margin-right: 0;
    line-height: $input-height;
  }

  select.gf-form-input {
    text-indent: 0.01px;
    text-overflow: '';
    padding-right: $space-xl;
    appearance: none;

    &:-moz-focusring {
      outline: none;
      color: transparent;
      text-shadow: 0 0 0 $text-color;
    }

    &.ng-empty {
      color: $text-color-weak;
    }
  }

  &::after {
    position: absolute;
    top: 36%;
    right: 11px;
    background-color: transparent;
    color: $text-color;
    font: normal normal normal list.slash($font-size-sm, 1) FontAwesome;
    content: '\f0d7';
    pointer-events: none;
    font-size: 11px;
  }

  &--has-help-icon {
    &::after {
      right: $space-xl;
    }
  }
}

.gf-form--v-stretch {
  align-items: stretch;
}

.gf-form-btn {
  padding: $input-padding;
  margin-right: $space-xs;
  line-height: $input-line-height;
  font-size: $font-size-sm;

  flex-shrink: 0;
  flex-grow: 0;
}

.natural-language-input {
  &input[type='number'] {
    font-size: $font-size-base;
    line-height: $input-line-height;
    margin: -6px -5px 0 5px;
    padding: $space-xs;
  }
}

.gf-form-dropdown-typeahead {
  //margin-right: $space-xs; ?
  position: relative;

  &::after {
    position: absolute;
    top: 35%;
    right: $space-sm;
    background-color: transparent;
    color: $input-color;
    font: normal normal normal list.slash($font-size-sm, 1) FontAwesome;
    content: '\f0d7';
    pointer-events: none;
    font-size: 11px;
  }
}

.gf-form-help-icon {
  flex-grow: 0;
  color: $text-color-weak;

  &--bold {
    color: $text-color-emphasis;
    padding-left: 0;
  }

  &--right-absolute {
    position: absolute;
    right: $spacer;
    top: 6px;
  }

  &--right-normal {
    float: right;
  }

  &--header {
    margin-bottom: $space-xxs;
  }

  &--small-padding {
    padding-left: 4px;
  }

  &:hover {
    color: $text-color;
  }
}

select.gf-form-input ~ .gf-form-help-icon {
  right: 10px;
}

.gf-form-icon--right-absolute {
  position: absolute;
  right: $spacer;
  top: 10px;
  color: $text-muted;
}

.cta-form {
  position: relative;
  padding: $space-lg;
  background-color: $empty-list-cta-bg;
  margin-bottom: $space-lg;
  border-top: 3px solid $green-base;
}

.cta-form__close {
  background: transparent;
  padding: 4px 8px 4px 9px;
  border: none;
  position: absolute;
  right: 0;
  top: -2px;
  font-size: $font-size-md;

  &:hover {
    color: $text-color-strong;
  }
}

.cta-form__bar {
  display: flex;
  align-items: center;
  align-content: center;
  margin-bottom: 20px;
}

.cta-form__bar-header {
  font-size: $font-size-h4;
  padding-right: 20px;
}