first commit

admin/static/scss/components/_autocomplete.scss

@@ -0,0 +1,241 @@
+// 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);
+   }
+}