Merge pull request #5030 from fedspendingtransparency/mod/dev-14211

 DEV - 14211: Complete the Recipient Autocomplete Filter

Author: anjenkin

src/_scss/components/search/_autocomplete.scss

@@ -0,0 +1,57 @@
+.filter-item-wrap {
+
+    padding: rem(20) rem(32);
+
+  .checkbox-filter__wrapper {
+    .checkbox-filter__list {
+      list-style: none;
+      padding: 0;
+      font-size: $font-size-12;
+      line-height: 1.5;
+
+      .checkbox-filter__item {
+        margin-bottom: $global-margin;
+        display: flex;
+        align-items: flex-start;
+
+        &:last-of-type {
+          margin-bottom: 0;
+        }
+
+        input {
+          @include usa-input-checkbox;
+          margin: 0;
+          border: solid rem(1) $gray-cool-20;
+          width: rem(12);
+          height: rem(12);
+          min-width: rem(12);
+          top: rem(3);
+
+          &:checked {
+            background-color: $blue-50;
+            border-color: $blue-50;
+          }
+
+          &:checked:before {
+            width: rem(4);
+            height: rem(8);
+            margin: rem(0) rem(3);
+          }
+        }
+
+        .checkbox-filter__item-label {
+          margin: rem(1) 0 0 rem(6);
+          color: $gray-80;
+
+          span.highlight {
+            background-color: $yellow-10;
+          }
+        }
+      }
+
+      .checkbox-filter__item.hidden {
+        display: none;
+      }
+    }
+  }
+}

src/_scss/components/search/_autocompleteCheckbox.scss

@@ -0,0 +1,111 @@
+.extent-competed-filter {
+   
+    @import "elements/filters/_selectedFilterBtn";
+    @import "mixins/selectedFilterWrap";
+
+    .autocomplete__input {
+        padding-bottom: 0 !important;
+    }
+
+    .filter-item-wrap {
+        .clear-all__container {
+            display: flex;
+            justify-content: right;
+
+            .clear-all__button {
+                background: none;
+                color: $theme-color-1;
+                margin: ($global-margin * 2) 0 0 0;
+                padding: 0;
+                font-size: $smallest-font-size;
+                line-height: 1.5;
+            }
+        }
+        
+        .loading-message-container {
+            font-size: rem(30);
+            text-align: center;
+            margin-top: $global-margin;
+
+            .loading-message-container__text {
+                font-size: 2rem;
+                padding-bottom: 2rem;
+            }
+        }
+        position: relative;
+
+        .checkbox-type-filter {
+            position: absolute;
+            overflow-y: scroll;
+            background-color: #fff;
+            z-index: 10;
+            max-height: 400px;
+            border: solid 1px $gray-cool-10;
+            border-radius: 3px;
+            min-width: 100%;
+
+            &.bottom-fade {
+                ul.autocomplete-checkbox {
+                    li:last-child {
+                        mask-image: linear-gradient(to top, transparent, rgba(0, 0, 0, 1) 40px);
+                    }
+                }
+            }
+
+            ul.autocomplete-checkbox {
+                list-style: none;
+                list-style-type: none;
+                padding: 0;
+                margin: 0;
+                min-width: 100%;
+
+                li {
+                    &.autocomplete-heading {
+                        font-size: $font-size-12;
+                        font-weight: $font-semibold;
+                        line-height: 1.5;
+                        text-align: left;
+                        color: $gray-90;
+                        padding: rem(4) rem(8);
+                        display: flex;
+                        justify-content: space-between;
+                        background-color: $gray-cool-3;
+                        
+                        .toggle-all__button {
+                            background: none;
+                            color: $theme-color-1;
+                            padding: 0;
+                            margin: 0;
+                            font-size: $smallest-font-size;
+                            line-height: 1.5;
+                        }
+                    }
+
+                    .primary-checkbox-type.single-item {
+                        padding-left: rem(8);
+                        text-transform: uppercase;
+
+                        input {
+                            top: rem(4);
+                        }
+
+                        .checkbox-item-label{
+                            color: $gray-90;
+                            font-size: $font-size-12;
+                            font-weight: $font-normal;
+                            line-height: rem(18);
+
+                            span.bold-highlight {
+                                font-weight: $font-semibold;
+                                font-style: normal;
+                            }
+                        }
+
+                       
+                    }
+
+                }
+            }
+        }        
+    }    
+}

src/_scss/pages/search/filters/otherFilters/otherFilters.scss

@@ -2,14 +2,8 @@
     @import "elements/filters/_errorMessage";
     @import "elements/filters/_typeahead";
     @import "elements/filters/_selectedFilterBtn";
-    @import "mixins/selectedFilterWrap";
     @import './pages/award/_moreButton';
-
-    padding-left: rem(20);
-
-    &.searchV2 {
-        padding-left: 0;
-    }
+    @import "components/search/_autocompleteCheckbox";
 
     .shown {
         min-height: rem(18);
@@ -23,7 +17,6 @@
     }
 
     .selected-filters {
-        @include selected-filter-wrap;
         margin-top: rem(20);
     }