Merge pull request #2682 from edx/frances/experiments/rtl

RTL platform support

.gitignore

@@ -71,13 +71,19 @@ lms/static/css/
 lms/static/sass/*.css
 lms/static/sass/*.css.map
 lms/static/sass/application.scss
+lms/static/sass/application-rtl.scss
 lms/static/sass/application-extend1.scss
+lms/static/sass/application-extend1-rtl.scss
 lms/static/sass/application-extend2.scss
+lms/static/sass/application-extend2-rtl.scss
 lms/static/sass/course.scss
+lms/static/sass/course-rtl.scss
 cms/static/css/
 cms/static/sass/*.css
 cms/static/sass/*.css.map
 
+
+
 ### Logging artifacts
 log/
 logs

cms/envs/common.py

@@ -307,6 +307,7 @@ STATICFILES_DIRS = [
 # Locale/Internationalization
 TIME_ZONE = 'America/New_York'  # http://en.wikipedia.org/wiki/List_of_tz_zones_by_name
 LANGUAGE_CODE = 'en'  # http://www.i18nguy.com/unicode/language-identifiers.html
+LANGUAGES_BIDI = lms.envs.common.LANGUAGES_BIDI
 
 LANGUAGES = lms.envs.common.LANGUAGES
 LANGUAGE_DICT = dict(LANGUAGES)
@@ -369,12 +370,30 @@ PIPELINE_CSS = {
         ],
         'output_filename': 'css/cms-style-app-extend1.css',
     },
+    'style-app-rtl': {
+        'source_filenames': [
+            'sass/style-app-rtl.css',
+        ],
+        'output_filename': 'css/cms-style-app-rtl.css',
+    },
+    'style-app-extend1-rtl': {
+        'source_filenames': [
+            'sass/style-app-extend1-rtl.css',
+        ],
+        'output_filename': 'css/cms-style-app-extend1-rtl.css',
+    },
     'style-xmodule': {
         'source_filenames': [
             'sass/style-xmodule.css',
         ],
         'output_filename': 'css/cms-style-xmodule.css',
     },
+    'style-xmodule-rtl': {
+        'source_filenames': [
+            'sass/style-xmodule-rtl.css',
+        ],
+        'output_filename': 'css/cms-style-xmodule-rtl.css',
+    },
     'style-xmodule-annotations': {
         'source_filenames': [
             'css/vendor/ova/annotator.css',

cms/static/sass/_base.scss

@@ -279,25 +279,25 @@ p, ul, ol, dl {
       @include clearfix();
 
       .page-header {
-        float: left;
+        @include float(left);
+        @include margin-right(flex-gutter());
         width: flex-grid(6,12);
-        margin-right: flex-gutter();
       }
 
       .nav-actions {
+        @include float(left);
+        @include text-align(right);
         position: relative;
         bottom: -($baseline*0.75);
-        float: right;
         width: flex-grid(6,12);
-        text-align: right;
 
         .nav-item {
           display: inline-block;
           vertical-align: top;
-          margin-right: ($baseline/2);
+          @include margin-right($baseline/2);
 
           &:last-child {
-            margin-right: 0;
+            @include margin-right(0);
           }
         }
 
@@ -500,21 +500,21 @@ p, ul, ol, dl {
 
 .main-column {
   clear: both;
-  float: left;
+  @include float(left);
   width: 70%;
 }
 
 .sidebar {
-  float: right;
+  @include float(right);
   width: 28%;
 }
 
 .left {
-  float: left;
+  @include float(left);
 }
 
 .right {
-  float: right;
+  @include float(right);
 }
 
 // ====================
@@ -539,7 +539,7 @@ p, ul, ol, dl {
 .item-actions {
   position: absolute;
   top: 5px;
-  right: 5px;
+  @include right(5px);
 
   .edit-button,
   .delete-button,

cms/static/sass/elements/_controls.scss

@@ -278,7 +278,16 @@
       height: ($baseline*1.2);
       width: ($baseline);
       margin: 0;
-      background: transparent url("../img/drag-handles.png") no-repeat right center;
+
+      // CASE: right to left layout
+      @include rtl {
+       background: transparent url("../img/drag-handles.png") no-repeat left center;
+      }
+
+      // CASE: left to right layout
+      @include ltr {
+        background: transparent url("../img/drag-handles.png") no-repeat right center;
+      }
     }
 
     &.toggle-action {

cms/static/sass/elements/_header.scss

@@ -27,14 +27,14 @@
   }
 
   .wrapper-l {
-    float: left;
+    @include float(left);
     width: flex-grid(7,12);
   }
 
   .wrapper-r {
-    float: right;
+    @include float(right);
     width: flex-grid(4,12);
-    text-align: right;
+    @include text-align(right);
   }
 
   .branding, .info-course, .nav-course, .nav-account, .nav-pitch {
@@ -128,8 +128,8 @@
 
   // specific elements - course name/info
   .info-course {
-    margin-right: flex-gutter();
-    border-right: 1px solid $gray-l4;
+    @include margin-right(flex-gutter());
+    @include border-right(1px solid $gray-l4);
     padding: ($baseline*0.75) flex-gutter() ($baseline*0.75) 0;
 
     .course-org, .course-number {
@@ -144,7 +144,7 @@
     }
 
     .course-org {
-      margin-right: ($baseline/4);
+      @include margin-right($baseline/4);
     }
 
     .course-title {
@@ -184,7 +184,7 @@
     padding: ($baseline*0.75) 0;
 
     .nav-sub {
-      text-align: left;
+      @include text-align(left);
     }
 
     .nav-account-help {
@@ -238,7 +238,7 @@
 
   .branding {
     width: 20%;
-    margin-right: 2%;
+    @include margin-right(2%);
   }
 
   .nav-account {
@@ -263,7 +263,7 @@
 
     .branding {
       width: 20%;
-      margin-right: 2%;
+      @include margin-right(2%);
     }
 
     .info-course {

cms/static/sass/elements/_icons.scss

@@ -12,14 +12,14 @@
 .icon-inline {
   display: inline-block;
   vertical-align: middle;
-  margin-right: ($baseline/4);
+  @include margin-right($baseline/4);
 }
 
 // ui - badges
 .wrapper-ui-badge {
   position: absolute;
   top: -1px;
-  left: ($baseline*1.5);
+  @include left($baseline*1.5);
   width: 100%;
 }
 

cms/static/sass/elements/_layout.scss

@@ -40,25 +40,25 @@
       @include clearfix();
 
       .page-header {
-        float: left;
+        @include float(left);
         width: flex-grid(6,12);
-        margin-right: flex-gutter();
+        @include margin-right(flex-gutter());
       }
 
       .nav-actions {
         position: relative;
         bottom: -($baseline*0.75);
-        float: right;
+        @include float(right);
         width: flex-grid(6,12);
-        text-align: right;
+        @include text-align(right);
 
         .nav-item {
           display: inline-block;
           vertical-align: top;
-          margin-right: ($baseline/2);
+          @include margin-right(($baseline/2));
 
           &:last-child {
-            margin-right: 0;
+            @include margin-right(0);
           }
         }
 
@@ -214,8 +214,8 @@
 // 3/4 - 1/4 two col layout
 %two-col-1 {
   .content-primary {
-    float: left;
-    margin-right: flex-gutter();
+    @include float(left);
+    @include margin-right(flex-gutter());
     width: flex-grid(9,12);
     box-shadow: none;
     border: 0;
@@ -223,7 +223,7 @@
   }
 
   .content-supplementary {
-    float: left;
+    @include float(left);
     width: flex-grid(3,12);
   }
 }

cms/static/sass/elements/_modules.scss

@@ -300,7 +300,7 @@ $outline-indent-width: $baseline;
 
   .icon {
     @extend %t-icon5;
-    margin-right: ($baseline/4);
+    @include margin-right($baseline/4);
   }
 }
 

cms/static/sass/elements/_navigation.scss

@@ -34,7 +34,7 @@ nav {
 
     .ui-toggle-dd {
       @include transition(all $tmg-f2 ease-in-out 0s);
-      margin-left: ($baseline/10);
+      margin: 0 ($baseline/10);
       display: inline-block;
       vertical-align: middle;
     }
@@ -148,7 +148,7 @@ nav {
     }
 
     .nav-sub {
-      text-align: left;
+      @include text-align(left);
 
       // ui triangle/nub
       &:after {
@@ -167,20 +167,20 @@ nav {
   &.ui-right {
 
     .wrapper-nav-sub {
-      left: none;
-      right: 0;
+      @include left(none);
+      @include right(0);
     }
 
     .nav-sub {
 
       // ui triangle/nub
       &:after {
-        right: $baseline;
+        @include right($baseline);
         margin-right: -10px;
       }
 
       &:before {
-        right: $baseline;
+        @include right($baseline);
         margin-right: -11px;
       }
     }

cms/static/sass/elements/_sock.scss

@@ -35,7 +35,7 @@
 
       [class^="icon-"] {
         @extend %t-icon6;
-        margin-right: ($baseline/4);
+        @include margin-right($baseline/4);
       }
 
       &:hover {
@@ -84,11 +84,11 @@
         @include clearfix();
 
         .action-item {
-          float: left;
-          margin-right: ($baseline/2);
+          @include float(left);
+          @include margin-right($baseline/2);
 
           &:last-child {
-            margin-right: 0;
+            @include margin-right(0);
           }
 
           .action {
@@ -98,7 +98,7 @@
             [class^="icon-"] {
               @extend %t-icon4;
               vertical-align: middle;
-              margin-right: $baseline/4;
+              @include margin-right($baseline/4);
 
             }
 

cms/static/sass/elements/_system-feedback.scss

@@ -210,7 +210,7 @@
     vertical-align: middle;
     width: $baseline*17.5;
     border: 4px solid $black;
-    text-align: left;
+    @include text-align(left);
 
     .copy {
       border-top: 4px solid $blue;
@@ -225,10 +225,10 @@
 
       .nav-item {
         display: inline-block;
-        margin-right: ($baseline*0.75);
+        @include margin-right($baseline*0.75);
 
         &:last-child {
-          margin-right: 0;
+          @include margin-right(0);
         }
       }
 
@@ -437,22 +437,22 @@
 
     .copy {
       width: flex-grid(7, 12);
-      margin-right: flex-gutter();
+      @include margin-right(flex-gutter());
     }
 
     .nav-actions {
       width: flex-grid(4, 12);
-      float: right;
+      @include float(left);
       margin-top: ($baseline/4);
       text-align: right;
 
       .nav-item {
         display: inline-block;
         vertical-align: middle;
-        margin-right: ($baseline/2);
+        @include margin-right($baseline/2);
 
         &:last-child {
-          margin-right: 0;
+          @include margin-right(0);
         }
       }
     }
@@ -610,25 +610,25 @@
       width: flex-grid(1, 12);
     }
 
-    .copy {
-      width: flex-grid(7, 12);
-      margin-right: flex-gutter();
-    }
+  	.copy {
+  		width: flex-grid(7, 12);
+  		@include margin-right(flex-gutter());
+  	}
 
-    .nav-actions {
-     width: flex-grid(4, 12);
-     float: right;
-     margin-top: ($baseline/2);
-     text-align: right;
+  	.nav-actions {
+  	  width: flex-grid(4, 12);
+      @include float(left);
+      margin-top: ($baseline/2);
+  	  text-align: right;
 
-     .nav-item {
-       display: inline-block;
-       vertical-align: middle;
-       margin-right: ($baseline/2);
+  	  .nav-item {
+  	    display: inline-block;
+  	    vertical-align: middle;
+  	    @include margin-right($baseline/2);
 
-       &:last-child {
-         margin-right: 0;
-       }
+  	    &:last-child {
+  	      @include margin-right(0);
+  	    }
 
        .action-primary {
         @extend %t-action4;
@@ -829,7 +829,7 @@ body.uxdesign.alerts {
   .content-primary {
     @extend %ui-window;
     width: flex-grid(12, 12);
-    margin-right: flex-gutter();
+    @include margin-right(flex-gutter());
     padding: $baseline ($baseline*1.5);
 
     > section {
@@ -856,9 +856,9 @@ body.uxdesign.alerts {
         }
 
         a {
-          float: left;
+          @include float(left);
           width: flex-grid(5, 12);
-          margin-right: flex-gutter();
+          @include margin-right(flex-gutter());
         }
       }
     }
@@ -882,7 +882,7 @@ body.uxdesign.alerts {
     @include clearfix;
 
     .alert-message {
-      float: left;
+      @include float(left);
       margin: 4px 0 0 0;
       color: $gray-d3;
     }
@@ -892,7 +892,7 @@ body.uxdesign.alerts {
     }
 
     .alert-action {
-      float: right;
+      @include float(left);
 
       &.secondary {
         @include orange-button;

cms/static/sass/elements/_system-help.scss

@@ -24,17 +24,17 @@
     @include clearfix();
 
     .copy {
-      float: left;
+      @include float(left);
       width: flex-grid(8,12);
-      margin-right: flex-gutter();
+      @include margin-right(flex-gutter());
     }
 
     .nav-introduction-supplementary {
       @extend %t-copy-sub2;
-      float: right;
+      @include float(right);
       width: flex-grid(4,12);
       display: block;
-      text-align: right;
+      @include text-align(right);
 
       .icon {
         @extend %t-action3;

cms/static/sass/elements/_xblocks.scss

@@ -41,7 +41,7 @@
       display: inline-block;
       width: 49%;
       vertical-align: middle;
-      text-align: right;
+      @include text-align(right);
     }
   }
 

cms/static/sass/style-app-extend1-rtl.scss

+// studio - css architecture
+// ====================
+
+// libs and resets *do not edit*
+@import 'bourbon/bourbon'; // lib - bourbon
+@import 'vendor/bi-app/bi-app-rtl'; // set the layout for right to left languages
+
+// VENDOR + REBASE *referenced/used vendor presentation and reset*
+// ====================
+@import 'reset';
+
+// BASE  *default edX offerings*
+// ====================
+// base - utilities
+@import 'variables';
+@import 'mixins';
+@import 'mixins-inherited';
+
+// base - assets
+@import 'assets/fonts';
+@import 'assets/graphics'; // sprites, basic img/figure/svg styling
+@import 'assets/anims'; // animations
+
+// base - starter
+@import 'base';
+
+// base - elements
+@import 'elements/typography';
+@import 'elements/icons'; // references to icons used
+@import 'elements/controls'; // buttons, link styles, sliders, etc.
+@import 'elements/xblocks'; //  studio rendering chrome for xblocks
+@import 'elements/modules'; //  content module patterns
+@import 'elements/layout'; // various standard layouts
+
+// base - specific views
+@import 'views/account';
+@import 'views/assets';
+@import 'views/updates';
+@import 'views/dashboard';
+@import 'views/export';
+@import 'views/index';
+@import 'views/course-create';
+@import 'views/import';
+@import 'views/outline';
+@import 'views/settings';
+@import 'views/static-pages';
+@import 'views/unit';
+@import 'views/container';
+@import 'views/users';
+@import 'views/checklists';
+@import 'views/textbooks';
+@import 'views/export-git';
+@import 'views/group-configuration';
+
+// base - contexts
+@import 'contexts/ie'; // ie-specific rules (mostly for known/older bugs)
+
+// temp - inherited
+@import 'assets/content-types';
+
+@import 'developer'; // used for any developer-created scss that needs further polish/refactoring
+@import 'shame';     // used for any bad-form/orphaned scss

cms/static/sass/style-app-extend1.scss

 // studio - css architecture
 // ====================
 
+@import 'vendor/bi-app/bi-app-ltr'; // set the layout for left to right languages
+
 // libs and resets *do not edit*
 @import 'bourbon/bourbon'; // lib - bourbon
 

cms/static/sass/style-app-rtl.scss

+// studio - css architecture
+// ====================
+
+// libs and resets *do not edit*
+@import 'bourbon/bourbon'; // lib - bourbon
+@import 'vendor/bi-app/bi-app-rtl'; // set the layout for right to left languages
+
+// VENDOR + REBASE *referenced/used vendor presentation and reset*
+// ====================
+@import 'reset';
+
+// BASE  *default edX offerings*
+// ====================
+// base - utilities
+@import 'variables';
+@import 'mixins';
+@import 'mixins-inherited';
+
+// base - assets
+@import 'assets/fonts';
+@import 'assets/graphics'; // sprites, basic img/figure/svg styling
+@import 'assets/anims'; // animations
+
+// base - starter
+@import 'base';
+
+// base - elements
+@import 'elements/typography';
+@import 'elements/icons'; // references to icons used
+@import 'elements/controls'; // buttons, link styles, sliders, etc.
+@import 'elements/modules'; //  content module patterns
+@import 'elements/navigation'; // all archetypes of navigation
+@import 'elements/layout'; // various standard layouts
+@import 'elements/forms';
+@import 'elements/header';
+@import 'elements/footer';
+@import 'elements/sock';
+@import 'elements/tender-widget';
+@import 'elements/system-feedback'; // alerts, notifications, states
+@import 'elements/system-help'; // help UI
+@import 'elements/modal'; // interstitial UI, dialogs, modal windows
+@import 'elements/vendor'; // overrides to vendor-provided styling
+@import 'elements/modal-window';

cms/static/sass/style-app.scss

 // studio - css architecture
 // ====================
 
+@import 'vendor/bi-app/bi-app-ltr'; // set the layout for left to right languages
+
 // libs and resets *do not edit*
 @import 'bourbon/bourbon'; // lib - bourbon
 

cms/static/sass/style-xmodule-rtl.scss

+// studio - xmodule architecture
+// ====================
+
+// libs and resets *do not edit*
+@import 'bourbon/bourbon'; // lib - bourbon
+@import 'vendor/bi-app/bi-app-rtl'; // set the layout for right to left languages
+
+// VENDOR + REBASE *referenced/used vendor presentation and reset*
+// ====================
+@import 'reset';
+
+// BASE  *default edX offerings*
+// ====================
+// base - utilities
+@import 'variables';
+@import 'mixins';
+@import 'mixins-inherited';
+
+// base - assets
+@import 'assets/fonts';
+@import 'assets/graphics'; // sprites, basic img/figure/svg styling
+@import 'assets/anims'; // animations
+
+// base - starter
+@import 'base';
+
+// base - elements
+@import 'elements/typography';
+@import 'elements/icons'; // references to icons used
+@import 'elements/controls'; // buttons, link styles, sliders, etc.
+@import 'elements/navigation'; // all archetypes of navigation
+
+// xmodule
+@import 'xmodule/modules/css/module-styles.scss';
+@import 'xmodule/descriptors/css/module-styles.scss';
+@import 'elements/xmodules'; // styling for Studio-specific contexts

cms/static/sass/style-xmodule.scss

@@ -3,6 +3,7 @@
 
 // libs and resets *do not edit*
 @import 'bourbon/bourbon'; // lib - bourbon
+@import 'vendor/bi-app/bi-app-ltr'; // set the layout for left to right languages
 
 // VENDOR + REBASE *referenced/used vendor presentation and reset*
 // ====================

cms/static/sass/vendor/bi-app/_bi-app-ltr.scss

+// ------------------------------------------
+// left to right module
+// authors: 
+// twitter.com/anasnakawa
+// twitter.com/victorzamfir
+// licensed under the MIT license 
+// http://www.opensource.org/licenses/mit-license.php
+// ------------------------------------------
+
+@import 'variables-ltr';
+@import 'mixins';
\ No newline at end of file

cms/static/sass/vendor/bi-app/_bi-app-rtl.scss

+// ------------------------------------------
+// right to left module
+// authors: 
+// twitter.com/anasnakawa
+// twitter.com/victorzamfir
+// licensed under the MIT license 
+// http://www.opensource.org/licenses/mit-license.php
+// ------------------------------------------
+
+@import 'variables-rtl';
+@import 'mixins';
\ No newline at end of file

cms/static/sass/vendor/bi-app/_mixins.scss

+// ------------------------------------------
+// bi app mixins
+// authors:
+// twitter.com/anasnakawa
+// twitter.com/victorzamfir
+// licensed under the MIT license
+// http://www.opensource.org/licenses/mit-license.php
+// ------------------------------------------
+
+// ------------------------------------------
+// Table of contents
+// ------------------------------------------
+// padding
+// margin
+// float
+// text align
+// clear
+// left / right
+// border
+//  - width
+//  - style
+//  - color
+//  - generic
+//  - radius
+// ltr / rtl contents
+// ------------------------------------------
+
+// generic mixin for properties with values
+// (top right bottom left)
+// ------------------------------------------
+@mixin bi-app-compact($property, $top, $right, $bottom, $left) {
+  @if $bi-app-direction == ltr {
+    #{$property}: $top $right $bottom $left;
+  } @else {
+    #{$property}: $top $left $bottom $right;
+  }
+}
+
+// padding
+// ------------------------------------------
+@mixin padding-left($distance) {
+  padding-#{$bi-app-left}: $distance;
+}
+
+@mixin padding-right($distance) {
+  padding-#{$bi-app-right}: $distance;
+}
+
+@mixin padding($top, $right, $bottom, $left) {
+  @include bi-app-compact(padding, $top, $right, $bottom, $left);
+}
+
+// margin
+// ------------------------------------------
+@mixin margin-left($distance) {
+  margin-#{$bi-app-left}: $distance;
+}
+
+@mixin margin-right($distance) {
+  margin-#{$bi-app-right}: $distance;
+}
+
+@mixin margin($top, $right, $bottom, $left) {
+  @include bi-app-compact(margin, $top, $right, $bottom, $left);
+}
+
+// float
+// ------------------------------------------
+@mixin bi-app-float-left {
+  float: $bi-app-left;
+}
+
+@mixin bi-app-float-right {
+  float: $bi-app-right;
+}
+
+@mixin float($direction) {
+  @if $direction == left {
+    @include bi-app-float-left;
+  } @else if $direction == right {
+    @include bi-app-float-right;
+  } @else {
+    float: $direction;
+  }
+}
+
+// text align
+// ------------------------------------------
+@mixin bi-app-text-align-left {
+  text-align: $bi-app-left;
+}
+
+@mixin bi-app-text-align-right {
+  text-align: $bi-app-right;
+}
+
+@mixin text-align($direction) {
+  @if $direction == left {
+    @include bi-app-text-align-left;
+  } @else if $direction == right {
+    @include bi-app-text-align-right;
+  } @else {
+    text-align: $direction;
+  }
+}
+
+// clear
+// ------------------------------------------
+@mixin bi-app-clear-left {
+  clear: $bi-app-left;
+}
+
+@mixin bi-app-clear-right {
+  clear: $bi-app-right;
+}
+
+@mixin clear($direction) {
+  @if $direction == left {
+    @include bi-app-clear-left;
+  } @else if $direction == right {
+    @include bi-app-clear-right;
+  } @else {
+    clear: $direction;
+  }
+}
+
+// left / right
+// ------------------------------------------
+@mixin left($distance) {
+  @if $bi-app-direction == ltr {
+    left: $distance;
+  } @else if $bi-app-direction == rtl {
+    right: $distance;
+  }
+}
+
+@mixin right($distance) {
+  @if $bi-app-direction == ltr {
+    right: $distance;
+  } @else if $bi-app-direction == rtl {
+    left: $distance;
+  }
+}
+
+// border
+// ------------------------------------------
+
+// width
+@mixin border-left-width($width) {
+  border-#{$bi-app-left}-width: $width;
+}
+
+@mixin border-right-width($width) {
+  border-#{$bi-app-right}-width: $width;
+}
+
+@mixin border-width($top, $right, $bottom, $left) {
+  @include bi-app-compact(border-width, $top, $right, $bottom, $left);
+}
+
+// style
+@mixin border-left-style($style) {
+  border-#{$bi-app-left}-style: $style;
+}
+
+@mixin border-right-style($style) {
+  border-#{$bi-app-right}-style: $style;
+}
+
+@mixin border-style($top, $right, $bottom, $left) {
+  @include bi-app-compact(border-style, $top, $right, $bottom, $left);
+}
+
+// color
+@mixin border-left-color($color) {
+  border-#{$bi-app-left}-color: $color;
+}
+
+@mixin border-right-color($color) {
+  border-#{$bi-app-right}-color: $color;
+}
+
+@mixin border-color($top, $right, $bottom, $left) {
+  @include bi-app-compact(border-color, $top, $right, $bottom, $left);
+}
+
+// generic
+@mixin border-left($border-style) {
+  border-#{$bi-app-left}: $border-style;
+}
+
+@mixin border-right($border-style) {
+  border-#{$bi-app-right}: $border-style;
+}
+
+// radius
+@mixin border-top-left-radius($radius) {
+  -webkit-border-top-#{$bi-app-left}-radius: $radius;
+     -moz-border-top#{$bi-app-left}-radius: $radius;
+          border-top-#{$bi-app-left}-radius: $radius;
+}
+
+@mixin border-top-right-radius($radius) {
+  -webkit-border-top-#{$bi-app-right}-radius: $radius;
+     -moz-border-top#{$bi-app-right}-radius: $radius;
+          border-top-#{$bi-app-right}-radius: $radius;
+}
+
+@mixin border-bottom-left-radius($radius) {
+  -webkit-border-bottom-#{$bi-app-left}-radius: $radius;
+     -moz-border-bottom#{$bi-app-left}-radius: $radius;
+          border-bottom-#{$bi-app-left}-radius: $radius;
+}
+
+@mixin border-bottom-right-radius($radius) {
+  -webkit-border-bottom-#{$bi-app-right}-radius: $radius;
+     -moz-border-bottom#{$bi-app-right}-radius: $radius;
+          border-bottom-#{$bi-app-right}-radius: $radius;
+}
+
+@mixin border-right-radius($radius) {
+  @include border-top-right-radius($radius);
+  @include border-bottom-right-radius($radius);
+}
+
+@mixin border-left-radius($radius) {
+  @include border-top-left-radius($radius);
+  @include border-bottom-left-radius($radius);
+}
+
+@mixin border-top-radius($radius) {
+  @include border-top-left-radius($radius);
+  @include border-top-right-radius($radius);
+}
+
+@mixin border-bottom-radius($radius) {
+  @include border-bottom-left-radius($radius);
+  @include border-bottom-right-radius($radius);
+}
+
+@mixin border-radius($topLeft, $topRight: null, $bottomRight: null, $bottomLeft: null) {
+  @if $topRight != null {
+    @include border-top-left-radius($topLeft);
+    @include border-top-right-radius($topRight);
+    @include border-bottom-right-radius($bottomRight);
+    @include border-bottom-left-radius($bottomLeft);
+  } @else {
+    -webkit-border-radius: $topLeft;
+       -moz-border-radius: $topLeft;
+        -ms-border-radius: $topLeft;
+         -o-border-radius: $topLeft;
+            border-radius: $topLeft;
+  }
+}
+
+// Returns "en" or "ar", useful for image suffixes.
+// Usage: background-image: url(/img/header-#{lang()}.png);
+@function lang() {
+  @if $bi-app-direction == ltr {
+    @return 'en';
+  } @else {
+    @return 'ar';
+  }
+}
+
+// Support for "direction" declaration (renders ltr/rtl).
+// Useful for form elements as they swap the text-indent property and align the text accordingly.
+@mixin direction {
+  direction: $bi-app-direction;
+}
+
+// Inverts a percentage value. Example: 97% becames 3%.
+// Useful for background-position.
+@function bi-app-invert-percentage($percentage) {
+  @if $bi-app-direction == rtl {
+    @return 100% - $percentage;
+  } @else {
+    @return $percentage;
+  }
+}
+
+// ltr / rtl contents
+// ------------------------------------------
+@mixin ltr {
+  @if $bi-app-direction == ltr {
+    @content;
+  }
+}
+
+@mixin rtl {
+  @if $bi-app-direction == rtl {
+    @content;
+  }
+}

cms/static/sass/vendor/bi-app/_variables-ltr.scss

+// ------------------------------------------
+// left to right variables to be used by bi-app mixins
+// authors: 
+// twitter.com/anasnakawa
+// twitter.com/victorzamfir
+// licensed under the MIT license 
+// http://www.opensource.org/licenses/mit-license.php
+// ------------------------------------------
+
+// namespacing variables with bi-app to
+// avoid conflicting with other global variables
+$bi-app-left 				    : left;
+$bi-app-right 				  : right;
+$bi-app-direction 			: ltr;
+$bi-app-invert-direction: rtl;
\ No newline at end of file

cms/static/sass/vendor/bi-app/_variables-rtl.scss

+// ------------------------------------------
+// right to left variables to be used by bi-app mixins
+// authors: 
+// twitter.com/anasnakawa
+// twitter.com/victorzamfir
+// licensed under the MIT license 
+// http://www.opensource.org/licenses/mit-license.php
+// ------------------------------------------
+
+// namespacing variables with bi-app to
+// avoid conflicting with other global variables
+$bi-app-left 				    : right;
+$bi-app-right           : left;
+$bi-app-direction 			: rtl;
+$bi-app-invert-direction: ltr;
\ No newline at end of file

cms/static/sass/views/_account.scss

@@ -37,7 +37,7 @@
       .action {
         @extend %t-action3;
         position: absolute;
-        right: 0;
+        @include right(0);
         top: 40%;
       }
     }
@@ -50,12 +50,10 @@
 
   .content-primary, .content-supplementary {
     @include box-sizing(border-box);
-    float: left;
   }
 
   .content-primary {
-    width: flex-grid(8, 12);
-    margin-right: flex-gutter();
+    @extend .ui-col-wide;
 
     form {
       @include box-sizing(border-box);
@@ -211,7 +209,7 @@
   }
 
   .content-supplementary {
-    width: flex-grid(4, 12);
+    @extend .ui-col-narrow;
 
     .bit {
       @extend %t-copy-sub1;
@@ -243,7 +241,7 @@
       @extend %t-action3;
       position: absolute;
       top: 0;
-      right: 0;
+      @include right(0);
     }
   }
 }

cms/static/sass/views/_assets.scss

@@ -5,16 +5,14 @@
 
   .content-primary, .content-supplementary {
     @include box-sizing(border-box);
-    float: left;
   }
 
   .content-primary {
-    width: flex-grid(9, 12);
-    margin-right: flex-gutter();
+    @extend .ui-col-wide;
   }
 
   .content-supplementary {
-    width: flex-grid(3, 12);
+    @extend .ui-col-narrow;
   }
 
   .nav-actions {
@@ -36,10 +34,10 @@
 
     .new-button {
       @extend %t-action3;
-      margin-left: $baseline;
+      @include margin-left($baseline);
 
       [class^="icon-"] {
-        margin-right: ($baseline/2);
+        @include margin-right($baseline/2);
       }
     }
   }
@@ -70,7 +68,7 @@
       width: flex-grid(3, 12);
 
       &.pagination-compact {
-        text-align: right;
+        @include text-align(right);
       }
 
       &.pagination-full {
@@ -136,7 +134,7 @@
       .current-page {
         @extend %ui-depth1;
         position: absolute;
-        left: -($baseline/4);
+        @include left(-($baseline/4));
       }
 
       .page-divider {

cms/static/sass/views/_checklists.scss

@@ -5,12 +5,10 @@
 
   .content-primary, .content-supplementary {
     @include box-sizing(border-box);
-    float: left;
   }
 
   .content-primary {
-    width: flex-grid(9, 12);
-    margin-right: flex-gutter();
+    @extend .ui-col-wide;
   }
 
   // checklists - general
@@ -58,15 +56,16 @@
       .checklist-title {
         @include transition(color $tmg-f2 ease-in-out 0s);
         width: flex-grid(6, 9);
-        margin: 0 flex-gutter() 0 0;
-        float: left;
+        margin: 0;
+        @include margin-right(flex-gutter());
+        @include float(left);
 
         .ui-toggle-expansion {
           @include transition(all $tmg-f2 ease-in-out 0s);
           @extend %t-action1;
           display: inline-block;
           vertical-align: middle;
-          margin-right: ($baseline/2);
+          @include margin-right($baseline/2);
           color: $gray-l4;
         }
 
@@ -86,9 +85,9 @@
       .checklist-status {
         @extend %t-copy-sub1;
         width: flex-grid(3, 9);
-        float: right;
+        @include float(right);
         margin-top: ($baseline/2);
-        text-align: right;
+        @include text-align(right);
         color: $gray-l2;
 
 
@@ -127,7 +126,7 @@
 
       .action-primary {
         @include green-button();
-        float: left;
+        @include float(left);
 
         .icon-add {
           @extend %t-icon7;
@@ -141,7 +140,7 @@
         @include grey-button();
         @extend %t-action3;
         @extend %t-regular;
-        float: right;
+        @include float(right);
 
         .icon-delete {
           @extend %t-icon7;
@@ -227,15 +226,16 @@
       .task-input {
         display: inline-block;
         vertical-align: text-top;
-        float: left;
-        margin: ($baseline/2) flex-gutter() 0 0;
+        @include float(left);
+        margin-top: ($baseline/2);
+        @include margin-right(flex-gutter());
       }
 
       .task-details {
         @extend %t-strong;
         display: inline-block;
         vertical-align: text-top;
-        float: left;
+        @include float(left);
         width: flex-grid(6,9);
 
         .task-name {
@@ -264,7 +264,7 @@
         @include clearfix();
         display: inline-block;
         vertical-align: middle;
-        float: right;
+        @include float(right);
         width: flex-grid(2,9);
         margin: ($baseline/2) 0 0 flex-gutter();
         opacity: 0.0;
@@ -336,6 +336,6 @@
   }
 
   .content-supplementary {
-    width: flex-grid(3, 12);
+    @extend .ui-col-narrow;
   }
 }

cms/static/sass/views/_dashboard.scss

@@ -17,16 +17,14 @@
   // basic layout
   .content-primary, .content-supplementary {
     @include box-sizing(border-box);
-    float: left;
   }
 
   .content-primary {
-    width: flex-grid(9, 12);
-    margin-right: flex-gutter();
+    @extend .ui-col-wide;
   }
 
   .content-supplementary {
-    width: flex-grid(3, 12);
+    @extend .ui-col-narrow;
   }
 
   // ====================
@@ -439,13 +437,13 @@
     .course-link {
       @extend %ui-depth2;
       width: flex-grid(6, 9);
-      margin-right: flex-gutter();
+      @include margin-right(flex-gutter());
     }
 
     // course title
     .course-title {
       @extend %t-title4;
-      margin: 0 ($baseline*2) ($baseline/4) 0;
+      @include margin(0, ($baseline*2), ($baseline/4), 0);
       font-weight: 300;
     }
 
@@ -486,17 +484,17 @@
       @extend %ui-depth3;
       position: static;
       width: flex-grid(3, 9);
-      text-align: right;
+      @include text-align(right);
       opacity: 0;
       pointer-events: none;
 
       .action {
         display: inline-block;
         vertical-align: middle;
-        margin-right: ($baseline/2);
+        @include margin-right($baseline/2);
 
         &:last-child {
-          margin-right: 0;
+          @include margin-right(0);
         }
       }
 

cms/static/sass/views/_export.scss

@@ -6,16 +6,14 @@
   // UI: basic layout
   .content-primary, .content-supplementary {
     @include box-sizing(border-box);
-    float: left;
   }
 
   .content-primary {
-    width: flex-grid(9,12);
-    margin-right: flex-gutter();
+    @extend .ui-col-wide;
   }
 
   .content-supplementary {
-    width: flex-grid(3,12);
+    @extend .ui-col-narrow;
   }
 
 

cms/static/sass/views/_import.scss

@@ -5,16 +5,14 @@
 
   .content-primary, .content-supplementary {
     @include box-sizing(border-box);
-    float: left;
   }
 
   .content-primary {
-    width: flex-grid(9,12);
-    margin-right: flex-gutter();
+    @extend .ui-col-wide;
   }
 
   .content-supplementary {
-    width: flex-grid(3,12);
+    @extend .ui-col-narrow;
   }
 
   // UI: export controls

cms/static/sass/views/_outline.scss

@@ -70,12 +70,10 @@
   .content-primary,
   .content-supplementary {
     @include box-sizing(border-box);
-    float: left;
   }
 
   .content-primary {
-    width: flex-grid(9, 12);
-    margin-right: flex-gutter();
+    @extend .ui-col-wide;
 
     .no-content {
       @extend %no-content;
@@ -83,7 +81,7 @@
   }
 
   .content-supplementary {
-    width: flex-grid(3, 12);
+    @extend .ui-col-narrow;
   }
 
 
@@ -297,7 +295,7 @@
       }
 
       .section-header-details {
-        float: left;
+        @include float(left);
         width: flex-grid(6, 9);
 
         .icon, .wrapper-section-title {
@@ -306,7 +304,7 @@
         }
 
         .icon {
-          margin-right: ($baseline/4);
+          @include margin-right($baseline/4);
         }
 
         .wrapper-section-title {
@@ -316,10 +314,10 @@
       }
 
       .section-header-actions {
-        float: right;
+        @include float(right);
         width: flex-grid(3, 9);
         margin-top: -($baseline/4);
-        text-align: right;
+        @include text-align(right);
 
         .actions-list {
           @extend %actions-list;
@@ -385,7 +383,7 @@
       }
 
       .subsection-header-details {
-        float: left;
+        @include float(left);
         width: flex-grid(6, 9);
 
         .icon, .wrapper-subsection-title {
@@ -394,7 +392,7 @@
         }
 
         .icon {
-          margin-right: ($baseline/4);
+          @include margin-right($baseline/4);
         }
 
         .wrapper-subsection-title {
@@ -405,10 +403,10 @@
       }
 
       .subsection-header-actions {
-        float: right;
+        @include float(right);
         width: flex-grid(3, 9);
         margin-top: -($baseline/4);
-        text-align: right;
+        @include text-align(right);
 
         .actions-list {
           @extend %actions-list;
@@ -424,7 +422,7 @@
 
       // status
       .subsection-status {
-        margin: 0 0 0 $outline-indent-width;
+        @include margin(0, 0, 0, $outline-indent-width);
       }
 
       // content
@@ -467,16 +465,16 @@
       }
 
       .unit-header-details {
-        float: left;
+        @include float(left);
         width: flex-grid(6, 9);
         margin-top: ($baseline/4);
       }
 
       .unit-header-actions {
-        float: right;
+        @include float(right);
         width: flex-grid(3, 9);
         margin-top: -($baseline/10);
-        text-align: right;
+        @include text-align(right);
 
         .actions-list {
           @extend %actions-list;
@@ -497,7 +495,7 @@
         .icon {
           display: inline-block;
           vertical-align: middle;
-          margin-right: ($baseline/2);
+          @include margin-right($baseline/2);
         }
       }
     }

cms/static/sass/views/_settings.scss

@@ -5,13 +5,11 @@
 
   .content-primary, .content-supplementary {
     @include box-sizing(border-box);
-    float: left;
   }
 
   .content-primary {
     @extend %ui-window;
-    width: flex-grid(9, 12);
-    margin-right: flex-gutter();
+    @extend .ui-col-wide;
     padding: $baseline ($baseline*1.5);
   }
 
@@ -67,16 +65,17 @@
 
       .title-2 {
         width: flex-grid(4, 9);
-        margin: 0 flex-gutter() 0 0;
-        float: left;
+        margin: 0;
+        @include margin-right(flex-gutter());
+        @include float(left);
       }
 
       .tip {
         @extend %t-copy-sub2;
         width: flex-grid(5, 9);
-        float: right;
+        @include float(right);
         margin-top: ($baseline/2);
-        text-align: right;
+        @include text-align(right);
         color: $gray-l2;
       }
     }
@@ -372,7 +371,7 @@
         }
 
         .field {
-          float: left;
+          @include float(left);
           width: flex-grid(3, 9);
           margin-bottom: ($baseline/4);
           margin-right: flex-gutter();
@@ -384,7 +383,7 @@
           .tip {
             position: absolute;
             top: 0;
-            right: 0;
+            @include right(0);
           }
         }
       }
@@ -598,6 +597,7 @@
 
           .grade-specific-bar {
             height: 50px !important;
+            text-align: left;
           }
 
           .grades {
@@ -897,13 +897,13 @@
   }
 
   .content-supplementary {
-    width: flex-grid(3, 12);
+    @extend .ui-col-narrow;
   }
-  
+
   .wrapper-modal-window {
-    
+
     .validation-error-modal-content {
-      
+
       .error-header {
         p {
           strong {
@@ -911,28 +911,28 @@
           }
         }
       }
-      
+
       hr {
         margin: 25px 0;
       }
-      
+
       .error-list {
         .error-item {
           .error-item-title {
             color: $error-red;
           }
-          
+
           .error-item-message {
             width:100%;
             border: none;
             resize: none;
-          
+
             &:focus {
               outline: 0;
             }
           }
         }
-      }  
+      }
     }
   }
 }

cms/static/sass/views/_static-pages.scss

@@ -203,7 +203,7 @@
       position: absolute;
       display: block;
       top: 0;
-      right: 0;
+      @include right(0);
       z-index: 11;
       width: 35px;
       height: 100%;
@@ -238,8 +238,8 @@
     .component-actions,
     .course-nav-item-actions {
       display: inline-block;
-      float: right;
-      margin-right: ($baseline*2);
+      @include float(right);
+      @include margin-right($baseline*2);
       padding: 8px 0px;
       vertical-align: middle;
       text-align: center;

cms/static/sass/views/_textbooks.scss

@@ -5,12 +5,10 @@
 
   .content-primary, .content-supplementary {
     @include box-sizing(border-box);
-    float: left;
   }
 
   .content-primary {
-    width: flex-grid(9, 12);
-    margin-right: flex-gutter();
+    @extend .ui-col-wide;
 
     .no-textbook-content {
       @extend %no-content;
@@ -31,7 +29,7 @@
         .textbook-title {
           @extend %t-title4;
           @extend %t-strong;
-          margin-right: ($baseline*14);
+          @include margin-right($baseline*14);
         }
 
         .ui-toggle-expansion {
@@ -85,7 +83,7 @@
           opacity: 0.0;
           position: absolute;
           top: $baseline;
-          right: $baseline;
+          @include right($baseline);
 
           .action {
             display: inline-block;
@@ -305,9 +303,9 @@
             display: block;
             width: 46%;
             border-bottom: none;
-            margin: 0 ($baseline*0.75) 0 0;
+            @include margin(0, ($baseline*0.75), 0, 0);
             padding: ($baseline/4) 0 0 0;
-            float: left;
+            @include float(left);
             position: relative;
 
             input, textarea {
@@ -318,7 +316,7 @@
                 @extend %ui-btn-flat-outline;
                 position: absolute;
                 top: 3px;
-                right: 0;
+                @include right(0);
             }
 
           }
@@ -354,6 +352,6 @@
   }
 }
   .content-supplementary {
-    width: flex-grid(3, 12);
+    @extend .ui-col-narrow;
   }
 }

cms/static/sass/views/_unit.scss

@@ -3,5 +3,5 @@
 // .view-unit styles will go here once we split it from container
 
 .view-unit {
- 
+
 }

cms/static/sass/views/_updates.scss

@@ -160,31 +160,31 @@
 }
 
 .course-handouts {
-  @extend %ui-window;
-  width: 30%;
-  padding: 20px 30px;
-  margin: 0;
-  border-radius: 0 3px 3px 0;
-  border-left: none;
-  background: $lightGrey;
-
-  .title {
-    @extend %t-title4;
+	@extend %ui-window;
+	width: 30%;
+	padding: 20px 30px;
+	margin: 0;
+	@include border-radius(0, 3px, 3px, 0);
+	@include border-left(none);
+	background: $lightGrey;
+
+	.title {
+		@extend %t-title4;
     @extend %t-light;
     margin-bottom: 24px;
-  }
+	}
 
-  .edit-button {
-    @include white-button();
+	.edit-button {
+    @include white-button;
     @extend %t-action4;
     @extend %t-regular;
-    float: right;
+		float: right;
     padding: 3px 10px 4px;
     margin-left: 7px;
 
     .edit-icon,
     .delete-icon {
-      margin-right: 4px;
+      @include margin-right($baseline/5);
     }
   }
 

cms/static/sass/views/_users.scss

@@ -6,16 +6,14 @@
   // LAYOUT: page
   .content-primary, .content-supplementary {
     @include box-sizing(border-box);
-    float: left;
   }
 
   .content-primary {
-    width: flex-grid(9, 12);
-    margin-right: flex-gutter();
+    @extend .ui-col-wide;
   }
 
   .content-supplementary {
-    width: flex-grid(3, 12);
+    @extend .ui-col-narrow;
   }
 
   // ELEM: content
@@ -123,7 +121,7 @@
       // ELEM: item - metadata
       .item-metadata {
         width: flex-grid(5, 9);
-        margin-right: flex-gutter();
+        @include margin-right(flex-gutter());
 
         .user-username, .user-email {
           display: inline-block;
@@ -134,7 +132,7 @@
           @include transition(color $tmg-f2 ease-in-out 0s);
           @extend %t-title4;
           @extend %t-strong;
-          margin: 0 ($baseline/2) ($baseline/10) 0;
+          @include margin(0, ($baseline/2), ($baseline/10), 0);
           color: $gray-d4;
         }
 

cms/templates/base.html

@@ -8,7 +8,12 @@
 <!--[if IE 8]><html class="ie8 lte9 lte8" lang="${LANGUAGE_CODE}"><![endif]-->
 <!--[if IE 9]><html class="ie9 lte9" lang="${LANGUAGE_CODE}"><![endif]-->
 <!--[if gt IE 9]><!--><html lang="${LANGUAGE_CODE}"><!--<![endif]-->
-  <head>
+<%
+    # set doc language direction
+    from django.utils.translation import get_language_bidi
+    dir_rtl = 'rtl' if get_language_bidi() else 'ltr'
+%>
+  <head dir="${dir_rtl}">
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
     <title>
@@ -35,7 +40,7 @@
     <%block name="header_extras"></%block>
   </head>
 
-  <body class="<%block name='bodyclass'></%block> hide-wip lang_${LANGUAGE_CODE}">
+  <body class="${dir_rtl} <%block name='bodyclass'></%block> hide-wip lang_${LANGUAGE_CODE}">
   <%block name="view_notes"></%block>
 
     <a class="nav-skip" href="#content">${_("Skip to this view's content")}</a>
@@ -341,7 +346,7 @@
     % endif
 
     <!-- view -->
-    <div class="wrapper wrapper-view">
+    <div class="wrapper wrapper-view" dir="${dir_rtl}">
         <% online_help_token = self.online_help_token() if hasattr(self, 'online_help_token') else None %>
         <%include file="widgets/header.html" args="online_help_token=online_help_token" />
 

cms/templates/js/asset.underscore

@@ -14,7 +14,7 @@
     <%= date_added %>
 </td>
 <td class="embed-col">
-    <input type="text" class="embeddable-xml-input" value="<%= portable_url %>" readonly>
+    <input type="text" class="embeddable-xml-input" value="<%= portable_url %>" readonly dir="ltr">
 </td>
 <td class="embed-col">
     <input type="text" class="embeddable-xml-input" value="<%= external_url %>" readonly>
@@ -30,4 +30,4 @@
             <div class="action-button"><i class="icon-lock"></i><i class="icon-unlock-alt"></i></div>
         </li>
     </ul>
-</td>
+</td>
\ No newline at end of file

cms/templates/js/edit-chapter.underscore

@@ -7,7 +7,7 @@
 <div class="input-wrap field text required field-add-chapter-asset chapter<%= order %>-asset
     <% if (error && error.attributes && error.attributes.asset_path) { print('error'); } %>">
   <label for="chapter<%= order %>-asset-path"><%= gettext("Chapter Asset") %></label>
-  <input id="chapter<%= order %>-asset-path" name="chapter<%= order %>-asset-path" class="chapter-asset-path" placeholder="<%= _.str.sprintf(gettext("path/to/introductionToCookieBaking-CH%d.pdf"), order) %>" value="<%= asset_path %>" type="text">
+  <input id="chapter<%= order %>-asset-path" name="chapter<%= order %>-asset-path" class="chapter-asset-path" placeholder="<%= _.str.sprintf(gettext("path/to/introductionToCookieBaking-CH%d.pdf"), order) %>" value="<%= asset_path %>" type="text" dir="ltr">
   <span class="tip tip-stacked"><%= gettext("upload a PDF file or provide the path to a Studio asset file") %></span>
 <button class="action action-upload"><%= gettext("Upload PDF") %></button>
 </div>

cms/templates/js/show-textbook.underscore

@@ -12,7 +12,7 @@
         <%= chapters.length %> PDF Chapters
     </a></p>
 <% } else if(chapters.length === 1) { %>
-    <p>
+    <p dir="ltr">
         <%= chapters.at(0).get("asset_path") %>
     </p>
 <% } %>

cms/templates/settings.html

@@ -261,7 +261,7 @@ require(["domReady!", "jquery", "js/models/settings/course_details", "js/views/s
 
                   <div class="wrapper-input">
                     <div class="input">
-                      <input type="text" class="long new-course-image-url" id="course-image-url" value="" placeholder="Your course image URL" autocomplete="off" />
+                      <input type="text" dir="ltr" class="long new-course-image-url" id="course-image-url" value="" placeholder="Your course image URL" autocomplete="off" />
                       <span class="tip tip-stacked">${_("Please provide a valid path and name to your course image (Note: only JPEG or PNG format supported)")}</span>
                     </div>
                     <button type="button" class="action action-upload-image">${_("Upload Course Image")}</button>
@@ -281,7 +281,7 @@ require(["domReady!", "jquery", "js/models/settings/course_details", "js/views/s
                   </div>
 
                   <div class="input">
-                    <input type="text" class="long new-course-introduction-video add-video-data" id="course-introduction-video" value="" placeholder="your YouTube video's ID" autocomplete="off" />
+                    <input type="text"  dir="ltr" class="long new-course-introduction-video add-video-data" id="course-introduction-video" value="" placeholder="your YouTube video's ID" autocomplete="off" />
                     <span class="tip tip-stacked">${_("Enter your YouTube video's ID (along with any restriction parameters)")}</span>
                   </div>
                 </li>

cms/templates/settings_graders.html

@@ -63,7 +63,7 @@ require(["domReady!", "jquery", "js/views/settings/grading", "js/models/settings
             <li class="field" id="field-course-grading-range">
               <div class="grade-controls course-grading-range well">
                 <a href="#" class="new-grade-button"><span class="plus-icon"></span></a>
-                <div class="grade-slider">
+                <div class="grade-slider" dir="ltr">
                   <div class="grade-bar">
                     <ol class="increments">
                       <li class="increment-0">0</li>

common/djangoapps/pipeline_mako/templates/static_content.html

 <%!
 from staticfiles.storage import staticfiles_storage
 from pipeline_mako import compressed_css, compressed_js
+from django.utils.translation import get_language_bidi
 %>
 
 <%def name='url(file, raw=False)'><%
@@ -11,6 +12,13 @@ except:
 %>${url}${"?raw" if raw else ""}</%def>
 
 <%def name='css(group, raw=False)'>
+  <%
+      rtl_group = '{}-rtl'.format(group)
+
+      if get_language_bidi() and rtl_group in settings.PIPELINE_CSS:
+        group = rtl_group
+  %>
+
   % if settings.FEATURES['USE_DJANGO_PIPELINE']:
     ${compressed_css(group, raw=raw)}
   % else:

common/djangoapps/util/cache.py

@@ -12,6 +12,8 @@ from django.core import cache
 
 # If we can't find a 'general' CACHE defined in settings.py, we simply fall back
 # to returning the default cache. This will happen with dev machines.
+from django.utils.translation import get_language
+
 try:
     cache = cache.get_cache('general')
 except Exception:
@@ -45,7 +47,7 @@ def cache_if_anonymous(view_func):
             # same view accessed through different domain names may
             # return different things, so include the domain name in the key.
             domain = str(request.META.get('HTTP_HOST')) + '.'
-            cache_key = domain + "cache_if_anonymous." + request.path
+            cache_key = domain + "cache_if_anonymous." + get_language() + '.' + request.path
             response = cache.get(cache_key)
             if not response:
                 response = view_func(request, *args, **kwargs)

common/lib/xmodule/xmodule/css/capa/display.scss

@@ -61,7 +61,7 @@ div.problem {
     width: 100px;
 
     label {
-      float: left;
+      @include float(left);
       clear: both;
       margin-bottom: 5px;
 
@@ -81,23 +81,23 @@ div.problem {
     }
 
     .indicator_container {
-      float: left;
+      @include float(left);
       width: 25px;
       height: 1px;
-      margin-right: 15px;
+      @include margin-right(15px);
     }
 
     fieldset {
       @include box-sizing(border-box);
       margin: 0px 0px $baseline;
-      padding-left: $baseline;
-      border-left: 1px solid #ddd;
+      @include padding-left($baseline);
+      @include border-left(1px solid #ddd);
     }
 
     input[type="radio"],
     input[type="checkbox"] {
-      float: left;
-      margin: 4px 8px 0 0;
+      @include float(left);
+      @include margin(4px, 8px, 0, 0);
     }
 
     text {
@@ -633,7 +633,8 @@ div.problem {
       // padding: 8px 12px;
       // margin-top: 10px;
       display: inline-block;
-      margin: 8px 0 0 $baseline/2;
+      margin-top: 8px;
+      @include margin-left($baseline/2);
       color: #666;
       font-style: italic;
       -webkit-font-smoothing: antialiased;

common/lib/xmodule/xmodule/css/sequence/display.scss

@@ -276,6 +276,7 @@ nav.sequence-nav {
           height: 100%;
           width: 40px;
           text-indent: -9999px;
+          overflow: hidden;
           @include transition(all .2s $ease-in-out-quad 0s);
 
 /*          &:focus {
@@ -294,23 +295,41 @@ nav.sequence-nav {
       }
 
       &.prev {
-        left: -10px;
-        border-radius: 35px 0 0 35px;
+        @include left(-10px);
+        @include border-radius(35px, 0, 0, 35px);
 
         a {
-          background-image: url('../images/sequence-nav/previous-icon.png');
           background-position: center 15px;
+
+          // CASE: left to right layout
+          @include ltr {
+            background-image: url('../images/sequence-nav/previous-icon.png');
+          }
+
+          // CASE: right to left layout
+          @include rtl {
+            background-image: url('../images/sequence-nav/next-icon.png');
+          }
         }
       }
 
       &.next {
-        right: -10px;
-        border-radius: 0 35px 35px 0;
+        @include right(-10px);
+        @include border-radius(0, 35px, 35px, 0);
 
         a {
-          margin-left: 30px;
-          background-image: url('../images/sequence-nav/next-icon.png');
+          @include margin-left(30px);
           background-position: center 15px;
+
+          // CASE: left to right layout
+          @include ltr {
+            background-image: url('../images/sequence-nav/next-icon.png');
+          }
+
+          // CASE: right to left layout
+          @include rtl {
+            background-image: url('../images/sequence-nav/previous-icon.png');
+          }
         }
       }
     }
@@ -334,7 +353,7 @@ nav.sequence-bottom {
     display: inline-block;
 
     li {
-      float: left;
+      @include float(left);
       width: 50px;
       height: 44px;
       border: 1px solid #ccc;
@@ -351,6 +370,7 @@ nav.sequence-bottom {
           display: block;
           padding: lh(.5) 4px;
           text-indent: -9999px;
+          overflow: hidden;
           @include transition(all .2s $ease-in-out-quad 0s);
 
           &:hover, &:focus {
@@ -369,21 +389,39 @@ nav.sequence-bottom {
       }
 
       &.prev {
-        border-radius: 35px 0 0 35px;
+        @include border-radius(35px, 0, 0, 35px);
 
         a {
-          background-image: url('../images/sequence-nav/previous-icon.png');
           background-position: center 15px;
+
+         // CASE: left to right layout
+         @include ltr {
+            background-image: url('../images/sequence-nav/previous-icon.png');
+          }
+
+          // CASE: right to left layout
+          @include rtl {
+            background-image: url('../images/sequence-nav/next-icon.png');
+          }
         }
       }
 
       &.next {
-        border-radius: 0 35px 35px 0;
-        border-left: none;
+        @include border-radius(0, 35px, 35px, 0);
+        @include border-left(none);
 
         a {
-          background-image: url('../images/sequence-nav/next-icon.png');
           background-position: center 15px;
+
+          // CASE: left to right layout
+          @include ltr {
+            background-image: url('../images/sequence-nav/next-icon.png');
+          }
+
+          // CASE: right to left layout
+          @include rtl {
+            background-image: url('../images/sequence-nav/previous-icon.png');
+          }
         }
       }
     }

common/lib/xmodule/xmodule/css/tabs/tabs.scss

@@ -23,7 +23,7 @@
 
   .edit-header {
     @include box-sizing(border-box);
-    padding: 18px 0 18px $baseline;
+    padding: 18px $baseline;
     top: 0 !important; // ugly override for second level tab override
     right: 0;
     background-color: $blue;

common/lib/xmodule/xmodule/css/video/display.scss

@@ -179,6 +179,7 @@ div.video {
         line-height: 46px;
         margin: 0;
         padding: 0 0 0 15px;
+        overflow: hidden;
         text-indent: -9999px;
         -webkit-font-smoothing: antialiased;
         box-shadow: 1px 0 0 #555, inset 1px 0 0 #555;

common/static/sass/_mixins.scss

@@ -87,6 +87,20 @@
   width: 100%;
 }
 
+// layout placeholders
+.ui-col-wide  {
+  width: flex-grid(9, 12);
+  @include margin-right(flex-gutter());
+  @include float(left);
+}
+
+.ui-col-narrow  {
+  width: flex-grid(3, 12);
+  @include float(left);
+}
+
+
+
 // extends - UI - window
 %ui-window {
   @include clearfix();

conf/locale/config.yaml

@@ -86,6 +86,7 @@ locales:
 dummy_locales:
     - eo
     - fake2
+    - en@rtl
 
 # Directories we don't search for strings.
 ignore_dirs:

lms/djangoapps/courseware/tests/test_i18n.py

@@ -17,7 +17,7 @@ class I18nTestCase(TestCase):
         self.assertIn('<html lang="en">', response.content)
         self.assertEqual(response['Content-Language'], 'en')
         self.assertTrue(re.search('<body.*class=".*lang_en">', response.content))
-        
+
     def test_esperanto(self):
         response = self.client.get('/', HTTP_ACCEPT_LANGUAGE='eo')
         self.assertIn('<html lang="eo">', response.content)

lms/envs/common.py

@@ -671,11 +671,14 @@ FAVICON_PATH = 'images/favicon.ico'
 # Locale/Internationalization
 TIME_ZONE = 'America/New_York'  # http://en.wikipedia.org/wiki/List_of_tz_zones_by_name
 LANGUAGE_CODE = 'en'  # http://www.i18nguy.com/unicode/language-identifiers.html
+# these languages display right to left
+LANGUAGES_BIDI = ("en@rtl", "he", "ar", "fa", "ur", "fa-ir")
 
 # Sourced from http://www.localeplanet.com/icu/ and wikipedia
 LANGUAGES = (
     ('en', u'English'),
-    ('eo', u'Dummy Language (Esperanto)'),  # Dummy language used for testing
+    ('en@rtl', u'English (right-to-left)'),
+    ('eo', u'Dummy Language (Esperanto)'),  # Dummy languaged used for testing
     ('fake2', u'Fake translations'),        # Another dummy language for testing (not pushed to prod)
 
     ('am', u'አማርኛ'),  # Amharic
@@ -1066,6 +1069,25 @@ PIPELINE_CSS = {
         ],
         'output_filename': 'css/lms-style-app-extend2.css',
     },
+    'style-app-rtl': {
+        'source_filenames': [
+            'sass/application-rtl.css',
+            'sass/ie-rtl.css'
+        ],
+        'output_filename': 'css/lms-style-app-rtl.css',
+    },
+    'style-app-extend1-rtl': {
+        'source_filenames': [
+            'sass/application-extend1-rtl.css',
+        ],
+        'output_filename': 'css/lms-style-app-extend1-rtl.css',
+    },
+    'style-app-extend2-rtl': {
+        'source_filenames': [
+            'sass/application-extend2-rtl.css',
+        ],
+        'output_filename': 'css/lms-style-app-extend2-rtl.css',
+    },
     'style-course-vendor': {
         'source_filenames': [
             'js/vendor/CodeMirror/codemirror.css',
@@ -1081,6 +1103,13 @@ PIPELINE_CSS = {
         ],
         'output_filename': 'css/lms-style-course.css',
     },
+    'style-course-rtl': {
+        'source_filenames': [
+            'sass/course-rtl.css',
+            'xmodule/modules.css',
+        ],
+        'output_filename': 'css/lms-style-course-rtl.css',
+    },
     'style-xmodule-annotations': {
         'source_filenames': [
             'css/vendor/ova/annotator.css',

lms/static/sass/application-extend1-rtl.scss.mako

+## NOTE: This Sass infrastructure is redundant, but needed in order to address an IE9 rule limit within CSS - http://blogs.msdn.com/b/ieinternals/archive/2011/05/14/10164546.aspx
+
+// lms - css application architecture (platform)
+// ====================
+
+// libs and resets *do not edit*
+@import 'bourbon/bourbon'; // lib - bourbon
+@import 'vendor/bi-app/bi-app-rtl'; // set the layout for right to left languages
+
+// BASE  *default edX offerings*
+// ====================
+
+// base - utilities
+@import 'base/reset';
+@import 'base/variables';
+@import 'base/mixins';
+
+## THEMING
+## -------
+## Set up this file to import an edX theme library if the environment
+## indicates that a theme should be used. The assumption is that the
+## theme resides outside of this main edX repository, in a directory
+## called themes/<theme-name>/, with its base Sass file in
+## themes/<theme-name>/static/sass/_<theme-name>.scss. That one entry
+## point can be used to @import in as many other things as needed.
+% if env["FEATURES"].get("USE_CUSTOM_THEME", False):
+  // import theme's Sass overrides
+  @import '${env.get('THEME_NAME')}';
+% endif
+
+@import 'base/base';
+
+// base - assets
+@import 'base/font_face';
+@import 'base/extends';
+@import 'base/animations';
+
+// base - starter
+@import 'base/base';
+
+// base - elements
+@import 'elements/typography';
+@import 'elements/controls';
+
+// shared - platform
+@import 'multicourse/home';
+@import 'multicourse/dashboard';
+@import 'multicourse/account';
+@import 'multicourse/courses';
+@import 'multicourse/course_about';
+@import 'multicourse/jobs';
+@import 'multicourse/media-kit';
+@import 'multicourse/about_pages';
+@import 'multicourse/press_release';
+@import 'multicourse/error-pages';
+@import 'multicourse/help';
+@import 'multicourse/edge';
+
+@import 'developer'; // used for any developer-created scss that needs further polish/refactoring
+@import 'shame';     // used for any bad-form/orphaned scss
+## NOTE: needed here for cascade and dependency purposes, but not a great permanent solution

lms/static/sass/application-extend1.scss.mako

 ## NOTE: This Sass infrastructure is redundant, but needed in order to address an IE9 rule limit within CSS - http://blogs.msdn.com/b/ieinternals/archive/2011/05/14/10164546.aspx
 
-
 // lms - css application architecture (platform)
 // ====================
 
 // libs and resets *do not edit*
 @import 'bourbon/bourbon'; // lib - bourbon
+@import 'vendor/bi-app/bi-app-ltr'; // set the layout for left to right languages
 
 // BASE  *default edX offerings*
 // ====================

lms/static/sass/application-extend2-rtl.scss.mako

+## NOTE: This Sass infrastructure is redundant, but needed in order to address an IE9 rule limit within CSS - http://blogs.msdn.com/b/ieinternals/archive/2011/05/14/10164546.aspx
+
+// lms - css application architecture (platform)
+// ====================
+
+// libs and resets *do not edit*
+@import 'bourbon/bourbon'; // lib - bourbon
+@import 'vendor/bi-app/bi-app-rtl'; // set the layout for right to left languages
+
+// BASE  *default edX offerings*
+// ====================
+
+// base - utilities
+@import 'base/reset';
+@import 'base/variables';
+@import 'base/mixins';
+
+## THEMING
+## -------
+## Set up this file to import an edX theme library if the environment
+## indicates that a theme should be used. The assumption is that the
+## theme resides outside of this main edX repository, in a directory
+## called themes/<theme-name>/, with its base Sass file in
+## themes/<theme-name>/static/sass/_<theme-name>.scss. That one entry
+## point can be used to @import in as many other things as needed.
+% if env["FEATURES"].get("USE_CUSTOM_THEME", False):
+  // import theme's Sass overrides
+  @import '${env.get('THEME_NAME')}';
+% endif
+
+@import 'base/base';
+
+// base - assets
+@import 'base/font_face';
+@import 'base/extends';
+@import 'base/animations';
+
+// base - starter
+@import 'base/base';
+
+// base - elements
+@import 'elements/typography';
+@import 'elements/controls';
+@import 'elements/system-feedback';
+
+// base - specific views
+@import 'views/verification';
+@import 'views/shoppingcart';
+
+// applications
+@import "discussion/utilities/variables";
+@import "discussion/mixins";
+@import 'discussion/discussion'; // Process old file after definitions but before everything else
+@import "discussion/elements/actions";
+@import "discussion/elements/editor";
+@import "discussion/elements/labels";
+@import "discussion/elements/navigation";
+@import "discussion/views/thread";
+@import "discussion/views/create-edit-post";
+@import "discussion/views/response";
+@import 'discussion/utilities/developer';
+@import 'discussion/utilities/shame';
+
+@import 'news';
+
+// temp - shame and developer
+@import 'developer'; // used for any developer-created scss that needs further polish/refactoring
+@import 'shame';     // used for any bad-form/orphaned scss
+## NOTE: needed here for cascade and dependency purposes, but not a great permanent solution

lms/static/sass/application-extend2.scss.mako

 ## NOTE: This Sass infrastructure is redundant, but needed in order to address an IE9 rule limit within CSS - http://blogs.msdn.com/b/ieinternals/archive/2011/05/14/10164546.aspx
 
-
 // lms - css application architecture (platform)
 // ====================
 
 // libs and resets *do not edit*
 @import 'bourbon/bourbon'; // lib - bourbon
+@import 'vendor/bi-app/bi-app-ltr'; // set the layout for left to right languages
 
 // BASE  *default edX offerings*
 // ====================

lms/static/sass/application-rtl.scss.mako

+## Note: This Sass infrastructure is repeated in application-extend1 and application-extend2, but needed in order to address an IE9 rule limit within CSS - http://blogs.msdn.com/b/ieinternals/archive/2011/05/14/10164546.aspx
+
+// lms - css application architecture
+// ====================
+
+// libs and resets *do not edit*
+@import 'bourbon/bourbon'; // lib - bourbon
+@import 'vendor/bi-app/bi-app-rtl'; // set the layout for right to left languages
+
+// BASE  *default edX offerings*
+// ====================
+
+// base - utilities
+@import 'base/reset';
+@import 'base/variables';
+@import 'base/mixins';
+
+## THEMING
+## -------
+## Set up this file to import an edX theme library if the environment
+## indicates that a theme should be used. The assumption is that the
+## theme resides outside of this main edX repository, in a directory
+## called themes/<theme-name>/, with its base Sass file in
+## themes/<theme-name>/static/sass/_<theme-name>.scss. That one entry
+## point can be used to @import in as many other things as needed.
+% if env["FEATURES"].get("USE_CUSTOM_THEME", False):
+  // import theme's Sass overrides
+  @import '${env.get('THEME_NAME')}';
+% endif
+
+@import 'base/base';
+
+// base - assets
+@import 'base/font_face';
+@import 'base/extends';
+@import 'base/animations';
+
+// base - starter
+@import 'base/base';
+
+// base - elements
+@import 'elements/typography';
+@import 'elements/controls';
+
+// shared - course
+@import 'shared/forms';
+@import 'shared/footer';
+@import 'shared/header';
+@import 'shared/course_object';
+@import 'shared/course_filter';
+@import 'shared/modal';
+@import 'shared/activation_messages';
+@import 'shared/unsubscribe';
+
+@import 'developer'; // used for any developer-created scss that needs further polish/refactoring
+@import 'shame';     // used for any bad-form/orphaned scss
+## NOTE: needed here for cascade and dependency purposes, but not a great permanent solution

lms/static/sass/application.scss.mako

@@ -5,6 +5,7 @@
 
 // libs and resets *do not edit*
 @import 'bourbon/bourbon'; // lib - bourbon
+@import 'vendor/bi-app/bi-app-ltr'; // set the layout for left to right languages
 
 // BASE  *default edX offerings*
 // ====================

lms/static/sass/base/_mixins.scss

@@ -54,7 +54,6 @@
 
 // ====================
 
-
 // extends - UI - used for page/view-level wrappers (for centering/grids)
 %ui-wrapper {
   @include clearfix();

lms/static/sass/base/_variables.scss

+// lms variables
+
 // base
 $baseline: 20px;
 

lms/static/sass/course-rtl.scss.mako

+@import 'bourbon/bourbon';
+@import 'vendor/bi-app/bi-app-rtl'; // set the layout for right to left languages
+
+@import 'base/reset';
+@import 'base/font_face';
+@import 'base/variables';
+@import 'base/mixins';
+
+## THEMING
+## -------
+## Set up this file to import an edX theme library if the environment
+## indicates that a theme should be used. The assumption is that the
+## theme resides outside of this main edX repository, in a directory
+## called themes/<theme-name>/, with its base Sass file in
+## themes/<theme-name>/static/sass/_<theme-name>.scss. That one entry
+## point can be used to @import in as many other things as needed.
+% if env["FEATURES"].get("USE_CUSTOM_THEME", False):
+  // import theme's Sass overrides
+  @import '${env.get('THEME_NAME')}';
+% endif
+
+@import 'base/base';
+@import 'base/extends';
+@import 'base/animations';
+@import 'shared/tooltips';
+
+// base - elements
+@import 'elements/typography';
+@import 'elements/controls';
+
+// Course base / layout styles
+@import 'course/layout/courseware_header';
+@import 'course/layout/footer';
+@import 'course/base/mixins';
+@import 'course/base/base';
+@import 'course/base/extends';
+@import 'xmodule/modules/css/module-styles.scss';
+
+// courseware
+@import 'course/courseware/courseware';
+@import 'course/courseware/sidebar';
+@import 'course/courseware/amplifier';
+@import 'course/layout/calculator';
+@import 'course/layout/timer';
+@import 'course/layout/chat';
+
+// course-specific courseware (all styles in these files should be gated by a
+// course-specific class). This should be replaced with a better way of
+// providing course-specific styling.
+@import "course/courseware/courses/_cs188.scss";
+
+// wiki
+@import "course/wiki/basic-html";
+@import "course/wiki/sidebar";
+@import "course/wiki/create";
+@import "course/wiki/wiki";
+@import "course/wiki/table";
+
+// pages
+@import "course/info";
+@import "course/syllabus"; // TODO arjun replace w/ custom tabs, see courseware/courses.py
+@import "course/textbook";
+@import "course/profile";
+@import "course/gradebook";
+@import "course/tabs";
+@import "course/staff_grading";
+@import "course/rubric";
+@import "course/open_ended_grading";
+
+// instructor
+@import "course/instructor/instructor";
+@import "course/instructor/instructor_2";
+@import "course/instructor/email";
+@import "xmodule/descriptors/css/module-styles.scss";
+
+// discussion
+@import "course/discussion/form-wmd-toolbar";

lms/static/sass/course.scss.mako

 @import 'bourbon/bourbon';
+@import 'vendor/bi-app/bi-app-ltr'; // set the layout for left to right languages
 
 @import 'base/reset';
 @import 'base/font_face';

lms/static/sass/course/_info.scss

@@ -80,7 +80,7 @@ div.info-wrapper {
   section.handouts {
     @extend .sidebar;
     border-radius: 0 4px 4px 0;
-    border-left: 1px solid #ddd;
+    @include border-left(1px solid #ddd);
     box-shadow: none;
     font-size: 14px;
 

lms/static/sass/course/_profile.scss

@@ -141,7 +141,7 @@
       margin-bottom: lh();
 
       h1 {
-        float: left;
+        @include float(left);
         font-size: 1em;
         font-weight: 100;
         margin: 0;
@@ -188,7 +188,7 @@
         }
 
         h2 {
-          border-right: 1px dashed #ddd;
+          @include border-right(1px dashed #ddd);
           @include box-sizing(border-box);
           display: table-cell;
           letter-spacing: 0;
@@ -201,7 +201,7 @@
 
         .sections {
           display: table-cell;
-          padding-left: flex-gutter(9);
+          @include padding-left(flex-gutter(9));
           width: flex-grid(7, 9);
 
           > div {

lms/static/sass/course/base/_base.scss

@@ -6,7 +6,7 @@ body {
 }
 
 body, h1, h2, h3, h4, h5, h6, p, p a:link, p a:visited, a, label {
-  text-align: left;
+  @include text-align(left);
   font-family: $sans-serif;
 }
 
@@ -49,7 +49,7 @@ form {
 form.choicegroup {
   label {
     clear: both;
-    float: left;
+    @include float(left);
   }
 }
 

lms/static/sass/course/base/_extends.scss

 h1.top-header {
   border-bottom: 1px solid $border-color-2;
-  text-align: left;
+  @include text-align(left);
   font-size: em(24);
   font-weight: 100;
   padding-bottom: lh();

lms/static/sass/course/base/_mixins.scss

+
 @mixin blue-button {
   display: block;
   height: 35px;
@@ -54,4 +55,4 @@
   &:hover, &:focus {
     background: -webkit-linear-gradient(top, #888, #666);
   }
-}
+}
\ No newline at end of file

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

@@ -23,7 +23,7 @@ html.video-fullscreen{
 
   .instructor-info-action {
     @extend %t-copy-sub2;
-    float: right;
+    @include float(right);
     margin-left: ($baseline/2);
     padding: ($baseline/4) ($baseline/2);
     border-radius: ($baseline/4);

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

 .course-index {
   @extend .sidebar;
   @extend .tran;
-  border-radius: 3px 0 0 3px;
-  border-right: 1px solid $border-color-2;
+  @include border-right(1px solid $border-color-2);
+  @include border-radius(3px, 0, 0, 3px);
 
   #open_close_accordion {
     display: none;
@@ -47,7 +47,7 @@
         a {
           border-radius: 0;
           box-shadow: none;
-          padding-left: 19px;
+          @include padding-left(19px);
           color: $link-color;
         }
 
@@ -61,9 +61,22 @@
         }
 
         span.ui-icon {
-          left: 0;
-          background-image: url("/static/images/ui-icons_222222_256x240.png");
+          @include left(0);
           opacity: 0.3;
+          background-image: url("/static/images/ui-icons_222222_256x240.png");  // jQuery UI sprite
+
+          &.ui-icon-triangle-1-e {
+
+            // CASE: left to right layout
+            @include ltr {
+              background-position: -32px -16px; // jQuery UI east arrow position
+            }
+
+           // CASE: right to left layout
+           @include rtl {
+              background-position: -96px -16px; // jQuery UI west arrow position
+            }
+          }
         }
       }
     }

lms/static/sass/course/instructor/_instructor.scss

@@ -185,3 +185,8 @@
 
 }
 
+.rtl .instructor-dashboard-wrapper .beta-button-wrapper,
+.rtl .instructor-dashboard-wrapper .studio-edit-link {
+  left: 2em;
+  right: auto;
+}

lms/static/sass/course/instructor/_instructor_2.scss

@@ -785,7 +785,6 @@ section.instructor-dashboard-content-2 {
         .info {
           @include box-sizing(border-box);
           padding: ($baseline/2);
-
           border: 1px solid $light-gray;
           color: $lighter-base-font-color;
           line-height: 1.3em;
@@ -833,7 +832,7 @@ section.instructor-dashboard-content-2 {
         input[type="button"].add {
           @include idashbutton($blue);
           position: absolute;
-          right: $baseline;
+          @include right($baseline);
         }
       }
 
@@ -1621,3 +1620,8 @@ input[name="subject"] {
   }
 }
 
+.rtl .instructor-dashboard-wrapper-2 .olddash-button-wrapper,
+.rtl .instructor-dashboard-wrapper-2 .studio-edit-link {
+  left: 2em;
+  right: auto;
+}

lms/static/sass/course/layout/_courseware_header.scss

@@ -16,10 +16,10 @@ nav.course-material {
     @include border-top-radius(4px);
     @include clearfix;
     padding: 28px 0 10px 0;
-    margin-left: 10px;
+    @include margin-left(10px);
 
     li {
-      float: left;
+      @include float(left);
       list-style: none;
       margin-right: 6px;
 
@@ -120,7 +120,7 @@ header.global.slim {
 
   h1.logo {
     margin: 0 10px 0 13px;
-    padding-right: 20px;
+    @include padding-right(20px);
 
     &:before {
       @extend %faded-vertical-divider;
@@ -128,7 +128,7 @@ header.global.slim {
       display: block;
       height: 35px;
       position: absolute;
-      right: 3px;
+      @include right(3px);
       top: 0;
       width: 1px;
     }
@@ -156,7 +156,7 @@ header.global.slim {
   h2 {
     display: block;
     width: 700px;
-    float: left;
+    @include float(left);
     font-size: 0.9em;
     font-weight: 600;
     color: $lighter-base-font-color;

lms/static/sass/course/layout/_courseware_subnav.scss

@@ -18,7 +18,7 @@ nav.course-material {
     padding: 10px 0 0 0;
 
     li {
-      float: left;
+      @include float(left);
       list-style: none;
 
       a {

lms/static/sass/discussion/_discussion.scss

@@ -3,15 +3,16 @@
 body.discussion {
 
   .course-tabs .right {
-    float: right;
+    @include float(right);
 
     .new-post-btn {
       @include blue-button;
-      margin-right: 4px;
+      @include margin-right(4px);
     }
 
     .new-post-icon {
-      margin: 8px 7px 0 0;
+      margin-top: 8px;
+      @include margin-right(7px);
       font-size: 16px;
       vertical-align: middle;
       color: $white;
@@ -241,7 +242,7 @@ body.discussion {
   }
 
   .discussion-column {
-    float: right;
+    @include float(right);
     @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;
+          @include 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;
+            @include 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
+          @include padding-left(40px);
+          @include padding-right(0);
+        }
+      }
     }
     .posted-by {
       font-weight: 700;
@@ -549,11 +557,21 @@ body.discussion {
       padding: 0 18px;
       width: 100%;
       box-shadow: 0 1px 1px $shadow-l1;
-      text-align: left;
+      @include text-align(left);
       font-size: 13px;
 
+      .icon-reply:before { // flip the icon for RTL
+        @include ltr {
+          content: "\f112"; // FA icon arrow to the left
+        }
+
+        @include rtl {
+          content: "\f064"; // FA icon arrow to the right
+        }
+      }
+
       span.add-response-btn-text {
-        padding-left: ($baseline/5);
+        @include padding-left($baseline/5);
       }
     }
   }
@@ -638,7 +656,7 @@ body.discussion {
 
   .discussion-submit-post {
     @include blue-button;
-    float: left;
+    @include float(left);
   }
 
   .wmd-button {
@@ -674,7 +692,17 @@ body.discussion {
       padding-left: ($baseline*1.5);
       width: 100%;
       box-shadow: 0 1px 1px $shadow-l1;
-      text-align: left;
+      @include text-align(left);
+
+      .icon-reply:before {
+        @include ltr {
+          content: "\f112"; // FA icon arrow to the left
+        }
+
+        @include rtl {
+          content: "\f064"; // FA icon arrow to the right
+        }
+      }
 
       &:hover, &:focus {
         @include linear-gradient(top, $white 35%, #ddd);
@@ -706,7 +734,7 @@ body.discussion {
       display: inline-block;
       position: relative;
       top: 5px;
-      margin-right: 6px;
+      @include margin-right(6px);
       width: 21px;
       height: 19px;
       background: url(../images/show-hide-discussion-icon.png) no-repeat;
@@ -716,7 +744,7 @@ body.discussion {
 
   .new-post-btn {
     display: inline-block;
-    float: right;
+    @include float(right);
   }
 
   section.discussion {
@@ -895,9 +923,10 @@ body.discussion {
     float: left;
     width: 16px;
     height: 17px;
-    margin: 8px 7px 0 0;
+    margin-top: 8px;
+    @include margin-right(7px);
     font-size: 16px;
-    padding-right: $baseline/2;
+    @include 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;
+  @include 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
+    @include padding-left(40px);
+    @include padding-right(0);
+  }
 }
 
 @-webkit-keyframes fadeIn {
@@ -130,11 +135,11 @@
   color: $color;
 
   .icon {
-    margin-right: ($baseline/5);
+    @include margin-right($baseline/5);
   }
 
   &:last-child {
-    margin-right: 0;
+    @include 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;
+    @include text-align(right);
 
     .actions-item {
       @include box-sizing(border-box);
@@ -58,7 +58,7 @@
       &:after,
       &:before {
         bottom: 100%;
-        right: 3px;
+        @include 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;
+        @include margin-right(1px);
       }
 
       &:before {
@@ -254,7 +254,7 @@
       display: block;
       padding: ($baseline/10) 0;
       white-space: nowrap;
-      text-align: right;
+      @include 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;
+  @include float(left);
   position: relative;
   width: 31%;
   border: 1px solid #aaa;
@@ -34,7 +34,7 @@
 
   .icon {
     @include font-size(14);
-    margin-right: ($baseline/4);
+    @include margin-right($baseline/4);
   }
 }
 
@@ -43,7 +43,7 @@
 }
 
 .forum-nav-browse-drop-arrow {
-  margin-left: ($baseline/4);
+  @include 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
+  @include 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);
+  @include margin-right($baseline/2);
 }
 
 // -------------------
@@ -135,14 +135,14 @@
   @include box-sizing(border-box);
   display: inline-block;
   width: 50%;
-  text-align: left;
+  @include text-align(left);
 }
 
 .forum-nav-filter-cohort, .forum-nav-sort {
   @include box-sizing(border-box);
   display: inline-block;
   width: 50%;
-  text-align: right;
+  @include text-align(right);
 }
 
 %forum-nav-select {
@@ -200,6 +200,13 @@
 
   .icon {
     @include font-size(14);
+
+    &:before {
+
+      @include rtl {
+        @include transform(scale(-1, 1)); // RTL for font awesome question mark
+      }
+    }
   }
 
   .icon-comments {
@@ -223,7 +230,7 @@
 .forum-nav-thread-wrapper-2 {
   @extend %forum-nav-thread-wrapper;
   width: 13%;
-  text-align: right;
+  @include text-align(right);
 }
 
 .forum-nav-thread-title {
@@ -251,7 +258,7 @@
   @extend %forum-nav-thread-wrapper-2-content;
   @extend %t-weight4;
   position: relative;
-  margin-left: ($baseline/4);
+  @include margin-left($baseline/4);
   margin-bottom: ($baseline/4); // Because tail is position: absolute
   border-radius: 2px;
   padding: ($baseline/10) ($baseline/5);
@@ -264,12 +271,12 @@
     display: block;
     position: absolute;
     bottom: (-$baseline/4);
-    right: ($baseline/4);
+    @include 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;
+    @include border-width(0, ($baseline/4), ($baseline/4), 0);
+    @include border-color(transparent, $gray-l3, transparent, transparent);
   }
 
   &.is-unread {

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

@@ -46,7 +46,7 @@
     .field-help {
       @include box-sizing(border-box);
       display: inline-block;
-      padding-left: $baseline;
+      @include padding-left($baseline);
       width: 50%;
       font-size: 12px;
     }
@@ -131,7 +131,7 @@
   .post-option {
     @include box-sizing(border-box);
     display: inline-block;
-    margin-right: $baseline;
+    @include margin-right($baseline);
     border: 1px solid transparent;
     border-radius: 3px;
     padding: ($baseline/2);

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

@@ -17,7 +17,7 @@ body.discussion, .discussion-module {
 
     .post-header-actions {
       display: inline-block;
-      float: right;
+      @include 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;
+      @include float(right);
     }
   }
 

lms/static/sass/multicourse/_account.scss

@@ -123,16 +123,16 @@
       // CASE: normal typographical headings
       h1 {
         @extend %heading-2;
+        @include text-align(left);
         margin-bottom: $baseline;
         padding-bottom: $baseline;
-        text-align: left;
       }
 
       // CASE: marketing/imageery-based headings
       .title {
         position: absolute;
         top: ($baseline*2.5);
-        left:($baseline*1.5);
+        @include 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);
+          @include margin-left($baseline*2);
           text-transform: lowercase;
           color: $header-graphic-sub-color;
         }
@@ -197,14 +197,14 @@
   }
 
   .content {
-    margin-right: ($baseline*2);
+    @include float(left);
+    @include margin-right($baseline*2);
     width: 600px;
-    float: left;
   }
 
   aside {
+    @include float(left);
     width: 280px;
-    float: left;
 
     p, ol, ul {
       font-size: 14px !important;
@@ -273,10 +273,10 @@
       margin: 0 0 $baseline 0;
 
       .field {
+        @include float(left);
+        @include margin(0, ($baseline*1.5), 0, 0);
         display: block;
-        float: left;
         border-bottom: none;
-        margin: 0 ($baseline*1.5) 0 0;
         padding-bottom: 0;
 
         input, textarea {
@@ -336,7 +336,7 @@
         .tip {
           position: absolute;
           top: 0;
-          right: 0;
+          @include right(0);
         }
       }
 
@@ -378,7 +378,7 @@
         input[type="checkbox"] {
           display: inline-block;
           width: auto;
-          margin-right: ($baseline/4);
+          @include margin-right($baseline/4);
         }
 
         label {
@@ -702,7 +702,7 @@
 
       h2 {
         @extend %heading-2;
-        text-align: left;
+        @include text-align(left);
       }
     }
 

lms/static/sass/multicourse/_course_about.scss

@@ -295,7 +295,7 @@
   }
 
   .details {
-    float: left;
+    @include float(left);
     margin-right: flex-gutter();
     width: flex-grid(8);
     font: normal 1em/1.6em $serif;
@@ -384,7 +384,7 @@
 
   .course-sidebar {
     @include box-sizing(border-box);
-    float: left;
+    @include float(left);
     width: flex-grid(4);
 
     > section {

lms/static/sass/multicourse/_courses.scss

@@ -42,14 +42,14 @@
 
         .logo {
           display: inline-block;
+          @include border-right(1px solid $light-gray);
           height: 80px;
-          margin-right: 30px;
-          padding-right: 30px;
+          @include margin-right(30px);
+          @include padding-right(30px);
           position: relative;
           vertical-align: middle;
 
           &::after {
-            @extend %faded-vertical-divider;
             content: "";
             display: block;
             height: 80px;

lms/static/sass/multicourse/_dashboard.scss

@@ -6,8 +6,9 @@
   padding: ($baseline*2) 0 0 0;
 
   .profile-sidebar {
-    float: left;
-    margin-right: flex-gutter();
+    background: transparent;
+    @include float(left);
+    @include margin-right(flex-gutter());
     width: flex-grid(3);
     background: transparent;
     box-shadow: 0 0 1px $shadow-l1;
@@ -278,7 +279,7 @@
 
   // course listings
   .my-courses {
-    float: left;
+    @include float(left);
     margin: 0px;
     width: flex-grid(9);
 
@@ -355,7 +356,7 @@
         @include transition(all 0.15s linear 0s);
         overflow: hidden;
         position: relative;
-        float: left;
+        @include float(left);
         height: 100%;
         max-height: 100%;
         width: 200px;
@@ -374,7 +375,7 @@
 
       .info {
         @include clearfix;
-        padding: 0 10px 0 230px;
+        @include padding(0, 10px, 0, 230px);
 
         > hgroup {
           padding: 0;
@@ -393,7 +394,7 @@
           .date-block {
             position: absolute;
             top: 0;
-            right: 0;
+            @include right(0);
             font-family: $sans-serif;
             font-size: 13px;
             font-style: italic;
@@ -451,7 +452,7 @@
           @include box-sizing(border-box);
           border-radius: 3px;
           display: block;
-          float: left;
+          @include float(left);
           font: normal 15px/1.6rem $sans-serif;
           letter-spacing: 0;
           padding: 6px 32px 7px;
@@ -888,7 +889,7 @@
     }
 
     a.unenroll {
-      float: right;
+      @include float(right);
       display: block;
       font-style: italic;
       color: $lighter-base-font-color;
@@ -903,7 +904,7 @@
 
     a.email-settings {
       @extend a.unenroll;
-      margin-right: 10px;
+      @include margin-right(10px);
     }
   }
 

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

 section.outside-app {
   @extend .container;
-  text-align: left;
+  @include text-align(left);
   padding: 80px 0;
 
   h1 {
     @extend h2;
     margin-bottom: 40px;
   }
-  
+
   p {
     max-width: 600px;
     margin: 0 auto;

lms/static/sass/shared/_course_object.scss

@@ -5,11 +5,11 @@
 
     .university-column {
       width: flex-grid(4);
-      margin-right: flex-gutter();
+      @include margin-right(flex-gutter());
       float: left;
 
       &:nth-child(3n+3) {
-        margin-right: 0;
+        @include margin-right(0);
       }
     }
 
@@ -21,11 +21,11 @@
 
       .courses-listing-item {
         width: flex-grid(4);
-        margin-right: flex-gutter();
-        float: left;
+        @include margin-right(flex-gutter());
+        @include float(left);
 
         &:nth-child(3n+3) {
-          margin-right: 0;
+          @include margin-right(0);
         }
       }
     }

lms/static/sass/shared/_footer.scss

@@ -32,16 +32,16 @@
 
     // colophon
     .colophon {
-      margin-right: flex-gutter();
+      @include margin-right(flex-gutter());
       width: flex-grid(8,12);
-      float: left;
+      @include float(left);
 
       .nav-colophon {
         @include clearfix();
         margin: $footer_margin;
 
         li {
-          float: left;
+          @include float(left);
           margin-right: ($baseline*0.75);
 
           a {
@@ -102,12 +102,12 @@
       margin: -2px 0 8px 0;
       font-size: em(11);
       color: $gray-l2;
-      text-align: left;
+      @include text-align(left);
     }
 
     .nav-legal {
       @include clearfix();
-      text-align: left;
+      @include text-align(left);
 
       li {
         display: inline-block;
@@ -154,10 +154,11 @@
 
     // platform Open edX logo and link
     .powered-by {
+      @include float(right);
       width: flex-grid(3,12);
       display: inline-block;
       vertical-align: bottom;
-      text-align: right;
+      @include text-align(right);
 
       a {
         display: inline-block;

lms/static/sass/shared/_header.scss

@@ -17,8 +17,8 @@ header.global {
   }
 
   h1.logo {
-    float: left;
-    margin: -2px 39px 0px 0px;
+    @include float(left);
+    @include margin(-2px, 39px, 0, 0);
     position: relative;
 
     a {
@@ -27,11 +27,11 @@ header.global {
   }
 
   .left {
-    float: left;
+    @include float(left);
   }
 
   .guest {
-    float: right;
+    @include float(right);
   }
 
   > li {
@@ -104,12 +104,12 @@ header.global {
   }
 
   .user {
-    float: right;
+    @include float(right);
     margin-top: 4px;
 
     > .primary {
       display: block;
-      float: left;
+      @include float(left);
       margin: 0px;
       position: relative;
 
@@ -120,14 +120,14 @@ header.global {
 
       &:last-child {
         > a {
-          border-radius: 0 4px 4px 0;
-          border-left: none;
+          @include border-radius(0, 4px, 4px, 0);
+          @include border-left(none);
           padding: 5px 8px 7px 8px;
 
           &.shopping-cart {
             border-radius: 4px;
             border: 1px solid $border-color-2;
-            margin-right: 10px;
+            @include margin-right(10px);
             padding-bottom: 6px;
           }
         }
@@ -135,7 +135,7 @@ header.global {
     }
 
     a.user-link {
-      padding: 6px 12px 8px 35px;
+      @include padding(6px, 12px, 8px, 35px);
       position: relative;
       text-transform: none;
       font-size: 14px;
@@ -145,9 +145,15 @@ header.global {
       .avatar {
         @include background-image(url('../images/small-header-home-icon.png'));
         background-repeat: no-repeat;
+
+        // CASE: right to left layout
+        @include rtl {
+          background-position: top right;
+        }
+
         height: 26px;
         display: inline-block;
-        left: 8px;
+        @include left(8px);
         opacity: 0.5;
         overflow: hidden;
         position: absolute;
@@ -171,7 +177,7 @@ header.global {
       display: none;
       padding: 5px 10px;
       position: absolute;
-      right: 0px;
+      @include right(0px);
       top: 34px;
       width: 170px;
       z-index: 3;
@@ -194,7 +200,7 @@ header.global {
         height: 0px;
         position: absolute;
         @include transform(rotate(-45deg));
-        right: 12px;
+        @include right(12px);
         top: -6px;
         width: 0px;
       }
@@ -236,7 +242,7 @@ header.global {
   .nav-global {
     margin-top: ($baseline/2);
     list-style: none;
-    float: left;
+    @include float(left);
 
     li,
     div {
@@ -279,7 +285,7 @@ header.global {
   }
 
   .nav-courseware {
-    float: right;
+    @include float(right);
     margin-top: ($baseline/4);
     list-style: none;
 
@@ -394,7 +400,7 @@ header.global-new {
   }
 
   .primary {
-    margin-right: 5px;
+    @include margin-right(5px);
 
     > a {
       @include background-image($button-bg-image);
@@ -415,7 +421,7 @@ header.global-new {
       vertical-align: middle;
 
       &:last-child {
-        margin-right: 0px;
+        @include margin-right(0);
       }
 
       &:hover, &:focus, &:active {
@@ -430,13 +436,13 @@ header.global-new {
 
     > .primary {
       display: block;
-      float: left;
-      margin: 0px;
+      @include float(left);
+      margin: 0;
       position: relative;
 
       > a {
         margin: 0px;
-        @include border-right-radius(0px);
+        @include border-right-radius(0);
       }
 
       &:last-child {
@@ -456,7 +462,7 @@ header.global-new {
     }
 
     a.user-link {
-      padding: 6px 12px 8px 35px;
+      @include padding(6px, 12px, 8px, 35px);
       position: relative;
       text-transform: none;
       font-size: 14px;
@@ -468,7 +474,7 @@ header.global-new {
         background-repeat: no-repeat;
         height: 26px;
         display: inline-block;
-        left: 8px;
+        @include left(8px);
         opacity: 0.5;
         overflow: hidden;
         position: absolute;
@@ -492,7 +498,7 @@ header.global-new {
       display: none;
       padding: 5px 10px;
       position: absolute;
-      right: 0px;
+      @include right(0);
       top: 34px;
       width: 170px;
       z-index: 3;
@@ -515,7 +521,7 @@ header.global-new {
         height: 0px;
         position: absolute;
         @include transform(rotate(-45deg));
-        right: 12px;
+        @include right(12px);
         top: -6px;
         width: 0px;
       }

lms/static/sass/vendor/bi-app/_bi-app-ltr.scss

+// ------------------------------------------
+// left to right module
+// authors: 
+// twitter.com/anasnakawa
+// twitter.com/victorzamfir
+// licensed under the MIT license 
+// http://www.opensource.org/licenses/mit-license.php
+// ------------------------------------------
+
+@import 'variables-ltr';
+@import 'mixins';
\ No newline at end of file

lms/static/sass/vendor/bi-app/_bi-app-rtl.scss

+// ------------------------------------------
+// right to left module
+// authors: 
+// twitter.com/anasnakawa
+// twitter.com/victorzamfir
+// licensed under the MIT license 
+// http://www.opensource.org/licenses/mit-license.php
+// ------------------------------------------
+
+@import 'variables-rtl';
+@import 'mixins';
\ No newline at end of file

lms/static/sass/vendor/bi-app/_mixins.scss

+// ------------------------------------------
+// bi app mixins
+// authors: 
+// twitter.com/anasnakawa
+// twitter.com/victorzamfir
+// licensed under the MIT license 
+// http://www.opensource.org/licenses/mit-license.php
+// ------------------------------------------
+
+// ------------------------------------------
+// Table of contents
+// ------------------------------------------
+// padding
+// margin
+// float
+// text align
+// clear
+// left / right
+// border
+//  - width
+//  - style
+//  - color
+//  - generic
+//  - radius
+// ltr / rtl contents
+// ------------------------------------------
+
+// generic mixin for properties with values
+// (top right bottom left)
+// ------------------------------------------
+@mixin bi-app-compact($property, $top, $right, $bottom, $left) {
+  @if $bi-app-direction == ltr {
+    #{$property}: $top $right $bottom $left;
+  } @else {
+    #{$property}: $top $left $bottom $right;
+  }
+}
+
+// padding
+// ------------------------------------------
+@mixin padding-left($distance) {
+  padding-#{$bi-app-left}: $distance;
+}
+
+@mixin padding-right($distance) {
+  padding-#{$bi-app-right}: $distance;
+}
+
+@mixin padding($top, $right, $bottom, $left) {
+  @include bi-app-compact(padding, $top, $right, $bottom, $left);
+}
+
+// margin
+// ------------------------------------------
+@mixin margin-left($distance) {
+  margin-#{$bi-app-left}: $distance;
+}
+
+@mixin margin-right($distance) {
+  margin-#{$bi-app-right}: $distance;
+}
+
+@mixin margin($top, $right, $bottom, $left) {
+  @include bi-app-compact(margin, $top, $right, $bottom, $left);
+}
+
+// float
+// ------------------------------------------
+@mixin bi-app-float-left {
+  float: $bi-app-left;
+}
+
+@mixin bi-app-float-right {
+  float: $bi-app-right;
+}
+
+@mixin float($direction) {
+  @if $direction == left {
+    @include bi-app-float-left;
+  } @else if $direction == right {
+    @include bi-app-float-right;
+  } @else {
+    float: $direction;
+  }
+}
+
+// text align
+// ------------------------------------------
+@mixin bi-app-text-align-left {
+  text-align: $bi-app-left;
+}
+
+@mixin bi-app-text-align-right {
+  text-align: $bi-app-right;
+}
+
+@mixin text-align($direction) {
+  @if $direction == left {
+    @include bi-app-text-align-left;
+  } @else if $direction == right {
+    @include bi-app-text-align-right;
+  } @else {
+    text-align: $direction;
+  }
+}
+
+// clear
+// ------------------------------------------
+@mixin bi-app-clear-left {
+  clear: $bi-app-left;
+}
+
+@mixin bi-app-clear-right {
+  clear: $bi-app-right;
+}
+
+@mixin clear($direction) {
+  @if $direction == left {
+    @include bi-app-clear-left;
+  } @else if $direction == right {
+    @include bi-app-clear-right;
+  } @else {
+    clear: $direction;
+  }
+}
+
+// left / right
+// ------------------------------------------
+@mixin left($distance) {
+  @if $bi-app-direction == ltr {
+    left: $distance;
+  } @else if $bi-app-direction == rtl {
+    right: $distance;
+  }
+}
+
+@mixin right($distance) {
+  @if $bi-app-direction == ltr {
+    right: $distance;
+  } @else if $bi-app-direction == rtl {
+    left: $distance;
+  }
+}
+
+// border
+// ------------------------------------------
+
+// width
+@mixin border-left-width($width) {
+  border-#{$bi-app-left}-width: $width;
+}
+
+@mixin border-right-width($width) {
+  border-#{$bi-app-right}-width: $width;
+}
+
+@mixin border-width($top, $right, $bottom, $left) {
+  @include bi-app-compact(border-width, $top, $right, $bottom, $left);
+}
+
+// style
+@mixin border-left-style($style) {
+  border-#{$bi-app-left}-style: $style;
+}
+
+@mixin border-right-style($style) {
+  border-#{$bi-app-right}-style: $style;
+}
+
+@mixin border-style($top, $right, $bottom, $left) {
+  @include bi-app-compact(border-style, $top, $right, $bottom, $left);
+}
+
+// color
+@mixin border-left-color($color) {
+  border-#{$bi-app-left}-color: $color;
+}
+
+@mixin border-right-color($color) {
+  border-#{$bi-app-right}-color: $color;
+}
+
+@mixin border-color($top, $right, $bottom, $left) {
+  @include bi-app-compact(border-color, $top, $right, $bottom, $left);
+}
+
+// generic
+@mixin border-left($border-style) {
+  border-#{$bi-app-left}: $border-style;
+}
+
+@mixin border-right($border-style) {
+  border-#{$bi-app-right}: $border-style;
+}
+
+// radius
+@mixin border-top-left-radius($radius) {
+  -webkit-border-top-#{$bi-app-left}-radius: $radius;
+     -moz-border-top#{$bi-app-left}-radius: $radius;
+          border-top-#{$bi-app-left}-radius: $radius;
+}
+
+@mixin border-top-right-radius($radius) {
+  -webkit-border-top-#{$bi-app-right}-radius: $radius;
+     -moz-border-top#{$bi-app-right}-radius: $radius;
+          border-top-#{$bi-app-right}-radius: $radius;
+}
+
+@mixin border-bottom-left-radius($radius) {
+  -webkit-border-bottom-#{$bi-app-left}-radius: $radius;
+     -moz-border-bottom#{$bi-app-left}-radius: $radius;
+          border-bottom-#{$bi-app-left}-radius: $radius;
+}
+
+@mixin border-bottom-right-radius($radius) {
+  -webkit-border-bottom-#{$bi-app-right}-radius: $radius;
+     -moz-border-bottom#{$bi-app-right}-radius: $radius;
+          border-bottom-#{$bi-app-right}-radius: $radius;
+}
+
+@mixin border-right-radius($radius) {
+  @include border-top-right-radius($radius);
+  @include border-bottom-right-radius($radius);
+}
+
+@mixin border-left-radius($radius) {
+  @include border-top-left-radius($radius);
+  @include border-bottom-left-radius($radius);
+}
+
+@mixin border-top-radius($radius) {
+  @include border-top-left-radius($radius);
+  @include border-top-right-radius($radius);
+}
+
+@mixin border-bottom-radius($radius) {
+  @include border-bottom-left-radius($radius);
+  @include border-bottom-right-radius($radius);
+}
+
+@mixin border-radius($topLeft, $topRight: null, $bottomRight: null, $bottomLeft: null) {
+  @if $topRight != null {
+    @include border-top-left-radius($topLeft);
+    @include border-top-right-radius($topRight);
+    @include border-bottom-right-radius($bottomRight);
+    @include border-bottom-left-radius($bottomLeft);
+  } @else {
+    -webkit-border-radius: $topLeft;
+       -moz-border-radius: $topLeft;
+        -ms-border-radius: $topLeft;
+         -o-border-radius: $topLeft;
+            border-radius: $topLeft;
+  }
+}
+
+// Returns "en" or "ar", useful for image suffixes.
+// Usage: background-image: url(/img/header-#{lang()}.png);
+@function lang() {
+  @if $bi-app-direction == ltr {
+    @return 'en';
+  } @else {
+    @return 'ar';
+  }
+}
+
+// Support for "direction" declaration (renders ltr/rtl).
+// Useful for form elements as they swap the text-indent property and align the text accordingly.
+@mixin direction {
+  direction: $bi-app-direction;
+}
+
+// Inverts a percentage value. Example: 97% becames 3%.
+// Useful for background-position.
+@function bi-app-invert-percentage($percentage) {
+  @if $bi-app-direction == rtl {
+    @return 100% - $percentage;
+  } @else {
+    @return $percentage;
+  }
+}
+
+// ltr / rtl contents
+// ------------------------------------------
+@mixin ltr {
+  @if $bi-app-direction == ltr {
+    @content;
+  }
+}
+
+@mixin rtl {
+  @if $bi-app-direction == rtl {
+    @content;
+  }
+}

lms/static/sass/vendor/bi-app/_variables-ltr.scss

+// ------------------------------------------
+// left to right variables to be used by bi-app mixins
+// authors: 
+// twitter.com/anasnakawa
+// twitter.com/victorzamfir
+// licensed under the MIT license 
+// http://www.opensource.org/licenses/mit-license.php
+// ------------------------------------------
+
+// namespacing variables with bi-app to
+// avoid conflicting with other global variables
+$bi-app-left 				    : left;
+$bi-app-right 				  : right;
+$bi-app-direction 			: ltr;
+$bi-app-invert-direction: rtl;
\ No newline at end of file

lms/static/sass/vendor/bi-app/_variables-rtl.scss

+// ------------------------------------------
+// right to left variables to be used by bi-app mixins
+// authors: 
+// twitter.com/anasnakawa
+// twitter.com/victorzamfir
+// licensed under the MIT license 
+// http://www.opensource.org/licenses/mit-license.php
+// ------------------------------------------
+
+// namespacing variables with bi-app to
+// avoid conflicting with other global variables
+$bi-app-left 				    : right;
+$bi-app-right           : left;
+$bi-app-direction 			: rtl;
+$bi-app-invert-direction: ltr;
\ No newline at end of file

lms/templates/main.html

@@ -3,7 +3,12 @@
 <!--[if IE 8]><html class="ie ie8 lte9 lte8" lang="${LANGUAGE_CODE}"><![endif]-->
 <!--[if IE 9]><html class="ie ie9 lte9" lang="${LANGUAGE_CODE}"><![endif]-->
 <!--[if gt IE 9]><!--><html lang="${LANGUAGE_CODE}"><!--<![endif]-->
-<head>
+<%
+    # set doc language direction
+    from django.utils.translation import get_language_bidi
+    dir_rtl = 'rtl' if get_language_bidi() else 'ltr'
+%>
+<head dir="${dir_rtl}">
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 <%! from django.utils.translation import ugettext as _ %>
@@ -117,19 +122,26 @@
 
 </head>
 
-<body class="<%block name='bodyclass'/> lang_${LANGUAGE_CODE}">
-  <a class="nav-skip" href="<%block name="nav_skip">#content</%block>">${_("Skip to this view's content")}</a>
+<body class="${dir_rtl} <%block name='bodyclass'/> lang_${LANGUAGE_CODE}">
+  <div class="window-wrap" dir="${dir_rtl}">
+    <a class="nav-skip" href="<%block name="nav_skip">#content</%block>">${_("Skip to this view's content")}</a>
 
-  <%include file="mathjax_accessible.html" />
+    <%include file="mathjax_accessible.html" />
 
-  <%include file="${header_file}" />
+  % if not suppress_toplevel_navigation:
+    <%include file="${header_file}" />
+  %endif
 
-  <div class="content-wrapper" id="content">
-    ${self.body()}
-    <%block name="bodyextra"/>
-  </div>
+    <div class="content-wrapper" id="content">
+      ${self.body()}
+      <%block name="bodyextra"/>
+    </div>
 
-  <%include file="${footer_file}" />
+  % if not suppress_toplevel_navigation:
+    <%include file="${footer_file}" />
+  % endif
+
+  </div>
 
   <script>window.baseUrl = "${settings.STATIC_URL}";</script>
   % if not disable_courseware_js: