Merge pull request #13416 from edx/andya/fix-discussion-rtl

Fix RTL issues with discussion sass

lms/static/sass/course/courseware/_courseware.scss

@@ -31,10 +31,10 @@ html.video-fullscreen {
     @extend %t-copy-sub2;
     @include float(right);
     @include margin-left($baseline/2);
+    @include text-align(right);
     padding: ($baseline/4) ($baseline/2);
     border-radius: ($baseline/4);
     background-color: $light-gray1;
-    text-align: right;
     text-transform: uppercase;
     color: $staff-color;
 
@@ -48,11 +48,11 @@ html.video-fullscreen {
 .content-wrapper {
 
   .container-footer {
+    @include text-align(right);
     margin: 0 auto;
     max-width: grid-width(12);
     min-width: 760px;
     color: $gray;
-    text-align: $bi-app-right;
   }
 }
 
@@ -188,12 +188,12 @@ html.video-fullscreen {
         }
       }
       .proctored-exam-select-code {
-        margin-left: 30px;
+        @include margin-left(30px);
       }
 
       .exam-action-button {
         @extend %t-weight4;
-        margin-right: $baseline;
+        @include margin-right($baseline);
         background-image: none;
         box-shadow: none;
         text-shadow: none;
@@ -293,8 +293,8 @@ html.video-fullscreen {
           }
         }
         > .fa {
+          @include right(35px);
           position: absolute;
-          right: 35px;
           top: 50%;
           font-size: 30px;
           margin-top: -15px;
@@ -365,11 +365,11 @@ html.video-fullscreen {
 
       }
       a.contest-review {
-        float: right;
+        @include float(right);
+        @include text-align(right);
         font-size: 12px;
         margin: 0;
         width: 20%;
-        text-align: right;
       }
       p {
         margin-bottom: ($baseline/20);
@@ -455,11 +455,11 @@ html.video-fullscreen {
           }
 
           h2 {
-            float: right;
+            @include float(right);
+            @include text-align(right);
+            @include border-right(0);
+            @include padding-right(0);
             margin: 12px 0 0;
-            text-align: right;
-            padding-right: 0;
-            border-right: 0;
             font-size: em(14, 24);
           }
         }
@@ -476,12 +476,12 @@ html.video-fullscreen {
         }
 
         ul {
+          @include padding-left(1em);
           list-style: disc outside none;
-          padding-left: 1em;
 
           &.discussion-errors {
+            @include padding-left(2em);
             list-style: none;
-            padding-left: 2em;
           }
 
           &.admin-actions {
@@ -490,7 +490,7 @@ html.video-fullscreen {
         }
 
         nav.sequence-nav ul li.prev {
-          left: 4px;
+          @include left(4px);
         }
 
         nav.sequence-bottom {
@@ -531,14 +531,14 @@ html.video-fullscreen {
         list-style: none;
 
         li {
+          @include float(left);
+          @include margin-right(flex-gutter(9));
           width: flex-grid(3, 9);
-          float: left;
-          margin-right: flex-gutter(9);
           margin-bottom: lh();
           line-height: lh();
 
           &:nth-child(3n) {
-            margin-right: 0;
+            @include margin-right(0);
           }
 
           &:nth-child(3n+1) {

lms/static/sass/discussion/_discussion.scss

@@ -123,14 +123,18 @@ body.discussion {
   }
 
   .wmd-spacer1 {
-    @include left(50px);
+    // Note: the WMD toolbar does not support RTL so this is hard-coded to the left
+    left: 50px;
   }
+
   .wmd-spacer2 {
-    @include left(175px);
+    // Note: the WMD toolbar does not support RTL so this is hard-coded to the left
+    left: 175px;
   }
 
   .wmd-spacer3 {
-    @include left(300px);
+    // Note: the WMD toolbar does not support RTL so this is hard-coded to the left
+    left: 300px;
   }
 
   .wmd-prompt-background {
@@ -404,9 +408,10 @@ section.discussion-pagination {
 
     ol {
       li {
+        @include padding-right($baseline/2);
         list-style: none;
         display: inline-block;
-        padding-right: 0.5em;
+
         &.current-page span {
           display: inline-block;
           height: 35px;
@@ -444,9 +449,9 @@ section.discussion-pagination {
   }
 
   .load-response-button {
+    @include text-align(left);
     position: relative;
     margin: ($baseline/2) 0;
     width: 100%;
-    text-align: left;
   }
 }

lms/static/sass/discussion/_mixins.scss

@@ -27,10 +27,10 @@
 }
 
 @mixin discussion-wmd-input {
+  @include border-radius($forum-border-radius, $forum-border-radius, 0, 0);
   box-sizing: border-box;
   margin-top: 0;
   border: 1px solid $forum-color-border;
-  border-radius: $forum-border-radius $forum-border-radius 0 0;
   padding: ($baseline/2);
   width: 100%;
   height: 125px;
@@ -42,8 +42,8 @@
 }
 
 @mixin discussion-wmd-preview-container {
-  box-sizing: border-box;
   @include border-radius(0, 0, $forum-border-radius, $forum-border-radius);
+  box-sizing: border-box;
   border: 1px solid $gray-l1;
   border-top: none;
   width: 100%;

lms/static/sass/discussion/elements/_actions.scss

@@ -28,7 +28,7 @@
           }
 
           .action-label {
-            padding-right: 0px;
+            @include padding-right(0);
           }
 
           &:hover {
@@ -53,10 +53,10 @@
   .actions-dropdown {
     @extend %ui-no-list;
     @extend %ui-depth1;
+    @include right(0);
     display: none;
     position: absolute;
     top: 100%;
-    right: 0;
     pointer-events: none;
     min-width: ($baseline*6.5);
 
@@ -79,8 +79,8 @@
       // ui triangle/nub
       &:after,
       &:before {
+        @include right(6px);
         bottom: 100%;
-        right: 6px;
         border: solid transparent;
         content: " ";
         height: 0;
@@ -90,10 +90,10 @@
       }
 
       &:after {
+        @include margin-right(1px);
         border-color: $transparent;
         border-bottom-color: $white;
         border-width: 6px;
-        @include margin-right(1px);
       }
 
       &:before {
@@ -153,7 +153,7 @@
       }
 
       .action-icon {
-        border-radius: 0 $forum-border-radius $forum-border-radius 0;
+        @include border-radius(0, $forum-border-radius, $forum-border-radius, 0);
       }
     }
 

lms/static/sass/discussion/elements/_editor.scss

@@ -52,9 +52,9 @@
   }
 
   .wmd-input {
+    @include border-radius($forum-border-radius, $forum-border-radius, 0, 0);
     width: 100%;
     height: 150px;
-    border-radius: $forum-border-radius $forum-border-radius 0 0;
     font-style: normal;
     font-size: $forum-base-font-size;
     font-family: Monaco, 'Lucida Console', monospace;
@@ -111,13 +111,17 @@
   }
 
   .wmd-spacer1 {
+    // Note: the WMD toolbar does not support RTL so this is hard-coded to the left
     left: 50px;
   }
+
   .wmd-spacer2 {
+    // Note: the WMD toolbar does not support RTL so this is hard-coded to the left
     left: 175px;
   }
 
   .wmd-spacer3 {
+    // Note: the WMD toolbar does not support RTL so this is hard-coded to the left
     left: 300px;
   }
 

lms/static/sass/discussion/elements/_navigation.scss

@@ -44,11 +44,11 @@
 }
 
 .forum-nav-browse-filter .icon {
+    @include right($baseline/4 + 1px + $baseline / 4); // Wrapper padding + border + input padding
     font-size: $forum-small-font-size;
     position: absolute;
     margin-top: -6px;
     top: 50%;
-    right: ($baseline/4 + 1px + $baseline / 4); // Wrapper padding + border + input padding
 }
 
 .forum-nav-browse-filter-input {
@@ -56,6 +56,7 @@
 }
 
 .forum-nav-browse-title {
+    @include text-align(left);
     display: block;
     width: 100%;
     border: 0;
@@ -66,7 +67,6 @@
     box-shadow: none;
     background-image: none;
     color: $link-color;
-    text-align: left;
 
     &:hover,
     &:focus {
@@ -95,7 +95,7 @@
     li {
 
         .forum-nav-browse-title {
-            padding-left: $baseline;
+            @include padding-left($baseline);
         }
     }
 }
@@ -105,13 +105,13 @@
 // -------------------
 .forum-nav-refine-bar {
     @include clearfix();
+    @include border-radius($forum-border-radius, $forum-border-radius, 0, 0);
+    @include text-align(right);
     font-size: $forum-small-font-size;
     border-bottom: 1px solid $forum-color-border;
     background-color: $gray-l5;
     padding: ($baseline/4) ($baseline/2);
     color: $black;
-    text-align: right;
-    @include border-radius($forum-border-radius, $forum-border-radius, 0, 0);
 }
 
 .forum-nav-filter-main {
@@ -150,8 +150,8 @@
 // Thread list
 // -----------
 .forum-nav-thread-list {
+    @include padding-left(0);
     margin: 0;
-    padding-left: 0;
     overflow-y: scroll;
     list-style: none;
     border-radius: 0 0 3px 3px;
@@ -202,7 +202,7 @@
                 color: $base-font-color;
 
                 &:after {
-                    border-right-color: $forum-color-border;
+                    @include border-right-color($forum-color-border);
                 }
             }
 
@@ -262,9 +262,9 @@
 }
 
 .forum-nav-thread-title {
+    @include margin-left(0);
     font-size: $forum-base-font-size;
     display: block;
-    margin-left: 0;
 }
 
 %forum-nav-thread-wrapper-2-content {

lms/static/sass/discussion/utilities/_developer.scss

@@ -62,8 +62,8 @@ body.discussion {
 
     // alert controls
     .search-alert-controls {
+      @include text-align(right);
       width: 28%;
-      text-align: right;
 
       .control {
         @include transition(none);

lms/static/sass/discussion/utilities/_shame.scss

@@ -47,7 +47,7 @@
 }
 
 .forum-nav-browse-menu {
-  padding-left: 0;
+  @include padding-left(0);
 }
 
 // --------------------------------
@@ -102,7 +102,7 @@ li[class*=forum-nav-thread-label-] {
 
   // Override global ul rules
   .topic-menu {
-    padding-left: 0;
+    @include padding-left(0);
   }
 
   .topic-menu, .topic-submenu {
@@ -129,7 +129,6 @@ li[class*=forum-nav-thread-label-] {
   // Override courseware
   .post-actions-list, .response-actions-list, .comment-actions-list {
     @extend %t-copy-sub2;
-    padding-left: 0 !important;
   }
 
   // Override global span

lms/static/sass/discussion/views/_create-edit-post.scss

@@ -204,11 +204,11 @@
   position: relative;
 
   .topic-menu-wrapper {
-    box-sizing: border-box;
     @extend %ui-depth4;
+    @include left(0);
+    box-sizing: border-box;
     position: absolute;
     top: 40px;
-    left: 0;
     width: 100%;
     background: $forum-color-background;
     box-shadow: 0 2px 1px $shadow;
@@ -231,15 +231,15 @@
   }
 
   .topic-menu {
+    @include margin-left($baseline/2);
     overflow-y: scroll;
     max-height: 400px;
     list-style: none;
-    margin-left: ($baseline/2);
   }
 
   .topic-submenu {
+    @include margin-left($baseline);
     list-style: none;
-    margin-left: $baseline;
   }
 
   .topic-title {

lms/static/sass/discussion/views/_home.scss

@@ -3,7 +3,7 @@
 
 // home - layout
 .container .view-discussion-home {
-  padding-left: $baseline;
+  @include padding-left($baseline);
 
   section {
     border-bottom: 1px solid $forum-color-border;

lms/static/sass/discussion/views/_response.scss

@@ -96,9 +96,9 @@
   // CASE: banner - staff response
   .staff-banner {
     @include border-radius($forum-border-radius, $forum-border-radius, 0, 0);
+    @include left(0);
     position: absolute;
     top: 0;
-    left: 0;
     width: 100%;
     height: 14px;
     padding: 1px ($baseline/4);
@@ -111,14 +111,14 @@
 
   // CASE: banner - community TA response
   .community-ta-banner{
+    @include border-radius($forum-border-radius, $forum-border-radius, 0, 0);
+    @include left(0);
     position: absolute;
     top: 0;
-    left: 0;
     width: 100%;
     height: 14px;
     padding: 1px ($baseline/4);
     box-sizing: border-box;
-    border-radius: $forum-border-radius $forum-border-radius 0 0;
     background: $forum-color-community-ta;
     font-size: $forum-small-font-size;
     font-weight: 700;
@@ -138,7 +138,7 @@
 // +comments styling
 .container .discussion-body .comments {
   @extend %ui-no-list;
-  border-radius: 0 0 $forum-border-radius $forum-border-radius;
+  @include border-radius(0, 0, $forum-border-radius, $forum-border-radius);
   background: $gray-l6;
   box-shadow: 0 1px 3px -1px $shadow inset;
 

lms/static/sass/discussion/views/_search.scss

 .forum-search {
+    @include margin-left($baseline);
     display: inline-block;
-    margin-left: $baseline;
 
     .search-input {
         width: input-width(short);