Some fixes to our jQuery UI skin for buttons

The main idea here is making our skin not broken for button sets.

PS2: Rebased to master to avoid dependency
PS3: Removed trailing whitespace and fixed commit msg
PS5: Reverting changes to the !importants since these may be necessary

Change-Id: Ic05595c9ed5150dc63c3708d2411965c49d3cd40

diff --git a/resources/jquery.ui/themes/vector/jquery.ui.button.css b/resources/jquery.ui/themes/vector/jquery.ui.button.css
index 365a795..006bbea 100644 (file)
--- a/resources/jquery.ui/themes/vector/jquery.ui.button.css
+++ b/resources/jquery.ui/themes/vector/jquery.ui.button.css
@@ -4,18 +4,16 @@
 .ui-button { display: inline-block; position: relative; padding: 0; margin-right: .1em; text-decoration: none !important; cursor: pointer; text-align: center; zoom: 1; overflow: visible; } /* the overflow property removes extra width in IE */
 .ui-button-icon-only { width: 2.2em; } /* to make room for the icon, a width needs to be set here */
 button.ui-button-icon-only { width: 2.4em; } /* button elements seem to need a little more width */
-.ui-button-icons-only { width: 3.4em; } 
-button.ui-button-icons-only { width: 3.7em; } 
+.ui-button-icons-only { width: 3.4em; }
+button.ui-button-icons-only { width: 3.7em; }
 
 /*button text element */
-.ui-button .ui-button-text { display: block; line-height: 1.4em;  }
+.ui-button .ui-button-text { display: block; line-height: 1.4;  }
 .ui-button-text-only .ui-button-text { padding: 0.3em 1em 0.25em 1em; }
 .ui-button-icon-only .ui-button-text, .ui-button-icons-only .ui-button-text { padding: 0.3em; text-indent: -9999999px; }
 .ui-button-text-icon-primary .ui-button-text, .ui-button-text-icons .ui-button-text { padding: 0.3em 1em 0.25em 2.1em; }
 .ui-button-text-icon-secondary .ui-button-text, .ui-button-text-icons .ui-button-text { padding: 0.3em 2.1em 0.25em 1em; }
 .ui-button-text-icons .ui-button-text { padding-left: 2.1em; padding-right: 2.1em; }
-/* for older versions of jQuery UI */
-.ui-button-text-icon .ui-button-text { padding: 0.3em 1em 0.3em 2.1em; }
 
 /* no icon support for input elements, provide padding by default */
 input.ui-button { padding: 0.3em 1em; }
@@ -34,10 +32,7 @@ input.ui-button { padding: 0.3em 1em; }
 button.ui-button::-moz-focus-inner { border: 0; padding: 0; } /* reset extra padding in Firefox */
 
 body .ui-button {
-       -moz-border-radius: 4px;
-       -webkit-border-radius: 4px;
-       border-radius: 4px;
-       margin: 0.5em 0 0.5em 0.4em !important;
+       margin: 0.5em 0 0.5em 0.4em;
        border: 1px solid #a6a6a6 !important;
        /* @embed */
        background: #f2f2f2 url(images/button-off.png) repeat-x scroll 50% 100% !important;
@@ -47,6 +42,15 @@ body .ui-button {
        width: auto;
        overflow: visible;
 }
+
+/* Corner radius */
+/* This is normally handled in jquery.ui.theme.css, but in our case, the corner
+   styling of our buttons doesn't match our default widget corner styling */
+.ui-button.ui-corner-all, .ui-button.ui-corner-top, .ui-button.ui-corner-left, .ui-button.ui-corner-tl { -moz-border-radius-topleft: 4px; -webkit-border-top-left-radius: 4px; border-top-left-radius: 4px; }
+.ui-button.ui-corner-all, .ui-button.ui-corner-top, .ui-button.ui-corner-right, .ui-button.ui-corner-tr { -moz-border-radius-topright: 4px; -webkit-border-top-right-radius: 4px; border-top-right-radius: 4px; }
+.ui-button.ui-corner-all, .ui-button.ui-corner-bottom, .ui-button.ui-corner-left, .ui-button.ui-corner-bl { -moz-border-radius-bottomleft: 4px; -webkit-border-bottom-left-radius: 4px; border-bottom-left-radius: 4px; }
+.ui-button.ui-corner-all, .ui-button.ui-corner-bottom, .ui-button.ui-corner-right, .ui-button.ui-corner-br { -moz-border-radius-bottomright: 4px; -webkit-border-bottom-right-radius: 4px; border-bottom-right-radius: 4px; }
+
 body .ui-button:hover {
        border-color: #6e7273;
        /* @embed */