Contents

@import "../tokens/colors";
@import "../tokens/border_radius";

[class^=pb_typeahead_kit] {
  .pb_typeahead_wrapper {
    position: relative;

    .pb_typeahead_loading_indicator {
      position: absolute;
      width: min-content;
      bottom: 0.6em;
      right: 1em;
      opacity: 0;
      color: $text_lt_light;
      transition: opacity .15s ease-in-out;
    }
  }

  [class^=pb_text_input_kit] {
    .text_input_wrapper > input:first-child {
      padding-right: $space_xl;
    }
  }

  .pb_item_kit {
    padding: ($space_xs + 2) 0;

    &:hover {
      background-color: $bg_light;
    }
  }
  
  [class^=pb_list_kit] {
    max-height: 18em;
    overflow-y: auto;
    overscroll-behavior: contain;
    position: absolute;
    left: 0;
    right: 0;
    background: white;
    box-shadow: $shadow_deep;
    z-index: 100;
    border-radius: $border_rad_heavier;
    transition: opacity .25s ease-in-out;
  }

  &:focus-within [class^=pb_list_kit] {
    display: block;
    opacity: 1;
  }

  &:not(:focus-within) [class^=pb_list_kit] {
    display: none;
    opacity: 0;
  }

  [class^=pb_list_kit] {
    margin-top: -$space-sm;
    li {
      transition: background-color .25s ease-in-out;
    }
    & > [data-pb-typeahead-kit-results] > li {
      &:focus-within {
        background-color: $active_light;
      }

      > button {
        background: none;
        color: $text_lt_default;
        border: none;
        padding: 0;
        font: inherit;
        cursor: pointer;
        outline: inherit;
        width: 100%;
        height: 100%;
        text-align: left;
      }
    }
  }

  &[class*=_dark] {
    .pb_typeahead_wrapper .pb_typeahead_loading_indicator {
      color: $text_dk_light;
    }
  }
}

Version data entries

61 entries across 61 versions & 1 rubygems

Version	Path
playbook_ui-4.11.0	app/pb_kits/playbook/pb_typeahead/_typeahead.scss