@arco-design/web-vue/es/input/style/group.less

Arco Design Vue 2.0: A Vue.js 3 UI Library

@import './token.less';

.@{input-prefix-cls}-group {
  display: inline-flex;
  align-items: center;

  > * {
    border-radius: 0;

    &.@{input-prefix-cls}-outer > :last-child,
    &.@{input-prefix-cls}-outer > :first-child {
      border-radius: 0;
    }

    &:not(:last-child) {
      position: relative;
      box-sizing: border-box;
    }

    &:first-child,
    &:first-child .@{input-prefix-cls}-group > *:first-child {
      border-top-left-radius: @input-group-border-radius_compact;
      border-bottom-left-radius: @input-group-border-radius_compact;

      .@{prefix}-select-view {
        border-top-left-radius: @input-group-border-radius_compact;
        border-bottom-left-radius: @input-group-border-radius_compact;
      }
    }

    &:last-child,
    &:last-child .@{input-prefix-cls}-outer > *:last-child {
      border-top-right-radius: @input-group-border-radius_compact;
      border-bottom-right-radius: @input-group-border-radius_compact;

      .@{prefix}-select-view {
        border-top-right-radius: @input-group-border-radius_compact;
        border-bottom-right-radius: @input-group-border-radius_compact;
      }
    }
  }

  // 针对input边框颜色处理
  > .@{input-prefix-cls}-wrapper:not(:last-child),
  > .@{input-prefix-cls}-outer:not(:last-child),
  > .@{prefix}-input-tag:not(:last-child),
  > .@{prefix}-select-view:not(:last-child) {
    margin-right: -@input-group-border-separator-width;
    border-right: @input-group-border-separator-width solid
      @input-group-color-separator-border;

    &:focus-within {
      border-right-color: @input-color-border_focus;
    }
  }

  // 针对Error状态的input边框颜色处理
  > .@{input-prefix-cls}-wrapper.@{input-prefix-cls}-error:not(:last-child) {
    &:focus-within {
      border-right-color: @input-color-border_error_focus;
    }
  }
}