Skip to content

Commit

Permalink
All: Support RTL and LTR in RTL context
Browse files Browse the repository at this point in the history 
Supporting RTL in a LTR context is implicit
RTL is invoked by using a ui-rtl class wrapper with dir="rtl" attribute.
LTR in a RTL context is invoked by using a ui-ltr class wrapper and
accompanying dir="ltr" inside the ui-rtl wrapper.
ui-btn-start, ui-btn-end, ui-btn-icon-start and ui-btn-icon-end has been
added to allow easier ordering of elements,
as a replacement for *-left and *-right counterparts.
Tests have not been 100% updated with RTL considerations in this commit.
The only test updates are the ones needed to pass all current tests.
Transitions have not been included in RTL considerations.
RTL versions of demos have been copied and modified from
their LTR counterparts, and
can be accessed from the Right To Left option on the demos menu.

Ref jquery-archivegh-5167
  • Loading branch information
@rhelms
rhelms committed Sep 24, 2015
1 parent 3d7eace commit 72d7757
Show file tree
Hide file tree
Showing 96 changed files with 13,213 additions and 68 deletions.
14 changes: 14 additions & 0 deletions css/structure/jquery.mobile.collapsible.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,10 +17,24 @@
border-left-width: 0;
border-right-width: 0;
}
.ui-rtl .ui-collapsible-heading .ui-btn {
text-align: right;
}
.ui-rtl .ui-ltr .ui-collapsible-heading .ui-btn {
text-align: left;
}
.ui-collapsible-heading .ui-btn-icon-top,
.ui-collapsible-heading .ui-btn-icon-bottom {
text-align: center;
}
.ui-rtl .ui-collapsible-heading .ui-btn-icon-top,
.ui-rtl .ui-collapsible-heading .ui-btn-icon-bottom {
text-align: center;
}
.ui-rtl .ui-ltr .ui-collapsible-heading .ui-btn-icon-top,
.ui-rtl .ui-ltr .ui-collapsible-heading .ui-btn-icon-bottom {
text-align: center;
}
.ui-collapsible-inset .ui-collapsible-heading .ui-btn {
border-right-width: 1px;
border-left-width: 1px;
Expand Down
21 changes: 21 additions & 0 deletions css/structure/jquery.mobile.controlgroup.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,20 @@ fieldset.ui-controlgroup {
float: left;
clear: none;
}
.ui-rtl .ui-controlgroup-horizontal .ui-controlgroup-controls > .ui-btn,
.ui-rtl .ui-controlgroup-horizontal .ui-controlgroup-controls li > .ui-btn,
.ui-rtl .ui-controlgroup-horizontal .ui-controlgroup-controls .ui-checkbox,
.ui-rtl .ui-controlgroup-horizontal .ui-controlgroup-controls .ui-radio,
.ui-rtl .ui-controlgroup-horizontal .ui-controlgroup-controls .ui-select {
float: right;
}
.ui-rtl .ui-ltr .ui-controlgroup-horizontal .ui-controlgroup-controls > .ui-btn,
.ui-rtl .ui-ltr .ui-controlgroup-horizontal .ui-controlgroup-controls li > .ui-btn,
.ui-rtl .ui-ltr .ui-controlgroup-horizontal .ui-controlgroup-controls .ui-checkbox,
.ui-rtl .ui-ltr .ui-controlgroup-horizontal .ui-controlgroup-controls .ui-radio,
.ui-rtl .ui-ltr .ui-controlgroup-horizontal .ui-controlgroup-controls .ui-select {
float: left;
}
.ui-controlgroup-horizontal .ui-controlgroup-controls button.ui-btn,
.ui-controlgroup-controls .ui-btn-icon-notext {
width: auto;
Expand All @@ -68,9 +82,16 @@ fieldset.ui-controlgroup {
.ui-controlgroup-horizontal .ui-controlgroup-controls .ui-btn {
border-right-width: 0;
}
.ui-rtl :not(.ui-ltr) .ui-controlgroup-horizontal .ui-controlgroup-controls .ui-btn {
border-right-width: 1px;
border-left-width: 0;
}
.ui-controlgroup-horizontal .ui-controlgroup-controls .ui-btn.ui-last-child {
border-right-width: 1px;
}
.ui-rtl :not(.ui-ltr) .ui-controlgroup-horizontal .ui-controlgroup-controls .ui-btn.ui-first-child {
border-left-width: 1px;
}
.ui-controlgroup-controls .ui-btn-corner-all,
.ui-controlgroup-controls .ui-btn.ui-corner-all {
-webkit-border-radius: 0;
Expand Down
197 changes: 183 additions & 14 deletions css/structure/jquery.mobile.core.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,6 +73,16 @@ div.ui-mobile-viewport {
visibility: hidden;
}

.ui-rtl {
direction: rtl;
text-align: right;
}

.ui-ltr {
direction: ltr;
text-align: left;
}

/* Non-js content hiding */
.ui-nojs {
position: absolute !important;
Expand Down Expand Up @@ -103,6 +113,10 @@ div.ui-mobile-viewport {
margin-left: -1.4375em;
margin-top: -1.4375em;
}
.ui-rtl .ui-load-default {
margin-left: 0;
margin-right: -1.4375em;
}
.ui-loader-verbose {
width: 12.5em;
filter: Alpha(Opacity=88);
Expand All @@ -113,6 +127,10 @@ div.ui-mobile-viewport {
margin-top: -2.6875em;
padding: .625em;
}
.ui-rtl .ui-loader-verbose {
margin-left: 0;
margin-right: -6.875em;
}
.ui-loader-default h1 {
font-size: 0;
width: 0;
Expand Down Expand Up @@ -143,6 +161,10 @@ div.ui-mobile-viewport {
padding: .9375em;
margin-left: -7.1875em;
}
.ui-rtl .ui-loader-textonly {
margin-left: 0;
margin-right: -7.1875em;
}
.ui-loader-textonly .ui-icon-loading {
display: none;
}
Expand Down Expand Up @@ -193,6 +215,10 @@ div.ui-mobile-viewport {
white-space: nowrap;
outline: 0 !important;
}
.ui-rtl .ui-header .ui-title,
.ui-rtl .ui-footer .ui-title {
text-overflow: clip;
}
.ui-footer .ui-title {
margin: 0 1em;
}
Expand Down Expand Up @@ -237,6 +263,9 @@ div.ui-mobile-viewport {
-ms-user-select: none;
user-select: none;
}
.ui-rtl .ui-btn {
text-overflow: clip;
}
.ui-btn-icon-notext,
.ui-header button.ui-btn.ui-btn-icon-notext,
.ui-footer button.ui-btn.ui-btn-icon-notext {
Expand Down Expand Up @@ -266,7 +295,9 @@ div.ui-mobile-viewport {

/* To ensure same top and left/right position when ui-btn-left/right are added to something other than buttons. */
.ui-header .ui-btn-left,
.ui-header .ui-btn-right {
.ui-header .ui-btn-right,
.ui-header .ui-btn-start,
.ui-header .ui-btn-end {
font-size: 12.5px;
}
.ui-mini.ui-btn-icon-notext,
Expand All @@ -281,12 +312,34 @@ div.ui-mobile-viewport {
vertical-align: middle;
margin-right: .625em;
}
.ui-btn-icon-left {
.ui-rtl .ui-btn-inline {
margin-right: 0;
margin-left: .625em;
}
.ui-btn-icon-left,
.ui-btn-icon-start {
padding-left: 2.5em;
}
.ui-btn-icon-right {
.ui-rtl .ui-btn-icon-start {
padding-right: 2.5em;
padding-left: 1em;
}
.ui-rtl .ui-ltr .ui-btn-icon-start {
padding-left: 2.5em;
padding-right: 1em;
}
.ui-btn-icon-right,
.ui-btn-icon-end {
padding-right: 2.5em;
}
.ui-rtl .ui-btn-icon-end {
padding-left: 2.5em;
padding-right: 1em;
}
.ui-rtl .ui-ltr .ui-btn-icon-end {
padding-right: 2.5em;
padding-left: 1em;
}
.ui-btn-icon-top {
padding-top: 2.5em;
}
Expand All @@ -302,6 +355,8 @@ div.ui-mobile-viewport {
}
.ui-btn-icon-left:after,
.ui-btn-icon-right:after,
.ui-btn-icon-start:after,
.ui-btn-icon-end:after,
.ui-btn-icon-top:after,
.ui-btn-icon-bottom:after,
.ui-btn-icon-notext:after {
Expand All @@ -313,34 +368,106 @@ div.ui-mobile-viewport {
}
.ui-btn-icon-notext:after,
.ui-btn-icon-left:after,
.ui-btn-icon-right:after {
.ui-btn-icon-right:after,
.ui-btn-icon-start:after,
.ui-btn-icon-end:after {
top: 50%;
margin-top: -11px;
}
.ui-btn-icon-left:after {
.ui-btn-icon-left:after,
.ui-btn-icon-start:after {
left: .5625em;
}
.ui-btn-icon-right:after {
.ui-rtl .ui-btn-icon-start:after {
right: .5625em;
left: auto;
}
.ui-rtl .ui-ltr .ui-btn-icon-start:after {
left: .5625em;
right: auto;
}
.ui-btn-icon-right:after,
.ui-btn-icon-end:after {
right: .5625em;
}
.ui-rtl .ui-btn-icon-end:after {
left: .5625em;
right: auto;
}
.ui-rtl .ui-ltr .ui-btn-icon-end:after {
right: .5625em;
left: auto;
}
.ui-mini.ui-btn-icon-left:after,
.ui-mini .ui-btn-icon-left:after,
.ui-header .ui-btn-icon-left:after,
.ui-footer .ui-btn-icon-left:after {
.ui-footer .ui-btn-icon-left:after,
.ui-mini.ui-btn-icon-start:after,
.ui-mini .ui-btn-icon-start:after,
.ui-header .ui-btn-icon-start:after,
.ui-footer .ui-btn-icon-start:after {
left: .37em;
}
.ui-rtl .ui-mini.ui-btn-icon-start:after,
.ui-rtl .ui-mini .ui-btn-icon-start:after,
.ui-rtl .ui-header .ui-btn-icon-start:after,
.ui-rtl .ui-footer .ui-btn-icon-start:after {
right: .37em;
left: auto;
}
.ui-rtl .ui-ltr .ui-mini.ui-btn-icon-start:after,
.ui-rtl .ui-ltr .ui-mini .ui-btn-icon-start:after,
.ui-rtl .ui-ltr .ui-header .ui-btn-icon-start:after,
.ui-rtl .ui-ltr .ui-footer .ui-btn-icon-start:after {
left: .37em;
right: auto;
}
.ui-mini.ui-btn-icon-right:after,
.ui-mini .ui-btn-icon-right:after,
.ui-header .ui-btn-icon-right:after,
.ui-footer .ui-btn-icon-right:after {
.ui-footer .ui-btn-icon-right:after,
.ui-mini.ui-btn-icon-end:after,
.ui-mini .ui-btn-icon-end:after,
.ui-header .ui-btn-icon-end:after,
.ui-footer .ui-btn-icon-end:after {
right: .37em;
}
.ui-rtl .ui-mini.ui-btn-icon-end:after,
.ui-rtl .ui-mini .ui-btn-icon-end:after,
.ui-rtl .ui-header .ui-btn-icon-end:after,
.ui-rtl .ui-footer .ui-btn-icon-end:after {
left: .37em;
right: auto;
}
.ui-rtl .ui-ltr .ui-mini.ui-btn-icon-end:after,
.ui-rtl .ui-ltr .ui-mini .ui-btn-icon-end:after,
.ui-rtl .ui-ltr .ui-header .ui-btn-icon-end:after,
.ui-rtl .ui-ltr .ui-footer .ui-btn-icon-end:after {
right: .37em;
left: auto;
}
.ui-btn-icon-notext:after,
.ui-btn-icon-top:after,
.ui-btn-icon-bottom:after {
left: 50%;
margin-left: -11px;
}
.ui-rtl .ui-btn-icon-notext:after,
.ui-rtl .ui-btn-icon-top:after,
.ui-rtl .ui-btn-icon-bottom:after {
left: 0;
right: 50%;
margin-left: 0;
margin-right: -11px;
}
.ui-rtl .ui-ltr .ui-btn-icon-notext:after,
.ui-rtl .ui-ltr .ui-btn-icon-top:after,
.ui-rtl .ui-ltr .ui-btn-icon-bottom:after {
left: 50%;
right: 0;
margin-left: -11px;
margin-right: 0;
}
.ui-btn-icon-top:after {
top: .5625em;
}
Expand All @@ -352,28 +479,70 @@ div.ui-mobile-viewport {
.ui-header .ui-btn-left,
.ui-header .ui-btn-right,
.ui-btn-left > [class*="ui-"],
.ui-btn-right > [class*="ui-"] {
.ui-btn-right > [class*="ui-"],
.ui-header .ui-btn-start,
.ui-header .ui-btn-end,
.ui-btn-start > [class*="ui-"],
.ui-btn-end > [class*="ui-"]{
margin: 0;
}
.ui-btn-left,
.ui-btn-right {
.ui-btn-right,
.ui-btn-start,
.ui-btn-end {
position: absolute;
top: .24em;
}
.ui-btn-left {
.ui-btn-left,
.ui-btn-start {
left: .4em;
}
.ui-btn-right {
.ui-rtl .ui-btn-start {
right: .4em;
left: auto;
}
.ui-rtl .ui-ltr .ui-btn-start {
left: .4em;
right: auto;
}
.ui-btn-right,
.ui-btn-end {
right: .4em;
}
.ui-btn-icon-notext.ui-btn-left {
.ui-rtl .ui-btn-end {
left: .4em;
right: auto;
}
.ui-rtl .ui-ltr .ui-btn-end {
right: .4em;
left: auto;
}
.ui-btn-icon-notext.ui-btn-left,
.ui-btn-icon-notext.ui-btn-start {
top: .3125em;
left: .3125em;
}
.ui-btn-icon-notext.ui-btn-right {
.ui-rtl .ui-btn-icon-notext.ui-btn-start {
right: .3125em;
left: auto;
}
.ui-rtl .ui-ltr .ui-btn-icon-notext.ui-btn-start {
left: .3125em;
right: auto;
}
.ui-btn-icon-notext.ui-btn-right,
.ui-btn-icon-notext.ui-btn-end {
top: .3125em;
right: .3125em;
}
.ui-rtl .ui-btn-icon-notext.ui-btn-end {
left: .3125em;
right: auto;
}
.ui-rtl .ui-ltr .ui-btn-icon-notext.ui-btn-end {
right: .3125em;
left: auto;
}

/* Button elements */
button.ui-btn,
Expand Down
8 changes: 6 additions & 2 deletions css/structure/jquery.mobile.fixedToolbar.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,11 +16,15 @@
padding-top: 0;
}
.ui-header-fixed .ui-btn-left,
.ui-header-fixed .ui-btn-right {
.ui-header-fixed .ui-btn-right,
.ui-header-fixed .ui-btn-start,
.ui-header-fixed .ui-btn-end {
margin-top: 1px;
}
.ui-header-fixed.ui-fixed-hidden .ui-btn-left,
.ui-header-fixed.ui-fixed-hidden .ui-btn-right {
.ui-header-fixed.ui-fixed-hidden .ui-btn-right,
.ui-header-fixed.ui-fixed-hidden .ui-btn-start,
.ui-header-fixed.ui-fixed-hidden .ui-btn-end {
margin-top: 0;
}
.ui-footer-fixed {
Expand Down
Loading

0 comments on commit 72d7757

Please sign in to comment.