responsivewebframework/src/less/textarea.less

Jalasoft Foundation Front End Framework ========================================

// Text area

textarea.textarea,
textarea.textarea-x1,
textarea.textarea-x2,
textarea.textarea-x3,
textarea.textarea-x4,
textarea.textarea-x5,
textarea.textarea-x6 {
  height: @text-area-base-size-height;
  width: @text-area-base-size;
  padding: @text-area-padding;
  resize: @text-area-resize;
  outline: @text-area-outline;
  font-style: normal;
  color: @text-area-base-font-color;
  font-family: @font-family-base-component;
  font-size: @font-size-base-component;
  border: @text-area-border;

  &:disabled {
    outline: @text-area-outline;
    background-color: @text-area-disabled-background-color;
    opacity: 0.5;
  }

  &::-webkit-input-placeholder {
    font-style: italic;
    color:@text-area-placeholder-font-color;
  }

  &:focus::-webkit-input-placeholder {
    -webkit-transition: @text-are-placeholder-transition;
    opacity: 0;
  }

  &::-moz-placeholder {
    font-style: italic;
    color: @text-area-placeholder-font-color
  }

  &:focus::-moz-placeholder {
    -moz-transition: @text-are-placeholder-transition;
    opacity: 0;
  }

  //scroll bar
  &::-webkit-scrollbar {
    width: @text-area-scrollbar-width;
  }

  &::-webkit-scrollbar-thumb {
    width: @text-area-scrollbar-thumb-width;
    background-color: @text-area-scrollbar-thumb-color;
    border: @text-area-scrollbar-border;
  }

  &::-webkit-scrollbar-track {
    background-color: @text-area-scrollbar-track-background-color;
    width: @text-area-scrollbar-width;
  }

  &::-webkit-scrollbar-thumb:hover {
    background-color: @text-area-scrollbar-thumb-hover-color;
  }
}

textarea.textarea-x1 {
  height: @text-area-base-size-height + (1 * @text-area-increasing-rate);
  width: @text-area-base-size + (1 * @text-area-increasing-rate);
}

textarea.textarea-x2 {
  height: @text-area-base-size-height + (2 * @text-area-increasing-rate);
  width: @text-area-base-size + (2*@text-area-increasing-rate);
}

textarea.textarea-x3 {
  height: @text-area-base-size-height + (3 * @text-area-increasing-rate);
  width: @text-area-base-size + (3*@text-area-increasing-rate);
}

textarea.textarea-x4 {
  height: @text-area-base-size-height + (4 * @text-area-increasing-rate);
  width: @text-area-base-size + (4 * @text-area-increasing-rate);
}

textarea.textarea-x5 {
  height: @text-area-base-size-height + (5 * @text-area-increasing-rate);
  width: @text-area-base-size + (5 * @text-area-increasing-rate);
}

textarea.textarea-x6 {
  height: 100%;
  width: 100%;
}