Working on the classic theme

dist/css/select2.css

@@ -165,13 +165,49 @@
   background-image: linear-gradient(to bottom, #eee 50%, #ffffff 100%);
   background-repeat: repeat-x;
   filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#eee', endColorstr='#ffffff', GradientType=0); }
-.select2-container--classic.select2-container--open .select2-selection--single, .select2-container--classic.select2-container--open .select2-selection--multiple {
+.select2-container--classic.select2-container--open .select2-selection--single {
+  border-bottom: none;
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0; }
+.select2-container--classic .select2-selection--multiple {
+  background-color: white;
+  border: 1px solid #aaa;
+  border-radius: 4px;
+  cursor: text;
+  outline: 0; }
+  .select2-container--classic .select2-selection--multiple:focus {
+    border: 1px solid #5897fb; }
+  .select2-container--classic .select2-selection--multiple .select2-selection__rendered {
+    list-style: none;
+    margin: 0;
+    padding: 0 5px; }
+  .select2-container--classic .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--classic .select2-selection--multiple .select2-selection__choice__remove {
+    color: #888;
+    cursor: pointer;
+    display: inline-block;
+    font-weight: bold;
+    margin-right: 2px; }
+    .select2-container--classic .select2-selection--multiple .select2-selection__choice__remove:hover {
+      color: #555; }
+.select2-container--classic.select2-container--open .select2-selection--multiple {
+  border: 1px solid #5897fb;
   border-bottom: none;
   border-bottom-left-radius: 0;
   border-bottom-right-radius: 0; }
 .select2-container--classic .select2-search--dropdown .select2-search__field {
   border: 1px solid #aaa;
   outline: 0; }
+.select2-container--classic .select2-search--inline .select2-search__field {
+  outline: 0; }
 .select2-container--classic .select2-dropdown {
   background-color: white;
   border-top: none; }

docs/examples.html

@@ -421,9 +421,50 @@ $.select2.amd.require(['select2/compat/matcher'], function (oldMatcher) {
 
       <pre data-fill-from=".js-code-language"></pre>
 
-<script type="text/x-example-code" class="js-code-language">
+      <script type="text/x-example-code" class="js-code-language">
-$(".js-example-language").select2({
+      $(".js-example-language").select2({
         language: "es"
+      });
+      </script>
+    </div>
+  </section>
+
+  <section id="themes" class="row">
+    <div class="col-md-4">
+      <h1>Theme support</h1>
+
+      <p>
+        Select2 supports custom themes using the
+        <a href="options.html#theme">theme option</a>
+        so you can style Select2 to match the rest of your application.
+      </p>
+
+      <p>
+        <select class="js-example-theme-single js-states form-control">
+        </select>
+      </p>
+
+      <p>
+        These are using the <code>classic</code> theme, which matches the old
+        look of Select2.
+      </p>
+
+      <p>
+        <select class="js-example-theme-multiple js-states form-control" multiple="multiple"></select>
+      </p>
+    </div>
+    <div class="col-md-8">
+      <h2>Example code</h2>
+
+      <pre data-fill-from=".js-code-theme"></pre>
+
+<script type="text/javascript" class="js-code-theme">
+$(".js-example-theme-single").select2({
+  theme: "classic"
+});
+
+$(".js-example-theme-multiple").select2({
+  theme: "classic"
 });
 </script>
     </div>
@@ -539,9 +580,7 @@ $.fn.select2.amd.require(
   var $diacritics = $(".js-example-diacritics");
   var $language = $(".js-example-language");
 
-  $basicSingle.select2({
+  $basicSingle.select2();
-    theme: "classic"
-  });
   $basicMultiple.select2()
 
   $placeholderSingle.select2({

src/scss/theme/classic/_multiple.scss

@@ -0,0 +1,59 @@
+.select2-selection--multiple {
+  background-color: white;
+
+  border: 1px solid $border-color;
+  border-radius: $border-radius;
+
+  cursor: text;
+
+  outline: 0;
+
+  &:focus {
+    border: 1px solid $focus-border-color;
+  }
+
+  .select2-selection__rendered {
+    list-style: none;
+    margin: 0;
+    padding: 0 5px;
+  }
+
+  .select2-selection__choice {
+    background-color: #e4e4e4;
+
+    border: 1px solid $border-color;
+    border-radius: $border-radius;
+
+    cursor: default;
+
+    float: left;
+
+    margin-right: 5px;
+    margin-top: 5px;
+    padding: 0 5px;
+  }
+
+  .select2-selection__choice__remove {
+    color: $remove-color;
+    cursor: pointer;
+
+    display: inline-block;
+    font-weight: bold;
+
+    margin-right: 2px;
+
+    &:hover {
+      color: $remove-hover-color;
+    }
+  }
+}
+
+&.select2-container--open {
+  .select2-selection--multiple {
+    border: 1px solid $focus-border-color;
+
+    border-bottom: none;
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+}

src/scss/theme/classic/_single.scss

@@ -0,0 +1,37 @@
+.select2-selection--single {
+  background-color: mix($selection-bg-top-color, $selection-bg-bottom-color);
+
+  border: 1px solid $border-color;
+  border-radius: $border-radius;
+
+  outline: 0;
+
+  @include gradient-vertical($selection-bg-top-color, $selection-bg-bottom-color, 50%, 100%);
+
+  &:focus {
+    border: 1px solid $focus-border-color;
+  }
+
+  .select2-selection__rendered {
+    color: #444;
+    line-height: 28px;
+  }
+
+  .select2-selection__placeholder {
+    color: #999;
+  }
+}
+
+&.select2-container--open {
+  .select2-selection--single {
+    border: 1px solid $focus-border-color;
+
+    @include gradient-vertical($selection-opened-bg-top-color, $selection-opened-bg-bottom-color, 50%, 100%);
+  }
+
+  .select2-selection--single {
+    border-bottom: none;
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+}

src/scss/theme/classic/layout.scss

@@ -2,44 +2,8 @@
 @import "../../mixins/gradients";
 
 .select2-container--classic {
-  .select2-selection--single {
+  @import "single";
-    background-color: mix($selection-bg-top-color, $selection-bg-bottom-color);
+  @import "multiple";
-
-    border: 1px solid $border-color;
-    border-radius: $border-radius;
-
-    outline: 0;
-
-    @include gradient-vertical($selection-bg-top-color, $selection-bg-bottom-color, 50%, 100%);
-
-    &:focus {
-      border: 1px solid $focus-border-color;
-    }
-
-    .select2-selection__rendered {
-      color: #444;
-      line-height: 28px;
-    }
-
-    .select2-selection__placeholder {
-      color: #999;
-    }
-  }
-
-  &.select2-container--open {
-    .select2-selection--single {
-      border: 1px solid $focus-border-color;
-
-      @include gradient-vertical($selection-opened-bg-top-color, $selection-opened-bg-bottom-color, 50%, 100%);
-    }
-
-    .select2-selection--single,
-    .select2-selection--multiple {
-      border-bottom: none;
-      border-bottom-left-radius: 0;
-      border-bottom-right-radius: 0;
-    }
-  }
 
   .select2-search--dropdown {
     .select2-search__field {
@@ -48,6 +12,12 @@
     }
   }
 
+  .select2-search--inline {
+    .select2-search__field {
+      outline: 0;
+    }
+  }
+
   .select2-dropdown {
     background-color: $dropdown-bg-color;
     border-top: none;