wetrade-design/lib/input/style/affix.less

一款多语言支持Vue3的UI框架

@import './mixin';
@import (reference) '../../style/themes/index';
@input-prefix-cls: ~'@{wd-prefix}-input';

@input-affix-margin: 4px;

.@{wd-prefix}-input {
  &-affix-wrapper {
    .input();
    display: inline-flex;

    &:not(&-disabled):not(&-borderless) {
      &:hover {
        .hover();
        z-index: 1;
        .@{wd-prefix}-input-search-with-button & {
          z-index: 0;
        }
      }
    }

    &-focused,
    &:focus {
      z-index: 1;
      &.@{input-prefix-cls}-affix-wrapper:not(.@{input-prefix-cls}-disabled):not(
          .@{input-prefix-cls}-disabled
        ),
      &.@{input-prefix-cls}-affix-wrapper.@{input-prefix-cls}-affix-wrapper-borderless:not(
          .@{input-prefix-cls}-disabled
        ):not(.@{input-prefix-cls}-disabled) {
        background-color: @input-focused-bg-color;
        border-color: @brand-primary;
      }
      .@{input-prefix-cls}-borderless:not(.@{input-prefix-cls}-disabled) {
        background-color: @bg-page;
      }

      // .@{input-prefix-cls}-borderless.@{input-prefix-cls}-condition:not(
      //     .@{input-prefix-cls}-disabled
      //   ) {
      //   &:hover {
      //     background-color: @bg-page;
      //   }
      // }
    }

    &-disabled {
      .@{input-prefix-cls}-borderless.@{input-prefix-cls}-disabled.@{input-prefix-cls}[disabled] {
        background-color: transparent !important;
      }

      &.@{input-prefix-cls}-affix-wrapper-borderless {
        &:hover {
          border-color: transparent;
        }
      }
      // &:hover {
      // border-color: transparent;
      // }
    }

    &-disabled&-condition {
      .@{input-prefix-cls}-suffix-search {
        color: @input-disabled-color;
      }
    }

    > input.@{wd-prefix}-input {
      padding: 0;
      border: none;
      outline: none;
      border-radius: 0;

      &:focus {
        box-shadow: none !important;
      }
    }

    &::before {
      width: 0;
      visibility: hidden;
      content: '\a0';
    }

    &-condition {
      width: @component-condition-width;

      // &.@{input-prefix-cls}-affix-wrapper-focused:not(.@{input-prefix-cls}-disabled) {
      //   border-color: @brand-hover;
      // }

      &:not(.@{input-prefix-cls}-affix-wrapper-focused) {
        .@{input-prefix-cls} {
          color: @input-condition-fill-color;
        }
      }

      // .@{input-prefix-cls} {
      //   &-disabled {
      //     color: @input-disabled-color;
      //   }
      // }
    }

    &-fill:not(.@{wd-prefix}-input-affix-wrapper-disabled) {
      &:hover,
      &.@{wd-prefix}-input-affix-wrapper-focused {
        .@{wd-prefix}-input-clear-icon {
          display: block;
        }
        .@{wd-prefix}-input-suffix-search {
          display: none;
        }
      }
    }
  }

  &-prefix,
  &-suffix {
    display: flex;
    flex: none;
    align-items: center;

    .@{wd-prefix}-icon {
      color: @icon-tertiary;
      font-size: @input-affix-size;
    }

    .@{wd-prefix}-input-password-icon {
      .@{wd-prefix}-icon {
        color: @icon-tertiary;
        font-size: @input-affix-size;
      }
    }
  }

  &-show-count-suffix {
    color: @input-show-count-color;
  }

  &-show-count-has-suffix {
    margin-right: 2px;
  }

  &-prefix {
    margin-right: @input-affix-margin;
  }

  &-suffix {
    margin-left: @input-affix-margin;

    &-condition {
      .@{wd-prefix}-input-clear-icon {
        display: none;
      }
    }
  }

  &-borderless {
    // background-color: transparent !important;
  }
}