grafana/public/sass/base/_forms.scss

//
// Forms
// --------------------------------------------------

// GENERAL STYLES
// --------------

// Groups of fields with labels on top (legends)
legend {
  display: block;
  width: 100%;
  padding: 0;
  margin-bottom: $line-height-base;
  font-size: $font-size-base * 1.5;
  line-height: $line-height-base * 2;
  color: $gray-3;
  border: 0;
  border-bottom: 1px solid #e5e5e5;

  // Small
  small {
    font-size: $line-height-base * 0.75;
    color: $gray-2;
  }
}

// Reset height since textareas have rows
// Set font for forms
label,
input,
button,
select,
textarea {
  @include font-shorthand($font-size-base, normal, $line-height-base); // Set size, weight, line-height here
}
input,
button,
select,
textarea {
  font-family: $font-family-sans-serif; // And only set font-family here for those that need it (note the missing label element)
}

// Identify controls by their labels
label {
  display: block;
}

input,
select {
  background-color: $input-bg;
  color: $input-color;
  border: none;
  box-shadow: none;
}

textarea {
  height: auto;
}

// Reset width of input images, buttons, radios, checkboxes
input[type='file'],
input[type='image'],
input[type='submit'],
input[type='reset'],
input[type='button'],
input[type='radio'],
input[type='checkbox'] {
  width: auto; // Override of generic input selector
}

// Set the height of select and file controls to match text inputs
select,
input[type='file'] {
  height: $input-height; /* In IE7, the height of the select element cannot be changed by height, only font-size */
  line-height: $input-height;
}

// Make select elements obey height by applying a border
select {
  width: 220px; // default input width + 10px of padding that doesn't get applied
  border: 1px solid $input-border-color;
  background-color: $input-bg; // Chrome on Linux and Mobile Safari need background-color
}

// Make multiple select elements height not fixed
select[multiple],
select[size] {
  height: auto;
}

// Focus for select, file, radio, and checkbox
select:focus,
input[type='file']:focus,
input[type='radio']:focus,
input[type='checkbox']:focus {
  @include tab-focus();
}

// not a big fan of number fields
input[type='number']::-webkit-outer-spin-button,
input[type='number']::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input[type='number'] {
  -moz-appearance: textfield;
}
// Placeholder
// -------------------------

// Placeholder text gets special styles because when browsers invalidate entire lines if it doesn't understand a selector
input,
textarea {
  @include placeholder();
}

// INPUT SIZES
// -----------

// General classes for quick sizes
.input-mini {
  width: 60px;
}
.input-small {
  width: 90px;
}
.input-medium {
  width: 150px;
}
.input-large {
  width: 210px;
}
.input-xlarge {
  width: 270px;
}
.input-xxlarge {
  width: 530px;
}

// GRID SIZING FOR INPUTS
// ----------------------

// DISABLED STATE
// --------------

// Disabled and read-only inputs
input[disabled],
select[disabled],
textarea[disabled],
input[readonly],
select[readonly],
textarea[readonly] {
  cursor: $cursor-disabled;
  background-color: $input-bg-disabled;
}

// Explicitly reset the colors here
input[type='radio'][disabled],
input[type='checkbox'][disabled],
input[type='radio'][readonly],
input[type='checkbox'][readonly] {
  cursor: $cursor-disabled;
  background-color: transparent;
}

input[type='text'].input-fluid {
  width: 100%;
  box-sizing: border-box;
  padding: 10px;
  font-size: 16px;
  -moz-box-sizing: border-box;
  height: 100%;
}

input[type='checkbox'].cr1 {
  display: none;
}

.editor-option label.cr1 {
  display: inline-block;
  margin: 5px 0 1px 0;
}

label.cr1 {
  display: inline-block;
  height: 18px;
  position: relative;
  clear: none;
  text-indent: 2px;
  margin: 0 0 0px 0;
  padding: 0 0 0 20px;
  vertical-align: top;
  background: url($checkboxImageUrl) left top no-repeat;
  cursor: pointer;
}

input[type='checkbox'].cr1:checked + label {
  background: url($checkboxImageUrl) 0px -18px no-repeat;
}

.gf-fluid-input {
  border: none;
  display: block;
  overflow: hidden;
  padding-right: 10px;
  input[type='text'] {
    width: 100%;
    padding: 5px 6px;
    height: 100%;
    box-sizing: border-box;
  }
  textarea {
    width: 100%;
    padding: 5px 6px;
    height: 100%;
    box-sizing: border-box;
  }
}

// Form control feedback states
//
// Apply contextual and semantic states to individual form controls.

.form-control-success,
.form-control-warning,
.form-control-danger {
  padding-right: ($input-padding-x * 3);
  background-repeat: no-repeat;
  background-position: center right ($input-height / 4);
  background-size: ($input-height / 2) ($input-height / 2);
}

// Form validation states
.has-success {
  @include form-control-validation($brand-success);

  .form-control-success {
    background-image: $form-icon-success;
  }
}

.has-warning {
  @include form-control-validation($brand-warning);

  .form-control-warning {
    background-image: $form-icon-warning;
  }
}

.has-danger {
  @include form-control-validation($brand-danger);

  .form-control-danger {
    background-image: $form-icon-danger;
  }
}