kupshop/admin/static/scss/components/_autocomplete.scss

// Autocomplete
//------------------------------------------------------

.autocomplete {
   border: 1px solid transparent;
   border-top: 0;
   background: $white;
   font-size: 12px;
   max-height: 0;
   opacity: 0;
   overflow: hidden;
   position: absolute;
   left: 15px;
   right: 15px;
   transition: opacity .25s, max-height .25s;
   transition-timing-function: ease-out;
   z-index: -1;

   &.opened:not(:empty) {
      border: 1px solid $lightgray-dark;
      overflow-y: scroll;
      max-height: 450px;
      opacity: 1;
      z-index: 1000;
   }

   &:not(.opened) {
      max-height: 0 !important;
   }

   > div {
      display: flex;
      align-items: center;
      padding: 5px;
      border-top: 1px solid $lightgray-dark;

      &:focus .btn {
         border-color: $primary;
         background-color: $primary;
         color: $white;
      }

      &:hover,
      &:focus {
         background: $lightgray;
         cursor: pointer;
      }

      &.no-visible {
         background: #f2dede;
      }

      &.old {
         background: #cdd3f2;
      }

      &.has-variations {
         cursor: default;

         &:hover,
         &:focus {
            background: inherit;
         }
      }

      + .variation {
         border-color: #f1f1f1;
      }
   }

   .variation {
      padding-left: 20px;

      &::before {
         color: $darkgray;
         content: "- ";
         display: inline-block;
         margin-right: 3px;
      }

      + .variation {
         border-color: #f1f1f1;
      }

      small {
         margin-left: 5px;
      }
   }

   p {
      padding: 0 15px;
      margin-bottom: 0;
      flex-grow: 1;
   }

   small {
      font-size: 11px;
      color: $darkgray;
   }

   img {
      width: 50px;
      height: auto !important;
   }

   .btn {
      width: 60px;
      flex-shrink: 0;
      padding-right: 5px;
      padding-left: 5px;
      margin-top: 0 !important;
   }
}

.autocomplete-bottom {
   top: 100%;

   &.opened:not(:empty) {
      box-shadow: 0 4px 6px 0 rgba(100, 104, 118, .25);
      border-top: 0;

      + .autocomplete-control.opened,
      + .form-control.opened {
         border-bottom-right-radius: 0;
         border-bottom-left-radius: 0;
         border-bottom-color: $lightgray-dark;
      }
   }
}

.autocomplete-top {
   bottom: 100%;

   &.opened:not(:empty) {
      box-shadow: 0 -4px 6px 0 rgba(100, 104, 118, .25);
      border-bottom: 0;

      + .autocomplete-control.opened,
      + .form-control.opened {
         border-top-right-radius: 0;
         border-top-left-radius: 0;
         border-top-color: $lightgray-dark;
      }
   }
}

.autocomplete-results {

   &.panel:first-child {
      background: $white;
   }

   .panel-body {
      display: flex;
      align-items: center;
      padding: 7px 13px;
   }

   img {
      width: 60px;
      height: auto !important;
   }

   p {
      margin-bottom: 0;
      padding-left: 15px;
      flex-grow: 1;

      a {
         display: inline-block;
         margin-bottom: 2px;
      }

      small {
         color: $darkgray;
      }
   }
}

.autocomplete-product-wrapper {
   .chosen-drop { display: none; }
   .autocomplete.opened:not(:empty) { min-width: 500px; }
}

.body-menu {
   .autocomplete-product-wrapper {
      .autocomplete {
         > div {
            p {
               color: black;
            }
         }
         .btn.add {
            display: none;
         }

         > div.has-variations {
            cursor: auto;
         }

         &.opened:not(:empty) {
            left: 0;
            min-width: 230px;
         }
      }
   }
}

/* additional icons */
.search-clear-icon,
.search-loading-icon {
   top: calc((#{$input-height-base} / 2) - (15px / 2));
   position: absolute;
   line-height: 1;
   z-index: 2;
}

.search-clear-icon {
   right: 10px;
   cursor: pointer;
}

.search-loading-icon {
   right: 35px;
   width: 15px;
   height: 15px;
   animation: spin .7s infinite linear;
   border-bottom: 1px solid $border-color;
   border-right: 1px solid $border-color;
   border-radius: 50%;
}

@keyframes spin {
   from {
      transform: rotate(0deg);
   }

   to {
      transform: rotate(360deg);
   }
}