winbox-ui-next/lib/input/style/group.less

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

@import './token.less';

.@{input-prefix-cls}-group {
  display: inline-flex;
  align-items: center;
  // select 圆角重置
  > .@{prefix}-select {
    vertical-align: unset;

    .@{prefix}-select-view {
      border-radius: 0;
    }
  }

  > * {
    border-radius: 0;

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

    &:not(:last-child) {
      position: relative;
      box-sizing: border-box;
      border-right: @input-group-border-separator-width solid
        @input-group-color-separator-border;
    }

    &: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 {
        .@{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 {
        .@{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) {
    border-right-color: @input-group-color-separator-border;

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