vui-design/src/style/components/textarea.less

A high quality UI Toolkit based on Vue.js

@vui-textarea: ~"@{vui}-textarea";

.@{vui-textarea} {
  position:relative;
  display:inline-block;
  width:100%;
  vertical-align:middle;

  &-input {
    appearance:none;
    outline:none;
    display:block;
    box-sizing:border-box;
    width:100%;
    min-width:100%;
    max-width:100%;
    border-width:0;
    border-style:solid;
    border-color:@textarea-border-color;
    border-radius:@textarea-border-radius;
    background-color:@textarea-background-color;
    margin:0;
    padding:@textarea-padding-vertical @textarea-padding-horizontal;
    color:@textarea-font-color;
    font-size:@textarea-font-size;
    font-family:@textarea-font-family;
    line-height:@textarea-line-height;
    transition:all @transition-duration @transition-timing-function, height 0s;
  }
  &-bordered &-input {
    border-width:1px;
  }

  &-btn-clear {
    position:absolute;
    top:@textarea-padding-vertical + (round(@textarea-font-size * @textarea-line-height) - @textarea-font-size) / 2;
    right:@textarea-padding-horizontal;
    z-index:3;
    cursor:pointer;
    display:block;
    color:@textarea-btn-clear-color;
    font-size:@textarea-font-size;
    line-height:1;
    transition:all @transition-duration @transition-timing-function;

    svg {
      display:block;
    }

    &:hover {
      color:@textarea-btn-clear-hover-color;
    }
  }
  &-bordered &-btn-clear {
    top:@textarea-padding-vertical + (round(@textarea-font-size * @textarea-line-height) - @textarea-font-size) / 2 + 1px;
    right:@textarea-padding-horizontal + 1px;
  }

  &-statistic {
    position:absolute;
    bottom:@textarea-statistic-bottom;
    right:@textarea-statistic-right;
    z-index:3;
    pointer-events:none;
    color:@textarea-statistic-font-color;
    font-size:@textarea-statistic-font-size;
    line-height:1;
  }
  &-bordered &-statistic {
    bottom:@textarea-statistic-bottom + 1px;
    right:@textarea-statistic-right + 1px;
  }

  &-hovered &-input {
    z-index:1;
    border-color:@textarea-hover-border-color;
  }

  &-focused &-input {
    z-index:2;
    border-color:@textarea-focus-border-color;
  }

  &-disabled &-input {
    cursor:not-allowed;
    border-color:@textarea-disabled-border-color;
    background-color:@textarea-disabled-background-color;
    color:@textarea-disabled-font-color;
  }
}