Contents

@import "../pb_body/body_mixins";
@import "./textarea_mixin";
@import "../pb_title/title_mixin";
@import "../tokens/spacing";

[class^=pb_textarea_kit] {
  margin-bottom: $space_sm;
  
  [class^=pb_caption_kit] {
    margin-bottom: $space_xs;
    display: block;
  }
  textarea::placeholder,
  .pb_text_area_kit::placeholder {
    @include pb_body_light;
  }
  textarea,
  .pb_text_area_kit {
    @include pb_textarea_light;
  }
  textarea:focus,
  .pb_text_area_kit:focus {
    border-color: $primary;
    @include pb_textarea_focus_light;
  }

  textarea:hover,
  .pb_text_area_kit:hover {
    background-color: rgba($focus_input_light,$opacity_5);
  }


  &.resize_both > textarea {
    resize: both;
    overflow: auto;
  }
  &.resize_horizontal > textarea {
    resize: horizontal;
    overflow: auto;
  }
  &.resize_vertical > textarea {
    resize: vertical;
    overflow: auto;
  }

  &.dark {
    textarea::placeholder {
      @include pb_body_light_dark;
    }
    textarea,
    .pb_text_area_kit {
      @include pb_body_dark;
      background-color: rgba($white, $opacity_1);
      border-color: rgba($white, 0.15);
    }
    textarea:focus, .pb_text_area_kit:focus {
      border-color: $active_dark;
      background-color: rgba($white, 0.025);
      -webkit-box-shadow: none;
    }
    textarea:hover,
    .pb_text_area_kit:hover {
      background-color: rgba($white, 0.15);
    }
  }

  &.error {
    [class*=pb_body_kit] {
      margin-top: $space_xs / 2;
    }
    textarea {
      border-color: $error;
    }
  }

  .pb_caption_kit_xs {
    text-align: right;
  }
}

Version data entries

1 entries across 1 versions & 1 rubygems

Version	Path
playbook_ui-8.3.0.pre.alpha1	app/pb_kits/playbook/pb_textarea/_textarea.scss