atui/src/styles/input.less

components built with Vue.js

// Input
// --------------------------------------------------
@prefix-cls-input: e("@{prefix-cls}-input");

.active() {
  border-color: @primary-color;
  box-shadow: 0px 0px 0px 2px fade(@primary-color, 30%);
}

.@{prefix-cls-input} {
  width: 100%;
  padding: 5px 10px;
  background: #fff;
  color: #666;
  font-size: 12px;
  border: 1px solid #bfbfbf;
  border-radius: 4px;
  outline: none;

  &:hover {
    border-color: #999;

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

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


// Size of input
// --------------------------------------------------
.@{prefix-cls-input} {
  &.@{prefix-cls-input}-large {
    padding: 8px 10px;
  }

  &.@{prefix-cls-input}-small {
    padding: 2px 10px;
  }
}

// Status of input
// --------------------------------------------------
.disabled() {
  background: #f2f2f2;
  color: #ccc;
  border-color: #e6e6e6;
  box-shadow: none;
  cursor: not-allowed!important;
}

.error() {
  border-color: @brand-error;
  box-shadow: 0px 0px 0px 2px fade(@brand-error, 30%);
}

.success() {
  border-color: @brand-success;
  box-shadow: 0px 0px 0px 2px fade(@brand-success, 30%);
}

input[disabled], .@{prefix-cls-input}.@{prefix-cls-input}-disabled {
  .disabled();

  &:hover {
    .disabled();

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

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

.@{prefix-cls-input} {
  &.@{prefix-cls-input}-error {
    .error();

    &:hover {
      .error();

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

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

  &.@{prefix-cls-input}-success {
    .success();

    &:hover {
      .success();

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

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