Switch the multiple selection container

This switches the container to use BEM for the class naming.

dist/css/select2.css

@@ -18,21 +18,22 @@
     padding-left: 8px;
     text-overflow: ellipsis; }
 
-.select2-container .selection .multiple-select {
+.select2-selection--multiple {
   box-sizing: border-box;
   cursor: pointer;
   display: block;
   min-height: 32px;
   user-select: none;
   -webkit-user-select: none; }
-  .select2-container .selection .multiple-select .rendered-selection {
+  .select2-selection--multiple .select2-selection__rendered {
     display: inline-block;
     overflow: hidden;
     padding-left: 8px;
     text-overflow: ellipsis; }
-.select2-container .select2-search-inline {
+
+.select2-search--inline {
   float: left; }
-  .select2-container .select2-search-inline input {
+  .select2-search--inline .select2-search__field {
     border: none;
     font-size: 100%;
     margin-top: 5px; }
@@ -59,18 +60,19 @@
         -webkit-user-select: none; }
         .select2-container .dropdown .results .options .option[aria-selected] {
           cursor: pointer; }
-.select2-container .select2-search {
-  display: block;
-  padding: 4px; }
-  .select2-container .select2-search input {
-    padding: 4px;
-    width: 100%; }
 .select2-container.open .dropdown {
   border-top: none;
   border-top-left-radius: 0;
   border-top-right-radius: 0;
   left: 0; }
 
+.select2-search--dropdown {
+  display: block;
+  padding: 4px; }
+  .select2-search--dropdown .select2-search__field {
+    padding: 4px;
+    width: 100%; }
+
 .select2-container--default .select2-selection--single {
   background-color: #fff;
   border: 1px solid #aaa;
@@ -80,59 +82,58 @@
     line-height: 28px; }
   .select2-container--default .select2-selection--single .select2-selection__placeholder {
     color: #999; }
-
-.select2-container.select2-theme-default .selection .multiple-select {
+.select2-container--default .select2-selection--multiple {
   background-color: white;
   border: 1px solid #aaa;
   border-radius: 4px;
   cursor: text; }
-  .select2-container.select2-theme-default .selection .multiple-select .rendered-selection {
+  .select2-container--default .select2-selection--multiple .select2-selection__rendered {
     list-style: none;
     margin: 0;
     padding: 0 5px; }
-    .select2-container.select2-theme-default .selection .multiple-select .rendered-selection .placeholder {
+  .select2-container--default .select2-selection--multiple .select2-selection__placeholder {
+    color: #999;
+    margin-top: 5px;
+    float: left; }
+  .select2-container--default .select2-selection--multiple .select2-selection__choice {
+    background-color: #e4e4e4;
+    border: 1px solid #aaa;
+    border-radius: 4px;
+    cursor: default;
+    float: left;
+    margin-right: 5px;
+    margin-top: 5px;
+    padding: 0 5px; }
+    .select2-container--default .select2-selection--multiple .select2-selection__choice .select2-selection__choice__remove {
       color: #999;
-      margin-top: 5px;
-      float: left; }
-    .select2-container.select2-theme-default .selection .multiple-select .rendered-selection .choice {
-      background-color: #e4e4e4;
-      border: 1px solid #aaa;
-      border-radius: 4px;
-      cursor: default;
-      float: left;
-      margin-right: 5px;
-      margin-top: 5px;
-      padding: 0 5px; }
-      .select2-container.select2-theme-default .selection .multiple-select .rendered-selection .choice .remove {
-        color: #999;
-        cursor: pointer;
-        display: inline-block;
-        font-weight: bold;
-        margin-right: 2px; }
-        .select2-container.select2-theme-default .selection .multiple-select .rendered-selection .choice .remove:hover {
-          color: #333; }
-.select2-container.select2-theme-default.open .selection .single-select, .select2-container.select2-theme-default.open .selection .multiple-select {
+      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.open .select2-selection--single, .select2-container--default.open .select2-selection--multiple {
   border-bottom-left-radius: 0;
   border-bottom-right-radius: 0; }
-.select2-container.select2-theme-default .select2-search input {
+.select2-container--default .select2-search--dropdown .select2-search__field {
   border: 1px solid #aaa; }
-.select2-container.select2-theme-default .select2-search-inline input {
+.select2-container--default .select2-search--inline .select2-search__field {
   border: none;
   outline: 0; }
-.select2-container.select2-theme-default .dropdown .results > .options {
+.select2-container--default .dropdown .results > .options {
   max-height: 200px;
   overflow-y: auto; }
-.select2-container.select2-theme-default .dropdown .results .options .option[role=group] {
+.select2-container--default .dropdown .results .options .option[role=group] {
   padding: 0; }
-  .select2-container.select2-theme-default .dropdown .results .options .option[role=group] .group-label {
+  .select2-container--default .dropdown .results .options .option[role=group] .group-label {
     cursor: default;
     display: block;
     padding: 6px; }
-.select2-container.select2-theme-default .dropdown .results .options .option[aria-disabled=true] {
+.select2-container--default .dropdown .results .options .option[aria-disabled=true] {
   color: #999; }
-.select2-container.select2-theme-default .dropdown .results .options .option[aria-selected=true] {
+.select2-container--default .dropdown .results .options .option[aria-selected=true] {
   background-color: #ddd; }
-.select2-container.select2-theme-default .dropdown .results .options .option[aria-selected].highlighted {
+.select2-container--default .dropdown .results .options .option[aria-selected].highlighted {
   background-color: #5897fb;
   color: white; }
 

dist/js/select2.amd.full.js

@@ -814,9 +814,10 @@ define('select2/selection/multiple',[
 
   MultipleSelection.prototype.render = function () {
     var $selection = $(
-      '<span class="multiple-select" tabindex="0" role="combobox" ' +
-        'aria-autocomplete="list" aria-haspopup="true" aria-expanded="false">' +
-        '<ul class="rendered-selection"></ul>' +
+      '<span class="select2-selection select2-selection--multiple"' +
+        ' tabindex="0" role="combobox" aria-autocomplete="list"' +
+        ' aria-haspopup="true" aria-expanded="false">' +
+        '<ul class="select2-selection__rendered"></ul>' +
       '</span>'
     );
 
@@ -852,7 +853,7 @@ define('select2/selection/multiple',[
   };
 
   MultipleSelection.prototype.clear = function () {
-    this.$selection.find('.rendered-selection').empty();
+    this.$selection.find('.select2-selection__rendered').empty();
   };
 
   MultipleSelection.prototype.display = function (data) {
@@ -863,8 +864,10 @@ define('select2/selection/multiple',[
 
   MultipleSelection.prototype.selectionContainer = function () {
     var $container = $(
-      '<li class="choice">' +
-        '<span class="remove" role="presentation">&times;</span>' +
+      '<li class="select2-selection__choice">' +
+        '<span class="select2-selection__choice__remove" role="presentation">' +
+          '&times;' +
+        '</span>' +
       '</li>'
     );
 
@@ -892,7 +895,7 @@ define('select2/selection/multiple',[
       $selections.push($selection);
     }
 
-    this.$selection.find('.rendered-selection').append($selections);
+    this.$selection.find('.select2-selection__rendered').append($selections);
   };
 
   return MultipleSelection;
@@ -957,8 +960,9 @@ define('select2/selection/search',[
 
   Search.prototype.render = function (decorated) {
     var $search = $(
-      '<li class="select2-search-inline">' +
-        '<input type="search" tabindex="-1" role="textbox" />' +
+      '<li class="select2-search select2-search--inline">' +
+        '<input class="select2-search__field" type="search" tabindex="-1"' +
+          ' role="textbox" />' +
       '</li>'
     );
 
@@ -987,7 +991,7 @@ define('select2/selection/search',[
       self.$search.val('');
     });
 
-    this.$selection.on('keydown', '.select2-search-inline', function (evt) {
+    this.$selection.on('keydown', '.select2-search--inline', function (evt) {
       evt.stopPropagation();
 
       self.trigger('keypress', evt);
@@ -995,7 +999,7 @@ define('select2/selection/search',[
       self._keyUpPrevented = evt.isDefaultPrevented();
     });
 
-    this.$selection.on('keyup', '.select2-search-inline', function (evt) {
+    this.$selection.on('keyup', '.select2-search--inline', function (evt) {
       self.handleSearch(evt);
     });
   };
@@ -1009,7 +1013,8 @@ define('select2/selection/search',[
 
     decorated.call(this, data);
 
-    this.$selection.find('.rendered-selection').append(this.$searchContainer);
+    this.$selection.find('.select2-selection__rendered')
+                   .append(this.$searchContainer);
 
     this.resizeSearch();
   };
@@ -1035,7 +1040,8 @@ define('select2/selection/search',[
 
     if (this.$search.attr('placeholder') !== '') {
       width = this.$selection.innerWidth();
-      width -= this.$selection.find('.rendered-selection').innerWidth();
+      width -= this.$selection.find('.select2-selection__rendered')
+                              .innerWidth();
 
       width = width + 'px';
     } else {

dist/js/select2.amd.js

@@ -814,9 +814,10 @@ define('select2/selection/multiple',[
 
   MultipleSelection.prototype.render = function () {
     var $selection = $(
-      '<span class="multiple-select" tabindex="0" role="combobox" ' +
-        'aria-autocomplete="list" aria-haspopup="true" aria-expanded="false">' +
-        '<ul class="rendered-selection"></ul>' +
+      '<span class="select2-selection select2-selection--multiple"' +
+        ' tabindex="0" role="combobox" aria-autocomplete="list"' +
+        ' aria-haspopup="true" aria-expanded="false">' +
+        '<ul class="select2-selection__rendered"></ul>' +
       '</span>'
     );
 
@@ -852,7 +853,7 @@ define('select2/selection/multiple',[
   };
 
   MultipleSelection.prototype.clear = function () {
-    this.$selection.find('.rendered-selection').empty();
+    this.$selection.find('.select2-selection__rendered').empty();
   };
 
   MultipleSelection.prototype.display = function (data) {
@@ -863,8 +864,10 @@ define('select2/selection/multiple',[
 
   MultipleSelection.prototype.selectionContainer = function () {
     var $container = $(
-      '<li class="choice">' +
-        '<span class="remove" role="presentation">&times;</span>' +
+      '<li class="select2-selection__choice">' +
+        '<span class="select2-selection__choice__remove" role="presentation">' +
+          '&times;' +
+        '</span>' +
       '</li>'
     );
 
@@ -892,7 +895,7 @@ define('select2/selection/multiple',[
       $selections.push($selection);
     }
 
-    this.$selection.find('.rendered-selection').append($selections);
+    this.$selection.find('.select2-selection__rendered').append($selections);
   };
 
   return MultipleSelection;
@@ -957,8 +960,9 @@ define('select2/selection/search',[
 
   Search.prototype.render = function (decorated) {
     var $search = $(
-      '<li class="select2-search-inline">' +
-        '<input type="search" tabindex="-1" role="textbox" />' +
+      '<li class="select2-search select2-search--inline">' +
+        '<input class="select2-search__field" type="search" tabindex="-1"' +
+          ' role="textbox" />' +
       '</li>'
     );
 
@@ -987,7 +991,7 @@ define('select2/selection/search',[
       self.$search.val('');
     });
 
-    this.$selection.on('keydown', '.select2-search-inline', function (evt) {
+    this.$selection.on('keydown', '.select2-search--inline', function (evt) {
       evt.stopPropagation();
 
       self.trigger('keypress', evt);
@@ -995,7 +999,7 @@ define('select2/selection/search',[
       self._keyUpPrevented = evt.isDefaultPrevented();
     });
 
-    this.$selection.on('keyup', '.select2-search-inline', function (evt) {
+    this.$selection.on('keyup', '.select2-search--inline', function (evt) {
       self.handleSearch(evt);
     });
   };
@@ -1009,7 +1013,8 @@ define('select2/selection/search',[
 
     decorated.call(this, data);
 
-    this.$selection.find('.rendered-selection').append(this.$searchContainer);
+    this.$selection.find('.select2-selection__rendered')
+                   .append(this.$searchContainer);
 
     this.resizeSearch();
   };
@@ -1035,7 +1040,8 @@ define('select2/selection/search',[
 
     if (this.$search.attr('placeholder') !== '') {
       width = this.$selection.innerWidth();
-      width -= this.$selection.find('.rendered-selection').innerWidth();
+      width -= this.$selection.find('.select2-selection__rendered')
+                              .innerWidth();
 
       width = width + 'px';
     } else {

dist/js/select2.full.js

@@ -10349,9 +10349,10 @@ define('select2/selection/multiple',[
 
   MultipleSelection.prototype.render = function () {
     var $selection = $(
-      '<span class="multiple-select" tabindex="0" role="combobox" ' +
-        'aria-autocomplete="list" aria-haspopup="true" aria-expanded="false">' +
-        '<ul class="rendered-selection"></ul>' +
+      '<span class="select2-selection select2-selection--multiple"' +
+        ' tabindex="0" role="combobox" aria-autocomplete="list"' +
+        ' aria-haspopup="true" aria-expanded="false">' +
+        '<ul class="select2-selection__rendered"></ul>' +
       '</span>'
     );
 
@@ -10387,7 +10388,7 @@ define('select2/selection/multiple',[
   };
 
   MultipleSelection.prototype.clear = function () {
-    this.$selection.find('.rendered-selection').empty();
+    this.$selection.find('.select2-selection__rendered').empty();
   };
 
   MultipleSelection.prototype.display = function (data) {
@@ -10398,8 +10399,10 @@ define('select2/selection/multiple',[
 
   MultipleSelection.prototype.selectionContainer = function () {
     var $container = $(
-      '<li class="choice">' +
-        '<span class="remove" role="presentation">&times;</span>' +
+      '<li class="select2-selection__choice">' +
+        '<span class="select2-selection__choice__remove" role="presentation">' +
+          '&times;' +
+        '</span>' +
       '</li>'
     );
 
@@ -10427,7 +10430,7 @@ define('select2/selection/multiple',[
       $selections.push($selection);
     }
 
-    this.$selection.find('.rendered-selection').append($selections);
+    this.$selection.find('.select2-selection__rendered').append($selections);
   };
 
   return MultipleSelection;
@@ -10492,8 +10495,9 @@ define('select2/selection/search',[
 
   Search.prototype.render = function (decorated) {
     var $search = $(
-      '<li class="select2-search-inline">' +
-        '<input type="search" tabindex="-1" role="textbox" />' +
+      '<li class="select2-search select2-search--inline">' +
+        '<input class="select2-search__field" type="search" tabindex="-1"' +
+          ' role="textbox" />' +
       '</li>'
     );
 
@@ -10522,7 +10526,7 @@ define('select2/selection/search',[
       self.$search.val('');
     });
 
-    this.$selection.on('keydown', '.select2-search-inline', function (evt) {
+    this.$selection.on('keydown', '.select2-search--inline', function (evt) {
       evt.stopPropagation();
 
       self.trigger('keypress', evt);
@@ -10530,7 +10534,7 @@ define('select2/selection/search',[
       self._keyUpPrevented = evt.isDefaultPrevented();
     });
 
-    this.$selection.on('keyup', '.select2-search-inline', function (evt) {
+    this.$selection.on('keyup', '.select2-search--inline', function (evt) {
       self.handleSearch(evt);
     });
   };
@@ -10544,7 +10548,8 @@ define('select2/selection/search',[
 
     decorated.call(this, data);
 
-    this.$selection.find('.rendered-selection').append(this.$searchContainer);
+    this.$selection.find('.select2-selection__rendered')
+                   .append(this.$searchContainer);
 
     this.resizeSearch();
   };
@@ -10570,7 +10575,8 @@ define('select2/selection/search',[
 
     if (this.$search.attr('placeholder') !== '') {
       width = this.$selection.innerWidth();
-      width -= this.$selection.find('.rendered-selection').innerWidth();
+      width -= this.$selection.find('.select2-selection__rendered')
+                              .innerWidth();
 
       width = width + 'px';
     } else {

dist/js/select2.js

@@ -1242,9 +1242,10 @@ define('select2/selection/multiple',[
 
   MultipleSelection.prototype.render = function () {
     var $selection = $(
-      '<span class="multiple-select" tabindex="0" role="combobox" ' +
-        'aria-autocomplete="list" aria-haspopup="true" aria-expanded="false">' +
-        '<ul class="rendered-selection"></ul>' +
+      '<span class="select2-selection select2-selection--multiple"' +
+        ' tabindex="0" role="combobox" aria-autocomplete="list"' +
+        ' aria-haspopup="true" aria-expanded="false">' +
+        '<ul class="select2-selection__rendered"></ul>' +
       '</span>'
     );
 
@@ -1280,7 +1281,7 @@ define('select2/selection/multiple',[
   };
 
   MultipleSelection.prototype.clear = function () {
-    this.$selection.find('.rendered-selection').empty();
+    this.$selection.find('.select2-selection__rendered').empty();
   };
 
   MultipleSelection.prototype.display = function (data) {
@@ -1291,8 +1292,10 @@ define('select2/selection/multiple',[
 
   MultipleSelection.prototype.selectionContainer = function () {
     var $container = $(
-      '<li class="choice">' +
-        '<span class="remove" role="presentation">&times;</span>' +
+      '<li class="select2-selection__choice">' +
+        '<span class="select2-selection__choice__remove" role="presentation">' +
+          '&times;' +
+        '</span>' +
       '</li>'
     );
 
@@ -1320,7 +1323,7 @@ define('select2/selection/multiple',[
       $selections.push($selection);
     }
 
-    this.$selection.find('.rendered-selection').append($selections);
+    this.$selection.find('.select2-selection__rendered').append($selections);
   };
 
   return MultipleSelection;
@@ -1385,8 +1388,9 @@ define('select2/selection/search',[
 
   Search.prototype.render = function (decorated) {
     var $search = $(
-      '<li class="select2-search-inline">' +
-        '<input type="search" tabindex="-1" role="textbox" />' +
+      '<li class="select2-search select2-search--inline">' +
+        '<input class="select2-search__field" type="search" tabindex="-1"' +
+          ' role="textbox" />' +
       '</li>'
     );
 
@@ -1415,7 +1419,7 @@ define('select2/selection/search',[
       self.$search.val('');
     });
 
-    this.$selection.on('keydown', '.select2-search-inline', function (evt) {
+    this.$selection.on('keydown', '.select2-search--inline', function (evt) {
       evt.stopPropagation();
 
       self.trigger('keypress', evt);
@@ -1423,7 +1427,7 @@ define('select2/selection/search',[
       self._keyUpPrevented = evt.isDefaultPrevented();
     });
 
-    this.$selection.on('keyup', '.select2-search-inline', function (evt) {
+    this.$selection.on('keyup', '.select2-search--inline', function (evt) {
       self.handleSearch(evt);
     });
   };
@@ -1437,7 +1441,8 @@ define('select2/selection/search',[
 
     decorated.call(this, data);
 
-    this.$selection.find('.rendered-selection').append(this.$searchContainer);
+    this.$selection.find('.select2-selection__rendered')
+                   .append(this.$searchContainer);
 
     this.resizeSearch();
   };
@@ -1463,7 +1468,8 @@ define('select2/selection/search',[
 
     if (this.$search.attr('placeholder') !== '') {
       width = this.$selection.innerWidth();
-      width -= this.$selection.find('.rendered-selection').innerWidth();
+      width -= this.$selection.find('.select2-selection__rendered')
+                              .innerWidth();
 
       width = width + 'px';
     } else {

src/js/select2/selection/multiple.js

@@ -10,9 +10,10 @@ define([
 
   MultipleSelection.prototype.render = function () {
     var $selection = $(
-      '<span class="multiple-select" tabindex="0" role="combobox" ' +
-        'aria-autocomplete="list" aria-haspopup="true" aria-expanded="false">' +
-        '<ul class="rendered-selection"></ul>' +
+      '<span class="select2-selection select2-selection--multiple"' +
+        ' tabindex="0" role="combobox" aria-autocomplete="list"' +
+        ' aria-haspopup="true" aria-expanded="false">' +
+        '<ul class="select2-selection__rendered"></ul>' +
       '</span>'
     );
 
@@ -48,7 +49,7 @@ define([
   };
 
   MultipleSelection.prototype.clear = function () {
-    this.$selection.find('.rendered-selection').empty();
+    this.$selection.find('.select2-selection__rendered').empty();
   };
 
   MultipleSelection.prototype.display = function (data) {
@@ -59,8 +60,10 @@ define([
 
   MultipleSelection.prototype.selectionContainer = function () {
     var $container = $(
-      '<li class="choice">' +
-        '<span class="remove" role="presentation">&times;</span>' +
+      '<li class="select2-selection__choice">' +
+        '<span class="select2-selection__choice__remove" role="presentation">' +
+          '&times;' +
+        '</span>' +
       '</li>'
     );
 
@@ -88,7 +91,7 @@ define([
       $selections.push($selection);
     }
 
-    this.$selection.find('.rendered-selection').append($selections);
+    this.$selection.find('.select2-selection__rendered').append($selections);
   };
 
   return MultipleSelection;

src/js/select2/selection/search.js

@@ -7,8 +7,9 @@ define([
 
   Search.prototype.render = function (decorated) {
     var $search = $(
-      '<li class="select2-search-inline">' +
-        '<input type="search" tabindex="-1" role="textbox" />' +
+      '<li class="select2-search select2-search--inline">' +
+        '<input class="select2-search__field" type="search" tabindex="-1"' +
+          ' role="textbox" />' +
       '</li>'
     );
 
@@ -37,7 +38,7 @@ define([
       self.$search.val('');
     });
 
-    this.$selection.on('keydown', '.select2-search-inline', function (evt) {
+    this.$selection.on('keydown', '.select2-search--inline', function (evt) {
       evt.stopPropagation();
 
       self.trigger('keypress', evt);
@@ -45,7 +46,7 @@ define([
       self._keyUpPrevented = evt.isDefaultPrevented();
     });
 
-    this.$selection.on('keyup', '.select2-search-inline', function (evt) {
+    this.$selection.on('keyup', '.select2-search--inline', function (evt) {
       self.handleSearch(evt);
     });
   };
@@ -59,7 +60,8 @@ define([
 
     decorated.call(this, data);
 
-    this.$selection.find('.rendered-selection').append(this.$searchContainer);
+    this.$selection.find('.select2-selection__rendered')
+                   .append(this.$searchContainer);
 
     this.resizeSearch();
   };
@@ -85,7 +87,8 @@ define([
 
     if (this.$search.attr('placeholder') !== '') {
       width = this.$selection.innerWidth();
-      width -= this.$selection.find('.rendered-selection').innerWidth();
+      width -= this.$selection.find('.select2-selection__rendered')
+                              .innerWidth();
 
       width = width + 'px';
     } else {

src/scss/_dropdown.scss

@@ -38,16 +38,6 @@
     }
   }
 
-  .select2-search {
-    display: block;
-    padding: 4px;
-
-    input {
-      padding: 4px;
-      width: 100%;
-    }
-  }
-
   &.open .dropdown {
     border-top: none;
     border-top-left-radius: 0;
@@ -56,3 +46,13 @@
     left: 0;
   }
 }
+
+.select2-search--dropdown {
+  display: block;
+  padding: 4px;
+
+  .select2-search__field {
+    padding: 4px;
+    width: 100%;
+  }
+}

src/scss/_multiple.scss

@@ -1,30 +1,28 @@
-.select2-container {
-  .selection .multiple-select {
-    box-sizing: border-box;
+.select2-selection--multiple {
+  box-sizing: border-box;
 
-    cursor: pointer;
-    display: block;
+  cursor: pointer;
+  display: block;
 
-    min-height: 32px;
+  min-height: 32px;
 
-    user-select: none;
-    -webkit-user-select: none;
+  user-select: none;
+  -webkit-user-select: none;
 
-    .rendered-selection {
-      display: inline-block;
-      overflow: hidden;
-      padding-left: 8px;
-      text-overflow: ellipsis;
-    }
+  .select2-selection__rendered {
+    display: inline-block;
+    overflow: hidden;
+    padding-left: 8px;
+    text-overflow: ellipsis;
   }
+}
 
-  .select2-search-inline {
-    float: left;
+.select2-search--inline {
+  float: left;
 
-    input {
-      border: none;
-      font-size: 100%;
-      margin-top: 5px;
-    }
+  .select2-search__field {
+    border: none;
+    font-size: 100%;
+    margin-top: 5px;
   }
 }

src/scss/theme/default/layout.scss

@@ -13,78 +13,71 @@
       color: #999;
     }
   }
-}
 
-.select2-container.select2-theme-default {
-  .selection {
-    .multiple-select {
-      background-color: white;
-      border: 1px solid #aaa;
-      border-radius: 4px;
-      cursor: text;
+  .select2-selection--multiple {
+    background-color: white;
+    border: 1px solid #aaa;
+    border-radius: 4px;
+    cursor: text;
 
-      .rendered-selection {
-        list-style: none;
-        margin: 0;
-        padding: 0 5px;
+    .select2-selection__rendered {
+      list-style: none;
+      margin: 0;
+      padding: 0 5px;
+    }
 
-        .placeholder {
-          color: #999;
+    .select2-selection__placeholder {
+      color: #999;
 
-          margin-top: 5px;
+      margin-top: 5px;
 
-          float: left;
-        }
+      float: left;
+    }
 
-        .choice {
-          background-color: #e4e4e4;
+    .select2-selection__choice {
+      background-color: #e4e4e4;
 
-          border: 1px solid #aaa;
-          border-radius: 4px;
-          cursor: default;
+      border: 1px solid #aaa;
+      border-radius: 4px;
+      cursor: default;
 
-          float: left;
+      float: left;
 
-          margin-right: 5px;
-          margin-top: 5px;
-          padding: 0 5px;
+      margin-right: 5px;
+      margin-top: 5px;
+      padding: 0 5px;
 
-          .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;
         }
       }
     }
   }
 
   &.open {
-    .selection {
-      .single-select,
-      .multiple-select {
-        border-bottom-left-radius: 0;
-        border-bottom-right-radius: 0;
-      }
+    .select2-selection--single, .select2-selection--multiple {
+      border-bottom-left-radius: 0;
+      border-bottom-right-radius: 0;
     }
   }
 
-  .select2-search {
-    input {
+  .select2-search--dropdown {
+    .select2-search__field {
       border: 1px solid #aaa;
     }
   }
 
-  .select2-search-inline {
-    input {
+  .select2-search--inline {
+    .select2-search__field {
       border: none;
       outline: 0;
     }