Contents

@import "../pb_textarea/textarea_mixin";
@import "../pb_title/title_mixin";
@import "../tokens/colors";


[class^=pb_text_input_kit] {
  .pb_text_input_kit_label {
    margin-bottom: $space_xs;
    display: block;
  }

  .text_input_wrapper {
    margin-bottom: $space_sm;
    display: block;

    input::placeholder,
    .text_input .placeholder {
      @include pb_body_light;
    }

    input,
    .text_input {
      @include pb_textarea_light;
      overflow: hidden;
    }

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

    input:focus,
    .text_input:focus,
    input:-webkit-autofill:focus,
    .text_input:-webkit-autofill:focus {
      @include pb_textarea_focus;
      border-color: $primary;
      -webkit-box-shadow: 0 0 0px 1000px $focus_input_light inset;
      transition: background-color 5000s ease-in-out 0s;
    }
  }

  &.dark {
    .text_input_wrapper {
      margin-bottom: 1rem;

      input::placeholder,
      .text_input .placeholder {
        @include pb_body_light_dark;
      }

      input, .text_input {
        @include pb_textarea_dark;
        @include pb_body_dark;
        overflow: hidden;
        background-color: rgba($white,$opacity_1);
        border-color: rgba($white, 0.15);
      }

      input:hover,
      .text_input:hover{
        background-color: rgba($white, 0.15);
      }

      input:focus,
      .text_input:focus,
      input:-webkit-autofill:focus,
      .text_input:-webkit-autofill:focus {
        border-color: $active_dark;
        background-color: rgba($white, 0.025);
        -webkit-box-shadow: none;

      }
    }

    &.error {
      .text_input_wrapper {
        input, .text_input {
          border-color: $error_dark;
        }
      }
    }
  }

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

Version data entries

1 entries across 1 versions & 1 rubygems

Version	Path
playbook_ui-8.3.0.pre.alpha1	app/pb_kits/playbook/pb_text_input/_text_input.scss