Fix icon alignment on drop-downs and on contact type icons

Previous fix + another fix. Tested on D7/D9 with Seven admin theme. Before:

After:

Notice top-left and bottom-right icon alignment.

added 1 commit

• 4a4c4509 - Fix custom field headers on contact screen

Compare with previous version

Before: After:

added 1 commit

• 4b1a8114 - Fixing overdue activities not displayed in red in Activity tab

Compare with previous version

Pretty self-explanatory:

Thanks for these.. overdue activities in red is a good one but the accordion will need a lot of testing as those same classes are applied to a number of Civi's other accordions (e.g. main dashboard). For a dive into accordions see this issue: dev/user-interface#60.

To only target the transparent-background type accordions, then it would be better to just target the .crm-collapsible pattern, ie just this should do what you want but not impact elsewhere:

.crm-container .crm-collapsible .collapsible-title {
	font-weight: 600;
	height: 28px;
	padding-top: 6px;
}

added 1 commit

• c3cbf6f7 - Fixing select display to look like other input fields on all forms

Compare with previous version

Before: After:

I've been puzzling over why I've not seen this before and it turns out that D7 Civi loads a regular select list in these two cases, but D9 Civi loads Select2 lists!

And to make life even more fun, WordPress and Joomla both load a Select2 list for the first and a regular select for the second. Which leaves me wondering how different CMSs are rendering what I assumed were Smarty templates differently.

@nicol Thanks for your comment on the activities in red, my patch only add the red color on '.status-overdue td', it already was there for '.status-overdue' so it should be safe. The '.status-overdue' was overridden by a 'table td, table th' selector in the theme.

added 1 commit

• 4ea0d680 - Fixing close icon position on select2 widgets in .ui-tabs

Compare with previous version

Before: After:

added 1 commit

• 29122b5c - Re-scoping accordeon headers on contact page

Compare with previous version

resolved all threads

this works - adding height: 12px would remove the slight reveal of the top of the rest of the sprite as well..

It would be good (ie fewer lines and easier to update all styles at once) to bundle this style info with the line - https://lab.civicrm.org/extensions/finsburypark/-/blob/master/css/civicrm.css#L1468 - that describes all input styles (border colour, radius, etc) - by adding .crm-container select to that list.

But the minimum height is still needed to be overwritten so we could keep .crm-container select {min-height: 32px;} here and nothing else.

Sorry to be so particular - hope this makes sense?

ie like this:

NB - second screengrab in a row that shows right icon clipping in the input box with a select-list, will open an issue for that to remind me to fix.

Thanks @cividesk for these suggestions - I've had a v quick check across D7, D9, WordPress and Joomla - and all look fine. If you can make the two adjustments above am good to merge.

mentioned in commit 085ba080

merged

Have merged to avoid this becoming stale, and resolved those two issues in this commit. Thanks for the contribution.

@nicol Sorry I got carried away on other tasks and thanks for merging. Did run visual checks on master and all good now.