heyui/themes/native/input.less

A UI components Library.

@input-prefix: ~"@{prefix}input";
input[type=text],
input[type=password],
input[type=search],
textarea {
  position: relative;
  background-color: @white-color;
  border-radius: @border-radius;
  border: @border;
  padding: 4px 0px 4px 10px;
  line-height: 1.5;
  // width: 200px;
  font-size: inherit;
  transition: all linear @transition-time;
  box-sizing: border-box;
  -webkit-appearance: none;
  font-family: inherit;
  vertical-align: top;
  outline: none;
  &:hover {
    border-color: lighten(@primary-color, 10%);
  }
  &:focus {
    border-color: @primary-color;
    box-shadow: 0 0 0 2px fade(@primary-color, 20%);
  }
  &[disabled],
  &[readonly] {
    border-color: @gray1-color;
    color: @dark-color;
    &:focus {
      box-shadow: none;
    }
  }
  &[disabled] {
    background-color: @gray4-color;
    pointer-events: painted;
    cursor: @disabled-cursor;
  }
  .@{prefix}form-item-valid-error &{
    border-color: @red-color;
    &:focus{
      box-shadow: 0 0 0 2px fade(@red-color, 20%);
    }
  }
}

input[type=text],
input[type=password]{
  height: @input-height;
  line-height: @input-height;
}

.@{input-prefix} {
  position: relative;
  display: inline-block;
  // width: 200px;
  >i{
    pointer-events: none;
  }
  >[class^="@{icon-prefix}"],
  >[class*=" @{icon-prefix}"] {
    position: absolute;
    right: 8px;
    .middle;
    z-index: 3;
    color: @gray-color;
  }
  
  >input{
    width: 100%;
    position: relative;
    z-index: 2;
  }
  &-group {
    position: relative;
    display: flex;
    >input,>div {
      display: inline-block;
      position: relative;
      z-index: 2;
      margin:0;
      flex: 1;
    }
    >div{
      padding: 0 !important;
    }
    >input:not(:last-child),>div:not(:last-child) input{
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }
    >span{
        line-height: @input-height - 2px;
    }
    >.@{input-prefix}-addon {
      
      flex: inherit;
      text-align: center;
      background-color: @gray3-color;
      border-top: @border;
      border-bottom: @border;
      height: @input-height;
      vertical-align: middle;
      padding: 0px 5px;
      min-width: 24px;
      white-space: nowrap;
      color: @gray-color;
      display: inline-block;
      &:first-child {
        border-radius: @border-radius 0 0 @border-radius;
        border-left: @border;
      }
      &:last-child,
      &.last-child {
        border-radius: 0 @border-radius @border-radius 0;
        border-right: @border;
      }
      +input,
      +div input {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
      }
    }
  }
}