atui/src/styles/textarea.less

components built with Vue.js

// Textarea
// --------------------------------------------------
@prefix-cls-textarea: e("@{prefix-cls}-textarea");

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

.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%);
}

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

.@{prefix-cls-textarea}-box {
  position: relative;
  display: inline-block;
  width: 100%;

  .@{prefix-cls-textarea}-wrap {
    position: relative;
  }

  pre {
    display: block;
    margin: 0;
    padding: 8px 10px;
    font-size: 12px;
    visibility: hidden;
    overflow: hidden;
    white-space: pre-wrap;
  }
}

.@{prefix-cls-textarea} {
  width: 100%;
  min-height: 78px;
  padding: 8px 10px;
  background: #fff;
  color: #666;
  font-size: 12px;
  line-height: 1.5;
  border: 1px solid #bfbfbf;
  border-radius: 4px;
  outline: none;

  &.@{prefix-cls-textarea}-autosize {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    min-height: initial;
  }

  &:hover {
    border-color: #999;

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

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

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

    &:hover {
      .error();

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

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

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

    &:hover {
      .success();

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

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

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

  &:hover {
    .disabled();

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

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

.@{prefix-cls-textarea}-words-area {
  color: #999;
  font-size: 12px;

  &.@{prefix-cls-textarea}-words-error {
    color: @brand-error;
  }
}