Initial pass at LMS and Studio RTL

cms/static/sass/_base.scss

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

cms/static/sass/_config.scss

@@ -0,0 +1,6 @@
+// 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/_header.scss

@@ -27,14 +27,14 @@
   }
 
   .wrapper-l {
-    float: left;
+    float: flip(left, right);
     width: flex-grid(7,12);
   }
 
   .wrapper-r {
-    float: right;
+    float: flip(right, left);
     width: flex-grid(4,12);
-    text-align: right;
+    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;
+    #{$margin-right}: flex-gutter();
+    #{$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);
+      #{$margin-right}: ($baseline/4);
     }
 
     .course-title {
@@ -184,7 +184,7 @@
     padding: ($baseline*0.75) 0;
 
     .nav-sub {
-      text-align: left;
+      text-align: $left;
     }
 
     .nav-account-help {
@@ -238,7 +238,7 @@
 
   .branding {
     width: 20%;
-    margin-right: 2%;
+    #{$margin-right}: 2%;
   }
 
   .nav-account {
@@ -263,7 +263,7 @@
 
     .branding {
       width: 20%;
-      margin-right: 2%;
+      #{$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);
+  #{$margin-right}: ($baseline/4);
 }
 
 // ui - badges
 .wrapper-ui-badge {
   position: absolute;
   top: -1px;
-  left: ($baseline*1.5);
+  #{$left}: ($baseline*1.5);
   width: 100%;
 }
 

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;
+      text-align: $left;
 
       // ui triangle/nub
       &:after {
@@ -167,20 +167,20 @@ nav {
   &.ui-right {
 
     .wrapper-nav-sub {
-      left: none;
-      right: 0;
+      #{$left}: none;
+      #{$right}: 0;
     }
 
     .nav-sub {
 
       // ui triangle/nub
       &:after {
-        right: $baseline;
+        #{$right}: $baseline;
         margin-right: -10px;
       }
 
       &:before {
-        right: $baseline;
+        #{$right}: $baseline;
         margin-right: -11px;
       }
     }

cms/static/sass/elements/_sock.scss

@@ -35,7 +35,7 @@
 
       [class^="icon-"] {
         @extend %t-icon6;
-        margin-right: ($baseline/4);
+        #{$margin-right}: ($baseline/4);
       }
 
       &:hover {
@@ -84,11 +84,11 @@
         @include clearfix();
 
         .action-item {
-          float: left;
-          margin-right: ($baseline/2);
+          float: flip(left, right);
+          #{$margin-right}: ($baseline/2);
 
           &:last-child {
-            margin-right: 0;
+            #{$margin-right}: 0;
           }
 
           .action {
@@ -98,7 +98,7 @@
             [class^="icon-"] {
               @extend %t-icon4;
               vertical-align: middle;
-              margin-right: $baseline/4;
+              #{$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;
+    text-align: $left;
 
     .copy {
       border-top: 4px solid $blue;
@@ -225,10 +225,10 @@
 
       .nav-item {
         display: inline-block;
-        margin-right: ($baseline*0.75);
+        #{$margin-right}: ($baseline*0.75);
 
         &:last-child {
-          margin-right: 0;
+          #{$margin-right}: 0;
         }
       }
 
@@ -437,22 +437,22 @@
 
     .copy {
       width: flex-grid(7, 12);
-      margin-right: flex-gutter();
+      #{$margin-right}: flex-gutter();
     }
 
     .nav-actions {
       width: flex-grid(4, 12);
-      float: right;
+      float: flip(left, right);
       margin-top: ($baseline/4);
       text-align: right;
 
       .nav-item {
         display: inline-block;
         vertical-align: middle;
-        margin-right: ($baseline/2);
+        #{$margin-right}: ($baseline/2);
 
         &:last-child {
-          margin-right: 0;
+          #{$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);
+  		#{$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);
+      float: flip(left, right);
+      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;
+  	    #{$margin-right}: ($baseline/2);
 
-       &:last-child {
-         margin-right: 0;
-       }
+  	    &:last-child {
+  	      #{$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();
+    #{$margin-right}: flex-gutter();
     padding: $baseline ($baseline*1.5);
 
     > section {
@@ -856,9 +856,9 @@ body.uxdesign.alerts {
         }
 
         a {
-          float: left;
+          float: flip(left, right);
           width: flex-grid(5, 12);
-          margin-right: flex-gutter();
+          #{$margin-right}: flex-gutter();
         }
       }
     }
@@ -882,7 +882,7 @@ body.uxdesign.alerts {
     @include clearfix;
 
     .alert-message {
-      float: left;
+      float: flip(left, right);
       margin: 4px 0 0 0;
       color: $gray-d3;
     }
@@ -892,7 +892,7 @@ body.uxdesign.alerts {
     }
 
     .alert-action {
-      float: right;
+      float: flip(left, right);
 
       &.secondary {
         @include orange-button;

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

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

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

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

cms/static/sass/style-app.scss

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

cms/static/sass/style-xmodule.scss

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

cms/static/sass/views/_account.scss

@@ -37,7 +37,7 @@
       .action {
         @extend %t-action3;
         position: absolute;
-        right: 0;
+        #{$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;
+      #{$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;
+      #{$margin-left}: $baseline;
 
       [class^="icon-"] {
-        margin-right: ($baseline/2);
+        #{$margin-right}: ($baseline/2);
       }
     }
   }
@@ -70,7 +68,7 @@
       width: flex-grid(3, 12);
 
       &.pagination-compact {
-        text-align: right;
+        text-align: $right;
       }
 
       &.pagination-full {
@@ -136,7 +134,7 @@
       .current-page {
         @extend %ui-depth1;
         position: absolute;
-        left: -($baseline/4);
+        #{$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;
+        #{$margin-right}: flex-gutter();
+        float: flip(left, right);
 
         .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);
+          #{$margin-right}: ($baseline/2);
           color: $gray-l4;
         }
 
@@ -86,9 +85,9 @@
       .checklist-status {
         @extend %t-copy-sub1;
         width: flex-grid(3, 9);
-        float: right;
+        float: flip(right, left);
         margin-top: ($baseline/2);
-        text-align: right;
+        text-align: $right;
         color: $gray-l2;
 
 
@@ -127,7 +126,7 @@
 
       .action-primary {
         @include green-button();
-        float: left;
+        float: flip(left, right);
 
         .icon-add {
           @extend %t-icon7;
@@ -141,7 +140,7 @@
         @include grey-button();
         @extend %t-action3;
         @extend %t-regular;
-        float: right;
+        float: flip(right, left);
 
         .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;
+        float: flip(left, right);
+        margin-top: ($baseline/2);
+        #{$margin-right}: flex-gutter();
       }
 
       .task-details {
         @extend %t-strong;
         display: inline-block;
         vertical-align: text-top;
-        float: left;
+        float: flip(left, right);
         width: flex-grid(6,9);
 
         .task-name {
@@ -264,7 +264,7 @@
         @include clearfix();
         display: inline-block;
         vertical-align: middle;
-        float: right;
+        float: flip(right, left);
         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

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

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

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;
+        #{$margin-right}: flex-gutter();
+        float: flip(left, right);
       }
 
       .tip {
         @extend %t-copy-sub2;
         width: flex-grid(5, 9);
-        float: right;
+        float: flip(right, left);
         margin-top: ($baseline/2);
-        text-align: right;
+        text-align: $right;
         color: $gray-l2;
       }
     }
@@ -372,7 +371,7 @@
         }
 
         .field {
-          float: left;
+          float: flip(left, right);
           width: flex-grid(3, 9);
           margin-bottom: ($baseline/4);
           margin-right: flex-gutter();
@@ -384,7 +383,7 @@
           .tip {
             position: absolute;
             top: 0;
-            right: 0;
+            #{$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;
+      #{$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);
+      float: flip(right, left);
+      #{$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);
+          #{$margin-right}: ($baseline*14);
         }
 
         .ui-toggle-expansion {
@@ -85,7 +83,7 @@
           opacity: 0.0;
           position: absolute;
           top: $baseline;
-          right: $baseline;
+          #{$right}: $baseline;
 
           .action {
             display: inline-block;
@@ -305,9 +303,9 @@
             display: block;
             width: 46%;
             border-bottom: none;
-            margin: 0 ($baseline*0.75) 0 0;
+            margin: flip(0 ($baseline*0.75) 0 0, 0 0 0 ($baseline*0.75));
             padding: ($baseline/4) 0 0 0;
-            float: left;
+            float: $left;
             position: relative;
 
             input, textarea {
@@ -318,7 +316,7 @@
                 @extend %ui-btn-flat-outline;
                 position: absolute;
                 top: 3px;
-                right: 0;
+                #{$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;
+	@extend %ui-window;
+	width: 30%;
+	padding: 20px 30px;
+	margin: 0;
+	border-radius: flip(0 3px 3px 0, 3px 0 0 3px);
+	#{$border-left}: none;
+	background: $lightGrey;
 
-  .title {
-    @extend %t-title4;
+	.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;
+      #{$margin-right}: 4px;
     }
   }
 

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();
+        #{$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;
+          margin: flip(0 ($baseline/2) ($baseline/10) 0, 0 0 ($baseline/10) ($baseline/2));
           color: $gray-d4;
         }