react-forms/themes/bootstrap/index.less

Forms library for React

/**
 * Field
 */
.rf-Field {
  .form-group();
  padding: 5px;

  textarea,
  input[type="text"],
  input[type="password"],
  input[type="datetime"],
  input[type="datetime-local"],
  input[type="date"],
  input[type="month"],
  input[type="time"],
  input[type="week"],
  input[type="number"],
  input[type="email"],
  input[type="url"],
  input[type="search"],
  input[type="tel"],
  input[type="color"] {
    .form-control();
  }
}

.rf-Field--invalid {
  @border-color: @state-danger-text;

  textarea,
  input[type="text"],
  input[type="password"],
  input[type="datetime"],
  input[type="datetime-local"],
  input[type="date"],
  input[type="month"],
  input[type="time"],
  input[type="week"],
  input[type="number"],
  input[type="email"],
  input[type="url"],
  input[type="search"],
  input[type="tel"],
  input[type="color"] {
    border-color: @border-color;
    .box-shadow(inset 0 1px 1px rgba(0,0,0,.075)); // Redeclare so transitions work
    &:focus {
      border-color: darken(@border-color, 10%);
      @shadow: inset 0 1px 1px rgba(0,0,0,.075), 0 0 6px lighten(@border-color, 20%);
      .box-shadow(@shadow);
    }
  }
}

.rf-Field--required {
  .rf-Label__label:after {
    content: '*';
    color: @state-danger-text;
    padding: 0 0.2em;
  }
}

/**
 * Fieldset
 */
.rf-Fieldset {
  .form-group();
}

/**
 * RepeatingFieldset
 */
.rf-RepeatingFieldset {
  .form-group();
}

.rf-RepeatingFieldset__add {
  .btn();
  .btn-sm();
  .btn-success();
}

.rf-RepeatingFieldset__item {
  @padding: 15px;
  .form-group();

  background: lighten(@gray-lighter, 5%);
  position: relative;
  padding: @padding;
}

.rf-RepeatingFieldset__remove {
  .close();
  border: none;
  background: transparent;
  position: absolute;
  top: @padding;
  right: @padding;
}


/**
 * Label
 */
.rf-Label {

}

/**
 * Hint
 */
.rf-Hint {
  font-size: 70%;
  font-weight: normal;
  display: block;
}

/**
 * Message
 */
.rf-Message {
  margin: 5px;
  font-size: 80%;
  color: @state-danger-text;
  display: block;
}