antd-mobile/lib/input-item/style/index.less

基于 React 的移动设计规范实现

@import '../../style/mixins';
@import '../../style/themes/default';

@listPrefixCls: am-list;
@inputPrefixCls: am-input;

.@{listPrefixCls} {
  & &-item {
    &.@{inputPrefixCls}-item {
      height: @list-item-height;
      padding-left: @h-spacing-lg;
      padding-right: @h-spacing-lg;
      .hairline-bottom(@border-color-base, @h-spacing-lg);
    }
    .@{inputPrefixCls}-label {
      color: @color-text-base;
      font-size: @font-size-heading;
      margin-left: 0;
      margin-right: @h-spacing-lg;
      text-align: left;
      .ellipsis();
      &.@{inputPrefixCls}-label-2 {
        width: 2*@input-label-width;
      }
      &.@{inputPrefixCls}-label-3 {
        width: 3*@input-label-width;
      }
      &.@{inputPrefixCls}-label-4 {
        width: 4*@input-label-width;
      }
      &.@{inputPrefixCls}-label-5 {
        width: 5*@input-label-width;
      }
      &.@{inputPrefixCls}-label-6 {
        width: 6*@input-label-width;
      }
      &.@{inputPrefixCls}-label-7 {
        width: 7*@input-label-width;
      }
    }
    .@{inputPrefixCls}-control {
      .box-flex(1);
      font-size: @input-font-size;
      input {
        color: @color-text-base;
        font-size: @font-size-heading;
        appearance: none;
        width: 100%;
        padding: 0;
        border: 0;
        background-color: transparent;
        line-height: 1;
        box-sizing: border-box;
        &::-webkit-input-placeholder {
          font-size: @font-size-caption;
          color: @color-text-placeholder;
          line-height: 1.4;
        }
        &:disabled {
          color: @color-text-disabled;
        }
      }
    }
    .@{inputPrefixCls}-clear {
      visibility: hidden;
      display: block;
      width: @icon-size-sm;
      height: @icon-size-sm;
      border-radius: 50%;
      overflow: hidden;
      font-style: normal;
      color: @fill-base;
      background-color: @input-color-icon;
      background-repeat: no-repeat;
      .encoded-svg-background("<svg fill='#fff' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'/><path d='M0 0h24v24H0z' fill='none'/></svg>");
      background-size: @icon-size-sm auto;
      &:active {
        background-color: @input-color-icon-tap;
      }
    }
    &.@{inputPrefixCls}-focus {
      .@{inputPrefixCls}-clear {
        visibility: visible;
      }
    }
    .@{inputPrefixCls}-extra {
      flex: initial;
      min-width: 0;
      max-height: @icon-size-sm;
      overflow: hidden;
      padding-right: 0;
      line-height: 1;
      color: @color-text-caption;
      font-size: @font-size-subhead;
      margin-left: @h-spacing-sm;
    }
    &.@{inputPrefixCls}-error {
      .@{inputPrefixCls}-control {
        input {
          color: #f50;
        }
      }
      .@{inputPrefixCls}-error-extra {
        height: @icon-size-sm;
        width: @icon-size-sm;
        margin-left: @v-spacing-sm;
        .encoded-svg-background("<svg width='18' height='18' viewBox='0 0 18 18' xmlns='http://www.w3.org/2000/svg'><g stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'><g transform='translate(-300.000000, -1207.000000)' fill='#FF5500'><g id='exclamation-circle-o' transform='translate(300.000000, 1207.000000)'><path d='M9,16.734375 C10.0441406,16.734375 11.0566406,16.5304688 12.009375,16.1279297 C12.9304688,15.7376953 13.7566406,15.1804687 14.4685547,14.4703125 C15.1787109,13.7601563 15.7376953,12.9322266 16.1261719,12.0111328 C16.5304688,11.0566406 16.734375,10.0441406 16.734375,9 C16.734375,7.95585938 16.5304688,6.94335938 16.1279297,5.990625 C15.7376953,5.06953125 15.1804687,4.24335938 14.4703125,3.53144531 C13.7601563,2.82128906 12.9322266,2.26230469 12.0111328,1.87382813 C11.0566406,1.46953125 10.0441406,1.265625 9,1.265625 C7.95585938,1.265625 6.94335938,1.46953125 5.990625,1.87207031 C5.06953125,2.26230469 4.24335938,2.81953125 3.53144531,3.5296875 C2.82128906,4.23984375 2.26230469,5.06777344 1.87382813,5.98886719 C1.46953125,6.94335938 1.265625,7.95585938 1.265625,9 C1.265625,10.0441406 1.46953125,11.0566406 1.87207031,12.009375 C2.26230469,12.9304688 2.81953125,13.7566406 3.5296875,14.4685547 C4.23984375,15.1787109 5.06777344,15.7376953 5.98886719,16.1261719 C6.94335938,16.5304688 7.95585938,16.734375 9,16.734375 L9,16.734375 Z M9,18 C4.02890625,18 0,13.9710937 0,9 C0,4.02890625 4.02890625,0 9,0 C13.9710937,0 18,4.02890625 18,9 C18,13.9710937 13.9710937,18 9,18 L9,18 L9,18 Z M9,6.75 C8.61152344,6.75 8.296875,7.06464844 8.296875,7.453125 L8.296875,13.9394531 C8.296875,14.3279297 8.61152344,14.6425781 9,14.6425781 C9.38847656,14.6425781 9.703125,14.3279297 9.703125,13.9394531 L9.703125,7.453125 C9.703125,7.06464844 9.38847656,6.75 9,6.75 L9,6.75 Z M8.20898438,4.83398438 C8.20898438,5.27085024 8.56313413,5.625 9,5.625 C9.43686587,5.625 9.79101562,5.27085024 9.79101562,4.83398438 C9.79101562,4.39711851 9.43686587,4.04296875 9,4.04296875 C8.56313413,4.04296875 8.20898438,4.39711851 8.20898438,4.83398438 L8.20898438,4.83398438 Z' id='Shape' transform='translate(9.000000, 9.000000) scale(1, -1) translate(-9.000000, -9.000000) '></path></g></g></g></svg>");
        background-size: @icon-size-sm auto;
      }
    }
    &.@{inputPrefixCls}-disabled {
      .@{inputPrefixCls}-label {
        color: @color-text-disabled;
      }
    }
  }
}