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

$gf-form-margin: 0.4rem;

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

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

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

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

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

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

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

.gf-form-label {
  padding: $input-padding-y $input-padding-x;
  line-height: $input-line-height;
  flex-shrink: 0;

  background-color: $input-label-bg;
  display: block;
  font-size: $font-size-sm;
  margin-right: $gf-form-margin;
  border: $input-btn-border-width solid transparent;
}

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

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

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

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

.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; }
}

.gf-form-btn {
  padding: $input-padding-y $input-padding-x;
  line-height: $input-line-height;
  flex-shrink: 0;
  flex-grow: 0;
}