Merge pull request #2479 from colemanw/css

Form style improvements

CRM/Core/Form/Renderer.php

@@ -160,19 +160,19 @@ class CRM_Core_Form_Renderer extends HTML_QuickForm_Renderer_ArraySmarty {
 
     $class = $element->getAttribute('class');
     $type = $element->getType();
-    if (empty($class)) {
-      $class = 'form-' . $type;
-
+    if (!$class) {
       if ($type == 'text') {
         $size = $element->getAttribute('size');
         if (!empty($size)) {
           if (array_key_exists($size, self::$_sizeMapper)) {
-            $class = $class . ' ' . self::$_sizeMapper[$size];
+            $class .= ' ' . self::$_sizeMapper[$size];
           }
         }
       }
     }
 
+    $class .= ($class ? ' ' : '') . 'crm-form-' . $type;
+
     if ($required) {
       $class .= ' required';
     }

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 {