ant-design/components/input/style/search-input.less

@import "../../style/themes/default";
@import "../../style/mixins/index";
@import "../../button/style/mixin";
@import "./mixin";

.@{ant-prefix}-input-search-wrapper {
  display: inline-block;
  vertical-align: middle;
  position: relative;
  min-width: 24px;
  height: @input-height-base;

  .@{ant-prefix}-input-search {
    opacity: 0;
    width: 0;
    transition: all .3s ease;
  }

  .@{ant-prefix}-input-search-icon {
    position: absolute;
    line-height: @input-height-base;
    left: 0;
    cursor: pointer;
    font-size: 24px;
    transition: all .3s ease;

    &:hover {
      color: @input-hover-border-color;
    }
  }
}

.@{ant-prefix}-input-search-wrapper-focus {
  .@{ant-prefix}-input-search {
    opacity: 1;
    width: 100%;
  }

  .@{ant-prefix}-input-search-icon {
    left: 100%;
    margin-left: -22px;
    font-size: 14px;
  }
}