CRM-13966 - Style regular selects to more or less match select2
authorColeman Watts <coleman@civicrm.org>
Fri, 7 Feb 2014 18:38:02 +0000 (10:38 -0800)
committerColeman Watts <coleman@civicrm.org>
Fri, 7 Feb 2014 22:08:06 +0000 (14:08 -0800)
CRM/Core/Form/Renderer.php
css/civicrm.css

index ad22dd4d668f5be758c45d2f53809120d378514e..3665afb9a2e79a9fdfe703f160be338aacffaf20 100644 (file)
@@ -176,6 +176,9 @@ class CRM_Core_Form_Renderer extends HTML_QuickForm_Renderer_ArraySmarty {
       }
     }
 
+    if ($type == 'select' && $element->getAttribute('multiple')) {
+      $type = 'multiselect';
+    }
     $class = ($class ? "$class " : '') . 'crm-form-' . $type;
 
     if ($required) {
index c1c77a7279aaae22e0f291a81c7297e6f51e4cb4..ae3ff815214e23c36e73cadc4df3da4db496bb35 100644 (file)
@@ -216,11 +216,6 @@ div.crm-container fieldset label{
   background-color: #B0B0B0;
 }
 
-.crm-container select {
-  vertical-align: middle;
-  border: 1px solid #999;
-}
-
 .crm-container .crm-form-block {
   padding: 4px;
   margin-bottom: 4px;
@@ -229,7 +224,8 @@ div.crm-container fieldset label{
   color: #3E3E3E;
 }
 
-.crm-container textarea {
+.crm-container textarea,
+.crm-container .crm-form-multiselect {
   border: 1px solid #999;
 }
 
@@ -3792,6 +3788,19 @@ div.m ul#civicrm-menu,
   background-image: -moz-linear-gradient(top, #eee 1%, #fff 15%);
   background-image: linear-gradient(top, #eee 1%, #fff 15%);
 }
+.crm-container select.crm-form-select {
+  border: 1px solid #aaa;
+  color: #444;
+  height: 2.2em;
+  padding: 4px;
+  border-radius: 4px;
+  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(top, #fff 0%, #eee 50%);
+}
 /* Add arrow icon to multi-selects */
 .crm-container .select2-container-multi .select2-choices:before {
   background: url("../packages/jquery/plugins/select2/select2.png") no-repeat scroll 0 -4px;