rsuite/es/InputGroup/styles/common.less

A suite of react components

@import '../../styles/common';
@import '../../Form/styles/mixin';
@import '../../Button/styles/mixin';

//
// Input groups
// --------------------------------------------------

// Base styles
// -------------------------
.@{ns}input-group {
  position: relative; // For dropdowns
  display: table;
  border-radius: @input-border-radius;
  overflow: hidden;
  transition: @input-transition;
  width: 100%;

  &-disabled {
    &,
    .@{ns}input,
    .@{ns}input-group-addon,
    .@{ns}input-group-btn {
      background-color: @input-bg-disabled;
      color: @input-color-disabled;
      cursor: @cursor-disabled;
    }
  }

  // Reset border
  &:not(.@{ns}input-group-inside) {
    border: 1px solid @input-border;

    &:not(.@{ns}input-group-disabled):hover,
    &:not(.@{ns}input-group-disabled).@{ns}input-group-focus {
      border-color: @input-border-focus;
    }

    .@{ns}input-number,
    .@{ns}input-group-addon,
    .@{ns}input,
    .@{ns}input-group-btn,
    .@{ns}picker-date .@{ns}picker-toggle {
      border: none;
      border-radius: 0;
    }

    .@{ns}input-number:not(:last-child) .@{ns}input-number {
      &-btn-group-vertical {
        border-radius: 0;
      }

      &-touchspin-up {
        border-top-right-radius: 0;
      }

      &-touchspin-down {
        border-bottom-right-radius: 0;
      }
    }

    // @FIXED: first-child haven't border radius in ie10.
    & > :first-child,
    .@{ns}auto-complete:first-child .@{ns}input,
    .@{ns}picker-date:first-child .@{ns}picker-toggle {
      .border-left-radius(@input-border-radius);
    }

    & > :last-child,
    .@{ns}auto-complete:last-child .@{ns}input,
    .@{ns}picker-date:last-child .@{ns}picker-toggle {
      .border-right-radius(@input-border-radius);
    }
  }

  .@{ns}input {
    // Ensure that the input is always above the *appended* addon button for
    // proper border colors.
    position: relative;
    z-index: @zindex-input;

    // IE9 fubars the placeholder attribute in text inputs and the arrows on
    // select elements in input groups. To fix it, we float the input. Details:
    // https://github.com/twbs/bootstrap/issues/11561#issuecomment-28936855
    float: left;
    width: 100%;
    margin-bottom: 0;

    &:focus {
      z-index: (@zindex-input+1);
    }
  }

  input.@{ns}input ~ .@{ns}input-group-addon {
    border-left: none;
    left: auto;
    right: 0;
  }

  //FIXED: The icon between two input has 1px border.
  input.@{ns}input ~ .@{ns}input-group-addon:not(:last-child) {
    border-right: 0;
  }

  &.@{ns}input-group-inside {
    width: 100%;
    border-radius: 0;

    .@{ns}input {
      display: block;
      width: 100%;
      padding-right: @input-group-padding-for-add-on-base;
    }

    .@{ns}input-group-btn,
    .@{ns}input-group-addon {
      position: absolute;
      z-index: @zindex-input-group-icon;
      width: auto;
    }

    .@{ns}input-group-btn {
      .btn-subtle;

      color: @input-color;
      position: absolute;
      left: @input-border-width;
      top: @input-border-width;
      .reset-inside-input-group-btn-size(base);

      // reset border radius
      &:first-child {
        .border-left-radius(@input-border-radius);
      }

      &:last-child {
        .border-right-radius(@input-border-radius);
      }
    }

    .@{ns}input-group-addon {
      left: 0;
      top: 0;
      background: none;
      border: none;
      padding: 11px 13px 8px 13px;
    }

    .@{ns}input-group-btn ~ .@{ns}auto-complete > input.@{ns}input,
    .@{ns}input-group-addon ~ .@{ns}auto-complete > input.@{ns}input,
    .@{ns}input-group-btn ~ input.@{ns}input,
    .@{ns}input-group-addon ~ input.@{ns}input {
      padding-left: @input-group-padding-for-add-on-base;
      padding-right: 12px;
    }

    input.@{ns}input ~ .@{ns}input-group-btn,
    .@{ns}auto-complete ~ .@{ns}input-group-addon {
      left: inherit;
      right: 0;
    }

    input.@{ns}input ~ .@{ns}input-group-btn,
    .@{ns}auto-complete ~ .@{ns}input-group-btn {
      left: inherit;
      right: @input-border-width;
    }
  }
}

// Sizing options
//
// Remix the default form control sizing classes into new ones for easier
// manipulation.

//Reset Input size
.@{ns}input-group-lg {
  > .@{ns}input {
    .input-lg();
  }

  .reset-input-group-children-size(large);

  &.@{ns}input-group:not(.@{ns}input-group-inside) > .@{ns}input-group-addon {
    padding-top: 8px;
    padding-bottom: 8px;
  }
}

.@{ns}input-group-md {
  > .@{ns}input {
    .input-md();
  }

  .reset-input-group-children-size(base);

  &.@{ns}input-group:not(.@{ns}input-group-inside) > .@{ns}input-group-addon {
    padding-top: 6px;
    padding-bottom: 6px;
  }
}

.@{ns}input-group-sm {
  > .@{ns}input {
    .input-sm();
  }

  .reset-input-group-children-size(small);

  &.@{ns}input-group:not(.@{ns}input-group-inside) > .@{ns}input-group-addon {
    padding-top: 3px;
    padding-bottom: 3px;
  }
}

.@{ns}input-group-xs {
  > .@{ns}input {
    .input-xs();
  }

  .reset-input-group-children-size(extra-small);
}

// Reset input group addon size.
.@{ns}input-group.@{ns}input-group-lg > .@{ns}input-group-addon {
  .input-lg();
  .reset-input-group-addon-size(large);
}

.@{ns}input-group.@{ns}input-group-md > .@{ns}input-group-addon {
  .input-base();
  .reset-input-group-addon-size(base);
}

.@{ns}input-group.@{ns}input-group-sm > .@{ns}input-group-addon {
  .input-sm();
  .reset-input-group-addon-size(small);
}

.@{ns}input-group.@{ns}input-group-xs > .@{ns}input-group-addon {
  .input-xs();
  .reset-input-group-addon-size(extra-small);
}

// Reset inside input group button size.
.@{ns}input-group-inside.@{ns}input-group-lg > .@{ns}input-group-btn {
  .input-lg();
  .reset-inside-input-group-btn-size(large);
}

.@{ns}input-group-inside.@{ns}input-group-md > .@{ns}input-group-btn {
  .input-md();
  .reset-inside-input-group-btn-size(base);
}

.@{ns}input-group-inside.@{ns}input-group-sm > .@{ns}input-group-btn {
  .input-sm();
  .reset-inside-input-group-btn-size(small);
}

.@{ns}input-group-inside.@{ns}input-group-xs > .@{ns}input-group-btn {
  .input-xs();
  .reset-inside-input-group-btn-size(extra-small);
}

// Display as table-cell
// -------------------------
.@{ns}input-group-addon,
.@{ns}input-group-btn,
.@{ns}input-group:not(.@{ns}input-group-inside) .@{ns}input {
  display: table-cell;

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

// Addon and addon wrapper for buttons
.@{ns}input-group-addon,
.@{ns}input-group-btn {
  width: 1%;
  white-space: nowrap;
  vertical-align: middle; // Match the inputs
  color: @input-color;
}

// Text input groups
// -------------------------
.@{ns}input-group-addon {
  padding: @padding-base-vertical @padding-base-horizontal;
  font-size: @font-size-base;
  font-weight: normal;
  line-height: 1;
  color: @input-color;
  text-align: center;
  background-color: @input-group-addon-bg;
  border: 1px solid @input-group-addon-border-color;
  border-radius: @input-border-radius;

  // Sizing
  &.@{ns}input-sm {
    padding: @padding-small-vertical @padding-small-horizontal;
    font-size: @font-size-small;
    border-radius: @input-border-radius;
  }

  &.@{ns}input-xs {
    padding: @padding-extra-small-horizontal @padding-extra-small-horizontal;
    font-size: @font-size-small;
    border-radius: @input-border-radius;
  }

  &.@{ns}input-lg {
    padding: @padding-large-vertical @padding-large-horizontal;
    font-size: @font-size-large;
    border-radius: @input-border-radius;
  }

  // Nuke default margins from checkboxes and radios to vertically center within.
  input[type='radio'],
  input[type='checkbox'] {
    margin-top: 0;
  }
}

// Button input groups
// -------------------------
.@{ns}input-group-btn {
  position: relative;
  // Jankily prevent input button groups from wrapping with `white-space` and
  // `font-size` in combination with `inline-block` on buttons.
  //font-size: 0;
  white-space: nowrap;
  border-radius: 0;

  // Negative margin for spacing, position for bringing hovered/focused/actived
  // element above the siblings.
  > .@{ns}btn {
    position: relative;

    + .@{ns}btn {
      margin-left: -1px;
    }

    // Bring the "active" button to the front
    &:hover,
    &:focus,
    &:active {
      z-index: 2;
    }
  }

  // Negative margin to only have a 1px border between the two
  &:first-child {
    > .@{ns}btn,
    > .@{ns}btn-group {
      margin-right: -1px;
      border-right: medium none;
    }
  }

  &:last-child {
    > .@{ns}btn,
    > .@{ns}btn-group {
      z-index: 2;
      margin-left: -1px;
    }
  }
}