From dafa99bf40fd455745da96ae15d163b81c782664 Mon Sep 17 00:00:00 2001
From: Kevin Brown <kevin@kevinbrown.in>
Date: Mon, 24 Nov 2014 20:08:24 -0500
Subject: [PATCH] Working on the classic theme

---
 dist/css/select2.css                  | 38 ++++++++++++++++-
 dist/css/select2.min.css              |  2 +-
 docs/examples.html                    | 51 ++++++++++++++++++++---
 src/scss/theme/classic/_multiple.scss | 59 +++++++++++++++++++++++++++
 src/scss/theme/classic/_single.scss   | 37 +++++++++++++++++
 src/scss/theme/classic/layout.scss    | 46 ++++-----------------
 6 files changed, 187 insertions(+), 46 deletions(-)
 create mode 100644 src/scss/theme/classic/_multiple.scss
 create mode 100644 src/scss/theme/classic/_single.scss

diff --git a/dist/css/select2.css b/dist/css/select2.css
index dac2d61d..9da71bcf 100644
--- a/dist/css/select2.css
+++ b/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; }
diff --git a/dist/css/select2.min.css b/dist/css/select2.min.css
index e584c48e..79419d42 100644
--- a/dist/css/select2.min.css
+++ b/dist/css/select2.min.css
@@ -1 +1 @@
-.select2-container{box-sizing:border-box;display:inline-block;margin:0;position:relative;vertical-align:middle;}.select2-selection--single{box-sizing:border-box;cursor:pointer;display:block;height:28px;user-select:none;-webkit-user-select:none;}.select2-selection--single .select2-selection__rendered{display:block;overflow:hidden;padding-left:8px;text-overflow:ellipsis;}.select2-selection--multiple{box-sizing:border-box;cursor:pointer;display:block;min-height:32px;user-select:none;-webkit-user-select:none;}.select2-selection--multiple .select2-selection__rendered{display:inline-block;overflow:hidden;padding-left:8px;text-overflow:ellipsis;}.select2-search--inline{float:left;}.select2-search--inline .select2-search__field{border:none;font-size:100%;margin-top:5px;}.select2-dropdown{background-color:white;border:1px solid #aaa;border-radius:4px;box-sizing:border-box;display:block;position:absolute;left:-100000px;width:100%;z-index:100;}.select2-results{display:block;}.select2-results__options{list-style:none;margin:0;padding:0;}.select2-results__option{padding:6px;user-select:none;-webkit-user-select:none;}.select2-results__option[aria-selected]{cursor:pointer;}.select2-container--open .select2-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;border-radius:4px;}.select2-container--default .select2-selection--single .select2-selection__rendered{color:#444;line-height:28px;}.select2-container--default .select2-selection--single .select2-selection__placeholder{color:#999;}.select2-container--default .select2-selection--multiple{background-color:white;border:1px solid #aaa;border-radius:4px;cursor:text;}.select2-container--default .select2-selection--multiple .select2-selection__rendered{list-style:none;margin:0;padding:0 5px;}.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__remove{color:#999;cursor:pointer;display:inline-block;font-weight:bold;margin-right:2px;}.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover{color:#333;}.select2-container--default.select2-container--open .select2-selection--single,.select2-container--default.select2-container--open .select2-selection--multiple{border-bottom-left-radius:0;border-bottom-right-radius:0;}.select2-container--default .select2-search--dropdown .select2-search__field{border:1px solid #aaa;}.select2-container--default .select2-search--inline .select2-search__field{border:none;outline:0;}.select2-container--default .select2-results>.select2-results__options{max-height:200px;overflow-y:auto;}.select2-container--default .select2-results__option[role=group]{padding:0;}.select2-container--default .select2-results__option[aria-disabled=true]{color:#999;}.select2-container--default .select2-results__option[aria-selected=true]{background-color:#ddd;}.select2-container--default .select2-results__option--highlighted[aria-selected]{background-color:#5897fb;color:white;}.select2-container--default .select2-results__group{cursor:default;display:block;padding:6px;}.select2-container--classic .select2-selection--single{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--classic .select2-selection--single:focus{border:1px solid #5897fb;}.select2-container--classic .select2-selection--single .select2-selection__rendered{color:#444;line-height:28px;}.select2-container--classic .select2-selection--single .select2-selection__placeholder{color:#999;}.select2-container--classic.select2-container--open .select2-selection--single{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--classic.select2-container--open .select2-selection--single,.select2-container--classic.select2-container--open .select2-selection--multiple{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-dropdown{background-color:white;border-top:none;}.select2-container--classic .select2-results>.select2-results__options{max-height:200px;overflow-y:auto;}.select2-container--classic .select2-results__option[role=group]{padding:0;}.select2-container--classic .select2-results__option[aria-disabled=true]{color:grey;}.select2-container--classic .select2-results__option--highlighted[aria-selected]{background-color:#3875d7;color:white;}.select2-container--classic .select2-results__group{cursor:default;display:block;padding:6px;}.select2-container--classic.select2-container--open .select2-dropdown{border:1px solid #5897fb;border-top:none;}
\ No newline at end of file
+.select2-container{box-sizing:border-box;display:inline-block;margin:0;position:relative;vertical-align:middle;}.select2-selection--single{box-sizing:border-box;cursor:pointer;display:block;height:28px;user-select:none;-webkit-user-select:none;}.select2-selection--single .select2-selection__rendered{display:block;overflow:hidden;padding-left:8px;text-overflow:ellipsis;}.select2-selection--multiple{box-sizing:border-box;cursor:pointer;display:block;min-height:32px;user-select:none;-webkit-user-select:none;}.select2-selection--multiple .select2-selection__rendered{display:inline-block;overflow:hidden;padding-left:8px;text-overflow:ellipsis;}.select2-search--inline{float:left;}.select2-search--inline .select2-search__field{border:none;font-size:100%;margin-top:5px;}.select2-dropdown{background-color:white;border:1px solid #aaa;border-radius:4px;box-sizing:border-box;display:block;position:absolute;left:-100000px;width:100%;z-index:100;}.select2-results{display:block;}.select2-results__options{list-style:none;margin:0;padding:0;}.select2-results__option{padding:6px;user-select:none;-webkit-user-select:none;}.select2-results__option[aria-selected]{cursor:pointer;}.select2-container--open .select2-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;border-radius:4px;}.select2-container--default .select2-selection--single .select2-selection__rendered{color:#444;line-height:28px;}.select2-container--default .select2-selection--single .select2-selection__placeholder{color:#999;}.select2-container--default .select2-selection--multiple{background-color:white;border:1px solid #aaa;border-radius:4px;cursor:text;}.select2-container--default .select2-selection--multiple .select2-selection__rendered{list-style:none;margin:0;padding:0 5px;}.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__remove{color:#999;cursor:pointer;display:inline-block;font-weight:bold;margin-right:2px;}.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover{color:#333;}.select2-container--default.select2-container--open .select2-selection--single,.select2-container--default.select2-container--open .select2-selection--multiple{border-bottom-left-radius:0;border-bottom-right-radius:0;}.select2-container--default .select2-search--dropdown .select2-search__field{border:1px solid #aaa;}.select2-container--default .select2-search--inline .select2-search__field{border:none;outline:0;}.select2-container--default .select2-results>.select2-results__options{max-height:200px;overflow-y:auto;}.select2-container--default .select2-results__option[role=group]{padding:0;}.select2-container--default .select2-results__option[aria-disabled=true]{color:#999;}.select2-container--default .select2-results__option[aria-selected=true]{background-color:#ddd;}.select2-container--default .select2-results__option--highlighted[aria-selected]{background-color:#5897fb;color:white;}.select2-container--default .select2-results__group{cursor:default;display:block;padding:6px;}.select2-container--classic .select2-selection--single{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--classic .select2-selection--single:focus{border:1px solid #5897fb;}.select2-container--classic .select2-selection--single .select2-selection__rendered{color:#444;line-height:28px;}.select2-container--classic .select2-selection--single .select2-selection__placeholder{color:#999;}.select2-container--classic.select2-container--open .select2-selection--single{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--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;}.select2-container--classic .select2-results>.select2-results__options{max-height:200px;overflow-y:auto;}.select2-container--classic .select2-results__option[role=group]{padding:0;}.select2-container--classic .select2-results__option[aria-disabled=true]{color:grey;}.select2-container--classic .select2-results__option--highlighted[aria-selected]{background-color:#3875d7;color:white;}.select2-container--classic .select2-results__group{cursor:default;display:block;padding:6px;}.select2-container--classic.select2-container--open .select2-dropdown{border:1px solid #5897fb;border-top:none;}
\ No newline at end of file
diff --git a/docs/examples.html b/docs/examples.html
index 499f1819..e0b9999b 100644
--- a/docs/examples.html
+++ b/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">
-$(".js-example-language").select2({
-  language: "es"
+      <script type="text/x-example-code" class="js-code-language">
+      $(".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({
-    theme: "classic"
-  });
+  $basicSingle.select2();
   $basicMultiple.select2()
 
   $placeholderSingle.select2({
diff --git a/src/scss/theme/classic/_multiple.scss b/src/scss/theme/classic/_multiple.scss
new file mode 100644
index 00000000..de8a4745
--- /dev/null
+++ b/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;
+  }
+}
diff --git a/src/scss/theme/classic/_single.scss b/src/scss/theme/classic/_single.scss
new file mode 100644
index 00000000..5560ad0a
--- /dev/null
+++ b/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;
+  }
+}
diff --git a/src/scss/theme/classic/layout.scss b/src/scss/theme/classic/layout.scss
index fdb5c5ee..8f70dddd 100644
--- a/src/scss/theme/classic/layout.scss
+++ b/src/scss/theme/classic/layout.scss
@@ -2,44 +2,8 @@
 @import "../../mixins/gradients";
 
 .select2-container--classic {
-  .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,
-    .select2-selection--multiple {
-      border-bottom: none;
-      border-bottom-left-radius: 0;
-      border-bottom-right-radius: 0;
-    }
-  }
+  @import "single";
+  @import "multiple";
 
   .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;