On-demand loading of select2

Fix for loading select2 on demand

Fix of general select2 setup + linting fixes

Typo in exclude for stylelint
Added lazy CSS Loading for all Select2 instances

Fixed Spec around Select 2 + no-nesting  rules

app/assets/javascripts/behaviors/select2.js

 import $ from 'jquery';
+import { loadCSSFile } from '../lib/utils/css_utils';
 
 export default () => {
-  if ($('select.select2').length) {
+  const $select2Elements = $('select.select2');
+  if ($select2Elements.length) {
     import(/* webpackChunkName: 'select2' */ 'select2/select2')
       .then(() => {
-        $('select.select2').select2({
+        // eslint-disable-next-line promise/no-nesting
+        loadCSSFile(gon.select2_css_path)
+          .then(() => {
+            $select2Elements.select2({
               width: 'resolve',
               minimumResultsForSearch: 10,
               dropdownAutoWidth: true,
@@ -12,11 +17,13 @@ export default () => {
 
             // Close select2 on escape
             $('.js-select2').on('select2-close', () => {
-          setTimeout(() => {
+              requestAnimationFrame(() => {
                 $('.select2-container-active').removeClass('select2-container-active');
                 $(':focus').blur();
-          }, 1);
               });
+            });
+          })
+          .catch(() => {});
       })
       .catch(() => {});
   }

app/assets/javascripts/groups_select.js

@@ -4,10 +4,35 @@ import axios from './lib/utils/axios_utils';
 import Api from './api';
 import { normalizeHeaders } from './lib/utils/common_utils';
 import { __ } from '~/locale';
+import { loadCSSFile } from './lib/utils/css_utils';
+
+const fetchGroups = params => {
+  axios[params.type.toLowerCase()](params.url, {
+    params: params.data,
+  })
+    .then(res => {
+      const results = res.data || [];
+      const headers = normalizeHeaders(res.headers);
+      const currentPage = parseInt(headers['X-PAGE'], 10) || 0;
+      const totalPages = parseInt(headers['X-TOTAL-PAGES'], 10) || 0;
+      const more = currentPage < totalPages;
+
+      params.success({
+        results,
+        pagination: {
+          more,
+        },
+      });
+    })
+    .catch(params.error);
+};
 
 const groupsSelect = () => {
+  loadCSSFile(gon.select2_css_path)
+    .then(() => {
       // Needs to be accessible in rspec
       window.GROUP_SELECT_PER_PAGE = 20;
+
       $('.ajax-groups-select').each(function setAjaxGroupsSelect2() {
         const $select = $(this);
         const allAvailable = $select.data('allAvailable');
@@ -27,24 +52,7 @@ const groupsSelect = () => {
             dataType: 'json',
             quietMillis: 250,
             transport(params) {
-          axios[params.type.toLowerCase()](params.url, {
-            params: params.data,
-          })
-            .then(res => {
-              const results = res.data || [];
-              const headers = normalizeHeaders(res.headers);
-              const currentPage = parseInt(headers['X-PAGE'], 10) || 0;
-              const totalPages = parseInt(headers['X-TOTAL-PAGES'], 10) || 0;
-              const more = currentPage < totalPages;
-
-              params.success({
-                results,
-                pagination: {
-                  more,
-                },
-              });
-            })
-            .catch(params.error);
+              fetchGroups(params);
             },
             data(search, page) {
               return {
@@ -95,6 +103,8 @@ const groupsSelect = () => {
           dropdown.style.height = `${Math.floor(dropdown.scrollHeight)}px`;
         });
       });
+    })
+    .catch(() => {});
 };
 
 export default () => {

app/assets/javascripts/issuable/auto_width_dropdown_select.js

 import $ from 'jquery';
+import { loadCSSFile } from '../lib/utils/css_utils';
 
 let instanceCount = 0;
 
@@ -12,6 +13,9 @@ class AutoWidthDropdownSelect {
   init() {
     const { dropdownClass } = this;
     import(/* webpackChunkName: 'select2' */ 'select2/select2')
+      .then(() => {
+        // eslint-disable-next-line promise/no-nesting
+        loadCSSFile(gon.select2_css_path)
           .then(() => {
             this.$selectElement.select2({
               dropdownCssClass: dropdownClass,
@@ -19,6 +23,8 @@ class AutoWidthDropdownSelect {
             });
           })
           .catch(() => {});
+      })
+      .catch(() => {});
 
     return this;
   }

app/assets/javascripts/issuable_context.js

@@ -2,6 +2,7 @@ import $ from 'jquery';
 import Cookies from 'js-cookie';
 import { GlBreakpointInstance as bp } from '@gitlab/ui/dist/utils';
 import UsersSelect from './users_select';
+import { loadCSSFile } from './lib/utils/css_utils';
 
 export default class IssuableContext {
   constructor(currentUser) {
@@ -9,6 +10,9 @@ export default class IssuableContext {
     this.reviewersSelect = new UsersSelect(currentUser, '.js-reviewer-search');
 
     import(/* webpackChunkName: 'select2' */ 'select2/select2')
+      .then(() => {
+        // eslint-disable-next-line promise/no-nesting
+        loadCSSFile(gon.select2_css_path)
           .then(() => {
             $('select.select2').select2({
               width: 'resolve',
@@ -16,6 +20,8 @@ export default class IssuableContext {
             });
           })
           .catch(() => {});
+      })
+      .catch(() => {});
 
     $('.issuable-sidebar .inline-update').on('change', 'select', function onClickSelect() {
       return $(this).submit();

app/assets/javascripts/issuable_form.js

@@ -7,6 +7,7 @@ import ZenMode from './zen_mode';
 import AutoWidthDropdownSelect from './issuable/auto_width_dropdown_select';
 import { parsePikadayDate, pikadayToString } from './lib/utils/datetime_utility';
 import { queryToObject, objectToQuery } from './lib/utils/url_utility';
+import { loadCSSFile } from './lib/utils/css_utils';
 
 const MR_SOURCE_BRANCH = 'merge_request[source_branch]';
 const MR_TARGET_BRANCH = 'merge_request[target_branch]';
@@ -183,6 +184,9 @@ export default class IssuableForm {
 
   initTargetBranchDropdown() {
     import(/* webpackChunkName: 'select2' */ 'select2/select2')
+      .then(() => {
+        // eslint-disable-next-line promise/no-nesting
+        loadCSSFile(gon.select2_css_path)
           .then(() => {
             this.$targetBranchSelect.select2({
               ...AutoWidthDropdownSelect.selectOptions('js-target-branch-select'),
@@ -216,5 +220,7 @@ export default class IssuableForm {
             });
           })
           .catch(() => {});
+      })
+      .catch(() => {});
   }
 }

app/assets/javascripts/project_select.js

@@ -4,8 +4,11 @@ import $ from 'jquery';
 import Api from './api';
 import ProjectSelectComboButton from './project_select_combo_button';
 import { s__ } from './locale';
+import { loadCSSFile } from './lib/utils/css_utils';
 
 const projectSelect = () => {
+  loadCSSFile(gon.select2_css_path)
+    .then(() => {
       $('.ajax-project-select').each(function(i, select) {
         let placeholder;
         const simpleFilter = $(select).data('simpleFilter') || false;
@@ -98,6 +101,7 @@ const projectSelect = () => {
           },
 
           initSelection(el, callback) {
+            // eslint-disable-next-line promise/no-nesting
             return Api.project(el.val()).then(({ data }) => callback(data));
           },
 
@@ -108,6 +112,8 @@ const projectSelect = () => {
         if (isInstantiated || simpleFilter) return select;
         return new ProjectSelectComboButton(select);
       });
+    })
+    .catch(() => {});
 };
 
 export default () => {

app/assets/javascripts/project_select_combo_button.js

 import $ from 'jquery';
 import AccessorUtilities from './lib/utils/accessor';
+import { loadCSSFile } from './lib/utils/css_utils';
 
 export default class ProjectSelectComboButton {
   constructor(select) {
@@ -45,12 +46,17 @@ export default class ProjectSelectComboButton {
   // eslint-disable-next-line class-methods-use-this
   openDropdown(event) {
     import(/* webpackChunkName: 'select2' */ 'select2/select2')
+      .then(() => {
+        // eslint-disable-next-line promise/no-nesting
+        loadCSSFile(gon.select2_css_path)
           .then(() => {
             $(event.currentTarget)
               .siblings('.project-item-select')
               .select2('open');
           })
           .catch(() => {});
+      })
+      .catch(() => {});
   }
 
   selectProject() {

app/assets/javascripts/users_select/index.js

@@ -15,6 +15,7 @@ import { parseBoolean, spriteIcon } from '../lib/utils/common_utils';
 import { getAjaxUsersSelectOptions, getAjaxUsersSelectParams } from './utils';
 import initDeprecatedJQueryDropdown from '~/deprecated_jquery_dropdown';
 import { fixTitle, dispose } from '~/tooltips';
+import { loadCSSFile } from '../lib/utils/css_utils';
 
 // TODO: remove eventHub hack after code splitting refactor
 window.emitSidebarEvent = window.emitSidebarEvent || $.noop;
@@ -591,6 +592,9 @@ function UsersSelect(currentUser, els, options = {}) {
 
   if ($('.ajax-users-select').length) {
     import(/* webpackChunkName: 'select2' */ 'select2/select2')
+      .then(() => {
+        // eslint-disable-next-line promise/no-nesting
+        loadCSSFile(gon.select2_css_path)
           .then(() => {
             $('.ajax-users-select').each((i, select) => {
               const options = getAjaxUsersSelectOptions($(select), AJAX_USERS_SELECT_OPTIONS_MAP);
@@ -680,6 +684,8 @@ function UsersSelect(currentUser, els, options = {}) {
             });
           })
           .catch(() => {});
+      })
+      .catch(() => {});
   }
 }
 

app/assets/stylesheets/application.scss

@@ -5,7 +5,6 @@
 // directory.
 @import '@gitlab/at.js/dist/css/jquery.atwho';
 @import 'dropzone/dist/basic';
-@import 'select2';
 
 // GitLab UI framework
 @import 'framework';

app/assets/stylesheets/framework/common.scss

@@ -135,7 +135,6 @@ hr {
   text-overflow: ellipsis;
   white-space: nowrap;
 
-  > div:not(.block):not(.select2-display-none),
   .str-truncated {
     display: inline;
   }

app/assets/stylesheets/framework/forms.scss

@@ -133,11 +133,6 @@ label {
 }
 
 .input-group {
-  .select2-container {
-    display: table-cell;
-    max-width: 180px;
-  }
-
   .input-group-prepend,
   .input-group-append {
     background-color: $input-group-addon-bg;

app/assets/stylesheets/framework/selects.scss

-/** Select2 selectbox style override **/
-.select2-container {
-  width: 100% !important;
-
-  &.input-md,
-  &.input-lg {
-    display: block;
-  }
-}
-
-.select2-container,
-.select2-container.select2-drop-above {
-  .select2-choice {
-    background: $white;
-    color: $gl-text-color;
-    border-color: $input-border;
-    height: 34px;
-    padding: $gl-vert-padding $gl-input-padding;
-    font-size: $gl-font-size;
-    line-height: 1.42857143;
-    border-radius: $border-radius-base;
-
-    .select2-arrow {
-      background-image: none;
-      background-color: transparent;
-      border: 0;
-      padding-top: 12px;
-      padding-right: 20px;
-      font-size: 10px;
-
-      b {
-        display: none;
-      }
-
-      &::after {
-        content: '\f078';
-        position: absolute;
-        z-index: 1;
-        text-align: center;
-        pointer-events: none;
-        box-sizing: border-box;
-        color: $gray-darkest;
-        display: inline-block;
-        font: normal normal normal 14px/1 FontAwesome;
-        font-size: inherit;
-        text-rendering: auto;
-        -webkit-font-smoothing: antialiased;
-        -moz-osx-font-smoothing: grayscale;
-      }
-    }
-
-    .select2-chosen {
-      margin-right: 15px;
-    }
-
-    &:hover {
-      border-color: $gray-darkest;
-      color: $gl-text-color;
-    }
-  }
-
-  // Essentially we’re doing @include form-control-focus here (from
-  // bootstrap/scss/mixins/_forms.scss), except that the bootstrap mixin adds a
-  // `&:focus` selector and we’re never actually focusing the .select2-choice
-  // link nor the .select2-container, the Select2 library focuses an off-screen
-  // .select2-focusser element instead.
-  &.select2-container-active:not(.select2-dropdown-open) {
-    .select2-choice {
-      color: $input-focus-color;
-      background-color: $input-focus-bg;
-      border-color: $input-focus-border-color;
-      outline: 0;
-    }
-
-    // Reusable focus “glow” box-shadow
-    @mixin form-control-focus-glow {
-      @if $enable-shadows {
-        box-shadow: $input-box-shadow, $input-focus-box-shadow;
-      } @else {
-        box-shadow: $input-focus-box-shadow;
-      }
-    }
-
-    // Apply the focus “glow” shadow to the .select2-container if it also has
-    // the .block-truncated class as that applies an overflow: hidden, thereby
-    // hiding the glow of the nested .select2-choice element.
-    &.block-truncated {
-      @include form-control-focus-glow;
-    }
-
-    // Apply the glow directly to the .select2-choice link if we’re not
-    // block-truncating the container.
-    &:not(.block-truncated) .select2-choice {
-      @include form-control-focus-glow;
-    }
-  }
-
-  &.is-invalid {
-    ~ .invalid-feedback {
-      display: block;
-    }
-
-    .select2-choices,
-    .select2-choice {
-      border-color: $red-500;
-    }
-  }
-}
-
-.select2-drop,
-.select2-drop.select2-drop-above {
-  background: $white;
-  box-shadow: 0 2px 4px $dropdown-shadow-color;
-  border-radius: $border-radius-base;
-  border: 1px solid $border-color;
-  min-width: 175px;
-  color: $gl-text-color;
-  z-index: 999;
-
-  .modal-open & {
-    z-index: $zindex-modal + 200;
-  }
-}
-
-.select2-drop-mask {
-  z-index: 998;
-
-  .modal-open & {
-    z-index: $zindex-modal + 100;
-  }
-}
-
-.select2-drop.select2-drop-above.select2-drop-active {
-  border-top: 1px solid $border-color;
-  margin-top: -6px;
-}
-
-.select2-container-active {
-  .select2-choice,
-  .select2-choices {
-    box-shadow: none;
-  }
-}
-
-.select2-dropdown-open,
-.select2-dropdown-open.select2-drop-above {
-  .select2-choice {
-    border-color: $gray-darkest;
-    outline: 0;
-  }
-}
-
-.select2-container-multi {
-  .select2-choices {
-    border-radius: $border-radius-default;
-    border-color: $input-border;
-    background: none;
-
-    .select2-search-field input {
-      padding: 5px $gl-input-padding;
-      height: auto;
-      font-family: inherit;
-      font-size: inherit;
-    }
-
-    .select2-search-choice {
-      margin: 5px 0 0 8px;
-      box-shadow: none;
-      border-color: $input-border;
-      color: $gl-text-color;
-      line-height: 15px;
-      background-color: $gray-light;
-      background-image: none;
-      padding: 3px 18px 3px 5px;
-
-      .select2-search-choice-close {
-        top: 5px;
-        left: initial;
-        right: 3px;
-      }
-
-      &.select2-search-choice-focus {
-        border-color: $gl-text-color;
-      }
-    }
-  }
-}
-
-.select2-drop-active {
-  margin-top: $dropdown-vertical-offset;
-  font-size: 14px;
-
-  .select2-results {
-    max-height: 350px;
-  }
-}
-
-.select2-search {
-  padding: $grid-size;
-
-  .select2-drop-auto-width & {
-    padding: $grid-size;
-  }
-
-  input {
-    padding: $grid-size;
-    background: transparent image-url('select2.png');
-    color: $gl-text-color;
-    background-clip: content-box;
-    background-origin: content-box;
-    background-repeat: no-repeat;
-    background-position: right 0 bottom 0 !important;
-    border: 1px solid $input-border;
-    border-radius: $border-radius-default;
-    line-height: 16px;
-    transition: border-color ease-in-out 0.15s, box-shadow ease-in-out 0.15s;
-
-    &:focus {
-      border-color: $blue-300;
-    }
-
-    &.select2-active {
-      background-color: $white;
-      background-image: image-url('select2-spinner.gif') !important;
-      background-origin: content-box;
-      background-repeat: no-repeat;
-      background-position: right 6px center !important;
-      background-size: 16px 16px !important;
-    }
-  }
-
-  + .select2-results {
-    padding-top: 0;
-  }
-}
-
-.select2-results {
-  margin: 0;
-  padding: #{$gl-padding / 2} 0;
-
-  .select2-no-results,
-  .select2-searching,
-  .select2-ajax-error,
-  .select2-selection-limit {
-    background: transparent;
-    padding: #{$gl-padding / 2} $gl-padding;
-  }
-
-  .select2-result-label,
-  .select2-more-results {
-    padding: #{$gl-padding / 2} $gl-padding;
-  }
-
-  .select2-highlighted {
-    background: transparent;
-    color: $gl-text-color;
-
-    .select2-result-label {
-      background: $gray-darker;
-    }
-  }
-
-  .select2-result {
-    padding: 0 1px;
-  }
-
-  li.select2-result-with-children > .select2-result-label {
-    font-weight: $gl-font-weight-bold;
-    color: $gl-text-color;
-  }
-}
-
 .ajax-users-select {
   width: 400px;
 
@@ -282,14 +10,6 @@
   }
 }
 
-.select2-highlighted {
-  .group-result {
-    .group-path {
-      color: $gray-700;
-    }
-  }
-}
-
 .group-result {
   .group-image {
     float: left;
@@ -345,11 +65,3 @@
 .ajax-users-dropdown {
   min-width: 250px !important;
 }
-
-.select2-result-selectable,
-.select2-result-unselectable {
-  .select2-match {
-    font-weight: $gl-font-weight-bold;
-    text-decoration: none;
-  }
-}

app/assets/stylesheets/pages/editor.scss

@@ -74,10 +74,6 @@
     justify-content: flex-end;
   }
 
-  .select2 {
-    float: right;
-  }
-
   .encoding-selector,
   .soft-wrap-toggle {
     display: inline-block;

app/assets/stylesheets/pages/import.scss

@@ -17,14 +17,6 @@
   max-width: 300px;
 }
 
-.import-namespace-select {
-  > .select2-choice {
-    border-radius: $border-radius-default 0 0 $border-radius-default;
-    position: relative;
-    left: 1px;
-  }
-}
-
 .import-slash-divider {
   background-color: $gray-lightest;
   border: 1px solid $border-color;

app/assets/stylesheets/pages/issuable.scss

@@ -199,10 +199,6 @@
       border: 0;
     }
 
-    .select2-container span {
-      margin-top: 0;
-    }
-
     &.assignee {
       .author-link {
         display: block;

app/assets/stylesheets/pages/issues.scss

@@ -92,6 +92,11 @@ ul.related-merge-requests > li {
   }
 }
 
+.issues-footer {
+  padding-top: $gl-padding;
+  padding-bottom: 37px;
+}
+
 .issues-nav-controls,
 .new-branch-col {
   font-size: 0;

app/assets/stylesheets/pages/projects.scss

@@ -10,12 +10,6 @@
   }
 
   .input-group {
-    .select2-container {
-      display: unset;
-      max-width: unset;
-      flex-grow: 1;
-    }
-
     > div {
       &:last-child {
         padding-right: 0;
@@ -52,7 +46,6 @@
       flex-grow: 1;
     }
 
-    + .select2 a,
     + .btn-default {
       border-radius: 0 $border-radius-base $border-radius-base 0;
     }
@@ -258,10 +251,6 @@
   color: $gray-700;
 }
 
-.transfer-project .select2-container {
-  min-width: 200px;
-}
-
 .deploy-key {
   // Ensure that the fingerprint does not overflow on small screens
   .fingerprint {
@@ -1057,11 +1046,6 @@ pre.light-well {
       margin-bottom: 0;
     }
   }
-
-  .select2-choice {
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
-  }
 }
 
 .project-home-empty {

ee/app/assets/javascripts/approvals/components/approvers_select.vue

 <script>
 import $ from 'jquery';
-import 'select2/select2';
 import { escape, debounce } from 'lodash';
 import Api from 'ee/api';
 import { __ } from '~/locale';
 import { TYPE_USER, TYPE_GROUP } from '../constants';
 import { renderAvatar } from '~/helpers/avatar_helper';
+import { loadCSSFile } from '~/lib/utils/css_utils';
 
 function addType(type) {
   return items => items.map(obj => Object.assign(obj, { type }));
@@ -97,6 +97,11 @@ export default {
     },
   },
   mounted() {
+    import(/* webpackChunkName: 'select2' */ 'select2/select2')
+      .then(() => {
+        // eslint-disable-next-line promise/no-nesting
+        loadCSSFile(gon.select2_css_path)
+          .then(() => {
             $(this.$refs.input)
               .select2({
                 placeholder: __('Search users or groups'),
@@ -105,10 +110,17 @@ export default {
                 closeOnSelect: false,
                 formatResult,
                 formatSelection,
-        query: debounce(({ term, callback }) => this.fetchGroupsAndUsers(term).then(callback), 250),
+                query: debounce(({ term, callback }) => {
+                  // eslint-disable-next-line promise/no-nesting
+                  return this.fetchGroupsAndUsers(term).then(callback);
+                }, 250),
                 id: ({ type, id }) => `${type}${id}`,
               })
               .on('change', e => this.onChange(e));
+          })
+          .catch(() => {});
+      })
+      .catch(() => {});
   },
   beforeDestroy() {
     $(this.$refs.input).select2('destroy');

ee/app/assets/javascripts/ldap_groups_select.js

@@ -3,6 +3,7 @@
 import $ from 'jquery';
 import Api from 'ee/api';
 import { __ } from '~/locale';
+import { loadCSSFile } from '~/lib/utils/css_utils';
 
 export default function initLDAPGroupsSelect() {
   const ldapGroupResult = function(group) {
@@ -12,6 +13,9 @@ export default function initLDAPGroupsSelect() {
     return group.cn;
   };
   import(/* webpackChunkName: 'select2' */ 'select2/select2')
+    .then(() => {
+      // eslint-disable-next-line promise/no-nesting
+      loadCSSFile(gon.select2_css_path)
         .then(() => {
           $('.ajax-ldap-groups-select').each((i, select) => {
             $(select).select2({
@@ -47,6 +51,8 @@ export default function initLDAPGroupsSelect() {
           });
         })
         .catch(() => {});
+    })
+    .catch(() => {});
 
   $('#ldap_group_link_provider').on('change', () => {
     $('.ajax-ldap-groups-select').select2('data', null);

ee/app/assets/javascripts/pages/admin/application_settings/index.js

 import '~/pages/admin/application_settings/index';
-import 'select2/select2';
 import $ from 'jquery';
 import groupsSelect from '~/groups_select';
 import { s__ } from '~/locale';
 import Api from '~/api';
+import { loadCSSFile } from '~/lib/utils/css_utils';
 
 const onLimitCheckboxChange = (checked, $limitByNamespaces, $limitByProjects) => {
   $limitByNamespaces.find('.select2').select2('data', null);
@@ -53,7 +53,12 @@ $container
     ),
   );
 
-$container
+import(/* webpackChunkName: 'select2' */ 'select2/select2')
+  .then(() => {
+    // eslint-disable-next-line promise/no-nesting
+    loadCSSFile(gon.select2_css_path)
+      .then(() => {
+        $container
           .find('.js-elasticsearch-namespaces')
           .select2(
             getDropdownConfig(
@@ -63,7 +68,7 @@ $container
             ),
           );
 
-$container
+        $container
           .find('.js-elasticsearch-projects')
           .select2(
             getDropdownConfig(
@@ -72,3 +77,7 @@ $container
               'name_with_namespace',
             ),
           );
+      })
+      .catch(() => {});
+  })
+  .catch(() => {});

ee/app/assets/javascripts/pages/admin/application_settings/integrations/index.js

-import 'select2/select2';
 import $ from 'jquery';
 import { s__ } from '~/locale';
 import PersistentUserCallout from '~/persistent_user_callout';
+import { loadCSSFile } from '~/lib/utils/css_utils';
 
 const onLimitCheckboxChange = (checked, $limitByNamespaces, $limitByProjects) => {
   $limitByNamespaces.find('.select2').select2('data', null);
@@ -52,7 +52,12 @@ $container
     ),
   );
 
-$container
+import(/* webpackChunkName: 'select2' */ 'select2/select2')
+  .then(() => {
+    // eslint-disable-next-line promise/no-nesting
+    loadCSSFile(gon.select2_css_path)
+      .then(() => {
+        $container
           .find('.js-elasticsearch-namespaces')
           .select2(
             getDropdownConfig(
@@ -61,7 +66,7 @@ $container
             ),
           );
 
-$container
+        $container
           .find('.js-elasticsearch-projects')
           .select2(
             getDropdownConfig(
@@ -69,3 +74,7 @@ $container
               '/-/autocomplete/project_routes.json',
             ),
           );
+      })
+      .catch(() => {});
+  })
+  .catch(() => {});

ee/app/assets/javascripts/pages/admin/emails/show/admin_email_select.js

@@ -2,6 +2,7 @@ import $ from 'jquery';
 import Api from '~/api';
 import { sprintf, __ } from '~/locale';
 import { sanitizeItem } from '~/frequent_items/utils';
+import { loadCSSFile } from '~/lib/utils/css_utils';
 
 const formatResult = selectedItem => {
   if (selectedItem.path_with_namespace) {
@@ -23,13 +24,7 @@ const formatSelection = selectedItem => {
   return __('All groups and projects');
 };
 
-const AdminEmailSelect = () => {
-  $('.ajax-admin-email-select').each((i, select) =>
-    $(select).select2({
-      placeholder: __('Select group or project'),
-      multiple: $(select).hasClass('multiselect'),
-      minimumInputLength: 0,
-      query(query) {
+const QueryAdmin = query => {
   const groupsFetch = Api.groups(query.term, {});
   const projectsFetch = Api.projects(query.term, {
     order_by: 'id',
@@ -44,6 +39,18 @@ const AdminEmailSelect = () => {
       results: data,
     });
   });
+};
+
+const AdminEmailSelect = () => {
+  loadCSSFile(gon.select2_css_path)
+    .then(() => {
+      $('.ajax-admin-email-select').each((i, select) =>
+        $(select).select2({
+          placeholder: __('Select group or project'),
+          multiple: $(select).hasClass('multiselect'),
+          minimumInputLength: 0,
+          query(query) {
+            QueryAdmin(query);
           },
           id(object) {
             if (object.path_with_namespace) {
@@ -65,6 +72,8 @@ const AdminEmailSelect = () => {
           },
         }),
       );
+    })
+    .catch(() => {});
 };
 
 export default () =>

ee/app/assets/javascripts/pages/projects/settings/repository/show/ee_mirror_repos.js

@@ -2,6 +2,7 @@ import $ from 'jquery';
 import { __ } from '~/locale';
 import { deprecatedCreateFlash as Flash } from '~/flash';
 import MirrorRepos from '~/mirrors/mirror_repos';
+import { loadCSSFile } from '~/lib/utils/css_utils';
 
 export default class EEMirrorRepos extends MirrorRepos {
   constructor(...args) {
@@ -77,6 +78,9 @@ export default class EEMirrorRepos extends MirrorRepos {
 
   initSelect2() {
     import(/* webpackChunkName: 'select2' */ 'select2/select2')
+      .then(() => {
+        // eslint-disable-next-line promise/no-nesting
+        loadCSSFile(gon.select2_css_path)
           .then(() => {
             $('.js-mirror-user', this.$form).select2({
               width: 'resolve',
@@ -84,6 +88,8 @@ export default class EEMirrorRepos extends MirrorRepos {
             });
           })
           .catch(() => {});
+      })
+      .catch(() => {});
   }
 
   registerUpdateListeners() {

ee/spec/frontend/approvals/components/approvers_select_spec.js

 import { createLocalVue, shallowMount } from '@vue/test-utils';
 import $ from 'jquery';
+import 'select2/select2';
 import Api from 'ee/api';
 import ApproversSelect from 'ee/approvals/components/approvers_select.vue';
 import { TYPE_USER, TYPE_GROUP } from 'ee/approvals/constants';
 import { TEST_HOST } from 'helpers/test_constants';
+import waitForPromises from 'helpers/wait_for_promises';
 
 const TEST_PROJECT_ID = '17';
 const TEST_GROUP_AVATAR = `${TEST_HOST}/group-avatar.png`;
@@ -51,19 +53,21 @@ describe('Approvals ApproversSelect', () => {
   let wrapper;
   let $input;
 
-  const factory = (options = {}) => {
+  const factory = async (options = {}) => {
     const propsData = {
       projectId: TEST_PROJECT_ID,
       ...options.propsData,
     };
 
-    wrapper = shallowMount(ApproversSelect, {
+    wrapper = await shallowMount(ApproversSelect, {
       ...options,
       propsData,
       localVue,
       attachToDocument: true,
     });
 
+    await waitForPromises();
+
     $input = $(wrapper.vm.$refs.input);
   };
   const search = (term = '') => {
@@ -80,16 +84,16 @@ describe('Approvals ApproversSelect', () => {
     wrapper.destroy();
   });
 
-  it('renders select2 input', () => {
+  it('renders select2 input', async () => {
     expect(select2Container()).toBe(null);
 
-    factory();
+    await factory();
 
     expect(select2Container()).not.toBe(null);
   });
 
-  it('queries and displays groups and users', done => {
-    factory();
+  it('queries and displays groups and users', async done => {
+    await factory();
 
     const expected = TEST_GROUPS.concat(TEST_USERS)
       .map(({ id, ...obj }) => obj)
@@ -110,8 +114,8 @@ describe('Approvals ApproversSelect', () => {
   describe('with search term', () => {
     const term = 'lorem';
 
-    beforeEach(done => {
-      factory();
+    beforeEach(async done => {
+      await factory();
 
       waitForEvent($input, 'select2-loaded')
         .then(jest.runOnlyPendingTimers)
@@ -136,8 +140,8 @@ describe('Approvals ApproversSelect', () => {
     const skipGroupIds = [7, 8];
     const skipUserIds = [9, 10];
 
-    beforeEach(done => {
-      factory({
+    beforeEach(async done => {
+      await factory({
         propsData: {
           skipGroupIds,
           skipUserIds,
@@ -166,8 +170,8 @@ describe('Approvals ApproversSelect', () => {
     });
   });
 
-  it('emits input when data changes', done => {
-    factory();
+  it('emits input when data changes', async done => {
+    await factory();
 
     const expectedFinal = [
       { ...TEST_USERS[0], type: TYPE_USER },

vendor/assets/stylesheets/select2.scss

-/*
-Version: 3.5.2 Timestamp: Sat Nov  1 14:43:36 EDT 2014
-*/
-.select2-container {
-  margin: 0;
-  position: relative;
-  display: inline-block;
-  /* inline-block for ie7 */
-  zoom: 1;
-  *display: inline;
-  vertical-align: middle;
-}
-
-.select2-container,
-.select2-drop,
-.select2-search,
-.select2-search input {
-/*
-  Force border-box so that % widths fit the parent
-  container without overlap because of margin/padding.
-  More Info : http://www.quirksmode.org/css/box.html
-*/
--webkit-box-sizing: border-box; /* webkit */
-   -moz-box-sizing: border-box; /* firefox */
-        box-sizing: border-box; /* css3 */
-}
-
-.select2-container .select2-choice {
-  display: block;
-  height: 26px;
-  padding: 0 0 0 8px;
-  overflow: hidden;
-  position: relative;
-
-  border: 1px solid #aaa;
-  white-space: nowrap;
-  line-height: 26px;
-  color: #444;
-  text-decoration: none;
-
-  border-radius: 4px;
-
-  background-clip: padding-box;
-
-  -webkit-touch-callout: none;
-    -webkit-user-select: none;
-       -moz-user-select: none;
-        -ms-user-select: none;
-            user-select: none;
-
-  background-color: #fff;
-  background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #eee), color-stop(0.5, #fff));
-  background-image: -webkit-linear-gradient(center bottom, #eee 0%, #fff 50%);
-  background-image: -moz-linear-gradient(center bottom, #eee 0%, #fff 50%);
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#ffffff', endColorstr = '#eeeeee', GradientType = 0);
-  background-image: linear-gradient(to top, #eee 0%, #fff 50%);
-}
-
-html[dir="rtl"] .select2-container .select2-choice {
-  padding: 0 8px 0 0;
-}
-
-.select2-container.select2-drop-above .select2-choice {
-  border-bottom-color: #aaa;
-
-  border-radius: 0 0 4px 4px;
-
-  background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #eee), color-stop(0.9, #fff));
-  background-image: -webkit-linear-gradient(center bottom, #eee 0%, #fff 90%);
-  background-image: -moz-linear-gradient(center bottom, #eee 0%, #fff 90%);
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#eeeeee', GradientType=0);
-  background-image: linear-gradient(to bottom, #eee 0%, #fff 90%);
-}
-
-.select2-container.select2-allowclear .select2-choice .select2-chosen {
-  margin-right: 42px;
-}
-
-.select2-container .select2-choice > .select2-chosen {
-  margin-right: 26px;
-  display: block;
-  overflow: hidden;
-
-  white-space: nowrap;
-
-  text-overflow: ellipsis;
-  float: none;
-  width: auto;
-}
-
-html[dir="rtl"] .select2-container .select2-choice > .select2-chosen {
-  margin-left: 26px;
-  margin-right: 0;
-}
-
-.select2-container .select2-choice abbr {
-  display: none;
-  width: 12px;
-  height: 12px;
-  position: absolute;
-  right: 24px;
-  top: 8px;
-
-  font-size: 1px;
-  text-decoration: none;
-
-  border: 0;
-  background: url(image-path('select2.png')) right top no-repeat;
-  cursor: pointer;
-  outline: 0;
-}
-
-.select2-container.select2-allowclear .select2-choice abbr {
-  display: inline-block;
-}
-
-.select2-container .select2-choice abbr:hover {
-  background-position: right -11px;
-  cursor: pointer;
-}
-
-.select2-drop-mask {
-  border: 0;
-  margin: 0;
-  padding: 0;
-  position: fixed;
-  left: 0;
-  top: 0;
-  min-height: 100%;
-  min-width: 100%;
-  height: auto;
-  width: auto;
-  opacity: 0;
-  z-index: 9998;
-  /* styles required for IE to work */
-  background-color: #fff;
-  filter: alpha(opacity=0);
-}
-
-.select2-drop {
-  width: 100%;
-  margin-top: -1px;
-  position: absolute;
-  z-index: 9999;
-  top: 100%;
-
-  background: #fff;
-  color: #000;
-  border: 1px solid #aaa;
-  border-top: 0;
-
-  border-radius: 0 0 4px 4px;
-
-  -webkit-box-shadow: 0 4px 5px rgba(0, 0, 0, .15);
-          box-shadow: 0 4px 5px rgba(0, 0, 0, .15);
-}
-
-.select2-drop.select2-drop-above {
-  margin-top: 1px;
-  border-top: 1px solid #aaa;
-  border-bottom: 0;
-
-  border-radius: 4px 4px 0 0;
-
-  -webkit-box-shadow: 0 -4px 5px rgba(0, 0, 0, .15);
-          box-shadow: 0 -4px 5px rgba(0, 0, 0, .15);
-}
-
-.select2-drop-active {
-  border: 1px solid #5897fb;
-  border-top: none;
-}
-
-.select2-drop.select2-drop-above.select2-drop-active {
-  border-top: 1px solid #5897fb;
-}
-
-.select2-drop-auto-width {
-  border-top: 1px solid #aaa;
-  width: auto;
-}
-
-.select2-drop-auto-width .select2-search {
-  padding-top: 4px;
-}
-
-.select2-container .select2-choice .select2-arrow {
-  display: inline-block;
-  width: 18px;
-  height: 100%;
-  position: absolute;
-  right: 0;
-  top: 0;
-
-  border-left: 1px solid #aaa;
-  border-radius: 0 4px 4px 0;
-
-  background-clip: padding-box;
-
-  background: #ccc;
-  background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #ccc), color-stop(0.6, #eee));
-  background-image: -webkit-linear-gradient(center bottom, #ccc 0%, #eee 60%);
-  background-image: -moz-linear-gradient(center bottom, #ccc 0%, #eee 60%);
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr = '#eeeeee', endColorstr = '#cccccc', GradientType = 0);
-  background-image: linear-gradient(to top, #ccc 0%, #eee 60%);
-}
-
-html[dir="rtl"] .select2-container .select2-choice .select2-arrow {
-  left: 0;
-  right: auto;
-
-  border-left: none;
-  border-right: 1px solid #aaa;
-  border-radius: 4px 0 0 4px;
-}
-
-.select2-container .select2-choice .select2-arrow b {
-  display: block;
-  width: 100%;
-  height: 100%;
-  background: url(image-path('select2.png')) no-repeat 0 1px;
-}
-
-html[dir="rtl"] .select2-container .select2-choice .select2-arrow b {
-  background-position: 2px 1px;
-}
-
-.select2-search {
-  display: inline-block;
-  width: 100%;
-  min-height: 26px;
-  margin: 0;
-  padding-left: 4px;
-  padding-right: 4px;
-
-  position: relative;
-  z-index: 10000;
-
-  white-space: nowrap;
-}
-
-.select2-search input {
-  width: 100%;
-  height: auto !important;
-  min-height: 26px;
-  padding: 4px 20px 4px 5px;
-  margin: 0;
-
-  outline: 0;
-  font-family: sans-serif;
-  font-size: 1em;
-
-  border: 1px solid #aaa;
-  border-radius: 0;
-
-  -webkit-box-shadow: none;
-          box-shadow: none;
-
-  background: #fff url(image-path('select2.png')) no-repeat 100% -22px;
-  background: url(image-path('select2.png')) no-repeat 100% -22px, -webkit-gradient(linear, left bottom, left top, color-stop(0.85, #fff), color-stop(0.99, #eee));
-  background: url(image-path('select2.png')) no-repeat 100% -22px, -webkit-linear-gradient(center bottom, #fff 85%, #eee 99%);
-  background: url(image-path('select2.png')) no-repeat 100% -22px, -moz-linear-gradient(center bottom, #fff 85%, #eee 99%);
-  background: url(image-path('select2.png')) no-repeat 100% -22px, linear-gradient(to bottom, #fff 85%, #eee 99%) 0 0;
-}
-
-html[dir="rtl"] .select2-search input {
-  padding: 4px 5px 4px 20px;
-
-  background: #fff url(image-path('select2.png')) no-repeat -37px -22px;
-  background: url(image-path('select2.png')) no-repeat -37px -22px, -webkit-gradient(linear, left bottom, left top, color-stop(0.85, #fff), color-stop(0.99, #eee));
-  background: url(image-path('select2.png')) no-repeat -37px -22px, -webkit-linear-gradient(center bottom, #fff 85%, #eee 99%);
-  background: url(image-path('select2.png')) no-repeat -37px -22px, -moz-linear-gradient(center bottom, #fff 85%, #eee 99%);
-  background: url(image-path('select2.png')) no-repeat -37px -22px, linear-gradient(to bottom, #fff 85%, #eee 99%) 0 0;
-}
-
-.select2-drop.select2-drop-above .select2-search input {
-  margin-top: 4px;
-}
-
-.select2-search input.select2-active {
-  background: #fff url(image-path('select2-spinner.gif')) no-repeat 100%;
-  background: url(image-path('select2-spinner.gif')) no-repeat 100%, -webkit-gradient(linear, left bottom, left top, color-stop(0.85, #fff), color-stop(0.99, #eee));
-  background: url(image-path('select2-spinner.gif')) no-repeat 100%, -webkit-linear-gradient(center bottom, #fff 85%, #eee 99%);
-  background: url(image-path('select2-spinner.gif')) no-repeat 100%, -moz-linear-gradient(center bottom, #fff 85%, #eee 99%);
-  background: url(image-path('select2-spinner.gif')) no-repeat 100%, linear-gradient(to bottom, #fff 85%, #eee 99%) 0 0;
-}
-
-.select2-container-active .select2-choice,
-.select2-container-active .select2-choices {
-  border: 1px solid #5897fb;
-  outline: none;
-
-  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, .3);
-          box-shadow: 0 0 5px rgba(0, 0, 0, .3);
-}
-
-.select2-dropdown-open .select2-choice {
-  border-bottom-color: transparent;
-  -webkit-box-shadow: 0 1px 0 #fff inset;
-          box-shadow: 0 1px 0 #fff inset;
-
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0;
-
-  background-color: #eee;
-  background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #fff), color-stop(0.5, #eee));
-  background-image: -webkit-linear-gradient(center bottom, #fff 0%, #eee 50%);
-  background-image: -moz-linear-gradient(center bottom, #fff 0%, #eee 50%);
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#ffffff', GradientType=0);
-  background-image: linear-gradient(to top, #fff 0%, #eee 50%);
-}
-
-.select2-dropdown-open.select2-drop-above .select2-choice,
-.select2-dropdown-open.select2-drop-above .select2-choices {
-  border: 1px solid #5897fb;
-  border-top-color: transparent;
-
-  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fff), color-stop(0.5, #eee));
-  background-image: -webkit-linear-gradient(center top, #fff 0%, #eee 50%);
-  background-image: -moz-linear-gradient(center top, #fff 0%, #eee 50%);
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#ffffff', GradientType=0);
-  background-image: linear-gradient(to bottom, #fff 0%, #eee 50%);
-}
-
-.select2-dropdown-open .select2-choice .select2-arrow {
-  background: transparent;
-  border-left: none;
-  filter: none;
-}
-html[dir="rtl"] .select2-dropdown-open .select2-choice .select2-arrow {
-  border-right: none;
-}
-
-.select2-dropdown-open .select2-choice .select2-arrow b {
-  background-position: -18px 1px;
-}
-
-html[dir="rtl"] .select2-dropdown-open .select2-choice .select2-arrow b {
-  background-position: -16px 1px;
-}
-
-.select2-hidden-accessible {
-  border: 0;
-  clip: rect(0 0 0 0);
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  width: 1px;
-}
-
-/* results */
-.select2-results {
-  max-height: 200px;
-  padding: 0 0 0 4px;
-  margin: 4px 4px 4px 0;
-  position: relative;
-  overflow-x: hidden;
-  overflow-y: auto;
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-}
-
-html[dir="rtl"] .select2-results {
-  padding: 0 4px 0 0;
-  margin: 4px 0 4px 4px;
-}
-
-.select2-results ul.select2-result-sub {
-  margin: 0;
-  padding-left: 0;
-}
-
-.select2-results li {
-  list-style: none;
-  display: list-item;
-  background-image: none;
-}
-
-.select2-results li.select2-result-with-children > .select2-result-label {
-  font-weight: bold;
-}
-
-.select2-results .select2-result-label {
-  padding: 3px 7px 4px;
-  margin: 0;
-  cursor: pointer;
-
-  min-height: 1em;
-
-  -webkit-touch-callout: none;
-    -webkit-user-select: none;
-       -moz-user-select: none;
-        -ms-user-select: none;
-            user-select: none;
-}
-
-.select2-results-dept-1 .select2-result-label { padding-left: 20px }
-.select2-results-dept-2 .select2-result-label { padding-left: 40px }
-.select2-results-dept-3 .select2-result-label { padding-left: 60px }
-.select2-results-dept-4 .select2-result-label { padding-left: 80px }
-.select2-results-dept-5 .select2-result-label { padding-left: 100px }
-.select2-results-dept-6 .select2-result-label { padding-left: 110px }
-.select2-results-dept-7 .select2-result-label { padding-left: 120px }
-
-.select2-results .select2-highlighted {
-  background: #3875d7;
-  color: #fff;
-}
-
-.select2-results li em {
-  background: #feffde;
-  font-style: normal;
-}
-
-.select2-results .select2-highlighted em {
-  background: transparent;
-}
-
-.select2-results .select2-highlighted ul {
-  background: #fff;
-  color: #000;
-}
-
-.select2-results .select2-no-results,
-.select2-results .select2-searching,
-.select2-results .select2-ajax-error,
-.select2-results .select2-selection-limit {
-  background: #f4f4f4;
-  display: list-item;
-  padding-left: 5px;
-}
-
-/*
-disabled look for disabled choices in the results dropdown
-*/
-.select2-results .select2-disabled.select2-highlighted {
-  color: #666;
-  background: #f4f4f4;
-  display: list-item;
-  cursor: default;
-}
-.select2-results .select2-disabled {
-background: #f4f4f4;
-display: list-item;
-cursor: default;
-}
-
-.select2-results .select2-selected {
-  display: none;
-}
-
-.select2-more-results.select2-active {
-  background: #f4f4f4 url(image-path('select2-spinner.gif')) no-repeat 100%;
-}
-
-.select2-results .select2-ajax-error {
-  background: rgba(255, 50, 50, .2);
-}
-
-.select2-more-results {
-  background: #f4f4f4;
-  display: list-item;
-}
-
-/* disabled styles */
-
-.select2-container.select2-container-disabled .select2-choice {
-  background-color: #f4f4f4;
-  background-image: none;
-  border: 1px solid #ddd;
-  cursor: default;
-}
-
-.select2-container.select2-container-disabled .select2-choice .select2-arrow {
-  background-color: #f4f4f4;
-  background-image: none;
-  border-left: 0;
-}
-
-.select2-container.select2-container-disabled .select2-choice abbr {
-  display: none;
-}
-
-
-/* multiselect */
-
-.select2-container-multi .select2-choices {
-  height: auto !important;
-  height: 1%;
-  margin: 0;
-  padding: 0 5px 0 0;
-  position: relative;
-
-  border: 1px solid #aaa;
-  cursor: text;
-  overflow: hidden;
-
-  background-color: #fff;
-  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(1%, #eee), color-stop(15%, #fff));
-  background-image: -webkit-linear-gradient(top, #eee 1%, #fff 15%);
-  background-image: -moz-linear-gradient(top, #eee 1%, #fff 15%);
-  background-image: linear-gradient(to bottom, #eee 1%, #fff 15%);
-}
-
-html[dir="rtl"] .select2-container-multi .select2-choices {
-  padding: 0 0 0 5px;
-}
-
-.select2-locked {
-padding: 3px 5px 3px 5px !important;
-}
-
-.select2-container-multi .select2-choices {
-  min-height: 26px;
-}
-
-.select2-container-multi.select2-container-active .select2-choices {
-  border: 1px solid #5897fb;
-  outline: none;
-
-  -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, .3);
-          box-shadow: 0 0 5px rgba(0, 0, 0, .3);
-}
-.select2-container-multi .select2-choices li {
-  float: left;
-  list-style: none;
-}
-html[dir="rtl"] .select2-container-multi .select2-choices li
-{
-  float: right;
-}
-.select2-container-multi .select2-choices .select2-search-field {
-  margin: 0;
-  padding: 0;
-  white-space: nowrap;
-}
-
-.select2-container-multi .select2-choices .select2-search-field input {
-  padding: 5px;
-  margin: 1px 0;
-
-  font-family: sans-serif;
-  font-size: 100%;
-  color: #666;
-  outline: 0;
-  border: 0;
-  -webkit-box-shadow: none;
-          box-shadow: none;
-  background: transparent !important;
-}
-
-.select2-container-multi .select2-choices .select2-search-field input.select2-active {
-  background: #fff url(image-path('select2-spinner.gif')) no-repeat 100% !important;
-}
-
-.select2-default {
-  color: #999 !important;
-}
-
-.select2-container-multi .select2-choices .select2-search-choice {
-  padding: 3px 5px 3px 18px;
-  margin: 3px 0 3px 5px;
-  position: relative;
-
-  line-height: 13px;
-  color: #333;
-  cursor: default;
-  border: 1px solid #aaaaaa;
-
-  border-radius: 3px;
-
-  -webkit-box-shadow: 0 0 2px #fff inset, 0 1px 0 rgba(0, 0, 0, 0.05);
-          box-shadow: 0 0 2px #fff inset, 0 1px 0 rgba(0, 0, 0, 0.05);
-
-  background-clip: padding-box;
-
-  -webkit-touch-callout: none;
-    -webkit-user-select: none;
-       -moz-user-select: none;
-        -ms-user-select: none;
-            user-select: none;
-
-  background-color: #e4e4e4;
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eeeeee', endColorstr='#f4f4f4', GradientType=0);
-  background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(20%, #f4f4f4), color-stop(50%, #f0f0f0), color-stop(52%, #e8e8e8), color-stop(100%, #eee));
-  background-image: -webkit-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eee 100%);
-  background-image: -moz-linear-gradient(top, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eee 100%);
-  background-image: linear-gradient(to bottom, #f4f4f4 20%, #f0f0f0 50%, #e8e8e8 52%, #eee 100%);
-}
-html[dir="rtl"] .select2-container-multi .select2-choices .select2-search-choice
-{
-  margin: 3px 5px 3px 0;
-  padding: 3px 18px 3px 5px;
-}
-.select2-container-multi .select2-choices .select2-search-choice .select2-chosen {
-  cursor: default;
-}
-.select2-container-multi .select2-choices .select2-search-choice-focus {
-  background: #d4d4d4;
-}
-
-.select2-search-choice-close {
-  display: block;
-  width: 12px;
-  height: 13px;
-  position: absolute;
-  right: 3px;
-  top: 4px;
-
-  font-size: 1px;
-  outline: none;
-  background: url(image-path('select2.png')) right top no-repeat;
-}
-html[dir="rtl"] .select2-search-choice-close {
-  right: auto;
-  left: 3px;
-}
-
-.select2-container-multi .select2-search-choice-close {
-  left: 3px;
-}
-
-html[dir="rtl"] .select2-container-multi .select2-search-choice-close {
-  left: auto;
-  right: 2px;
-}
-
-.select2-container-multi .select2-choices .select2-search-choice .select2-search-choice-close:hover {
-background-position: right -11px;
-}
-.select2-container-multi .select2-choices .select2-search-choice-focus .select2-search-choice-close {
-  background-position: right -11px;
-}
-
-/* disabled styles */
-.select2-container-multi.select2-container-disabled .select2-choices {
-  background-color: #f4f4f4;
-  background-image: none;
-  border: 1px solid #ddd;
-  cursor: default;
-}
-
-.select2-container-multi.select2-container-disabled .select2-choices .select2-search-choice {
-  padding: 3px 5px 3px 5px;
-  border: 1px solid #ddd;
-  background-image: none;
-  background-color: #f4f4f4;
-}
-
-.select2-container-multi.select2-container-disabled .select2-choices .select2-search-choice .select2-search-choice-close {    display: none;
-  background: none;
-}
-/* end multiselect */
-
-
-.select2-result-selectable .select2-match,
-.select2-result-unselectable .select2-match {
-  text-decoration: underline;
-}
-
-.select2-offscreen, .select2-offscreen:focus {
-  clip: rect(0 0 0 0) !important;
-  width: 1px !important;
-  height: 1px !important;
-  border: 0 !important;
-  margin: 0 !important;
-  padding: 0 !important;
-  overflow: hidden !important;
-  position: absolute !important;
-  outline: 0 !important;
-  left: 0px !important;
-  top: 0px !important;
-}
-
-.select2-display-none {
-  display: none;
-}
-
-.select2-measure-scrollbar {
-  position: absolute;
-  top: -10000px;
-  left: -10000px;
-  width: 100px;
-  height: 100px;
-  overflow: scroll;
-}
-
-/* Retina-ize icons */
-
-@media only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-resolution: 2dppx)  {
-  .select2-search input,
-  .select2-search-choice-close,
-  .select2-container .select2-choice abbr,
-  .select2-container .select2-choice .select2-arrow b {
-      background-image: url(image-path('select2x2.png')) !important;
-      background-repeat: no-repeat !important;
-      background-size: 60px 40px !important;
-  }
-
-  .select2-search input {
-      background-position: 100% -21px !important;
-  }
-}