@sula/ruler/lib/index.less

@import (reference) '~antd/lib/style/themes/default';

@ant-prefix: ant;

.sula-ruler {
  &-field {
    &-no-error {
      .form-control-validation();
    
      //select
      .@{ant-prefix}-select:not(.@{ant-prefix}-select-disabled) {
        .@{ant-prefix}-select-selection {
          border-color: @input-border-color;
          &:hover {
            .hover();
          }
        }
        &.@{ant-prefix}-select-open .@{ant-prefix}-select-selection,
        &.@{ant-prefix}-select-focused .@{ant-prefix}-select-selection {
          .active();
        }
      }
    
      .@{ant-prefix}-select.@{ant-prefix}-select-auto-complete {
        .@{ant-prefix}-input:focus {
          .active();
        }
      }
    
      .@{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 {
          .hover();
        }
      }
      .@{ant-prefix}-mention-wrapper {
        .@{ant-prefix}-mention-editor {
          &,
          &:not([disabled]):hover {
            .hover();
          }
        }
        &.@{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 {
          .hover();
        }
      }
    
      // transfer
      .@{ant-prefix}-transfer {
        &-list {
          border-color: @input-border-color;
    
          &-search:not([disabled]) {
            border-color: @input-border-color;
    
            &:hover {
              .hover();
            }
    
            &:focus {
              .active();
            }
          }
        }
      }
    }
  }
}

.form-control-validation(@text-color: @input-color; @border-color: @input-border-color; @background-color: @input-bg) {
  .@{ant-prefix}-form-explain,
  .@{ant-prefix}-form-split {
    display: none;
  }
  // 输入框的不同校验状态
  .@{ant-prefix}-input {
    &:not([disabled]) {
      border-color: @border-color;
    }
    &:not([disabled]):hover {
      border-color: @primary-5;
    }

    &:focus {
      .active();
    }
  }

  .@{ant-prefix}-calendar-picker-open .@{ant-prefix}-calendar-picker-input {
    .active();
  }

  // Input prefix
  .@{ant-prefix}-input-affix-wrapper {
    .@{ant-prefix}-input {
      &,
      &:hover {
        background-color: @background-color;
        border-color: @primary-5;
      }

      &:focus {
        .active();
      }
    }

    &:hover .@{ant-prefix}-input:not(.@{ant-prefix}-input-disabled) {
      border-color: @primary-5;
    }
  }

  .@{ant-prefix}-input-prefix {
    color: @text-color;
  }

  .@{ant-prefix}-input-group-addon {
    color: @text-color;
    background-color: @background-color;
    border-color: @border-color;
  }

  .has-feedback {
    color: @text-color;
  }
}

// focus
.active() {
  border-color: @primary-5 !important;
  border-right-width: @border-width-base !important;
  outline: 0 !important;
  box-shadow: @input-outline-offset @outline-blur-size @outline-width fade(@primary-color, 20%) !important;
}

// hover
.hover() {
  border-color: @primary-5 !important;
  border-right-width: @border-width-base !important;
}