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

$gf-form-margin: 4px;

.gf-form {
  margin-top: $gf-form-margin;
  margin-right: $gf-form-margin;
  display: flex;
  flex-direction: row;
  align-items: center;

  .checkbox-label {
    display: inline;
    cursor: pointer;
    padding: 8px 7px 8px 4px;
  }

  .cr1 {
    margin-left: 8px;
  }
}

.gf-form-group {
  h3, h2, h4 {
    margin-top: $spacer * 2;
    margin-bottom: $spacer * 1;
  }
}

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

  .gf-form {
    flex-grow: 1;
  }
}

.gf-form-button-row {
  margin-top: 20px;
  margin-bottom: 10px;
}

.gf-form-label {
  flex-shrink: 0;
  background-color: $input-label-bg;
  display: block;
  padding: 8px 7px;
  font-size: $font-size-sm;
  margin-right: $gf-form-margin;
}

.gf-form-checkbox {
  flex-shrink: 0;
}

@each $size, $value in $form-sizes {
  .gf-size-#{$size} { width: $value; }

  .gf-size-max-#{$size} {
    max-width: $value;
  }
}

.gf-size-max { width: 100%; }
.gf-size-auto { width: auto; }


select,
[type=text],
[type=email],
[type=number],
[type=password] {
  &.gf-form-input {
    display: block;
    width: 100%;
    padding: $input-padding-y $input-padding-x;
    font-size: $font-size-base;
    line-height: $input-line-height;
    color: $input-color;
    background-color: $input-bg;
    background-image: none;
    background-clip: padding-box;
    border: $input-btn-border-width solid $input-border-color;
    @include border-radius($input-border-radius);
    @include box-shadow($input-box-shadow);
    transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;

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

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

    // Placeholder
    &::placeholder {
      color: $input-color-placeholder;
      // Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526.
      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; }
}