CRM-13966 - Improve select2 styling

diff --git a/css/civicrm.css b/css/civicrm.css
index 9c9a452cc3098d0518f66f9eb21ad232b895a3df..ae8abda34fee6d389b00a9cd029ad0cfba16da01 100644 (file)
--- a/css/civicrm.css
+++ b/css/civicrm.css
@@ -293,9 +293,8 @@ div.crm-container fieldset label{
   width: 6em;
 }
 
-.crm-container input[type="text"].form-text,
-.crm-container input[type="text"].dateplugin,
-.crm-container input[type="password"] {
+.crm-container input.crm-form-text,
+.crm-container input.dateplugin {
   border: 1px solid #999;
   vertical-align: middle;
   padding: 1px 2px;
@@ -3762,24 +3761,43 @@ div.m ul#civicrm-menu,
 }
 .crm-container .select2-container {
   min-width: 15em !important;
+  font-size: 11px;
 }
-/* Multi-selects: Move background image into outer container so we can place an icon in the inner container */
-.crm-container .select2-container-multi,
-/* Also style other form inputs to match */
-.crm-container input.form-text {
+/* Style civi form inputs to match select2 */
+.crm-container input.crm-form-text {
   background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(1%, #eee), color-stop(15%, #fff));
   background-image: -webkit-linear-gradient(top, #eee 1%, #fff 15%);
   background-image: -moz-linear-gradient(top, #eee 1%, #fff 15%);
   background-image: linear-gradient(top, #eee 1%, #fff 15%);
 }
 /* Add arrow icon to multi-selects */
-.crm-container .select2-container-multi .select2-choices {
-  background: url("../i/TreeMinus.gif") no-repeat scroll right 5px;
+.crm-container .select2-container-multi .select2-choices:before {
+  background: url("../packages/jquery/plugins/select2/select2.png") no-repeat scroll 0 -4px;
+  content: "";
+  display: block;
+  height: 15px;
+  position: absolute;
+  right: 0;
+  top: 5px;
+  width: 20px;
 }
 /* Add search icon to ajax multi-selects and opened multi-selects */
-.crm-container .select2-container-multi.select2-container-active .select2-choices,
-.crm-container .select2-container-multi.crm-ajax-select .select2-choices {
-  background: url("../packages/jquery/plugins/select2/select2.png") no-repeat scroll right -22px;
+.crm-container .select2-container-multi.select2-container-active .select2-choices:before,
+.crm-container .select2-container-multi.crm-ajax-select .select2-choices:before {
+  background-position: right -26px;
+}
+/* Reduce select2 size to match other inputs */
+.crm-container .select2-container-multi .select2-choices {
+  min-height: 25px;
+}
+.crm-container .select2-container-multi .select2-choices .select2-search-choice {
+  padding: 2px 5px 2px 18px;
+}
+.crm-container .select2-container-multi .select2-choices .select2-search-field input {
+  padding: 4px;
+}
+.crm-container .select2-search-choice-close {
+  top: 2px;
 }
 /* Add search icon to ajax single-selects */
 .crm-container .crm-ajax-select .select2-arrow b {