From e3a35c3535fe213826881761154d3f4eb9278ac4 Mon Sep 17 00:00:00 2001 From: Coleman Watts Date: Sat, 1 Feb 2014 21:00:51 -0800 Subject: [PATCH] CRM-13966 - Improve search widget style --- css/civicrm.css | 17 ++++++++++++++--- 1 file changed, 14 insertions(+), 3 deletions(-) diff --git a/css/civicrm.css b/css/civicrm.css index 2a2a5ded55..16a967a9ea 100644 --- a/css/civicrm.css +++ b/css/civicrm.css @@ -2750,7 +2750,7 @@ div.grippie { #civicrm-menu .ui-autocomplete-input, .crm-container .ui-autocomplete-input, .crm-container .ac_input { - background: url("../packages/jquery/plugins/select2/select2.png") no-repeat scroll right -23px; + background: white url("../packages/jquery/plugins/select2/select2.png") no-repeat scroll right -23px; padding-right: 16px; /* so that text doesn't flow on top of icon */ } @@ -3774,19 +3774,30 @@ div.m ul#civicrm-menu, .crm-container .select2-container { min-width: 15em !important; } -/* Move background image into outer container so we can place an icon in the inner container */ +/* Multi-selects: Move background image into outer container so we can place an icon in the inner container */ .crm-container .select2-container-multi { 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-container-active .select2-choices { +/* 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; } +/* Add search icon to ajax single-selects */ +.crm-container .crm-ajax-select .select2-arrow b { + background-position: -39px -22px; +} +/* Restore normal icon when searchable field is open */ +.crm-container .select2-dropdown-open .select2-choice .select2-arrow b { + background-position: -18px 1px; +} /* Special styling for specific form buttons */ #crm-container span.crm-button_qf_Main_upload input, -- 2.25.1