Started work on the classic theme

Some people like the old theme, so we're going to also include that
one as well as the easier-to-extend flat theme.

Author: kevin-brown

dist/css/select2.css

@@ -45,7 +45,6 @@
     display: block;
     padding: 4px; }
     .select2-container .dropdown .search input {
-      outline: 0;
       padding: 4px;
       width: 100%; }
   .select2-container .dropdown .results {
@@ -124,71 +123,54 @@
   background-color: #5897fb;
   color: white; }
 
-.s2-container {
-  margin: 0;
-  position: relative;
-  zoom: 1;
-  vertical-align: middle; }
-  .s2-container.s2-active {
-    border: 1px solid #5897fb;
-    border-top: bottom; }
-  .s2-container .s2-single-select {
-    display: block;
-    height: 26px;
-    padding: 0 0 0 8px;
-    overflow: hidden;
-    position: relative;
-    border: 1px solid #aaa;
-    white-space: nowrap;
-    line-height: 26px;
+.select2-container.select2-theme-classic .selection .single-select {
+  background-color: #f6f6f6;
+  border: 1px solid #aaa;
+  border-radius: 4px;
+  outline: 0;
+  background-image: -webkit-linear-gradient(top, #ffffff 50%, #eee 100%);
+  background-image: -o-linear-gradient(top, #ffffff 50%, #eee 100%);
+  background-image: linear-gradient(to bottom, #ffffff 50%, #eee 100%);
+  background-repeat: repeat-x;
+  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#eee', GradientType=0); }
+  .select2-container.select2-theme-classic .selection .single-select:focus {
+    border: 1px solid #5897fb; }
+  .select2-container.select2-theme-classic .selection .single-select .rendered-selection {
     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%); }
-    .s2-container .s2-single-select .s2-selection {
-      margin-right: 26px;
+    line-height: 28px; }
+    .select2-container.select2-theme-classic .selection .single-select .rendered-selection .placeholder {
+      color: #999; }
+.select2-container.select2-theme-classic.open .selection .single-select {
+  border: 1px solid #5897fb;
+  background-image: -webkit-linear-gradient(top, #eee 50%, #ffffff 100%);
+  background-image: -o-linear-gradient(top, #eee 50%, #ffffff 100%);
+  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.select2-theme-classic.open .selection .single-select, .select2-container.select2-theme-classic.open .selection .multiple-select {
+  border-bottom: none;
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0; }
+.select2-container.select2-theme-classic .dropdown {
+  background-color: white;
+  border-top: none; }
+  .select2-container.select2-theme-classic .dropdown .search input {
+    border: 1px solid #aaa;
+    outline: 0; }
+  .select2-container.select2-theme-classic .dropdown .results > .options {
+    max-height: 200px;
+    overflow-y: auto; }
+  .select2-container.select2-theme-classic .dropdown .results .options .option[role=group] {
+    padding: 0; }
+    .select2-container.select2-theme-classic .dropdown .results .options .option[role=group] .group-label {
+      cursor: default;
       display: block;
-      overflow: hidden;
-      white-space: nowrap;
-      text-overflow: ellipsis; }
-  .s2-container .s2-open .select2-container-active .select2-choice, .s2-container .s2-open .select2-container-active .select2-choices {
-    border: 1px solid #5897fb;
-    outline: none;
-    -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
-    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); }
-
-.s2-search input {
-  -webkit-box-sizing: border-box;
-  /* webkit */
-  -moz-box-sizing: border-box;
-  /* firefox */
-  box-sizing: border-box;
-  /* css3 */ }
-
-.s2-dropdown {
-  width: 100%;
-  margin-top: -1px;
-  position: absolute;
-  z-index: 9999;
-  overflow: scroll;
-  background: #fff;
-  color: #000;
+      padding: 6px; }
+  .select2-container.select2-theme-classic .dropdown .results .options .option[aria-disabled=true] {
+    color: grey; }
+  .select2-container.select2-theme-classic .dropdown .results .options .option[aria-selected].highlighted {
+    background-color: #3875d7;
+    color: white; }
+.select2-container.select2-theme-classic.open .dropdown {
   border: 1px solid #5897fb;
-  border-top: none;
-  border-radius: 0 0 4px 4px;
-  -webkit-box-shadow: 0 4px 5px rgba(0, 0, 0, 0.15);
-  box-shadow: 0 4px 5px rgba(0, 0, 0, 0.15); }
-
-.s2-hidden {
-  display: none; }
+  border-top: none; }

dist/css/select2.min.css

@@ -1925,6 +1925,7 @@ define('select2/defaults',[
       language: ['select2/i18n/en'],
       matcher: matcher,
       minimumInputLength: 0,
+      theme: 'default',
       templateResult: function (result) {
         return result.text;
       },
@@ -2308,14 +2309,16 @@ define('select2/core',[
 
   Select2.prototype.render = function () {
     var $container = $(
-      '<span class="select2 select2-container select2-theme-default">' +
+      '<span class="select2 select2-container">' +
         '<span class="selection"></span>' +
         '<span class="dropdown-wrapper" aria-hidden="true"></span>' +
       '</span>'
     );
 
     this.$container = $container;
 
+    this.$container.addClass('select2-theme-' + this.options.get('theme'));
+
     $container.data('element', this.$element);
 
     return $container;

dist/js/select2.amd.full.js

@@ -1925,6 +1925,7 @@ define('select2/defaults',[
       language: ['select2/i18n/en'],
       matcher: matcher,
       minimumInputLength: 0,
+      theme: 'default',
       templateResult: function (result) {
         return result.text;
       },
@@ -2308,14 +2309,16 @@ define('select2/core',[
 
   Select2.prototype.render = function () {
     var $container = $(
-      '<span class="select2 select2-container select2-theme-default">' +
+      '<span class="select2 select2-container">' +
         '<span class="selection"></span>' +
         '<span class="dropdown-wrapper" aria-hidden="true"></span>' +
       '</span>'
     );
 
     this.$container = $container;
 
+    this.$container.addClass('select2-theme-' + this.options.get('theme'));
+
     $container.data('element', this.$element);
 
     return $container;

dist/js/select2.amd.js

@@ -11460,6 +11460,7 @@ define('select2/defaults',[
       language: ['select2/i18n/en'],
       matcher: matcher,
       minimumInputLength: 0,
+      theme: 'default',
       templateResult: function (result) {
         return result.text;
       },
@@ -11843,14 +11844,16 @@ define('select2/core',[
 
   Select2.prototype.render = function () {
     var $container = $(
-      '<span class="select2 select2-container select2-theme-default">' +
+      '<span class="select2 select2-container">' +
         '<span class="selection"></span>' +
         '<span class="dropdown-wrapper" aria-hidden="true"></span>' +
       '</span>'
     );
 
     this.$container = $container;
 
+    this.$container.addClass('select2-theme-' + this.options.get('theme'));
+
     $container.data('element', this.$element);
 
     return $container;

dist/js/select2.full.js

@@ -2353,6 +2353,7 @@ define('select2/defaults',[
       language: ['select2/i18n/en'],
       matcher: matcher,
       minimumInputLength: 0,
+      theme: 'default',
       templateResult: function (result) {
         return result.text;
       },
@@ -2736,14 +2737,16 @@ define('select2/core',[
 
   Select2.prototype.render = function () {
     var $container = $(
-      '<span class="select2 select2-container select2-theme-default">' +
+      '<span class="select2 select2-container">' +
         '<span class="selection"></span>' +
         '<span class="dropdown-wrapper" aria-hidden="true"></span>' +
       '</span>'
     );
 
     this.$container = $container;
 
+    this.$container.addClass('select2-theme-' + this.options.get('theme'));
+
     $container.data('element', this.$element);
 
     return $container;

dist/js/select2.full.min.js

@@ -502,7 +502,9 @@ <h2>Example code</h2>
 
   var $language = $(".js-example-language");
 
-  $basicSingle.select2();
+  $basicSingle.select2({
+    theme: "classic"
+  });
   $basicMultiple.select2()
 
   $placeholderSingle.select2({