@arco-design/web-vue/lib/form/style/status.less

Arco Design Vue 2.0: A Vue.js 3 UI Library

@import './token.less';

// for input & textarea
.input-status(@status) {
  @input-prefix-cls: ~'@{prefix}-input';
  @textarea-prefix-cls: ~'@{prefix}-textarea';

  .@{input-prefix-cls}-wrapper:not(.@{input-prefix-cls}-disabled),
  .@{textarea-prefix-cls}-wrapper:not(.@{textarea-prefix-cls}-disabled) {
    background-color: ~'@{form-color-bg_@{status}}';
    border-color: ~'@{form-color-border_@{status}}';

    &:hover {
      background-color: ~'@{form-color-bg_@{status}_hover}';
      border-color: ~'@{form-color-border_@{status}_hover}';
    }
  }

  .@{input-prefix-cls}-wrapper:not(.@{input-prefix-cls}-disabled).@{input-prefix-cls}-focus,
  .@{textarea-prefix-cls}-wrapper:not(.@{textarea-prefix-cls}-disabled).@{textarea-prefix-cls}-focus {
    background-color: ~'@{form-color-bg_@{status}_focus}';
    border-color: ~'@{form-color-border_@{status}_focus}';
    box-shadow: 0 0 0 ~'@{form-size-shadow_@{status}_focus}' ~'@{form-color-shadow_@{status}_focus}';
  }
}

.select-view-status(@status) {
  @input-prefix-cls: ~'@{prefix}-input-tag';
  @select-view-prefix-cls: ~'@{prefix}-select-view';

  .@{select-view-prefix-cls}:not(.@{select-view-prefix-cls}-disabled),
  .@{input-prefix-cls}:not(.@{input-prefix-cls}-disabled) {
    background-color: ~'@{form-color-bg_@{status}}';
    border-color: ~'@{form-color-border_@{status}}';

    &:hover {
      background-color: ~'@{form-color-bg_@{status}_hover}';
      border-color: ~'@{form-color-border_@{status}_hover}';
    }
  }

  .@{select-view-prefix-cls}:not(.@{select-view-prefix-cls}-disabled).@{select-view-prefix-cls}-focus,
  .@{input-prefix-cls}:not(.@{input-prefix-cls}-disabled).@{input-prefix-cls}-focus {
    background-color: ~'@{form-color-bg_@{status}_focus}';
    border-color: ~'@{form-color-border_@{status}_focus}';
    box-shadow: 0 0 0 ~'@{form-size-shadow_@{status}_focus}' ~'@{form-color-shadow_@{status}_focus}';
  }
}

// datepicker
.picker(@status) {
  .@{prefix}-picker:not(.@{prefix}-picker-disabled) {
    border-color: ~'@{form-color-border_@{status}}';
    background-color: ~'@{form-color-bg_@{status}}';

    &:hover {
      border-color: ~'@{form-color-border_@{status}_hover}';
      background-color: ~'@{form-color-bg_@{status}_hover}';
    }
  }

  .@{prefix}-picker-focused:not(.@{prefix}-picker-disabled) {
    &,
    &:hover {
      border-color: ~'@{form-color-border_@{status}_focus}';
      background-color: ~'@{form-color-bg_@{status}_focus}';
      box-shadow: 0 0 0 ~'@{form-size-shadow_@{status}_focus}' ~'@{form-color-shadow_@{status}_focus}';
    }
  }
}

.validate-status (@status) {
  .@{prefix}-form-item-status-@{status} {
    .input-status(@status);
    .select-view-status(@status);
    .picker(@status);
  }

  .@{prefix}-form-item-status-@{status} {
    .@{form-prefix-cls}-item-message-help {
      color: ~'@{form-color-tip-text_@{status}}';
    }

    .@{form-prefix-cls}-item-feedback {
      color: ~'@{form-color-tip-icon-text_@{status}}';
    }
  }
}

.validate-status(validating);

.validate-status(success);

.validate-status(warning);

.validate-status(error);

.@{form-prefix-cls}-item-control-children {
  position: relative;
}

.@{form-prefix-cls}-item-feedback {
  position: absolute;
  top: 50%;
  right: 9px;
  font-size: 14px;
  transform: translateY(-50%);

  .@{prefix}-icon-loading {
    font-size: 12px;
  }
}

.@{form-prefix-cls}-item-has-feedback {
  .select-view(@prefix) {
    .@{prefix}.@{prefix}-multiple .@{prefix}-view,
    .@{prefix}.@{prefix}-single .@{prefix}-view {
      padding-right: 28px;
    }

    .@{prefix}.@{prefix}-multiple .@{prefix}-suffix {
      padding-right: 0;
    }
  }

  .@{prefix}-input,
  .@{prefix}-input-inner-wrapper,
  .@{prefix}-textarea {
    padding-right: 28px;
  }

  .@{prefix}-input-number-mode-embed .@{prefix}-input-number-step-layer {
    right: 24px;
  }

  .select-view(~'@{prefix}-select');
  .select-view(~'@{prefix}-cascader');
  .select-view(~'@{prefix}-tree-select');

  // datepicker timepicker
  .@{prefix}-picker {
    padding-right: 28px;
  }

  .@{prefix}-picker-suffix {
    .@{prefix}-picker-suffix-icon,
    .@{prefix}-picker-clear-icon {
      margin-right: 0;
      margin-left: 0;
    }
  }
}