Replace images with Font Awesome icons

src/rails_admin/filtering-multiselect.js

@@ -69,7 +69,7 @@ import I18n from "./i18n";
         this.element.attr("id")
       );
       this.wrapper.insertAfter(this.element);
-      var header = $('<div class="ra-multiselect-header ui-helper-clearfix">');
+      var header = $('<div class="ra-multiselect-header">');
       this.filter = $(
         '<input type="search" placeholder="' +
           this.options.regional.search +
@@ -93,35 +93,31 @@ import I18n from "./i18n";
       this.collection = $('<select multiple="multiple"></select>');
       this.collection.addClass("form-control ra-multiselect-collection");
       this.addAll = $(
-        '<a href="#" class="ra-multiselect-item-add-all"><span class="ui-icon ui-icon-circle-triangle-e"></span>' +
+        '<a href="#" class="ra-multiselect-item-add-all"><span class="fas fa-chevron-circle-right"></span>' +
           this.options.regional.chooseAll +
           "</a>"
       );
       columns.left.html(this.collection).append(this.addAll);
       this.collection.wrap('<div class="wrapper"/>');
 
       this.add = $(
-        '<a href="#" class="ui-icon ui-icon-circle-triangle-e ra-multiselect-item-add">' +
-          this.options.regional.add +
-          "</a>"
-      );
+        '<a href="#" class="fas fa-chevron-circle-right ra-multiselect-item-add"></a>'
+      ).attr("title", this.options.regional.add);
       columns.center.append(this.add);
       if (this.options.removable) {
         this.remove = $(
-          '<a href="#" class="ui-icon ui-icon-circle-triangle-w ra-multiselect-item-remove">' +
-            this.options.regional.remove +
-            "</a>"
-        );
+          '<a href="#" class="fas fa-chevron-circle-left ra-multiselect-item-remove"></a>'
+        ).attr("title", this.options.regional.remove);
         columns.center.append(this.remove);
       }
       if (this.options.sortable) {
         this.up = $(
-          '<a href="#" class="ui-icon ui-icon-circle-triangle-n ra-multiselect-item-up">' +
+          '<a href="#" class="fas fa-chevron-circle-up ra-multiselect-item-up">' +
             this.options.regional.up +
             "</a>"
         );
         this.down = $(
-          '<a href="#" class="ui-icon ui-icon-circle-triangle-s ra-multiselect-item-down">' +
+          '<a href="#" class="fas fa-chevron-circle-down ra-multiselect-item-down">' +
             this.options.regional.down +
             "</a>"
         );
@@ -134,7 +130,7 @@ import I18n from "./i18n";
       columns.right.append(this.selection);
       if (this.options.removable) {
         this.removeAll = $(
-          '<a href="#" class="ra-multiselect-item-remove-all"><span class="ui-icon ui-icon-circle-triangle-w"></span>' +
+          '<a href="#" class="ra-multiselect-item-remove-all"><span class="fas fa-chevron-circle-left"></span>' +
             this.options.regional.clearAll +
             "</a>"
         );

src/rails_admin/styles/base.scss

@@ -14,8 +14,8 @@
 
 /***  Libraries  ***/
 
-@import "./aristo/jquery-ui-1.8.7.custom";
 @import "~eonasdan-bootstrap-datetimepicker/src/sass/bootstrap-datetimepicker-build";
+@import "./filtering-select";
 @import "./filtering-multiselect";
 @import "./widgets";
 @import "./sidescroll";

src/rails_admin/styles/filtering-multiselect.scss

@@ -34,53 +34,20 @@
     width: 30px;
     padding-top: 15px;
     text-align: center;
-    .ui-icon {
+    .fas {
       margin: 5px auto;
     }
   }
 
-  span.ui-icon {
+  span.fas,
+  a.fas {
+    color: #aaa;
+    font-size: 16px;
     margin-right: 4px;
-  }
-  .ui-icon {
-    cursor: pointer;
-    display: inline-block;
-    vertical-align: top;
-    &.ui-icon-circle-triangle-e {
-      background-position: -16px -32px !important;
-      background-image: url("~rails_admin/src/rails_admin/images/multiselect/icon_sprite.png");
-    }
-    &.ui-icon-circle-triangle-e:hover {
-      background-position: -16px -48px !important;
-      background-image: url("~rails_admin/src/rails_admin/images/multiselect/icon_sprite.png");
-    }
-    &.ui-icon-circle-triangle-w {
-      background-position: 0px -32px !important;
-      background-image: url("~rails_admin/src/rails_admin/images/multiselect/icon_sprite.png");
-    }
-    &.ui-icon-circle-triangle-w:hover {
-      background-position: 0px -48px !important;
-      background-image: url("~rails_admin/src/rails_admin/images/multiselect/icon_sprite.png");
-    }
-    &.ui-icon-circle-triangle-n {
-      background-position: 0px 0px !important;
-      margin-left: 1px;
-      background-image: url("~rails_admin/src/rails_admin/images/multiselect/ui-icon-circle-triangle-n-light.png");
-    }
-    &.ui-icon-circle-triangle-n:hover {
-      background-position: 0px 0px !important;
-      margin-left: 1px;
-      background-image: url("~rails_admin/src/rails_admin/images/multiselect/ui-icon-circle-triangle-n-dark.png");
-    }
-    &.ui-icon-circle-triangle-s {
-      background-position: 0px 0px !important;
-      margin-left: 1px;
-      background-image: url("~rails_admin/src/rails_admin/images/multiselect/ui-icon-circle-triangle-s-light.png");
-    }
-    &.ui-icon-circle-triangle-s:hover {
-      background-position: 0px 0px !important;
-      margin-left: 1px;
-      background-image: url("~rails_admin/src/rails_admin/images/multiselect/ui-icon-circle-triangle-s-dark.png");
+    text-decoration: none;
+
+    &:hover {
+      color: $gray;
     }
   }
 }

src/rails_admin/styles/filtering-select.scss

@@ -0,0 +1,66 @@
+.ui-widget {
+  font-family: Arial, sans-serif;
+  font-size: 1.1em;
+}
+.ui-widget .ui-widget {
+  font-size: 1em;
+}
+.ui-widget input,
+.ui-widget select,
+.ui-widget textarea,
+.ui-widget button {
+  font-family: Arial, sans-serif;
+  font-size: 1em;
+}
+.ui-widget-content {
+  border: 1px solid #b6b6b6;
+  background: #ffffff;
+  color: #4f4f4f;
+}
+.ui-widget-content a {
+  color: #4f4f4f;
+}
+
+.ui-menu {
+  list-style: none;
+  padding: 2px;
+  margin: 0;
+  display: block;
+  float: left;
+}
+.ui-menu .ui-menu {
+  margin-top: -3px;
+}
+.ui-menu .ui-menu-item {
+  margin: 0;
+  padding: 0;
+  zoom: 1;
+  float: left;
+  clear: left;
+  width: 100%;
+}
+.ui-menu .ui-menu-item a {
+  text-decoration: none;
+  display: block;
+  padding: 0.2em 0.4em;
+  line-height: 1.5;
+  zoom: 1;
+}
+.ui-menu .ui-menu-item a.ui-state-hover,
+.ui-menu .ui-menu-item a.ui-state-active {
+  font-weight: normal;
+  margin: -1px;
+  background: #5f83b9;
+  color: #ffffff;
+  text-shadow: 0px 1px 1px #234386;
+  border-color: #466086;
+  border-radius: 0;
+}
+
+.ui-autocomplete {
+  position: absolute;
+  cursor: default;
+  z-index: 1051 !important;
+  border-radius: 0;
+  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);
+}