iconPicker style improvements

diff --git a/css/civicrm.css b/css/civicrm.css
index 716350ba6c0a0eed2b396d45391a207fc9f09c33..91f7efae72b49aa90064060c68bf54e0a0c0e1a1 100644 (file)
--- a/css/civicrm.css
+++ b/css/civicrm.css
@@ -270,6 +270,7 @@ input.crm-form-entityref {
     border: 1px solid #FF0000;
 }
 .crm-container input.crm-form-text,
+.crm-container .crm-icon-picker-button,
 .crm-container input.dateplugin {
   border: 1px solid #999;
   vertical-align: middle;

diff --git a/js/jquery/jquery.crmIconPicker.js b/js/jquery/jquery.crmIconPicker.js
index 885d1b2b88c7143d00db04d28ce2968a52a7e2fe..d98028128d3f3935f6a892c56958dc543704853c 100644 (file)
--- a/js/jquery/jquery.crmIconPicker.js
+++ b/js/jquery/jquery.crmIconPicker.js
@@ -27,7 +27,7 @@
       }
 
       var $input = $(this),
-        $button = $('<a href="#" />').button().attr('title', $input.attr('title')),
+        $button = $('<a class="crm-icon-picker-button" href="#" />').button().removeClass('ui-corner-all').attr('title', $input.attr('title')),
         $style = $('<select class="crm-form-select"></select>'),
         options = [
           {key: 'fa-rotate-90', value: ts('Rotate right')},
@@ -42,11 +42,12 @@
         $button.button('option', {
           label: split[0] || ts('None'),
           icons: {primary: $input.val()}
-        });
+        })
+          .css('color', split[0] ? '#3e3e3e' : '#9f9f9f');
         $style.toggle(!!split[0]).val(split[1] || '');
       }
 
-      $input.hide().addClass('iconpicker-widget').after($style).after($button).change(formatButton);
+      $input.hide().addClass('iconpicker-widget').after($style).after('&nbsp;').after($button).change(formatButton);
 
       CRM.utils.setOptions($style, options, ts('Normal'));