_patterns_search-and-filter.scss

@import 'settings';

@mixin vf-p-search-and-filter {
  @include vf-search-and-filter;
  @include vf-filter-panel-section;
}

@mixin vf-search-and-filter {
  // we need to prevent the focus outline of the input element
  // being obscured in certain situations, so this variable
  // references the weight of that outline
  $focus-outline-offset: $bar-thickness;

  // this is the total width occupied by the search input clear button:
  // the buttons left and right padding, plus the width of the icon,
  // and finally the width of the focus outline defined above
  $search-filter-actions-width: 2 * $sph--small + map-get($icon-sizes, default) + $focus-outline-offset;

  // When the search and filter is not expanded, but is overflowing with chips, we need to
  // specify a height that matches that of a standard input element. This height is a combination
  // of an input's line-height, its vertical padding, and a nudge.
  $input-height: calc(map-get($line-heights, default-text) + $input-vertical-padding + $spv-nudge - $input-border-thickness);

  .p-search-and-filter {
    border-bottom: $input-border-thickness solid $colors--light-theme--border-high-contrast;
    position: relative;

    .p-search-and-filter__search-container {
      align-items: center;
      background-color: $colors--light-theme--background-inputs;
      display: flex;
      flex-wrap: wrap;
      height: auto;
      margin: 0;
      overflow: hidden;
      padding-left: $sph--small;
      padding-right: $search-filter-actions-width;
      position: relative;

      &[data-active='true'] {
        height: auto;
      }

      &[data-empty='false'],
      &[aria-expanded='false'] {
        height: $input-height;
      }

      .p-chip {
        margin-bottom: $spv--x-small;
        margin-top: $spv--x-small;
      }

      .p-search-and-filter__selected-count {
        color: $color-information;
        cursor: pointer;
        position: absolute;
        right: 0.5rem;
        top: $focus-outline-offset;
      }

      &[aria-expanded='true'] {
        height: auto;
        max-height: 100%;

        .p-search-and-filter__selected-count {
          display: none;
        }
      }
    }

    .p-search-and-filter__panel {
      @include vf-transition(opacity, fast);

      background-color: $color-x-light;
      box-shadow: $box-shadow;
      opacity: 1;
      padding: $input-vertical-padding $sph--large 0;
      position: absolute;
      width: 100%;
      z-index: 9999;

      &[aria-hidden='true'] {
        opacity: 0;
        pointer-events: none;
      }
    }

    .p-search-and-filter__search-prompt {
      background: $color-light;
      cursor: pointer;
      margin-left: -1rem;
      margin-right: -1rem;
      overflow: hidden;
      padding: 1rem;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .p-search-and-filter__clear {
      @extend %vf-button-has-icon;
      background-color: $colors--light-theme--background-inputs;

      border: none;
      bottom: $focus-outline-offset;
      line-height: map-get($line-heights, small);
      margin: 0;
      position: absolute;
      right: $focus-outline-offset;
      top: $focus-outline-offset;
      z-index: 9999;
    }

    .p-search-and-filter__search-query {
      @extend %bold;
    }

    .p-search-and-filter__box {
      display: inline-flex;
      flex: 1;
      margin: 0;
      position: relative;
    }

    .p-search-and-filter__input {
      border: 0;
      box-shadow: none;
      flex-grow: 1;
      margin-bottom: 0;
      margin-left: -$sph--small; // compensate for the left padding of the container
      margin-right: -$search-filter-actions-width; // compensate for the space reserved for counter
      min-width: 6rem;
      position: relative;

      &::-webkit-search-cancel-button {
        -webkit-appearance: none; // stylelint-disable-line property-no-vendor-prefix
      }
    }

    .p-chip + .p-search-and-filter__box {
      margin-left: $sph--small;
    }
  }
}

@mixin vf-filter-panel-section {
  .p-filter-panel-section {
    border-bottom: 1px solid $color-mid-x-light;
    margin: 0;
    padding-bottom: $spv--large;

    &:last-child {
      border: 0;
    }

    .p-chip {
      margin-bottom: $spv--small;

      // hide chips lead when there are in panel
      // FIXME: this should be handled in HTML/React, not CSS
      .p-chip__lead {
        display: none;
      }

      .p-chip__lead + .p-chip__value::before {
        display: none;
      }
    }

    .p-filter-panel-section__heading {
      color: $color-mid-dark;
      font-size: 1rem;
      margin-bottom: 0;
    }

    .p-filter-panel-section__chips {
      overflow: hidden;
      padding-right: 1.25rem;
      position: relative;

      &[aria-expanded='false'] {
        max-height: 5rem; // 2 rows of chips
      }
    }

    .p-filter-panel-section__counter {
      bottom: 0;
      color: $color-information;
      cursor: pointer;
      position: absolute;
      right: 0.25rem;
    }
  }
}