rsuite/InputGroup/styles/index.less

A suite of react components

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

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

// Base styles
// -------------------------
.rs-input-group {
  position: relative; // For dropdowns
  display: flex;
  border-radius: @input-border-radius;
  transition: @input-transition;
  width: 100%;
  cursor: text;
  color: var(--rs-text-primary);
  border: 1px solid var(--rs-border-primary);

  .high-contrast-mode({
    transition: none;
  });

  &:not(.rs-input-group-disabled):hover,
  &:not(.rs-input-group-disabled).rs-input-group-focus,
  &:focus-within {
    border-color: var(--rs-input-focus-border);
  }

  &:not(.rs-input-group-disabled).rs-input-group-focus,
  &:focus-within {
    .focus-ring();
  }

  & & {
    outline: none !important;
    border-color: transparent !important;
  }

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

  // Reset border
  &:not(.rs-input-group-inside) {
    .rs-input {
      border: none;
      border-radius: 0;
      outline: none;
    }

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

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

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

    .rs-input-number:not(:first-child) .rs-input {
      border-radius: 0 !important;
    }

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

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

  > .rs-input,
  > .rs-form-control-wrapper {
    flex: 1 1 auto;
  }

  .rs-form-control-wrapper > .rs-input {
    width: 100%;
  }

  > .rs-input {
    // Ensure that the input is always above the *appended* addon button for
    // proper border colors.
    position: relative;
  }

  input.rs-input ~ .rs-input-group-addon,
  .rs-form-control-wrapper ~ .rs-input-group-addon {
    border-left: none;
    left: auto;
    right: 0;
  }

  //FIXED: The icon between two input has 1px border.
  input.rs-input ~ .rs-input-group-addon:not(:last-child),
  .rs-form-control-wrapper ~ .rs-input-group-addon:not(:last-child) {
    border-right: 0;
  }

  &.rs-input-group-inside {
    width: 100%;
    background-color: var(--rs-input-bg);

    .rs-input {
      display: block;
      width: 100%;
      border: none;
      outline: none;
    }

    .rs-input-group-btn,
    .rs-input-group-addon {
      flex: 0 0 auto;
      width: auto;
    }

    .rs-input-group-btn {
      .rs-btn-subtle();

      color: inherit;
      .reset-inside-input-group-btn-size(base);

      &:focus {
        outline: none;
      }

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

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

    .rs-input-group-addon {
      top: 0;
      background: none;
      border: none;
      padding: 10px 12px;

      &.rs-input-group-btn {
        padding: 8px 13px;
      }
    }

    .rs-input-group-btn ~ input.rs-input,
    .rs-input-group-addon ~ input.rs-input,
    .rs-input-group-btn ~ .rs-auto-complete > input.rs-input,
    .rs-input-group-addon ~ .rs-auto-complete > input.rs-input,
    .rs-input-group-addon ~ .rs-form-control-wrapper > input.rs-input,
    .rs-input-group-btn ~ .rs-form-control-wrapper > input.rs-input {
      padding-left: 0;
      padding-right: 12px;
    }

    input.rs-input ~ .rs-input-group-btn,
    .rs-auto-complete ~ .rs-input-group-addon,
    .rs-form-control-wrapper ~ .rs-input-group-addon,
    .rs-form-control-wrapper ~ .rs-input-group-btn {
      left: inherit;
      right: 0;
    }

    .rs-auto-complete ~ .rs-input-group-btn,
    .rs-form-control-wrapper ~ .rs-input-group-btn {
      left: inherit;
      right: @input-border-width;
    }
  }
}

.rs-input-group.rs-input-group-disabled {
  background-color: var(--rs-input-disabled-bg);
  color: var(--rs-text-disabled);
  cursor: not-allowed;

  .rs-input,
  .rs-input-group-btn,
  .rs-input-group-addon {
    color: inherit;
  }
}

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

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

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

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

.rs-input-group-md {
  > .rs-input {
    .input-md();
  }

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

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

.rs-input-group-sm {
  > .rs-input {
    .input-sm();
  }

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

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

.rs-input-group-xs {
  > .rs-input {
    .input-xs();
  }

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

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

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

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

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

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

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

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

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

// Display as table-cell
// -------------------------
.rs-input-group-addon,
.rs-input-group-btn,
.rs-input-group:not(.rs-input-group-inside) .rs-input {
  &:not(:first-child):not(:last-child) {
    border-radius: 0;
  }
}

// Addon and addon wrapper for buttons
// Text input groups
// -------------------------
.rs-input-group-addon {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  white-space: nowrap;
  vertical-align: middle; // Match the inputs
  color: var(--rs-text-primary);
  padding: @padding-y @padding-x;
  font-size: @font-size-base;
  font-weight: normal;
  line-height: 1;
  text-align: center;
  background-color: var(--rs-btn-default-bg);
  border: 1px solid var(--rs-border-primary);
  border-radius: @input-border-radius;

  // Sizing
  &.rs-input-sm {
    padding: @padding-y-sm @padding-x-sm;
    font-size: @font-size-small;
    border-radius: @input-border-radius;
  }

  &.rs-input-xs {
    padding: @padding-x-xs @padding-x-xs;
    font-size: @font-size-small;
    border-radius: @input-border-radius;
  }

  &.rs-input-lg {
    padding: @padding-y-lg @padding-x-lg;
    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
// -------------------------
.rs-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;
  line-height: 1;
  white-space: nowrap;
  border-radius: 0;

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

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

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

  &:last-child {
    > .rs-btn,
    > .rs-btn-group {
      margin-left: -1px;
    }
  }
}