From 388780cfcd56b3066fbd5261aa9fead2dec8a4c4 Mon Sep 17 00:00:00 2001
From: vitalets <noginsk@rambler.ru>
Date: Sun, 7 Apr 2013 20:15:44 +0400
Subject: [PATCH] bootstrap-styled select2, fixes #197

---
 src/inputs/select2/lib/select2-bootstrap.css | 91 ++++++++++++++++++++
 src/inputs/select2/select2.js                |  4 +
 2 files changed, 95 insertions(+)
 create mode 100644 src/inputs/select2/lib/select2-bootstrap.css

diff --git a/src/inputs/select2/lib/select2-bootstrap.css b/src/inputs/select2/lib/select2-bootstrap.css
new file mode 100644
index 0000000..a3c28ca
--- /dev/null
+++ b/src/inputs/select2/lib/select2-bootstrap.css
@@ -0,0 +1,91 @@
+.select2-container {
+  vertical-align:middle;
+}
+
+.select2-container .select2-choice {
+  border:1px solid #ccc;
+  height:28px;
+  border-radius: 3px;
+  line-height: 29px;
+  background-image:none;
+  filter:none;
+  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+  -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
+  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+}
+
+.select2-container .select2-choice div {
+  border-left:none;
+  background:none;
+  background-image:none;
+  filter:none;
+}
+
+.select2-container-multi .select2-choices {
+  border:1px solid #ccc;
+  border-radius: 3px;
+  background-image:none;
+  filter:none;
+  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+  -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
+  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
+}
+
+.control-group.error .select2-container-multi .select2-choices {
+  border-color:#B94A48;
+}
+
+.control-group.error .select2-container .select2-choice {
+  border-color:#B94A48;
+}
+
+.select2-container-multi .select2-choices .select2-search-field {
+  height:28px;
+  line-height: 27px;
+}
+
+.select2-container-active .select2-choice,
+.select2-container-active .select2-choices,
+.select2-container-multi.select2-container-active .select2-choices {
+    border-color: rgba(82, 168, 236, 0.8);
+    outline: none;
+    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),0 0 8px rgba(82, 168, 236, 0.6);
+    -moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(82,168,236,0.6);
+    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),0 0 8px rgba(82, 168, 236, 0.6);
+}
+
+.input-append .select2-container, .input-prepend .select2-container {
+  font-size:14px;
+}
+
+.input-prepend .select2-container > a.select2-choice,
+.input-prepend .select2-container-multi .select2-choices {
+  border-top-left-radius: 0px;
+  border-bottom-left-radius: 0px;
+}
+
+.input-append .select2-container > a, 
+.input-append .select2-container-multi .select2-choices {
+  border-top-right-radius: 0px;
+  border-bottom-right-radius: 0px;
+}
+
+.input-prepend .select2-container > a.select2-choice > div,
+.input-append .select2-container > a.select2-choice > div {
+  display:none;
+}
+
+.input-append .select2-offscreen,
+.input-prepend .select2-offscreen {
+  position: absolute;
+}
+
+/**
+ * This stops the quick flash when a native selectbox is shown and 
+ * then replaced by a select2 input when javascript kicks in. This can be 
+ * removed if javascript is not present 
+ */  
+select.select2 {
+  height:28px;
+  visibility:hidden;
+}
diff --git a/src/inputs/select2/select2.js b/src/inputs/select2/select2.js
index 70e503f..2a2a708 100644
--- a/src/inputs/select2/select2.js
+++ b/src/inputs/select2/select2.js
@@ -6,6 +6,10 @@ You should manually include select2 distributive:
     <link href="select2/select2.css" rel="stylesheet" type="text/css"></link>  
     <script src="select2/select2.js"></script>  
     
+For make it **Bootstrap-styled** you can use css from [here](https://github.com/t0m/select2-bootstrap-css): 
+
+    <link href="select2-bootstrap.css" rel="stylesheet" type="text/css"></link>    
+    
 **Note:** currently `ajax` source for select2 is not supported, as it's not possible to load it in closed select2 state.  
 The solution is to load source manually and assign statically.