Cacher is the code snippet organizer for pro developers

<textarea 
  class="ui-textarea ui-textarea--default" 
  id="userDescription1"
  v-model.trim="dataForm.userDescription1"
  rows="3"
></textarea>

///* input */
///***********************************************/
%reset-textarea {
  &::-ms-clear {
    display: none;
  }
  overflow: auto;
  font-family: sans-serif;
  margin: 0;
  position: relative;
  max-width: 100%;
  min-width: 100%;
  width: 100%;
  appearance: none;
  box-shadow: none;
  line-height: 1.15;
  display: block;
  resize: vertical;
}

.ui-textarea {
  @extend %reset-textarea;
  @extend %tr-all;
}

// Skins
%ui-textarea--skin-default {
  font-size: em(14);
  border-radius: em(5px, 14);
  border-width: 1px;
  border-style: solid;
  font-family: inherit;
  font-weight: 400;
  line-height: em(20px, 14);
  padding: em(10 20, 14);
  max-height: em(300px, 14);
  min-height: em(60px, 14);
}

// Themes
%ui-textarea--theme-default {
  border-color: #d5d5d5;
  $errorColor: #ff0000;
  background-color: #fbfbfb;
  color: #505d68;
  box-shadow: none;
  @include placeholder {
    color: rgba(#343A4E, .3);
  }
  &:hover {
    box-shadow: 0 0 4px rgba(#000, 0.4);
  }
  &:focus {
    outline: none;
    border-color: #5b3cb5;
    box-shadow: none;
    background-color: #fff;
  }
  &.state--error {
    border-color: $errorColor;
  }
}

///* textarea */
///***********************************************/
.ui-textarea--default {
  @extend %ui-textarea--skin-default, %ui-textarea--theme-default;
}