tntd/lib/array-input/index.less

tntd是基于 TNT Design 设计体系的 React UI 组件库，主要用于研发企业级中后台产品。

@import '../style/themes/index';
@import '../style/mixins/index';
@import '../form/style/mixin.less';

@form-prefix-cls: ~'@{ant-prefix}-form';

.tntd-array-input {
  line-height: 1.5;

  &-item {
    margin-bottom: 10px;
  }

  .ant-form-item-explain-error {
    font-size: 12px;
  }

  .ant-col,
  .ant-table-row {
    .ant-select {
      width: 100%;
    }
  }

  .ant-table-tbody > tr > td {
    vertical-align: top;
  }

  .mr10 {
    margin-right: 10px;
  }

  .mt10 {
    margin-top: 10px;
  }

  &-action {
    line-height: @btn-height-base;

    > span {
      cursor: pointer;
    }
  }

  .drag-btn {
    border: none;
    background-color: transparent;
    cursor: move;
  }
}

.has-error {
  .tntd-array-input-hide-error {
    .form-control-validation(@text-color; @border-color-base; @component-background; );

    &.has-feedback .@{form-prefix-cls}-item-children-icon {
      color: @text-color;
      animation-name: diffZoomIn2 !important;
    }

    //select
    .@{ant-prefix}-select {
      &-selection {
        border-color: @input-border-color;

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

      &-open .@{ant-prefix}-select-selection,
      &-focused .@{ant-prefix}-select-selection {
        .active();
      }
    }

    .@{ant-prefix}-select.@{ant-prefix}-select-auto-complete {
      .@{ant-prefix}-input:focus {
        border-color: @primary-color;
      }
    }

    .@{ant-prefix}-input-group-addon .@{ant-prefix}-select {
      &-selection {
        border-color: transparent;
        box-shadow: none;
      }
    }

    // arrow and icon
    .@{ant-prefix}-calendar-picker-icon::after,
    .@{ant-prefix}-time-picker-icon::after,
    .@{ant-prefix}-picker-icon::after,
    .@{ant-prefix}-select-arrow,
    .@{ant-prefix}-cascader-picker-arrow {
      color: @disabled-color;
    }

    //input-number, timepicker
    .@{ant-prefix}-input-number,
    .@{ant-prefix}-time-picker-input {
      border-color: @input-border-color;

      &-focused,
      &:focus {
        .active();
      }

      &:not([disabled]):hover {
        border-color: @primary-color;
      }
    }

    .@{ant-prefix}-mention-wrapper {
      .@{ant-prefix}-mention-editor {
        &,
        &:not([disabled]):hover {
          border-color: @primary-color;
        }
      }

      &.@{ant-prefix}-mention-active:not([disabled]) .@{ant-prefix}-mention-editor,
      .@{ant-prefix}-mention-editor:not([disabled]):focus {
        .active();
      }
    }

    .@{ant-prefix}-cascader-picker {
      &:focus .@{ant-prefix}-cascader-input {
        .active();
      }

      &:hover .@{ant-prefix}-cascader-input {
        border-color: @input-border-color;
      }
    }

    // transfer
    .@{ant-prefix}-transfer {
      &-list {
        border-color: @input-border-color;

        &-search:not([disabled]) {
          border-color: @input-border-color;

          &:hover {
            .hover();
          }

          &:focus {
            .active();
          }
        }
      }
    }
  }
}