yonui-ys/lib/_style/mixins/ys/input.less

yonui ys

// ============================================
// input 类控件的原子样式
// ============================================

.input-mixin() {
  border-radius: 4px;
  position: relative;
  font-size: 12px;
  color: #333;
  width: 100%;
  height: 28px;
  line-height: 28px;
  padding: 0 23px 0 8px;
  border: 1px solid #d9d9d9;
  outline: none;
  
  &.input_focused,
  &:hover {
    border: 1px solid @custom-color;
    box-shadow: none;
  }
}

.filter-search-mixin(@paddingLR: 10px) {
  padding: 0 @paddingLR;
  display: inline-block;
  width: 100%;

  input.u-form-control-search {
    padding-right: 45px;
    padding: 0 24px 0 10px;
  }

  .u-form-control-suffix {
    color: #A7ABB2;
    line-height: 28px;
    cursor: pointer;

    i.uf-search {
      padding: 0;
    }
  }

  & + .yonicon-close-circle {
    right: 38px;
    top: 8px;
    font-size: 12px;
    position: absolute;

    &:hover {
      &::before {
        color: rgba(0, 0, 0, 0.43);
      }
    }
  }
}

.u-form-control {
  line-height: 28px; // fix: 覆盖tinper 定制样式中的 1.5
}

.ac-input-locale {
  height: @base-input-height;
  line-height: @base-input-height;
  min-width: inherit !important;

  .multi-lang {
    padding-right: 45px;
  }

  .input-icon {
    cursor: pointer;
    position: absolute;
    top: 0;
    right: 7px;
    font-size: 16px;
    height: 100%;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    background-size: 100%;
    color: #adb4bc;
    z-index: 100;
  }

  .icon {
    width: 1em;
    height: 1em;
    vertical-align: -.15em;
    fill: currentColor;
    overflow: hidden;
  }
}

// 全球化-输入框规范
input:not(:focus){
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

// [TINPER-2240] 禁用区域样式
.ant-input-disabled,
.ant-input-number-disabled {
  color: #999 !important;

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

  .u-form-control {
    .form-control-disabled-mixin();
  }
}

.input-control > div {
  width: 100%;
}

// 表单基本控件（输入框、数字、下拉）
.u-form-control,
.u-input-number,
.u-time-picker-input {
  outline: none;
  height: @base-input-height;
  color: #333;

  &:hover,
  &:focus {
    border: 1px solid #505766;
    box-shadow: none;
  }
}