diff --git a/themes/base/spinner.css b/themes/base/spinner.css index a7563e6b943..776004c49a8 100644 --- a/themes/base/spinner.css +++ b/themes/base/spinner.css @@ -42,7 +42,7 @@ .ui-spinner a.ui-spinner-button { border-top: none; border-bottom: none; - border-right: none; + border-right-width: 0; } /* vertically center icon */ .ui-spinner .ui-icon { @@ -63,3 +63,17 @@ /* need to fix icons sprite */ background-position: -65px -16px; } + +/* rtl mode overrides */ +.ui-rtl .ui-spinner-input{ + margin-right: .4em; + margin-left: 22px; +} +.ui-rtl .ui-spinner-button { + right: auto; + left: 0; +} +.ui-rtl.ui-spinner a.ui-spinner-button { + border-left-width: 0; + border-right-width: 1px; +} diff --git a/ui/spinner.js b/ui/spinner.js index c4bac191776..571131b49ae 100644 --- a/ui/spinner.js +++ b/ui/spinner.js @@ -207,13 +207,16 @@ return $.widget( "ui.spinner", { }, _draw: function() { - var uiSpinner = this.uiSpinner = this.element + var rtl = this.element.attr( "dir" ) === "rtl", + uiSpinner = this.uiSpinner = this.element .addClass( "ui-spinner-input" ) .attr( "autocomplete", "off" ) .wrap( this._uiSpinnerHtml() ) .parent() // add buttons - .append( this._buttonHtml() ); + .append( this._buttonHtml() ) + // add ui-rtl class + .toggleClass( "ui-rtl", rtl ); this.element.attr( "role", "spinbutton" ); @@ -263,11 +266,12 @@ return $.widget( "ui.spinner", { }, _buttonHtml: function() { + var rtl = this.element.attr( "dir" ) === "rtl"; return "" + - "" + + "" : "ui-corner-tr'>" ) + "" + "" + - "" + + "" : "ui-corner-br'>" ) + "" + ""; },