@dabapps/roe/src/less/inputs.less

A collection of React components, styles, mixins, and atomic CSS classes to aid with the development of web applications.

input,
select,
textarea {
  &.error {
    color: @font-color-base;
    border-color: @error;
  }
}

.form-group {
  position: relative;
  margin-top: @form-group-margin;
  margin-bottom: @form-group-margin;
  min-height: @checkbox-size;

  & > label,
  & > input,
  & > select,
  & > button,
  & > textarea,
  & > .input-group,
  & > .input,
  & > .select,
  & > .label,
  & > .button {
    display: inline-block;
    vertical-align: middle;
  }

  & > label,
  & > input,
  & > select,
  & > button,
  & > textarea,
  & > .input-group,
  & > .input,
  & > .select,
  & > .label,
  & > .button {
    margin-top: 0;
    margin-bottom: 0;

    & + label,
    & + input,
    & + select,
    & + button,
    & + textarea,
    & + .input-group,
    & + .input,
    & + .select,
    & + .label,
    & + .button {
      margin-left: @margin-base;
    }
  }

  & > input[type='checkbox'],
  & > input[type='radio'] {
    width: @checkbox-size;

    &:first-child {
      position: absolute;
      top: 50%;
      left: 0;
      margin-top: -@checkbox-size / 2;
    }

    & + label,
    & + .label {
      margin-left: @margin-base + @checkbox-size;
      text-align: left;
    }
  }

  & > label,
  & > .label {
    width: auto;
    text-align: right;

    &:first-child {
      width: @label-width;
    }
  }

  &.no-label > * { // lesshint universalSelector: false
    margin-left: @no-label-offset;
  }

  & > textarea {
    resize: vertical;
  }

  &.block {
    width: 100%;

    &.no-label > * { // lesshint universalSelector: false
      margin-left: 0;
    }

    & > label,
    & > input,
    & > select,
    & > button,
    & > textarea,
    & > .input-group,
    & > .input,
    & > .select,
    & > .label,
    & > .button {
      margin-left: 0;
      text-align: left;
      display: block;
      width: 100%;
    }

    & > input[type='checkbox'],
    & > input[type='radio'] {
      display: inline-block;
      width: @checkbox-size;
    }

    & > .input-group {
      display: table;
    }

    & > label:first-child,
    & > .label:first-child {
      margin-bottom: @form-group-label-margin;
    }
  }
}

.input-group {
  display: inline-table !important; // lesshint importantRule: false
  width: auto;
  margin-top: @margin-large;
  margin-bottom: @margin-large;
  border-collapse: separate;
  border-spacing: 0;

  &.block {
    display: table;
    width: 100%;
  }

  & > * { // lesshint universalSelector: false
    width: 1px;
  }

  & > label,
  & > input,
  & > select,
  & > button,
  & > .input-group-addon,
  & > .input,
  & > .select,
  & > .label,
  & > .button {
    display: table-cell;
    margin-top: 0;
    margin-bottom: 0;
    border: @input-border;
    border-right: @border-none;

    &:first-child {
      border-top-right-radius: 0;
      border-bottom-right-radius: 0;
    }

    &:last-child {
      border: @input-border;
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
    }

    &:not(:last-child):not(:first-child) {
      border-radius: 0;
    }
  }

  & > input,
  & > select,
  & > .input,
  & > .select {
    width: 100%;
  }

  & > .input-group-addon {
    vertical-align: middle;
    height: @input-height;
    padding: @padding-base / 2 @padding-base;
    border-radius: @border-radius-base;
    background-color: @input-group-addon-background;
    line-height: 1em;
  }
}