Button backwards compatibility and CSS theme enhancement

[jplevene]

I have written a wrapper to do this (but that's me and not others), however since 1.12 the icons in the buttons have changed.

The current icons are next to the text, however I would like to suggest 2 additional values for the "iconPosition" option, being "far-left" and "far-right", thus putting the icons in the same place as v1.11

Also, regarding the CSS with themes. To simplify theming, and as older browsers are now not supported, may I suggest using CSS variables where convinient:

.ui-corner-all,
.ui-corner-bottom,
.ui-corner-left,
.ui-corner-bl {
	border-bottom-left-radius: var(--radius);
}
.ui-widget-overlay {
	background: var(--overlay-color);
	opacity: var(--overlay-opacity);
}

Not all values need to be variables, just ones adjusted in ThemeRoller and maybe a few more. That way there is a standard CSS file for all themes and an addendum or additional short file with the variable values. This would make it easier to make your own themes or do alterations.

Lastly, for margins, padding, etc. to switch from "px" to "em" where possible, thus making it more responsive to font sizing

Just as a praise:

People do not realise how amazing and useful jquery ui widgets are. We use them to dynamically write pages and content in our web apps, breaking them into different functions therein. Due to this, we can insert custom JS that overrides or adds to each function, being a quick and simple way for people to enable plugins for their web apps, without destroying the underlying code.

Basically we have custom widgets that dynamically builds each page, broken up into various functions, from init_top_section to get_save_params, save and saved, with options for the location of the save file, etc.. I know it wasn't built for this, but it has transformed the capabilities of our software, in that we can insert JS into the page that only implements changes safely for a particular user without affecting any others.