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'>" ) +
"▼" +
"";
},