Merge pull request #248 from wpaccessibility/remove-search-autocomplete

Remove search autocomplete

Author: rianrietveld

_layouts/default.html

@@ -43,6 +43,5 @@
       </div>
     </div>
   </div>
-<div id="screen-reader-feedback" role="region" aria-live="polite" aria-atomic="true"></div>
 </body>
 </html>

_sass/components/_search.scss

@@ -119,36 +119,6 @@
   }
 }
 
-// ------------------------------------------------------------
-// Search results dropdown
-// ------------------------------------------------------------
-.search-results {
-  position: absolute;
-  left: 0;
-  display: none;
-  width: 100%;
-  max-height: calc(100% - #{$sp-10});
-  overflow-y: auto;
-  padding: $sp-1 $sp-2;
-  border-bottom-right-radius: $border-radius;
-  border-bottom-left-radius: $border-radius;
-
-  @include mq(md) {
-    top: 100%;
-    max-height: calc(100vh - 200%) !important;
-    padding-left: 3rem;
-  }
-}
-
-.search-results-list {
-  padding-left: 0;
-  margin-bottom: $sp-1;
-  list-style: none;
-  background-color: $body-background-color;
-  outline: 1px solid $border-color;
-  outline-offset: -1px;
-}
-
 // ------------------------------------------------------------
 // Full search results page
 // ------------------------------------------------------------
@@ -176,107 +146,10 @@
   }
 }
 
-// ------------------------------------------------------------
-// Individual search result listing
-// ------------------------------------------------------------
-.search-results-list-item {
-  padding: 0;
-  margin: 0;
-  font-size: var(--text-font-size-sm);
-}
-
-.search-result {
-  display: block;
-  padding: $sp-1 $sp-3;
-
-  &:hover,
-  &.active {
-    background-color: $feedback-color;
-  }
-}
-
-.search-result-title {
-  display: block;
-  padding: $sp-2 0;
-
-  @include mq(sm) {
-    display: inline-block;
-    padding-right: $sp-2;
-    vertical-align: top;
-  }
-}
-
-// ------------------------------------------------------------
-// Document name + icon
-// ------------------------------------------------------------
-.search-result-doc {
-  display: flex;
-  align-items: center;
-  word-wrap: break-word;
-
-  .search-result-icon {
-    width: $sp-4;
-    height: $sp-4;
-    margin-right: $sp-2;
-    color: $link-color;
-    flex-shrink: 0;
-  }
-
-  .search-result-doc-title {
-    overflow: auto;
-    font-weight: 700;
-  }
-}
-
-// ------------------------------------------------------------
-// Section title
-// ------------------------------------------------------------
-.search-result-section {
-  margin-left: #{$sp-4 + $sp-2};
-  word-wrap: break-word;
-}
-
-.search-result-rel-url {
-  display: block;
-  margin-left: #{$sp-4 + $sp-2};
-  overflow: hidden;
-  color: $search-result-preview-color;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-// ------------------------------------------------------------
-// Search previews (disabled for now)
-// ------------------------------------------------------------
-.search-result-previews {
-  display: none;
-  padding: $sp-2 0 $sp-2 $sp-4;
-  margin-left: $sp-2;
-  color: $search-result-preview-color;
-  word-wrap: break-word;
-  border-left: $border;
-  border-left-color: $border-color;
-
-  @include mq(sm) {
-    width: 60%;
-    padding-left: $sp-2;
-    margin-left: 0;
-    vertical-align: top;
-  }
-}
-
-.search-result-preview + .search-result-preview {
-  margin-top: $sp-1;
-}
-
 .search-result-highlight {
   font-weight: normal;
 }
 
-.search-no-result {
-  padding: $sp-2 $sp-3;
-}
-
 // ------------------------------------------------------------
 // Floating search button
 // ------------------------------------------------------------
@@ -293,86 +166,3 @@
   align-items: center;
   justify-content: center;
 }
-
-// ------------------------------------------------------------
-// Search overlay
-// ------------------------------------------------------------
-.search-overlay {
-  position: fixed;
-  top: 0;
-  left: 0;
-  z-index: 1;
-  width: 0;
-  height: 0;
-  background-color: rgba(0, 0, 0, 0.3);
-  opacity: 0;
-  transition:
-    opacity ease $transition-duration,
-    width 0s $transition-duration,
-    height 0s $transition-duration;
-}
-
-// ------------------------------------------------------------
-// Search-active state
-// ------------------------------------------------------------
-.search-active {
-  .search {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background-color: var(--color-neutral-inverse-bg-document);
-
-    @include mq(md) {
-      background-color: var(--color-neutral-bg-document);
-    }
-  }
-
-  .search-input-wrap {
-    height: $sp-10;
-    border-radius: 0;
-
-    @include mq(md) {
-      width: $search-results-width;
-    }
-  }
-
-  .search-input {
-    background-color: var(--color-neutral-bg-document);
-  }
-
-  .search-results {
-    display: block;
-  }
-
-  .search-no-result {
-    background-color: var(--color-neutral-bg-document);
-  }
-
-  .search-overlay {
-    width: 100%;
-    height: 100%;
-    opacity: 1;
-    transition:
-      opacity ease $transition-duration,
-      width 0s,
-      height 0s;
-  }
-
-  @include mq(md) {
-    .main {
-      position: fixed;
-      right: 0;
-      left: 0;
-    }
-  }
-
-  .main-header {
-    padding-top: $sp-10;
-
-    @include mq(md) {
-      padding-top: 0;
-    }
-  }
-}