Finish the core switch to BEM

This switches all of the dropdown components to use BEM.

dist/css/select2.css

@@ -38,7 +38,7 @@
     font-size: 100%;
     margin-top: 5px; }
 
-.select2-container .dropdown {
+.select2-dropdown {
   background-color: white;
   border: 1px solid #aaa;
   border-radius: 4px;
@@ -48,19 +48,23 @@
   left: -100000px;
   width: 100%;
   z-index: 100; }
-  .select2-container .dropdown .results {
-    display: block; }
-    .select2-container .dropdown .results .options {
-      list-style: none;
-      margin: 0;
-      padding: 0; }
-      .select2-container .dropdown .results .options .option {
-        padding: 6px;
-        user-select: none;
-        -webkit-user-select: none; }
-        .select2-container .dropdown .results .options .option[aria-selected] {
-          cursor: pointer; }
-.select2-container.select2-container--open .dropdown {
+
+.select2-results {
+  display: block; }
+
+.select2-results__options {
+  list-style: none;
+  margin: 0;
+  padding: 0; }
+
+.select2-results__option {
+  padding: 6px;
+  user-select: none;
+  -webkit-user-select: none; }
+  .select2-results__option[aria-selected] {
+    cursor: pointer; }
+
+.select2-container--open .select2-dropdown {
   border-top: none;
   border-top-left-radius: 0;
   border-top-right-radius: 0;
@@ -104,14 +108,14 @@
     margin-right: 5px;
     margin-top: 5px;
     padding: 0 5px; }
-    .select2-container--default .select2-selection--multiple .select2-selection__choice .select2-selection__choice__remove {
-      color: #999;
-      cursor: pointer;
-      display: inline-block;
-      font-weight: bold;
-      margin-right: 2px; }
-      .select2-container--default .select2-selection--multiple .select2-selection__choice .select2-selection__choice__remove:hover {
-        color: #333; }
+  .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
+    color: #999;
+    cursor: pointer;
+    display: inline-block;
+    font-weight: bold;
+    margin-right: 2px; }
+    .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
+      color: #333; }
 .select2-container--default.select2-container--open .select2-selection--single, .select2-container--default.select2-container--open .select2-selection--multiple {
   border-bottom-left-radius: 0;
   border-bottom-right-radius: 0; }
@@ -120,22 +124,22 @@
 .select2-container--default .select2-search--inline .select2-search__field {
   border: none;
   outline: 0; }
-.select2-container--default .dropdown .results > .options {
+.select2-container--default .select2-results > .select2-results__options {
   max-height: 200px;
   overflow-y: auto; }
-.select2-container--default .dropdown .results .options .option[role=group] {
+.select2-container--default .select2-results__option[role=group] {
   padding: 0; }
-  .select2-container--default .dropdown .results .options .option[role=group] .group-label {
-    cursor: default;
-    display: block;
-    padding: 6px; }
-.select2-container--default .dropdown .results .options .option[aria-disabled=true] {
+.select2-container--default .select2-results__option[aria-disabled=true] {
   color: #999; }
-.select2-container--default .dropdown .results .options .option[aria-selected=true] {
+.select2-container--default .select2-results__option[aria-selected=true] {
   background-color: #ddd; }
-.select2-container--default .dropdown .results .options .option[aria-selected].highlighted {
+.select2-container--default .select2-results__option--highlighted[aria-selected] {
   background-color: #5897fb;
   color: white; }
+.select2-container--default .select2-results__group {
+  cursor: default;
+  display: block;
+  padding: 6px; }
 
 .select2-container.select2-theme-classic .selection .single-select {
   background-color: #f6f6f6;

dist/js/select2.amd.full.js

@@ -171,7 +171,7 @@ define('select2/results',[
 
   Results.prototype.render = function () {
     var $results = $(
-      '<ul class="options" role="tree"></ul>'
+      '<ul class="select2-results__options" role="tree"></ul>'
     );
 
     if (this.options.get('multiple')) {
@@ -191,7 +191,9 @@ define('select2/results',[
     this.clear();
     this.hideLoading();
 
-    var $message = $('<li role="treeitem" class="option"></li>');
+    var $message = $(
+      '<li role="treeitem" class="select2-results__option"></li>'
+    );
 
     var message = this.options.get('translations').get(params.message);
 
@@ -240,7 +242,8 @@ define('select2/results',[
         return s.id.toString();
       });
 
-      var $options = self.$results.find('.option[aria-selected]');
+      var $options = self.$results
+        .find('.select2-results__option[aria-selected]');
 
       $options.each(function () {
         var $option = $(this);
@@ -290,7 +293,7 @@ define('select2/results',[
 
   Results.prototype.option = function (data) {
     var option = document.createElement('li');
-    option.className = 'option';
+    option.className = 'select2-results__option';
 
     var attrs = {
       'role': 'treeitem',
@@ -326,7 +329,7 @@ define('select2/results',[
       var $option = $(option);
 
       var label = document.createElement('strong');
-      label.className = 'group-label';
+      label.className = 'select2-results__group';
 
       var $label = $(label);
       this.template(data, label);
@@ -341,7 +344,9 @@ define('select2/results',[
         $children.push($child);
       }
 
-      var $childrenContainer = $('<ul class="options nested-options"></ul>');
+      var $childrenContainer = $('<ul></ul>', {
+        'class': 'select2-results__options select2-results__options--nested'
+      });
 
       $childrenContainer.append($children);
 
@@ -417,7 +422,7 @@ define('select2/results',[
     });
 
     container.on('results:select', function () {
-      var $highlighted = self.$results.find('.highlighted');
+      var $highlighted = self.getHighlightedResults();
 
       if ($highlighted.length === 0) {
         return;
@@ -437,7 +442,7 @@ define('select2/results',[
     });
 
     container.on('results:previous', function () {
-      var $highlighted = self.$results.find('.highlighted');
+      var $highlighted = self.getHighlightedResults();
 
       var $options = self.$results.find('[aria-selected]');
 
@@ -471,7 +476,7 @@ define('select2/results',[
     });
 
     container.on('results:next', function () {
-      var $highlighted = self.$results.find('.highlighted');
+      var $highlighted = self.getHighlightedResults();
 
       var $options = self.$results.find('[aria-selected]');
 
@@ -501,7 +506,7 @@ define('select2/results',[
     });
 
     container.on('results:focus', function (params) {
-      params.element.addClass('highlighted');
+      params.element.addClass('select2-results__option--highlighted');
     });
 
     container.on('results:message', function (params) {
@@ -512,7 +517,8 @@ define('select2/results',[
       self.displayMessage(params);
     });
 
-    this.$results.on('mouseup', '.option[aria-selected]', function (evt) {
+    this.$results.on('mouseup', '.select2-results__option[aria-selected]',
+      function (evt) {
       var $this = $(this);
 
       var data = $this.data('data');
@@ -532,10 +538,12 @@ define('select2/results',[
       });
     });
 
-    this.$results.on('mouseenter', '.option[aria-selected]', function (evt) {
+    this.$results.on('mouseenter', '.select2-results__option[aria-selected]',
+      function (evt) {
       var data = $(this).data('data');
 
-      self.$results.find('.option.highlighted').removeClass('highlighted');
+      self.getHighlightedResults()
+          .removeClass('select2-results__option--highlighted');
 
       self.trigger('results:focus', {
         data: data,
@@ -544,12 +552,19 @@ define('select2/results',[
     });
   };
 
+  Results.prototype.getHighlightedResults = function () {
+    var $highlighted = this.$results
+    .find('.select2-results__option--highlighted');
+
+    return $highlighted;
+  };
+
   Results.prototype.destroy = function () {
     this.$results.remove();
   };
 
   Results.prototype.ensureHighlightVisible = function () {
-    var $highlighted = this.$results.find('.highlighted');
+    var $highlighted = this.getHighlightedResults();
 
     if ($highlighted.length === 0) {
       return;
@@ -2498,8 +2513,8 @@ define('select2/dropdown',[
 
   Dropdown.prototype.render = function () {
     var $dropdown = $(
-      '<span class="dropdown">' +
-        '<span class="results"></span>' +
+      '<span class="select2-dropdown">' +
+        '<span class="select2-results"></span>' +
       '</span>'
     );
 
@@ -2529,8 +2544,9 @@ define('select2/dropdown/search',[
     var $rendered = decorated.call(this);
 
     var $search = $(
-      '<span class="select2-search">' +
-        '<input type="search" tabindex="-1" role="textbox" />' +
+      '<span class="select2-search select2-search--dropdown">' +
+        '<input class="select2-search__field" type="search" tabindex="-1"' +
+        ' role="textbox" />' +
       '</span>'
     );
 
@@ -3149,7 +3165,7 @@ define('select2/core',[
   };
 
   Select2.prototype._placeResults = function ($results) {
-    var $resultsContainer = this.$dropdown.find('.results');
+    var $resultsContainer = this.$dropdown.find('.select2-results');
     $resultsContainer.append($results);
   };
 

dist/js/select2.amd.js

@@ -171,7 +171,7 @@ define('select2/results',[
 
   Results.prototype.render = function () {
     var $results = $(
-      '<ul class="options" role="tree"></ul>'
+      '<ul class="select2-results__options" role="tree"></ul>'
     );
 
     if (this.options.get('multiple')) {
@@ -191,7 +191,9 @@ define('select2/results',[
     this.clear();
     this.hideLoading();
 
-    var $message = $('<li role="treeitem" class="option"></li>');
+    var $message = $(
+      '<li role="treeitem" class="select2-results__option"></li>'
+    );
 
     var message = this.options.get('translations').get(params.message);
 
@@ -240,7 +242,8 @@ define('select2/results',[
         return s.id.toString();
       });
 
-      var $options = self.$results.find('.option[aria-selected]');
+      var $options = self.$results
+        .find('.select2-results__option[aria-selected]');
 
       $options.each(function () {
         var $option = $(this);
@@ -290,7 +293,7 @@ define('select2/results',[
 
   Results.prototype.option = function (data) {
     var option = document.createElement('li');
-    option.className = 'option';
+    option.className = 'select2-results__option';
 
     var attrs = {
       'role': 'treeitem',
@@ -326,7 +329,7 @@ define('select2/results',[
       var $option = $(option);
 
       var label = document.createElement('strong');
-      label.className = 'group-label';
+      label.className = 'select2-results__group';
 
       var $label = $(label);
       this.template(data, label);
@@ -341,7 +344,9 @@ define('select2/results',[
         $children.push($child);
       }
 
-      var $childrenContainer = $('<ul class="options nested-options"></ul>');
+      var $childrenContainer = $('<ul></ul>', {
+        'class': 'select2-results__options select2-results__options--nested'
+      });
 
       $childrenContainer.append($children);
 
@@ -417,7 +422,7 @@ define('select2/results',[
     });
 
     container.on('results:select', function () {
-      var $highlighted = self.$results.find('.highlighted');
+      var $highlighted = self.getHighlightedResults();
 
       if ($highlighted.length === 0) {
         return;
@@ -437,7 +442,7 @@ define('select2/results',[
     });
 
     container.on('results:previous', function () {
-      var $highlighted = self.$results.find('.highlighted');
+      var $highlighted = self.getHighlightedResults();
 
       var $options = self.$results.find('[aria-selected]');
 
@@ -471,7 +476,7 @@ define('select2/results',[
     });
 
     container.on('results:next', function () {
-      var $highlighted = self.$results.find('.highlighted');
+      var $highlighted = self.getHighlightedResults();
 
       var $options = self.$results.find('[aria-selected]');
 
@@ -501,7 +506,7 @@ define('select2/results',[
     });
 
     container.on('results:focus', function (params) {
-      params.element.addClass('highlighted');
+      params.element.addClass('select2-results__option--highlighted');
     });
 
     container.on('results:message', function (params) {
@@ -512,7 +517,8 @@ define('select2/results',[
       self.displayMessage(params);
     });
 
-    this.$results.on('mouseup', '.option[aria-selected]', function (evt) {
+    this.$results.on('mouseup', '.select2-results__option[aria-selected]',
+      function (evt) {
       var $this = $(this);
 
       var data = $this.data('data');
@@ -532,10 +538,12 @@ define('select2/results',[
       });
     });
 
-    this.$results.on('mouseenter', '.option[aria-selected]', function (evt) {
+    this.$results.on('mouseenter', '.select2-results__option[aria-selected]',
+      function (evt) {
       var data = $(this).data('data');
 
-      self.$results.find('.option.highlighted').removeClass('highlighted');
+      self.getHighlightedResults()
+          .removeClass('select2-results__option--highlighted');
 
       self.trigger('results:focus', {
         data: data,
@@ -544,12 +552,19 @@ define('select2/results',[
     });
   };
 
+  Results.prototype.getHighlightedResults = function () {
+    var $highlighted = this.$results
+    .find('.select2-results__option--highlighted');
+
+    return $highlighted;
+  };
+
   Results.prototype.destroy = function () {
     this.$results.remove();
   };
 
   Results.prototype.ensureHighlightVisible = function () {
-    var $highlighted = this.$results.find('.highlighted');
+    var $highlighted = this.getHighlightedResults();
 
     if ($highlighted.length === 0) {
       return;
@@ -2498,8 +2513,8 @@ define('select2/dropdown',[
 
   Dropdown.prototype.render = function () {
     var $dropdown = $(
-      '<span class="dropdown">' +
-        '<span class="results"></span>' +
+      '<span class="select2-dropdown">' +
+        '<span class="select2-results"></span>' +
       '</span>'
     );
 
@@ -2529,8 +2544,9 @@ define('select2/dropdown/search',[
     var $rendered = decorated.call(this);
 
     var $search = $(
-      '<span class="select2-search">' +
-        '<input type="search" tabindex="-1" role="textbox" />' +
+      '<span class="select2-search select2-search--dropdown">' +
+        '<input class="select2-search__field" type="search" tabindex="-1"' +
+        ' role="textbox" />' +
       '</span>'
     );
 
@@ -3149,7 +3165,7 @@ define('select2/core',[
   };
 
   Select2.prototype._placeResults = function ($results) {
-    var $resultsContainer = this.$dropdown.find('.results');
+    var $resultsContainer = this.$dropdown.find('.select2-results');
     $resultsContainer.append($results);
   };
 

dist/js/select2.full.js

@@ -9706,7 +9706,7 @@ define('select2/results',[
 
   Results.prototype.render = function () {
     var $results = $(
-      '<ul class="options" role="tree"></ul>'
+      '<ul class="select2-results__options" role="tree"></ul>'
     );
 
     if (this.options.get('multiple')) {
@@ -9726,7 +9726,9 @@ define('select2/results',[
     this.clear();
     this.hideLoading();
 
-    var $message = $('<li role="treeitem" class="option"></li>');
+    var $message = $(
+      '<li role="treeitem" class="select2-results__option"></li>'
+    );
 
     var message = this.options.get('translations').get(params.message);
 
@@ -9775,7 +9777,8 @@ define('select2/results',[
         return s.id.toString();
       });
 
-      var $options = self.$results.find('.option[aria-selected]');
+      var $options = self.$results
+        .find('.select2-results__option[aria-selected]');
 
       $options.each(function () {
         var $option = $(this);
@@ -9825,7 +9828,7 @@ define('select2/results',[
 
   Results.prototype.option = function (data) {
     var option = document.createElement('li');
-    option.className = 'option';
+    option.className = 'select2-results__option';
 
     var attrs = {
       'role': 'treeitem',
@@ -9861,7 +9864,7 @@ define('select2/results',[
       var $option = $(option);
 
       var label = document.createElement('strong');
-      label.className = 'group-label';
+      label.className = 'select2-results__group';
 
       var $label = $(label);
       this.template(data, label);
@@ -9876,7 +9879,9 @@ define('select2/results',[
         $children.push($child);
       }
 
-      var $childrenContainer = $('<ul class="options nested-options"></ul>');
+      var $childrenContainer = $('<ul></ul>', {
+        'class': 'select2-results__options select2-results__options--nested'
+      });
 
       $childrenContainer.append($children);
 
@@ -9952,7 +9957,7 @@ define('select2/results',[
     });
 
     container.on('results:select', function () {
-      var $highlighted = self.$results.find('.highlighted');
+      var $highlighted = self.getHighlightedResults();
 
       if ($highlighted.length === 0) {
         return;
@@ -9972,7 +9977,7 @@ define('select2/results',[
     });
 
     container.on('results:previous', function () {
-      var $highlighted = self.$results.find('.highlighted');
+      var $highlighted = self.getHighlightedResults();
 
       var $options = self.$results.find('[aria-selected]');
 
@@ -10006,7 +10011,7 @@ define('select2/results',[
     });
 
     container.on('results:next', function () {
-      var $highlighted = self.$results.find('.highlighted');
+      var $highlighted = self.getHighlightedResults();
 
       var $options = self.$results.find('[aria-selected]');
 
@@ -10036,7 +10041,7 @@ define('select2/results',[
     });
 
     container.on('results:focus', function (params) {
-      params.element.addClass('highlighted');
+      params.element.addClass('select2-results__option--highlighted');
     });
 
     container.on('results:message', function (params) {
@@ -10047,7 +10052,8 @@ define('select2/results',[
       self.displayMessage(params);
     });
 
-    this.$results.on('mouseup', '.option[aria-selected]', function (evt) {
+    this.$results.on('mouseup', '.select2-results__option[aria-selected]',
+      function (evt) {
       var $this = $(this);
 
       var data = $this.data('data');
@@ -10067,10 +10073,12 @@ define('select2/results',[
       });
     });
 
-    this.$results.on('mouseenter', '.option[aria-selected]', function (evt) {
+    this.$results.on('mouseenter', '.select2-results__option[aria-selected]',
+      function (evt) {
       var data = $(this).data('data');
 
-      self.$results.find('.option.highlighted').removeClass('highlighted');
+      self.getHighlightedResults()
+          .removeClass('select2-results__option--highlighted');
 
       self.trigger('results:focus', {
         data: data,
@@ -10079,12 +10087,19 @@ define('select2/results',[
     });
   };
 
+  Results.prototype.getHighlightedResults = function () {
+    var $highlighted = this.$results
+    .find('.select2-results__option--highlighted');
+
+    return $highlighted;
+  };
+
   Results.prototype.destroy = function () {
     this.$results.remove();
   };
 
   Results.prototype.ensureHighlightVisible = function () {
-    var $highlighted = this.$results.find('.highlighted');
+    var $highlighted = this.getHighlightedResults();
 
     if ($highlighted.length === 0) {
       return;
@@ -12033,8 +12048,8 @@ define('select2/dropdown',[
 
   Dropdown.prototype.render = function () {
     var $dropdown = $(
-      '<span class="dropdown">' +
-        '<span class="results"></span>' +
+      '<span class="select2-dropdown">' +
+        '<span class="select2-results"></span>' +
       '</span>'
     );
 
@@ -12064,8 +12079,9 @@ define('select2/dropdown/search',[
     var $rendered = decorated.call(this);
 
     var $search = $(
-      '<span class="select2-search">' +
-        '<input type="search" tabindex="-1" role="textbox" />' +
+      '<span class="select2-search select2-search--dropdown">' +
+        '<input class="select2-search__field" type="search" tabindex="-1"' +
+        ' role="textbox" />' +
       '</span>'
     );
 
@@ -12684,7 +12700,7 @@ define('select2/core',[
   };
 
   Select2.prototype._placeResults = function ($results) {
-    var $resultsContainer = this.$dropdown.find('.results');
+    var $resultsContainer = this.$dropdown.find('.select2-results');
     $resultsContainer.append($results);
   };
 

dist/js/select2.js

@@ -599,7 +599,7 @@ define('select2/results',[
 
   Results.prototype.render = function () {
     var $results = $(
-      '<ul class="options" role="tree"></ul>'
+      '<ul class="select2-results__options" role="tree"></ul>'
     );
 
     if (this.options.get('multiple')) {
@@ -619,7 +619,9 @@ define('select2/results',[
     this.clear();
     this.hideLoading();
 
-    var $message = $('<li role="treeitem" class="option"></li>');
+    var $message = $(
+      '<li role="treeitem" class="select2-results__option"></li>'
+    );
 
     var message = this.options.get('translations').get(params.message);
 
@@ -668,7 +670,8 @@ define('select2/results',[
         return s.id.toString();
       });
 
-      var $options = self.$results.find('.option[aria-selected]');
+      var $options = self.$results
+        .find('.select2-results__option[aria-selected]');
 
       $options.each(function () {
         var $option = $(this);
@@ -718,7 +721,7 @@ define('select2/results',[
 
   Results.prototype.option = function (data) {
     var option = document.createElement('li');
-    option.className = 'option';
+    option.className = 'select2-results__option';
 
     var attrs = {
       'role': 'treeitem',
@@ -754,7 +757,7 @@ define('select2/results',[
       var $option = $(option);
 
       var label = document.createElement('strong');
-      label.className = 'group-label';
+      label.className = 'select2-results__group';
 
       var $label = $(label);
       this.template(data, label);
@@ -769,7 +772,9 @@ define('select2/results',[
         $children.push($child);
       }
 
-      var $childrenContainer = $('<ul class="options nested-options"></ul>');
+      var $childrenContainer = $('<ul></ul>', {
+        'class': 'select2-results__options select2-results__options--nested'
+      });
 
       $childrenContainer.append($children);
 
@@ -845,7 +850,7 @@ define('select2/results',[
     });
 
     container.on('results:select', function () {
-      var $highlighted = self.$results.find('.highlighted');
+      var $highlighted = self.getHighlightedResults();
 
       if ($highlighted.length === 0) {
         return;
@@ -865,7 +870,7 @@ define('select2/results',[
     });
 
     container.on('results:previous', function () {
-      var $highlighted = self.$results.find('.highlighted');
+      var $highlighted = self.getHighlightedResults();
 
       var $options = self.$results.find('[aria-selected]');
 
@@ -899,7 +904,7 @@ define('select2/results',[
     });
 
     container.on('results:next', function () {
-      var $highlighted = self.$results.find('.highlighted');
+      var $highlighted = self.getHighlightedResults();
 
       var $options = self.$results.find('[aria-selected]');
 
@@ -929,7 +934,7 @@ define('select2/results',[
     });
 
     container.on('results:focus', function (params) {
-      params.element.addClass('highlighted');
+      params.element.addClass('select2-results__option--highlighted');
     });
 
     container.on('results:message', function (params) {
@@ -940,7 +945,8 @@ define('select2/results',[
       self.displayMessage(params);
     });
 
-    this.$results.on('mouseup', '.option[aria-selected]', function (evt) {
+    this.$results.on('mouseup', '.select2-results__option[aria-selected]',
+      function (evt) {
       var $this = $(this);
 
       var data = $this.data('data');
@@ -960,10 +966,12 @@ define('select2/results',[
       });
     });
 
-    this.$results.on('mouseenter', '.option[aria-selected]', function (evt) {
+    this.$results.on('mouseenter', '.select2-results__option[aria-selected]',
+      function (evt) {
       var data = $(this).data('data');
 
-      self.$results.find('.option.highlighted').removeClass('highlighted');
+      self.getHighlightedResults()
+          .removeClass('select2-results__option--highlighted');
 
       self.trigger('results:focus', {
         data: data,
@@ -972,12 +980,19 @@ define('select2/results',[
     });
   };
 
+  Results.prototype.getHighlightedResults = function () {
+    var $highlighted = this.$results
+    .find('.select2-results__option--highlighted');
+
+    return $highlighted;
+  };
+
   Results.prototype.destroy = function () {
     this.$results.remove();
   };
 
   Results.prototype.ensureHighlightVisible = function () {
-    var $highlighted = this.$results.find('.highlighted');
+    var $highlighted = this.getHighlightedResults();
 
     if ($highlighted.length === 0) {
       return;
@@ -2926,8 +2941,8 @@ define('select2/dropdown',[
 
   Dropdown.prototype.render = function () {
     var $dropdown = $(
-      '<span class="dropdown">' +
-        '<span class="results"></span>' +
+      '<span class="select2-dropdown">' +
+        '<span class="select2-results"></span>' +
       '</span>'
     );
 
@@ -2957,8 +2972,9 @@ define('select2/dropdown/search',[
     var $rendered = decorated.call(this);
 
     var $search = $(
-      '<span class="select2-search">' +
-        '<input type="search" tabindex="-1" role="textbox" />' +
+      '<span class="select2-search select2-search--dropdown">' +
+        '<input class="select2-search__field" type="search" tabindex="-1"' +
+        ' role="textbox" />' +
       '</span>'
     );
 
@@ -3577,7 +3593,7 @@ define('select2/core',[
   };
 
   Select2.prototype._placeResults = function ($results) {
-    var $resultsContainer = this.$dropdown.find('.results');
+    var $resultsContainer = this.$dropdown.find('.select2-results');
     $resultsContainer.append($results);
   };
 

src/js/select2/core.js

@@ -121,7 +121,7 @@ define([
   };
 
   Select2.prototype._placeResults = function ($results) {
-    var $resultsContainer = this.$dropdown.find('.results');
+    var $resultsContainer = this.$dropdown.find('.select2-results');
     $resultsContainer.append($results);
   };
 

src/js/select2/dropdown.js

@@ -9,8 +9,8 @@ define([
 
   Dropdown.prototype.render = function () {
     var $dropdown = $(
-      '<span class="dropdown">' +
-        '<span class="results"></span>' +
+      '<span class="select2-dropdown">' +
+        '<span class="select2-results"></span>' +
       '</span>'
     );
 

src/js/select2/dropdown/search.js

@@ -7,8 +7,9 @@ define([
     var $rendered = decorated.call(this);
 
     var $search = $(
-      '<span class="select2-search">' +
-        '<input type="search" tabindex="-1" role="textbox" />' +
+      '<span class="select2-search select2-search--dropdown">' +
+        '<input class="select2-search__field" type="search" tabindex="-1"' +
+        ' role="textbox" />' +
       '</span>'
     );
 

src/js/select2/results.js

@@ -13,7 +13,7 @@ define([
 
   Results.prototype.render = function () {
     var $results = $(
-      '<ul class="options" role="tree"></ul>'
+      '<ul class="select2-results__options" role="tree"></ul>'
     );
 
     if (this.options.get('multiple')) {
@@ -33,7 +33,9 @@ define([
     this.clear();
     this.hideLoading();
 
-    var $message = $('<li role="treeitem" class="option"></li>');
+    var $message = $(
+      '<li role="treeitem" class="select2-results__option"></li>'
+    );
 
     var message = this.options.get('translations').get(params.message);
 
@@ -82,7 +84,8 @@ define([
         return s.id.toString();
       });
 
-      var $options = self.$results.find('.option[aria-selected]');
+      var $options = self.$results
+        .find('.select2-results__option[aria-selected]');
 
       $options.each(function () {
         var $option = $(this);
@@ -132,7 +135,7 @@ define([
 
   Results.prototype.option = function (data) {
     var option = document.createElement('li');
-    option.className = 'option';
+    option.className = 'select2-results__option';
 
     var attrs = {
       'role': 'treeitem',
@@ -168,7 +171,7 @@ define([
       var $option = $(option);
 
       var label = document.createElement('strong');
-      label.className = 'group-label';
+      label.className = 'select2-results__group';
 
       var $label = $(label);
       this.template(data, label);
@@ -183,7 +186,9 @@ define([
         $children.push($child);
       }
 
-      var $childrenContainer = $('<ul class="options nested-options"></ul>');
+      var $childrenContainer = $('<ul></ul>', {
+        'class': 'select2-results__options select2-results__options--nested'
+      });
 
       $childrenContainer.append($children);
 
@@ -259,7 +264,7 @@ define([
     });
 
     container.on('results:select', function () {
-      var $highlighted = self.$results.find('.highlighted');
+      var $highlighted = self.getHighlightedResults();
 
       if ($highlighted.length === 0) {
         return;
@@ -279,7 +284,7 @@ define([
     });
 
     container.on('results:previous', function () {
-      var $highlighted = self.$results.find('.highlighted');
+      var $highlighted = self.getHighlightedResults();
 
       var $options = self.$results.find('[aria-selected]');
 
@@ -313,7 +318,7 @@ define([
     });
 
     container.on('results:next', function () {
-      var $highlighted = self.$results.find('.highlighted');
+      var $highlighted = self.getHighlightedResults();
 
       var $options = self.$results.find('[aria-selected]');
 
@@ -343,7 +348,7 @@ define([
     });
 
     container.on('results:focus', function (params) {
-      params.element.addClass('highlighted');
+      params.element.addClass('select2-results__option--highlighted');
     });
 
     container.on('results:message', function (params) {
@@ -354,7 +359,8 @@ define([
       self.displayMessage(params);
     });
 
-    this.$results.on('mouseup', '.option[aria-selected]', function (evt) {
+    this.$results.on('mouseup', '.select2-results__option[aria-selected]',
+      function (evt) {
       var $this = $(this);
 
       var data = $this.data('data');
@@ -374,10 +380,12 @@ define([
       });
     });
 
-    this.$results.on('mouseenter', '.option[aria-selected]', function (evt) {
+    this.$results.on('mouseenter', '.select2-results__option[aria-selected]',
+      function (evt) {
       var data = $(this).data('data');
 
-      self.$results.find('.option.highlighted').removeClass('highlighted');
+      self.getHighlightedResults()
+          .removeClass('select2-results__option--highlighted');
 
       self.trigger('results:focus', {
         data: data,
@@ -386,12 +394,19 @@ define([
     });
   };
 
+  Results.prototype.getHighlightedResults = function () {
+    var $highlighted = this.$results
+    .find('.select2-results__option--highlighted');
+
+    return $highlighted;
+  };
+
   Results.prototype.destroy = function () {
     this.$results.remove();
   };
 
   Results.prototype.ensureHighlightVisible = function () {
-    var $highlighted = this.$results.find('.highlighted');
+    var $highlighted = this.getHighlightedResults();
 
     if ($highlighted.length === 0) {
       return;

src/scss/_dropdown.scss

@@ -1,50 +1,48 @@
-.select2-container {
-  .dropdown {
-    background-color: white;
+.select2-dropdown {
+  background-color: white;
 
-    border: 1px solid #aaa;
-    border-radius: 4px;
+  border: 1px solid #aaa;
+  border-radius: 4px;
 
-    box-sizing: border-box;
+  box-sizing: border-box;
 
-    display: block;
+  display: block;
 
-    position: absolute;
-    left: -100000px;
+  position: absolute;
+  left: -100000px;
 
-    width: 100%;
+  width: 100%;
 
-    z-index: 100;
+  z-index: 100;
+}
 
-    .results {
-      display: block;
+.select2-results {
+  display: block;
+}
 
-      .options {
-        list-style: none;
-        margin: 0;
-        padding: 0;
+.select2-results__options {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
 
-        .option {
-          padding: 6px;
+.select2-results__option {
+  padding: 6px;
 
-          user-select: none;
-          -webkit-user-select: none;
+  user-select: none;
+  -webkit-user-select: none;
 
-          &[aria-selected] {
-              cursor: pointer;
-          }
-        }
-      }
-    }
+  &[aria-selected] {
+      cursor: pointer;
   }
+}
 
-  &.select2-container--open .dropdown {
-    border-top: none;
-    border-top-left-radius: 0;
-    border-top-right-radius: 0;
+.select2-container--open .select2-dropdown {
+  border-top: none;
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
 
-    left: 0;
-  }
+  left: 0;
 }
 
 .select2-search--dropdown {

src/scss/theme/default/layout.scss

@@ -46,19 +46,19 @@
       margin-right: 5px;
       margin-top: 5px;
       padding: 0 5px;
+    }
 
-      .select2-selection__choice__remove {
-        color: #999;
-        cursor: pointer;
+    .select2-selection__choice__remove {
+      color: #999;
+      cursor: pointer;
 
-        display: inline-block;
-        font-weight: bold;
+      display: inline-block;
+      font-weight: bold;
 
-        margin-right: 2px;
+      margin-right: 2px;
 
-        &:hover {
-          color: #333;
-        }
+      &:hover {
+        color: #333;
       }
     }
   }
@@ -83,39 +83,33 @@
     }
   }
 
-  .dropdown {
-    .results {
-      &> .options {
-        max-height: 200px;
-        overflow-y: auto;
-      }
+  .select2-results > .select2-results__options {
+    max-height: 200px;
+    overflow-y: auto;
+  }
 
-      .options {
-        .option {
-          &[role=group] {
-            padding: 0;
-
-            .group-label {
-              cursor: default;
-              display: block;
-              padding: 6px;
-            }
-          }
-
-          &[aria-disabled=true] {
-            color: #999;
-          }
-
-          &[aria-selected=true] {
-            background-color: #ddd;
-          }
-
-          &[aria-selected].highlighted {
-            background-color: #5897fb;
-            color: white;
-          }
-        }
-      }
+  .select2-results__option {
+    &[role=group] {
+      padding: 0;
+    }
+
+    &[aria-disabled=true] {
+      color: #999;
+    }
+
+    &[aria-selected=true] {
+      background-color: #ddd;
     }
   }
+
+  .select2-results__option--highlighted[aria-selected] {
+    background-color: #5897fb;
+    color: white;
+  }
+
+  .select2-results__group {
+    cursor: default;
+    display: block;
+    padding: 6px;
+  }
 }