cleanup and response to PR review

cms/envs/common.py

@@ -370,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,17 +279,17 @@ p, ul, ol, dl {
       @include clearfix();
 
       .page-header {
-        width: flex-grid(6,12);
         @include float(left);
         @include margin-right(flex-gutter());
+        width: flex-grid(6,12);
       }
 
       .nav-actions {
+        @include float(left);
+        @include text-align(right);
         position: relative;
         bottom: -($baseline*0.75);
         width: flex-grid(6,12);
-        @include float(left);
-        @include text-align(right);
 
         .nav-item {
           display: inline-block;

cms/static/sass/_config.scss

-// studio - config
-// ====================
-
-// setting the layout to handle right to left languages
-// false= lang direction left to right (eg. english); true = rtl (eg. arabic)
-$rtl: false;

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/_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/_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
 // ====================
 
-@import 'vendor/bi-app/bi-app-rtl'; // set the layout for right to left languages
-
 // 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*
 // ====================
@@ -13,7 +12,6 @@
 // BASE  *default edX offerings*
 // ====================
 // base - utilities
-@import 'config';
 @import 'variables';
 @import 'mixins';
 @import 'mixins-inherited';

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

@@ -13,7 +13,6 @@
 // BASE  *default edX offerings*
 // ====================
 // base - utilities
-@import 'config';
 @import 'variables';
 @import 'mixins';
 @import 'mixins-inherited';

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

 // studio - css architecture
 // ====================
 
-@import 'vendor/bi-app/bi-app-rtl'; // set the layout for right to left languages
-
 // 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*
 // ====================
@@ -13,7 +12,6 @@
 // BASE  *default edX offerings*
 // ====================
 // base - utilities
-@import 'config';
 @import 'variables';
 @import 'mixins';
 @import 'mixins-inherited';

cms/static/sass/style-app.scss

@@ -13,7 +13,6 @@
 // BASE  *default edX offerings*
 // ====================
 // base - utilities
-@import 'config';
 @import 'variables';
 @import 'mixins';
 @import 'mixins-inherited';

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

 // studio - xmodule architecture
 // ====================
 
-@import 'vendor/bi-app/bi-app-ltr'; // set the layout for right to left languages
-
 // 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*
 // ====================
@@ -13,7 +12,6 @@
 // BASE  *default edX offerings*
 // ====================
 // base - utilities
-@import 'config';
 @import 'variables';
 @import 'mixins';
 @import 'mixins-inherited';

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

 // ------------------------------------------
 // bi app mixins
-// authors: 
+// authors:
 // twitter.com/anasnakawa
 // twitter.com/victorzamfir
-// licensed under the MIT license 
+// licensed under the MIT license
 // http://www.opensource.org/licenses/mit-license.php
 // ------------------------------------------
 

cms/static/sass/views/_account.scss

@@ -53,7 +53,7 @@
   }
 
   .content-primary {
-    @extend %ui-col-wide;
+    @extend .ui-col-wide;
 
     form {
       @include box-sizing(border-box);
@@ -209,7 +209,7 @@
   }
 
   .content-supplementary {
-    @extend %ui-col-narrow;
+    @extend .ui-col-narrow;
 
     .bit {
       @extend %t-copy-sub1;

cms/static/sass/views/_assets.scss

@@ -8,11 +8,11 @@
   }
 
   .content-primary {
-    @extend %ui-col-wide;
+    @extend .ui-col-wide;
   }
 
   .content-supplementary {
-    @extend %ui-col-narrow;
+    @extend .ui-col-narrow;
   }
 
   .nav-actions {

cms/static/sass/views/_checklists.scss

@@ -8,7 +8,7 @@
   }
 
   .content-primary {
-    @extend %ui-col-wide;
+    @extend .ui-col-wide;
   }
 
   // checklists - general
@@ -336,6 +336,6 @@
   }
 
   .content-supplementary {
-    @extend %ui-col-narrow;
+    @extend .ui-col-narrow;
   }
 }

cms/static/sass/views/_dashboard.scss

@@ -14,18 +14,18 @@
 
   // ====================
 
-	// basic layout
-	.content-primary, .content-supplementary {
-	  @include box-sizing(border-box);
-	}
+  // basic layout
+  .content-primary, .content-supplementary {
+    @include box-sizing(border-box);
+  }
 
-	.content-primary {
-	  @extend %ui-col-wide;
-	}
+  .content-primary {
+    @extend .ui-col-wide;
+  }
 
-	.content-supplementary {
-	  @extend %ui-col-narrow;
-	}
+  .content-supplementary {
+    @extend .ui-col-narrow;
+  }
 
   // ====================
 
@@ -437,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;
     }
 
@@ -484,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

@@ -9,11 +9,11 @@
   }
 
   .content-primary {
-    @extend %ui-col-wide;
+    @extend .ui-col-wide;
   }
 
   .content-supplementary {
-    @extend %ui-col-narrow;
+    @extend .ui-col-narrow;
   }
 
 

cms/static/sass/views/_import.scss

@@ -8,11 +8,11 @@
   }
 
   .content-primary {
-    @extend %ui-col-wide;
+    @extend .ui-col-wide;
   }
 
   .content-supplementary {
-    @extend %ui-col-narrow;
+    @extend .ui-col-narrow;
   }
 
   // UI: export controls

cms/static/sass/views/_outline.scss

@@ -73,7 +73,7 @@
   }
 
   .content-primary {
-    @extend %ui-col-wide;
+    @extend .ui-col-wide;
 
     .no-content {
       @extend %no-content;
@@ -81,7 +81,7 @@
   }
 
   .content-supplementary {
-    @extend %ui-col-narrow;
+    @extend .ui-col-narrow;
   }
 
 
@@ -295,7 +295,7 @@
       }
 
       .section-header-details {
-        float: left;
+        @include float(left);
         width: flex-grid(6, 9);
 
         .icon, .wrapper-section-title {
@@ -304,7 +304,7 @@
         }
 
         .icon {
-          margin-right: ($baseline/4);
+          @include margin-right($baseline/4);
         }
 
         .wrapper-section-title {
@@ -314,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;
@@ -383,7 +383,7 @@
       }
 
       .subsection-header-details {
-        float: left;
+        @include float(left);
         width: flex-grid(6, 9);
 
         .icon, .wrapper-subsection-title {
@@ -392,7 +392,7 @@
         }
 
         .icon {
-          margin-right: ($baseline/4);
+          @include margin-right($baseline/4);
         }
 
         .wrapper-subsection-title {
@@ -403,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;
@@ -422,7 +422,7 @@
 
       // status
       .subsection-status {
-        margin: 0 0 0 $outline-indent-width;
+        @include margin(0, 0, 0, $outline-indent-width);
       }
 
       // content
@@ -465,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;
@@ -495,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

@@ -9,7 +9,7 @@
 
   .content-primary {
     @extend %ui-window;
-    @extend %ui-col-wide;
+    @extend .ui-col-wide;
     padding: $baseline ($baseline*1.5);
   }
 
@@ -897,7 +897,7 @@
   }
 
   .content-supplementary {
-    @extend %ui-col-narrow;
+    @extend .ui-col-narrow;
   }
 
   .wrapper-modal-window {

cms/static/sass/views/_textbooks.scss

@@ -8,7 +8,7 @@
   }
 
   .content-primary {
-    @extend %ui-col-wide;
+    @extend .ui-col-wide;
 
     .no-textbook-content {
       @extend %no-content;
@@ -303,7 +303,7 @@
             display: block;
             width: 46%;
             border-bottom: none;
-            @include margin(0 ($baseline*0.75) 0 0);
+            @include margin(0, ($baseline*0.75), 0, 0);
             padding: ($baseline/4) 0 0 0;
             @include float(left);
             position: relative;
@@ -352,6 +352,6 @@
   }
 }
   .content-supplementary {
-    @extend %ui-col-narrow;
+    @extend .ui-col-narrow;
   }
 }

cms/static/sass/views/_updates.scss

@@ -164,7 +164,7 @@
 	width: 30%;
 	padding: 20px 30px;
 	margin: 0;
-	@include border-radius(0 3px 3px 0);
+	@include border-radius(0, 3px, 3px, 0);
 	@include border-left(none);
 	background: $lightGrey;
 
@@ -184,7 +184,7 @@
 
     .edit-icon,
     .delete-icon {
-      @include margin-right(4px);
+      @include margin-right($baseline/5);
     }
   }
 

cms/static/sass/views/_users.scss

@@ -9,11 +9,11 @@
   }
 
   .content-primary {
-    @extend %ui-col-wide;
+    @extend .ui-col-wide;
   }
 
   .content-supplementary {
-    @extend %ui-col-narrow;
+    @extend .ui-col-narrow;
   }
 
   // ELEM: content
@@ -132,7 +132,7 @@
           @include transition(color $tmg-f2 ease-in-out 0s);
           @extend %t-title4;
           @extend %t-strong;
-          @include margin(0 ($baseline/2) ($baseline/10) 0);
+          @include margin(0, ($baseline/2), ($baseline/10), 0);
           color: $gray-d4;
         }
 

cms/templates/base.html

@@ -9,7 +9,7 @@
 <!--[if IE 9]><html class="ie9 lte9" lang="${LANGUAGE_CODE}"><![endif]-->
 <!--[if gt IE 9]><!--><html lang="${LANGUAGE_CODE}"><!--<![endif]-->
 <%
-    # This should be done someplace more central.
+    # set doc language direction
     from django.utils.translation import get_language_bidi
     dir_rtl = 'rtl' if get_language_bidi() else 'ltr'
 %>

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

@@ -97,7 +97,7 @@ div.problem {
     input[type="radio"],
     input[type="checkbox"] {
       @include float(left);
-      @include margin(4px 8px 0 0);
+      @include margin(4px, 8px, 0, 0);
     }
 
     text {

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 {
@@ -295,15 +296,17 @@ nav.sequence-nav {
 
       &.prev {
         @include left(-10px);
-        @include border-radius(35px 0 0 35px);
+        @include border-radius(35px, 0, 0, 35px);
 
         a {
           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');
           }
@@ -312,16 +315,18 @@ nav.sequence-nav {
 
       &.next {
         @include right(-10px);
-        @include border-radius(0 35px 35px 0);
+        @include border-radius(0, 35px, 35px, 0);
 
         a {
           @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');
           }
@@ -365,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 {
@@ -383,15 +389,17 @@ nav.sequence-bottom {
       }
 
       &.prev {
-        @include border-radius(35px 0 0 35px);
+        @include border-radius(35px, 0, 0, 35px);
 
         a {
           background-position: center 15px;
 
-          @include ltr {
+         // 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');
           }
@@ -399,16 +407,18 @@ nav.sequence-bottom {
       }
 
       &.next {
-        @include border-radius(0 35px 35px 0);
+        @include border-radius(0, 35px, 35px, 0);
         @include border-left(none);
 
         a {
           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/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

@@ -88,13 +88,13 @@
 }
 
 // layout placeholders
-%ui-col-wide  {
+.ui-col-wide  {
   width: flex-grid(9, 12);
   @include margin-right(flex-gutter());
   @include float(left);
 }
 
-%ui-col-narrow  {
+.ui-col-narrow  {
   width: flex-grid(3, 12);
   @include float(left);
 }

lms/envs/common.py

@@ -672,7 +672,7 @@ FAVICON_PATH = 'images/favicon.ico'
 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")
+LANGUAGES_BIDI = ("en@rtl", "he", "ar", "fa", "ur", "fa-ir")
 
 # Sourced from http://www.localeplanet.com/icu/ and wikipedia
 LANGUAGES = (

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

@@ -12,7 +12,6 @@
 
 // base - utilities
 @import 'base/reset';
-@import 'base/config';
 @import 'base/variables';
 @import 'base/mixins';
 

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

@@ -12,7 +12,6 @@
 
 // base - utilities
 @import 'base/reset';
-@import 'base/config';
 @import 'base/variables';
 @import 'base/mixins';
 

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

@@ -12,7 +12,6 @@
 
 // base - utilities
 @import 'base/reset';
-@import 'base/config';
 @import 'base/variables';
 @import 'base/mixins';
 

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

@@ -12,7 +12,6 @@
 
 // base - utilities
 @import 'base/reset';
-@import 'base/config';
 @import 'base/variables';
 @import 'base/mixins';
 

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

@@ -12,7 +12,6 @@
 
 // base - utilities
 @import 'base/reset';
-@import 'base/config';
 @import 'base/variables';
 @import 'base/mixins';
 

lms/static/sass/application.scss.mako

@@ -12,7 +12,6 @@
 
 // base - utilities
 @import 'base/reset';
-@import 'base/config';
 @import 'base/variables';
 @import 'base/mixins';
 

lms/static/sass/base/_config.scss

-// lms - config
-// ====================
-// TODO: make the RTL variable work here for LMS and xmodules
-// setting the layout to handle right to left languages
-// false= lang direction left to right (eg. english); true = rtl (eg. arabic)
-//$rtl: true;
-// does not work here - is in LMS variables

lms/static/sass/base/_mixins.scss

@@ -54,11 +54,6 @@
 
 // ====================
 
-// Cross-browsers transform
-@mixin transform($transform-functions) {
-  @include prefixer(transform, $transform-functions, webkit moz ms o spec);
-}
-
 // extends - UI - used for page/view-level wrappers (for centering/grids)
 %ui-wrapper {
   @include clearfix();

lms/static/sass/base/_variables.scss

 // lms variables
 
-// setting the layout to handle right to left languages
-// false= lang direction left to right (eg. english); true = rtl (eg. arabic)
-$rtl: false;
-
-
 // base
 $baseline: 20px;
 

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

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

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

@@ -2,7 +2,7 @@
   @extend .sidebar;
   @extend .tran;
   @include border-right(1px solid $border-color-2);
-  @include border-radius(3px 0 0 3px);
+  @include border-radius(3px, 0, 0, 3px);
 
   #open_close_accordion {
     display: none;
@@ -66,11 +66,14 @@
           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
             }
 
-            @include rtl {
+           // CASE: right to left layout
+           @include rtl {
               background-position: -96px -16px; // jQuery UI west arrow position
             }
           }

lms/static/sass/discussion/_discussion.scss

@@ -734,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;
@@ -744,7 +744,7 @@ body.discussion {
 
   .new-post-btn {
     display: inline-block;
-    float: right;
+    @include float(right);
   }
 
   section.discussion {

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/multicourse/_dashboard.scss

@@ -452,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;

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

@@ -146,6 +146,7 @@ header.global {
         @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;
         }
@@ -420,7 +421,7 @@ header.global-new {
       vertical-align: middle;
 
       &:last-child {
-        @include margin-right(0px);
+        @include margin-right(0);
       }
 
       &:hover, &:focus, &:active {
@@ -436,12 +437,12 @@ header.global-new {
     > .primary {
       display: block;
       @include float(left);
-      margin: 0px;
+      margin: 0;
       position: relative;
 
       > a {
         margin: 0px;
-        @include border-right-radius(0px);
+        @include border-right-radius(0);
       }
 
       &:last-child {
@@ -497,7 +498,7 @@ header.global-new {
       display: none;
       padding: 5px 10px;
       position: absolute;
-      @include right(0px);
+      @include right(0);
       top: 34px;
       width: 170px;
       z-index: 3;

lms/templates/main.html

@@ -4,7 +4,7 @@
 <!--[if IE 9]><html class="ie ie9 lte9" lang="${LANGUAGE_CODE}"><![endif]-->
 <!--[if gt IE 9]><!--><html lang="${LANGUAGE_CODE}"><!--<![endif]-->
 <%
-    # This should be done someplace more central.
+    # set doc language direction
     from django.utils.translation import get_language_bidi
     dir_rtl = 'rtl' if get_language_bidi() else 'ltr'
 %>