diff --git a/common/lib/xmodule/xmodule/css/capa/display.scss b/common/lib/xmodule/xmodule/css/capa/display.scss index 4d2f141bd3..1ec4def880 100644 --- a/common/lib/xmodule/xmodule/css/capa/display.scss +++ b/common/lib/xmodule/xmodule/css/capa/display.scss @@ -61,7 +61,7 @@ div.problem { width: 100px; label { - float: left; + float: flip(left, right); clear: both; margin-bottom: 5px; @@ -633,7 +633,8 @@ div.problem { // padding: 8px 12px; // margin-top: 10px; display: inline-block; - margin: 8px 0 0 $baseline/2; + margin-top: 8px; + #{$margin-left}: $baseline/2; color: #666; font-style: italic; -webkit-font-smoothing: antialiased; diff --git a/common/lib/xmodule/xmodule/css/sequence/display.scss b/common/lib/xmodule/xmodule/css/sequence/display.scss index 537461c264..47d7b6cddb 100644 --- a/common/lib/xmodule/xmodule/css/sequence/display.scss +++ b/common/lib/xmodule/xmodule/css/sequence/display.scss @@ -293,23 +293,28 @@ nav.sequence-nav { } } + $prev-icon: url('../images/sequence-nav/previous-icon.png'); + $next-icon: url('../images/sequence-nav/next-icon.png'); + &.prev { - left: -10px; - border-radius: 35px 0 0 35px; + left: flip(-10px, auto); + right: flip(auto, -10px); + border-radius: flip(35px 0 0 35px, 0 35px 35px 0); a { - background-image: url('../images/sequence-nav/previous-icon.png'); + background-image: flip($prev-icon, $next-icon); background-position: center 15px; } } &.next { - right: -10px; - border-radius: 0 35px 35px 0; + left: flip(auto, -10px); + right: flip(-10px, auto); + border-radius: flip(0 35px 35px 0, 35px 0 0 35px); a { - margin-left: 30px; - background-image: url('../images/sequence-nav/next-icon.png'); + #{$margin-left}: 30px; + background-image: flip($next-icon, $prev-icon); background-position: center 15px; } } @@ -334,7 +339,7 @@ nav.sequence-bottom { display: inline-block; li { - float: left; + float: flip(left, right); width: 50px; height: 44px; border: 1px solid #ccc; @@ -368,21 +373,24 @@ nav.sequence-bottom { */ } } + $prev-icon: url('../images/sequence-nav/previous-icon.png'); + $next-icon: url('../images/sequence-nav/next-icon.png'); + &.prev { - border-radius: 35px 0 0 35px; + border-radius: flip(35px 0 0 35px, 0 35px 35px 0); a { - background-image: url('../images/sequence-nav/previous-icon.png'); + background-image: flip($prev-icon, $next-icon); background-position: center 15px; } } &.next { - border-radius: 0 35px 35px 0; - border-left: none; + border-radius: flip(0 35px 35px 0, 35px 0 0 35px); + #{$border-left}: none; a { - background-image: url('../images/sequence-nav/next-icon.png'); + background-image: flip($next-icon, $prev-icon); background-position: center 15px; } } diff --git a/lms/static/sass/base/_mixins.scss b/lms/static/sass/base/_mixins.scss index 42af15e675..125c1b3d36 100644 --- a/lms/static/sass/base/_mixins.scss +++ b/lms/static/sass/base/_mixins.scss @@ -81,6 +81,10 @@ $right: right; // ==================== +// Cross-browsers transform +@mixin transform($transform-functions) { + @include prefixer(transform, $transform-functions, webkit moz ms o spec); +} // extends - UI - used for page/view-level wrappers (for centering/grids) %ui-wrapper { diff --git a/lms/static/sass/course/courseware/_courseware.scss b/lms/static/sass/course/courseware/_courseware.scss index 03b6d743bf..ead47c5c4e 100644 --- a/lms/static/sass/course/courseware/_courseware.scss +++ b/lms/static/sass/course/courseware/_courseware.scss @@ -23,7 +23,7 @@ html.video-fullscreen{ .instructor-info-action { @extend %t-copy-sub2; - float: right; + float: flip(right, left); margin-left: ($baseline/2); padding: ($baseline/4) ($baseline/2); border-radius: ($baseline/4); diff --git a/lms/static/sass/course/courseware/_sidebar.scss b/lms/static/sass/course/courseware/_sidebar.scss index 716b084d90..b68c7146d0 100644 --- a/lms/static/sass/course/courseware/_sidebar.scss +++ b/lms/static/sass/course/courseware/_sidebar.scss @@ -47,7 +47,7 @@ a { border-radius: 0; box-shadow: none; - padding-left: 19px; + #{$padding-left}: 19px; color: $link-color; } @@ -61,9 +61,14 @@ } span.ui-icon { - left: 0; + left: flip(0, auto); + right: flip(0, auto); background-image: url("/static/images/ui-icons_222222_256x240.png"); opacity: 0.3; + + &.ui-icon-triangle-1-e { // jQuery UI east arrow + background-position: flip(-32px -16px, -96px -16px); // flip(jQuery UI east arrow, jQuery UI west arrow) + } } } } diff --git a/lms/static/sass/course/instructor/_instructor_2.scss b/lms/static/sass/course/instructor/_instructor_2.scss index 9bc7d3f227..434ca846a5 100644 --- a/lms/static/sass/course/instructor/_instructor_2.scss +++ b/lms/static/sass/course/instructor/_instructor_2.scss @@ -832,7 +832,7 @@ section.instructor-dashboard-content-2 { input[type="button"].add { @include idashbutton($blue); position: absolute; - right: $baseline; + #{$right}: $baseline; } } diff --git a/lms/static/sass/discussion/_discussion.scss b/lms/static/sass/discussion/_discussion.scss index db9cd944f5..42b012ef75 100644 --- a/lms/static/sass/discussion/_discussion.scss +++ b/lms/static/sass/discussion/_discussion.scss @@ -11,7 +11,8 @@ body.discussion { } .new-post-icon { - margin: 8px 7px 0 0; + margin-top: 8px; + #{$margin-right}: 7px; font-size: 16px; vertical-align: middle; color: $white; @@ -241,7 +242,7 @@ body.discussion { } .discussion-column { - float: right; + float: flip(right, left); @include box-sizing(border-box); width: 68%; max-width: 800px; @@ -368,7 +369,7 @@ body.discussion { .notification-checkbox { display: inline-block; padding: $baseline/4 0 $baseline/2 0; - margin-right: $baseline/2; + #{$margin-right}: $baseline/2; border-radius: 5px; border: 1px solid gray; @@ -376,7 +377,7 @@ body.discussion { display: inline-block; text-align: center; vertical-align: middle; - margin-left: $baseline/2; + #{$margin-left}: $baseline/2; } .icon { @@ -531,6 +532,13 @@ body.discussion { border-radius: 3px 3px 0 0; padding: $baseline; background-color: $white; + + .response-body { + ol, ul { // Fix up the RTL-only _reset.scss, but only in specific places + #{$padding-left}: 40px; + #{$padding-right}: 0; + } + } } .posted-by { font-weight: 700; @@ -549,11 +557,15 @@ body.discussion { padding: 0 18px; width: 100%; box-shadow: 0 1px 1px $shadow-l1; - text-align: left; + text-align: $left; font-size: 13px; + .icon-reply:before { + content: flip("\f112", "\f064"); // RTL: Make it like fa-mail-forward + } + span.add-response-btn-text { - padding-left: ($baseline/5); + #{$padding-left}: ($baseline/5); } } } @@ -638,7 +650,7 @@ body.discussion { .discussion-submit-post { @include blue-button; - float: left; + float: $left; } .wmd-button { @@ -674,7 +686,11 @@ body.discussion { padding-left: ($baseline*1.5); width: 100%; box-shadow: 0 1px 1px $shadow-l1; - text-align: left; + text-align: $left; + + .icon-reply:before { + content: flip("\f112", "\f064"); // RTL: Make it like fa-mail-forward + } &:hover, &:focus { @include linear-gradient(top, $white 35%, #ddd); @@ -895,9 +911,10 @@ body.discussion { float: left; width: 16px; height: 17px; - margin: 8px 7px 0 0; + margin-top: 8px; + #{$margin-right}: 7px; font-size: 16px; - padding-right: $baseline/2; + #{$padding-right}: $baseline/2; vertical-align: middle; color: $white; } diff --git a/lms/static/sass/discussion/_mixins.scss b/lms/static/sass/discussion/_mixins.scss index 0e463cb71f..f4d12f93e8 100644 --- a/lms/static/sass/discussion/_mixins.scss +++ b/lms/static/sass/discussion/_mixins.scss @@ -89,7 +89,7 @@ @mixin discussion-wmd-preview-label { padding-top: 3px; - padding-left: 5px; + #{$padding-left}: 5px; width: 100%; color: #bbb; text-transform: uppercase; @@ -100,6 +100,11 @@ padding: 10px 20px; width: 100%; color: #333; + + ol, ul { // Fix up the RTL-only _reset.scss, but only in specific places + #{$padding-left}: 40px; + #{$padding-right}: 0; + } } @-webkit-keyframes fadeIn { @@ -130,11 +135,11 @@ color: $color; .icon { - margin-right: ($baseline/5); + #{$margin-right}: ($baseline/5); } &:last-child { - margin-right: 0; + #{$margin-right}: 0; } &.is-hidden { diff --git a/lms/static/sass/discussion/elements/_actions.scss b/lms/static/sass/discussion/elements/_actions.scss index 76afecdfe2..fa5e9e2dfe 100644 --- a/lms/static/sass/discussion/elements/_actions.scss +++ b/lms/static/sass/discussion/elements/_actions.scss @@ -8,7 +8,7 @@ .response-actions-list, .comment-actions-list { @extend %ui-no-list; - text-align: right; + text-align: $right; .actions-item { @include box-sizing(border-box); @@ -58,7 +58,7 @@ &:after, &:before { bottom: 100%; - right: 3px; + #{$right}: 3px; border: solid transparent; content: " "; height: 0; @@ -71,7 +71,7 @@ border-color: $transparent; border-bottom-color: $white; border-width: 6px; - margin-right: 1px; + #{$margin-right}: 1px; } &:before { @@ -254,7 +254,7 @@ display: block; padding: ($baseline/10) 0; white-space: nowrap; - text-align: right; + text-align: $right; color: $gray-l1; &:hover, &:focus { diff --git a/lms/static/sass/discussion/elements/_navigation.scss b/lms/static/sass/discussion/elements/_navigation.scss index 1eb002911d..d983d26acb 100644 --- a/lms/static/sass/discussion/elements/_navigation.scss +++ b/lms/static/sass/discussion/elements/_navigation.scss @@ -3,7 +3,7 @@ .forum-nav { @include box-sizing(border-box); - float: left; + float: flip(left, right); position: relative; width: 31%; border: 1px solid #aaa; @@ -34,7 +34,7 @@ .icon { @include font-size(14); - margin-right: ($baseline/4); + #{$margin-right}: ($baseline/4); } } @@ -43,7 +43,7 @@ } .forum-nav-browse-drop-arrow { - margin-left: ($baseline/4); + #{$margin-left}: ($baseline/4); } .forum-nav-search { @@ -60,7 +60,7 @@ position: absolute; margin-top: -6px; top: 50%; - right: ($baseline/4 + 1px + $baseline / 4); // Wrapper padding + border + input padding + #{$right}: ($baseline/4 + 1px + $baseline / 4); // Wrapper padding + border + input padding } .forum-nav-search-input { @@ -115,7 +115,7 @@ } .forum-nav-browse-title .icon { - margin-right: ($baseline/2); + #{$margin-right}: ($baseline/2); } // ------------------- @@ -135,14 +135,14 @@ @include box-sizing(border-box); display: inline-block; width: 50%; - text-align: left; + text-align: $left; } .forum-nav-filter-cohort, .forum-nav-sort { @include box-sizing(border-box); display: inline-block; width: 50%; - text-align: right; + text-align: $right; } %forum-nav-select { @@ -200,6 +200,10 @@ .icon { @include font-size(14); + + &:before { + @include transform(scale(flip(1, -1), 1)); // RTL for font awesome question mark + } } .icon-comments { @@ -223,7 +227,7 @@ .forum-nav-thread-wrapper-2 { @extend %forum-nav-thread-wrapper; width: 13%; - text-align: right; + text-align: $right; } .forum-nav-thread-title { @@ -251,7 +255,7 @@ @extend %forum-nav-thread-wrapper-2-content; @extend %t-weight4; position: relative; - margin-left: ($baseline/4); + #{$margin-left}: ($baseline/4); margin-bottom: ($baseline/4); // Because tail is position: absolute border-radius: 2px; padding: ($baseline/10) ($baseline/5); @@ -264,12 +268,13 @@ display: block; position: absolute; bottom: (-$baseline/4); - right: ($baseline/4); + #{$right}: ($baseline/4); width: 0; height: 0; border-style: solid; - border-width: 0 ($baseline/4) ($baseline/4) 0; - border-color: transparent $gray-l3 transparent transparent; + + border-width: flip(0 ($baseline/4) ($baseline/4) 0, ($baseline/4) ($baseline/4) 0 0); + border-color: flip(transparent $gray-l3 transparent transparent, $gray-l3 transparent transparent transparent); } &.is-unread { diff --git a/lms/static/sass/discussion/views/_thread.scss b/lms/static/sass/discussion/views/_thread.scss index 4106cf1378..3cd9cf009e 100644 --- a/lms/static/sass/discussion/views/_thread.scss +++ b/lms/static/sass/discussion/views/_thread.scss @@ -17,7 +17,7 @@ body.discussion, .discussion-module { .post-header-actions { display: inline-block; - float: right; + float: $right; vertical-align: middle; width: flex-grid(3,12); } @@ -44,7 +44,7 @@ body.discussion, .discussion-module { .response-header-actions { width: flex-grid(3,12); - float: right; + float: $right; } } diff --git a/lms/static/sass/multicourse/_account.scss b/lms/static/sass/multicourse/_account.scss index 39aa9cba39..6ce02ffcd4 100644 --- a/lms/static/sass/multicourse/_account.scss +++ b/lms/static/sass/multicourse/_account.scss @@ -125,14 +125,14 @@ @extend %heading-2; margin-bottom: $baseline; padding-bottom: $baseline; - text-align: left; + text-align: flip(left, right); } // CASE: marketing/imageery-based headings .title { position: absolute; top: ($baseline*2.5); - left:($baseline*1.5); + #{$left}:($baseline*1.5); .title-super, .title-sub { @extend %t-weight1; @@ -149,7 +149,7 @@ .title-sub { @include font-size(20); - margin-left: ($baseline*2); + #{$margin-left}: ($baseline*2); text-transform: lowercase; color: $header-graphic-sub-color; } @@ -197,14 +197,14 @@ } .content { - margin-right: ($baseline*2); + #{$margin-right}: ($baseline*2); width: 600px; - float: left; + float: flip(left, right); } aside { width: 280px; - float: left; + float: flip(left, right); p, ol, ul { font-size: 14px !important; @@ -274,9 +274,10 @@ .field { display: block; - float: left; + float: flip(left, right); border-bottom: none; - margin: 0 ($baseline*1.5) 0 0; + margin: 0; + #{$margin-right}: ($baseline*1.5); padding-bottom: 0; input, textarea { @@ -336,7 +337,7 @@ .tip { position: absolute; top: 0; - right: 0; + #{$right}: 0; } } @@ -378,7 +379,7 @@ input[type="checkbox"] { display: inline-block; width: auto; - margin-right: ($baseline/4); + #{$margin-right}: ($baseline/4); } label { @@ -702,7 +703,7 @@ h2 { @extend %heading-2; - text-align: left; + text-align: flip(left, right); } } diff --git a/lms/static/sass/multicourse/_error-pages.scss b/lms/static/sass/multicourse/_error-pages.scss index 629a33891f..a860be8eac 100644 --- a/lms/static/sass/multicourse/_error-pages.scss +++ b/lms/static/sass/multicourse/_error-pages.scss @@ -1,6 +1,6 @@ section.outside-app { @extend .container; - text-align: left; + text-align: flip(left, right); padding: 80px 0; h1 {