Bring and require select2 from spree_backend

app/assets/javascripts/admin/all.js

@@ -28,6 +28,7 @@
 
 // spree
 //= require spree
+//= require admin/spree-select2
 //= require admin/spree_backend
 //= require modernizr
 //= require spin

app/assets/javascripts/admin/spree/spree-select2.js.erb

@@ -0,0 +1,7 @@
+//= require select2
+jQuery(function($) {
+  // Make select beautiful
+  $('select.select2').select2({
+    allowClear: true
+  });
+})

app/assets/stylesheets/admin/plugins/_select2.scss

@@ -0,0 +1,185 @@
+.select2-container {
+  &:hover .select2-choice, &.select2-container-active .select2-choice {
+    background-color: $color-sel-hover-bg !important;
+    border-color: $color-sel-hover-bg !important;
+  }
+  .select2-choice {
+    background-image: none !important;
+    background-color: $color-sel-bg;
+    border: none !important;
+    box-shadow: none !important;
+    @include border-radius($border-radius);
+    color: $color-1 !important;
+    font-size: 90%;
+    height: 31px;
+    line-height: inherit !important;
+    padding: 5px 15px 7px;
+
+    span {
+      display: block;
+      padding: 2px;
+    }
+
+    .select2-search-choice-close {
+      background-image: none !important;
+      font-size: 100% !important;
+      @extend .icon-remove;
+      @extend [class^="icon-"]:before;
+      margin-top: 2px;
+    }
+  }
+
+  &.select2-container-active {
+    .select2-choice {
+      box-shadow: none !important;
+    }
+
+    &.select2-dropdown-open .select2-choice div b {
+      @extend .icon-caret-up
+    }
+  }
+}
+
+.select2-drop {
+  border-color: $color-sel-hover-bg;
+  box-shadow: none !important;
+  z-index: 1000000;
+
+  &.select2-drop-above {
+    border-color: $color-sel-hover-bg;
+  }
+}
+
+.select2-search {
+  @extend .icon-search;
+
+  font-size: 100%;
+  color: darken($color-border, 15);
+  padding: 0 9px 0 0;
+
+  &:before {
+    @extend [class^="icon-"]:before;
+
+    position: absolute;
+    top: 13px;
+    left: 13px;
+  }
+
+  input {
+    @extend input[type="text"];
+
+    padding: 6px 0 6px 25px;
+    margin: 5px 0 0 5px;
+    font-family: $base-font-family;
+    font-size: 90%;
+    box-shadow: none;
+    background-image: none;
+  }
+}
+
+.select2-container .select2-choice .select2-arrow {
+  background-image: none;
+  background: transparent;
+  border: 0;
+
+  b {
+    padding-top: 7px;
+    display: block;
+    width: 100%;
+    height: 100%;
+    background: none;
+    font-family: FontAwesome;
+    font-weight: 200 !important;
+
+    &:before {
+      content: "\f0d7";
+    }
+  }
+}
+
+.select2-results {
+  padding-left: 0 !important;
+
+  li {
+    font-size: 85% !important;
+
+    &.select2-highlighted {
+      .select2-result-label {
+        &, h6 {
+          color: $color-1 !important;
+        }
+      }
+    }
+
+    .select2-result-label {
+      color: $color-body-text;
+      min-height: 22px;
+      clear: both;
+      overflow: auto;
+    }
+
+    &.select2-no-results, &.select2-searching {
+      padding: 5px;
+      background-color: transparent;
+      color: $color-body-text;
+      text-align: center;
+      font-weight: $font-weight-bold;
+      text-transform: uppercase;
+    }
+  }
+
+  .select2-highlighted {
+    background-color: $color-sel-bg;
+  }
+}
+
+.select2-container-multi {
+  &.select2-container-active, &.select2-dropdown-open {
+    .select2-choices {
+      border-color: $color-sel-hover-bg !important;
+      box-shadow: none;
+      border-bottom-left-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+  }
+  .select2-choices {
+    @extend input[type="text"];
+    padding: 6px 3px 3px 3px;
+    box-shadow: none;
+    background-image: none !important;
+
+    .select2-search-choice {
+      @include border-radius($border-radius);
+      margin: 0 0 3px 3px;
+      background-image: none;
+      background-color: $color-sel-bg;
+      border: none;
+      box-shadow: none;
+      color: $color-1 !important;
+      font-size: 85%;
+
+      &:hover {
+        background-color: $color-sel-hover-bg;
+      }
+
+      .select2-search-choice-close {
+        background-image: none !important;
+        font-size: 85% !important;
+        @extend .icon-remove;
+        @extend [class^="icon-"]:before;
+        margin-left: 2px;
+        color: $color-1;
+      }
+    }
+  }
+}
+
+label .select2-container {
+  margin-top: -6px;
+  .select2-choice {
+    span {
+      text-transform: none;
+      font-weight: normal;
+    }
+  }
+}