Switch the multiple selection container

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

Author: kevin-brown

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; }