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.

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/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,7 +2309,7 @@ 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>'
@@ -2316,6 +2317,8 @@ define('select2/core',[
 
     this.$container = $container;
 
+    this.$container.addClass('select2-theme-' + this.options.get('theme'));
+
     $container.data('element', this.$element);
 
     return $container;

dist/js/select2.amd.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,7 +2309,7 @@ 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>'
@@ -2316,6 +2317,8 @@ define('select2/core',[
 
     this.$container = $container;
 
+    this.$container.addClass('select2-theme-' + this.options.get('theme'));
+
     $container.data('element', this.$element);
 
     return $container;

dist/js/select2.full.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,7 +11844,7 @@ 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>'
@@ -11851,6 +11852,8 @@ define('select2/core',[
 
     this.$container = $container;
 
+    this.$container.addClass('select2-theme-' + this.options.get('theme'));
+
     $container.data('element', this.$element);
 
     return $container;

dist/js/select2.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,7 +2737,7 @@ 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>'
@@ -2744,6 +2745,8 @@ define('select2/core',[
 
     this.$container = $container;
 
+    this.$container.addClass('select2-theme-' + this.options.get('theme'));
+
     $container.data('element', this.$element);
 
     return $container;

docs/examples.html

@@ -502,7 +502,9 @@ $.fn.select2.amd.require(
 
   var $language = $(".js-example-language");
 
-  $basicSingle.select2();
+  $basicSingle.select2({
+    theme: "classic"
+  });
   $basicMultiple.select2()
 
   $placeholderSingle.select2({

src/js/select2/core.js

@@ -335,7 +335,7 @@ define([
 
   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>'
@@ -343,6 +343,8 @@ define([
 
     this.$container = $container;
 
+    this.$container.addClass('select2-theme-' + this.options.get('theme'));
+
     $container.data('element', this.$element);
 
     return $container;

src/js/select2/defaults.js

@@ -175,6 +175,7 @@ define([
       language: ['select2/i18n/en'],
       matcher: matcher,
       minimumInputLength: 0,
+      theme: 'default',
       templateResult: function (result) {
         return result.text;
       },

src/scss/_dropdown.scss

@@ -21,7 +21,6 @@
       padding: 4px;
 
       input {
-        outline: 0;
         padding: 4px;
         width: 100%;
       }

src/scss/core.scss

@@ -13,100 +13,4 @@
 @import "dropdown";
 
 @import "theme/default/layout";
-
-.s2-container {
-  margin: 0;
-  position: relative;
-  zoom: 1;
-  vertical-align: middle;
-
-  &.s2-active {
-    border: 1px solid #5897fb;
-    border-top: bottom;
-  }
-
-  .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;
-    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-selection {
-      margin-right: 26px;
-      display: block;
-      overflow: hidden;
-
-      white-space: nowrap;
-
-      text-overflow: ellipsis;
-    }
-  }
-
-  .s2-open {
-    .select2-container-active .select2-choice,
-    .select2-container-active .select2-choices {
-      border: 1px solid #5897fb;
-      outline: none;
-
-      -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, .3);
-      box-shadow: 0 0 5px rgba(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;
-  border: 1px solid #5897fb;
-  border-top: none;
-
-  border-radius: 0 0 4px 4px;
-
-  -webkit-box-shadow: 0 4px 5px rgba(0, 0, 0, .15);
-  box-shadow: 0 4px 5px rgba(0, 0, 0, .15);
-}
-
-
-.s2-hidden {
-  display: none;
-}
+@import "theme/classic/layout";

src/scss/mixins/_gradients.scss

@@ -0,0 +1,13 @@
+// https://github.com/twbs/bootstrap-sass/blob/a416cb86a3ddc6906892b2c0472deea306989fea/vendor/assets/stylesheets/bootstrap/mixins/_gradients.scss
+
+// Vertical gradient, from top to bottom
+//
+// Creates two color stops, start and end, by specifying a color and position for each color stop.
+// Color stops are not available in IE9 and below.
+@mixin gradient-vertical($start-color: #555, $end-color: #333, $start-percent: 0%, $end-percent: 100%) {
+    background-image: -webkit-linear-gradient(top, $start-color $start-percent, $end-color $end-percent);  // Safari 5.1-6, Chrome 10+
+    background-image: -o-linear-gradient(top, $start-color $start-percent, $end-color $end-percent);  // Opera 12
+    background-image: linear-gradient(to bottom, $start-color $start-percent, $end-color $end-percent); // Standard, IE10, Firefox 16+, Opera 12.10+, Safari 7+, Chrome 26+
+    background-repeat: repeat-x;
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$start-color}', endColorstr='#{$end-color}', GradientType=0); // IE9 and down
+}

src/scss/theme/classic/_defaults.scss

@@ -0,0 +1,34 @@
+$remove-color: #888 !default;
+$remove-hover-color: #555 !default;
+$remove-width: 20px !default;
+
+$selection-color: #444 !default;
+
+$border-color: #aaa !default;
+$border-radius: 4px !default;
+
+$focus-border-color: #5897fb !default;
+
+$container-height: 28px !default;
+
+$selection-bg-top-color: white !default;
+$selection-bg-bottom-color: #eee !default;
+
+$container-placeholder-color: #999 !default;
+
+$container-focus-border-color: blue !default;
+
+$selection-opened-bg-top-color: $selection-bg-bottom-color !default;
+$selection-opened-bg-bottom-color: $selection-bg-top-color !default;
+
+$dropdown-z-index: 1 !default;
+
+$dropdown-bg-color: $selection-bg-top-color !default;
+
+$results-max-height: 200px !default;
+$results-nested-padding: 20px !default;
+
+$results-choice-bg-hover-color: #3875d7 !default;
+$results-choice-fg-hover-color: white !default;
+
+$results-choice-fg-unselectable-color: grey !default;

src/scss/theme/classic/layout.scss

@@ -0,0 +1,94 @@
+@import "defaults";
+@import "../../mixins/gradients";
+
+.select2-container.select2-theme-classic {
+  .selection {
+      .single-select {
+          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;
+          }
+
+          .rendered-selection {
+            color: #444;
+            line-height: 28px;
+
+            .placeholder {
+              color: #999;
+            }
+          }
+      }
+  }
+
+  &.open {
+    .selection {
+      .single-select {
+        border: 1px solid $focus-border-color;
+
+        @include gradient-vertical($selection-opened-bg-top-color, $selection-opened-bg-bottom-color, 50%, 100%);
+      }
+
+      .single-select,
+      .multiple-select {
+        border-bottom: none;
+        border-bottom-left-radius: 0;
+        border-bottom-right-radius: 0;
+      }
+    }
+  }
+
+  .dropdown {
+    background-color: $dropdown-bg-color;
+    border-top: none;
+
+    .search {
+      input {
+        border: 1px solid $border-color;
+        outline: 0;
+      }
+    }
+
+    .results {
+      &> .options {
+        max-height: $results-max-height;
+        overflow-y: auto;
+      }
+
+      .options {
+        .option {
+          &[role=group] {
+            padding: 0;
+
+            .group-label {
+              cursor: default;
+              display: block;
+              padding: 6px;
+            }
+          }
+
+          &[aria-disabled=true] {
+            color: $results-choice-fg-unselectable-color;
+          }
+
+          &[aria-selected].highlighted {
+            background-color: $results-choice-bg-hover-color;
+            color: $results-choice-fg-hover-color;
+          }
+        }
+      }
+    }
+  }
+
+  &.open .dropdown {
+    border: 1px solid $focus-border-color;
+    border-top: none;
+  }
+}