LMS RTL fixes

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;

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;
         }
       }

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 {

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);

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)
+          }
         }
       }
     }

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;
         }
       }
 

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;
   }

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 {

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 {

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 {

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;
     }
   }
 

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);
       }
     }
 

lms/static/sass/multicourse/_error-pages.scss

 section.outside-app {
   @extend .container;
-  text-align: left;
+  text-align: flip(left, right);
   padding: 80px 0;
 
   h1 {